$(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"><a href="http://www.vw.com/jetta/en/us/?tab=tdi" target="_blank">Jetta TDI</a></div>';
    strHtml += '<div class="map" id="map-touareg"><a href="http://www.vw.com/touareg/en/us/?tab=tdi" target="_blank">Touareg TDI</a></div>';
    strHtml += '<div class="map" id="map-sportwagen"><a href="http://www.vw.com/jettasportwagen/en/us/?tab=tdi" target="_blank">Jetta SportWagen TDI</a></div>';
    strHtml += '<div class="map" id="map-golf"><a href="http://www.vw.com/upcomingcars/2010golf/en/us/" target="_blank">Golf TDI</a></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>';
    strHtml += '<p id="container-share">';
	strHtml += '<script ';
	strHtml += '	type="text/javascript" ';
	strHtml += '	src="http://s7.addthis.com/js/200/addthis_widget.js">';
	strHtml += '</script>';
	strHtml += '<script type="text/javascript">';
	strHtml += '	var addthis_pub="vwtditruthanddare";';
	strHtml += '</script>';
	strHtml += '<a href="http://www.addthis.com/bookmark.php"';
	strHtml += 'style="text-decoration:none;" ';
	strHtml += 'onmouseover="return addthis_open(this, \'\', top.location.href, \'[TITLE]\');" ';
	strHtml += 'onmouseout="addthis_close();" ';
	strHtml += 'onclick="return addthis_sendto();">SHARE / EMAIL / PRINT</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>');
    
    
    
    // Activate the carousel
    $("#container-carousel").jCarouselLite({
	        btnNext: "#buttonNext",
	        btnPrev: "#buttonPrev", 
	        visible: 1,
	        start: 1,
			speed: 200,
			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) {
			        $(".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: true,
	    slide: function(event, ui) {
	       if (ui.value == 0) {
	           $("#container-history #button1 a").click();
	           $("#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) {
	           $("#container-history #button2 a").click();
	           $("#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) {
	           $("#container-history #button3 a").click();
	           $("#container-history #container-ytt").css("background-position", "0 -26px");
	           $("#container-history .button").hide();
	           $("#container-history .map").hide();
	           $("#container-history #lights-sprite").hide();
	       }
	    },
	    change: function(event, ui) {
	       if (ui.value == 0) {
	           $("#container-history #button1 a").click();
	           $("#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) {
	           $("#container-history #button2 a").click();
	           $("#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) {
	           $("#container-history #button3 a").click();
	           $("#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").show();
	
	})
	$("div#container-history div#layout-legal div.legal-button").click(function(){
	    $("#layout-legal").hide();
	})
	
	// PNG fix
	$.ifixpng('../.."');
    $('#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 = "/tdiintermediary/images/legal-top-bg.png";
        arrImgs[1] = new Image();
        arrImgs[1].src = "/tdiintermediary/images/legal-bottom-bg.png";
        arrImgs[2] = new Image();
        arrImgs[2].src = "/tdiintermediary/images/legal-content-bgslice.png";
        arrImgs[3] = new Image();
        arrImgs[3].src = "/tdiintermediary/images/legal-button.gif";
        arrImgs[4] = new Image();
        arrImgs[4].src = "/tdiintermediary/images/pixel.gif";
        
    }
    preloader();
});