// JQuery animated banner
// Coded by Andrew Green Design - 2011

// Target page must contain the following HTML structure
//
// <div id="mainimage">
//     <a href="#"><img /></a>
// </div>
//

// Customisation vars
var animationSpeed = 1000; // this is how long each fade takes in milliseconds
var autoCycleImages = true; // when set to true this causes the slideshow to automatically change image
var imageDisplayTime = 5000; // when the above is true this is how long each slide is displayed in milliseconds 
var imagesFolderPath = "/site_media/images/"; // Images folder, where your image files are stored, use relative or absolute URLS as appropriate - end with /

// these arrays hold the image file names and the urls which are called when each slide is clicked.
var imageList = new Array();
var urlList = new Array();

// Image 1 - product range
imageList[0] = "renapurSlideShowBannerWorking260911-1.jpg";
urlList[0] = "/";

// Image 2 - woods
imageList[1] = "renapurSlideShowBannerWorking260911-2.jpg";
urlList[1] = "/shop/product/renapur-balsam/";

// Image 3 - handbag
imageList[2] = "renapurSlideShowBannerWorking260911-3.jpg";
urlList[2] = "/shop/";

// Image 4 - testimonials
imageList[3] = "renapurSlideShowBannerWorking260911-4.jpg";
urlList[3] = "/what-our-customers-say/";

// Image 5 - saddle
imageList[4] = "renapurSlideShowBannerWorking260911-5.jpg";
urlList[4] = "/shop/product/renapur-balsam-litre/";

// ---- DO NOT EDIT BEYOND THIS POINT ---- //

// global script vars
var currentIndex = 0;
var motionFlag = false;
var mytimer = false;

// preload the large images
var loadedImages = new Array();
for (var i = 0; i < imageList.length; i++) {
	loadedImages[i] = new Image();
	loadedImages[i].src = "images/" + imageList[i];
}

// document ready adds HTML into the page for the thumbs and kicks off the timer.
$(document).ready(function() {
	setupHTML();
	if (autoCycleImages) timer();
});

// draw the thumbnail code.
function setupHTML() {
	
	// setup thumbnail code.
	var codeBlock = '<div id="thumbnails"><ul>';
	
	for (var i = 0; i < imageList.length; i++) {
		var ind = i + 1;
		codeBlock += '<li><a href="javascript:setImage(' + ind + ');" id="thumblable' + ind + '"';
		if (i == currentIndex) codeBlock += ' class="selectedThumb"';
		codeBlock += '>' + ind + '</a></li>';
	}
	codeBlock += "</ul></div>";
	
	// add the code at the end of the #mainimage block
	$("#mainimage").after(codeBlock);
}

// set timer function
function timer() {
	mytimer = setTimeout("nextImage()",imageDisplayTime);	
}

// move on to the next image - called by the timer timeout.
function nextImage() {
	// this if disables all buttons while an animation is taking place
	if (!motionFlag) {	
		currentIndex += 1;
		if (currentIndex >= imageList.length) currentIndex = 0;
		fadeOut();
	}
}

// move to the previous image, called from a button
function lastImage() {
	if (!motionFlag) {
		currentIndex -= 1;
		if (currentIndex < 0) currentIndex = imageList.length - 1;
		fadeOut();
	}
}

function setImage(no) {
	// this if disables all buttons while an animation is taking place
	if (!motionFlag) {
		currentIndex = new Number(no) - 1;
		fadeOut();	
	}
}

function fadeOut() {
	// we're calling an animation so set the flag to on
	motionFlag = true;
	// this fades the main image - the callback brings the next image in after replacing it's src
	$('#mainimage img').fadeOut(animationSpeed,function() {								 
		// change the main image src attribute now that it's invisible
		this.src = imagesFolderPath + imageList[currentIndex];
		$("#mainimage a").attr("href",urlList[currentIndex]);
		//swop the selected thumb highlight
		$("a.selectedThumb").removeClass("selectedThumb");
		$("#thumblable" + (currentIndex + 1)).addClass("selectedThumb");
		// then we fade the change image back in
		$(this).fadeIn(animationSpeed, function() {
			// when this second callback has triggered we've completely done so we can set the flag back to open
			// and we can reset the time out and re-start it running.					 
			motionFlag = false;	
			if (autoCycleImages) {
				clearTimeout(mytimer);
				timer();
			}
		});
	});	
}