var CustomDropDown = Class.create({
    initialize: function (dd) {
        if (dd.hasClassName('processed')) return;
        dd.addClassName('processed');
        var temp = new Template(this.div);
        var title = dd.options[dd.selectedIndex].text;
        this.imposter = dd.insert({ before: temp.evaluate({ title: title }) }).previous();
        this.icontent = this.imposter.down('div.cdd_content');
        this.imposter.setStyle({ width: this.icontent.getWidth() + 'px' });

        //if (Prototype.Browser.IE)
        //    this.icontent.setStyle({ top: this.imposter.cumulativeOffset()[1] + 'px' });

        this.header = this.imposter.select('table.cdd tr')[0];
        this.content = $(this.imposter.down('table').rows[1].cells[0]);
        this.source = dd.hide();
        this.header.observe('click', this.toggle.bindAsEventListener(this));
        $(document).observe('click', this.clicker.bindAsEventListener(this));
    },
    toggle: function () {
        if (this.active)
            this.deactivate()
        else
            this.activate();
    },
    activate: function () {
        this.active = true;

        this.header.addClassName('over');
        this.populate(this.content);
        this.icontent.setStyle({ zIndex: 1 });
        var com = this.icontent.cumulativeOffset();

        this.X = com[0];
        this.Y = com[1];
        this.W = this.icontent.getWidth();
        this.H = this.icontent.getHeight();
    },
    deactivate: function () {
        if (!(this.active)) return;
        this.header.removeClassName('over');
        this.content.update("");
        this.icontent.setStyle({ zIndex: 0 });
        this.active = false;
    },
    clicker: function (e) {
        if (!(this.active)) return;
        var x = e.pointerX();
        var y = e.pointerY();
        //alert(x + ':' + y + ':' + this.X + ':' + this.Y + ':' + this.W + ':' + this.H);
        if (x >= this.X && x <= this.X + this.W && y >= this.Y && y <= this.Y + this.H) return;
        this.deactivate();
    },
    select: function (i) {
        this.header.down('th.hmid').update(this.source.options[i].text);
        this.source.selectedIndex = i;
        this.deactivate();

        var att = this.source.readAttribute('onchange');
        eval(att.replace('this', 'this.source'));
    },
    populate: function (obj) {
        var h = '';
        var skipfirst = false;
        for (var i = 0; i < this.source.options.length; i++)
            if (i == 0 && this.source.options[i].text.startsWith('- Select')) skipfirst = true;
            else
                h += '<tr>' +
                '<td class="iteml">' + this.source.options[i].text + '</td>' +
                '<td class="itemr"> </td>' +
                '</tr>';
        var temp = new Template(this.ditems);
        obj.update(temp.evaluate({ items: h }));

        temp = this;
        obj.select('table.cdd tr').each(
            function (tr, i) {
                if (skipfirst) i++;
                tr.observe('click', function () { temp.select(i) });
                tr.observe('mouseover', function () { tr.addClassName("hover"); });
                tr.observe('mouseout', function () { tr.removeClassName("hover"); });
            });
    },
    div: '<div class="cdd_wrapper">' +
            '<div class="cdd_content">' +
            '<table cellpadding="0" cellspacing="0">' +
            '<tr valign=top><td>' +
            '<div class="cdd_header">' +
            '<table class="cdd" cellpadding="0" cellspacing="0" width="100%">' +
            '<tr>' +
            '<th class="hleft"> </th>' +
            '<th class="hmid">#{title}</th>' +
            '<th class="hright"> </th>' +
            '</tr>' +
            '</table>' +
            '</div>' +
            '</td></tr>' +
            '<tr><td></td></tr>' +
            '</table>' +
            '</div>' +
            '</div>',
    ditems: '<table cellspacing="0" cellpadding="0" width="100%">' +
            '<tr><td>' +
            '<table class="cdd" cellspacing="0" cellpadding="0" width="100%">#{items}</table>' +
            '</td></tr>' +
            '<tr><td>' +
            '<table class="cdd" cellspacing="0" cellpadding="0" width="100%" >' +
            '<tr>' +
            '<td class="bleft"></td>' +
            '<td class="bbottom">&nbsp;</td>' +
            '<td class="bright"></td>' +
            '</tr>' +
            '</table>' +
            '</td></tr>' +
            '</table>'
});

function CustomDropDown_Initiate() {
    $$('select').each(function (s) { new CustomDropDown(s); });
}
document.observe("dom:loaded", function () {
    CustomDropDown_Initiate();
})