/*
 * 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.extend({
        triggerChange: function()
        {
            $("#" + $(this).id + "Substitute").val($(this).val());
            var settings = $(this).data('settings');
            if (settings && settings.autoUpload && settings.autoUploadCallback != null)
                settings.autoUploadCallback.call();
        }
    });

    $.fn.filestyle = function(options)
    {
        /* TODO: This should not override CSS. */
        var settings = {
            autoUpload: false,
            autoUploadCallback: null,
            width: 192,
            imageheight: 28,
            imagewidth: 87,
            defaultText: "Click Browse to select file"
        };

        if (options)
        {
            $.extend(settings, options);
        };

        return this.each(function()
        {
            $(this).data('settings', settings);

            var self = this;
            var wrapper = $("<a>")
                            .addClass("formBtn")
                            .css({
                                "width": settings.imagewidth + "px",
                                "height": settings.imageheight + "px",
                                "display": "inline",
                                "position": "absolute",
                                "overflow": "hidden",
                                "right": "0px",
                                "top": "-2px"
                            });

            var filename = $('<input disabled="disabled" class="file">')
                             .addClass($(self).attr("class"))
                             .css({
                                 "display": "inline",
                                 "width": settings.width + "px"
                             })
                             .val(settings.defaultText)
                             .attr("id", $(this).id + "Substitute");

            $(self).before(filename);
            $(self).wrap(wrapper);

            $(self).parent().prepend("<span style='width: 75px; position: absolute; text-align: center;'>Browse</span>");

            $(self).css({
                "position": "relative",
                "height": settings.imageheight + "px",
                "width": (settings.width - 15) + "px",
                "display": "inline",
                "cursor": "pointer",
                "opacity": "0.0",
                "outline": "none"
            });

            if ($.browser.mozilla)
            {
                if (/Win/.test(navigator.platform))
                {
                    $(self).css("margin-left", "-80px");
                } else
                {
                    $(self).css("margin-left", "-136px");
                };
            } else
            {
                $(self).css("margin-left", settings.imagewidth - settings.width + "px");
            };

            //            $(self).bind(($.browser.msie ? "click" : "change"), function()
            //            {
            //                filename.val($(self).val());
            //                if (settings.autoUpload && settings.autoUploadCallback != null)
            //                    settings.autoUploadCallback.call();
            //            });
        });


    };

})(jQuery);

