TGSelect = Class.create();

TGSelect.prototype = 
{
    initialize : function(parentElement,options)   
    {
        this.width = 200;
        this.height = 300;
        
        this.parentElement = parentElement;
        this.content = document.createElement("div");
        this.list = document.createElement("ul");
        this.list.className = "selectbox";
        
        this.content.appendChild(this.list);
        this.content.style.overflow = "auto";
        this.selectedIndex = -1;
        this.onClickHandle = null;
        this.onDblClickHandle = null;
        
        this.size = 0;
        this.itemList = new Array();
        
        if(options)
        {
            if(options.width)
            {
                this.width = options.width;
            }
            if(options.height)
            {
                this.height = options.height;
            }
            if(options.tooltipObject)
            {
                this.tooltipObject = options.tooltipObject;
            }
        }
        
        this.content.style.height = this.height + "px";
        this.content.style.width = this.width + "px";
        this.content.style.border = "1px solid #000000";
        this.content.style.backgroundColor = "#FFFFFF";
        this.parentElement.appendChild(this.content);
    },
    
    addElement : function(element)
    {   
        var item;
        if(typeof(element) == "string")
        {
             item = new TGItem(element,element,element);
        }
        else
        {
             item = element;     
        }
        
        this.itemList[this.itemList.length] = item;
        
        var liElement = document.createElement("li");
        liElement.className = "selectboxitem";
        
        var tmpHtml = "<table cellspacing='0' cellpadding='0' border='0'><tr>";
        if(item.icon != null)
        {
           tmpHtml += "<td><img src='" + item.icon + "' align='middle' hspace='3'></td>";
        }
        
        tmpHtml += "<td><span style='font-size:10pt'>"+ item.title + "</span><br><span style='font-size:8pt'>" + item.subtitle + "</span></td></tr>";    
        liElement.innerHTML = tmpHtml;
        liElement.onselectstart = function(){return false};
        this.list.appendChild(liElement);
        item.htmlElement = liElement;
    
        Event.observe(liElement,"click",this.onListClicked.bindAsEventListener(this,liElement));
        //Event.observe(liElement,"dblclick",this.onListDblClicked.bindAsEventListener(this,liElement));
        
        if(this.tooltipObject)
        {
            this.tooltipObject.addElement(liElement,item.tooltip);
        }
        
        this.size++;
    },
    
    removeElement : function(index)
    {
        Element.remove(this.itemList[index].htmlElement)   
        
        var item = this.itemList[index];
        this.itemList[index] = null;
        this.itemList = itemList.compact();
        this.size--;
        return item;
    },
    
    getSize : function()
    {
       return this.size;   
    },
    
    getItem : function(index)
    {
        return this.itemList[index];
    },
    
    getSelectedItem : function()
    {
        return this.itemList[this.selectedIndex];
    },
    
    setSelectedIndex : function(index)
    {
        this.selectNone();
        this.selectedIndex = index;
        this.itemList[index].htmlElement.className = "selectboxitem selected";
    },
    
    getSelectedIndex : function()
    {
        return this.selectedIndex;
    },
    
    selectNone : function()
    {
        if(this.selectedIndex != -1)
        {
            this.itemList[this.selectedIndex].htmlElement.className = "selectboxitem";
            this.selectedIndex = -1;
        }
    },
    
    onListClicked : function(event,element)
    {   
        Event.stop(event);
        
        for(var i = 0;i < this.itemList.length;i++)
        {
            if(this.itemList[i].htmlElement == element)
            {
                this.setSelectedIndex(i);
                
                if(this.onClickHandle)
                {
                    this.onClickHandle(i,this.itemList[i]);
                }
                
               break;
            }
        }
    },
    
    onListDblClicked : function(event,element)
    {
        Event.stop(event);
        
        for(var i = 0;i < this.itemList.length;i++)
        {
            if(this.itemList[i].htmlElement == element)
            {
                if(this.onDblClickHandle)
                {
                    this.onDblClickHandle(i,this.itemList[i]);
                }
                break;
            }
        }
    },
    
    clearList : function()
    {
        this.list.innerHTML = "";
        this.itemList = new Array();
        this.selectedIndex = -1;
    },
 
    registerOnClick : function(func)
    {
        this.onClickHandle = func;
    },
    
    unregisterOnClick : function()
    {
        this.onClickHandle = null;
    },
    
    registerOnDblClick : function(func)
    {
        this.onDblClickHandle = func;
    },
    
    unregisterOnDblClick : function()
    {
        this.onDblClickHandle = null;
    }
}

TGItem = Class.create();

TGItem.prototype =
{
    initialize : function(title,subtitle,value,tooltip)
    {
        this.title = title;
        this.subtitle = subtitle;
        this.value = value;
        this.tooltip = tooltip;
        this.icon = null;
        this.htmlElement = null;
    }
}