(function ($) {
  var dropdown = "<div class=\"drop_down_menu\"> <input type=\"hidden\" name=\"name\" value=\"\"/> <div class=\"label\"> <h3>Select your procedure.</h3><button>&#x25BC;</button> <img src=\"/images/layout/bg-drop_down.png\" /></div><ul> <li><a href=\"#\">Lorem ipsum dolor sit</a></li> </ul> </div>";
  
  function getDefaultValue($elem) {
    return $elem.children('option.default_value').first().text();
  }
  
  function getOptions($elem) {
    var $opts = $elem.children('option:not(.default_value)'),
        out  = [];
    
    $opts.each(function () {
      var $e = $(this),
          data = [$e.attr('value'), $e.text()],
          classAttr = $(this).attr('class'),
          dataMatureContent = $(this).attr('data-mature-content');
          
      if (classAttr !== "") {
        data.push(classAttr);
      }
      
      if (dataMatureContent !== "") {
        data.push(dataMatureContent);
      }
      
      out.push(data);
    });
    return out;
  }
  
  function populateOptions(options) {
    var out  = [];
    $.each(options, function (i, e) {
      var classAttr = e[2] === undefined ? '' : 'class="'+e[2]+'"',
          dataMatureContent = e[3] === undefined ? '' : 'data-mature-content="'+e[3]+'"';
      out.push("<li><a href=\""+e[0]+"\" "+classAttr+" "+dataMatureContent+">"+e[1]+"</a></li>");
    });
    return out.join('');
  }
  
  function initHiddenInput($select, $dropdown) {
    var $elem = $dropdown.find('input'),
        nameAttr = $select.attr('name');
    $elem.attr('name', nameAttr);
  }
  
  $.extend($.fn, {
    dropdown: function (submitOnClick) {
      var $container = $(this).parent(),
          $e = $(this).detach(),
          options = getOptions($e),
          $out;
      
      submitOnClick = submitOnClick === undefined ? false : submitOnClick;

      $out = $(dropdown)
              .find('h3').text(getDefaultValue($e))
              .end()
              .find('ul').empty().prepend(populateOptions(options))
              .end();

      $out.prependTo($container);
      initHiddenInput($e, $out);

      $out.find('.label').click(function (event) {
        event.preventDefault();
        $('.drop_down_menu ul').slideUp();
        
        var $ul = $out.find('ul');
        if ($ul.is(':visible')) {
          $ul.slideUp();
        } else {
          $ul.slideDown();
        }
      });

      $out.find('li a').click(function (event) {
        $out.find('input').val($(this).attr('href'));
        
        if (submitOnClick) {
          $out.find('ul').slideUp();
        } else {
          $out.find('h3').text($(this).text());
          $out.find('ul').slideUp();
          event.preventDefault();
        }
      });
    }
  });
}(jQuery));