if (typeof Effect == 'undefined') 
	throw("protodual.js requires including script.aculo.us' effects.js library!");
	
var protostyle = Class.create();
protostyle.prototype = {


initialize: function(container, options) {
	 this.contain = $(container);
	 
	 	 this.options = Object.extend({
			placeholder: 'Logga in',
			isPassword: false
			
		}, options || {});
		
	 this.decorateField();
	},

	decorateField: function(){
	
		this.options.placeholder = this.contain.value;
		this.standIn = new Element("input");
		this.contain.parentNode.replaceChild(this.standIn, this.contain);
		
		var left = new Element("span", {'class': "left"});
		var right = new Element("span", {'class': "right"});
		
		this.wrapper = new Element("div", {'class': "wrapper"});
		
		
		if(this.options.isPassword)
		{
			this.repeater = new Element("div", {'class': "repeater"});
		}
		
		var alreadyHasPlaceholder = this.contain.value == this.options.placeholder;
		var isEmpty = this.contain.value.length == 0;
		
		if (alreadyHasPlaceholder || isEmpty) {
			this.contain.value = this.options.placeholder;
			this.wrapper.addClassName('blurred');
			this.wrapper.addClassName('empty');
			
			
		}
		
		this.contain.setAttribute('autocomplete', 'off');
		
		this.wrapper.appendChild(left);
		this.wrapper.appendChild(this.contain);
		this.wrapper.appendChild(right);
		
		if(this.options.isPassword)
		{
			this.wrapper.appendChild(this.repeater);
			var bindToggleReset = this.presser.bindAsEventListener(this);
			Event.observe(this.contain, 'keyup', bindToggleReset);
		}
		
		var bindOnFocus = this.focus.bindAsEventListener(this);
		Event.observe(this.contain, 'focus', bindOnFocus);
		
		//Bind Blur Function for Search Field
		var bindOnBlur = this.blur.bindAsEventListener(this);
		Event.observe(this.contain, 'blur', bindOnBlur);	
		
		this.standIn.parentNode.replaceChild(this.wrapper, this.standIn);
	},
	presser: function() {
		
		this.repeater.style.width = (10 * this.contain.value.length) + "px";
	},
	focus: function() {
				
			var blurred = Element.hasClassName(this.wrapper, 'blurred');
			
			
			//need to check for flag AND placeholder lest somebody need to 
			//search for the placeholder text itself
			if((this.contain.value == this.options.placeholder) && blurred) {
			

				this.contain.value = '';
				
				
				
			}
			Element.removeClassName(this.wrapper, 'blurred');
			if(this.options.isPassword)
			{	
				this.contain.style.textIndent = "-10000px";
			}
			
			
			
			
		},
		
	blur: function() {
	

				
			if(this.contain.value == '') {
				
				Element.addClassName(this.wrapper, 'empty');
				this.contain.value = this.options.placeholder;
				if(this.options.isPassword)
				{	
				this.contain.style.textIndent = "0px";
				}
				
			}
			Element.addClassName(this.wrapper, 'blurred');
			
		}


}