var inTransition = false;
var stripPage = 0;
var pageWidth = 5;
var imageWidth = 76;
var marginWidth = 5;
var maxImages = 0;
var lastPage = 0;
		
$(document).ready(function(){
	init();
});

function init()
{	
	//Set the correct page colours
	$("#colourPicker").hide();
	$("#innerPage").css("background-color",$("#pageColour").css("background-color"));
	//$("#col1").css("background-color",$("#marginColour").css("background-color"));
	
	//Hide all the images bar the first
	$(".gallery li").not("li:nth-child(1)").hide();
	//Add the hover events
	maxImages = $(".imageStrip li").hover(function(){showImage(this);},function(){hideImage(this);}).length;
	
	lastPage = Math.ceil(maxImages/pageWidth);
	
	$(".stripHolder").css("width","400px");
	$(".stripHolder").css("overflow","hidden");
	$(".stripHolder").css("position","relative");
	
	$(".imageStrip").css("width","5000px");
	$(".imageStrip").css("height","76px");
	$(".imageStrip").css("position","relative");
	
	$(".scrollLeft").click(function(){scrollStrip(-1);});
	$(".scrollRight").click(function(){scrollStrip(1);});
	
	updateArrows();
	
	update();
	
	//Check if this is the current page
	var items = $(".imageColumn a");
	var currentPageUrl = document.URL;
    currentPageUrl = currentPageUrl.split("/");
    currentPageUrl = currentPageUrl[currentPageUrl.length-1];
	for (var i=0; i<items.length; i++)
	{
		if (items[i].href.indexOf(currentPageUrl) >= 0 && currentPageUrl != "")
		{
			$(items[i]).addClass("on");
		}
	}
	
	$("#wrapper").css("visibility", "visible");
}

function scrollStrip(dir)
{
	stripPage = stripPage + dir;
	
	//alert(stripPage);
	
	updateArrows();
	
	var distanceToMove = stripPage * ((pageWidth * (imageWidth+marginWidth)));
	
	$(".imageStrip").animate({ 
        left: -distanceToMove
      }, 1000, "easeOutCirc" );;
	
	
}

function updateArrows()
{
	if (stripPage >= lastPage-1)
	{
		stripPage = lastPage-1;
		$(".scrollRight").fadeTo(300,0);
	}
	else
	{
		$(".scrollRight").fadeTo(300,1);
	}
	
	if (stripPage <= 0)
	{
		stripPage = 0;
		$(".scrollLeft").fadeTo(300,0);
	}
	else
	{
		$(".scrollLeft").fadeTo(300,1);
	}	
}

function showImage(what)
{
	inTransition = true
	var imageLis = $(".gallery li");
		
	var controllerLis = $(".imageStrip li");
	for (var i=0; i<imageLis.length; i++)
	{
		if (controllerLis[i] == what)
		{
			$(imageLis).fadeTo(1, 0);
			$(imageLis).hide();
			
			$(imageLis[i]).show();
			$(imageLis[i]).fadeTo(300, 1, function(){update();});
		}
	}
}

function hideImage(what)
{

}

function update()
{
	inTransition = false;
}