//TODO load dependencies: browserdetect

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

AC.decorateSearchInput = function(field, options) {
	

	field = $(field);

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

	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(typeof(options.spotlight) != 'undefined') {
			spotlight = options.spotlight;
		}
	}

	if(AC.Detector.isWebKit()) {
		field.setAttribute('type', 'search');
		field.setAttribute('results', results);

		if(null != placeholder) {
			field.setAttribute('placeholder', placeholder);
			field.setAttribute('autosave', autosave);
		}
	} 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');

		if (!spotlight) {
			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');
		}
	
		if (spotlight) {
			var clonedField = field.cloneNode(true);
		} else {
			var clonedField = field.cloneNode(false);
		}
	
		wrapper.appendChild(left);
		wrapper.appendChild(clonedField);
		wrapper.appendChild(right);
		if (!spotlight) 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);

		if (!spotlight) {

			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);
  }
});