/*
 * Slightly changed http://www.appelsiini.net/projects/filestyle
 * http://www.appelsiini.net/download/jquery.filestyle.js
 */

/*global jQuery */

(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>")
                            .css({
                                "width": settings.imagewidth + "px",
                                "height": settings.imageheight + "px",
                                "background": "url(" + settings.image + ") no-repeat",
                                "display": "inline",
                                "position": "absolute",
                                "cursor": "pointer",
                                "overflow": "hidden"
                            });

            var filename = $('<input class="file">')
                             .addClass($(self).attr("class"))
                             .css({
                                 "display": "inline",
                                 "width": settings.width + "px"
                             });

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

            $(self).css({
                        "position": "relative",
                        "height": settings.imageheight + "px",
                        "width": settings.width + "px",
                        "display": "inline",
                        "cursor": "pointer",
                        "opacity": "0.0"
                    });

            $(self).css("margin-left", settings.imagewidth - settings.width + "px");

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

        });


    };

}(jQuery));