/*  MODIFIED by bwilson
 * 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,v 1.3 2009/04/03 21:06:22 bwilson Exp $
 *
 */

(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 + ") 0 0 no-repeat",
                                "background-position": "right",
                                "display": "inline",
                                "float" : "left",
                                "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"
                    });

            if ($.browser.mozilla) {
                if (/Win/.test(navigator.platform)) {
                    $(self).css("margin-left", "-142px");
                } else {
                    $(self).css("margin-left", "-235px");
                };
            } else {
                $(self).css("margin-left", settings.imagewidth - settings.width + "px");
            };

            $(self).bind("change", function() {
                //filename.val($(self).val());
                var lastPartName = $(self).val();
                var lastArr = lastPartName.split("/");
                var lastNumber = lastArr.length;
                // for Windows, which writes pathes differently
    
                if(lastNumber <= 1) {
                	lastArr = document.getElementById("attachment").value.split('\\');
                	lastNumber = lastArr.length;
                }
                // wrapper div
                $("#fileUploader").find("span").hide();
                if(!document.getElementById("confirmFile")) {
                	$("#fileUploader").append("<span id='confirmFile'>" +
	                                          "<img src='/media/image/1/bullet_check.gif'/>"+
	                                          lastArr[lastNumber-1]+
	                                          " | <a id='removeFile' href='javascript: void(0);'>Remove</a></span>");
                
	                $("#removeFile").click(function(){
	                  $("#fileUploader").find("span").remove();
	                  $("#confirmFile").remove();
	                  $("#fileUploader").find("p").append("<span class='inputStatus'>No Document Attached</span>"+
	                                            "<span class='cabinet'>"+
	                                            "<input id='attachment' type='file' class='file' name='attachment'/>"+
	                                            "</span>");
                
	                  $("#attachment").filestyle({
	                    image: "/media/image/1/btn_choose.gif",
	                    imageheight : 35,
	                    imagewidth : 104,
	                    width : 300
	                  });
	                });
                }
            });

        });


    };

})(jQuery);