// JavaScript Document
$(document).ready(function() {	
	//Show Banner
	$(".main_image .desc").show(); //Show Banner
	$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity

	//Click and Hover events for thumbnail list
	$(".image_thumb ul li:first").addClass('active');
	$(".main_image .sliderImage").click(function(){
		$(".image_thumb ul li.active").click();
	}).hover(function() {
		clearInterval(playSlideshow);
	}, function() {
		playSlideshow = setInterval( "slideSwitch()", switchDelay )
	});

	$(".image_thumb ul li").hover(function(){
		//Set Variables
		doSlideClick($(this));
	}).hover(function(){
		$(this).addClass('hover');
	}, function() {
		playSlideshow = setInterval( "slideSwitch()", switchDelay );
	});

	//Toggle Teaser
	$("a.collapse").hover(function(){
		$(".main_image .block").slideToggle();
		$("a.collapse").toggleClass("show");
	});

	$(".image_thumb ul li").hover(function(){
		clearInterval(playSlideshow);
	}, function() {
		$(this).removeClass('hover');
	});
});//Close Function

	function doSlideSwitch(obj) {
		var $$ = obj;
		var imgAlt = $$.find('img').attr("alt"); //Get Alt Tag of Image
		var imgTitle = $$.find('a').attr("href"); //Get Main Image URL
		var imgDesc = $$.find('.block p').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
			/*			
				$(".main_image img").animate({ opacity: 0 }, 250, function() {
					$(".main_image img").attr({ src: imgTitle, alt: imgAlt }).animate({ opacity: 1 }, 250);
				});
				$(".main_image .block").animate({ opacity: 0.85, marginLeft: "0", marginTop: "0" }, 250);
			*/
			var imgBlock = $(".main_image .block");
			if (imgBlock.offset().left > 0 && imgBlock.html() != imgDesc)
				imgBlock.animate({ opacity: 0.95, marginLeft: "0", marginTop: "0" }, 250);

			var fadeIn = function() {
				$(".main_image img").attr({ src: imgTitle, alt: imgAlt }).animate({ opacity: 1 }, 250);
				$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginLeft: "0", marginTop: "0" }, 400);
			}
			if ($(".main_image img").attr('src') != imgTitle)
				$(".main_image img").animate({ opacity: 0 }, 500, fadeIn);
			else fadeIn();
		}

		$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
		$$.addClass('active');  //add class of 'active' on this list only
		return false;
	};
                        
	function doSlideClick(obj) {
		var $$ = obj;
		var imgAlt = $$.find('img').attr("alt"); //Get Alt Tag of Image
		var imgTitle = $$.find('a').attr("href"); //Get Main Image URL
		var imgDesc = $$.find('.block p').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
			var imgBlock = $(".main_image .block");
			if (imgBlock.offset().left > 0 && imgBlock.html() != imgDesc)
				imgBlock.animate({ opacity: 0.95, marginLeft: "0", marginTop: "0" }, 250);

			var fadeIn = function() {
				$(".main_image img").attr({ src: imgTitle, alt: imgAlt }).animate({ opacity: 1 }, 250);
				$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginLeft: "0", marginTop: "0" }, 400);
			}
			if ($(".main_image img").attr('src') != imgTitle)
				$(".main_image img").animate({ opacity: 0 }, 500, fadeIn);
			else fadeIn();
		}

		$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
		$$.addClass('active');  //add class of 'active' on this list only
		return false;
	};

	function slideSwitch() {
		var $active = $('#slideshow li.active');
		if ( $active.length == 0 ) $active = $('#slideshow li:last');

			// use this to pull the divs in the order they appear in the markup
			var $next =  $active.next().length ? $active.next()
			: $('#slideshow li:first');
			doSlideSwitch($next);
	};

	$(function() {
		playSlideshow = setInterval( "slideSwitch()", switchDelay );
	});
