// © Copyright Kenny Grant 2007 
// Released under the BSD licence

// At the moment this class handles adding placeholder text to input fields 
// and Esc key in fields (clears field)
// Also handles form autocomplete menu using prototype (if form element has an autocomplete attribute)

// We could also deal with form validation, 
// using a regexp test in validate attribute e.g. validate="/.*@.*\..*/"


var FormHelper = {
	respond_to_keys : true,
	
	// Set up our variables 
	// run on window load by function call at end of this file
	// 
	init : function () {
		// Set our default CSS style for placeholder text
		FormHelper.addStyleRule('.placeholder','color:#aaa;');
		
		// attach ourselves as observer on various elements
		FormHelper.attach();
		
		if (FormHelper.respond_to_keys)	
			FormHelper.capture_events();
				
			
	},
	
	// Add the following CSS, at the start of all stylesheets so that it can be overridden
	// By any user CSS
	// Included here so that we don't depend on mc_styles
	addStyleRule: function(property,css) {
		if (Prototype.Browser.IE) 
			document.styleSheets[0].addRule(property, css,0); 
		else
			document.styleSheets[0].insertRule(property+' {'+ css + '}', 0);	
	},
	
	
	// attach ourselves to events on navigation menu items
	//
	//
	attach : function () {
		
		// get a list of all inputs and textarea fields
		var fields = $A(document.getElementsByTagName("input"));
		fields = fields.concat( $A(document.getElementsByTagName("textarea")) );
		
		fields.each(function (input_field) {
			if (FormHelper.is_text_field(input_field)) {
				FormHelper.attach_placeholder_to_object(input_field);
				FormHelper.attach_autocomplete_to_object(input_field);
			}
		});
		
	},


	// IF the object has an autocomplete="" attribute, use it to populate a prototype autocomplete menu
	//
	attach_autocomplete_to_object : function (object) {
		var autocomplete = object.getAttribute("autocomplete");
		
		if (autocomplete && !autocomplete.empty())
			{
			obj_id = object.id;
			autocomplete_id = obj_id + "_autocomplete_list";
			
			// insert the autocomplete list div after the object
			var autocomplete_container = "<div class=\"form_autocomplete\" id=\""+obj_id+"_autocomplete_list\" style=\"display:none\"></div>"
			new Insertion.After(object, autocomplete_container);
			
			// generate an array of possible entries from autocomplete comma delimited string
			var autocomplete_list = autocomplete.split(", ")
			
			// Activate a new autocompleter, with the list given in autocomplete attribute of object
			new Autocompleter.Local(object, autocomplete_id, autocomplete_list, { fullSearch : 'true'});
			}		
	},


	// Attach our placeholder observers to object
	//
	attach_placeholder_to_object : function (object) {
		FormHelper.show_placeholder_for_object(object);
		Event.observe(object,'blur',FormHelper.show_placeholder.bindAsEventListener(FormHelper));
		Event.observe(object,'focus',FormHelper.hide_placeholder.bindAsEventListener(FormHelper));
	},
	
	// Show the placeholder text for a given text field
	//
	show_placeholder_for_object : function (object) {
		var placeholder_text = 	object.getAttribute("placeholder");

		// if the field is empty, or the text is equal to placeholder text
		// apply the placeholder style (via placeholder classname)
		if ( (object.value == placeholder_text) || (object.value.length < 1) )
			{
			object.value = placeholder_text;
			Element.addClassName(object,"placeholder");
			}

	},
	
	// Hide the placeholder text for a given text field
	//	
	hide_placeholder_for_object : function (object) {
		
		if (Element.hasClassName(object,"placeholder"))
			{
			object.value = "";
		  	Element.removeClassName(object,"placeholder");
		    }
	},
	
	// Event observer hook
	show_placeholder : function (event) {
		var object = Event.element(event);
		FormHelper.show_placeholder_for_object(object);
	},
	
	// Event observer hook	
	hide_placeholder : function (event) {
		var object = Event.element(event);
		FormHelper.hide_placeholder_for_object(object);
	},	
	
	// Is the given object a text field we're interested in?
	//
	is_text_field : function (object) {
			return ( 
					(object.getAttribute("type") == "text") ||  
					(object.getAttribute("type") == "search") ||  
					(object.tagName == "TEXTAREA")
					);	
	},

	// At present unused - Safari does some of this for us, so we could ignore it on text fields
	// Doesn't do textareas though, annoyingly
	using_safari : function() {
		return (navigator.userAgent.toLowerCase().indexOf("safari") > 0)	
	},
	
	
	// Watch out for Esc key on input fields
	// 
	capture_events: function() {
	/* watch out for the keyboard events we're interested in */
	Event.observe(document, 'keydown', function(event)
		{ 
		 key = event.which || event.keyCode;	

			switch(key)
			{

			    case Event.KEY_ESC:
					var object = Event.element(event);
					if (object && FormHelper.is_text_field(object))
						{
						object.value = "";
						//Event.stop(event);
						}
				break;

				default:
					//for debug to find keycodes
					//alert("key: " + window.event.keyCode);
				break;
			}

		});

	}
	
	
};


Event.observe(window,'load',FormHelper.init,false);