$(document).ready(function() {

    // First, a bit of progressive enhancement:
    // Add in some divs so that we can do our image map, slider, slider labels, and carousel controls
    var strHtml = "";
    strHtml += '<div id="cars-sprite"></div>';
    strHtml += '<div id="lights-sprite"></div>';
    strHtml += '<div class="map" id="map-jetta"></div>';
    strHtml += '<div class="map" id="map-touareg"></div>';
    strHtml += '<div class="map" id="map-sportwagen"></div>';
    strHtml += '<div class="map" id="map-golf"></div>';
    strHtml += '<div id="container-slider" class="ui-slider"><div class="ui-slider-handle"></div></div>';
    strHtml += '<div id="container-ytt"></div>';
    strHtml += '<div id="container-buttons">';
    strHtml += '    <p class="button-carousel" id="buttonNext"><a href="#">click</a></p>';
    strHtml += '    <p class="button-carousel" id="buttonPrev"><a href="#">click</a></p>';
    strHtml += '</div>';   
    strHtml += '<p class="button-carousel" id="button1"><a href="#">Yesterday</a></p>';
    strHtml += '<p class="button-carousel" id="button2"><a href="#">Today</a></p>';
    strHtml += '<p class="button-carousel" id="button3"><a href="#">Tomorrow</a></p>';
    
    $("#container-history").prepend(strHtml);
    
    $(".legal-content").wrapAll('<div class="legal-container content" id="container-legal-content"></div>');
    $("#container-legal-content").before('<div class="legal-container top">&nbsp;</div>');
    $("#container-legal-content").after('<div class="legal-container bottom">&nbsp;</div><div class="legal-container legal-button">&nbsp;</div>');
    $('.legal-container').wrapAll('<div id="layout-legal"></div>');
    
    
    var boolClick = true;
    
    // Activate the carousel
    $("#container-carousel").jCarouselLite({
	        btnNext: "#buttonNext",
	        btnPrev: "#buttonPrev", 
	        visible: 1,
	        start: 1,
			speed: 800,
			easing: "easeInExpo",
			afterEnd: function(a) {
			    var intOldSliderPos = $(".ui-slider").slider('value');
			    var strNewId = a.attr('id');
			    var intNewSliderPos = 0;
			    if (strNewId == "day-today") {
			        intNewSliderPos = 1;
			    } else if (strNewId == "day-tomorrow") {
			        intNewSliderPos = 2;
			    }
			    if (intOldSliderPos != intNewSliderPos) {
			        boolClick = false;
			        $(".ui-slider").slider('value', intNewSliderPos)
			    }
			},
	        btnGo: 
	        [
		        "#container-history #button1 a",
		        "#container-history #button2 a", 
		        "#container-history #button3 a"
	         ]
        });

    // Activate teh slider
    $(".ui-slider").slider({
	    min : 0,
	    max: 2,
	    step: 1,
	    value: 1,
	    animate: false,
	    change: function(event, ui) {
	       if (ui.value == 0) {
	           if (boolClick) {
    	           $("#container-history #button1 a").click();
    	       } else {
    	           boolClick = true;
    	       }
	           $("#container-history #container-ytt").css("background-position", "0 0");
	           $("#container-history .button").hide();
	           $("#container-history .map").hide();
	           $("#container-history #lights-sprite").hide();
	       } else if (ui.value == 1) {
	           if (boolClick) {
    	           $("#container-history #button2 a").click();
    	       } else {
    	           boolClick = true;
    	       }
	           $("#container-history #container-ytt").css("background-position", "0 -13px");
	           $("#container-history .button").show();
	           $("#container-history .map").show();
	           $("#container-history #lights-sprite").show();
	       } else if (ui.value == 2) {
	           if (boolClick) {
    	           $("#container-history #button3 a").click();
    	       } else {
    	           boolClick = true;
    	       }
	           $("#container-history #container-ytt").css("background-position", "0 -26px");
	           $("#container-history .button").hide();
	           $("#container-history .map").hide();
	           $("#container-history #lights-sprite").hide();
	       }
	    }
	});
	
	// Attach events
	$("#map-jetta").mouseenter(function() {
	    $("#container-history #lights-sprite").css("background-position", "0 -131px");
	}).mouseout(function() {
	    $("#container-history #lights-sprite").css("background-position", "0 43px");
	});
	$("#map-touareg").mouseenter(function() {
	    $("#container-history #lights-sprite").css("background-position", "0 -88px");
	}).mouseout(function() {
	    $("#container-history #lights-sprite").css("background-position", "0 43px");
	});
	$("#map-sportwagen").mouseenter(function() {
	    $("#container-history #lights-sprite").css("background-position", "0 -45px");
	}).mouseout(function() {
	    $("#container-history #lights-sprite").css("background-position", "0 43px");
	});
	$("#map-golf").mouseenter(function() {
	    $("#container-history #lights-sprite").css("background-position", "0 -2px");
	}).mouseout(function() {
	    $("#container-history #lights-sprite").css("background-position", "0 43px");
	});
	
	$("#disclaimer").click(function() {
	    $("#layout-legal").fadeIn();
	
	})
	$("div#container-history div#layout-legal div.legal-button").click(function(){
	    $("#layout-legal").fadeOut();
	})
	
	// PNG fix
	$.ifixpng('/wp-content/phpsnippets/tdiintermediary/images/pixel.gif');
    $('#layout-legal div.bottom').ifixpng();
    $('#layout-legal div.top').ifixpng();
    $('#layout-legal div.content').ifixpng();
    
    // Quick image preload for the images involved in the disclaimer
    function preloader() {
        var arrImgs = [];
        arrImgs[0] = new Image();
        arrImgs[0].src = "/wp-content/phpsnippets/tdiintermediary/images/legal-top-bg.png";
        arrImgs[1] = new Image();
        arrImgs[1].src = "/wp-content/phpsnippets/tdiintermediary/images/legal-bottom-bg.png";
        arrImgs[2] = new Image();
        arrImgs[2].src = "/wp-content/phpsnippets/tdiintermediary/images/legal-content-bgslice.png";
        arrImgs[3] = new Image();
        arrImgs[3].src = "/wp-content/phpsnippets/tdiintermediary/images/legal-button.gif";
        arrImgs[4] = new Image();
        arrImgs[4].src = "/wp-content/phpsnippets/tdiintermediary/images/pixel.gif";
        
    }
    preloader();
	
});