/*
 *  Denne fila inneholder javascript metoder som brukes for å oppdatere grafer
 *  og andre elementer på graf siden.
 *
 *
 */

/*
 * Globale variabler:
 *    ie : boolsk variabel som sier om vi har med IE eller noe annet å gjøre
 *    first : boolsk variabel for å si om det er første kjøring
 *    internalIntervall : global variabel som holder verdien til det valgte
 *                        intervallet 
 *    oldSelectedIntervalId : inneholder forige valgte intervall.
 *    updateMtype : inneholder id til valgt målingstype
 *    internalboeyid : inneholder id til bøyen som er valgt
 */
var ie = navigator.userAgent.indexOf("MSIE") >0 ? true : false;
var first = true;
var internalIntervall;
var oldSelectedIntervalId;
var updateMtype;
var internalboeyid;
var imgsrc;

/**
 *  Initiering av siden
 */
$(document).ready(
    function () {
        setTexts();
        updateInfo(boeyid);
        doNifty(boeyid);
        updateLatestReadings(boeyid);
        changeMeasType(boeyid);
    });

/*
 * Setter teksten til en del statiske elementer når man initierer siden
 */
function setTexts(){
    $("#graphHeading").html(graphHeading);
    $("#tfHeading").html(tfHeading);
  
    element = document.getElementById("tfoneday");
    var span = document.createElement("SPAN");
    var radioselect = null;
    if(ie){
        radioselect = document.createElement("<input type=radio name=intervall>");
        element.appendChild(radioselect);
        element.appendChild(span);
        element.attachEvent("onclick",updateGraph);                
        span.attachEvent("onclick",updateGraph);              
        span.notChangeGraph = "0";
        element.notChangeGraph = "0";
        radioselect.notChangeGraph = "0";
    }else{
        radioselect = document.createElement("INPUT");
        element.appendChild(radioselect);
        element.appendChild(span);
        radioselect.type ="radio";
        radioselect.name = "intervall";
        element.setAttribute("onClick","updateGraph('nsg','0')");
        span.setAttribute("onClick","updateGraph('nsg','0')");     

    }    
    radioselect.checked = true;
    radioselect.liid = "tfoneday";
    oldSelectedIntervalId = "tfoneday"
    radioselect.value = "0";       
    radioselect.selvalue = "0";
    internalIntervall = "0";
    span.innerHTML = tf24h;           

    element = document.getElementById("tftwodays");
    span = document.createElement("SPAN");
    radioselect = null;
    if(ie){
        radioselect = document.createElement("<input type=radio name=intervall>");
        element.appendChild(radioselect);
        element.appendChild(span);
        element.attachEvent("onclick",updateGraph);                
        span.attachEvent("onclick",updateGraph);                      
        span.notChangeGraph = "1";
        element.notChangeGraph = "1";    
        radioselect.notChangeGraph = "1";        
    }else{
        radioselect = document.createElement("INPUT");
        element.appendChild(radioselect);
        element.appendChild(span);
        radioselect.type ="radio";
        radioselect.name = "intervall";
        element.setAttribute("onClick","updateGraph('nsg','1')");
        span.setAttribute("onClick","updateGraph('nsg','1')");     
    }    
    radioselect.value = "1";           
    radioselect.selvalue = "1";
    span.innerHTML = tf48h;
    radioselect.liid = "tftwodays";
    
    element = document.getElementById("tfoneweek");
    span = document.createElement("SPAN");
    radioselect = null;
    if(ie){
        radioselect = document.createElement("<input type=radio name=intervall>");
        element.appendChild(radioselect);
        element.appendChild(span);
        element.attachEvent("onclick",updateGraph);                
        span.attachEvent("onclick",updateGraph);                      
        span.notChangeGraph = "2";
        element.notChangeGraph = "2";  
        radioselect.notChangeGraph = "2";        
    }else{
        radioselect = document.createElement("INPUT");
        element.appendChild(radioselect);
        element.appendChild(span);
        radioselect.type ="radio";
        radioselect.name = "intervall";
        element.setAttribute("onClick","updateGraph('nsg','2')");
        span.setAttribute("onClick","updateGraph('nsg','2')");     
    }    
    radioselect.value = "2";           
    radioselect.selvalue = "2";    
    span.innerHTML = tf1w;
    radioselect.liid = "tfoneweek";    

    element = document.getElementById("tfonemonth");
    span = document.createElement("SPAN");
    radioselect = null;
    if(ie){
        radioselect = document.createElement("<input type=radio name=intervall>");
        element.appendChild(radioselect);
        element.appendChild(span);
        element.attachEvent("onclick",updateGraph);                
        span.attachEvent("onclick",updateGraph);                      
        span.notChangeGraph = "3";
        element.notChangeGraph = "3";
        radioselect.notChangeGraph = "3";        
    }else{
        radioselect = document.createElement("INPUT");
        element.appendChild(radioselect);
        element.appendChild(span);
        radioselect.type ="radio";
        radioselect.name = "intervall";
        element.setAttribute("onClick","updateGraph('nsg','3')");
        span.setAttribute("onClick","updateGraph('nsg','3')");     
    }    
    radioselect.value = "3";           
    radioselect.selvalue = "3";    
    span.innerHTML = tf1m;
    radioselect.liid = "tfonemonth";     
    
}

/*
 *  Metode som blir kjørt når man klikker på en ny målingstype eller 
 *  tidsintervall
 */
function updateGraph(mtype,intvalue){
    var graphChange = true;
    if(ie){
        if(event.srcElement.notChangeGraph != null){
            graphChange = false;
            intvalue = event.srcElement.notChangeGraph;
        }
    }else{
        if(mtype == "nsg"){
            graphChange = false;            
        }
    }
    if(ie && !first && graphChange){
        mtype = event.srcElement.graphid;
    }
    /*  Sjekker hvilken radiobutton som har blitt valgt. */    
    var radios = document.getElementsByTagName("input");
    var intervall = "";
    var intid = "";
    for(var i = 0; i < radios.length;i++){
        if(radios[i].type == "radio" && radios[i].name == "valgt"){
            if(!graphChange){
                if(radios[i].checked){
                    mtype = radios[i].thisvalue;
                }
            }else{
                if(radios[i].thisvalue == mtype){
                    radios[i].checked = true;
                }else if(radios[i].value == mtype){
                    radios[i].checked = true;
                }else{
                    radios[i].checked = false;            
                }
            }
        }else if(radios[i].type == "radio"){
            if(radios[i].selvalue == intvalue){
                radios[i].checked = true;
            }
            if(radios[i].checked){
                intervall = radios[i].selvalue;
                intid = radios[i].liid;
                internalIntervall = radios[i].selvalue;
            }
        }
    }
    /* Tar bort fargen fra den som var tidligere valgt */
    if(graphChange){
        var oldselected = document.getElementById(selectedMtype);
        if(oldselected != null){
            oldselected.className = "";
        }
    }else{
        oldselected = document.getElementById(oldSelectedIntervalId);
        if(oldselected != null){
            oldselected.className = "";
        }
    }
    /* Legger til fargen på den som nå er valgt */    
    if(graphChange){
        var newSelect = document.getElementById(mtype);
        newSelect.className = "chosenGraphType";
        selectedMtype = mtype;        
    }else{
        newSelect = document.getElementById(intid);
        newSelect.className = "chosenGraphType";
        oldSelectedIntervalId = intid;
        //        var headingid = "graphHeading" + intid;
        if(intid == "tfoneday"){
            $("#graphHeading").html(tfoneday);
        }else if(intid == "tftwodays"){
            $("#graphHeading").html(tftwodays);
        }else if(intid == "tfoneweek"){
            $("#graphHeading").html(tfoneweek);
        }else{
            $("#graphHeading").html(tfonemonth);
        }

    }
    /* Oppdaterer bildet*/
    var tmp = "overview.map?boey="+choosenBoey+"&mtype="+mtype+"&intervall="+intervall;
    imgsrc = tmp;
    var img = document.getElementById("image");
    img.src = tmp;
}

/* 
 * Funksjon som blir kjørt første gangen man kommer inn på siden, senere blir
 * updateGraph kjørt
 */
function updateGraphInit(){
    var img = document.getElementById("image");
    var tmp = "overview.map?boey="+internalboeyid+"&mtype="+updateMtype+"&intervall="+internalIntervall;
    imgsrc = tmp;
    img.src = tmp;
}

/*
 *  Metode som blir kallet når man skifter bøye man vil se grafer fra
 *  Denne metoden genererer et xml kall til serveren for å oppdatere
 *  målingstyper listen. Retur fra dette xml kallet blir sendt til metoden
 *  updateMeasType
 */
function changeMeasType(boeyid){
    internalboeyid = boeyid;
    first = false;
    /* Oppdaterer bøye infoen */
    updateInfo(boeyid);
    /* Skifter til de fine runde kantene på bøyene*/
    doNifty(boeyid);
    /* Skifter farge på den valgte bøyen og den som tidligere var valgt*/
    $("#"+choosenBoey).attr("class","");
    //    var oldSelected = document.getElementById(choosenBoey);
    //    oldSelected.className = "";
    $("#"+boeyid).attr("class","choosenBoey");
    //    var selected = document.getElementById(boeyid);
    //    selected.className = "choosenBoey";
    choosenBoey = boeyid;
    /* Lager en request for å oppdatere graftypene som skal kunne velges for denen bøyen og sender videre til updateMeasType*/
    createRequest();
    var uri = "ajax/updateGraphMtypes.ajx?boey="+boeyid;
    request.open("GET",uri,true);
    request.onreadystatechange=updateMeasType;
    request.send(null);
}

/* 
 * Oppdaterer menyen på høyre siden for målingstyper som det skal kunne tegnes
 * grafer for
 */
function updateMeasType(){
    if(request.readyState == 4){
        if(request.status == 200){
            var xmlDoc = request.responseXML;

            if (!xmlDoc.documentElement && request.responseStream) {
                xmlDoc.load(request.responseStream);
                alert('her');
                alert(xmlDoc);
            }

            var measureTypes = xmlDoc.getElementsByTagName("mtype");
            $("#map").attr("src",xmlDoc.getElementsByTagName("mapURL")[0].firstChild.nodeValue);

            var mtypeobject = document.getElementById("innerList");
            var i = 0;
            /* Fjerner de gamle elementene i listen */
            for (i = mtypeobject.childNodes.length - 1; i>=0; i--) {
                var tmpobject = mtypeobject.childNodes[i];
                mtypeobject.removeChild(tmpobject);
            }
            /* Lager listen på høyre side */
            var lios = document.createElement("li");
            mtypeobject.appendChild(lios);
            lios.innerHTML = measureTypeHeading;
            lios.className="latestValue";
            for(i = 0; i < measureTypes.length; i++){
                var li = document.createElement("li");
                mtypeobject.appendChild(li);
                var radioselect = null;
                var text = document.createElement("span");
                if(ie){
                    radioselect = document.createElement("<input type=radio name=valgt>");
                    li.appendChild(radioselect);
                    li.appendChild(text);
                    li.attachEvent("onclick",updateGraph);                
                    text.attachEvent("onclick",updateGraph);                
                }else{
                    radioselect = document.createElement("INPUT");
                    li.appendChild(radioselect);
                    li.appendChild(text);
                    radioselect.type ="radio";
                    li.setAttribute("onClick","updateGraph("+measureTypes[i].getElementsByTagName("id")[0].firstChild.nodeValue+")");
                    text.setAttribute("onClick","updateGraph("+measureTypes[i].getElementsByTagName("id")[0].firstChild.nodeValue+")");
                }
                if(i == 1){
                    radioselect.checked = true;
                    updateMtype = measureTypes[i].getElementsByTagName("id")[0].firstChild.nodeValue;
                    li.className = "chosenGraphType";
                    selectedMtype = measureTypes[i].getElementsByTagName("id")[0].firstChild.nodeValue;
                }
                radioselect.name = "valgt";                
                radioselect.thisvalue = measureTypes[i].getElementsByTagName("id")[0].firstChild.nodeValue;
                text.innerHTML=measureTypes[i].getElementsByTagName("name")[0].firstChild.nodeValue;
                li.setAttribute("id",measureTypes[i].getElementsByTagName("id")[0].firstChild.nodeValue);
                li.graphid = measureTypes[i].getElementsByTagName("id")[0].firstChild.nodeValue;
                text.graphid = measureTypes[i].getElementsByTagName("id")[0].firstChild.nodeValue;
                radioselect.graphid = measureTypes[i].getElementsByTagName("id")[0].firstChild.nodeValue;
            }


            /* Lager en xml request for å oppdatere tabellene nederst på siden */
            createRequest();
            var uri = "ajax/updateLastReadings.ajx?boey="+internalboeyid;
            request.open("GET",uri,true);
            request.onreadystatechange=uplastReading;
            request.send(null);
        }
    }
}

/* 
 * Oppdaterer informasjonen øverst på siden 
 */
function updateInfo(id){
    $("#infodiv").html(boeyInfo[id]);
//    var infoDiv = document.getElementById("infodiv");
//    infoDiv.innerHTML = boeyInfo[id];
}

/* 
 * Funksjon for å få fine runde kanter
 */
function doNifty(id){
/*  if(id == 600){
        Nifty("div#600 a","normal transparent top");
        Nifty("div#762 a","normal transparent top");
        Nifty("div#889 a","normal transparent top");
    }else{
        Nifty("div#600 a","normal transparent top");
        Nifty("div#762 a","normal transparent top");
        Nifty("div#889 a","normal transparent top");        
    }*/
}