$(document).ready(function() {	

	//Show Banner
	$(".main_image .desc").show(); //Show Banner
	$(".main_image .block").animate({ opacity: 0.70 }, 1 ); //Set Opacity
	
	/**${".main_image .wide").animate({opacity: 0.50 }, 1 ); //Set Wide opacity **/

	//Click and Hover events for thumbnail list
	$(".image_thumb ul li:first").addClass('active'); 
	$(".image_thumb ul li").click(function(event){ 
		//Set Variables
		var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
		var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
		var imgDesc = $(this).find('.block').html(); 	//Get HTML of block
		var imgDescHeight = $(".main_image").find('.block').height();	//Calculate height of block	
		
		if ($(this).is(".active")) {  //If it's already active, then...
			return false; // Don't click through
		} else {
			//Animate the Teaser	
			/**
			* @update 2010/03/05
			* @author Conor McTernan conormcternan@gmail.com
			* @note added a routine that allows us to describe differing widths of the 'popup' overlay. 
			* we add an id of 'wide' to the <a> element and also add a class 'wide' to our css which describes the width/properties
			* of our different layer
			**/
			/** we check for the id of the element we just clicked on **/
			
			/**
			 * @update 2010/03/09
			 * @author Conor McTernan conormcternan@gmail.com
			 * 
			 * we've removed the id from the link itself. instead we check either it's parent or it's grandparent for the id to be present
			 * if we see the 'wide' id in either the parent or grand parent we add the 'wide' class
			 */
			var tItem	=	event.target;
			
			var tParent	=	$(tItem).parent();
			
			var	tID		=	$(tItem).parent().attr('id');
			
			var tGrandParentID	=	$(tParent).parent().attr('id');
			
			if(event.target.id == 'wide' || tID == 'wide' || tGrandParentID == 'wide')
			{
				// if the element has an ID of 'wide' we add the 'wide' class, this makes it take up the 'wider' space				
				$(".main_image .block").addClass('wide');
			}
			else
			{
				// otherwise, if the wide class is present, we remove it
				if($(".main_image .block").hasClass('wide'))	$(".main_image .block").removeClass('wide');
			}
			
			$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
					$(".main_image .block").html(imgDesc).animate({ opacity: 0.70,	marginBottom: "0" }, 250 );
					$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
					/**
					 * @update 2010/03/09
					 * @author Conor McTernan conormcternan@gmail.com
					 * we hide any text within the 'small' tag in the (large) left hand display
					 */
					$(".main_image small").css('display', 'none');
				});			
			
		}
		
		
		
		$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
		$(this).addClass('active');  //add class of 'active' on this list only
		return false;
		
	}) .hover(function(){
		$(this).addClass('hover');
		}, function() {
		$(this).removeClass('hover');
	});
			
	//Toggle Teaser
	$("a.collapse").click(function(){
		$(".main_image .block").slideToggle();
		$("a.collapse").toggleClass("show");
	});
	
});//Close Function