﻿function Dropdown(id, textbox)
{
    this.selected = false;
    this.area = document.getElementById(id);
    if(this.area != null)
    {
    this.textbox = document.getElementById(textbox);
    
    var divs = this.area.getElementsByTagName("div");
    this.display = divs[0];
    this.arrow = divs[1];
    this.dropdown = divs[2];
    this.dropdown.style.display = "none";
    
    this.items = this.dropdown.getElementsByTagName('tr');
    for (var i=0;i<this.items.length;i++) 
    {
        var item = this.items[i];
        var textbox = this.textbox;
        var display = this.display;
        
        item.onclick = function(e)
        {
            var selColumns = this.getElementsByTagName("td");
            var valColumns = display.getElementsByTagName("td");
            
            textbox.value = this.id;
            for (var i=0;i<valColumns.length;i++) 
            {
                valColumns[i].innerHTML = selColumns[i].innerHTML;
            }
        }
        item.onmouseover = function(e)
        {
            var cols = this.getElementsByTagName("td");
            for (var i=0;i<cols.length;i++) 
            {
                this.style.background = "#2A7FFF";
                cols[i].style.color = "#ffffff";
            }
        }
        item.onmouseout = function(e)
        {
            var cols = this.getElementsByTagName("td");
            for (var i=0;i<cols.length;i++) 
            {
                this.style.background = "#ffffff";
                cols[i].style.color = "#000000";
            }
        }
    }
    
    var thisDropdown = this;
    this.area.onmouseover = function(e)
    {
        if (!thisDropdown.selected)
        {
            thisDropdown.selected = true;
        }   
    }
    this.area.onmouseout = function(e)
    {
        if (thisDropdown.selected)
        {
            thisDropdown.selected = false;
        }  
    }
    }
}

Dropdown.prototype.toggle = function()
{
    if(this.dropdown)
    {
        if (this.selected)
        {
            if (this.dropdown.style.display == 'none')
            {
                this.dropdown.style.display = 'block';
            }
            else
            {
                this.dropdown.style.display = 'none';
            }
        }
        else
        {
            this.dropdown.style.display = 'none';
        }
    }
    else if (this.dropdown)
    {
        this.dropdown.style.display = 'none';
    }
}

