/* PARAUGS
<div id="filech" style="width:100px; height:16px; border:solid 1px; overflow:hidden;">i am a file chooser</div>
<script type="text/javascript">
    $(function() {
        $('#filech').file().choose(
            function(e, input) {
                //alert("you choose: " + input.val());
            }
        );
    });
</script>
*/

jQuery.fn.choose = function(f) {
	$(this).bind('choose', f);
};


jQuery.fn.file = function() {
	return this.each(function() {
		var btn = $(this);
		var pos = btn.offset();
								
		function update() {
			pos = btn.offset();
			file.css({
				'width': btn.width(),
				'height': btn.height()
			});
		}

		btn.mouseover(update);
                $(this).css({
                    'display':'block',
                    'position':'relative'
                });
		var file = $('<div></div>').appendTo(this).css({
			'position': 'absolute',
			'overflow': 'hidden',
			'-moz-opacity': '0',
			'filter':  'alpha(opacity: 0)',
			'opacity': '0',
			'z-index': '2',
                        'top' : '0px',
                        'left' : '0px',
                        'width' : '100%',
                        'height' : '100%'
		});
                var input = $('<input type="file" name="fails">').appendTo(file);
                input.change(function(e) {
                        input.unbind();
                        input.detach();
                        btn.trigger('choose', [input]);
                        reset();
                });
                

//		function placer(e) {
//			file.css('margin-left', e.pageX - pos.left - offset.width);
//			file.css('margin-top', e.pageY - pos.top - offset.height + 3);					
//		}

		function redirect(name) {
			file[name](function(e) {
				btn.trigger(name);
			});
		}

//		file.mousemove(placer);
//		btn.mousemove(placer);

		redirect('mouseover');
		redirect('mouseout');
		redirect('mousedown');
		redirect('mouseup');

		var offset = {
			width: file.width() - 25,
			height: file.height() / 2
		};

		update();
	});
};