$.fn.fileinput = function(){
	var buttonText = arguments.length ? arguments[0] : "...";
	
	return $(this).each(function(){
		
		var theProxy = $('<input type="text" class="ui-button ui-fileinput-proxy ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false" value="'+buttonText+'" />')
			.insertBefore($(this)),

		theInput = $(this)
			.addClass('ui-fileinput'),
			
		theWrapper = $('<div></div>').css({
				position: 'relative',
				overflow: 'hidden',
				width: theProxy.outerWidth(true) + 'px',
				height: theProxy.outerHeight(true) + 'px'
			})
			.insertBefore(theInput)
			.append(theProxy)
			.append(theInput);		
		
	});
};

$('.ui-fileinput-proxy').live('mousemove', function(e){
	var proxy = $(this);
	var input = proxy.next('.ui-fileinput');
	input.css({
		'left': (e.pageX - proxy.offset().left - input.outerWidth() + 20) +'px', //position right side 20px right of cursor X)
		'top': (e.pageY - proxy.offset().top - 3) +'px'
	}); 
})
.live('mouseover', function(){ $(this).addClass('ui-state-hover'); })
.live('mouseout', function(){ $(this).removeClass('ui-state-hover'); })
.live('focus', function(){ $(this).addClass('ui-state-focus'); })
.live('blur', function(){ $(this).removeClass('ui-state-focus'); });

$('.ui-fileinput').live('mousemove', function(e){
	var input = $(this);
	var proxy = input.prev('.ui-fileinput-proxy');
	input.css({
		'left': (e.pageX - proxy.offset().left - input.outerWidth() + 20) +'px', //position right side 20px right of cursor X)
		'top': (e.pageY - proxy.offset().top - 3) +'px'
	}); 
})
.live('mouseover', function(){ 
	var input = $(this);
	var proxy = input.prev('.ui-fileinput-proxy');
	proxy.addClass('ui-state-hover'); 
})
.live('mouseout', function(){
	var input = $(this);
	var proxy = input.prev('.ui-fileinput-proxy');
	proxy.removeClass('ui-state-hover');
})
.live('focus', function(){
	var input = $(this);
	var proxy = input.prev('.ui-fileinput-proxy');
	proxy.addClass('ui-state-focus'); 
	input.data('val', input.val());
})
.live('blur', function(){ 
	var input = $(this);
	var proxy = input.prev('.ui-fileinput-proxy');
	proxy.removeClass('ui-state-focus');
	input.trigger('checkChange');
})
.live('checkChange', function(){
	var input = $(this);
	var proxy = input.prev('.ui-fileinput-proxy');
	if(input.val() && input.val() != input.data('val')){
		input.trigger('change');
	}
})
.live('change',function(){
	var input = $(this);
	var proxy = input.prev('.ui-fileinput-proxy');
	//get file name
	var fileName = input.val().split(/\\/).pop();
	//get file extension
	var fileExt = 'customfile-ext-' + fileName.split('.').pop().toLowerCase();
	//update the feedback
	proxy.val(fileName); //set feedback text to filename
})
.live('click', function(){ //for IE and Opera, make sure change fires after choosing a file, using an async callback
	var input = $(this);
	var proxy = input.prev('.ui-fileinput-proxy');
	input.data('val', input.val());
	setTimeout(function(){
		input.trigger('checkChange');
	},100);
});