/**
		*
		*  File Upload Skinning Prototype
		*
		**/
		
		var FileUploadUI =  function(dUploadButtonEl,dUploadPathEl){
			try {
				this.init.apply(this,arguments);
			} catch(err) {}
		}

		FileUploadUI.prototype = {
			
			init:function(dUploadButtonEl,dUploadPathEl){
				var bEl = this.getEl(dUploadButtonEl);
				var pEl = this.getEl(dUploadPathEl);
				
				if( !bEl.type || bEl.type!='file' || !bEl.form ) return null;
		
				this._pathElementName = dUploadButtonEl.name;		
				this._uploadButtonEl = bEl;
				this._uploadPathEl = pEl;
				
				if( this._uploadPathEl ){
					this._eventListeners = [];
					this.addEvent(bEl,'change',this.syncFilePath);
					this.addEvent(dBtn.form,'submit',this.destruct);
					this.makeAccessible();
				}
			},
			
			getEl:function(el){
				if( typeof(el) === 'string') el = document.getElementById(el);
					return el;
			},
			
			//simple addEvent, buggy and better replace it with your own Event Library
			addEvent:function(el,type,fn){
				el = this.getEl(el);
				
				var sOn = el.attachEvent ? 'on' : '';
				var oThis = this ;
				
				//let scope always be this (FileUploadUI)
				var wfn =  function(e){
				fn.call(oThis  ,e || window.event , el );
				};
				this._eventListeners.push( [el,type,wfn ]   );
				
				if(sOn){
				el.attachEvent( sOn + type , wfn  );
				}else if(el.addEventListener){
				el.addEventListener(type , wfn , false);
				};
				
				return wfn;
			},
			
			removeEvent:function(el,type,wfn){
				el = this.getEl(el);
				
				var sOn = el.attachEvent ? 'on' : '';           
				if(sOn){
					el.dettachEvent( sOn + type , wfn  );
				}else if(el.addEventListener){
					el.removeEventListener(type , wfn , false);
				};
			},
			
			//you need to sync the value when user select a new file path;
			syncFilePath:function(){
				var dPath = this._uploadPathEl;
				var dBtn =  this._uploadButtonEl;   
				dPath.value = dBtn.value.split('/').pop().split('\\').pop();
				if(  typeof(this.onChange) === 'function' ){
					this.onChange.call( this, dPath.value );
				}
			},
			
			onChange:function(){
			},
			
			makeAccessible:function(){
				var dPath = this._uploadPathEl;
				var dBtn =  this._uploadButtonEl;     
				dPath.tabIndex = -1;
				this.addEvent( dPath ,'focus' , this._onPathFocus );
				this.addEvent( dBtn  ,'focus' , this._onBtnFocus );
				this.addEvent( dBtn  ,'blur' , this._onBtnBlur );
				this.addEvent( dBtn ,'keydown' , this._onBtnKeyDown );
				this.makeAccessible = function(){};
			},
			
			_onPathFocus:function(){
				var dBtn =  this._uploadButtonEl;
				dBtn.focus();
				return false;
			},
			
			_onBtnFocus:function(){
				var dPath = this._uploadPathEl;
				dPath.style.backgroundColor = 'none';
			
			},
			
			_onBtnKeyDown:function(e){
			
			if(e.keyCode != 13) return ;
				var dBtn =  this._uploadButtonEl;
				if( dBtn.click ) dBtn.click();
			},
			
			_onBtnBlur:function(e){
				var dPath = this._uploadPathEl;
				dPath.style.backgroundColor = 'none';
			},
			
			destruct : function (){
				alert("Destroying!");
				var dPath = this._uploadPathEl;
				var dBtn =  this._uploadButtonEl;
				dPath.disabled = true ;
				dBtn.style.display = 'none';//focus-not-allowed
				
				for( var i,arg;arg=this._eventListeners[i];i++){
					this.removeEvent.call(this,arg);  
				}
				this._eventListeners = null;
			}      
		}