// VARIÁVEIS QUE SÃO NECESSÁRIAS SETAR

// Select Fake
var tamanhoBorda = 5; // Setar a largura da borda-left
var paddingLeft = 0; // Setar o padding-left necessário pra completar o início do texto. (levar em consideração o tamanho da borda)

// File Fake
var caracteresFileFake = 22; // Setar a quantidade limite de caracteres que vão aparecer.

// Exemplo
/*
	<select class="select-padrao w-100" id="sexo" name="sexo">
		<option value="">Selecione</option>
		<option value="1">Masculino</option>
		<option value="2">Feminino</option>
	</select>
*/
function selectFake(){
	$('.select-padrao').each(function(){
		var valorInicial  = $(this).find('option:first-child').html();
		var selectContent = parseInt($(this).css('width'));
		var largura = selectContent - tamanhoBorda - paddingLeft;
		$(this).addClass('select-hide');
		$(this).before('\
		<div class="select-content" style="width:'+selectContent+'px">\
			<div class="borda-left"></div>\
			<div class="select-fake" style="width:'+largura+'px;padding-left:'+paddingLeft+'">'+valorInicial+'</div>\
			<div class="clear"></div>\
		</div>');
		$(this).appendTo( $(this).prev() );
		$(this).change(function(){
			var string = $(this).children('option:selected').text();
			$(this).prev('div').prev('.select-fake').html(string);
		});
		var str = $(this).children('option:selected').text();
		$(this).prev('div').prev('.select-fake').html(str);
	});
}

// Exemplo
/*
	<input type="radio" id="fem" name="sexo" class="radio-padrao" />
	<label for="fem" class="radio">Label pro Radio Feminino</label>
	<input type="radio" id="mas" name="sexo" class="radio-padrao" />
	<label for="mas" class="radio">Label pro Radio Masculino</label>
*/
// Imprescindível o uso de FOR no Label, ID e NAME nos Radios
function radioFake(){
	$('.radio-padrao').each(function(){
		$(this).css({display: 'none'});
		var idRadio = $(this).attr('id')
		// Seta o Radio Button Feminino ativo.
		// Caso exista algum outro tipo de Radio Button que precise inciar marcado, adicionar.
		if( $(this).attr('id') == "fem" ){
			$(this).before('<div class="radio-'+idRadio+'"><span class="radio-fake radio-ativo replace"></span></div>');
			$(this).appendTo('div.radio-'+idRadio);
			$(this).parent('div').next('label').appendTo('div.radio-'+idRadio);
			$(this).click();
		} else{
			$(this).before('<div class="radio-'+idRadio+'"><span class="radio-fake replace"></span></div>');
			$(this).appendTo('div.radio-'+idRadio);
			$(this).parent('div').next('label').appendTo('div.radio-'+idRadio);
		}

		$(this).prev('.radio-fake').click(function(){
			var labelFor = $(this).next().attr('id');
			var nameRadio = $('#'+labelFor).attr('name');
			$('input[name='+nameRadio+']').each(function(){
				$(this).prev('.radio-fake').removeClass('radio-ativo');
			});
			$('input:radio#'+labelFor).prev('.radio-fake').addClass('radio-ativo');
			$('input:radio#'+labelFor).click();
		});
	});
	$('label.radio').click(function(){
		var labelFor = $(this).attr('for');
		var nameRadio = $('#'+labelFor).attr('name');
		$('input[name='+nameRadio+']').each(function(){
			$(this).prev('.radio-fake').removeClass('radio-ativo');
		});
		$('input:radio#'+labelFor).prev('.radio-fake').addClass('radio-ativo');
		$('input:radio#'+labelFor).click();
	});
}

// Exemplo
/*
	<input type="checkbox" id="checkbox" class="checkbox-padrao" />
	<label for="checkbox" class="checkbox">Label pro Checkbox</label>
*/
function checkboxFake(){
	$('.checkbox-padrao').each(function(){
		$(this).css({display:'none'});
		$(this).before('<span class="checkbox-fake replace"></span>');
		$(this).prev('.checkbox-fake').click(function(){
			if($(this).hasClass('checkbox-ativo')){
				$(this).next('.checkbox-fake').click();
				$(this).removeClass('checkbox-ativo');
			}else{
				$(this).next('.checkbox-fake').click();
				$(this).addClass('checkbox-ativo');
			}
		});
	});
	$('label.checkbox').click(function(){
		var labelFor = $(this).attr('for');
		if( $('#'+labelFor).prev('.checkbox-fake').hasClass('checkbox-ativo') ){
			$('#'+labelFor).click();
			$('#'+labelFor).prev().removeClass('checkbox-ativo');
		}else{
			$('#'+labelFor).click();
			$('#'+labelFor).prev().addClass('checkbox-ativo');
		}
	});
}

// Exemplo
/*
	<input type="file" id="arquivo" name="arquivo" class="file-padrao" />
*/
function fileFake(){
	$('.file-padrao').each(function(){
		var input = $(this);
		var texto = '<div class="fundo-fake"><span class="content-campo-file"></span></div>\
			<a class="bt-fake replace" href="javascript:void(0)"></a>\
			<div class="clear"></div>';
		$(this).before('\
		<div class="file-content">\
		</div>');
		$(this).appendTo('.file-content');
		$(texto).appendTo('.file-content');

		// Pré-Inicializa o campo no caso do usuário dar F5
		var string = $('.file-padrao').attr('value');
		if(string.length >= caracteresFileFake){
            string = string.substring(0,caracteresFileFake)+"...";
        }
		$(this).next('.fundo-fake').children('.content-campo-file').text(string);
	});
    $('.file-padrao').change(function(){
        var str = $(this).val()
        if(str.length >= caracteresFileFake){
            str = str.substring(0,caracteresFileFake)+"...";
        }
        $(this).next('.fundo-fake').children('.content-campo-file').text(str);
    });
}