/*
 * 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
 *
 * Revision: $Id: jquery.filestyle.js 303 2008-01-30 13:53:24Z tuupola $
 *
 */

(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 imgWidth = settings.imagewidth;
            var imgHeight = settings.imageheight;
            var topMarge = "2px";
            var leftMarge = "6px";
            if (($.browser.msie) && ($.browser.version < 8)) {
                var imgWidth = settings.imagewidth;
                var imgHeight = "25";
                var topMarge = "-1px";
                var leftMarge = "6px";   
            }
            var wrapper = $("<div>")
                            .css({
                                "width": settings.imagewidth + "px",
                                "height": imgHeight + "px",
                                //"background": "url(" + settings.image + ") 0 0 no-repeat",
                                "background": "url(../img/Contact/Brows.png) 0 0 no-repeat",
                                "background-position": "right",
                                "display": "inline",
                                "position": "absolute",
                                "overflow": "hidden",
                                "margin-top": topMarge,
                                //"cursor": "pointer",
                                "margin-left": "6px"
                            });

            var filename = $('<input class="file">')
                             .addClass($(self).attr("class"))
                             .css({
                                 "display": "inline",
                                 "width": settings.width + "px",
                                 "background-color": "#3C332E",
                                 "border-width": "0px",
                                 "height": "20px",
                                 "color": "#ffffff",
                                 "padding-left":"5px"
                             });

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

            $(self).css({
                "position": "relative",
                "width": settings.width + "px",
                "height": imgHeight + "px",
                //"width": "1px",
                //"height": "1px",
                "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");
                };
                filename.css('margin-top', '3px');
                filename.css('margin-bottom', '3px');
            }
            else if ($.browser.webkit) {
                filename.css('margin-top', '3px');
                filename.css('margin-bottom', '3px');
            } else {
                //settings.width = settings.width - 6;
                //filename.css('width', settings.width + 'px');
                $(self).css("margin-left", settings.imagewidth - settings.width + "px");
            };

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

        });


    };

})(jQuery);