/*
 * Style File - jQuery plugin for styling file input elements
 *  
 * Copyright (c) 2007-2008 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
 *
 * Better browser consistency by Brian Litzinger
 * 	 Button is sized based on font size, positioned by percentage, and clipped by the wrapper div. Should fill entire clickable region.
 *	 Tested in FF 2 & 3, IE 6 7 & 8, Safari 3 & 4
 *
 * Revision: $Id: jquery.filestyle.js 303 2008-01-30 13:53:24Z tuupola $
 * Revision: $Id: jquery.filestyle.js 303 2009-06-8 litzinger $
 *
 */

(function($) {
    
    $.fn.filestyle = function(options) {
                
        /* TODO: This should not override CSS. */
        var settings = {
            width : 250,
			backgroundPosition: "right",
            display: "inline",
            position: "absolute",
            overflow: "hidden",
			css: {}
        };
                
        if(options) {
            $.extend(settings, options);
        };
                        
        return this.each(function() {
            
            var self = this;
            var wrapper = $("<div>")
                            .css({
                                "width": settings.imagewidth + "px",
                                "height": settings.imageheight + "px",
                                "background": "url(" + settings.image + ") 0 0 no-repeat",
                                "background-position": settings.backgroundPosition,
                                "display": settings.display,
                                "position": settings.position,
                                "overflow": settings.overflow
                            }).css(settings.css);
                            
            var filename = $('<input class="file">')
                             .addClass($(self).attr("class"))
                             .css({
                                 "display": "inline",
                                 "width": settings.width + "px"
                             });

            $(self).after(filename);
            $(self).wrap(wrapper);

			var fontsize = Math.floor(settings.imagewidth / 4);
			var buttonwidth = settings.width * 1.5;

            $(self).css({
                        "position": "relative",
                        "height": parseInt(settings.imageheight + 10) + "px",
                        "width": buttonwidth + "px",
                        "display": "block",
                        "cursor": "pointer",
                        "opacity": "0",
						"font-size": fontsize + "px",
						"margin-top": "-5px"
                    });

            if ($.browser.mozilla) {
                if (/Win/.test(navigator.platform)) {
					$(self).css("margin-left", "-280%");
                } else {
					$(self).css("margin-left", "-360%");   
                };
            } else if($.browser.msie && $.browser.version <= 7.0) {
				// Oh IE 6 & 7, why must you suck so much
				$(self).css('font-size', parseInt(Math.floor(fontsize / 1.5)) +'px').css("margin-left", "-45%");
			}

            $(self).bind("change", function() {
                filename.val($(self).val());
            });
      
        });
        

    };
    
})(jQuery);