TagsDropDownList = function(id , dropdownid) 
{
    this.ClientID = id;
    this.DropDownID = dropdownid;
}

TagsDropDownList.prototype = 
{
    GetElementPosition : function (element) {
        var result = new Object();
        result.x = 0;
        result.y = 0;
        result.width = 0;
        result.height = 0;
        if (element.offsetParent) {
        
            result.x = element.offsetLeft;
            result.y = element.offsetTop;
            var parent = element.offsetParent;
            while (parent) {
                result.x += parent.offsetLeft;
                result.y += parent.offsetTop;
                var parentTagName = parent.tagName.toLowerCase();
                if (parentTagName != "table" &&
                    parentTagName != "body" && 
                    parentTagName != "html" && 
                    //parentTagName != "div" && 
                    parent.clientTop && 
                    parent.clientLeft) {
                    result.x += parent.clientLeft;
                    result.y += parent.clientTop;
                }
                parent = parent.offsetParent;
            }
        }
        else if (element.left && element.top) {
            result.x = element.left;
            result.y = element.top;
        }
        else {
            if (element.x) {
                result.x = element.x;
            }
            if (element.y) {
                result.y = element.y;
            }
        }
        if (element.offsetWidth && element.offsetHeight) {
            result.width = element.offsetWidth;
            result.height = element.offsetHeight;
        }
        else if (element.style && element.style.pixelWidth && element.style.pixelHeight) {
            result.width = element.style.pixelWidth;
            result.height = element.style.pixelHeight;
        }
        return result;
    } ,
    
    ClearTextValue : function() 
    {
        var txt = document.getElementById(this.ClientID);
        txt.value = '';
    } ,
    
    GetTextValue : function() 
    {
        var txt = document.getElementById(this.ClientID);
        return txt.value;
    } ,
    
    SetTextValue : function(val) 
    {
        var txt = document.getElementById(this.ClientID);
        txt.value = val;
    } ,
    
    ShowDropDownPanel : function () {
        var txt = document.getElementById(this.ClientID);
    
        var pos = this.GetElementPosition(txt);
        
        var panel = document.getElementById(this.DropDownID);
        
        panel.TagsDropDown = this;
        
        panel.style.display = 'block';
        panel.style.top = (pos.y + pos.height + 1) + "px";
        panel.style.left = pos.x + "px";
    } ,
    
    HideDropDownPanel : function() {
        var panel = document.getElementById(this.DropDownID);
        panel.style.display = 'none';
    } ,
    
    OnMouseClick : function(e) {
        if(!e) e = window.event;
    
        var panel = document.getElementById(this.DropDownID);
        var pos = this.GetElementPosition(panel);
        
        if((e.clientX > pos.x && e.clientX < pos.x + pos.width)
            && (e.clientY > pos.y && e.clientY < pos.y + pos.height))
        {
            return;
        }
        
        panel.style.display = 'none';
    }
}