// JavaScript Document
// Jquery Animated 4-Choice Promotional Area
// © Copyright 2010 Ronan McCormack 
// http://www.ronanmccormack.com
// Use and modification of this code without permission is prohibited

/*
Guidelines:

	Required elements
	-----------------
	#promoContent			-		Area that contains all content. The background image comprises of all the main 
									images to be displayed in a row. When a user mouses-over a new thumbnail, this
									background image is animated to slide in the new image.		
																
	#thumb1					-		Each of the thumbnail images which the user can choose
	#thumb2
	#thumb3
	#thumb4
	
	#promoText1				-		Each of the images which contain the text that overlays each of the main images.
	#promoText2						All of these have transparent backgrounds and are animated separately.
	#promoText3
	#promoText4
*/

// Global var to hold the timer that delays animation of the text overlays. Necessary so that the timer can be cancelled if another one has been fired.
var timer;

// Global var to hold a reference to the text overlay image that is currently being processed in the loop in the 'showTextContent' function
var currentText;

// Animates the background image of the promotional box to slide in/out main images
function animateContent(delayAmt){
	$('#promoContent').stop().animate({backgroundPosition:"("+ delayAmt +"px 0)", easing: 'easein'}, {duration:700})
}

// Slides out the current text overlay (if necessary) and slides in the new one
function showTextContent(textObj){
	
	// Clear the time delay for animation of text overlay (sliding in) if there is one queued
	clearTimeout(timer);
	
	// Set timer to slide in the text overlay for the current item
	timer = window.setTimeout("showCurrent('"+textObj+"')", 1000);
	
	//Loop thru all the text overlays and animate them to return to the hidden state, except for the currently selected item.
	for(var i=0; i<textImgs.length; i++){
		if(textImgs[i] != textObj){
			currentText = textImgs[i];
			$(textImgs[i]).stop().animate({
				marginLeft: "-954px"
			}, 
			300, 
			function() {
				$(currentText).css('display', 'none');
			});
		}
	}
}

// Animates the text for the current promo item to slide in. This is fired after a time delay set in the above function
function showCurrent(currTextObj){
	$(currTextObj).css('display', 'block');
	$(currTextObj).stop().animate({marginLeft: "0"}, {duration:300});
}

// Resizes the thumbnail image ** Changed to just move the thumbnail up because of 'jittering' in IE
function resizeThumbs(currThumb){
	$(currThumb).stop().animate({top: "-25"}, 300);
	for(var i=0; i < thumbs.length; i++){
		if(thumbs[i] != currThumb){
				$(thumbs[i]).stop().animate({top:"-15"}, 300);
		}
	}
}

// Initialise the promoarea and set mouseover events
$(function(){
	$('#thumb1')
		.mouseover(function(){			
			window.setTimeout("animateContent(0)", 300);
			resizeThumbs('#thumb1');
			showTextContent('#promoText1');
		})
	$('#thumb2')
		.mouseover(function(){
			showTextContent('#promoText2');
			window.setTimeout("animateContent(-954)", 300);
			resizeThumbs('#thumb2');
		})
	$('#thumb3')
		.mouseover(function(){
			window.setTimeout("animateContent(-1908)", 300);
			showTextContent('#promoText3');
			resizeThumbs('#thumb3');
		})
	$('#thumb4')
		.mouseover(function(){
			window.setTimeout("animateContent(-2862)", 300);
			showTextContent('#promoText4');
			resizeThumbs('#thumb4');
		})
});