function showVersions(pageId) {
    
    var uri = "/common/handlers/get-versions.ashx?pageId=" + pageId;

    $.getJSON(uri, function(obj) {
        var output = "<table class=\"frame-grid\">";
        output += "<thead class=\"header\">";
        output += "<td class=\"left\" style=\"width: 10px;\">Ver.</td>";
        output += "<td style=\"width: 75px;\">Date of</td>";
        output += "<td style=\"width: 190px;\">Page Title</td>";        
        output += "<td style=\"width: 25px;\">&nbsp;</td>";
        output += "</thead>";
        
        $.each(obj, function(ii, ver) {
            var makeCurrent = "<a class=\"makeCurrent\" onclick=\"makeCurrent('" + pageId + "'," + ver.Version + ")\">Set</a>";
            output += "<tr class='" + ((ii % 2) == 0 ? "row" : "rowalt") + "'>";
            output += "<td class=\"left\" class=\"version\">" + ver.Version + "</td>";
                output += "<td>" + ver.DateUpdatedAsString + "</td>";
                output += "<td>" + ver.Title.substring(0, 20) + "... " + "</td>";                
                output += "<td>" + makeCurrent + "</td>";
            output += "</tr>";
        });

        $("#versions").html(output + "</table><p style=\"text-align: right;\"><a onclick=\"hideVersions()\" href='#'>Hide</a></p>");
        $("#versions").removeClass("hideVersions");
        $("#versions").addClass("showVersions");

    });
}

function hideVersions() {
    $("#versions").addClass("hideVersions");
    $("#versions").removeClass("showVersions");
}

function makeCurrent(pageId, version) {

    if (confirm("Are you sure?")) {
        var uri = "/common/handlers/set-version.ashx?pageId=" + pageId + "&ver=" + version;

        $.getJSON(uri, function(obj) {
        location.href = location.pathname;
        });
    }
}

$(document).ready(function() {
    $(".navigation ul li").mouseover(function() {
        $(this).addClass("hover");
    });

    $(".navigation li").mouseout(function() {
        $(this).removeClass("hover");        
    });
});