/*
   Select Box Styler

   Usage: 
      Give your selectbox the class 'styledSelect' and the script will do the rest.
      Use CSS to style the dropdown, etc...

   @author: Kane
   @date:   22 April 2010
*/
$(document).ready(function()
{
   function changeSelected($options, direction)
   {
      current = $options.find('li').index($('.styledSelect-active'));
      countLI = $options.find('li').length - 1;

      $options.find('li.styledSelect-active').removeClass('styledSelect-active');

      if (direction == 'down')
      {
         newPosition = current + 1;

         if (newPosition > countLI) newPosition = 0;
         
         $options.find('li').eq(newPosition).addClass('styledSelect-active');
      }
      else
      {
         newPosition = current - 1;
         $options.find('li').eq(newPosition).addClass('styledSelect-active');
      }
   }
   
   $('select.styledSelect').each(function()
   {
      var $select    = $(this);
      var $input     = '';
      var $options   = '';
      var hasFocus   = false;

      $select.wrap('<div class="styledSelect-wrapper" style="display: inline-block; width: ' + $select.width() + '" />');

      // Add the 'select box'
      $select.after('<input class="styledSelect-newSelect-selector" style="display: block; width: ' + $select.width() + 'px" readonly="readonly" type="text" name="' + $select.attr('name') + '" value="' + $select.find('option:eq(0)').html() + '" /\>');
      $input = $select.next('.styledSelect-newSelect-selector');

      // Add the options
      var options = '';
      $select.find('option').each(function()
      {
         var value = $(this).text();
         options  += (options == '') ? '<li class="styledSelect-active">' + value + '</li>' : '<li>' + value + '</li>';
      });

      $input.after('<div class="styledSelect-newSelect-options" style="display: none; z-index: 50; width: ' + $input.width() + 'px; position: absolute"><ul>' + options + '</ul></div>');
      $options = $input.next('.styledSelect-newSelect-options');

      $select.remove(); // Remove the original select box

      // Show the options when the selector is clicked
      $input.focus(function()
      {
         $options.show();
      });
      
      $input.blur(function()
      {
         if (!hasFocus) $options.hide();
      });

      // Once an option is selected:
      $options.find('li').click(function()
      {
         if ($options.find('li.styledSelect-active').length > 0)
            $options.find('li.styledSelect-active').removeClass('styledSelect-active');
            
         $(this).addClass('styledSelect-active');

         $options.hide();
         $input.attr('value', $(this).text()).blur();
      });

      // Make sure the options only hide if the user isn't viewing them
      $options.mouseover(function()
      {
         if (hasFocus != true ) hasFocus = true;
      });

      $options.mouseout(function()
      {
         if (hasFocus != false) hasFocus = false;
      });
   });
});