/// <reference path="~/Resources/js/jquery-1.2.6-intellisense.js" />

$.fn.checkedDropDownList = function(option) {

    option = option || {};
    option.change = option.change || function() { };

    var id = $(this).attr("id");
    var hasSelected = false;
    var items = [];
    $("option", $(this)).each(function(i) {
        items.push({
            text: $(this).text(),
            selected: $(this).attr("selected")
        });
        if ($(this).attr("selected"))
            hasSelected = true;
    });

    if (items.length == 0)
        return;

    var html = $('<div class="drop-down-widget"><a href="drop-me">' + items[0].text + '</a></div>');
    var panel = '<div class="drop-down-panel"><ul>';

    for (var i in items) {
        if (i == 0) continue;
        var item = items[i];
        if (item.hasOwnProperty("text")) {
            panel += '<li><label><input id="' + id + '-item-' + i + '" type="checkbox" ' +
                (item.selected ? 'checked="checked"' : '') + ' />' + item.text + '</label></li>';
        }
    }

    panel += '</ul></div>';
    panel = $(panel);
    $(this).before(html)
           .before(panel)
           .hide();

    var widget = $("a", $(html));
    var list = $("ul", $(panel));
    var checkboxes = $(":checkbox", $(panel));

    function setTitle() {
        var title = "";
        var n = 0;
        $(checkboxes).each(function(i) {
            if ($(this).attr("checked")) {
                if (n == 3) {
                    title += ", ...";
                    n++;
                    return false;
                }
                if (n > 0 && i > 0) {
                    title += ", "
                }
                title += $(this).parent().text();
                n++;
            }
        });
        if (title == "") title = items[0].text;
        widget.text(title);
    }

    setTitle();

    function closePanel() {
        $("body").unbind("click", closePanel);
        $(widget).data("open", false);
        $(panel).hide();
        setTitle();

        var hasChanged = false;
        $.each(items, function(i, item) {
            if (i > 0) {
                var checkBoxValue = $($(checkboxes).get(i - 1)).attr("checked");
                if (checkBoxValue != item.selected) {
                    hasChanged = true;
                    return false;
                }
            }
        });

        if (hasChanged)
            option.change();
    }

    function openPanel() {
        widget.text(items[0].text);
        $(widget).data("open", true);
        $(panel).css("top", $(html).position().top + $(html).height() + 5)
                    .css("left", $(html).position().left + 1)
                    .show();
    }

    var timer = null;

    $([html.get(0), panel.get(0), list.get(0)]).mouseout(function() {
        timer = setTimeout(function() {
            if (timer != null) {
                clearTimeout(timer);
                timer = null;
                if ($(widget).data("open") == true) {
                    $("body").bind("click", closePanel);
                }
            }
        }, 0);
    });

    $([html.get(0), panel.get(0), list.get(0)]).mouseover(function() {
        $("body").unbind("click", closePanel);
        if (timer == null) return;
        clearTimeout(timer);
        timer = null;
    });

    $(widget).click(function() {
        var open = $(this).data("open");

        if (open == true) {
            closePanel();
        } else {
            openPanel();
        }
        return false;
    });

    return $(this);
};