function start() {

    // register binary radio buttons
    var mtab = document.getElementById('MapTab');
    var stab = document.getElementById('SecTab');
    var ftab = document.getElementById('ForTab');
    var vtab = document.getElementById('ValTab');
    mtab.setAttribute('onDeselect', 'hideDep();showimage();');
    mtab.setAttribute('onSelect', 'displayDep();showimage();');
    stab.setAttribute('onSelect', 'showimage();');
    vtab.setAttribute('onSelect', 'displayValTab();showimage();');
    ftab.setAttribute('onSelect', 'displayForTab();showimage();');
    vtab.setAttribute('onDeselect', 'hideValTab();');
    ftab.setAttribute('onDeselect', 'hideForTab();');

    tabSelect_('ValTab');
    tabSelect('ForTab');
    tabSelect_('MapTab');

    // register previous and next buttons for dropdowns
    dtlist = document.getElementById('ctl00_ContentPlaceHolder1_DateList');
    dplist = document.getElementById('ctl00_ContentPlaceHolder1_DepthList');
    mdlist = document.getElementById('ctl00_ContentPlaceHolder1_ModelList');
    dtlist.setAttribute('pButton', 'PButton');
    dtlist.setAttribute('nButton','NButton');
    dtlist.setAttribute('action', 'showimage();');
    dplist.setAttribute('pButton', 'UButton');
    dplist.setAttribute('nButton', 'DButton');
    dplist.setAttribute('action', 'showimage();');
    mdlist.setAttribute('pButton', 'PButton1');
    mdlist.setAttribute('nButton', 'NButton1');
    mdlist.setAttribute('action', 'showimage();');
    paramChange();
}
function paramChange() {
    var p = document.getElementById("ParamList").options[document.getElementById("ParamList").selectedIndex].value;
    var deprow = document.getElementById("depthBar");
    var pltrow = document.getElementById("SecTab");
    if (p == "eta") {
        deprow.style.display = 'none';
        pltrow.style.display = 'none';
        tabSelect_('MapTab');
    } else if (p == "vel" ){
        pltrow.style.display = 'none';
        deprow.style.display = '';
        tabSelect_('MapTab');
    } else {
        pltrow.style.display = '';
        if (document.getElementById('SecTab').getAttribute('selected') != 'true') {
            deprow.style.display = '';
        } else {
            deprow.style.display = 'none';
        }
    }
    showimage();
}

// functions to handle incremental dropdown with
// previous/next buttons (time, depth, etc' ...)
function go_next(id) {
    if (document.getElementById(id).selectedIndex < document.getElementById(id).length - 1) {
        document.getElementById(id).selectedIndex++;
        selectChanged(id);
    }
}
function go_prev(id) {
    if (document.getElementById(id).selectedIndex > 0) {
        document.getElementById(id).selectedIndex--;
        selectChanged(id);
    }
}
function selectChanged(id) {
    var s = document.getElementById(id);
    var d = s.selectedIndex;
    document.getElementById(s.getAttribute('pButton')).disabled = (d == 0);
    document.getElementById(s.getAttribute('nButton')).disabled = (d == s.length - 1);
    eval(s.getAttribute('action'));
}
// implement select binary radio buttons on table <td> tags
function tabSelect(id) {
    var t = document.getElementById(id);
    var p = t.parentNode;
    var t2;
    for (i = 0; i < p.childNodes.length; i++) {
        t2 = p.childNodes[i];
        //document.getElementById(t.getAttribute('otherTab'));
        if (t2.nodeType==1 && t2.getAttribute('selected') == 'true') {
            t2.setAttribute('selected', 'false');
            t2.className = 'tab';
            eval(t2.getAttribute('onDeselect'));
        }
    }
    t.setAttribute('selected', 'true');
    t.className = 'tab activeTab';
    eval(t.getAttribute('onSelect'));
}
function tabSelect_(id) {
    var t = document.getElementById(id);
    var p = t.parentNode;
    var t2;
    for (i = 0; i < p.childNodes.length; i++) {
        t2 = p.childNodes[i];
        if (t2.nodeType == 1 && t2.getAttribute('selected') == 'true') {
            t2.setAttribute('selected', 'false');
            t2.className = 'tab';
        }
    }
    t.setAttribute('selected', 'true');
    t.className = 'tab activeTab';
}
function displayValTab() {
    document.getElementById("vTable").style.display = '';
}
function displayForTab() {
    document.getElementById("fTable").style.display = '';
}
function hideValTab() {
    document.getElementById("vTable").style.display = 'none';
}
function hideForTab() {
    tabSelect_('MapTab');
    document.getElementById("fTable").style.display = 'none';
    displayDep();
}
function hideDep() {
    document.getElementById('depthBar').style.display = 'none';
}
function displayDep() {
    var p = document.getElementById('ParamList').options[document.getElementById('ParamList').selectedIndex].value;
    if (p != "vel" && p != "eta") {
        document.getElementById('depthBar').style.display = '';
    }
}
function showimage() {
    var im = document.getElementById('image');
    var src;
    var alt;
    var txt;
    if (document.getElementById('ValTab').getAttribute('selected') != 'true') {
        if (document.getElementById('ctl00_ContentPlaceHolder1_DateList').disabled) {
            src = 'images/empty.gif';
            alt = 'No Images available';            
        }
        else {
            var p = document.getElementById('ParamList').options[document.getElementById('ParamList').selectedIndex].value;
            txt = document.getElementById('ctl00_ContentPlaceHolder1_DateList').options[document.getElementById('ctl00_ContentPlaceHolder1_DateList').selectedIndex].value;
            document.getElementById('finfo').style.display = '';
            if (document.getElementById('SecTab').getAttribute('selected') != 'true') {
                var d;
                if (p == 'eta') {
                    d = '000';
                    document.getElementById('finfo').innerHTML = "";
                } else {
                    d = document.getElementById('ctl00_ContentPlaceHolder1_DepthList').options[document.getElementById('ctl00_ContentPlaceHolder1_DepthList').selectedIndex].value;
                    document.getElementById('finfo').style.display = 'none';
                }
                src = 'images/forecast/' + txt + p + d + '.gif';
                alt = p + ' map at depth ' + d + ' and time ' + txt;
            } else {
                src = 'images/forecast/' + txt + p.substr(0, 1) + 'sech.gif';
                alt = p + ' section at time ' + txt;
                document.getElementById('finfo').innerHTML = "Image displays " + (p == 'tem' ? "potential temperature" : "salinity") + " forecast along the section north-westward of Haifa"
            }
        }
    } else {
        var sel = document.getElementById('ctl00_ContentPlaceHolder1_ModelList');
        if (sel.disabled) {
            src = 'images/empty.gif';
            alt = 'No Images available';
        }
        else {
            var s = sel.options[sel.selectedIndex].value;
            txt = sel.options[sel.selectedIndex].text;
            src = 'images/validation/' + s;
            alt = 'sst compared to ' + txt;
            var ssttime = s.substr(8, 4) + "-" + s.substr(12, 2) + "-" + s.substr(14, 2) + " 00:00 GMT";
            var modate = new Date();
            modate.setFullYear(s.substr(17, 4), s.substr(21, 2), s.substr(23, 2));
            if (txt.substr(0, 8) == "hindcast") {
                modate.setDate(modate.getDate() - 2);
            }
            var modeltime = modate.getFullYear() + "-" + d2(modate.getMonth()) + "-" + d2(modate.getDate()) + " 12:00 GMT";
            var plushour = txt.substr(9) + " " + txt.substr(0, 8);
            document.getElementById('vinfo').innerHTML = "Image displays the difference between <a href='http://gos.ifa.rm.cnr.it/index.php?id=407'>analyzed SST</a> for " + ssttime + "<br/> and the " + plushour + " from the model which ran starting from <br/>" + modeltime;
        }
    }
    im.src = src;
    im.alt = alt;
}
function d2(num) {
    var n = num + '';
    if (n.length == 1) {
        return "0" + n;
    } else {
        return n;
    }
}