// remap jQuery to $
(function($){})(window.jQuery);


$(document).ready(function() {

  // Set up variables to dynamically set element widths
  
  var panelCount = $(".panel").size(),
      buffer = $(window).width() / 2,
      leftPadding = ( $(window).width() - $(".panel").width() ) / 2, // The left padding we need to apply to each panel in order to achieve horizontal middle positioning
      //panelWidth = $(".panel:first").width() + buffer + leftPadding,
      panelWidth = $(window).width(),
      viewportWidth = (panelCount * panelWidth), // Subtract teh buffer; due to removed right-padding for the last panel; add leftPadding value, so that the last panel is centered when scrolled all the way to the right..
      currentSelected = $("#trailer"),
      currentPos = 0; //used for keeping track of current scroll-position
  
 
  // Do some required manipulation of our layout
  $("#horizontal-awe").css('width', viewportWidth);
  $("#viewport").css('width', '100%');
  
  var panelPosition = leftPadding,
        curHeight = $('panel:first').height;
  
  $(".panel").each(function(){
    $(this).css('left', panelPosition)
    panelPosition += panelWidth;
  
  });
  
  $("header a").bind("click",function(event){  
  	event.preventDefault();  
  	var  target = $(this).attr("href"),
   	     leftPosition = Math.floor( $(target).position().left );
        
   	
    currentPos = Math.floor($(target).css('left').replace("px","")) - leftPadding;
    
    //currentPos += 400;
     
    //alert(currentPos)
    
    // Do the scroll animation:
  	$("#viewport").stop().animate({
      scrollLeft: currentPos
  	}, 2000, 'easeOutQuad', function(){  
      //debug("scrollToLeft: " + leftPosition + " | currentPos: " + currentPos + " | currentSelected: " + currentSelected)  
  	});
  });
  
  
  $('#viewport').overscroll({
    direction: 'horizontal',
    cancelOn: ".no-scroll",
    wheelDelta: 0
  });

  $('#videoholder').simpletube({displaytype: 'user', feedid: 'Believethedance', activeclass: 'currentvideo', videowidth: '700', videoheight: '420'});
  $('#videoholder').addClass('no-scroll');

    // Set up hovering for the social buttons (top right)
    var img_path = "images/"
    
    $('#social img.fb').hover(function(){
        $(this).attr("src", img_path + "icon_fb_hover.png")
    }, function(){
        $(this).attr("src", img_path + "icon_fb.png")
    });
    
    $('#social img.yt').hover(function(){
        $(this).attr("src", img_path + "icon_yt_hover.png")
    }, function(){
        $(this).attr("src", img_path + "icon_yt.png")
    });
    
    $('#social img.twitter').hover(function(){
        $(this).attr("src", img_path + "icon_twitter_hover.png")
    }, function(){
        $(this).attr("src", img_path + "icon_twitter.png")
    });
    
    
    
    
    
    $('article.featured div.dentist').scrollParallax({
	    'speed': -0.5,
	    'axis': 'x'
    });
    $('article.featured div.dancer').scrollParallax({
	    'speed': 0.2,
	    'axis': 'x'
    });
    
});  






/***************************************************************/
/***************************************************************/
/***************************************************************/
/***************************************************************/


$(window).resize(function() {
  //leftPadding = ( $(window).width() - $(".panel").width() ) / 2 // The left padding we need to apply to each panel in order to achieve horizontal middle positioning
  
  //$(".panel").css('padding-left', leftPadding);
  //alert(currentSelected.position().left);
  
  panelCount = $(".panel").size(),
  buffer = $(window).width() / 2,
  leftPadding = ( $(window).width() - $(".panel").width() ) / 2, // The left padding we need to apply to each panel in order to achieve horizontal middle positioning
  panelWidth = $(".panel:first").width() + buffer + leftPadding,
  viewportWidth = (panelCount * panelWidth) - buffer + leftPadding, // Subtract teh buffer; due to removed right-padding for the last panel; add leftPadding value, so that the last panel is centered when scrolled all the way to the right..
  currentSelected = $("#news"),
  currentPos = 0; //used for keeping track of current scroll-position
  
  // Do some required manipulation of our layout
  $("#horizontal-awe").css('width', viewportWidth);
  $("#viewport").css('width', '100%');
  
  var panelPosition = leftPadding,
        curHeight = $('panel:first').height;
  
  $(".panel").each(function(){
    $(this).css('left', panelPosition)
    panelPosition += panelWidth;
  
  });

});



/* optional triggers

$(window).load(function() {
	
});
*/