var openSelect = null;
// init
$(function () {
    $("select.select").each(function () {
        var i = $(this);
        var list = [];
        var label = "";

        // add options and optgroups to list array
        i.children().each(function () {
            var tagName = String($(this)[0].tagName).toUpperCase();
            if (tagName == "OPTION") {
                list.push($(this));
            } else if (tagName == "OPTGROUP") {
                var subList = { label: $(this).attr("label"), img: $(this).attr("img"), children: $(this).children() };
                list.push(subList);
            }
        });

        // create fancy dropdown list
        var sName = $(this).attr("name");
        var html = "<div class=\"select\" >";
        html += "<input type=\"hidden\" name=\"" + sName + "\" value=\"" + list[0].val() + "\" class=\"" + i[0].className + "\" />";
        html += "<div class=\"label\" ></div>";
        html += "<div class=\"button\" ><img src=\"/images/downArrow.png\" width=\"9\" height=\"7\" /></div>";
        html += "<div class=\"list hide\" >";
        // options for ddl
        for (var node in list) {
            if (list[node].label != undefined) {
                var img = "";
                if (list[node].img != undefined) {
                    img = "<img src=\"" + list[node].img + "\" />";
                }
                html += "<div class=\"optgroup last\" >" + img + list[node].label + "</div>";
                list[node].children.each(function () {
                    var img = "";
                    if ($(this).attr("img")) {
                        img = "<img src=\"" + $(this).attr("img") + "\" />";
                    }
                    var selected = "";
                    if ($(this).attr("selected")) {
                        selected = "selected=\"selected\"";
                        label = img + $(this).html();
                    }
                    html += "<div class=\"option last\" " + selected + " val=\"" + $(this).val() + "\">" + img + $(this).html() + "</div>";
                });
                // selected option
            } else {
                var img = "";
                if (list[node].attr("img") != undefined) {
                    img = "<img src=\"" + list[node].attr("img") + "\" />";
                }
                var selected = "";
                if (list[node].attr("selected")) {
                    selected = "selected=\"selected\"";
                    label = img + list[node].html();
                }
                html += "<div class=\"option last\" " + selected + " val=\"" + list[node].val() + "\">" + img + list[node].html() + "</div>";
            }
        }
        html += "</div>";
        html += "</div>";
        html = $(html);
        // replace old select list with newly created one
        i.replaceWith(html);
        // ddl - set state to closed
        html.data("state", "close");
        var list = html.children(".list");

        // Try to get selected
        if (!label) {
            label = list.children().first().html();
        }
        list.children(".option").last().addClass("bottom");
        html.children(".label").html(label);

        // click on option, set hidden input and change label
        list.children(".option").click(function () {
            html.children("input[name='" + sName + "']").val($(this).attr("val"));
            html.children(".label").html($(this).html());

            // if select requires validation, and validation script is loaded
            if (typeof $().validate == 'function' && html.children("input[name='" + sName + "']").hasClass('required')) {
                if ($(this).attr("val") != '') {
                    html.removeClass('field-error');
                }
            }

            // postback
            var autoPost = null;
            // if select has autoPostBack set to false or undefined, or autoPostBack is overridden
            i.eq(0).attr("onchange") == undefined || $("input[name='" + sName + "']").hasClass('autoPostBackFalse') ? autoPost = false : autoPost = true;
            if (autoPost && $(this).attr("val") != '') {
                $('form').submit();
            }
        });

        // click on dropdown to open
        html.click(function (event) {
            if ($(this).data("state") == "close") {
                $(this).children(".button").addClass("active");
                list.fadeIn('fast', function () {
                    html.data("state", "open");
                });
            }
        });

        // click anywhere to close
        $(document).click(function (event) {
            if (html.data("state") == "open") {
                $(html).children(".button").removeClass("active");
                list.hide();
                html.data("state", "close");
            }
        });
    });
});