$(document).ready(function(){

    var models = techSettings.models;
    var tech = techSettings.tech;

    var blocktimer;

    var $infoBoxes = $("#infoBoxes");
    var $infoBoxesDiv = $infoBoxes.find(">div");
    var $itemBlocks = $("#itemBlocks");
    var $itemBlocksDiv = $itemBlocks.find(">div");
    var $modelButtons = $("#modelButtons");
    var $trimButtons = $("#trimButtons");

    function hideBlocks(){
        if(blocktimer){ clearTimeout(blocktimer); blocktimer = null; }
        for(var i = 0; i < $infoBoxesDiv.length; i++){
            $($infoBoxesDiv[i]).fadeOut(500);
        }
    }
    
    function updateBlock(id){
        var block = "block" + id.split("item")[1];
        hideBlocks();
        blocktimer = setTimeout(function(){$("#"+block).fadeIn(500)},250);
    }

    function updateTech(id){
        $itemBlocksDiv.each(function(){
            var exists = false;
            for(var j = 0; j < tech[id].length; j++){
                if(this.id == "item"+tech[id][j]){
                    exists = true;
                    break;
                }
            }
            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(techSettings.img).getElementsByTagName("img")[0];
        var a = $(img);
        a.fadeOut(250, function(){
            img.src = techSettings.dir + imgsrc + ".jpg";
            a.fadeIn(250);
        });
        
        $trimButtons.find("li a").each(function(){
            var a = $(this);
            if(this.id == id){
                a.addClass("active");
            }
            else{
                if(a.hasClass("active")){
                    a.removeClass("active");
                }
            }
        });
        //$("#btn" + model).click();
        updateTech(imgsrc);
    }

    function updateModel(id){
        var active = id.split("btn")[1];
        $modelButtons.find("li a").each(function(){
            var a = $(this);
            if(this.id == id){
                a.addClass("active");
            }
            else{
                if(a.hasClass("active")){
                    a.removeClass("active");
                }
            }
        });
        updateTrim("btn" + active + "_" + models[active]);
    }
    
    // gets the model we're interested in from the URL, else we just give it 
    // a default model (specified in the techSettings property object).
    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 techSettings.defaultModel;
        }
    }

    function setBlockHover(a, on){
        var b = a.style.backgroundPosition;
        // if IE is true, set the background position value based on 
        // backgroundPositonX, which is a MS proprietry property.
        // Else check that the returned value isn't blank, if it is, 
        // set to 0, else set to the value. Operates in reverse order 
        // to explanation to maximise speed.
        var pos = (IE == false) ? ((b != "") ? b.split(" ")[0] : 
            0) :
                a.currentStyle.backgroundPositionX;
        // set the background changes
        if(on){
            a.style.backgroundPosition =  pos + " -33px";
            a.style.color = "#ffffff";
        }
        else{
            a.style.backgroundPosition = pos + " 0px";
            a.style.color = "#595959";
        }
    }

    function styleTech(){
        var infoBoxes = document.getElementById("infoBoxes");
        var infoBoxesDiv = document.getElementById("infoBoxes").getElementsByTagName("div");
        infoBoxes.style.height = "375px";
        infoBoxes.style.overflow = "hidden";
        infoBoxes.style.width = "348px";
        infoBoxes.style.left = "190px";
        infoBoxes.style.top ="75px";
        for(var i = 0; i < infoBoxesDiv.length; i++){
            infoBoxesDiv[i].style.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
        document.getElementById("techWrapper").style.height = "470px";
        document.getElementById("techWrapper").style.overflow = "hidden";
        document.getElementById("techWrapper").style.display = "block";
        document.getElementById("modelButtons").style.display = "block";
        document.getElementById("trimButtons").style.display = "block";
        document.getElementById("mainContent").style.display = "block";
        
        // using JS to make a crossbrowser restyle for the :last pseudo-element
        $("#modelButtons li:last")[0].style.borderRight = "0px";
        $("#trimButtons li:last a")[0].style.borderRight = "0px";
     }

    $modelButtons.click(function(e){
        if(!$(e.target).hasClass("active")){
            updateModel(e.target.id);
        }
        return false;
    });
   
    $trimButtons.click(function(e){
        if(!$(e.target).hasClass("active")){
            var a = e.target.id.split("_");
            var trim = a[1];
            var model = a[0].split("btn")[1]
            models[model] = trim;
            updateModel("btn" + model);
        }
        return false;
    });
   
    $itemBlocks.mouseover(function(e){
        var a = e.target;
        a.style.cursor = "default";
        if(a.nodeName.toLowerCase() == "div"){
            updateBlock(a.id);
            setBlockHover(a, true);
        }
    }).mouseout(function(e){
        var a = e.target;
        if(a.nodeName.toLowerCase() == "div"){
            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();
    styleTech();

});