/**
 * Styling File Inputs - AKA 'FileUI'
 * @author: Marc Grabanski
 * @sdoc: http://marcgrabanski.com/code/style-file-input
 */




path =  null;
	var FileUI = 
{
	
		disableText : false,
	
		imgPath : path+'browse.gif',
	
		imgPathOver : null,
	
		textOnly : null,
	
		spanClass : 'fileInput',
	
	
		init : function () 
	
		{
	

	
			var spans = document.getElementsByTagName('span');
	
		for (var i = 0; i < spans.length; i++)
	
		{
			
				if (spans[i].className.indexOf(this.spanClass) != -1)
	
			{
				
					this.style( spans[i], spans[i].getElementsByTagName('input')[0] );


				}
		
			}


				
		},
	
		style : function (span, input)
	
		{
		
			setFUStyle = (navigator.appVersion.indexOf("MSIE")!=-1) ? 'cssText' : 'style';
			this.setFUStyle(span, 'position:relative;border:1px solid transparent;');
			this.setFUStyle(input, 'width:260px;position:absolute;top:0;left:0;z-index:5;-moz-opacity:0;filter:alpha(opacity:0);opacity:0;');

	
		var txtInput = document.createElement('input');

			txtInputWidth = 180;
		
			txtInput.type = 'text';
		
			this.setFUStyle(txtInput, 
'width:' + txtInputWidth + 'px;z-index:10');
			input.onchange = function () 
			{
			
				txtInput.value = input.value;

			}
			txtInput.disabled = 'disabled';
			span.appendChild(txtInput);
			var link = document.createElement('a');
			linkLeft = txtInputWidth + 8;
			this.setFUStyle(link, 'position:absolute;top:0px;left:' + linkLeft + 'px;');
			if (this.textOnly === null) 
			{
				var img = document.createElement('img');
				img.src = this.imgPath;
				link.appendChild(img);
				if (this.imgPathOver != null) 
				{
					input.onmouseover = function () { img.src = FileUI.imgPathOver; }

					input.onmouseout = function () { img.src = FileUI.imgPath; }

				}
		
			} 
			else 
			{

				link.innerHTML = this.textOnly;

				link.href = "#";
				link.onclick = function () { return false; }
				input.onmouseover = function () { link.className = 'over'; }
				input.onmouseout = function () { link.className = ''; }

			}
	
		span.appendChild(link);
	
		},
		styleold : function (span, input)
	
		{
		
			setFUStyle = (navigator.appVersion.indexOf("MSIE")!=-1) ? 'cssText' : 'style';
			this.setFUStyle(span, 'position:relative;border:1px solid transparent;');
			this.setFUStyle(input, 'width:260px;position:absolute;top:0;left:0;z-index:5;-moz-opacity:0;filter:alpha(opacity:0);opacity:0;');

	
		var txtInput = document.createElement('input');

			txtInputWidth = 180;
		
			txtInput.type = 'text';
		
			this.setFUStyle(txtInput, 
'width:' + txtInputWidth + 'px;position:absolute;top:0px;left:0px;z-index:10');
			input.onchange = function () 
			{
			
				txtInput.value = input.value;

			}
			txtInput.disabled = 'disabled';
			span.appendChild(txtInput);
			var link = document.createElement('a');
			linkLeft = txtInputWidth + 8;
			this.setFUStyle(link, 'position:absolute;top:0px;left:' + linkLeft + 'px;');
			if (this.textOnly === null) 
			{
				var img = document.createElement('img');
				img.src = this.imgPath;
				link.appendChild(img);
				if (this.imgPathOver != null) 
				{
					input.onmouseover = function () { img.src = FileUI.imgPathOver; }

					input.onmouseout = function () { img.src = FileUI.imgPath; }

				}
		
			} 
			else 
			{

				link.innerHTML = this.textOnly;

				link.href = "#";
				link.onclick = function () { return false; }
				input.onmouseover = function () { link.className = 'over'; }
				input.onmouseout = function () { link.className = ''; }

			}
	
		span.appendChild(link);
	
		},

		setFUStyle : function (object, styleText) 
		{
			if( object.style.setAttribute ) { object.style.setAttribute("cssText", styleText ); }
	 
		else { object.setAttribute("style", styleText ); }
	 
	}

	}