/* 
 * SI Files (0.1)
 * by Sagie Maoz (n0nick.net)
 * n0nick@php.net
 *
 * A jQuery implementation of the SI Files JS lib by Shaun Inman
 * See <http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom>
 *
 * Copyright (c) 2009 Sagie Maoz <n0nick@php.net>
 * Licensed under the GPL license, see http://www.gnu.org/licenses/gpl-3.0.html 
 *
 *
 * NOTE: This script requires jQuery to work.  Download jQuery at www.jquery.com
 *
 */

(function($) {
	$.fn.si_files = function(options)
	{
		
		var settings = {
			pointer:		true,
			width:			150,
			button:			{
				src:	'file_choose.gif',
				width:	79,
				height:	18
			},
			label:			true,
			label_class:	'file_label',
			button_class:	'file_button',
			cabinet_class:	'file_cabinet',
			debug:			false
		};
		if (options)
		{
			$.extend(settings, options);
		}
		
		return this.each(function()
		{
			
			// file input CSS
			var name = $(this).attr('name_alt');
			var opacity = settings.debug? '0.5' : '0';
			$(this).css({
				'position': 	'relative',
				'z-index': 		'10',
				'width':		'auto',
				'opacity':		opacity,
		    	'-moz-opacity':	opacity,
				'filter':		'progid:DXImageTransform.Microsoft.Alpha(opacity='+opacity+')'
			});
			if (settings.pointer)
			{
				$(this).css('cursor', 'pointer');
			}
			
			// file input wrapper (cabinet)
			$(this).wrap('<div class="'+settings.cabinet_class+'"></div>');			
			var cabinet = $(this).parent()[0];
			
			/*
			$(cabinet).css({
				'height':			'75px',
			    'display':			'block',
			    'overflow':			'hidden'
			});
			*/
			$(cabinet).css({
			    'display':			'block',
			    'overflow':			'hidden'
			});
			if (settings.pointer)
			{
				$(cabinet).css('cursor', 'pointer');
			}
			cabinet.file_input = $(this);
			
			// calculate cabinet's dimensions
			cabinet.min_x 	= $(cabinet).offset()['left'];
			cabinet.min_y 	= $(cabinet).offset()['top'];
			cabinet.file_w  = $(this).width();
			cabinet.file_h  = $(this).height();
			
			$(cabinet).mousemove(function(e)
			{
				this.file_input.css('left', e.clientX - this.min_x - (this.file_w-30));
				this.file_input.css('top',  e.clientY - this.min_y - (this.file_h/2));
			});
			
			if (settings.label)
			{
				
				
				$(cabinet).append('<span class="'+settings.label_class+'"></span>');
				this.label = $(cabinet).children('span.'+settings.label_class);
				this.label.css({
					'display':			'block',
					'background':		'#FFFFFF',
					'line-height':		settings.button.height +'px',
					'height':			'15px',
					'width':			'161px',
					'padding-left':		'5px',
					'padding-bottom':	'3px',
					'vertical-align':	'middle',
					'overflow':			'hidden',
					'position':			'relative',
					'top':				'-30px',
					'z-index':			'1',
					
				});
				
				//Para poner un boton
				$(cabinet).append('<div class="align_right"></div>');
				$(cabinet).children('div.align_right').append('<input type="button" class="'+settings.button_class+'" value="'+name+'" />');
				//$(cabinet).children('div.align_right input.'+settings.button_class).css({'margin-top':'-16px'});
				
				$(this).change(function(e)
				{
					this.label.text($(this).val());
				});
			}
		
		});
    };
})(jQuery);