/* * jNice * version: 1.0 (11.26.08) * by Sean Mooney (sean@whitespace-creative.com)  * Examples at: http://www.whitespace-creative.com/jquery/jnice/ * Dual licensed under the MIT and GPL licenses: *   http://www.opensource.org/licenses/mit-license.php *   http://www.gnu.org/licenses/gpl.html * * 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($){	if ($.browser.msie && parseInt($.browser.version) <= 6) {		$(window).load(function () {			$('.jNice input[type=text]').each(function() { $(this).addClass('jnice_text'); });			$('.jNice input[type=radio]').each(function() { $(this).addClass('jnice_radio');	});			$('.jNice input[type=check]').each(function() { $(this).addClass('jnice_check');	});			$('.jNice input[type=submit]').each(function() { $(this).addClass('jnice_submit');	});			$('.jNice input[type=textarea]').each(function() { $(this).addClass('jnice_textarea');	});		});	}	else {		$.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="jCheckboxWrapper 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.prev('input:first');					if (input.attr('checked')===true){						input.attr('checked', false);						$a.removeClass('jNiceChecked');					}					else {						input.attr('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.outerWidth(true);			if(width==0){				width = $select.attr('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(){$('.jNice').jNice();	});	}	})(jQuery);