/* Javascript solution by MoroSystems.cz */

function toggleClass(dropdown) {
  if (Element.hasClassName(dropdown, 'hide-dropdown')) {
    Element.removeClassName(dropdown, 'hide-dropdown');
    Element.addClassName(dropdown, 'open-dropdown');
  } else {
    Element.removeClassName(dropdown, 'open-dropdown');
    Element.addClassName(dropdown, 'hide-dropdown');
  }
}


//initialize dropdowns
var hideDropDowns = function() {
  var dropdowns = document.getElementsByClassName('select');
  
  for (var i = 0; i < dropdowns.length; i++) {
    dropdown = dropdowns[i];
    Element.removeClassName(dropdown, 'open-dropdown');
    Element.addClassName(dropdown, 'hide-dropdown');
  }
};
Event.observe(window, 'load', hideDropDowns, false);


//observe dropdown opener
var observeOpener = function(opener) {
  var dropdown = opener;
  toggleClass(opener);
  return false;
};


//observing dropdown option
var observeOption = function(event) {
  var option = Event.element(event);
  if (option.tagName == 'LI') 
    option = option.firstChild;
  
  var value = option.childNodes[0].nodeValue;
  var itemid = option.getAttribute('value');
  var selectbox = Event.findElement(event, 'ul');
  
  setDDValue(selectbox.parentNode, itemid, value);
  Element.removeClassName(selectbox.parentNode, 'open-dropdown');
  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('LI');
    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('SPAN')[0];
  var input = dropdown.getElementsByTagName('INPUT')[0];
  Element.update(a, value);
  
  if (input) {
    input.value = itemid;
  }
}


//setting dropdown value from hidden field
function initDDValue(dropdown) {
  //alert (dropdown);
  observeDropDownOptions(true);
  hideDropDowns(false);
  
  //alert (dropdown.getElementsByTagName('input').length);
  var input = dropdown.getElementsByTagName('INPUT')[0];
  
  // alert(dropdown.id+"_"+input.value);
  if (input) {
    dropdown.getElementsByTagName('SPAN')[0].firstChild.nodeValue = document.getElementById(dropdown.id+"_"+input.value).firstChild.nodeValue;
  }
  return;
}


//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 == 'SPAN')
    a = a.parentNode;
  
  if (a.tagName == 'LI')
    return false;
  
  var dropdowns = document.getElementsByClassName('select');
  for (var i = 0; i < dropdowns.length; i++) {
    dropdown = dropdowns[i];
  
    if (a != dropdown) {        //Nur wenn das Event nicht durch das aktuelle Select ausgeführt wurde
      Element.removeClassName(dropdown, 'open-dropdown');
      Element.addClassName(dropdown, 'hide-dropdown');
    }
  }   
};
Event.observe(document, "click", (hideDropDownsOnClick), true);