/** * @name NiceJForms * @description This a jQuery equivalent for Niceforms ( http://badboy.ro/articles/2007-01-30/niceforms/ ).  All the forms are styled with beautiful images as backgrounds and stuff. Enjoy them! * @param Hash hash A hash of parameters * @option integer selectRightSideWidth width of right side of the select * @option integer selectLeftSideWidth width of left side of the select  * @option integer selectAreaHeight * @option integer selectAreaOPtionsOverlap * @option imagesPath folder where custom form images are stored * @type jQuery * @cat Plugins/Interface/Forms * @author Lucian Lature ( lucian.lature@gmail.com ) * @credits goes to Lucian Slatineanu ( http://www.badboy.ro ) * @version 0.1 */jQuery.NiceJForms = {	options : {		selectRightSideWidth     : 21,		selectLeftSideWidth      : 8,		selectAreaHeight 	     : 21,		selectAreaOptionsOverlap : 2,		imagesPath               : "css/images/default/"		// other options here	},		selectText     : 'please select',	preloads       : new Array(),	inputs         : new Array(),	labels         : new Array(),	textareas      : new Array(),	selects        : new Array(),	radios         : new Array(),	checkboxes     : new Array(),	texts          : new Array(),	buttons        : new Array(),	radioLabels    : new Array(),	checkboxLabels : new Array(),	hasImages      : true,		keyPressed : function(event)	{		var pressedKey = event.charCode || event.keyCode || -1;				switch (pressedKey)		{			case 40: //down			var fieldId = this.parentNode.parentNode.id.replace(/sarea/g, "");			var linkNo = 0;			for(var q = 0; q < selects[fieldId].options.length; q++) {if(selects[fieldId].options[q].selected) {linkNo = q;}}			++linkNo;			if(linkNo >= selects[fieldId].options.length) {linkNo = 0;}			selectMe(selects[fieldId].id, linkNo, fieldId);			break;				case 38: //up			var fieldId = this.parentNode.parentNode.id.replace(/sarea/g, "");			var linkNo = 0;			for(var q = 0; q < selects[fieldId].options.length; q++) {if(selects[fieldId].options[q].selected) {linkNo = q;}}			--linkNo;			if(linkNo < 0) {linkNo = selects[fieldId].options.length - 1;}			selectMe(selects[fieldId].id, linkNo, fieldId);			break;		default:			break;		}	},		build : function(options)	{		if (options)			jQuery.extend(jQuery.NiceJForms.options, options);						if (window.event) {			jQuery('body',document).bind('keyup', jQuery.NiceJForms.keyPressed);		} else {			jQuery(document).bind('keyup', jQuery.NiceJForms.keyPressed);		}				// test if images are disabled or not		var testImg = document.createElement('img');		$(testImg).attr("src", jQuery.NiceJForms.options.imagesPath + "blank.gif").attr("id", "imagineTest");		jQuery('body').append(testImg);				if(testImg.complete)		{			if(testImg.offsetWidth == '1') {jQuery.NiceJForms.hasImages = true;}			else {jQuery.NiceJForms.hasImages = false;}		}		$(testImg).remove();					if(jQuery.NiceJForms.hasImages)		{			$('form.niceform').each( function()				{					el 				= jQuery(this);					jQuery.NiceJForms.preloadImages();					jQuery.NiceJForms.getElements(el);					jQuery.NiceJForms.replaceRadios();					jQuery.NiceJForms.replaceCheckboxes();					jQuery.NiceJForms.replaceSelects();										if (!$.browser.safari) {						jQuery.NiceJForms.replaceTexts();						jQuery.NiceJForms.replaceTextareas();						jQuery.NiceJForms.buttonHovers();					}				}			);		}		},		preloadImages: function()	{		jQuery.NiceJForms.preloads = $.preloadImages(jQuery.NiceJForms.options.imagesPath + "button_left_xon.gif", jQuery.NiceJForms.options.imagesPath + "button_right_xon.gif", 		jQuery.NiceJForms.options.imagesPath + "input_left_xon.gif", jQuery.NiceJForms.options.imagesPath + "input_right_xon.gif",		jQuery.NiceJForms.options.imagesPath + "txtarea_bl_xon.gif", jQuery.NiceJForms.options.imagesPath + "txtarea_br_xon.gif", 		jQuery.NiceJForms.options.imagesPath + "txtarea_cntr_xon.gif", jQuery.NiceJForms.options.imagesPath + "txtarea_l_xon.gif", jQuery.NiceJForms.options.imagesPath + "txtarea_tl_xon.gif", jQuery.NiceJForms.options.imagesPath + "txtarea_tr_xon.gif");	},		getElements: function(elm)	{		el = elm ? jQuery(elm) : jQuery(this);				var r = 0; var c = 0; var t = 0; var rl = 0; var cl = 0; var tl = 0; var b = 0;				jQuery.NiceJForms.inputs = $('input', el);		jQuery.NiceJForms.labels = $('label', el);		jQuery.NiceJForms.textareas = $('textarea', el);		jQuery.NiceJForms.selects = $('select', el);		jQuery.NiceJForms.radios = $('input[@type=radio]', el);		jQuery.NiceJForms.checkboxes = $('input[@type=checkbox]', el);		jQuery.NiceJForms.texts = $('input[@type=text]', el).add($('input[@type=password]', el));				jQuery.NiceJForms.buttons = $('input[@type=submit]', el).add($('input[@type=button]', el));				jQuery.NiceJForms.labels.each(function(i){			labelFor = $(jQuery.NiceJForms.labels[i]).attr("for");			jQuery.NiceJForms.radios.each(function(q){				if(labelFor == $(jQuery.NiceJForms.radios[q]).attr("id"))				{					if(jQuery.NiceJForms.radios[q].checked)					{						$(jQuery.NiceJForms.labels[i]).removeClass().addClass("chosen");						}										jQuery.NiceJForms.radioLabels[rl] = jQuery.NiceJForms.labels[i];					++rl;				}			})						jQuery.NiceJForms.checkboxes.each(function(x){								if(labelFor == $(this).attr("id"))				{					if(this.checked)					{						$(jQuery.NiceJForms.labels[i]).removeClass().addClass("chosen");						}					jQuery.NiceJForms.checkboxLabels[cl] = jQuery.NiceJForms.labels[i];					++cl;				}			})		});	},		replaceRadios: function()	{		var self = this;				jQuery.NiceJForms.radios.each(function(q){					//alert(q);			$(this).removeClass().addClass('outtaHere'); //.hide(); //.className = "outtaHere";												var radioArea = document.createElement('div');			//console.info($(radioArea));			if(this.checked) {$(radioArea).removeClass().addClass("radioAreaChecked");} else {$(radioArea).removeClass().addClass("radioArea");};						radioPos = jQuery.iUtil.getPosition(this);						jQuery(radioArea)				.attr({id: 'myRadio'+q})				.css({left: radioPos.x + 'px', top: radioPos.y + 'px', margin : '1px'})				.bind('click', {who: q}, function(e){self.rechangeRadios(e)})				.insertBefore($(this));						$(jQuery.NiceJForms.radioLabels[q]).bind('click', {who: q}, function(e){self.rechangeRadios(e)});						if (!$.browser.msie) {				$(this).bind('focus', function(){self.focusRadios(q)}).bind('blur', function() {self.blurRadios(q)});			}						$(this).bind('click', function(e){self.radioEvent(e)});		});				return true;	},		changeRadios: function(who) {				var self = this;				if(jQuery.NiceJForms.radios[who].checked) {					jQuery.NiceJForms.radios.each(function(q){				if($(this).attr("name") == $(jQuery.NiceJForms.radios[who]).attr("name"))				{					this.checked = false;					$(jQuery.NiceJForms.radioLabels[q]).removeClass();					}			});			jQuery.NiceJForms.radios[who].checked = true;			$(jQuery.NiceJForms.radioLabels[who]).addClass("chosen");						self.checkRadios(who);		}	},		rechangeRadios:function(e) 	{		who = e.data.who;				if(!jQuery.NiceJForms.radios[who].checked) {			for(var q = 0; q < jQuery.NiceJForms.radios.length; q++) 			{				if(jQuery.NiceJForms.radios[q].name == jQuery.NiceJForms.radios[who].name) 				{					jQuery.NiceJForms.radios[q].checked = false; 					//console.info(q);					jQuery.NiceJForms.radioLabels[q].className = "";				}			}			$(jQuery.NiceJForms.radios[who]).attr('checked', true); 			jQuery.NiceJForms.radioLabels[who].className = "chosen";			jQuery.NiceJForms.checkRadios(who);		}	},		checkRadios: function(who) {		$('div').each(function(q){			if($(this).is(".radioAreaChecked") && $(this).next().attr("name") == $(jQuery.NiceJForms.radios[who]).attr("name")) {$(this).removeClass().addClass("radioArea");}		});		$('#myRadio' + who).toggleClass("radioAreaChecked");	},		focusRadios: function(who) {		$('#myRadio' + who).css({border: '1px dotted #333', margin: '0'}); return false;	},		blurRadios:function(who) {		$('#myRadio' + who).css({border: 'none', margin: '1px'}); return false;	},		radioEvent: function(e) {		var self = this;		if (!e) var e = window.event;		if(e.type == "click") {for (var q = 0; q < jQuery.NiceJForms.radios.length; q++) {if(this == jQuery.NiceJForms.radios[q]) {self.changeRadios(q); break;}}}	},	replaceCheckboxes: function () 	{		var self = this;				jQuery.NiceJForms.checkboxes.each(function(q){			//move the checkboxes out of the way			$(jQuery.NiceJForms.checkboxes[q]).removeClass().addClass('outtaHere');			//create div			var checkboxArea = document.createElement('div');						//console.info($(radioArea));			if(jQuery.NiceJForms.checkboxes[q].checked) {$(checkboxArea).removeClass().addClass("checkboxAreaChecked");} else {$(checkboxArea).removeClass().addClass("checkboxArea");};						checkboxPos = jQuery.iUtil.getPosition(jQuery.NiceJForms.checkboxes[q]);						jQuery(checkboxArea)				.attr({id: 'myCheckbox' + q})				.css({				left: checkboxPos.x + 'px', 				top: checkboxPos.y + 'px',				margin : '1px'			})			.bind('click', {who: q}, function(e){self.rechangeCheckboxes(e)})			.insertBefore($(jQuery.NiceJForms.checkboxes[q]));						if(!$.browser.safari)			{				$(jQuery.NiceJForms.checkboxLabels[q]).bind('click', {who:q}, function(e){self.changeCheckboxes(e)})			}			else {				$(jQuery.NiceJForms.checkboxLabels[q]).bind('click', {who:q}, function(e){self.rechangeCheckboxes(e)})			}						if(!$.browser.msie)			{				$(jQuery.NiceJForms.checkboxes[q]).bind('focus', {who:q}, function(e){self.focusCheckboxes(e)});				$(jQuery.NiceJForms.checkboxes[q]).bind('blur', {who:q}, function(e){self.blurCheckboxes(e)});			}							//$(jQuery.NiceJForms.checkboxes[q]).keydown(checkEvent);		});		return true;	},	rechangeCheckboxes: function(e)	{		who = e.data.who;		var tester = false;