var FormHandler = Class.create();

FormHandler.prototype = {
	initialize: function(form, options) 
	{
	    var formhandler = this;
	    
	    this.form   = $(form);
	    this.options = options || {};
	    
	    this.validator = this.options.validator || true;
	    this.spellchecker = this.options.spellchecker || true;
	    this.maxlength = this.options.maxlength || true;
		
		($(this.form).getElements().select(function(el) {
				return el.type != 'hidden' &&
        	['input', 'textarea'].include(el.tagName.toLowerCase());
    	})).each(function(el)
    	{
    		if ( el.getAttribute('maxlength') )
    		{
    			maxlengthHandler = new FormHandler.MaxLength(el);
    		}
    		
    		if ( el.getAttribute('resizable') )
    		{
    			resizableHandler = new FormHandler.Resizable(el);
    		}
    	});
	    
    	this.eventFormSubmit = this.formSubmit.bindAsEventListener(this);
	    
    	Event.observe(this.form, "submit", this.eventFormSubmit);
	},
	formSubmit: function(event)
	{
		//alert('FormSubmitting!');
		//Event.stop(event);
	}
}

/*
 * MaxLength Handler
 */

FormHandler.MaxLength = Class.create();
FormHandler.MaxLength.prototype = {
	initialize: function(element)
	{
		this.input = element;
		
		this.maxlength = element.getAttribute('maxlength');
			
		// Find Length Display Span - Class: frm_fieldcount
		this.fieldcount_span = element.parentNode.getElementsBySelector('span.frm_fieldcount')[0];
		
    	this.eventKeyDown = this.updateKeydown.bindAsEventListener(this);
    	this.eventKeyUp = this.updateKeyup.bindAsEventListener(this);
    	
    	this.atMax = this.input.value.length >= this.maxlength ? true : false;
    	
    	Event.observe(this.input, "keydown", this.eventKeyDown);
    	Event.observe(this.input, "keyup", this.eventKeyUp);
    	
    	this.updateStatus();
	},
    updateKeydown: function(event)
    {
		var bypass = [8, 9, 13, 27, 35, 36, 37, 38, 39, 40, 46, 33, 34];

		if ( event.control || event.ctrlKey || event.alt || bypass.include(event.keyCode) )
		{
			return;
		}
		
	    if ( this.input.value.length >= this.maxlength )
	    {
	    	Event.stop(event);
	    	this.input.value = this.input.value.substring(0, this.maxlength);
	    }
	},
	updateKeyup: function(event)
	{
		if ( ( event.control || event.ctrlKey ) && event.keyCode == 86 )
	    {
		    if ( this.input.value.length >= this.maxlength )
		    {
		    	Event.stop(event);
		    	this.input.value = this.input.value.substring(0, this.maxlength);
		    }
     	}
     	
     	this.updateStatus();
	},
	updateStatus: function()
	{
	    if ( this.fieldcount_span )
	    {
	    	this.fieldcount_span.innerHTML = Math.max(0, this.maxlength - this.input.value.length);
	    	
	    	if ( this.input.value.length >= this.maxlength && !this.atMax )
	    	{
	    		this.atMax = true;
	    		Element.addClassName(this.fieldcount_span, 'frm_maxlength_hit');
	    	}
	    	else if ( this.atMax )
	    	{
	    		this.atMax = false;
	    		Element.removeClassName(this.fieldcount_span, 'frm_maxlength_hit');
	    	}
	    }
	}
}

/*
 * Resizable Text Area Handler
 */
FormHandler.Resizable = Class.create();
FormHandler.Resizable.prototype = {
	initialize: function(el)
	{
		this.input = el;
		this.handle = Builder.node('div', { className: 'textarea_resizer', title: 'Drag to resize the text box. Double click to collapse.' } );
		
		this.handle.style.width = this.input.getWidth() + 'px';
		
    	this.eventDragStart = this.dragStart.bindAsEventListener(this);
    	this.eventDragMove = this.dragMove.bindAsEventListener(this);
    	this.eventDragStop = this.dragStop.bindAsEventListener(this);
    	this.eventCollapse = this.collapse.bindAsEventListener(this);

    	Event.observe(this.handle, "mousedown", this.eventDragStart);
    	Event.observe(this.handle, "dblclick", this.eventCollapse);
    	
    	this.input.parentNode.insertBefore(this.handle, this.input.nextSibling);
	},
	collapse: function(e)
	{
		var height = parseFloat(document.defaultView.getComputedStyle(this.input, null).getPropertyValue("height"));
		var percent = 50 / height * 100;
		var scale = new Effect.Scale(this.input, percent, { scaleX: false, scaleContent: false, duration: 0.5, afterFinish: function() {
				this.input.style.height = 50 + 'px';
			}.bindAsEventListener(this) });
	},
	dragStart: function(e)
	{
		this.dragStartY = e.clientY;
		this.dragStartH = parseFloat(document.defaultView.getComputedStyle(this.input, null).getPropertyValue("height"));

    	Event.observe(document, "mousemove", this.eventDragMove);
    	Event.observe(document, "mouseup", this.eventDragStop);
	},
	dragMove: function(e)
	{
		this.input.style.height = Math.max(Math.min(500, this.dragStartH + e.clientY - this.dragStartY), 50) + "px";
	},
	dragStop: function(e)
	{
		Event.stopObserving(document, "mousemove", this.eventDragMove);
		Event.stopObserving(document, "mouseup", this.eventDragStop);
	}
}