function Custom_Select(parent_div)
{
    this.list_of_options_names = new Array();
    this.list_of_options_values = new Array();
    this.parent_div = parent_div;

}

Custom_Select.prototype.draw = function()
{
    for (var i = 0; i<this.list_of_options_names.length; i++)
    {
        var option = document.createElement("div");

        var name = document.createTextNode("("+this.list_of_options_values[i] + ") " +this.list_of_options_names[i]);
        option.id = this.list_of_options_values[i];
       
        option.onclick= function(event){
            var list_of_options = document.getElementById("result").childNodes;
            for (var i = 0; i < list_of_options.length; i++)
            {
                var option = list_of_options[i];
                if (option.tagName == 'DIV')
                {
                    option.className = '';
                }
            }
            this.className = 'selected';
            evt_select_route_segments(this.id);
        }
        if (option.addEventListener){

            option.addEventListener("mouseover", function(event){ 
                show_details(event,this);
            }, false);
        } else{
            option.onmouseover= function(){
                show_details(event,this);
            }
        }
        
        option.appendChild(name);
        this.parent_div.appendChild(option);
    }
};

Custom_Select.prototype.add_option = function (name, value)
{
    this.list_of_options_names.push(name);
    this.list_of_options_values.push(value);
};

function show_details (event,node) {
    var details = document.getElementById("details");
    details.style.visibility = 'visible';
    details.innerHTML = node.firstChild.nodeValue;
    details.style.top = event.clientY+"px";
    details.style.left = 20+event.clientX+"px";
} 
function hide_details () {
    var details = document.getElementById("details");
    details.style.visibility = 'hidden';
    details.innerHTML = '';
}