var panelContainerWidth = 0;
var panelContainerPosition = null;
var panelWidth = 0;
var numberOfPanels = 0;
var gapBetweenCollapsedPanels = 0;
var gapBetweenExpandedPanels = 0;
var animationSpeed = 400;

function animatePanel( id, toPosition) {
	$( "#" + id ).animate(
		{ "left": toPosition + "px" }, animationSpeed
	);
}

(function( $ ) {
    $(document).ready( function() {

	panelContainerWidth = $( "#view_window" ).width();
	panelContainerPosition = $( "#view_window" ).position();
	panelWidth = $ ("#panel-1" ).width();
	numberOfPanels = $ ("#view_window > div ").size();
	gapBetweenCollapsedPanels = panelContainerWidth / numberOfPanels;
	gapBetweenExpandedPanels = ( panelContainerWidth - panelWidth ) / ( numberOfPanels - 1 );

	for( var i=1; i<=numberOfPanels; i++ ) {
		if( i>1 ) {
			var moveToLeft = gapBetweenCollapsedPanels * (i - 1);
			$("#panel-" + i).animate(
				{ left: '+=' + moveToLeft }, animationSpeed
			);
		}

		$( "#panel-" + i ).hover(
			function( e ) { // Hover in function
				// Stop any animation done on this object.
				$(this).stop();
				var thisPanelOrderNumber = parseInt( this.id.split( "-" )[1] );
				var numberOfPanelsBefore = thisPanelOrderNumber - 1;
				var numberOfPanelsAfter = numberOfPanels - thisPanelOrderNumber;

				for(var j=thisPanelOrderNumber; j>1 ; j--) {
					$( "#panel-" + j ).stop();
					var panelPosition = $( "#panel-" + j ).position();
					var finalLeftPosition =  ( j - 1 ) * gapBetweenExpandedPanels;

					if( ( finalLeftPosition != panelPosition.left ) )
						animatePanel( "panel-" + j, finalLeftPosition);

				}

				for(var j=( thisPanelOrderNumber + 1 ); j<=( thisPanelOrderNumber + numberOfPanelsAfter); j++) {
					$( "#panel-" + j ).stop();
					var panelPosition = $( "#panel-" + j ).position();
					var finalLeftPosition = panelContainerWidth - ( ( numberOfPanels - j + 1 ) * gapBetweenExpandedPanels );

					if( ( finalLeftPosition != panelPosition.left ) )
						animatePanel( "panel-" + j, finalLeftPosition);
				}
			},
			function( e ) { // Hover out function
				// Prevent conflict when hovering out while hovering into another object.
				// This trigger hover out actions only if hovering out of the view window.
				// If inside then just let the hover in function do the work instead.
				var clientYRelativeToPanelContainer = e.clientY - parseInt( $("#view_window").css('border-top-width') ) - parseInt( $("#view_window").offset().top );
//parseInt( $("#view_window").css('border-top-width') ) - parseInt($( "#view_window").position().top);
				var clientXRelativeToPanelContainer = e.clientX - parseInt( $("#view_window").css('border-left-width') ) - parseInt($( "#view_window").offset().left);
				if( clientXRelativeToPanelContainer > 0 && clientXRelativeToPanelContainer < 920 && clientYRelativeToPanelContainer > 0 && clientYRelativeToPanelContainer < 390 ) return false;

				var thisPanelOrderNumber = parseInt( this.id.split( "-" )[1] );
				var numberOfPanelsBefore = thisPanelOrderNumber - 1;
				var numberOfPanelsAfter = numberOfPanels - thisPanelOrderNumber;

				for(var j=thisPanelOrderNumber; j>1 ; j--) {
					var panelPosition = $( "#panel-" + j ).position();
					var finalLeftPosition =  ( j - 1 ) * gapBetweenCollapsedPanels;

					if( ( finalLeftPosition != panelPosition.left ) )
						animatePanel( "panel-" + j, finalLeftPosition);
				}

				for(var j=( thisPanelOrderNumber + 1 ); j<=( thisPanelOrderNumber + numberOfPanelsAfter); j++) {
					var panelPosition = $( "#panel-" + j ).position();
					var finalLeftPosition = panelContainerWidth - ( ( numberOfPanels - j + 1 ) * gapBetweenCollapsedPanels );

					if( ( finalLeftPosition != panelPosition.left ) )
						animatePanel( "panel-" + j, finalLeftPosition);
				}
			}
		);

	}
   }); 

})(jQuery);