/*
Script: inputbox.js
	InputBox - show/hide text in input box on focus/blur

License:
	MIT-style license.

Copyright:
	Copyright (c) 2009 [cime](http://specialec.net/).
*/

(function($){ 
	this.InputBox = new Class({
		Implements: Options,
		
		element: null,
		
		options: {
			text: 'Search...',
			url: false,
			method: 'post'
		},
		
		initialize: function(element, options){
			this.setOptions(options);
			this.element = element;
			
			if(this.options.text == 'Search...' && this.element.get('value')){
				this.options.text = this.element.get('value');
			}
			
			this.element.addEvents({
				'focus': this.focus.bind(this),
				'blur': this.blur.bind(this)
			});
			
			this.reset();
			
			if(this.options.url != false){
				this.createForm();
			}
		},
		
		createForm: function(){
			var form = new Element('form', {
				'method': this.options.method,
				'action': this.options.url,
				'styles': {
					'padding': '0',
					'margin': '0',
					'border': '0'
				}
			});
			
			form.wraps(this.element);
		},
		
		focus: function(){
			if(this.element.get('value') == this.options.text){
				this.element.set('value', '');
			}
		},
		
		blur: function(){
			if(this.element.get('value') == ''){
				this.element.set('value',  this.options.text);
			}
		},
		
		reset: function(){
			this.focus();
			this.blur();
		}
	});
})(document.id);