(function($) {
	$.fn.filestyle = function(options) {

		var settings = {
			width: 250,
			contclass: 'inputFile',
			buttontext: 'Browse',
			height: 20
		};

		if(options) {
			$.extend(settings, options)
		};

		if ( this.parent().parent().hasClass('inputFile') == false)
		return this.each(function() {

			var self = this;
			var wrapper = $("<div>")
						.css({
							height: settings.height,
							background: "url(" + settings.image + ") 0 0 no-repeat",
							position: "relative",
							float: "left",
							overflow: "hidden",
							textAlign: "center"
						});

			var filename = $('<input class="file">')
							.addClass("text")
							.css({
								width: settings.width,
								float: "left"
							})
							.attr('readonly', 'readonly');

			$(self).wrap('<div class="' + settings.contclass + '"></div>');

			$(self).before(filename);

			$(self).wrap(wrapper);

			var fileButton = $('<a href="javascript:void(0);"' + '><span>' + settings.buttontext + '</span></a>');

			$(self).before(fileButton)
				.hover(function() {
						fileButton.addClass("sfhover")
					},function(){
						fileButton.removeClass("sfhover")
			 	})
				.css({
					position: "absolute",
					height: settings.height,
					cursor: "pointer",
					right: 0,
					margin: 0,
					opacity: 0
				})
				.bind("change", function() {
					filename.val( $(self).val() )
				})
		})
	}
})(jQuery);

jQuery(document).ready(function(){
	jQuery("input[type=file]").filestyle({
		width: 130
	});
});

/*
		var settings = {
			width: 250,
			contclass: 'inputFile',
			buttontext: 'Browse',
			height: 20
		};
*/