var PasswordMask = function(displayField, passwordField, textResizer, debug){

    //Store a reference to this to workaround loss of scope in closures and event handlers
    var _self = this;
    
    //ms before an entered character will be masked
    this.delay=700;

    //holder for timeout object
    this._timeout = null;

    if(!PasswordMask._initialized){

        /**
         * called on each keystroke to syncronise the two fields and if nescesary, trigger 
         * the masking action
         */
        PasswordMask.prototype.updatePassword = function(event){
                
        	 	_self.triggerMask();

                var oldVal = _self.password.attr("value");
                var len = oldVal.length;

                var newVal = _self.display.attr("value");
                //var oldChar = newVal.substring(0,1);the
                var newChar = newVal.substring(newVal.length-1);

                var keyCode = event.keyCode;

                //console.info("key down on %s", keyCode);
                
                switch(keyCode){
                    //backspace
                    case 8:
                    	len = _self.backspace();
                        break;
                    default:
                        _self._timeout = setTimeout(_self._mask, _self.delay);
                        break;
                }

                _self.setLengths();
            }

            /**
             * If there is a pending timeout then trigger it immediately
             */
            PasswordMask.prototype.triggerMask = function(event){
            	 
                if(_self._timeout!=null){
                    clearTimeout(_self._timeout);
                }    
                _self._mask();
                
            }
             
             /**
              * clear the fields
              */
             PasswordMask.prototype.clearFields = function(){
                   this.display.attr("value","");
                   this.password.attr("value","");
             }
              
             /**
              * Handle a backspace action
              */
              PasswordMask.prototype.backspace = function(){
            	  var oldVal = _self.password.attr("value");
            	  
            	  var len = oldVal.length-1;
            	  var val = oldVal.substring(0,len);
                  
            	  _self.password.attr("value", val);
                  return len;
              }

            /**
             * Copy the char from display to password field
             */
            PasswordMask.prototype._mask = function(){

                var pVal = _self.password.attr("value");
                var dVal = _self.display.attr("value");
                //var newChar = dVal.substring(0,1);
                pVal+=dVal;
                
                //console.info("Masking %s", newChar);
                
                _self.display.attr("value","");
                _self.password.attr("value",pVal);

                _self.setLengths();
                _self._timeout=null;
            }
             
            /**
             * Stop observing all events
             * 
             * should be called before manually removing the password mask
             */ 
            PasswordMask.prototype.stop = function(){
            	this.display.unbind("keydown");
            	this.password.unbind("focus");
            }
             
            /**
             * Check if the display field now contains multiple charecters in which case the user
             * has pasted multiple charecters in and they must all be immediately masked
             */ 
             PasswordMask.prototype._checkForPaste = function(event){
            	 var ret = false;
            	 if (_self.display.attr("value").length > 1){
            		 _self.triggerMask();
            		 ret = true;
            	 }
            	 
            	 return ret;
             }

          PasswordMask.prototype._initialized = true;

    }
    				
    this.display = displayField;
    this.password = passwordField;
    this.setLengths = textResizer;

    this.display.bind("keydown",_self.updatePassword);
    /*this.display.bind("mousedown", _self.checkForPaste);*/
     
    /* if the browser has a saved password when the page is loaded then the field will need to be resized 
     * immediately after it is filled. Unfortunately this happens after the dom ready event.
     * Instead we will set a timeout with a 1ms delay here which should delay the call long 
     * enough to allow the browser to do its thing
     */
    setTimeout(this.setLengths, 1);

}