/* Copyright (c) Fluid Creativity, 2008 */

/**
 *	Live Search
 *	framework: mootools
 *
 *	Contents
 *  onload
 *	init()
 *	getResults()
 *	showLiveSearch()
 *	hideLiveSearch()
 *
 *  READ ME
 *
 * 	Note:'live' search results are created via PHP in livesearch.php - the PHP page is resposnible for
 * 	CSS, number of results, etc. This JavaScript merely grabs the results and shows it.
 *
 * 	STEPS
 *	> Change fieldset class to live so we have (CSS-wise)  form#search_form fieldset.live if not already set
 *	> On search input focus or live search filter option select
 *	> Send $_GET request to search URL -(defined in form action)  and grab search results as HTML/XML/JSON
 * 	> Make #live_search appear (display: block) if it is hidden
 *	> If results exists
 *		> Convert results to HTML/CSS results and put them into  #live_search
 *		> When mouseout the live search hide the results (after a tiny delay - for usability's sake)
 * 	> No results
 *		> Tell user there are no results
 */

var LiveSearch = {

	visible : false,

	/**
	 *	init()
	 *	prepare relevant elements in terms of appearance (CSS) and assign events
	 */
	init: function() {

		// Change fieldset class. CSS does the rest
		var searchForm = $('search_form');
		searchForm.getElement('fieldset').addClass('live');

		// Get variables
		var input = $('query');
		var price = $('searchprice');
		var sort = $('sort');
		var live_search = $('live_search');

		// Perform events based on user's interaction with the search input
		input.addEvents({
			// On focus - user is ready to search
			focus: function(){
				if (!LiveSearch.visible) {
					LiveSearch.showLiveSearch();
				}
			},
			// On keyup - user is typing
			keyup: function() {
				// go get search results for typed text
				if (!LiveSearch.visible) {
					LiveSearch.showLiveSearch();
				}
				LiveSearch.getResults();
			}
		});
		// Show form when we mouseover the search area
		searchForm.addEvents({
			mouseover: function(){
				if (!LiveSearch.visible) {
					LiveSearch.showLiveSearch();
				}
			}
		});
		// show/hide live search area on mouseover/out
		live_search.addEvents({
			// On mouse out: user doesn't want to see results
			mouseout: function(){
				LiveSearch.hideLiveSearch();
			},
			// On mouse over: user wants to see results
			mouseover: function(){
				if (!LiveSearch.visible) {
					LiveSearch.showLiveSearch();
				}
			}
		});
	},

	/**
	 * getResults()
	 * AJAX functions for grabbing the data and displaying it
	 */
	 getResults : function() {

		// Get variables
		var input = $('query');
		var price = $('searchprice');
		var sort = $('sort');
		var live_search = $('live_search');
		var live_search_internal = $('live_search_internal');
		
		// Build up query string
		// Start with search query
		var queryString = 'query='+input.value;
		// Add on the price value if chosen
		if(price){
			queryString += '&searchprice='+price.value;
		}
		// Add on the sort value if chosen
		if(sort){
			queryString += '&sort='+sort.value;
		}
	
	
		// The moneymaker: Gets results and puts them into the live search div
		if(input.value){
			live_search_internal.set('html', '<div id="ajax_loader_img"><img src="../images/ajax-loader.gif" /><span>Loading...</span><div>');
			live_search_internal.load('livesearch.php?'+queryString);
		}

	 },

	/**
	 * showLiveSearch()
	 * Show the live search area - if a search term exists
	 * Hide the live search when the user doesn't want it anymore (mouseout)
	 */
	 showLiveSearch : function(){
		// Get variables
		var live_search = $('live_search');
		var input = $('query');

		// Show/hide the search results
		if(input.value){
			live_search.setStyle('display', 'block');
			live_search.setStyle('overflow', 'hidden');
			//live_search.setStyle('display', 'block');
			LiveSearch.visible = true;
			
		}
		else{
			LiveSearch.hideLiveSearch();
		}
	 },

	/**
	 * hideLiveSearch()
	 */
	hideLiveSearch : function(){
		$('live_search').setStyle('display', 'none');
		LiveSearch.visible = false;
	}
}


/**
 *	onload
 */
window.addEvent('domready', function () {
	LiveSearch.init();
});