//<!--    Open comment for non-compatible browsers

// JavaScript Document
SLIDE_HOLD_TIME = 4000;
SLIDE_TRANSITION_SPEED = 2000;
SLIDE_DELAY = -2500;

FADE_IN_SPEED = 300;
FADE_OUT_SPEED = 300;

var scrollIndex = 0;

$(document).ready(function(){
	configureHomePageImageCycle();
	$(".scroll").scrollable({
			size: 1,
			loop: true,
			clickable: false,
			onSeek: function() {onScrollHandler();}
		}); 
	listenForThumbClickAndScroll();
	listenForGridIconClick();
	configureGroupedImageSelectors();
});


function configureHomePageImageCycle() {
	$('#homeImages').cycle({ 
		timeout:   	SLIDE_HOLD_TIME,  // milliseconds between slide transitions (0 to disable auto advance) 
		speed:		SLIDE_TRANSITION_SPEED,  // speed of the transition (any valid fx speed value) 
		delay:		SLIDE_DELAY
	});
}

function listenForThumbClickAndScroll() {
	$('#thumbLinks a').click(function(api) {		//When a link in the thumb grid is clicked
		var api = $(".scroll").scrollable(); 		//Get the scrollable api
		scrollIndex = parseInt($(this).attr('id'));	//Turn the id into an int we can use for the index
		api.seekTo(scrollIndex);					//Scroll to that index
		return false;								//Return false so the anchor tag doesn't do it's thing
	});
}

function onScrollHandler() {
	//Set the caption, blank by default
	var caption = '';
	var api = $(".scroll").scrollable(); 		//Get the instance of the scrollable api
	var originalIndex = scrollIndex;			//Get the index we just scrolled from
	var originalTargetTD = "td"+originalIndex;	//Set the id of the table cell we need to reset
	scrollIndex = api.getIndex();				//Get the index we scrolled to
	var targetTD = "td"+scrollIndex;			//Set the id of the table cell we need to show as selected
	if (originalIndex != 0)						//Set the cells correctly, but do nothing if either are the index page
		$("#"+originalTargetTD).removeClass("selected");
	if (scrollIndex != 0)
		$("#"+targetTD).addClass("selected");
	
	//Work out if we need to show one of the divs with extra pics in it, or hide one showing
	if ($('#ind_'+originalIndex).hasClass('group')) {
		//The one we're leaving is a group, hide it
		$('#ex'+originalIndex).fadeOut(FADE_OUT_SPEED);
	}
	if ($('#ind_'+scrollIndex).hasClass('group')) {
		//This is a group, work out which extra thumbs to show
		$('#ex'+scrollIndex).fadeIn(FADE_IN_SPEED);
		//Get the caption for the main active group image
		caption = $('#grp_'+scrollIndex+'_1 img').attr('title');
	} else {
		//Get the caption for the shown image only if this isn't the index grid
		caption = $('#ind_'+scrollIndex+'_1 img').attr('title');
	}
	if (scrollIndex == 0)
		caption = '';
	//Show the correct caption
	$('.caption').fadeOut(FADE_OUT_SPEED/1.5, function() {
		$('.caption').html(caption);
		$('.caption').fadeIn(FADE_IN_SPEED/1.5);
	});
}

function listenForGridIconClick() {
	$('.thumbGridIcon table').click(function() {
		//Scroll to the index page of the scrollable
		var api = $(".scroll").scrollable(); 		//Get the instance of the scrollable api
		api.seekTo(0)	//Go to zero page
	});
	$('.thumbGridIconDesign table').click(function() {
		//Scroll to the index page of the scrollable
		var api = $(".scroll").scrollable(); 		//Get the instance of the scrollable api
		api.seekTo(0)	//Go to zero page
	});
}

function configureGroupedImageSelectors() {
	//When a link is clicked
	$('.extraThumbGroup a').click(function() {
		//Set the target
		var target = "grp_"+$(this).attr('id');
		//Only change images if the target is not already shown
		if (target != $('#ind_'+scrollIndex+' div.active').attr('id')) {
			//Select the active div, fade it out, and fade in the target
			$('#ind_'+scrollIndex+' div.active').removeClass('active').fadeOut(FADE_OUT_SPEED, function() {
				
				$('#'+target).fadeIn(FADE_IN_SPEED, function(){
					$('#'+target).addClass('active');
				});
			});
		}
		
		return false;
	});
}

//-->