/*

	last modified 19.05.11 by David Sevcik
	required jQuery

CUSTOM FORM ELEMENTS

The only thing you need to change in this file is the following
variables: checkboxHeight, radioHeight and selectWidth.

Replace the first two numbers with the height of the checkbox and
radio button. The actual height of both the checkbox and radio
images should be 4 times the height of these two variables. The
selectWidth value should be the width of your select list image.

You may need to adjust your images a bit if there is a slight
vertical movement during the different stages of the button
activation.

Visit http://ryanfait.com/ for more information.

*/

(function($){
	document.write('<style type="text/css">'
		+'span.inputWrapper{position: relative;}'
		+'input.styled, select.styled { position: absolute; top: 0; left: 0; filter: alpha (opacity=0); opacity: 0; z-index: 1; }'
		+'</style>');

	function changed(inp)
	{
		var $inp=$(inp), $v=$inp.data('CustomFormElements.value');
		$inp.is('select')
			?$v.html($inp.find('> :selected').text())
			:inp.checked?$v.addClass('checked'):$v.removeClass('checked');
	}

	function init(el)
	{
		$(el).find("input:checkbox.styled, input:radio.styled, select.styled").each(function(a)
		{
			var $this=$(this);
			var $wrapper=$('<span/>').addClass('inputWrapper '+($this.is('select')?'select':this.type));
			var $value=$('<span/>').addClass($this.attr('class')+' value').removeClass('styled');
			$this.before($wrapper);
			$wrapper.append($value).append($this);
			$this.data('CustomFormElements.value',$value);
			$value.data('CustomFormElements.input',$this);
			$this.change(function(){return changed(this);});
			changed(this);
		});
	}

	$(function(){init(document);});
	if(window.pluginTool)pluginTool.plugins.customFormElements={onDocumentChange:function(el){return init(el);}};
})(jQuery);