var currentFlow = 0;
var maxFlow = 0;
var flowWidth = 430;
var flowMargin = 216;
var flowTimer = 4500;

$(document).ready( function() { 
	
	/*
	adjustImageWidth("img.centered");
	//detect page resize
	$(window).resize(function() {
	  //resize just happened, pixels changed
	  adjustImageWidth("img.centered");	  
	});
*/
	/**
	* Homepage Flow : Setup
	**/
	$("ul#flow>li:nth-child(1)").css({ top: '0px', left: '10216px' });
	$("ul#flow>li:nth-child(2)").css({ top: '0px', left: '10646px' });
	$("ul#flow>li:nth-child(3)").css({ top: '0px', left: '11076px' });
	$("ul#flow>li:nth-child(4)").css({ top: '0px', left: '11506px' });
	$("ul#flow>li:nth-child(5)").css({ top: '0px', left: '11936px' });
	maxFlow = ($("ul#flow>li").length - 1);

	$("ul#flow>li div.cover").click(function() { 
		var i = $(this).parent('li').index();
		colsFlowTo(i);

		return false;
	}); 
	
	if($.browser.safari){
		colsFlowTo(0, 4500);
	}
	else{
		colsFlowTo(0, 4000);
	}

});

//adjust Element Width as per screen width
function adjustImageWidth(elementSelector){
	var newScreenWidth = getScreenWidth() - 216;
    $(elementSelector).css('width', newScreenWidth + "px");
}

//get screen size
function getScreenWidth() {
  var screenWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    screenWidth = window.innerWidth;
  } else if( document.documentElement && document.documentElement.clientWidth ) {
    //IE 6+ in 'standards compliant mode'
    screenWidth = document.documentElement.clientWidth;
  } else if( document.body && document.body.clientWidth ) {
    //IE 4 compatible
    screenWidth = document.body.clientWidth;
  }
  
  return screenWidth;
}


function colsFlowTo(i, timer) {

	var offset = (i > 0) ? 60 : 0;
	
	if( i > 0 && i <= maxFlow ) {
		var selector = "#arrowRight_" + (i-1).toString();
		$(selector).css("display","block");
	}
	
	if( i >= 0 && i <= maxFlow ) {

		$("ul#flow>li").addClass('fixed');

		//
		// slide to i
		var index = 0, diff = 0;
		$("ul#flow>li").each(function() {

			//
			// unset fixed if active
			var complete = (index == i) ? function() { 
					$(this).removeClass('fixed');
				} : null;

			diff = (i - index);
			$(this).animate({ left: ((-1*diff*flowWidth)+flowMargin+offset) +'px' }, timer, complete);
			index++;
		});


		$("#panelnav ul li").removeClass('active').eq(i).addClass('active');
		currentFlow = i;
	}

}

function colsFlowNext() {
	alert("panel:" + currentFlow+1);
	colsFlowTo(currentFlow+1, flowTimer);
}

function colsFlowPrev() {
	alert("panel:" + currentFlow - 1);
	colsFlowTo(currentFlow-1, flowTimer);
}