/**
 * CustomSelect 0.1 - transform an html select into something pretty.
 * Mandatory params are:
 * elementId: id of the element to be transformed.
 * TODO: selected value. Pass back choice to element, eventhandling functions.
 */
var CustomSelect = function (elementId) {
    var element = $(elementId);
    var select_start_template = '<div id="custom_#{id}" class="custom-select"><span>#{title}</span><div id="dd_#{id}" class="dropdown" style="display:none">';
    var custom_html = new Template(select_start_template).evaluate({id: elementId, title: element.options[0].text});
    for (var ii = 1; ii < element.options.length; ii++) {
      if (element.options[ii].selected) {/*Handle the selected option*/}
      custom_html += '<a href="'+element.options[ii].value+'">'+element.options[ii].text+'</a>'; // Event handler would be better.
    }
    custom_html += '</div></div>';
    element.insert({after:custom_html});
    element.setStyle({"display":"none"});
    Event.observe($('custom_'+elementId),'click',function(){new Effect.toggle($('dd_'+elementId),'appear',{duration:0.4});});
    Event.observe(document,'click',function(){if($('dd_'+elementId).style.display!="none")new Effect.toggle($('dd_'+elementId),'appear',{duration:0.4});});
    // IE6 doesn't like this Event.observe($('dd_'+elementId),'click',function(){$(elementId).options.each(function(opt,i){/*Set the option value here.*/});});
}