ÿþvar arrBlockRef = []; // Array to store model block references

var modelShowTimeout = 500; // Begin car animation after 0.5s

var modelShowIncrement = 300; // Occur every 0.3s

var arrLength = 0;

var counter = 0;

var arrImgPath = [];



$(function() {

    arrLength = arrCarInfo.length; // Get the number of cars to display

    initTabs();



    for (var i = 0; i < arrLength; i++) {

        arrBlockRef[i] = new ModelBlock(arrCarInfo[i]);

        arrBlockRef[i].renderHTML();

    }



    // Car model hover animation

    $(".divModelBlock").css({ backgroundPosition: '0px 145px' }).hover(function() {

        var imgId = this.id.substr(8);



        // Change car to red

        arrImgPath = GetImagePath(imgId);

        $("#" + imgId).attr("src", arrImgPath[0]);



        // Show relevant model data

        ShowCarInfo("divModelCarInfo", imgId);

        ShowButton(imgId);



        // Animate the background

        $(this).stop().animate({ backgroundPosition: '(0px 0px)' }, { easing: 'easeInSine', duration: 600, complete:

            function() {

                $("#spanCarNameHidden" + imgId).css({ visibility: "visible" }); // Show the name image



                if (strRegionCode == "IT")

                    $("#divModelCarInfo" + imgId).css({ color: "#C00" });

                else

                    $("#divModelCarInfo" + imgId).css({ color: "#FFF" });

            }

        });

    }, function() {

        // Change the images to their default state

        var imgId = this.id.substr(8);

        arrImgPath = GetImagePath(imgId);

        $("#" + imgId).attr("src", arrImgPath[1]);

        $("#spanCarNameHidden" + imgId).css({ visibility: "hidden" }); // Hide the name image once



        //Hide relevant model data

        HideCarInfo("divModelCarInfo", imgId);

        HideButton(imgId);



        // Animate the background

        $(this).stop().animate({ 'backgroundPosition': '(0px 145px)' }, { easing: 'swing', duration: 800, complete:

            function() {

                $("#spanCarNameHidden" + imgId).css({ visibility: "hidden" }); // Make sure that the name image is changed to black

                $("#divModelCarInfo" + imgId).css({ color: "#000" });

            }

        });

    });

});



function showModelSelect() {

    $("#imgLoading").remove();



    // Show each car model block

    $.each(arrBlockRef, function(i) {

        setTimeout(function() { $("#divModelSelector").before(arrBlockRef[i].showHTML()); }, modelShowTimeout);

        modelShowTimeout += modelShowIncrement;

    });

}



function ModelBlock(arrParams) {

    // Store the parameters

    var intKey;

    for (intKey in arrParams)

        this[intKey] = arrParams[intKey]



    // Generate the HTML required for each car model

    this.renderHTML = function() {

        var strButtonLink;



        if (!this.IsJavaScriptLink)

            strButtonLink = this.ContinueLink + "?intModelKey=" + this.ModelId;

        else

            strButtonLink = this.JavaScriptLink;



        var strModelHTML = "<div class='divModelBlock' id='divModel" + this.ModelId + "'>";

        strModelHTML += "<div class='divModelInnerContainerBody'>";

        strModelHTML += "<div class='divModelInnerContainerHeader'>";

        strModelHTML += "<span class='spanCarNameShow' id='spanCarNameShow" + this.ModelId + "'><img src='images/" + this.ModelNameImage + "'/>";

        strModelHTML += "<span class='spanCarNameHidden' id='spanCarNameHidden" + this.ModelId + "'><img src='images/" + this.ModelNameImageOn + "'/></span></span>";

        strModelHTML += "<div class='divModelCarInfo' id='divModelCarInfo" + this.ModelId + "'>";

        strModelHTML += "<span class='spanModelDetails' id='infoLine1_" + this.ModelId + "'>" + this.Line1 + "</span>";

        strModelHTML += "<span class='spanModelDetails' id='infoLine2_" + this.ModelId + "'>" + this.Line2 + "</span>";

        strModelHTML += "<span class='spanModelDetails' id='infoLine3_" + this.ModelId + "'>" + this.Line3 + "</span>";

        strModelHTML += "<span class='spanModelDetails' id='infoLine4_" + this.ModelId + "'>" + this.Line4 + "</span>";

        strModelHTML += "</div></div>";

        strModelHTML += "<div class='divModelImageContainer'>";

        strModelHTML += "<img src='" + this.ModelImageOff + "' id='" + this.ModelId + "' />";

        strModelHTML += "<div class='divModelButtonContainer' id='divModelContinue" + this.ModelId + "'><a href='" + strButtonLink + "'>";

        strModelHTML += "<div class='divModelArrow'><img src='images/ContinueButtonEndCapRight.png' alt=''/></div>";

        strModelHTML += "<div class='divModelContinue'></div></a>";

        strModelHTML += "<div class='clearFloat'></div>";

        strModelHTML += "</div></div></div></div>";



        $("#divModelSelector").append(strModelHTML);

        $("#divModel" + this.ModelId).hide();

        $("#divModelCarInfo" + this.ModelId).hide();

        $("#divModelContinue" + this.ModelId).hide();



        if (blEditingRequired) { /* Model specific information editing. Not currently used */ }



        counter++;



        if (counter == arrLength)

            showModelSelect();

    };



    // Function to show rendered HTML

    this.showHTML = function() {

        $("#divModel" + this.ModelId).show();

        $(".divModelContinue").html(strContinue);

    };

}



//////////////////////////////

// Functions for Show/Hides //

//////////////////////////////

function GetImagePath(modelId) {

    var intId = parseInt(modelId);

    var arrImgPath = [];



    for (var i in arrBlockRef) {

        if (arrBlockRef[i].ModelId == intId) {

            arrImgPath[0] = arrBlockRef[i].ModelImageOn;

            arrImgPath[1] = arrBlockRef[i].ModelImageOff;

            return arrImgPath;

        }

    }

}



function ShowButton(modelId) {

    $("#divModelContinue" + modelId).show();

}



function HideButton(modelId) {

    $("#divModelContinue" + modelId).hide();

}



function ShowCarInfo(infoId, modelId) {

    $("#" + infoId + modelId).show();

}



function HideCarInfo(infoId, modelId) {

    $("#" + infoId + modelId).hide();

}



function showProvinceSelection(id) {

    $("#hiddenModelId").val(id);

    $('#screen').show();

    $('#screen').css({ opacity: 0.6, 'width': $(document).width(), 'height': $(document).height() });

    $('#ProvinceContainer').show();

    $('html, body').animate({ scrollTop: 0 }, 'slow'); // Scroll up to the top so the overlay can be seen.

}