function mk_child_elem (parent, name) {
    var elem = document.createElement(name);
    parent.appendChild(elem);
    return elem;
}

function add_story_li (list_elem, story, first_item) {
    var new_li = mk_child_elem(list_elem, 'li');
    if (first_item)
        new_li.className = 'FirstItem';
    var new_a = mk_child_elem(new_li, 'a');
    new_a.setAttribute('href', story[1]);
    new_a.setAttribute('title', story[3]);
    new_a.innerHTML = story[2];
}

function create_top_n_box_tabs (site_title, section_title) {
    var tabs_el = document.getElementById('TopNBoxTabs');
    if (!tabs_el)
        return;

    var table_el = mk_child_elem(tabs_el, 'table');
    var tbody_el = mk_child_elem(table_el, 'tbody');
    var tr_el = mk_child_elem(tbody_el, 'tr');

    // Site tab.
    var td_el = mk_child_elem(tr_el, 'td');
    td_el.id = 'TopNBoxHeadingSite';
    var div_el = mk_child_elem(td_el, 'div');
    var a_el = mk_child_elem(div_el, 'a');
    a_el.onclick = function () { return top_n_select_site() };
    a_el.appendChild(document.createTextNode(site_title));

    // Section tab.
    td_el = mk_child_elem(tr_el, 'td');
    td_el.id = 'TopNBoxHeadingSection';
    td_el.className = 'Selected';
    div_el = mk_child_elem(td_el, 'div');
    a_el = mk_child_elem(div_el, 'a');
    a_el.onclick = function () { return top_n_select_section() };
    a_el.appendChild(document.createTextNode(section_title));
}

// Start by showing the site-wide selection only when not in a section.
var top_n_site_mode = !RegPopularStoriesSection;

function top_n_select_site () {
    if (top_n_site_mode)
        return false;
    var site_elem = document.getElementById('TopNBoxHeadingSite');
    site_elem.className = 'Selected';
    var section_elem = document.getElementById('TopNBoxHeadingSection');
    section_elem.className = '';
    top_n_site_mode = true;
    select_unread_popular_stories();
    return false;
}

function top_n_select_section () {
    if (!top_n_site_mode)
        return false;
    var site_elem = document.getElementById('TopNBoxHeadingSite');
    site_elem.className = '';
    var section_elem = document.getElementById('TopNBoxHeadingSection');
    section_elem.className = 'Selected';
    top_n_site_mode = false;
    select_unread_popular_stories();
    return false;
}

function top_n_good_to_go () {
    return document.getElementById && RegPopularStories && VSs;
}

function select_unread_popular_stories () {
    if (!top_n_good_to_go())
        return;

    var popular;
    if (top_n_site_mode)
        popular = RegPopularStories;
    else if (RegPopularStoriesSection)
        popular = RegPopularStoriesSection;
    else
        return;     // something wrong
    var popular_len = popular.length;

    var elem = document.getElementById('TopNBox');
    var children = elem.getElementsByTagName('ol');
    if (children.length != 1)
        return;     // something wrong
    var list_elem = children[0];

    // Delete the static popular stories from the list.
    children = list_elem.getElementsByTagName('li');
    var max_items = children.length;
    while (list_elem.childNodes[0])
        list_elem.removeChild(list_elem.childNodes[0]);

    // Create hash of stories which have been read.
    var story_read = new Object;
    for (var i = 0; VSs.length > i; ++i)
        story_read[VSs[i]] = 1;

    // Select (upto) the first N stories which haven't been read yet.
    var num_items = 0;
    for (var i = 0; popular_len > i; ++i) {
        if (num_items == max_items)
            break;
        var story = popular[i];

        if (story_read[story[0]])
            continue;

        add_story_li(list_elem, story, (num_items == 0));
        ++num_items;
    }

    // If there aren't enough unread stories, fill the box up with ones
    // which have been read, starting from the most popular.
    for (var i = 0; popular_len > i; ++i) {
        if (num_items == max_items)
            break;
        var story = popular[i];

        if (!story_read[story[0]])
            continue;

        add_story_li(list_elem, story, (num_items == 0));
        ++num_items;
    }
}