$(document).ready(function(){
	$("body").addClass("js");
	spxTransPanelConfig();
});

var spxTransImageSrc;
var spxTransImageWidth;
var spxTransImageHeight;
var spxTransImageAlt;
var spxTransImageTitle;
var spxTransImageLink;
var spxTransPanelsArr;
var spxTransPanelHTML;
var spxTransPanelCounter;
var spxTransPanelFrameTime;
var spxTransPanelFadeInTime;
var spxTransPanelFadeTime;

function spxTransPanelConfig()	{

	spxTransPanelCounter = 0;
	spxTransImageSrc = $("#spxTransitionPanelStatic img").attr("src");
	spxTransImageWidth = $("#spxTransitionPanelStatic img").attr("width");
	spxTransImageHeight = $("#spxTransitionPanelStatic img").attr("height");
	spxTransImageAlt = $("#spxTransitionPanelStatic img").attr("alt");
	spxTransImageTitle = $("#spxTransitionPanelStatic img").attr("title");
	spxTransImageLink = $("#spxTransitionPanelStatic a").attr("href");
	spxTransPanelsArr = new Array ([spxTransImageSrc, spxTransImageTitle, spxTransImageLink]);

	/* 
	BEGIN CONFIGURATION OF IMAGE ROLLER
	
	IMPORTANT NOTES:
	The array items below represent the 2nd, 3rd, 4th.. nth images in the roller.
	To edit the first, you must edit the original HTML - this allows at least the first image to show if the user has JavaScript disabled.
	To add or remove images, add or remove arrays from the list below.
	
	*/
	
	spxTransPanelsArr.push([
		"/images/homepage-transitions/revamped.png",
		"",
		"http://www.facebook.com/movahairdressing"
	]);
	
	spxTransPanelsArr.push([
		"/images/homepage-transitions/tigi-colour.png",
		"",
		"news.html"
	]);
	
	spxTransPanelsArr.push([
		"/images/homepage-transitions/win-an-ipod.png",
		"",
		"contact.html#mailinglist"									// Path to page you want image to link to
	
	]);
	
	spxTransPanelsArr.push([
		"/images/homepage-transitions/recommend-a-friend.png",
		"",
		"news.html#recommend"
	]);
	
	spxTransPanelsArr.push([
		"/images/homepage-transitions/win-an-ipod.png",
		"",
		"contact.html#mailinglist"	
	]);
		
	spxTransPanelFrameTime = 4000; // Time in milliseconds between image changes
	spxTransPanelFadeInTime = 1500; // Time in milliseconds for the first panel to fade in
	spxTransPanelFadeTime = 1000; // Time in milliseconds for the dissolve effect


	/* END CONFIGURATION OF IMAGE ROLLER */



	// With the animation configured, the following function will start the images rolling.
	/* Load in first image - only run the animation after the image has loaded */
	var spxFirstPanelImage = $('<img src="'+spxTransPanelsArr[0][0]+'" width="'+spxTransImageWidth+'" height="'+spxTransImageHeight+'" alt="'+spxTransImageAlt+'" title="'+spxTransPanelsArr[0][1]+'" />');
	$(spxFirstPanelImage).load(function() {
		spxTransPanelHTML = '<li class="spxTransitionPanel spxPanelJs"><a href="'+spxTransPanelsArr[spxTransPanelCounter][2]+'"></a></li>';
		$(".spxTransitionPanel").before(spxTransPanelHTML);
		$(".spxTransitionPanel a").append(spxFirstPanelImage);
		$(".spxTransitionPanel:last").remove();
    	$(".spxTransitionPanel").fadeTo(0, 0);
		$(".spxTransitionPanel").fadeTo(spxTransPanelFadeInTime, 1);

		var spxTransPanelFadeIn = function() {
			spxIteratePanels();
		}	
		var spxTransPanelFadeInTimeout = setTimeout(spxTransPanelFadeIn, spxTransPanelFadeInTime);	
	});
	
}



function spxIteratePanels()	{

	spxTransPanelHTML = '<li class="spxTransitionPanel spxPanelJs"><a href="'+spxTransPanelsArr[spxTransPanelCounter][2]+'"><img src="'+spxTransPanelsArr[spxTransPanelCounter][0]+'" width="'+spxTransImageWidth+'" height="'+spxTransImageHeight+'" alt="'+spxTransImageAlt+'" title="'+spxTransPanelsArr[spxTransPanelCounter][1]+'" /></a></li>';
	$(".spxTransitionPanel").before(spxTransPanelHTML);

	var spxTransPanelTransition = function()	{ 
		
		$(".spxTransitionPanel:last").fadeTo(spxTransPanelFadeTime, 0);
		var spxTransPanelFade = function()	{
			if (spxTransPanelCounter == spxTransPanelsArr.length-1) {
				spxTransPanelCounter = 0;
			} else {
				spxTransPanelCounter++;
			}
			$(".spxTransitionPanel:last").remove();
			spxIteratePanels();
		}
		var spxTransPanelFadeTimeout = setTimeout(spxTransPanelFade, spxTransPanelFadeTime);
		
	}
	var spxTransPanelTimeout = setTimeout(spxTransPanelTransition, spxTransPanelFrameTime);
	
}