Dropdown = function(elt) {
    if (typeof elt == 'string') {
        this.elt = document.getElementById(elt);
    } else {
        this.elt = elt;
    }

    var obj = this;

    this.slt  = document.createElement('DIV');
    this.slt.id = '__dropdown_'+this.elt.id;
    this.slt.className = 'dropdownSelect';
    this.slt.innerHTML = this.elt.options[this.elt.selectedIndex].innerHTML;
    this.slt.onclick = function() { obj.toggle(); };
    this.elt.style.display = 'none';
    this.elt.parentNode.appendChild(this.slt);
    this.lst = document.createElement('DIV');
    this.lst.id = '__dropdown_container_'+this.elt.id;
    this.lst.className = 'dropdownOptionContainer';
    this.lst.style.position = 'absolute';
    this.lst.style.display = 'none';
    document.body.appendChild(this.lst);

    for (var i = 0; i < this.elt.options.length; i++) {
        var opt = document.createElement('DIV');
        opt.className = 'dropdownOption';
        opt.innerHTML = this.elt.options[i].innerHTML;
        opt.setAttribute('value', this.elt.options[i].value);
        opt.setAttribute('index', i);
        opt.onclick = function() { obj.select(this); };
        this.lst.appendChild(opt);
    }

    __dropdown_addListener(obj);

    this.showing = false;
    this.toggle = function() {
        if (!this.showing) {
    this.pos = this.getPosition(this.slt);
            this.slt.className = 'dropdownSelectActive';
            this.lst.style.display = 'block';
            //this.lst.style.top  = (this.slt.offsetTop + this.slt.offsetHeight)+'px';
            //this.lst.style.left = this.slt.offsetLeft+'px';
            this.lst.style.top  = (this.pos.top + this.slt.offsetHeight)+'px';
            this.lst.style.left = this.pos.left+'px';
            this.showing = true;
        } else {
            this.slt.className = 'dropdownSelect';
            this.lst.style.display = 'none';
            this.showing = false;
        }
    }

    this.select = function(elt) {
        if (this.showing) {
            this.toggle();
        }
        this.elt.selectedIndex = elt.getAttribute('index');
        this.slt.innerHTML = this.elt.options[this.elt.selectedIndex].innerHTML;
        if (this.elt.onchange) {
            this.elt.onchange.call(this.elt);
        }
    }

    this.getPosition = function(elt)
    {
        return $(elt).offset();
    }

}

var __dropdown_watched = [];
function __dropdown_watcher(e) {
    var target;
    if (!e) {
        e = window.event;
    }

    if (e.target) {
        target = e.target;
    } else if (e.srcElement) {
        target = e.srcElement;
    } 

    if (target.nodeType == 3) 
    {
        // defeat Safari bug
        target = target.parentNode;
    }

    for(var i = 0; i < __dropdown_watched.length; i++) {
        if (__dropdown_watched[i].showing) {
            if (target != __dropdown_watched[i].slt) {
                __dropdown_watched[i].toggle();
            }
        }
    }
}

function __dropdown_addListener(obj) {
    $(document).click(function(e) { __dropdown_watcher(e); });
    $(window).resize(function(e) { __dropdown_watcher(e); });
    __dropdown_watched.push(obj);
}