/*-------------------------------------------------------------------- 
 * jQuery based - customInput() for checkbox, radiobox, file browsing
 * by Maggie Wachs and Scott Jehl, http://www.filamentgroup.com
 * ** MODIFIED by Jason Hoi from Browsing Media

 * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
 * Article: http://www.filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/  
 * Usage example below (see comment "Run the script...").
--------------------------------------------------------------------*/


jQuery.fn.customInput = 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="custom-'+ 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(e){ 
				e.preventDefault();
				label.addClass('focus'); 
				if(inputType == 'checkbox' && input.is(':checked')){ 
					$(this).addClass('checkedFocus'); 
				} 
			})
			.blur(function(){ label.removeClass('focus checkedFocus'); });

		} else if ($(this).is('[type=file]')){
			return $(this).each(function(){
				//if there is default value, copy it or use our default value
				var default_val = 'No file selected...';
				if ($(this).val() != "") default_val = $(this).val();
				
				//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();
					
					/* ADD-ON ***************************** */
					//set this file name to the file
					/* $('input#file_name').val(fileName.split('.')[0]); */
					
					//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">Browse</span>').appendTo(upload);
			//create custom control feedback
			var uploadFeedback = $('<span class="customfile-feedback" aria-hidden="true">'+ default_val +'</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() + 20, //position right side 20px right of cursor X)
						'top': e.pageY - upload.offset().top - $(window).scrollTop() - 3
					});	
				})
				.insertAfter(fileInput); //insert after the input
			fileInput.appendTo(upload);
			});
		
		}
	});

};