var model1 = "";
var model2 = "";
var model3 = "";

   

$(document).ready(function() {
    initInfoLayer();
    initializePage();

    // the <li>s have to change their arrow image bgs from gray to red on hovering.
    $("#CarsTable td li").hover(
        function() {
            $(this).css("background-image", "url(/images/arrow-red.gif)");
        },
        function() {
            $(this).css("background-image", "url(/images/arrow-gray-right.gif)");
        });

    // Button to Compare should stay half-transparent until at least two cars are chosen

});


function initializePage() {
    var hiddenForm = $("#SelectForm")[0];
    if (!hiddenForm) {
        return;
    }

    model1 = hiddenForm.model1.value;
    model2 = hiddenForm.model2.value;
    model3 = hiddenForm.model3.value;

    fillSelectDiv(1, model1);
    fillSelectDiv(2, model2);
    fillSelectDiv(3, model3);

    showCompareBtn();

}

function addModel(model_id) {
    div_nr = 0;
    // find the next free slot
    if (model1 == "") div_nr = 1;
    else if (model2 == "") div_nr = 2;
    else if (model3 == "") div_nr = 3;

    if (div_nr > 0) {
        fillSelectDiv(div_nr, model_id);
        //closeModelInfo();
    }
    else showMessage();
    showCompareBtn();
}


function fillSelectDiv(div_nr, value) {
    if (value != "") {

        elmForm = $("#SelectForm")[0];
        $("#CarSelectorInner" + div_nr).hide();
        //$("#SBSSelectImage" + div_nr).hide();
        $("#SBSSelectImage" + div_nr).attr("src", "assets/images/cars/" + GLOBAL_IMAGEPATH + "compare/" + value + ".jpg");
        $("#SBSSelectName" + div_nr).attr("src", $("#title_" + value).attr("src"));

        $("#SBSRemoveButton" + div_nr + ", #CarSelectorInner" + div_nr).fadeIn("slow");

        // setup form fields with car ids.
        switch (div_nr) {
            case 1:
                elmForm.model1.value = value;
                model1 = value;
                break;
            case 2:
                elmForm.model2.value = value;
                model2 = value;
                break;
            case 3:
                elmForm.model3.value = value;
                model3 = value;
                break;
        }
    }

}

function removeModel(div_nr) {
    elmForm = document.getElementById("SelectForm");

    $("#CarSelectorInner" + div_nr).fadeOut("fast");


    switch (div_nr) {
        case "1":
            elmForm.model1.value = "";
            model1 = "";
            break;
        case "2":
            elmForm.model2.value = "";
            model2 = "";
            break;
        case "3":
            elmForm.model3.value = "";
            model3 = "";
            break;
    }
    showCompareBtn();
}

function goCompare() {
    elmForm = document.getElementById("SelectForm");
    elmForm.action = "Compare.aspx";
    elmForm.submit();

}


var isCompareButtonHidden = true;

function showCompareBtn() {
    var modelcount = 0;

    if (model1 != "") modelcount++;
    if (model2 != "") modelcount++;
    if (model3 != "") modelcount++;

    if (modelcount > 1 && isCompareButtonHidden) {
        // show compare button
        $("#btnGhost").fadeOut("slow");
        isCompareButtonHidden = false;
    }
    else if (modelcount < 2 && !isCompareButtonHidden) {
        // hide compare button
        $("#btnGhost").fadeTo("fast", 0.66, function() { $("#btnGhost").show(); });
        isCompareButtonHidden = true;

    }

}



function showMessage(messagetext) {
    $("#messageLayer").fadeIn("fast");
}
function closeMessage() {
    $("#messageLayer").fadeOut("fast");
}

function initInfoLayer() {
    $('a.selectLink').cluetip({
        width: 466
        , height: SELECT_INFOLAYER_HEIGHT
        //, height: 'auto'
        , positionBy: 'bottomTop' // can be  'auto', 'mouse', 'bottomTop', 'fixed'
        , fx: {
            open: 'fadeIn', // can be 'show' or 'slideDown' or 'fadeIn'
            openSpeed: 'fast'
        }
        , local: true
        , cursor: 'pointer'
        , showTitle: false
        , dropShadow: false
        , topOffset: 20
        , leftOffset: 20
        , sticky: false
        
        ,hoverIntent: {    
                      sensitivity:  7,
                      interval:     100,
                      timeout:      0
                      }

    });

}