/* client-side functionality of StyledDropDown control */
function DropDownItem(text, value, domElem)
{
    this.Text = text;
    this.Value = value;
    this.DOMElem = domElem;
}

Type.registerNamespace('Takeout.UI');

Takeout.UI.DropDown = function(element) {
    Takeout.UI.DropDown.initializeBase(this, [element]);

    this._imgTrigger = null; 
    this._itemsBlock = null;
    this._valueContainer = null;// hidden field that contains selected value
    this._defaultText = null;
    this._disabled = null;
    this._maxItemsToDisplay = 13;
    this._items = new Array(); // array of DropDownItem objects
    this._lastAutoSearchText = new String("");
    this._lastAutoSearchTimer = null;
    
}

Takeout.UI.DropDown.prototype = {

    initialize : function() {
        Takeout.UI.DropDown.callBaseMethod(this, 'initialize');
        $addHandlers(this.get_element(),
            {
                blur : this._onBlur,
                click : this._onClick,
                keydown : this._onKeyDown
            },
            this);
            
        $addHandlers(this._imgTrigger,
            {click : this._onClick},
            this);
    }, 
    
    dispose : function() {
        $clearHandlers(this.get_element());
        Takeout.UI.DropDown.callBaseMethod(this, 'dispose');
    }, 
    
    registerItem : function(item) {
        Array.add(this._items, item);
        item.DOMElem.dropDownItem = item;
    },
    
    initializeItems : function() {
        for (var i=0 ; i<this._items.length ; i++)
        {
            $create(Takeout.UI.HoverBehavior, 
                {
                    "hoverCssClass" : "styled-item-hover",
                    "normalCssClass" : "styled-item"
                },
                {}, {}, this._items[i].DOMElem);
            
            $addHandlers(this._items[i].DOMElem,
                {
                    mousedown : this._onItemClick
                },
                this);
        }
        
        if (this._maxItemsToDisplay < this._items.length)
        {
            this._itemsBlock.style["height"] = "200px";
            this._itemsBlock.style["overflow"] = "auto";
            this._itemsBlock.style["overflowX"] = "hidden";
            this._itemsBlock.className = "styled-items-container scroll";
        }
    },
    
    selectValue : function(newText, newValue) {
        this._selectValueInternal(newText, newValue);
        this.collapse();
    },
    
    collapse : function() {
        this.get_element().parentNode.parentNode.style.zIndex = 99;
        this.get_itemsBlock().style.display = "none";
        for (var j=0 ; j<this._items.length ; j++)
        {
            this._items[j].DOMElem.className = "styled-item";
        }
    },
    
    clearAutocomplete : function ()
    {
        this._lastAutoSearchText = new String("");
    },
    
    _selectValueInternal : function(newText, newValue) {
        oldValue = this._valueContainer.value;
        this.get_element().value = newText;
        this._valueContainer.value = newValue;
        ShowInputForOtherValue(newValue);
        if ((oldValue != newValue) && (this.get_element()._events["change"]))
        {
            for (var i = 0; i < this.get_element()._events["change"].length; i++)
            {
                this.get_element()._events["change"][i].handler(newValue);
            }
        }
    },
    
    resetValue : function() {
        this.get_element().value = this._defaultText;
        this._valueContainer.value = "";
    },

    _onItemClick : function(e) {
        this.selectValue(e.target.dropDownItem.Text, e.target.dropDownItem.Value);
    },

    // here I'm trying to handle situation when user is typing letters inside dropdown in order to ease finding the item he is looking for
    _onKeyDown : function(e) {
        var charCode = (e.charCode) ? e.charCode : e.keyCode;
        
        if (charCode == 13)
        {
            if (this.get_itemsBlock().style.display != "none")
            {
                this.collapse();
                e.preventDefault();
            }
            
            return;
        }
        
        var charDecoded = String.fromCharCode(charCode).toLowerCase();
        this._lastAutoSearchText += charDecoded;
        
        for (var i=0 ; i<this._items.length ; i++)
        {
            if (this._items[i].Text.toLowerCase().startsWith(this._lastAutoSearchText))
            {
                this._selectValueInternal(this._items[i].Text, this._items[i].Value);
                
                for (var j=0 ; j<this._items.length ; j++)
                {
                    this._items[j].DOMElem.className = "styled-item";
                }
                
                this._items[i].DOMElem.className = "styled-item-hover";
                
                break;
            }
        }
        if (this._lastAutoSearchTimer)
        {
            clearTimeout(this._lastAutoSearchTimer);
        }
        this._lastAutoSearchTimer = setTimeout("$get('" + this.get_element().id + "').control.clearAutocomplete();", 300);
    },

    _onBlur : function(e) {
        if (e.rawEvent.x <= this.get_itemsBlock().offsetLeft + this.get_itemsBlock().offsetWidth &&
            e.rawEvent.x >= this.get_itemsBlock().offsetLeft &&
            e.rawEvent.y <= this.get_itemsBlock().offsetTop + this.get_itemsBlock().offsetHeight &&
            e.rawEvent.y >= this.get_itemsBlock().offsetTop) 
        {
            this.get_element().focus();
            return;
        }
        
        this.get_element().parentNode.parentNode.style.zIndex = 99;
        this.get_itemsBlock().style.display = "none";
    },
    
    _onClick : function() {
        if (this._disabled)
        {
        return;
        }
        if (this.get_itemsBlock().style.display == "none")
        {
            //When on page there are two StyleDropDowns they block each other
            this.get_element().parentNode.parentNode.style.zIndex = 106;
            this.get_itemsBlock().style.display = "";
            var inputBounds = Sys.UI.DomElement.getBounds(this.get_element());
            var inputLocation = Sys.UI.DomElement.getLocation(this.get_element());
            this._itemsBlock.style["width"] = (inputBounds.width+14) + "px";
//            if(document.documentElement.scrollTop + document.documentElement.clientHeight - this.get_element().parentNode.parentNode.offsetTop < 250)
//            {
//              this._itemsBlock.style["top"] = "-200px";
//            }
//            else
            {
              this._itemsBlock.style["top"] = inputBounds.height + "px";
            }            
            if ((Sys.Browser.agent == Sys.Browser.InternetExplorer) && 
                (Sys.Browser.version == 6)) // workarounâ for bug in IE6 with incorrect mouseover event handling
            {
                for (var i=0; i<this._items.length ; i++)
                {
                    this._items[i].DOMElem.style["width"] = (inputBounds.width) + "px";
                }
            }
            this.get_element().focus();
        }
        else
        {
            this.get_itemsBlock().style.display = "none";
        }
    },
    
    get_itemsBlock : function() { return this._itemsBlock; },

    set_itemsBlock : function(value) { this._itemsBlock = value; },
    
    get_disabled : function() { return this._disabled; },

    set_disabled : function(value) { this._disabled = value; }, 
    
    get_defaultText : function() { return this._defaultText; },
    
    set_defaultText : function(value) { this._defaultText = value; },
    
    get_valueContainer : function() { return this._valueContainer; },

    set_valueContainer : function(value) { this._valueContainer = value; },

    get_imgTrigger : function() { return this._imgTrigger; },

    set_imgTrigger : function(value) { this._imgTrigger = value; }
}

Takeout.UI.DropDown.registerClass('Takeout.UI.DropDown', Sys.UI.Control);

function ShowInputForOtherValue(value)
{
 
        OTHERVALURFIELDVIEW = document.getElementById("divOtherValueFieldView");
        OTHERDIV=document.getElementById("divOtherValue");
        
    if (!OTHERDIV) return;
    if (OTHERVALUE == value) 
    {
        OTHERDIV.style.display = '';
        if (OTHERVALURFIELDVIEW)
            OTHERVALURFIELDVIEW.style.display = '';
    }
    else
    {
        OTHERDIV.style.display = 'none';
        OTHERINPUT.value = '';
        if (OTHERVALURFIELDVIEW)
            OTHERVALURFIELDVIEW.style.display = 'none';
    }
}