$(document).ready(function() {
    // convert form select for grades to html
    var selectDiv = $('#grade-select');
    selectDiv.addClass('dropdown');
    var options = selectDiv.children().children('select').children('option');
    var output = "";
    options.each(function() {
        if (this.disabled) {
            output = "<h3>"+this.text+"</h3><ul>";
        } else if (this.selected) {
            output += "<li class=\"selected\"><a href=\"/"+this.value+"/\">"+this.text+"</a></li>";
        } else {
            output += "<li><a href=\"/"+this.value+"/\">"+this.text+"</a></li>";
        }
    });
    output += "</ul>";
    selectDiv.html(output);
    
    // convert homepage winners dropdown to html
    var winSelect = $('#winner-select');
    winSelect.addClass('dropdown');
    var options = winSelect.children().children('select').children('option');
    var output = "";
    options.each(function() {
        if (this.disabled) {
            output = "<h3>"+this.text+"</h3><ul>";
        } else if (this.selected) {
            output += "<li class=\"selected\"><a href=\"/"+this.value+"/\">"+this.text+"</a></li>";
        } else {
            output += "<li><a href=\"/"+this.value+"/\">"+this.text+"</a></li>";
        }
    });
    output += "</ul>";
    winSelect.html(output);
    
    // activate dropdown functionality
    dropdown('#winner-select', 'open');
    
    // set up dropdowns for region selector on top of every page
    // and network selector in left nav
    function dropdown(parentId, className) {
        var dropdownParent = $(parentId);
        dropdownParent.children('ul').hide();
        dropdownParent.bind('mouseenter', function(e){
            var thisItem = $(this);
            thisItem.addClass(className);
            thisItem.children('ul').show();
        }).bind('mouseleave', function(e){
            var thisItem = $(this);
            thisItem.removeClass(className);
            thisItem.children('ul').hide();
        });
    };
    // activate dropdown functionality
    dropdown('#grade-select', 'open');
});

// <form>
// <select id="grades" action="" method="GET">
//     <option disabled="disabled" selected="selected">Choose Grade Range</option>
//     <option value="/classroom">Elementary School (k-2)</option>
//     <option value="/school">Elementary School (3-5)</option>
//     <option value="/community">Middle School (6-8)</option>
// </select>
// <input type="submit" />
// </form>
// <h3>Choose Grade Range</h3>
// <ul>
//     <li><a href="/classroom">Elementary School (k-2)</a></li>
//     <li><a href="/school">Elementary School (3-5)</a></li>
//     <li><a href="/community">Middle School (6-8)</a></li>
// </ul>