/**
 *
 *	EA '2008 Merry Christmas Ecard'
 * 	JavaScript for Gallery
 *
 *	@pages: all
 *
 *	@copyright 2008 TBWA\Manchester
 *	@edited 25/11/2008 Phil Thompson
 */
 
 
/**
 *	prepareForm()
 *
 */
function prepareForm(){
	/* add image framing to HTML */
	$('#image-holder').css('overflow','hidden').append('<div id="image-frame">&nbsp;</div>');
	/* remove radio buttons */
	$('input.ecard_design_radio').remove();	
	$('br.ecard_design_br').remove();	
	/* create hidden text field */
	var hidden = '<input type="hidden" value="1" name="ecard_design" id="ecard_design" />';
	$('#ecard_buttons').append(hidden);
}
 
/**
 *	gallery()
 *	when user clicks thumbnails scroll the images to the left
 *	or to the right.
 *
 *  NOTE: thumbnails need the width and height 
 *	attributes hardcoded into the HTML for this to work
 *
 */ 
function gallery(){
	
	var counter = 1;
	
	/* grab dimensions of images and work out how wide areas should be */
	var thumbWidth = $('div#image img:first-child').width();
	var imagesLength = $('div#image img').size();
	
	var paddingSize = 5;
	if (($.browser.msie) && ($.browser.version < 7)) paddingSize = 10;
	
	var imagesWidth = ((thumbWidth*imagesLength)+(imagesLength*paddingSize));	
	$('#image').css('width',imagesWidth+'px');
	$('#image').css('left','0px');
	
	var currentPosition;
	var newPosition;	
	var maxLeft = ((imagesLength-1)*(thumbWidth+5));
	
	
	/* Previous Link clicked: so set new position */
	$('#previous-ecard').click(function(){
		currentPosition = parseInt($('#image').css('left'));
		newPosition = (currentPosition+(thumbWidth+5)); 
		/* If we're at the first image we send user back to last image */
		if(currentPosition == 0){
			newPosition = '-'+(maxLeft-5);
			counter = imagesLength;
		}else{
			counter--;	
		}
		
		/* Scroll */
		scrollImage(newPosition + 'px', counter);
		return false;
	});
	
	/* Next link clicked: so set new position */
	$('#next-ecard').click(function(){
									
		currentPosition = parseInt($('#image').css('left'));
		newPosition = (currentPosition-(thumbWidth+5));  
		
		/* if we're at the last image, scroll back to the first */
		if(newPosition < '-'+(maxLeft)){
			newPosition = 0;
			counter  = 1;
		}else{
			counter++;	
		}
		/* Scroll */
		scrollImage(newPosition + 'px', counter);
		return false;
	});		
	
}

/**
 *	scrollImage
 *  uses jQuery's animate function
 *	@var newPositon - location (in pixels) to scroll too.
 */
function scrollImage(newPosition, counter){
	
	
	if(newPosition.length > 0){
		$('#image').animate({
			left: newPosition
		}, 1000 );
		swapBigImage(counter)
	}
}

/**
 *	swapBigImage()
 *	change the big image based on user selection
 *	@var counter
 */
function swapBigImage(counter){
	updateFormField(counter);
	/* hide all */
	$('div#ecard_image img').removeClass('selected');
	/* show relevant */
	$('div#ecard_image a:nth-child('+counter+') > img').addClass('selected'); // added link
	//$('div#ecard_image img:nth-child('+counter+')').addClass('selected');
}

/**
 *	updateFormField()
 *	hidden a hidden form field so the user selection is stored
 *	@var counter
 */
function updateFormField(counter){
	$('#ecard_design').val(counter);
}
 
/* document.ready - onload */ 
$(document).ready(function(){
	prepareForm();
	gallery();
});