$(document).ready(function() {	

	var imageChangeDelay = 200;
	var seconds	   = 4;
	var liIndex	   = 0;
	var intervalID = -1;

	var intervalFunction = function(){
		if(liIndex > $(".image_thumb ul li").length)
			liIndex = 0;
		else
			liIndex++;

		$(".image_thumb ul li > div > h3:eq(" + liIndex +")").trigger("click");

	};
	
	//Show Banner
	$(".main_image .desc").show(); //Show Banner
	$(".main_image .block").animate({ opacity: 1 }, 1 ); //Set Opacity
        
        // for each entry on right side, we add a bullet
        // first bullet will be green because first image is selected
        $(".image_thumb ul li").each(function(index, val){
            if(index == 0)
                $(".pagination ul").append('<li><span class=bullet_green>&nbsp;</span></li>'); // add new element
            else
                $(".pagination ul").append('<li><span class=bullet_white>&nbsp;</span></li>'); // add new element
        });

	//Click and Hover events for thumbnail list
	$(".image_thumb ul li:first").addClass('active'); 
	
	$(".image_thumb ul li > div > h3").click(function(){ 
		//Set Variables
		var parent = $(this).parent().parent();
		var imgAlt = $(parent).find('img').attr("alt"); //Get Alt Tag of Image
		var imgTitle = $(parent).find('a').attr("href"); //Get Main Image URL
		var imgDesc = $(parent).find('.block').html(); 	//Get HTML of block
		var imgDescHeight = $(".main_image").find('.block').height();	//Calculate height of block	

                var index = $(".image_thumb ul li").index($(parent)); // get the index of clicked li in ul

		if ($(parent).is(".active")) {  //If it's already active, then...
			return false; // Don't click through
		} else {
			//Animate the Teaser				
			$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 350 , function() {
				$(".main_image .block").html(imgDesc).animate({ opacity: 1,	marginBottom: "0" }, 350 );
				//$(".main_image ul li").attr({ src: imgTitle , alt: imgAlt});

                                $(".main_image ul.slideList").fadeOut(250,  function(){

                                    setTimeout(function(){
										
                                       $(".main_image ul.slideList").css({marginLeft: -parseInt(654 * index)});
                                       $(".main_image ul.slideList").fadeIn(200, function(){});                                       
                                    }, imageChangeDelay);
                                })
			});

                        // change clasess
                        $(".pagination ul li span.bullet_green").removeClass("bullet_green").addClass("bullet_white");
                        $(".pagination ul li:eq(" + index +") span").removeClass("bullet_white").addClass("bullet_green");
		}
		
		$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
		$(parent).addClass('active');  //add class of 'active' on this list only
		return false;
		
	}) .hover(function(){
		var parent = $(this).parent().parent();
		$(parent).addClass('hover');	
		clearInterval(intervalID);

		}, function() {
			var parent = $(this).parent().parent();
		$(parent).removeClass('hover');
		intervalID = setInterval(intervalFunction, (seconds * 1000));
	});

        // when the user click on a bullet, we call
        // the click() method of the li with with specified index
        $(".pagination ul li").bind("click", function(){
            var index = $(".pagination ul li").index($(this));
            $(".image_thumb ul li > div > h3:eq(" + index +")").trigger("click");
        });
			
	//Toggle Teaser
	$("a.collapse").click(function(){
		$(".main_image .block").slideToggle();
		$("a.collapse").toggleClass("show");
	});

	intervalID = setInterval(intervalFunction, (seconds * 1000));
	
});//Close Function