/// <reference path="../External/jquery-1.3.2-vsdoc2.js" />
/// <reference path="BrowserDetect.js" />

(function($) {

    $.fn.WSelectBox = function(o) {
        //return this.each(function() {
        return new $wsb(this, o);
        //});
    };

    var defaults = {
        DefaultText: "",    //text to show as default for selector
        KeyFieldName: "Key",
        ValueFieldName: "Value",
        Items: [],          //array of {key,value} pairs
        SelectImage: "",     //image for the select box
        SelectedValue: 0,
        onSelectedChange: null,
        //css names
        cssClass: "SelectBox",
        cssClassOpen: "SelectBoxOpen",
        cssClassSelected: "SelectBoxSelected",
        Horizontal: false,
        VisibleItems: 15
    };

    $.WSelectBox = function(e, o) {

        //override defaults
        this.opts = $.extend({}, defaults, o || {});
        this.selectBox = $(e);

        // Rendering control
        this.RenderControl();
        this.SelectValue(this.opts.SelectedValue);
    };

    var $wsb = $.WSelectBox;

    $wsb.fn = $wsb.prototype = {
        WSelectBox: '0.2'
    };

    $wsb.fn.extend = $wsb.extend = $.extend;

    $wsb.fn.extend({

        SelectedValue: function() {
            return this.opts.SelectedValue;
        },

        SelectValue: function(Value, NotFireEvent) {
            this.opts.SelectedValue = Value;
            var text = this.SelectedText();
            if (text == this.opts.ClearItemText) {
                text = "";
            }
            if (text.length > 1) {
                $('.' + this.opts.cssClass + ' span', this.selectBox).html(text);
                $('.' + this.opts.cssClassSelected + ' span', this.selectBox).html(text);
                $('.' + this.opts.cssClassOpen + ' .Top span', this.selectBox).html(text);
                var sb = $('.' + this.opts.cssClass, this.selectBox);
                sb.removeClass(this.opts.cssClass);
                sb.addClass(this.opts.cssClassSelected);
            }
            else {
                var sb = $('.' + this.opts.cssClassSelected, this.selectBox);
                sb.removeClass(this.opts.cssClassSelected);
                sb.addClass(this.opts.cssClass);
                $('.' + this.opts.cssClass + ' span', this.selectBox).html(this.opts.DefaultText);
                $('.' + this.opts.cssClassOpen + ' .Top span', this.selectBox).html(this.opts.DefaultText);
            }
            if (this.opts.onSelectedChange != null && NotFireEvent == undefined) {
                this.opts.onSelectedChange(Value, text);
            }
        },

        SelectedText: function() {
            var textFrom = $('.' + this.opts.cssClassOpen + " .Content a[class='" + this.opts.SelectedValue + "']'", this.selectBox);
            if (textFrom != null) {
                return textFrom.text();
            }
            return "";
        },

        SetItems: function(newItems) {
            this.opts.Items.Clear();
            this.opts.Items = this.opts.Items.concat(newItems);
            this.RenderControl();
        },

        RenderControl: function() {

            var header = "<span align='center' valign='middle'>" + this.opts.DefaultText +
                "</span>" + "<img valign='middle' align='absmiddle' src='" + this.opts.SelectImage + "' />";

            this.selectBox.html("<div class='" + this.opts.cssClass + "'>" + header + "</div>");
            $('div.' + this.opts.cssClass, this.selectBox).click(function() {
                var $this = $(this);
                $this.hide();
                $this.parent().css('position', 'relative');
                $this.next().show();
            });

            var html = 
                "<div class='" + this.opts.cssClassOpen + "' style='position:absolute;left:0;top:0" + 
                ";z-index:6;display:none' >" +
                "<div class='Top'>" + header + "</div><div class='Content'>";

            //Adds an empty Item at the beggining
            if (this.opts.ClearItemText != undefined && this.opts.ClearItemText != null) {
                html += "<a href='javascript:void(0);' class='0' style='text-align:center'>" + this.opts.ClearItemText + "</a>";
            }
            for (var i = 0; i < this.opts.Items.length; i++) {
                html += "<a href='javascript:void(0);' class='" +
                        eval("this.opts.Items[i]." + this.opts.KeyFieldName) + "'>" +
                        eval("this.opts.Items[i]." + this.opts.ValueFieldName) + "</a>";
            }
            html += "</div><div class='Bottom'></div></div>";
            this.selectBox.append(html);

            // If we need to scroll the items
            if (this.opts.Items.length > this.opts.VisibleItems) {
                var content = $('div.Content', this.selectBox);
                content.css('height', (this.opts.VisibleItems * 18) + 'px'); // 18 text height
                content.css('overflow', 'hidden');

                var div1 = jQuery("<div class='Content Hand' style='text-align:center;display:none;font-size:1.5em'>&#x25b4;</div>")
                div1.click(function() { // Scroll up
                    var $this = $(this);
                    var st = $this.next().scrollTop();
                    if (st > 0) {
                        $this.next().scrollTop(st - 18);
                        if (st - 18 <= 0) { // no more scroll room
                            $this.hide();
                        }
                    }
                });
                content.before(div1);

                var div2 = jQuery("<div class='Content Hand' style='text-align:center;font-size:1.5em'>&#x25be;</div>")
                div2.click(function() { // Scroll down
                    var $this = $(this);
                    var st = $this.prev().scrollTop();
                    $this.prev().scrollTop(st + 18);
                    $this.prev().prev().show();
                    if ($this.prev().scrollTop() == st) { // no more scroll room
                        $this.hide();
                    }
                });
                content.after(div2);
            }

            // Binding events
            $('div.' + this.opts.cssClassOpen + ' .Top a', this.selectBox).click(function() {
                var $this = $(this);
                $this.parent().parent().hide();
                $this.parent().parent().parent().css('position', 'static');
                $this.parent().parent().prev().show();
            });
            var self = this;
            $('div.' + this.opts.cssClassOpen + ' .Content a', this.selectBox).click(function() {
                var $this = $(this);
                var Value = eval($this.attr('class'));
                if (Value != self.opts.SelectedValue) {
                    self.SelectValue(Value);
                }
                $this.parent().parent().hide();
                $this.parent().parent().parent().css('position', 'static');
                $this.parent().parent().prev().show();
            });
            
            // Close this dialog when clicking elsewhere on page
            $(document).click(function(e) {
                var el = e.target;
                if (self.selectBox.find('*').index(el) >= 0) {
                    return;
                }
                var opened = $("div." + self.opts.cssClassOpen, self.selectBox);
                opened.hide();
                opened.parent().css('position', 'static');
                opened.prev().show();
                //$("div:first", self.selectBox).show();
            });

        }
    });

    $wsb.extend({
        defaults: function(d) {
            return $.extend(defaults, d || {});
        }
    });

})(jQuery);