/**
* Style File - jQuery plugin for styling file input elements
*
* Copyright (c) 2007-2009 Mika Tuupola
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Based on work by Shaun Inman
* http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
*
*/

/* *
 * Exemplo:
 * 	$js .= "\$j(\"input[type=file]\").filestyle({ "; 
 * 	$js .= "    image       : '".__PATH_WEB__."/framework/images/default/general/button.gif',      ";
 * 	$js .= "    imageheight : 22,      ";
 * 	$js .= "    imagewidth  : 82,      ";
 * 	$js .= "    width       : 250      ";
 * 	$js .= "}); ";
 * */

(function($) 
{ 
    $.fn.filestyle = function(options) 
    {          
        /* TODO: This should not override CSS. */
        var settings = 
        {
            "width" : "250"
        };
                
        if(options) 
        {
            $.extend(settings, options);
        }
                        
        return this.each(function() 
        {
            
            var self = this;
            var wrapper = $('<div id="moot">')
                            .css({
                                "width": "120px",
                                "background": "#f6f6f6 url(" + settings.image + ") 0 18px",
                                "background-position": "right",
                                "display": "inline",
                                "position": "absolute",
                                "overflow": "hidden",
                            	"font": "normal xx-small verdana, sans-serif",
                            	"height": "18px",
                            	"margin-left": "5px",
                            	"padding": "0",
                            	"vertical-align": "middle",
                                "border": "1px solid #bbb",
	                        	"border-right": "1px solid #777",
	                        	"border-bottom": "1px solid #555",
	                        	"background-position": "0 18px", 
	                        	"z-index": "1"
                            });
            
            var filename = $('<input class="file" id="xxx" style="z-index: 300;">')
                             .addClass($(self).attr("class"))
                             .css({
                                 "display": "inline",
                                 "width": settings.width + "px",
                                 "float": "center",
                                 "z-index": "3"
                             });
            
            var label = $('<label onclick="$j(\'#moot\').click();" style="margin-left: 10px; z-index: 2; background: transparent; position: absolute; margin: 5px 10px 0px 10px;">Maron RLZ !!!</label>');
//            $(label).click($(self).click());

            $(self).after(label);
// 
            $(self).before(filename);
//            wrapper.wrap('teste');
            
            $(self).wrap(wrapper);
            
            $(self).css({
                        "position": "relative",
                        "height": settings.imageheight + "px",
                        "width": settings.width + "px",
                        "display": "inline",
                        "cursor": "pointer",
                        "opacity": "0.0"
                    });
 
            if ($.browser.mozilla) 
            {
                if (/Win/.test(navigator.platform)) 
                {
                    $(self).css("margin-left", "-142px");
                } 
                else 
                {
                    $(self).css("margin-left", "-168px");
                }
            } 
            else 
            {
                $(self).css("margin-left", settings.imagewidth - settings.width + "px");
            }
 
            $(self).bind("change", function() 
            {
                filename.val($(self).val());
            });
      
        });
        
 
    };
    
})(jQuery);