$(document).ready(function() {

	/********************************
		Variables
	********************************/
	var slideshow		= $("#VehicleDetailsPanel_PhotoGalleryControl1_slideshow");
	var images			= $("#VehicleDetailsPanel_PhotoGalleryControl1_slideshow img");
	var mainImage		= $("#mainImage");
	var subImage		= $("#subImage");
	var loaded			= false;
	var mainOn			= true;
	
	//Controls
	var loadingImg		= 'http://inventory.tkcarsites.com/v1.6/Themes/light-wide/images/loading-white.gif';                
    var missingImg		= 'http://inventory.tkcarsites.com/v1.6/Themes/light-wide/images/vehiclePhotos/missingImage.jpg';
	var fadeSpeed		= 750;
	var numImageScroll	= 5;
	var imgScrollTimer	= 1000;
	var imgPosWidth	 	= [7,7,7,7,7,7,0];


	/********************************
		Init
	********************************/	
	mainImage.hide();
	subImage.hide();
	slideshow.show();


	//Carousel
	if(images.size() > 7){
		slideshow.jcarousel({
			scroll: numImageScroll, //Number of scroll pre time
			animation: imgScrollTimer //Duration of scroll
			,visible: 6 // Number visible
		});
 
	} else {
		var i = 0;
		var imgWidth = 64;
		
		//set CSS
		slideshow.css('padding','0').css('overflow', 'hidden').css('padding', '0').css('margin','7px 0 0 0').css('position','relative');
		$("#VehicleDetailsPanel_PhotoGalleryControl1_slideshow li").css('float','left').css('list-style', 'none');
		$("#VehicleDetailsPanel_PhotoGalleryControl1_slideshow li").each(function(){
				$(this).css('width', imgWidth + imgPosWidth[i]);
				i++;
		});

	}
	
	
	
	
	 
	
	
	//Show the first Image that loaded first
	function showImage(data){
		if(loaded == false){
			mainImage.attr("src", data.image);	
			mainImage.show();
			loaded = true;
			
			//Set Outline
			$("#VehicleDetailsPanel_PhotoGalleryControl1_slideshow a").each(function(){
				var src = $(this).attr("rel");			  
				if(src == mainImage.attr("src")){
					$(this).find("img").addClass("current");
				}
			});
		}
	}
			
	
	
	//Thumb Click Function
	$("#VehicleDetailsPanel_PhotoGalleryControl1_slideshow a").each(function(){
		$(this).click(function(){				   
			//Reset Outline
			resetClass();
			
			//Add Outline
			$(this).find("img").addClass("current");
				
			if(mainOn == true){
				var currentSrc = mainImage.attr("src");
				var nextSrc = $(this).attr("rel");

				subImage.attr("src", nextSrc);
				subImage.show();
				mainImage.fadeOut(fadeSpeed);
				
				mainOn = false;
			}else{
				var currentSrc = subImage.attr("src");
				var nextSrc = $(this).attr("rel");
				
				mainImage.attr("src", nextSrc);
				mainImage.fadeIn(fadeSpeed);
				
				mainOn = true;
			}

		});

	});
	
	
	//Reset Outline on gallery
	function resetClass(){
		images.each(function(){
			$(this).removeClass("current");
		});
	}


	// preloading images: shows loading progress for image gallery and
	$.preload('#slideContainer img', {
        placeholder:loadingImg,                
        notFound:missingImg,
        enforcecache:true,
		threshold: 1,
		onComplete:showImage
    	}); 
	
	
	 /*New Overlay window management start*/
        // initialise jqModal
        $('#modalWindow').jqm({
            overlay: 70,
            modal: true,
            trigger: 'a.thickbox',
            target: '#jqmContent',

            onShow: myOpen,
            onHide: myClose
        });
        /*New overlay window management end*/

	

});

	var myOpen = function(hash) {
        var $trigger = $(hash.t);
        var $modal = $(hash.w);
        var myUrl = $trigger.attr('href');
        var myTitle = $trigger.attr('title');
        var $modalContent = $("iframe", $modal);

        $modalContent[0].contentWindow.location.replace(myUrl);
        //let's use the anchor "title" attribute as modal window title
        $('#jqmTitleText').text(myTitle);
        hash.w.css('opacity', 0.88).show();
    };

    var myClose = function(hash) {
        /*custom code*/
        var $trigger = $(hash.t);
        var $modal = $(hash.w);
        var myUrl = $trigger.attr('href');
        var myTitle = $trigger.attr('title');
        var $modalContent = $("iframe", $modal);

        $modalContent[0].contentWindow.location.replace('http://inventory.tkcarsites.com/v1.6/Themes/light-wide/images/bkg.htm');
        //let's use the anchor "title" attribute as modal window title
        $('#jqmTitleText').text('');
        /**/
        hash.w.fadeOut('2000', function() { hash.o.remove(); });
    };