/*

CUSTOM FORM ELEMENTS

Creado por Cristian Aguirre
www.maquetado.com

Este script funciona bajo jquery. http://www.jquery.com

Visite http://maquetado.com.ar/ para mayor informacion.

*/

	function customize_form_elements(){
		//recorro los todos los inputs de la clase estile
		$('.estile').each(function(){
			if($(this).attr('tagName') == 'INPUT'){
					//asigno la accion para el change del checkbox. En este caso se alterna la clase selected del padre del input
					if($(this).attr('type') == 'checkbox'){
						$(this).wrap("<div class='float-left'><span class='span_checkbox"+$(this).attr('class')+"'></span></div>");
						$(this).click(function(){
							$(this).parent().toggleClass("selected");
						});
					}
					if($(this).attr('type') == 'radio')
					{
						$(this).wrap("<div class='float-left'><span class='span_radio"+$(this).attr('class')+"'></span></div>");
						//accion para el click de los radio. Lo que hace es recorrer todos los input.estile y si es radio los desselecciona
						$(this).click(function(){
							   //$(this).parent().toggleClass("selected");
								$('input.estile').each(function(){
									if($(this).attr("checked")==true){
										$(this).parent().addClass("selected");
									}else $(this).parent().removeClass("selected");
								});
								
						});	
					}
					//si el radio/checkbox estaba seleccionado, le agrego la clase al span que lo contiene
					if($(this).attr("checked")==true)
						$(this).parent().addClass("selected");
					else $(this).parent().removeClass("selected");
					
			}
			if($(this).attr('tagName') == 'SELECT')
			{
				//los encierro con una div y despues le pongo un span antes del select
				$(this).wrap("<div style='display:inline'></div>");
				$(this).before("<span class='select_"+$(this).attr('class')+"'></span>");
	
				//cargo el texto al span con el option seleccionado del select
				$(this).siblings('span','div').text($("option:selected",this).text());
	
				//asigno una accion para el evento change, que seria cargar al texto del span el texto del option seleccionado
				$(this).change(function(){
					$(this).siblings('span','div').text($("option:selected",this).text());			
				});
			}	
		});			
	}	
	function customize_form_elements2(selector){
		//los encierro con una div y despues le pongo un span antes del select
		$(selector).wrap("<div style='display:inline'></div>");
		$(selector).before("<span class='select_"+$(selector).attr('class')+"'></span>");

		//cargo el texto al span con el option seleccionado del select
		$(selector).siblings('span','div').text($("option:selected",selector).text());

		//asigno una accion para el evento change, que seria cargar al texto del span el texto del option seleccionado
		$(selector).change(function(){
			$(this).siblings('span','div').text($("option:selected",this).text());			
		});
	}
	
	$().ready(function(){
		//llamo a la funcion para customizar los inputs radio, checkbox y selects cuando el documento este listo.
		customize_form_elements();		
	});