var panels = new Array('panel1', 'panel2', 'panel3', 'panel4', 'panel5', 'panel6', 'panel7', 'panel8');
var selectedTab = null;
var pricesTabGroup = null;
var premiumsTabGroup = null;
function showPanel(tab, name) {
    if (selectedTab) {
        selectedTab.style.backgroundColor = '';
        selectedTab.style.paddingTop = '0px';
        selectedTab.style.marginTop = '4px';
    }
    selectedTab = tab;
    selectedTab.style.backgroundColor = 'white';
    selectedTab.style.paddingTop = '4px';
    selectedTab.style.marginTop = '0px';
    
    for (i = 0; i < panels.length; i++)
        document.getElementById(panels[i]).style.display = (name == panels[i]) ? 'block' : 'none';

    return false;
}
function showPanel2(tabgroup, name) {
    pricesTabGroup = document.getElementById("GPOTabGroupPrices");
    premiumsTabGroup = document.getElementById("GPOTabGroupPremiums");
    if (name == 'prices') {
        pricesTabGroup.style.display = 'block';
        premiumsTabGroup.style.display = 'none';
        showPanel(document.getElementById("PanelTab1"), "panel1");
        SetBottomTabs("prices");
    }
    else {
        pricesTabGroup.style.display = 'none';
        premiumsTabGroup.style.display = 'block';
        showPanel(document.getElementById("PanelTab5"), "panel5");
        SetBottomTabs("premiums");        
    }
    return false;
}
function SetBottomTabs(tabName) {
    var tab1, tab2;
    if (tabName == 'prices') {
        tab1 = document.getElementById("PriceTab");
        tab2 = document.getElementById("PremiumTab");
    }
    else {
        tab1 = document.getElementById("PremiumTab");
        tab2 = document.getElementById("PriceTab");
    }
    tab1.style.backgroundColor = 'white';
    tab1.style.paddingBottom = '4px';
    tab1.style.marginBottom = '0px';
    tab2.style.backgroundColor = '';
    tab2.style.paddingBottom = '0px';
    tab2.style.marginBottom = '4px';
}
function genPanels(baseurl) {

    var str = '<div id="GPOTabGroupPrices" style="display: block">' +
    
    '<div id="GPOtabs"  style="display: block">' +
    '<a href="" id="PanelTab1" class="GPOtab" onmousedown="return event.returnValue = showPanel(this, \'panel1\');" onclick="return false;">30 Days</a>' +
    '<a href="" id="PanelTab2" class="GPOtab" onmousedown="return event.returnValue = showPanel(this, \'panel2\');" onclick="return false;">60 Days</a>' +
    '<a href="" id="PanelTab3" class="GPOtab" onmousedown="return event.returnValue = showPanel(this, \'panel3\');" onclick="return false;">6 Months</a>' +
    '<a href="" id="PanelTab4" class="GPOtab" onmousedown="return event.returnValue = showPanel(this, \'panel4\');" onclick="return false;">1 Year</a>' +
    '</div>' +
    
    '<div class="GPOpanel" id="panel1" style="display: block">' +
    '<img src="XXXXX_30_Days.png" />' +
    '</div>' +
    '<div class="GPOpanel" id="panel2" style="display: none">' +
     '  <img src="XXXXX_60_Days.png" />' +
     '</div>' +
    '<div class="GPOpanel" id="panel3" style="display: none">' +
    '<img src="XXXXX_6_Months.png" />' +
    '</div>' +
    '<div class="GPOpanel" id="panel4" style="display: none">' +
    '<img src="XXXXX_1_Year.png" />' +
    '</div>' + '</div>' +

    '<div id="GPOTabGroupPremiums" style="display: none">' +
        '<div id="GPOtabs2"  style="display: block">' +
     '<a href="" id="PanelTab5" class="GPOtab" onmousedown="return event.returnValue = showPanel(this, \'panel5\');" onclick="return false;">30 Days</a>' +
    '<a href="" id="PanelTab6" class="GPOtab" onmousedown="return event.returnValue = showPanel(this, \'panel6\');" onclick="return false;">60 Days</a>' +
    '<a href="" id="PanelTab7" class="GPOtab" onmousedown="return event.returnValue = showPanel(this, \'panel7\');" onclick="return false;">6 Months</a>' +
    '<a href="" id="PanelTab8" class="GPOtab" onmousedown="return event.returnValue = showPanel(this, \'panel8\');" onclick="return false;">1 Year</a>' +
    '</div>' +
    '<div class="GPOpanel" id="panel5" style="display: block">' +
    '<img src="XXXXX_30_Days_Premium.png" />' +
    '</div>' +
    '<div class="GPOpanel" id="panel6" style="display: none">' +
     '  <img src="XXXXX_60_Days_Premium.png" />' +
     '</div>' +
    '<div class="GPOpanel" id="panel7" style="display: none">' +
    '<img src="XXXXX_6_Months_Premium.png" />' +
    '</div>' +
    '<div class="GPOpanel" id="panel8" style="display: none">' +
    '<img src="XXXXX_1_Year_Premium.png" />' +
    '</div>' + '</div>' +
    
    '<div>' +
     '<a href="" id="PriceTab" class="GPOtab2" onmousedown="return event.returnValue = showPanel2(this, \'prices\');" onclick="return false;">Prices</a>' +
    '<a href="" id="PremiumTab" class="GPOtab2" onmousedown="return event.returnValue = showPanel2(this, \'premiums\');" onclick="return false;">Premiums</a>' +
    '</div>'
    
    str = str.replace(/XXXXX/g, baseurl);
    document.write(str);
    selectedTab = document.getElementById("PanelTab1");
    showPanel(selectedTab, "panel1");
    SetBottomTabs("prices");
}