//Main functions for after page loads
$(document).ready(function() {
	$(".main_image .desc").show(); //Show Banner
	$(".main_image .block").animate({ opacity: 1 }, 1 ); //Set Opacity
	
	//Set first thumbnail to 'active'
	$(".image_thumb ul li:first").addClass('active'); 
	
	//Set thumbnail opacity
	$(".image_thumb ul li a").animate({ opacity: 0.25 }, 1 ); //Set Opacity
	$(".image_thumb ul li a:first").animate({ opacity: 1 }, 1 ); //Set Opacity
	
	//Load initial description
	var InitialFeaturedDesc = $(".image_thumb li:first .block").html();
	$(".main_image .desc .block ").html(InitialFeaturedDesc);
	var InitialFeaturedImg = $(".image_thumb li:first a").attr("name");
	$(".main_image img").attr({ src: InitialFeaturedImg})
	
	//Set speed & start timer for thumbnail rotation
	var speed = 5000;
	var rotation = setInterval('TimedSwitch()', speed);
	
		//Stop rotation when hovering over description
		$("div.desc").hover(function() { 
			//Stop the rotation
			clearInterval(rotation);
		}, //Close mouseover -- Start mouseout
			function() {
				rotation = setInterval('TimedSwitch()', speed);
			} //Close mouseout
		);
		//Stop rotation when hovering over description
		$(".image_thumb ul li").hover(function() { 
			//Stop the rotation
			clearInterval(rotation);
		}, //Close mouseover -- Start mouseout
			function() {
				rotation = setInterval('TimedSwitch()', speed);
			} //Close mouseout
		);
	
	//Fix description link opacity
	$(".image_thumb ul li div.block p a").animate({ opacity: 1 }, 1 );
	
	//Click events for thumbnail list
	$(".image_thumb ul li").click(function() { 
		if ($(this).is(".active")) {  //If it's already active, then...
			//Do nothing
		}
		else {
			//Change thumbnail styling
			$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all thumbnails
			$(this).addClass('active');  //Add class of 'active' on this thumbnail only
			
			//Set thumbnail opacity
			$(".image_thumb ul li a").animate({ opacity: 0.25 }, 1 );
			$(".image_thumb ul li.active a").animate({ opacity: 1 }, 1 );
			
			//Fix description link opacity
			$(".image_thumb ul li div.block p a").animate({ opacity: 1 }, 1 );
			
			//Set variables
			var imgAlt = $(this).find('img').attr("alt");	//Get Alt Tag of Image
			var imgTitle = $(this).find('a').attr("name");	//Get Main Image URL
			var imgH2 = $(this).find('.block H2').html(); 	//Get HTML of the "block" H2 container
			var imgP = $(this).find('.block p').html(); 	//Get HTML of the "block" p container
			var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of "block"
			
			//Animate the image & description
			$(".main_image img").animate({ opacity: 0}, 500);
			
			$(".main_image p").animate({ opacity: 0 }, 500, function() {
				$(".main_image p").html(imgP).animate({ opacity: 1 }, 500);
			});
			
			$(".main_image h2").animate({ opacity: 0 }, 500, function() {
				$(".main_image h2").html(imgH2).animate({ opacity: 1 }, 500);
				$(".main_image img").attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 500);
			});
		}
		
		return false;
	});	
}); //Close main 'document ready' function


//Additional functions
function TimedSwitch() {
	//Define new 'active' thumbnail
	var $active = $('.image_thumb ul li.active').next();
	if ( $active.length == 0 ) $active = $('.image_thumb ul li:first'); //goes back to start when finishes
	
	//Define previous 'active' thumbnail
	var $prev = $('.image_thumb ul li.active');
	
	//Change thumbnail styling
	$prev.removeClass('active');
	$active.addClass('active');
	
	//Change thumbnail opacity
	$(".image_thumb ul li a").animate({ opacity: 0.25 }, 1 );
	$(".image_thumb ul li.active a").animate({ opacity: 1 }, 1 );
	
	//Fix description link opacity
	$(".image_thumb ul li div.block p a").animate({ opacity: 1 }, 1 );
	
	//Set variables
	var imgAlt = $active.find('img').attr("alt");	//Get Alt Tag of Image
	var imgTitle = $active.find('a').attr("name");	//Get Main Image URL
	var imgH2 = $active.find('.block h2').html();	//Get HTML of the "block H2" container
	var imgP = $active.find('.block p').html();		//Get HTML of the "block p" container
	var imgDescHeight = $(".main_image").find('.block').width(); //Calculate height of "block"
	
	if ($(this).is(".active")) { //If the list item is active/selected, then...
		return false; // Don't click through – Prevents repetitive animations on active/selected list-item
	}
	else { //If not active then...
		//Animate the image & description
		$(".main_image img").animate({ opacity: 0}, 500);
		
		$(".main_image p").animate({ opacity: 0 }, 500, function() {
			$(".main_image p").html(imgP).animate({ opacity: 1 }, 500);
		});
		
		$(".main_image h2").animate({ opacity: 0 }, 500, function() {
			$(".main_image h2").html(imgH2).animate({ opacity: 1 }, 500);
			$(".main_image img").attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 500);
		});
	}
	
	return false;
}