/**
 * Takes any standard <select> element and turns into into a styleized dropdown.
 *
 * The first <option> will be the "header" visible to the user before expanding
 * the dropdown.
 *
 * All other <option> tags will be turned into <a> where the href will be the
 * value of the option.
 *
 * Example of a valid <select>:
 *
 * <select id="test">
 *   <option>Choose Country &amp; Language</option>
 *   <option value="/us-en">US - English</option>
 *   <option value="/ca-en">Canada - English</option>
 *   <option value="/ca-fr">Canada - French</option>
 *   <option value="/mx-en">Mexico - English</option>
 *   <option value="/mx-es">Mexico - Spanish</option>
 *   <option value="http://www.alcan.com/">China - Mandarin</option>
 * </select>
 *
 * @option  depth  integer  If greater than 0, the nth parent of the <select>
 *                          will be replaced (as well as all of its contents).
 * @option  open   boolean  If true, the dropdown will be open on load. Defaults
 *                          to false.
 * @option  width  integer  Width the styleized dropdown should be. Default is
 *                          "auto".
 */
jQuery.fn.dropdown = function(options) {
    var settings = {
        depth: 0,
        open: false,
        width: "auto"
    };

    jQuery.extend(settings, options);

    this.each(function() {
        // Only works with select elements
        if (this.nodeName.toLowerCase() != "select") {
            return this;
        }

        var current = jQuery(this);
        var container = jQuery("<div/>").addClass("dropdown").attr("id", current.attr("id"));
        var header = jQuery("<strong/>").appendTo(container);
        var items = jQuery("<ul/>").appendTo(container);

        jQuery("option", this).each(function() {
            var content = jQuery(this).html();
            if (header.html() == "") {
                header.html(content + "<img src='/cablepublic/images/dropdown-arrow.png'/>");
                return this;
            }
            var value = this.value;

            var item = jQuery("<li/>").appendTo(items);
            jQuery("<a/>").html(content).attr("href", value).appendTo(item);
        });

        header.bind("click", function() {
            if (items.is(":visible")) {
                return;
            }

            items.slideDown("fast", function() {
                // click anywhere in the page and the item list closes
                jQuery(document).one("click", function() {
                    items.slideUp("fast");
                });
            });
        });

        if (options.depth > 0) {
            for (var d = 0; d < options.depth; d++) {
                current = current.parent();
            }
        }

        current.replaceWith(container);
        var width = options.width;

        if (options.width == "auto") {
            /**
             * The following code goes through and determines the maximum width and
             * sets all elements in the dropdown to this width.
             */
            width = header.width() + 20; // The header needs some padding due to the arrow image
    
            jQuery("li", items).each(function() {
                var tw = $(this).width();
                if (tw > width) {
                    width = tw;
                }
            });
        }

        items.width(width + 11);
        header.width(width).css("display", "block");

        if (!settings.open) {
            items.hide();
        }
    })
};