/* Note
 * Because you can't start a variable with a number 
 * the stupidly named 4 door will have the variable fourdoor 
 * within this part of the jquery.
 * However all external references will still be 4Door 
 * as they will all have prefixes like 'btn' and the like to account for
 * them not being allowed to have numbers starting ids and classes in css
 */
 
$(document).ready(function(){

    var blocktimer;
    var modeltimer;

    // tech ref -- note that these are the id's used in the html
    // abs          = ABS and EBD
    // mastc        = M-ASTC
    // airbags      = Complete Airbags
    // cc           = Cruise Control
    // ac           = Climate Control
    // mp3          = iPOD/MP3 Port
    // sst          = SST Gearbox
    // mmcs         = MMCS
    // ess          = ESS
    // suspension   = Suspension
    // ice          = Rockford Fosgate Premium Audio System
    
    var tech = [];
    tech["Juro"]       = ["TCSST", "ABS", "MASTC", "Suspension", "AWC", "DMS", "HSA", "ESS", "Roof", "Sensors", "Air", "Cruise", "Bluetooth", "SteeringControls", "Display"];

    function hideBlocks(){
        if(blocktimer){ clearTimeout(blocktimer); blocktimer = null; }
        $("#infoBoxes>div").each(function(){
            $(this).fadeOut(500);
        });    
    }
    
    function updateBlock(id){
        if(blocktimer){ clearTimeout(blocktimer); blocktimer = null; }
        var block = "block" + id.split("item")[1];
        $("#infoBoxes>div").each(function(){
            if(this.id == block){
                $("#block"+block).fadeIn(500);
            }
            else{
                $(this).fadeOut(500);
            }
        });
        blocktimer = setTimeout(function(){$("#"+block).fadeIn(500)},250);
    }

    function updateTech(id){
        $("#itemBlocks>div").each(function(){
            var exists = false;
            for(var j = 0; j < tech[id].length; j++){
                if(this.id == "item"+tech[id][j]){
                    exists = true;
                }
            }
            if(exists){
                $(this).fadeIn(500);
            }
            else{
                $(this).fadeOut(500);
            }
        });
    }

    function updateTrim(id){
        var imgsrc = id.split("btn")[1];
        var imgsplit = imgsrc.split("_");
        var model = imgsplit[0];
        var trim = imgsplit[1];
        var img = document.getElementById("imgOutlander").getElementsByTagName("img")[0];
        $("#imgOutlander>img").fadeOut(250);
        setTimeout(function(){img.src = "/images/outlander/tech/" + imgsrc + ".jpg"}, 250);
        setTimeout(function(){$("#imgOutlander>img").fadeIn(250)},250);
        $("#trimButtons li a").each(function(){
            if(this.id == id){
                $(this).addClass("active");
            }
            else{
                $(this).removeClass("active");
            }
        });
        updateTech(imgsrc);
    }
    
    function getURLModel(){
        if(window.location.href.indexOf('?') != -1){
            var addr = window.location.href.slice(window.location.href.indexOf('?') + 1).split('#')[0];
            return addr.split("=")[1];
        }
        else{
            return "Juro";
        }
    }

    function setBlockHover(a, on){
        var pos = 0;
        if(IE){
            var elm = document.getElementById(a.parent().attr("id"));
            pos = elm.currentStyle.backgroundPositionX;
        }
        else{
            pos = a.css("background-position").split(" ")[0];
        }
        if(on){
            a.css("background-position", pos + " -33px").css("color", "#ffffff");
        }
        else{
            a.css("background-position", pos + " 0px").css("color", "#595959");
        }
    }
   
    $("#trimButtons li a").mouseover(function(){
        this.style.cursor = "pointer";
    }).mouseout(function(){
        this.style.cursor = "default";
    }).click(function(){
        if($(this).hasClass("active")){
        }
        else{
            updateTrim(this.id);
        }
        return false;
    });
   
    $("#itemBlocks div").mouseover(function(){
        this.style.cursor = "default";
        var a = $(this);
        updateBlock(a.attr("id"));
        setBlockHover(a, true)
    }).mouseout(function(){
        var a = $(this);
        hideBlocks();
        setBlockHover(a, false)
    });
    
    // overrides part of css to make it look right for JS users
    // css makes it look different for non-JS users
    updateTrim("btn" + getURLModel());
    
    $("#infoBoxes")
        .css("height", "375px")
        .css("overflow","hidden")
        .css("width", "348px")
        .css("left", "190px")
        .css("top","40px");
    $("#infoBoxes>div").css("display","none");
    // the last command is the reversal to some JS in code that hides 
    // the techWrapper element so you don't see the mass of tech blocks if JS is active
    $("#techWrapper").css("height", "470px").css("overflow", "hidden").css("display","block");
    $("#trimButtons").css("display","block");
    $("#techContent").css("display","block");
    
    // using JS to make a crossbrowser restyle for the :last pseudo-element
    //$("#btn4Door_GS4").css("width","121px");
    //$("#btnRalliart_GSR").css("width","121px").css("border","0px");
    //$("#btnRalliart_GS").css("width","121px");
});