var lastactivetabindex=-1;

/* ------------------------ */
/* Tabmenu for configurator */
/* ------------------------ */

// selected = pane number
// id = pane name
// container = the <div> in which the tabs occur

function initTabs() {
    if (!activetab) activetab=1;
    updatePanes();
}

function updatePanes() {
	var totalPanes = (1*document.getElementById("formField").attributes.getNamedItem("panes").value)+1;
    var links=document.getElementById('configurator').getElementsByTagName('A');
    var i=1;
    while(i < totalPanes) {
        if (activetab==i) {
            links[i-1].style.color='#fff';
            links[i-1].style.backgroundColor='#ee1e26';
            document.getElementById('tab'+i).style.display='block';
        } else {
            links[i-1].style.color='';
            links[i-1].style.backgroundColor='';
    	    document.getElementById('tab'+i).style.display='none';
        }
        i++;
    }
}


function selectPane(selectedIndex) {	
    activetab=selectedIndex;
    updatePanes();
    try {
        _Mtrack('Ubbink - Mijn eigen dakkapel - Stap '+selectedIndex);
    } catch (ex) {}
    try {
        pageTracker._trackPageview('/Configurator.aspx?stapaanvraag='+selectedIndex);
    } catch (ex) {}
}

function handlekeydown() {
    var oSource = window.event.srcElement;
    switch (window.event.keyCode) {
        case 13:
            // enter -> tab
            updatepage();
            window.event.keyCode=9;
            break;
        case 8:
            return oSource.isTextEdit;
        default:
            return true;
    }
}

function fillComboboxNode(cmb, nodelist, nochoiche) {
    if (nodelist&&cmb) {
        cmb.options.length=0;
        if (!nochoiche) {
            var opt = document.createElement("OPTION");
            cmb.options.add(opt);
            opt.value=0;
            opt.text="[Kiezen...]";
        }
        for (var i=0; i<nodelist.childNodes.length; i++) {
            var opt = document.createElement("OPTION");
            cmb.options.add(opt);
            var itm=nodelist.childNodes[i];
            var checked=itm.attributes.getNamedItem('Checked');
            var enabled=itm.attributes.getNamedItem('Enabled');
            if (checked) {
                opt.selected=checked.nodeValue;
            }
            if (enabled) {
                cmb.disabled=(enabled.nodeValue==1)?readonly:true;
            }
            opt.value=itm.attributes[0].nodeValue;
            opt.text=itm.attributes[1].nodeValue;
        }
    }
}

function mutateData(ctl, value, part, elvaliddator) {
    var m_request;
    var abort=false;
    var m_validator;
    if (elvaliddator!=null) {
        m_validator=document.getElementById(elvaliddator);
        if (m_validator.attributes.getNamedItem('isvalid')) {
            if (m_validator.attributes.getNamedItem('isvalid').value!='true') {
                abort=true;
            }
        }
    }
    if (!abort) {
        m_request=createRequestObject();
        m_request.open("POST", "ConfiguratorXML.aspx?timestamp"+ new Date().getTime(), true);
        m_request.onreadystatechange = function() {
            if (m_request.readyState == 4 && m_request.status == 200) {
                if (m_request.responseXML){
                   updateForm(m_request.responseXML);
                }
            }
        }
        if ((ctl)&&(!part)) {
            m_request.send('<data><mutate name="'+ctl.id+'" value="'+value+'"/></data>');
        } else if ((ctl)&&(part)) {
            m_request.send('<data><mutate name="'+((ctl.id!='')?ctl.id:ctl.name)+'" value="'+value+'" part="'+part+'"/></data>');
        } else {
            m_request.send('');
        }
    }
}

// First time do request
if (window.attachEvent) {
    window.attachEvent("onload", function() {mutateData(null, '');initTabs();});
    window.attachEvent("onreload", function() {mutateData(null, '');initTabs();});
} else {
    window.onload=function() {mutateData(null, '');initTabs();}
    window.onreload=function() {mutateData(null, '');initTabs();}
}

var glastypelist='';

function updateForm(xml) {
    // All controls on first tab
    updateTextBox(xml, "Width");    
    updateTextBox(xml, "Height");    
    updateTextBox(xml, "Angle");    
    
    // All controls on second tab

    updateCombo(xml, "SideFinishing", "SideFinishingList");
    updateCombo(xml, "SideFinishingColor", "SideFinishingColorList");
    updateCombo(xml, "FrontSideFinishingColor", "FrontSideFinishingColorList");
    updateCombo(xml, "BuoyColor", "BuoyColorList");
    
    // All controls on third tab
    updateGlasType(xml);
    updateParts(xml);

    // All help texts
    updateHelpTexts(xml);

    // Message
    var msg='';
    try {
        var els=xml.getElementsByTagName('msg');
        for (var i=0; i<els.length; i++) {
            msg+=''+els[i].attributes.getNamedItem('text').value+'\n\r';
        }
        if (msg!='') {
            alert(msg);
        }
    } catch (ex) {} 

    // Complete
    
    var tab4=document.getElementById('tab4');
    var iscomplete=false;
    try {
        iscomplete=(xml.getElementsByTagName('result')[0].attributes.getNamedItem('complete').value=='True')?true:false;
    } catch (ex) {iscomplete=false;} 
    tab4.attributes.getNamedItem('complete').value=iscomplete;
    
    var cfg_visualisation=document.getElementById('visualisation_img');
    cfg_visualisation.src='Visualisation.aspx?width=602&timestamp='+(new Date()).getTime();
}

function updateCombo(xml, ctlname, listname, nochoiche) {
    var list=xml.getElementsByTagName(listname)[0];
    var listvalue=xml.getElementsByTagName(ctlname)[0];
    var ctl=document.getElementById(ctlname);
    fillComboboxNode(ctl, list, nochoiche);
    if (listvalue) {
        if (listvalue.attributes[0]) {
            ctl.value=1*listvalue.attributes[0].value;
        }
    }
}

function updateTextBox(xml, ctlname) {
    var el=xml.getElementsByTagName(ctlname)[0];
    if (el) {document.getElementById(ctlname).value=''+el.attributes[0].value;}
}

function updateParts(xml) {
    var tr_position=document.getElementById('kozijn_position');
    var tr_type=document.getElementById('kozijn_type');
    var tr_glastype=document.getElementById('kozijn_glastype');
    var tr_windowdirection=document.getElementById('kozijn_windowdirection');
    var tr_seperation=document.getElementById('kozijn_seperation');
    var tr_width=document.getElementById('kozijn_width');

    var parts_node=xml.getElementsByTagName('parts')[0];
    if (parts_node) {
        var parts_length=0;
        try {
            parts_length=1*parts_node.attributes.getNamedItem('length').value;
        } catch (ex) {}
        var els=parts_node.getElementsByTagName('part');

        for (var i=tr_type.childNodes.length-1; i>=parts_length; i--) {
            tr_position.removeChild(tr_position.childNodes[i]);
            tr_type.removeChild(tr_type.childNodes[i]);
            tr_glastype.removeChild(tr_glastype.childNodes[i]);
            tr_windowdirection.removeChild(tr_windowdirection.childNodes[i]);
        }
        var widthparts=''+((parts_length+1)*40)+'px';
        for (var i=tr_type.childNodes.length; i<parts_length; i++) {
            var pos=i+1;
            var el;

            el=document.createElement("div");
            mutateHtml(el, ''+(i+1));
            tr_position.insertBefore(el, tr_position.lastChild);
            tr_position.style.width=widthparts;

            el=document.createElement("div");
            mutateHtml(el, '<select name="part_type" onchange="mutateData(this, this.options[this.selectedIndex].value, '+pos+');"><option value="D">D</option><option value="V">V</option><option value="P">P</option><option value="-">-</option></select>');
            tr_type.appendChild(el);
            tr_type.style.width=widthparts;

            el=document.createElement("div");
            el.style.visibility='hidden';
            mutateHtml(el, '<select name="part_glastype" onchange="mutateData(this, this.options[this.selectedIndex].value, '+pos+');">'+glastypelist+'</select>');
            tr_glastype.appendChild(el);
            tr_glastype.style.width=widthparts;

            el=document.createElement("div");
            el.style.visibility='hidden';
            mutateHtml(el, '<select name="part_windowdirection" onchange="mutateData(this, this.options[this.selectedIndex].value, '+pos+');"><option value="2">-</option><option value="0">L</option><option value="1">R</option></select>');
            tr_windowdirection.appendChild(el);
            tr_windowdirection.style.width=widthparts;
        }

        for (var i=0; i<els.length; i++) {
            updatePart(els[i]);
        }
    }
}

function updatePart(el) {
    var tr_position=document.getElementById('kozijn_position');
    var tr_type=document.getElementById('kozijn_type');
    var tr_glastype=document.getElementById('kozijn_glastype');
    var tr_windowdirection=document.getElementById('kozijn_windowdirection');
    
    var part_position=(1*el.attributes.getNamedItem('pos').value)-1;
    var part_glastype=el.attributes.getNamedItem('GlasType');
    var part_Type=el.attributes.getNamedItem('Type');
    var part_windowdirection=el.attributes.getNamedItem('WindowDirection');
    var part_iscustom=el.attributes.getNamedItem('IsCustom');

    if (part_Type) {
        tr_type.childNodes[part_position].childNodes[0].value=part_Type.value;
        tr_glastype.childNodes[part_position].style.visibility=((part_Type.value=='D')||(part_Type.value=='V'))?'visible':'hidden';
        tr_windowdirection.childNodes[part_position].style.visibility=(part_Type.value=='D')?'visible':'hidden';
    }
    
    if (part_glastype) {
        tr_glastype.childNodes[part_position].childNodes[0].value=part_glastype.value;
    }
    
    if (part_windowdirection) {
        tr_windowdirection.childNodes[part_position].childNodes[0].value=part_windowdirection.value;
    }
    
    if (part_iscustom) {
        if (part_iscustom.value=='True') {
            mutateHtml(tr_position.childNodes[part_position], '<input type="button" id="part_remove" value="-" onclick="mutateData(this, '+(part_position+1)+')"/>');
        } else {
            mutateHtml(tr_position.childNodes[part_position], ''+(part_position+1));
        }
    }
}


function mutateHtml(el, html) {
//    if (document.all) {
        el.innerHTML=html;
/*    } 
    else if (document.getElementById) {
        var r = this.ownerDocument.createRange();
        r.selectNodeContents(el);
        r.deleteContents();
        var df = r.createContextualFragment(html);
        this.appendChild(df);
    }
*/}

function updateHelpTexts(xml) {
    var rootel=xml.getElementsByTagName('TitleList')[0];
    if (rootel) {
        for (var i=0; i<rootel.childNodes.length; i++) {
            var el=rootel.childNodes[i];
            var title_id=''+el.attributes.getNamedItem('id').value;
            var title_txt=''+el.attributes.getNamedItem('value').value;
            var el_title=document.getElementById('title_'+title_id);
            if (el_title) {
                el_title.title=title_txt;
            }
        }        
    }
}

function updateGlasType(xml, parts) {
    var list=xml.getElementsByTagName("GlasTypeList")[0];
    if (list) {
        glastypelist='';
        for (var i=0; i<list.childNodes.length; i++) {
            var el=list.childNodes[i];
            glastypelist+='<option value='+el.attributes.getNamedItem('keynr').value+'>'+el.attributes.getNamedItem('keyvalue').value+'</option>';
        }

        var tr_glastype=document.getElementById('kozijn_glastype');
        var tr_glastypeselects=tr_glastype.getElementsByTagName('select');
        if (tr_glastype.childNodes.length>0) {
            var parts_node=xml.getElementsByTagName('parts')[0];
            if (parts_node) {
                var parts_length=0;
                try {
                    parts_length=1*parts_node.attributes.getNamedItem('length').value;
                } catch (ex) {}

                for (var i=0; i<parts_length; i++) {
                    var pos=i+1;
                    var el=tr_glastypeselects[i];
                    fillComboboxNode(el, list, true);
                }
            }
        }
    }
}