/**
* Set up dropdown styling.
*
* @author Andrew Noyes (a.noyes@linkeng.com)
*/


function setupDropdown(ddl) {
    var selectionSpan = $("<span />").addClass("ddlSelectionSpan").insertBefore(ddl);
    var open = false;   // shared variable that indicates when the ddl is open


    function updateSelectionSpan() {
        var value = ddl.options[ddl.selectedIndex].text;
        $(selectionSpan).text(value);
    }


    // changes the background image of the button to appear closed
    function closeDropdown() {
        $(selectionSpan).removeClass("open");
        $(selectionSpan).addClass("closed");
        open = false;
    }


    // changes the background image of the button to appear open
    function openDropdown() {
        $(selectionSpan).removeClass("closed");
        $(selectionSpan).addClass("open");
        open = true;
    }


    // toggles the dropdown background image open and closed
    function toggleDropdown() {
        if (open) {
            closeDropdown();
        } else {
            openDropdown();
        }
    }

    updateSelectionSpan();  // initialize span

    // wire up dropdown list events
    $(ddl).change(updateSelectionSpan);
    $(ddl).click(function () {
        toggleDropdown();
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    });

    // set styles when user clicks outside of dropdown
    $(document.body).click(closeDropdown);
}