document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; /*width: 190px;*/ opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
/**
 * Componente de customização de selects, checkbox e radio.
 * 
 * Usage :
 *		Default      : CustomForm.customizeIt();
 * 		With context : CustomForm.customizeIt(jQuery('.myelement'));
 */
var CustomForm = {

	/**
	 * Configurações do componente
	 * 
	 * As chaves são as classes
	 * 
	 * Toda classe deve conter a propriedade o objeto position com as propriedades (clean, pushed e checked).
	 * 
	 * O objeto position determina a posição da imagem no sprite utilizado
	 */
	config : {
		styled : {
			size : {
				radio : { width: '', height: '' },
				checkbox : { width: '', height: '' }
			},
			position: {
				radio : {
					clean: '-1318px -23px',
					pushed: '-1318px -71px',
					checked: '-1318px -55px'
				},
				checkbox : {
					clean: '-1318px -23px',
					pushed: '-1318px -71px',
					checked: '-1318px -55px'
				}
			}
		},
		styled2: {
			size : {
				radio : { width: '', height: '' },
				checkbox : { width: '', height: '' }
			},
			position: {
				radio : {
					clean: '',
					pushed: '',
					checked: ''
				},
				checkbox : {
					clean: '',
					pushed: '',
					checked: ''
				}
			}
		}
	},

	/* ATENÇÃO! NÃO É NECESSÁRIO ALTERAR MAIS NADA DESSE PONTO EM DIANTE */

	/**
	 * Determina em qual contexto a customização deve ser aplicada
	 * 
	 * Default : document
	 */
	context : document,

	/**
	 * Método inicial do componente de customização
	 * 
	 * @param context O contexto onde a customização será aplicada (default:document) 
	 */
	customizeIt : function(context){

		// Define o contexto
		this.context = context || document;

		// Inicializa
		this.init();
	},

	/**
	 * Inicializa o componente de customização
	 * 
	 * 
	 */
	init : function() {
		//console.log('init');

		// Todos os elementos da página
		var els = J(':radio, :checkbox, select', this.context), l=els.length;
		while(l--){

			var el = J(els[l]);
			if(this.canBeStylized(el)){

				//console.log('canBeStylized! ', el);

				// Tipo
				var type = this.getType(el);
				//console.log('type ', type);

				// Estado
				var state = (el.is(':checked')||el.is(':selected'))?'checked':'clean';
				//console.log('state ', state);

				// Posição de background a ser aplicada
				var position = this.getPosition(el, state);
				//console.log('position ', position);

				// Adiciona o tipo, a classe de sprite e a classe de estilo
				var styledClasses = [type, 'sprite', 'stylized', this.getStyleClass(el)].join(' ');
				//console.log('styledClasses ', styledClasses);

				// Cria o elemento
				var styledEl = J(['<span class="', styledClasses ,'"></span>'].join(''));
				//console.log('styledEl ', styledEl);

				if(type === 'select') {

					// Atacha o listener
					el.change(this.choose);

					// Coloca o id de acordo com o nome do select
					styledEl.attr('id', 'select'+el.attr('name'));

					// Adiciona as classes do elemento
					if(el.hasClass('nav')) styledEl.addClass('nav');
					//if(el.hasClass('field')) styledEl.addClass('field');

					if(console)console.log(styledEl);
					// Muda o texto baseado na seleção do select
					styledEl.text( J('option:selected', el).text() );

				}else{

					// Aplica a posição do background
					styledEl.css('background-position', position);

					// Atacha os listeners
					styledEl.mousedown(this.pushed).mouseup(this.check);
				}

				// Estiliza o elemento
				el.before(styledEl);
			}
		}
	},
	pushed : function(event) {
		//console.log('pushed!');

		// Elemento estilizado
		var styledEl = J(event.target);

		// O input do formulário (checkbox ou radio)
		var el = styledEl.next();

		// Posição de background a ser aplicada
		var position = CustomForm.getPosition(styledEl.next(), 'pushed');

		// Aplica a posição do background
		styledEl.css('background-position', position);
	},
	check : function(event) {
		//console.log('check!');

		// Elemento estilizado
		var styledEl = J(event.target);

		// O input do formulário (checkbox ou radio)
		var el = styledEl.next();

		// Tipo
		var type = CustomForm.getType(el);

		// Toggle checked
		var state=checked='checked';
		if(el.attr('checked')){
			checked='';
			state='clean';
		}
		el.attr('checked', checked);

		// Posição de background a ser aplicada
		var position = CustomForm.getPosition(el, state);

		// Aplica a posição do background
		styledEl.css('background-position', position);

		// No caso de option, desmarca os demais
		if(type === 'radio' && checked) {
			var posClean = CustomForm.getPosition(el, 'clean');
			J(':radio').not(el).each(function(){
				var radio=J(this);
				if(radio.attr('name')==el.attr('name')){
					radio.prev().not(styledEl).css('background-position', posClean);
				}
			});
		}
	},
	choose : function(event) {
		//console.log('choosed!');

		// O input do formulário (checkbox ou radio)
		var el = J(event.target);

		// Elemento estilizado
		var styledEl = el.prev();

		// Aplica o texto nos elementos select
		styledEl.text( J('option:selected', el).text() );
	},

	/**
	 * Determina se um elemento informado pode ser estilizado.
	 * 
	 * @return true se não estiver sido estilizado, do contrário, false  
	 */
	canBeStylized : function(el){
		var prev = el.prev();
		if(prev) return (prev.not('.stylized') && CustomForm.getStyleClass(el));
		return false;
	},

	/**
	 * Retorna a classe para estilização a ser usada.
	 */
	getStyleClass : function(el){
		for(var cls in CustomForm.config){
			if(el.hasClass(cls)) return cls;
		}
		return false;
	},

	/**
	 * Retorna o tipo do elemento informado
	 * 
	 * @return uma string contendo o tipo do elemento informado 
	 */
	getType : function(el) {
		var type=null;
		if(el){
			type = (el.is(':checkbox'))?'checkbox':type;
			if(!type)type = (el.is(':radio'))?'radio':type;
			if(!type)type = (el.is('select'))?'select':type;
		}
		return type;
	},

	/**
	 * Retorna a posição do background do elemento informado
	 *  
	 * @param el elemento
	 * @param state Estado da posição solicitada
	 *  
	 * @return um string contento a posição do background a ser aplicado
	 */
	getPosition : function(el, state){
		var type = CustomForm.getType(el);
		if(type!=='select'){
			var cls = CustomForm.getStyleClass(el);
			return eval('(CustomForm.config.'+ cls +'.position.'+ type +'.'+ state +')');
		}
	}
};

J(function(){ CustomForm.customizeIt(); });