var File_Input_Hider = Class.create({
	element: null,									// the file input field we're going to "hide"

	// these styles will be set inline on the elements created below.  

	container_styles: "position: absolute;",
	fake_file_input_styles: "border: 1px solid #454545; float: left; z-index: 1;",
	fake_button_styles: "background: #F8C794; border: 1px solid #EF8A1C; float: left; height: 16px; margin-left: 5px; text-align: center; width: 75px;",
	element_styles: "position: relative; z-index: 2;",
	
	initialize: function(element) {
		this.element = $(element).setStyle(this.element_styles).setOpacity(0);
		this.element.up().setStyle("position: relative;");

		// the first think we need to do is create a few elements which we'll then place into the DOM
		// in the appropriate places.  we'll need a new input field and a div (which will masquerade as
		// our button) which will be placed within another div.  all of that is then added to the container
		// of our file input field.
		
		var position = this.element.positionedOffset();
		var container = new Element("div").setStyle(this.container_styles);
		container.setStyle("top: " + position.top + "px; left: " + position.left + "px;");

		var button = new Element("div").setStyle(this.fake_button_styles).update("Browse");
		var input  = new Element("input", { type: "text" }).setStyle(this.fake_file_input_styles);
		
		// now we'll want to make sure that the width of the fake file input matches the width of
		// the actual file input
		
		input.setStyle("width: " + (this.element.getWidth()-85) + "px");
		container.insert(input).insert(button);
		this.element.up().insert(container);
		
		// finally, we'll want to set up some actions so that changes to the fake input are applied 
		// to the element itself.  we can't do this before now because we wouldn't have the fake
		// input to update.  we also need to change the border color of the element based on some
		// other events, too.
		
		this.element.observe("change",   this.update_fake_input.bindAsEventListener(input));
		this.element.observe("mouseout", this.update_fake_input.bindAsEventListener(input));
		this.element.observe("mouseout",  function() { input.setStyle("border-color: #454545;"); });
		this.element.observe("mouseover", function() { input.setStyle("border-color: #248FFF;"); });
		this.element.observe("focus",     function() { input.setStyle("border-color: #EF8A1C;"); });
	},
	
	update_fake_input: function(event) {
		// remember, this function is bound to the input field that we need to update.  the properties of
		// the event object can tell us what value to put into that input field.
		
		this.value = $(event.target).getValue();
	}
});