/**
 * Alter checkboxes and radiobuttons
 * 
 * @return void
 */
$.fn.fancyInput = function(){
	$(this).each(function(i){	
		if($(this).is('[type=checkbox],[type=radio]')){
			var input = $(this);
			
			// get the associated label using the input's id
			var label = $('label[for='+input.attr('id')+']');
			
			//get type, for classname suffix 
			var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';
			
			// wrap the input + label in a div 
			$('<div class="fancyInput-'+ inputType +'"></div>').insertBefore(input).append(input, label);
			
			// find all inputs in this set using the shared name attribute
			var allInputs = $('input[name='+input.attr('name')+']');
			
			// necessary for browsers that don't support the :hover pseudo class on labels
			label.hover(
				function(){ 
					$(this).addClass('hover'); 
					if(inputType == 'checkbox' && input.is(':checked')){ 
						$(this).addClass('checkedHover'); 
					} 
				},
				function(){ $(this).removeClass('hover checkedHover'); }
			);
			
			//bind custom event, trigger it, bind click,focus,blur events					
			input.bind('updateState', function(){	
				if (input.is(':checked')) {
					if (input.is(':radio')) {				
						allInputs.each(function(){
							$('label[for='+$(this).attr('id')+']').removeClass('checked');
						});		
					};
					label.addClass('checked');
				}
				else { label.removeClass('checked checkedHover checkedFocus'); }
										
			})
			.trigger('updateState')
			.click(function(){ 
				$(this).trigger('updateState'); 
			})
			.focus(function(){ 
				label.addClass('focus'); 
				if(inputType == 'checkbox' && input.is(':checked')){ 
					$(this).addClass('checkedFocus'); 
				} 
			})
			.blur(function(){ label.removeClass('focus checkedFocus'); });
		}
	});
};

/**
 * Alter file input
 * 
 * @return void
 */
$.fn.customFileInput = function() {
	return $(this).each( function() {
		//apply events and styles for file input element
		var fileInput = $(this)
		.addClass('customfile-input') //add class for CSS
		.mouseover( function() {
			upload.addClass('customfile-hover');
		})
		.mouseout( function() {
			upload.removeClass('customfile-hover');
		})
		.focus( function() {
			upload.addClass('customfile-focus');
			fileInput.data('val', fileInput.val());
		})
		.blur( function() {
			upload.removeClass('customfile-focus');
			$(this).trigger('checkChange');
		})
		.bind('disable', function() {
			fileInput.attr('disabled',true);
			upload.addClass('customfile-disabled');
		})
		.bind('enable', function() {
			fileInput.removeAttr('disabled');
			upload.removeClass('customfile-disabled');
		})
		.bind('checkChange', function() {
			if(fileInput.val() && fileInput.val() != fileInput.data('val')) {
				fileInput.trigger('change');
			}
		})
		.bind('change', function() {
			//get file name
			var fileName = $(this).val().split(/\\/).pop();
			//get file extension
			//var fileExt = 'customfile-ext-' + fileName.split('.').pop().toLowerCase();
			//update the feedback
			uploadFeedback
			.text(fileName) //set feedback text to filename
			//.removeClass(uploadFeedback.data('fileExt') || '') //remove any existing file extension class
			//.addClass(fileExt) //add file extension class
			//.data('fileExt', fileExt) //store file extension for class removal on next change
			.addClass('customfile-feedback-populated'); //add class to show populated state
			//change text of button
			//uploadButton.text('Change');
		})
		.click( function() { //for IE and Opera, make sure change fires after choosing a file, using an async callback
			fileInput.data('val', fileInput.val());
			setTimeout( function() {
				fileInput.trigger('checkChange');
			},100);
		});
		//create custom control container
		var upload = $('<div class="customfile"></div>');
		//create custom control button
		var uploadButton = $('<span class="customfile-button" aria-hidden="true"></span>').appendTo(upload);
		//create custom control feedback
		var uploadFeedback = $('<span class="customfile-feedback" aria-hidden="true">Geen bestand geselecteerd...</span>').appendTo(upload);
		//match disabled state
		if(fileInput.is('[disabled]')) {
			fileInput.trigger('disable');
		}
		//on mousemove, keep file input under the cursor to steal click
		upload
		.mousemove( function(e) {
			fileInput.css({
				'left': e.pageX - upload.offset().left - fileInput.outerWidth() + 50, //position right side 20px right of cursor X)
				'top': e.pageY - upload.offset().top - 25,
				'width': '100',
				'height': '40'
			});
		})
		.insertAfter(fileInput); //insert after the input
		fileInput.appendTo(upload);
	});
};