/*
* 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 S4() {
   return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
function guid() {
   return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}

(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 name='fileStyleWrapper' id='fileStyleWrapper' class='fileStyleWrapper'>")
							.css({
								"width": settings.imagewidth + settings.width+ "px",
								"height": settings.imageheight + "px",
								"background": "url(" + settings.image + ") 0 0 no-repeat",
								"background-position": settings.width+10 + "px 50%",
								"display": "inline-block",
								"position": "relative",
								"overflow": "hidden"
							});

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

			$(self).addClass("button " + className);			
            $(self).before(filename);

            /*Insert buttonWrapper which will allow us to display a transparent image and set the background colour*/
            var buttonWrapper = $("<div class='buttonWrapper buttonWrapper" + className + "'>");
            $("." + className).wrapAll(buttonWrapper);
            $(".buttonWrapper" + className).wrapAll(wrapper);
            
			$(self).css({
				"position": "relative",
				"height": settings.imageheight + "px",
				/*"width": "100px",*/
                "width": settings.width + "px",
				"float":"right",
				"display": "inline",
				"cursor": "pointer",
				"opacity": "0.0"
			});            

            /*The browse button doesn't work in ie unless the clickable area is repositioned behind it*/
            /*if ($.browser.msie) {
                alert("in $.browser.msie");*/
                //alert($.browser.version);
                $(self).css("top", "-40px");
            /*};*/

            if(navigator.userAgent.indexOf('Mac') > 0 && navigator.userAgent.indexOf('Firefox') > 0) {
                $(self).css("top", "0");
            }

			if ($.browser.mozilla) {
				if (/Win/.test(navigator.platform)) {
					$(self).css("margin-left", "-102px");
				} else {
					$(self).css("margin-left", "-168px");
				};
			};

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

		});


	};

})(jQuery);