(function($) {
  $.fn.selectBoxReplacement = function() {
    return $(this).each(function(){
      var $select     = $(this);
      var tabIndex    = $select.attr('tabindex');
      var replacement = $('<div class="select-replacement"></div>');
      if(tabIndex){
          $select.attr('tabindex','');
          replacement.attr('tabindex',tabIndex);
      }
      var arrow         = $('<span class="arrow"></span>').appendTo(replacement);
      var ul            = $('<ul></ul>');
      var selectedItem  = $('<li class="selected"><span class="selected-text"></span></li>').appendTo(ul);
      var selectedText  = selectedItem.find('.selected-text');
      var options       = $('<div class="options"><ul></ul></div>').appendTo(selectedItem);

      $select.find('option').each(function() {
        var option  = $(this);
        var li      = $('<li>'+option.text()+'</li>');
        options.find('ul').append(li);
      });

      options.find('li:odd').addClass('odd');

      var liOptions = options.find('li');

          liOptions.click(function(e) {
            e.preventDefault();
            e.stopPropagation();
            liOptions.removeClass('active');
            $(this).addClass('active');
            var index = options.find('li').index($(this));
              $select[0].selectedIndex = index;
              selectedText.text($(this).text());
              $select.trigger('change');
              replacement.trigger('selected');
              replacement.closest('.input-row').removeClass('active');
          });

          liOptions.select(function(e) {
            e.preventDefault();
            e.stopPropagation();
            liOptions.removeClass('active');
            $(this).addClass('active');
            var index = options.find('li').index($(this));
              $select[0].selectedIndex = index;
              selectedText.text($(this).text());
              $select.trigger('change');
          });

          replacement.focus(function(e){
            e.preventDefault();
            e.stopPropagation();
            $('.select-replacement').not(this).closest('.input-row').removeClass('active');
            $(this).data('focus',true);
            $(this).closest('.input-row').addClass('active');
          });

          replacement.click(function(e){
            e.preventDefault();
            e.stopPropagation();
            if( $(this).data('focus')){
              $(this).data('focus',false);
            }else{
              $('.select-replacement').not(this).closest('.input-row').removeClass('active');
              replacement.closest('.input-row').toggleClass('active');
            }
          });

          $(document).click(function(e) {
            var t         = e.target;
            var $current  = $(t).closest('.select-replacement ul');
            if($current.length < 1){
              $current = $(t).closest('.input-row').find('.select-replacement');
            }
            if($current.length > 0){
              $('.select-replacement > ul').not($current.get(0)).closest('.input-row').removeClass('active');
            }else{
            $('.select-replacement').closest('.input-row').removeClass('active');
            }
          });

          selectedText.text(liOptions.eq($select[0].selectedIndex).addClass('active').text());
          $select.hide();
          replacement.append(ul);
          replacement.insertAfter($select);

          $(document).keydown(function(e){
            if(options.is(':visible')){
              if(e.keyCode == 40){
                e.preventDefault();
                options.find('.active').next().trigger('select');
              }
              if(e.keyCode == 38){
                e.preventDefault();
                options.find('.active').prev().trigger('select');
              }
              if(e.keyCode == 13 || e.keyCode == 32){
                e.preventDefault();
                replacement.trigger('selected').closest('.input-row').removeClass('active');
              }
            }
          });
      });
  }

})(jQuery);