function Handset(o) {
    this.name = o.name;
    this.brand = o.brand;
    this.os = o.os;
    this.imgOffLoc = "../images/handsets/off/";
    this.imgOnLoc = "../images/handsets/on/";
    this.imgLoc = "../images/handsets/";
    this.imgExt = ".jpg";
    this.img = o.img;
    this.imgOffLoaded = false;
    this.imgOnLoaded = false;
    this.imgLoaded = false;
    this.buyLink = o.buyLink;
    this.brandArrPosition = eval(this.brand + ".handsetObjects.push(this)") - 1;
    
    this.loadImages = function(callbackfunction) {
        
        var handset = this;
        
        if(!this.imgOffLoaded && !this.imgOnLoaded && !this.imgLoaded){
            
            //some installations of firefox have a problem with .bind... so, using .bind only for msie (.load doesn't work properly in ie6)
            if(!$.browser.msie){
                $("<img>").attr("src", this.imgOffLoc + this.img + this.imgExt).load(
                    function(e) {
                        handset.imgOffLoaded = true;
                        if(typeof callbackfunction == 'function'){
                            callbackfunction();
                        }
                    }
                )
                
                $("<img>").attr("src", this.imgOnLoc + this.img + this.imgExt).load(
                    function(e) {
                        handset.imgOnLoaded = true;
                    }
                )
                
                $("<img>").attr("src", this.imgLoc + this.img + this.imgExt).load(
                    function(e) {
                        handset.imgLoaded = true;
                    }
                )
            }
            else{
                $("<img>").bind('load readystatechange', 
                    function(e) {
                         if( this.complete || (this.readyState == 'complete' && e.type == 'readystatechange') ) {
                            handset.imgOffLoaded = true;
                            if(typeof callbackfunction == 'function'){
                                callbackfunction();
                            }
                    }
                }).attr("src", this.imgOffLoc + this.img + this.imgExt);
                
                $("<img>").bind('load readystatechange', 
                    function(e) {
                         if( this.complete || (this.readyState == 'complete' && e.type == 'readystatechange') ) {
                            handset.imgOnLoaded = true;
                    }
                }).attr("src", this.imgOnLoc + this.img + this.imgExt);
                
                $("<img>").bind('load readystatechange', 
                    function(e) {
                         if( this.complete || (this.readyState == 'complete' && e.type == 'readystatechange') ) {
                            handset.imgLoaded = true;
                    }
                }).attr("src", this.imgLoc + this.img + this.imgExt);
            }
            
        }
    };
    
    this.load = function(){
        
        $("#selectedHandset").html(this.name);
        $("#phoneName").html(this.name);
        
        var imgSrc = this.imgLoc + this.img + this.imgExt;
        
        if($("#handsetPromo").length > 0){

            $("#handsetPromo").attr("alt",this.name).attr("src",imgSrc);
            
            if(this.buyLink.length > 0){
                $("#buyLink").show();
            }
            else{
                $("#buyLink").hide();
            }
            
            $("#buyLink").attr("href",this.buyLink);
        }
        else{
            var handsetDisplayXHTML = '<img id="handsetPromo" src="' + imgSrc + '" alt="' + this.name + '" />';

            handsetDisplayXHTML += '<a id="buyLink" href="' + this.buyLink + '" onclick="dcsMultiTrack (\'DCS.dcsuri\',\'/orangemaps/get_it/buy\',\'WT.ti\',\'Orange Maps - Get it: Buy\',\'WT.cg_n\',\'orange maps\',\'WT.cg_s\',\'get it\',\'WT.cg_t\',\'buy\',\'DCSext.handset_model\',\'' + this.name + '\')"><img src="../images/download/btn-buy.gif" alt="buy this phone" /></a>';
            $("#handsetDisplay").html(handsetDisplayXHTML);
            
            if(this.buyLink.length > 0){
                $("#buyLink").show();
            }
            
        }

        eval(this.os + ".loadOSInfo()");
    };
}

function OS(o) {
    this.id = o.id;
    this.name = o.name;
    this.sectionShowing = -1;
    this.structure = o.structure;
    this.structureXHTML = "";
    this.buildStructureXHTML = function(){

        var output = this.structureXHTML;
        
        output += '<div id="osInfo">';
        for(i=0; i<this.structure.length; i++){
            output += '<div class="section" id="section' + i + '">';
            output += '<h4><img src="../images/headers/' + this.structure[i].headerImg + '.gif" alt="' + this.structure[i].header + '" /></h4>';
            output += '<p class="sectionContentLink" rel="' + i + '">view instructions</p>';
            output += '<img id="sectionLoader' + i + '" class="sectionLoader" src="../images/download/loader.gif" alt="loading" />';
            output += '<div class="sectionContent" id="section' + i + 'Content"></div>';
            output += '</div>';
            
            //add property to the the os object (defined in data_general). used in this.buildSection to add step xhtml from loaded js file
            this.structure[i].stepXhtml = "";
        }
        output += "</div>";
        
        this.structureXHTML = output;
    }
    this.loadOSInfo = function(){
        this.displayStructureXHTML();
        this.sectionShowing = -1;
    },
    this.displayStructureXHTML = function(){
        
        var id = this.id;
        
        $("#osSections").html(this.structureXHTML);
        
        $("#osSections .sectionContentLink").click(function(event){
            var sectionNum = $(event.target).attr("rel");
            eval(id + '.toggleSection(sectionNum)');
        });
        
        $("#osSections .sectionContentLink").hover(function(event){
            $(event.target).css("color", "#ff6600")
        });
        
        $("#osSections .sectionContentLink").mouseout(function(event){
            $(event.target).css("color", "#000000")
        });
        

    }
    this.loadSection = function(sectionNum){
        
        var osId = this.id;
        var stepXhtml = String(this.structure[sectionNum].stepXhtml);
        
        orangeMapsUtil.trackInstructionsClick(this.structure[sectionNum].id);
        
        if(stepXhtml != ""){
            $("#section" + sectionNum + "Content").html(stepXhtml);
            this.showSection(sectionNum,stepXhtml);
        }
        else{
            $("#sectionLoader" + sectionNum).show();
            $.include("../js/download/os/" + this.id + "/" + sectionNum + ".js",function(){
                eval(osId + '.buildSection(' + sectionNum + ')');
                stepXhtml = eval(osId + ".structure[" + sectionNum + "].stepXhtml");
                $("#sectionLoader" + sectionNum).hide();
                eval(osId + '.showSection(' + sectionNum + ', stepXhtml)');

            });
        } 
    }
    this.toggleSection = function(sectionNum){
        
        var osId = this.id;
        
        if(this.sectionShowing != -1){
            if(sectionNum == this.sectionShowing){
                this.hideSection();
            }
            else{
                this.hideSection(function(){
                    eval(osId + ".loadSection(sectionNum)");
                })
            } 
        }
        else{
            this.loadSection(sectionNum);
        }
    },
    this.hideSection = function(callbackfunction){
        
        var sectionShowing = this.sectionShowing;
        
        $("#section" + sectionShowing + "Content").hide("slow", function(){
            $("#section" + sectionShowing  + " .sectionContentLink").html("view instructions"); 
            if(typeof callbackfunction == 'function'){
                callbackfunction();
            }             
        })
        
        this.sectionShowing = -1;
        
    },
    this.showSection = function(sectionNum,content){

            $("#section" + sectionNum + "Content").html(String(content)).show("slow");
            $("#section" + sectionNum  + " .sectionContentLink").html("minimise");
            
            this.sectionShowing = sectionNum;
    }
    this.buildSection = function(sectionNum){
        var sectionArr = eval(this.id + "Section" + sectionNum + ".steps");
        var output = eval(this.id + "Section" + sectionNum + ".intro");
            output += "<ol>";
        for(i=0; i<sectionArr.length; i++){
            output += '<li>';
            output += '<img src="../images/download/' + this.id + '/section' + sectionNum + '/' + sectionArr[i].img + '.gif" alt="' + sectionArr[i].imgAlt + '" />'
            output += '<div class="stepContent">';
            output += '<h5>step ' + (i + 1) + '</h5>';
            output += sectionArr[i].content;
            output += '</div>';
            output += '</li>';
        }
        output += "</ol>";
        output += eval(this.id + "Section" + sectionNum + ".footer");
        eval(this.id + '.structure[sectionNum].stepXhtml = output');
    }
    
    this.buildStructureXHTML();
}

function Brand(o) {

    this.id = o.id;
    this.name = o.name;
    this.handsetObjects = new Array();
}