/* 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 fourdoor = "GS4";
    var hatchback = "GS4";
    var ralliart = "GSR";

    var blocktimer;
    var modeltimer;

    // tech ref -- note that these are the id's used in the html - in full lowercase
    // 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["4Door_GS3"]     = ["abs", "mastc1",           "airbags", "suspension1",                "mp3", "steering1",                     "cvt"];
    tech["4Door_GS4"]     = ["abs", "mastc1",           "airbags", "suspension1",                "mp3", "steering1",                     "cvt", "mmcs"];
    tech["Hatchback_GS2"] = ["abs",           "mastc2", "airbags", "suspension1",                "mp3", "steering1",                     "cvt",                "ess"];
    tech["Hatchback_GS3"] = ["abs", "mastc1",           "airbags", "suspension1",                "mp3", "steering1",                     "cvt",                "ess"];
    tech["Hatchback_GS4"] = ["abs", "mastc1",           "airbags", "suspension1",                "mp3", "steering1",                     "cvt", "mmcs", "ess"];
    tech["Ralliart_GS"]   = ["abs", "mastc1",           "airbags",                "suspension2", "mp3",              "steering2", "awc",                "ess", "engine", "sst", "sst2",        "hid", "sensors"];
    tech["Ralliart_GSR"]  = ["abs", "mastc1",           "airbags",                "suspension2", "mp3",              "steering2", "awc",        "mmcs", "ess", "engine", "sst", "sst2", "ice", "hid", "sensors"];
    tech["all"]           = ["abs", "mastc1", "mastc2", "airbags", "suspension1", "suspension2", "mp3", "steering1", "steering2", "awc", "cvt", "mmcs", "ess", "engine", "sst", "sst2", "ice", "hid", "sensors"];

    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);
                //window.alert(this.id + " " + block);
                //$(this).fadeIn(500);
            }
            else{
                $(this).fadeOut(500);
                //window.alert(this.id + " " + block);
            }
        });
        blocktimer = setTimeout(function(){$("#"+block).fadeIn(500)},250);
    }

    function updateTech(id){
        //window.alert(id);
        //window.alert(tech[id]);
        //$(".itemBlock").css("display", "none");
        //$(".itemBlock").fadeOut(500);
        $("#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);
            }
        });
        /*for(var i = 0; i < tech["all"].length; i++){
            for(var j = 0; j < tech[id].length; j++){
                if(tech["all"][i] == tech[id][j]){
                    //window.alert(tech["all"][i] + " yes");
                    //$("#item" + tech["all"][i]).css("display", "block");
                    $("#item" + tech["all"][i]).fadeIn(500);
                    break;
                }
                else{
                    //window.alert(tech["all"][i] + " no");
                }
            }
        }*/
    }

    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("imgLancer").getElementsByTagName("img")[0];
        $("#imgLancer>img").fadeOut(250);
        setTimeout(function(){img.src = "/images/lancer/tech/" + imgsrc + ".jpg"}, 250);
        setTimeout(function(){$("#imgLancer>img").fadeIn(250)},250);
        switch(model){
            case "4Door":
                fourdoor = trim;
                $("#trimButtons li a").each(function(){
                    if(this.id == id){
                        $(this).addClass("active");
                    }
                    else{
                        $(this).removeClass("active");
                    }
                });
                $("#btn4Door").click();
                break;
            case "Hatchback":
                hatchback = trim;
                $("#trimButtons li a").each(function(){
                    if(this.id == id){
                        $(this).addClass("active");
                    }
                    else{
                        $(this).removeClass("active");
                    }
                });
                $("#btnHatchback").click();
                break;
            case "Ralliart":
                ralliart = trim;
                $("#trimButtons li a").each(function(){
                    if(this.id == id){
                        $(this).addClass("active");
                    }
                    else{
                        $(this).removeClass("active");
                    }
                });
                $("#btnRalliart").click();
                break;
        }
        updateTech(imgsrc);
    }

    function updateModel(id){
        if(modeltimer){ clearTimeout(modeltimer); modeltimer = null; }
        var active = id.split("btn")[1];
        //$("#trimButtons ul").css("display", "none");
        //$("#btnList"+active).css("display", "block");
        //$("#trimButtons ul").fadeOut(500);
        //modeltimer = setTimeout(function(){$("#btnList"+active).fadeIn(500)},500);
        $("#modelButtons li a").each(function(){
            if(this.id == id){
                $(this).addClass("active");
            }
            else{
                $(this).removeClass("active");
            }
        });
        switch(active){
            case "4Door":
                //$("#btn4Door_" + fourdoor).click();
                updateTrim("btn4Door_" + fourdoor);
                break;
            case "Hatchback":
                //$("#btnHatchback_" + hatchback).click();
                updateTrim("btnHatchback_" + hatchback);
                break;
            case "Ralliart":
                //$("#btnRalliart_" + ralliart).click();
                updateTrim("btnRalliart_" + ralliart);
                break;
        }
    }
    
    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 "Ralliart";
        }
        //window.alert(addr);
    }

    function setBlockHover(a, on){
        var pos = 0;
        //var pos = a.parent().this.style.backgroundPosition.split(" ")[0];
        if(IE){
            var elm = document.getElementById(a.parent().attr("id"));
            pos = elm.currentStyle.backgroundPositionX;
        }
        else{
            pos = a.css("background-position").split(" ")[0];
        }
        //var pos = a. css("background-position")
        //window.alert(elm.id + " " + pos + " " + on);
        if(on){
            a.css("background-position", pos + " -33px").css("color", "#ffffff");
        }
        else{
            a.css("background-position", pos + " 0px").css("color", "#595959");
        }
    }
        

    $("#modelButtons li a").mouseover(function(){
        this.style.cursor = "pointer";
    }).mouseout(function(){
        this.style.cursor = "default";
    }).click(function(){
        if($(this).hasClass("active")){
        }
        else{
            updateModel(this.id);
        }
        return false;
    });
   
    $("#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);
        //var pos = a.parent().css("background-position").split(" ")[0];
        //window.alert($(this).parent().attr("id"));
        //window.alert(a.parent().css("background-position"));
        updateBlock(a.attr("id"));
        setBlockHover(a, true)
        //a.css("background-position", pos + " -81px").css("color", "#ffffff");
    }).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
    $("#btn"+getURLModel()).click();
    $("#infoBoxes")
        .css("height", "375px")
        .css("overflow","hidden")
        .css("width", "348px")
        .css("left", "190px")
        .css("top","75px");
    $("#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");
    $("#modelButtons").css("display","block");
    $("#trimButtons").css("display","block");
    $("#mainContent").css("display","block");
    
    // using JS to make a crossbrowser restyle for the :last pseudo-element
    $("#modelButtons li:last").css("border-right", "0px");
    $("#modelButtons li:last a").css("width", "243px");
    $("#btn4Door_GS4").css("width","121px");
    $("#btnRalliart_GSR").css("width","121px").css("border","0px");
    $("#btnRalliart_GS").css("width","121px");
});