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

path = '';

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)
	{
		setStyle = (navigator.appVersion.indexOf("MSIE")!=-1) ? 'cssText' : 'style';
		this.setStyle(span, 'position:relative;border:1px solid transparent;');
		this.setStyle(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.setStyle(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.setStyle(link, 'position:absolute;top:-2px;left:' + linkLeft + 'px;');
		if (this.textOnly === null) {
			var img = document.createElement('img');
			img.src = this.imgPath;
			img.className = 'upload';
			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);
	},
	setStyle : function (object, styleText) { 
		if( object.style.setAttribute ) { object.style.setAttribute("cssText", styleText ); } 
		else { object.setAttribute("style", styleText ); } 
	}
}