//initialize dropdowns
  
  var hideDropDowns = function() {
//     var dropdowns = document.getElementsByClassName('select');
     var dropdowns = $$('.select');

     for (var i = 0; i < dropdowns.length; i++) {
         dropdown = dropdowns[i];
         Element.addClassName(dropdown, 'hide-dropdown');
     }
  
  }
  
  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('name');
     var itemrel = option.getAttribute('rel');
     
     var selectbox = Event.findElement(event, 'ul');
     
     setDDValue(selectbox.parentNode, itemid, value,itemrel);
     
     Element.addClassName(selectbox.parentNode, 'hide-dropdown');    
     
     Event.stop(event);
            
  }
  
  //observing dropdown options
  var observeDropDownOptions = function(event) {
    
//     var selects = document.getElementsByClassName('selectbox');
     var selects = $$('.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, itemrel) {
     var a = dropdown.getElementsByTagName('A')[0];
     //alert(itemid);
     dropdown.getElementsByTagName('A')[0].style.backgroundImage ='url(images/tapes/'+itemid+')';
     var input = dropdown.getElementsByTagName('INPUT')[0];
     //alert(value);
     Element.update(a, value);
     if (input) {
       input.value = itemrel;
     }
     GetCustomPrice();
  }
  
  //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')&&(typeof(event.srcElement) == 'undefined')) { return false; }
     if ((a.tagName == 'A')&&((event.srcElement.id=='a1')||(event.srcElement.id=='a2'))) { return false; }
     if ((a.tagName == 'A')&&((event.srcElement.id=='b1')||(event.srcElement.id=='b2'))) { return false; }
//     var dropdowns = document.getElementsByClassName('select');
     var dropdowns = $$('.select');
     for (var i = 0; i < dropdowns.length; i++) {
         dropdown = dropdowns[i];
         Element.addClassName(dropdown, 'hide-dropdown');
     }
     return true;
  }
  
  Event.observe(document, "click", (hideDropDownsOnClick), true);