var hideDropDowns = function() {

  var dropdowns = document.getElementsByClassName("select");
  for (var i = 0; i < dropdowns.length; i++) {
      dropdown = dropdowns[i];
      Element.addClassName(dropdown, "hide-dropdown");
  }

}

Event.observe(window, 'load', function(){
	$$('select.skin').each(function(el){
		var opener = new Element('a', { 'class' : 'dd-opener' }).update('select');
		opener.observe('click', function(op){
			return observeOpener(this);
		});

		var ul = new Element('ul', { 'class' : 'selectbox' });
		for(var i = 0; i < el.options.length; i++)
		{
			var item = new Element('a', { 'href' : 'javascript:;', 'value' : el.options[i].value }).update(el.options[i].innerHTML);
			item.observe('click', function(ev){
				observeOption(ev);
			});
			var li = new Element('li').update(item);
			ul.insert({ 'bottom' : li });
		}

		var hidden = new Element('input', { 'type' : 'hidden', 'name' : el.name, 'id' : el.id });

		var container = new Element('div', { 'class' : 'select' }).update(opener).insert({ 'bottom' : ul }).insert({ 'bottom' : hidden });
		el.insert({ 'after' : container });

		//remove the select
		hideDropDowns();
		el.parentNode.removeChild(el);
	});
});

/* Javascript solution by MoroSystems.cz */

//initialize dropdowns

Event.observe(window, "load", hideDropDowns, false);


//observe dropdown opener
var observeOpener = function(opener) {

   var dropdown = opener.parentNode;

   if (Element.hasClassName(dropdown, "hide-dropdown")) {
     Element.removeClassName(dropdown, "hide-dropdown");
   } else {
       Element.addClassName(dropdown, "hide-dropdown");
   }
   return false;


}

//observing dropdown option
var observeOption = function(event) {

  var option = Event.element(event);
  var value = option.childNodes[0].nodeValue;
  var itemid = option.getAttribute("value");

  var selectbox = Event.findElement(event, "ul");

  setDDValue(selectbox.parentNode, itemid, value);

  Element.addClassName(selectbox.parentNode, "hide-dropdown");

  Event.stop(event);

}

//observing dropdown options
var observeDropDownOptions = function(event) {

  var selects = document.getElementsByClassName("selectbox");
  for (var i = 0; i < selects.length; i++) {
      select = selects[i];
      var options = select.getElementsByTagName("A");
      for (var j = 0; j < options.length; j++) {
           option = options[j];
          Event.observe(option, "click", (observeOption), false);
      }
  }

  Event.stop(event);

}

Event.observe(window, "load", (observeDropDownOptions), true);



//setting dropdown value into hiddne field
function setDDValue(dropdown, itemid, value) {

  var a = dropdown.getElementsByTagName("A")[0];
  var input = dropdown.getElementsByTagName("INPUT")[0];

  Element.update(a, value);

  if (input) {
    input.value = itemid;
  }

}

//closing dropdown by ESC
var onKeyPress = function(event) {

   switch(event.keyCode) {
    case Event.KEY_ESC:
      hideDropDowns(event);
      Event.stop(event);
      return;
    }

}

Event.observe(document, "keypress", (onKeyPress), true);

//closing dropdown by click out of it
var hideDropDownsOnClick = function(event) {

  var a = Event.element(event);
  if (a.tagName == "A") { return false; }

  var dropdowns = document.getElementsByClassName("select");
  for (var i = 0; i < dropdowns.length; i++) {
      dropdown = dropdowns[i];
      Element.addClassName(dropdown, "hide-dropdown");
  }

}

Event.observe(document, "click", (hideDropDownsOnClick), true);