/**
 * jQuery.customCheckbox.
 * This plugin will allow you to turn a checkbox or radio button into an image
 * with an onclick event. The image will act as the checkbox. The actual checkbox
 * element will be hidden. The value of the hidden checkbox will be updated accordingly
 * when the pseudo checkbox is clicked. This plugin has the option to have the checkboxes
 * acs as radio buttons; meaning you can only select one in the group.
 * When the image element is clicked, then a class is appended to it: checked.
 * The default class selector for the pseudo checkbox is: checkbox.
 * This function will also append the current classes from the checkbox onto the
 * pseudo checkbox.
 * Sample:
 * $('input:[type=radio]').customCheckbox(
 *  {
 *      actLikeRadio:true,
 *      onChange:function(selection){
 *      	var count = selection.filter(':checked').size();
 *      	if(count == 1)toggleApplicationImage(true);
 *      	else toggleApplicationImage(false);
 *      }
 *  }
 * );
 */
jQuery.fn.extend({
	customCheckbox: function(options){
		var inputSelection = this;
		if(typeof options == 'undefined')options = {};
		var actLikeRadio = typeof options.actLikeRadio != 'undefined' ? options.actLikeRadio : false;
		var onChange = typeof options.onChange == 'function' ? options.onChange : function(){};
		
		inputSelection.each(createPseudoCheck);
		
		function createPseudoCheck(){
			var inputObject = $(this);
			if((actLikeRadio && inputObject.attr('type') != 'radio') && inputObject.attr('type') != 'checkbox')return;
			inputObject.hide();
			var PseudoCheckSpan = $('<span></span>');
			PseudoCheckSpan.addClass('checkbox');
			var PseudoCheckSpanDom = PseudoCheckSpan.get(0);
			PseudoCheckSpanDom.parentObject = inputObject;
			this.pseudo = PseudoCheckSpanDom;

			PseudoCheckSpanDom.check = function(){
				$(this).addClass('checked');
				$(this.parentObject).attr('checked',true);
			}

			PseudoCheckSpanDom.uncheck = function(){
				$(this).removeClass('checked');
				$(this.parentObject).removeAttr('checked');
			}

			PseudoCheckSpanDom.sync = function(){
				var $parentObject = $(this.parentObject);
				if($parentObject.attr('checked'))this.check();
				else this.uncheck();
				var existingClasses = $parentObject.attr('class').split(' ');
				for(index in existingClasses){
					var className = existingClasses[index];
					if(!$(this).hasClass(className))
						$(this).addClass(className);
				}
				onChange(inputSelection,this);
			}

			PseudoCheckSpanDom.clickAction = function(){
				if(!$(this.parentObject).attr('disabled')){
					var isChecked = $(this).hasClass('checked');
					if(actLikeRadio)inputSelection.each(function(){
						this.pseudo.uncheck();
					});
					if(isChecked)this.uncheck();
					else this.check();
					
					onChange(inputSelection,this);
				}
			}
			
			PseudoCheckSpanDom.sync();

			PseudoCheckSpan.click(PseudoCheckSpanDom.clickAction).insertBefore(inputObject);
			
			PseudoCheckSpan.mousedown(function(){$(this).addClass('mouseDown');});
			PseudoCheckSpan.mouseup(function(){$(this).removeClass('mouseDown');});
			
		}
	}
});