var Selectbox = {
    prepare: function() {     // make the custom html snippet into a selectbox
        $(this).append('<ul class="selection"></ul>');
    
        // Expand and fold on click
        $(this).mouseup( function(){Selectbox.toggle(this);});

        var o = this;

        // Append 'option' classname to all option items, and make them clickable
        $('.options li', this).each(function() {
                if (!$(this).hasClass('group')) {
                    $(this).addClass('option');
                    $(this).mousedown( function(){Selectbox.select(o,this);});
                }
            });

        // Add 'hover' on mouse over (and remove on mouse out) to all <li> items
        $('ul li.option', this).each(function() {
                $(this).mouseover( function(){$(this).addClass('hover')});
                $(this).mouseout( function(){$(this).removeClass('hover')});
            });  

        // Keep the selection current
        Selectbox.updateSelection(this);
    },

    toggle:function(o) {     // Toggle selectbox expansion by adding or removing the 'expanded' class name     
      if($(o).hasClass('expanded')) {
         $(o).removeClass('expanded');           
      } else {
         $('.selectbox').each(this.closeOpened);
         // show options
         $(o).addClass('expanded');
      }    
    },
    
    closeOpened:function() {
       if ($(this).hasClass('expanded')) {
          $(this).removeClass('expanded');
       }
    },
        
    updateSelection: function(o) {    // Update the 'selection' list according to selected item on the options list
        var selectionElement = $('ul.selection', o)[0];
        
        // Remove all current children on the selection element
        $('>li', selectionElement).remove();
        // Look for a selected item
        var sel = $('.options li.selected', o);
        if (sel.length) {
            // There is at least one selected item
            var clone = $(sel[0].cloneNode(true));
            var classes = clone.attr('class').split(' '); 
            $(classes).each(function(i){clone.addClass(this);});
            $(selectionElement).append(clone);
        } else {
            // No selection
            var selectboxRel = $(o).attr('rel');
            $(selectionElement).append('<li>' + (selectboxRel && selectboxRel.length ? selectboxRel : '&nbsp;') + '</li>');
        }
    },
        
    select: function(o,i) {    //select a given item...
        // Deselect other items
        $('li.option', o).each(function(i){$(this).removeClass('selected');});
        $(i).addClass('selected');
        var input = $('input', i)[0];
        var result = $(o).closest('form').children('input')[0]; //o.up('form').select('input')[0];
        $(result).attr('value', $(input).attr('value'));           
        Selectbox.updateSelection(o);
    },   
    
    init : function() {
      $(".selectbox").each(Selectbox.prepare);
    }
};

$(Selectbox.init);