/*
 * UPDATED: 11.26.08
 *
 * jNice
 * by Sean Mooney (sean@whitespace-creative.com) 
 *
 * To Use: place in the head 
 *  <link href="inc/style/jNice.css" rel="stylesheet" type="text/css" />
 *  <script type="text/javascript" src="inc/js/jquery.jNice.js"></script>
 *
 * And apply the jNice class to the form you want to style
 *
 * To Do: Add textareas, Add File upload
 *
 ******************************************** */
(function($){
  $.fn.jNice = function(options){
    var self = this;
    var safari = $.browser.safari; /* We need to check for safari to fix the input:text problem */
    /* Apply document listener */
    $(document).mousedown(checkExternalClick);
    /* each form */
    return this.each(function(){
      $('input:submit, input:reset, input:button', this).each(ButtonAdd);
      $('button').focus(function(){ $(this).addClass('jNiceFocus')}).blur(function(){ $(this).removeClass('jNiceFocus')});
      $('input:text:visible, input:password', this).each(TextAdd);
      /* If this is safari we need to add an extra class */
      if (safari){$('.jNiceInputWrapper').each(function(){$(this).addClass('jNiceSafari').find('input').css('width', $(this).width()+11);});}
      $('input:checkbox', this).each(CheckAdd);
      $('input:radio', this).each(RadioAdd);
      /*$('select', this).each(function(index){ SelectAdd(this, index); });*/
      /* Add a new handler for the reset action */
      $(this).bind('reset',function(){var action = function(){ Reset(this); }; window.setTimeout(action, 10); });
      $('.jNiceHidden').css({opacity:0});
    });    
  };/* End the Plugin */

  var Reset = function(form){
    var sel;
    $('.jNiceSelectWrapper select', form).each(function(){sel = (this.selectedIndex<0) ? 0 : this.selectedIndex; $('ul', $(this).parent()).each(function(){$('a:eq('+ sel +')', this).click();});});
    $('a.jNiceCheckbox, a.jNiceRadio', form).removeClass('jNiceChecked');
    $('input:checkbox, input:radio', form).each(function(){if(this.checked){$('a', $(this).parent()).addClass('jNiceChecked');}});
  };

  var RadioAdd = function(){
    var $input = $(this).addClass('jNiceHidden').wrap('<span class="jRadioWrapper jNiceWrapper"></span>');
    var $wrapper = $input.parent();
    var $a = $('<span class="jNiceRadio"></span>');
    $wrapper.prepend($a);
    /* Click Handler */
    $a.click(function(){
        var $input = $(this).addClass('jNiceChecked').siblings('input').attr('checked',true);
        /* uncheck all others of same name */
        $('input:radio[name="'+ $input.attr('name') +'"]').not($input).each(function(){
          $(this).attr('checked',false).siblings('.jNiceRadio').removeClass('jNiceChecked');
        });
        return false;
    });
    $input.click(function(){
      if(this.checked){
        var $input = $(this).siblings('.jNiceRadio').addClass('jNiceChecked').end();
        /* uncheck all others of same name */
        $('input:radio[name="'+ $input.attr('name') +'"]').not($input).each(function(){
          $(this).attr('checked',false).siblings('.jNiceRadio').removeClass('jNiceChecked');
        });
      }
    }).focus(function(){ $a.addClass('jNiceFocus'); }).blur(function(){ $a.removeClass('jNiceFocus'); });

    /* set the default state */
    if (this.checked){ $a.addClass('jNiceChecked'); }
  };

  var CheckAdd = function(){
    var $input = $(this).addClass('jNiceHidden').wrap('<span class="jNiceWrapper"></span>');
    var $wrapper = $input.parent().append('<span class="jNiceCheckbox"></span>');
    /* Click Handler */
    var $a = $wrapper.find('.jNiceCheckbox').click(function(){
        var $a = $(this);
        var input = $a.siblings('input')[0];
        if (input.checked===true){
          input.checked = false;
          $a.removeClass('jNiceChecked');
        }
        else {
          input.checked = true;
          $a.addClass('jNiceChecked');
        }
        return false;
    });
    $input.click(function(){
      if(this.checked){ $a.addClass('jNiceChecked');   }
      else { $a.removeClass('jNiceChecked'); }
    }).focus(function(){ $a.addClass('jNiceFocus'); }).blur(function(){ $a.removeClass('jNiceFocus'); });
    
    /* set the default state */
    if (this.checked){$('.jNiceCheckbox', $wrapper).addClass('jNiceChecked');}
  };

  var TextAdd = function(){
    var $input = $(this).addClass('jNiceInput').wrap('<div class="jNiceInputWrapper"><div class="jNiceInputInner"></div></div>');
    var $wrapper = $input.parents('.jNiceInputWrapper');
    $input.focus(function(){ 
      $wrapper.addClass('jNiceInputWrapper_hover');
    }).blur(function(){
      $wrapper.removeClass('jNiceInputWrapper_hover');
    });
  };

  var ButtonAdd = function(){
    var value = $(this).attr('value');
    $(this).replaceWith('<button id="'+ this.id +'" name="'+ this.name +'" type="'+ this.type +'" class="'+ this.className +'" value="'+ value +'"><span><span>'+ value +'</span></span>');
  };

  /* Hide all open selects */
  var SelectHide = function(){
      $('.jNiceSelectWrapper ul:visible').hide();
  };

  /* Check for an external click */
  var checkExternalClick = function(event) {
    if ($(event.target).parents('.jNiceSelectWrapper').length === 0) { SelectHide(); }
  };

  var SelectAdd = function(element, index){
    var $select = $(element);
    index = index || $select.css('zIndex')*1;
    index = (index) ? index : 0;
    /* First thing we do is Wrap it */
    $select.wrap($('<div class="jNiceWrapper"></div>').css({zIndex: 100-index}));
    var width = $select.width();
    $select.addClass('jNiceHidden').after('<div class="jNiceSelectWrapper"><div><span class="jNiceSelectText"></span><span class="jNiceSelectOpen"></span></div><ul></ul></div>');
    var $wrapper = $(element).siblings('.jNiceSelectWrapper').css({width: width +'px'});
    $('.jNiceSelectText, .jNiceSelectWrapper ul', $wrapper).width( width - $('.jNiceSelectOpen', $wrapper).width());
    /* IF IE 6 */
    if ($.browser.msie && jQuery.browser.version < 7) {
      $select.after($('<iframe src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" tabIndex="-1" frameborder="0"></iframe>').css({ height: $select.height()+4 +'px' }));
    }
    /* Now we add the options */
    SelectUpdate(element);
    /* Apply the click handler to the Open */
    $('div', $wrapper).click(function(){
      var $ul = $(this).siblings('ul');
      if ($ul.css('display')=='none'){ SelectHide(); } /* Check if box is already open to still allow toggle, but close all other selects */
      $ul.slideToggle();
      var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
      $ul.animate({scrollTop: offSet});
      return false;
    });
    /* Add the key listener */
    $select.keydown(function(e){
      var selectedIndex = this.selectedIndex;
      switch(e.keyCode){
        case 40: /* Down */
          if (selectedIndex < this.options.length - 1){ selectedIndex+=1; }
          break;
        case 38: /* Up */
          if (selectedIndex > 0){ selectedIndex-=1; }
          break;
        default:
          return;
          break;
      }
      $('ul a', $wrapper).removeClass('selected').eq(selectedIndex).addClass('selected');
      $('span:eq(0)', $wrapper).html($('option:eq('+ selectedIndex +')', $select).attr('selected', 'selected').text());
      return false;
    }).focus(function(){ $wrapper.addClass('jNiceFocus'); }).blur(function(){ $wrapper.removeClass('jNiceFocus'); });
  };

  var SelectUpdate = function(element){
    var $select = $(element);
    var $wrapper = $select.siblings('.jNiceSelectWrapper');
    var $ul = $wrapper.find('ul').find('li').remove().end().hide();
    $('option', $select).each(function(i){
      $ul.append('<li><a href="#" index="'+ i +'">'+ this.text +'</a></li>');
    });
    /* Add click handler to the a */
    $ul.find('a').click(function(){
      $('a.selected', $wrapper).removeClass('selected');
      $(this).addClass('selected');  
      /* Fire the onchange event */
      if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
      $select[0].selectedIndex = $(this).attr('index');
      $('span:eq(0)', $wrapper).html($(this).html());
      $ul.hide();
      return false;
    });
    /* Set the defalut */
    $('a:eq('+ $select[0].selectedIndex +')', $ul).click();
  };

  var SelectRemove = function(element){
    var zIndex = $(element).siblings('.jNiceSelectWrapper').css('zIndex');
    $(element).css({zIndex: zIndex}).removeClass('jNiceHidden');
    $(element).siblings('.jNiceSelectWrapper').remove();
  };

  /* Utilities */
  $.jNice = {
      SelectAdd : function(element, index){   SelectAdd(element, index); },
      SelectRemove : function(element){ SelectRemove(element); },
      SelectUpdate : function(element){ SelectUpdate(element); }
  };/* End Utilities */

  /* Automatically apply to any forms with class jNice */
  $(function(){$('form.jNice').jNice();  });
})(jQuery);