/**
 * Formstyle Plugin 0.1 Alpha
 *
 * Copyright (c) 2010 Philip Howard (Gadgetoid.com)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */

/**
 * Style radio and checkbox form elements using a dummy replacement div
 * This is a jQuery implementation of the original formStyle, guide here: http://dxdec.com/wod/formstyle/index.html
 *
 * This plugin currently demands the unordered/ordered list methodology for laying out forms, example markup is as follows
 
 <ul>
 	<li><input type="checkbox" name="checkboxes" id="checkbox1"> <label for="checkbox1">Checkbox 1</label></li>
 	<li><input type="checkbox" name="checkboxes" id="checkbox2"> <label for="checkbox2">Checkbox 2</label></li>
 	<li><input type="checkbox" name="checkboxes" id="checkbox3"> <label for="checkbox3">Checkbox 3</label></li>
 </ul>
 
 Selected list items will gain the class 'selected', as will a div injected into the <li> tag
 
 
 *
 * @example $.cookie('the_cookie', 'the_value');
 * @desc Set the value of a cookie.
 *
 *
 * @name $.formstyle
 * @cat Plugins/FormStyle
 * @author Philip Howard/phil@gadgetoid.com
*/

jQuery.fn.formStyle = function(options)
{

var opts = jQuery.extend(
	{
		inside:"<div></div>",
		cssclass:"jq_checkbox",
		checked:"checked",
		hidden:"hidden",
		change:function(){}
	},
	jQuery.fn.formStyle.defaults, options);

return jQuery(this).each(
function()
{

jQuery(this).find('input[type=checkbox],input[type=radio]').each(

function(){

// Get default checked status and create the new fake checkbox
if ($(this).filter(':checked').length)
{
	$(this).addClass(opts.hidden).parent().addClass(opts.checked).append('<div class="'+opts.cssclass+' checked">'+opts.inside+'</div>');
}
else
{
	$(this).addClass(opts.hidden).parent().removeClass(opts.checked).append('<div class="'+opts.cssclass+'">'+opts.inside+'</div>');
}

// Add events
$(this)
.change(function(){

	var fakebox = $(this).parent().find('div.'+opts.cssclass);

	if($(this).filter('[type=radio]').length)
	{
		$(this).parent().parent().find('div.'+opts.cssclass).removeClass(opts.checked).parent().removeClass(opts.checked);
	}
	
	if(!$(this).filter(':checked').length)
	{
		$(fakebox).removeClass(opts.checked).parent().removeClass(opts.checked);
	}
	else
	{
		$(fakebox).addClass(opts.checked).parent().addClass(opts.checked);
	}
	
	opts.change();

})
.parent()
.find('div.'+opts.cssclass)
.click(function(){

		var box = $(this).parent().find('input');
		$(box).click();

		if($(box).filter('[type=radio]').length)
		{
			$(this).parent().parent().find('div.'+opts.cssclass).removeClass(opts.checked).parent().removeClass(opts.checked);
		}
		
		if(!$(box).filter(':checked').length)
		{
			$(this).removeClass(opts.checked).parent().removeClass(opts.checked);
		}
		else
		{
			$(this).addClass(opts.checked).parent().addClass(opts.checked);
		}
	
	opts.change();
	
		
;})
.parent()
.find('label')
.click(function(){

		var box = $(this).parent().find('input[type=radio]');
		$(box).click();

		box = $(this).parent().find('input');

		if($(box).filter('[type=radio]').length)
		{
			$(this).parent().parent().find('div.'+opts.cssclass).removeClass(opts.checked).parent().removeClass(opts.checked);
		}
		
		if(!$(box).filter(':checked').length)
		{
			$(this).parent().find('div.'+opts.cssclass).removeClass(opts.checked).parent().removeClass(opts.checked);
		}
		else
		{
			$(this).parent().find('div.'+opts.cssclass).addClass(opts.checked).parent().addClass(opts.checked);
		}
	
	opts.change();
	
		
;});

});

});

}