/***add the observer****/
/*Element.extend({
    observe: function(fn, freq){
        return new Observer(this, fn, freq);
    }
});*/

var Observer = new Class({
	initialize: function(el, fn, freq) {
		this.el = $(el);
		if((this.el.getTag() != 'textarea') && ((this.el.getTag() != 'input') || !['text', 'password', 'search'].test(this.el.type)))
			return;
		this.callback = fn;
		this.frequency = freq || 1000;
		this.focus = this.onFocus.bindAsEventListener(this);
		this.blur = this.onBlur.bindAsEventListener(this);
		
		//if IE sets focus then we're in trouble		
		this.el.blur();
		
	},
	start: function() {
		if(!this.callback) return;
		this.el.addEvent("focus", this.focus).addEvent("blur", this.blur);
		
		//this.lastValue = this.el.value;
		//this.timer = this.check.periodical(this.frequency, this);
	},
	stop: function() {
		if(!this.callback) return;
		this.onBlur();
		this.el.removeEvent("focus", this.focus).removeEvent("blur", this.blur);
	},
	onFocus: function() {
		this.lastValue = this.el.value;
		this.timer = this.check.periodical(this.frequency, this);
	},
	onBlur: function() {
		$clear(this.timer);
		//this.check();
		hideResultDiv();
	},
	check: function() {
		//alert("check");
		var v = this.el.value;
		if(this.lastValue == v) return;
		this.lastValue = v;
		this.callback(this.el, v);
	}
});


/*******Ajax Stuff***************************************/
var searchSlider;
var lastsearch = "";

function ajaxSearchInit()
{
	//add a div to the page
	addResultsDiv();
	//$('s').addEvent('change', doSearch );
	//$('s').addEvent('focus', doSearch );
	
	 //return new Observer(this, fn, freq);
	var observer = new Observer($('s'), doSearch, 1000);
	//var observer = $('s').observe(doSearch,1000);
	observer.start();
}



function addResultsDiv()
{
	var xPos = $('s').getLeft();
	var yPos = $('s').getTop();
	
	var size = $('s').getSize();
	
	//the y position for the results
	var yPosResults = yPos + size.size.y - 12;
	
	//the x position for the results
	var xPosResults = xPos+2;
	
	//the width for the div with the results (compensate for the padding)
	var widthResults = size.size.x - 3;
	widthResults = 180;
	var divResults = new Element('div');
	
	divResults.id = 'ajaxsearchwrapper';
	divResults.setStyles({
	  position:'absolute',
	  top: yPosResults+'px',
	  left: xPosResults+'px',
	  width:widthResults+'px',
	  'z-index':'99',
	  display:'none'
	  });
	divResults.injectInside(document.body);
	
	
	var Inner = new Element('div');
	Inner.id = "ajaxsearch";
	Inner.injectInside( $('ajaxsearchwrapper')  );
	
	var Bottom = new Element('div');
	Bottom.id = "ajaxbottom";
	Bottom.injectInside( $('ajaxsearchwrapper')  );
	
}

function doSearch()
{
	if($('s').value.trim().length > 0  )
	{
		if(lastsearch == $('s').value.trim())
		{
			
			showResultDiv();			
			return true;
		}
		lastsearch = $('s').value.trim();
		
		var url = searchURL + '/?s='+$('s').value.trim();	

		var myAjax = new Ajax(url, {method: 'post', postBody:'ajax=1', onComplete:searchComplete}).request();
	}else
	{
		hideResultDiv();
	}
}

function searchComplete(response)
{
	showResultDiv();
	$('ajaxsearch').setHTML( response );
}

function showResultDiv()
{
	$('ajaxsearchwrapper').setStyles({display:'block'});
	var myFx = new Fx.Style('ajaxsearchwrapper', 'opacity').start(1);
	
}

function hideResultDiv()
{
	var myFx = new Fx.Style('ajaxsearchwrapper', 'opacity').start(0);	
}