//TODO load dependencies: browserdetect

if (typeof(AC) == "undefined") AC = {};

AC.decorateSearchInput = function(field, options) {
	
	field = $(field);

	var results = 5;
	var placeholder = '';
	var autosave = '';

	if(options) {
		
		if(typeof(options.results) != 'undefined') {
			results = options.results;
		}
		
		if(typeof(options.placeholder) != 'undefined') {
			placeholder = options.placeholder;
		}
		
		if(typeof(options.autosave) != 'undefined') {
			autosave = options.autosave;
		}
		
	}
	
	
	if(AC.Detector.isWebKit()) {
		field.setAttribute('type', 'search');
		field.setAttribute('results', results);
		
		if(null != placeholder) {
			field.setAttribute('placeholder', placeholder);
			field.setAttribute('autosave', autosave);
		}
		
		//actually this doesn't seem to do any harm anywhere...
	} else {
	
		//but if it's not safari...don't decorate

		var left = document.createElement('span');
		Element.addClassName(left, 'left');
	
		var right = document.createElement('span');
		Element.addClassName(right, 'right');
		
		var reset = document.createElement('div');
		Element.addClassName(reset, 'reset');
		
		var wrapper = document.createElement('div');
		Element.addClassName(wrapper, 'search-wrapper');

		
		var alreadyHasPlaceholder = field.value == placeholder;
		var isEmpty = field.value.length == 0;
		
		if (alreadyHasPlaceholder || isEmpty) {
			field.value = placeholder;
			Element.addClassName(wrapper, 'blurred');
			Element.addClassName(wrapper, 'empty');
		}
	
		var clonedField = field.cloneNode(false);
	
		wrapper.appendChild(left);
		wrapper.appendChild(clonedField);
		wrapper.appendChild(right);
		wrapper.appendChild(reset);
	
		var focus = function() {
			
			var blurred = Element.hasClassName(wrapper, 'blurred');

			//need to check for flag AND placeholder lest somebody need to 
			//search for the placeholder text itself
			if(clonedField.value == placeholder && blurred) {
				clonedField.value = '';
			}
			
			Element.removeClassName(wrapper, 'blurred');
		}
		Event.observe(clonedField, 'focus', focus);
		
		var blur = function() {
			
			if(clonedField.value == '') {
				Element.addClassName(wrapper, 'empty');
				clonedField.value = placeholder;
			}
			
			Element.addClassName(wrapper, 'blurred');
		}
		Event.observe(clonedField, 'blur', blur);
		
		
		var toggleReset = function() {
			
			if(clonedField.value.length >= 0) {
				Element.removeClassName(wrapper, 'empty');
			}
		}
		Event.observe(clonedField, 'keydown', toggleReset);
	
	
		var resetField = function() {
			return( function(evt) {
				
				var escaped = false;
				
				if(evt.type == 'keydown') {
					if(evt.keyCode != 27) {
						return; //if it's not escape ignore it
					} else {
						escaped = true;
					}
				}
				
				clonedField.blur(); //can't change value while in field
				clonedField.value = '';
				Element.addClassName(wrapper, 'empty');
				clonedField.focus();

			})
		}
		Event.observe(reset, 'mousedown', resetField());
		Event.observe(clonedField, 'keydown', resetField());
	
	
		field.parentNode.replaceChild(wrapper, field);
		
	}
}

// this is called Element2 because
// adding methods to Element BLOWS UP IE7 
// for a reason I still haven't got to the bottom
// of.  It appears to be fine though, as long
// as you don't try to add additional methods
// to Element itself.
var Element2 = {};
Element2.Methods = {
	
	getInnerDimensions: function(element) {
    	
		element = $(element);
		var d = Element.getDimensions(element);
		
		var innerHeight = d.height;
		var styleOf = Element.getStyle;
		innerHeight -= styleOf(element, 'border-top-width') ? parseInt(styleOf(element, 'border-top-width'), 10) : 0;
		innerHeight -= styleOf(element, 'border-bottom-width') ? parseInt(styleOf(element, 'border-bottom-width'), 10) : 0;
		innerHeight -= styleOf(element, 'padding-top') ? parseInt(styleOf(element, 'padding-top'), 10) : 0;
		innerHeight -= styleOf(element, 'padding-bottom') ? parseInt(styleOf(element, 'padding-bottom'), 10) : 0;

		var innerWidth = d.width;
		innerWidth -= styleOf(element, 'border-left-width') ? parseInt(styleOf(element, 'border-left-width'), 10) : 0;
		innerWidth -= styleOf(element, 'border-right-width') ? parseInt(styleOf(element, 'border-right-width'), 10) : 0;
		innerWidth -= styleOf(element, 'padding-left') ? parseInt(styleOf(element, 'padding-left'), 10) : 0;
		innerWidth -= styleOf(element, 'padding-right') ? parseInt(styleOf(element, 'padding-right'), 10) : 0;

	    return {width: innerWidth, height: innerHeight};
	},
	
	/*
		Yes, we understand this is a hack. Safari is calculating margins for unpositioned elements
		as the total remaining viewport width
	*/
	getOuterDimensions: function(element) {
		element = $(element);
		var clone = element.cloneNode(true);
		
		document.body.appendChild(clone);
		Element.setStyle(clone, { position: "absolute", visibility: "hidden" });
		var d = Element.getDimensions(clone);
		
		var outerHeight = d.height;
		var styleOf = Element.getStyle;
		outerHeight += styleOf(clone, 'margin-top') ? parseInt(styleOf(clone, 'margin-top'), 10) : 0;
		outerHeight += styleOf(clone, 'margin-bottom') ? parseInt(styleOf(clone, 'margin-bottom'), 10) : 0;

		var outerWidth = d.width;
		outerWidth += styleOf(clone, 'margin-left') ? parseInt(styleOf(clone, 'margin-left'), 10) : 0;
		outerWidth += styleOf(clone, 'margin-right') ? parseInt(styleOf(clone, 'margin-right'), 10) : 0;

		Element.remove(clone);
		
		return {width: outerWidth, height: outerHeight};
	},
	
	removeAllChildNodes: function(element) {
		element = $(element);
		if(! element) { return; }
		
		while (element.hasChildNodes()) {
	  		element.removeChild(element.lastChild);
		}
	}
	
};

Object.extend(Element, Element2.Methods);


// Custom additions to the Effect namespace in scriptaculous

Effect.Wait = Class.create();
Object.extend(Object.extend(Effect.Wait.prototype, Effect.Base.prototype), {
  initialize: function(element) {
    this.element = $(element);
    if(!this.element) throw(Effect._elementDoesNotExistError);    
	var options = Object.extend({}, arguments[1] || {});
    this.start(options);
  }
});