function RankingPageRender(containerId) 
{
    var container = document.getElementById(containerId);
    var str = "";
    str += "<table width=\"100%\" height=\"100%\">";
    str += "<tr height=\"50px\">";
    str += "<td id=\"CheckerContainer\" align=\"center\">";
    str += RPGetCheckerHTML();            
    str += "</td>";
    str += "</tr>";
    str += "<tr>";
    str += "<td id=\"RankingTableContainer\" valign=\"Top\" align=\"center\">";
    
    str += "</td>";
    str += "</tr>";
    str += "</table>";
    container.innerHTML = str;
    LoadRankingTable();
}

function RPCheckModeItem(item) 
{
    var item1 = document.getElementById('CheckerItem1');
    var item2 = document.getElementById('CheckerItem2');
    var item3 = document.getElementById('CheckerItem3');
    var item4 = document.getElementById('CheckerItem4');
    var item5 = document.getElementById('CheckerItem5');
    var hf = document.getElementById('ModeCheckerHF');
    if (hf != null) {
        if (hf.value == item) { return; }
        hf.value = item;
        this.className = 'factCaptionSelected';
        if (item1 != null) {
            if (item == 1) {
                item1.className = 'factCaptionSelected';
                item1.style.textDecoration = '';
            }
            else {
                item1.className = 'factCaptionUnSelected';
            }
        }
        if (item2 != null) {
            if (item == 2) {
                item2.className = 'factCaptionSelected';
                item2.style.textDecoration = '';
            }
            else {
                item2.className = 'factCaptionUnSelected';
            }
        }
        if (item3 != null) {
            if (item == 3) {
                item3.className = 'factCaptionSelected';
                item3.style.textDecoration = '';
            }
            else {
                item3.className = 'factCaptionUnSelected';
            }
        }
        if (item4 != null) {
            if (item == 4) {
                item4.className = 'factCaptionSelected';
                item4.style.textDecoration = '';
            }
            else {
                item4.className = 'factCaptionUnSelected';
            }
        }
        if (item5 != null) {
            if (item == 5) {
                item5.className = 'factCaptionSelected';
                item5.style.textDecoration = '';
            }
            else {
                item5.className = 'factCaptionUnSelected';
            }
        }
    }
    RPOnCheckerChanged();
}

function RPOnCheckerChanged() 
{
    LoadRankingTable();
}

function LoadRankingTable() 
{
    var hf = document.getElementById('ModeCheckerHF'); 
    LoadScript("reporting/RenderRankingTableScript.ashx?params="+hf.value);
}

function RPGetCheckerHTML() 
{
    var res = "";
    var js = "";

    res += "<input id=\"ModeCheckerHF\" type=\"hidden\" value=\"4\"/>";

    res += "<table style=\"border-collapse: collapse\">";
    res += "<tr>";
    res += "<td style=\"padding-right: 4px; border-right-style:solid; border-right-width:1px;\" align=\"center\">";
    js = "RPCheckModeItem(4);";
    res += "<div id=\"CheckerItem4\" style=\"padding:2px;\" class=\"factCaptionSelected\"  onmouseover=\"if(this.className == 'factCaptionUnSelected') {this.style.textDecoration = 'underline';}\" onmouseout=\"this.style.textDecoration = '';\" onclick=\"" + js + "\">";
    res += "2008";
    res += "</div>";
    res += "</td>";
    res += "<td style=\"padding-right: 4px; border-right-style:solid; border-right-width:1px;\" align=\"center\">";
    js = "RPCheckModeItem(1);";
    res += "<div id=\"CheckerItem1\" style=\"padding:2px;\" class=\"factCaptionUnSelected\"  onmouseover=\"if(this.className == 'factCaptionUnSelected') {this.style.textDecoration = 'underline';}\" onmouseout=\"this.style.textDecoration = '';\" onclick=\"" + js + "\">";
    res += "2007";
    res += "</div>";
    res += "</td>";
    res += "<td style=\"padding-left: 4px; padding-right: 4px; border-right-style:solid; border-right-width:1px;\" align=\"center\">";
    js = "RPCheckModeItem(2);";
    res += "<div id=\"CheckerItem2\" style=\"padding:2px;\" class=\"factCaptionUnSelected\" onmouseover=\"if(this.className == 'factCaptionUnSelected') {this.style.textDecoration = 'underline';}\" onmouseout=\"this.style.textDecoration = '';\" onclick=\"" + js + "\">";
    res += "2006";
    res += "</div>";
    res += "</td>";
    res += "<td style=\"padding-left: 4px; padding-right: 4px; border-right-style:solid; border-right-width:1px;\" align=\"center\">";
    js = "RPCheckModeItem(5);";
    res += "<div id=\"CheckerItem5\" style=\"padding:2px;\" class=\"factCaptionUnSelected\" onmouseover=\"if(this.className == 'factCaptionUnSelected') {this.style.textDecoration = 'underline';}\" onmouseout=\"this.style.textDecoration = '';\" onclick=\"" + js + "\">";
    res += "Change 2008/2007";
    res += "</div>";
    res += "</td>";
    res += "<td style=\"padding-left: 4px;\" align=\"center\">";
    js = "RPCheckModeItem(3);";
    res += "<div id=\"CheckerItem3\" style=\"padding:2px;\" class=\"factCaptionUnSelected\" onmouseover=\"if(this.className == 'factCaptionUnSelected') {this.style.textDecoration = 'underline';}\" onmouseout=\"this.style.textDecoration = '';\" onclick=\"" + js + "\">";
    res += "Change 2007/2006";
    res += "</div>";
    res += "</td>";
    res += "</tr>";
    res += "</table>";
    return (res);
}