var QuickSearch = {

	/**
	 * Timeout variable used for delaying searches
	 */
	timeout: null,

	/**
	 * The default width of the search box
	 */
	minBoxWidth: 200,

	/**
	 * The size of the search box when it has expanded
	 */
	maxBoxWidth: 350,

	/**
	 * The minimum length a query has to be before a search is carried out
	 */
	minQueryLength: 4,

	/**
	 * The value of the search box when it is empty
	 */
	blankText: "search citybaseapartments.com",

	/**
	 * The number of results returned from the last search
	 */
	numberOfResults: 0,

	/**
	 * Whether the results div should hide when the search box blurs
	 */
	resultsHide: true,
	
	/**
	 * Adds the quicksearch html to the page
	 */
	init: function() {
		// construct html
		var html = [
			'<div id="quicksearch">',
				'<input type="text" id="quicksearch_box" value="'+QuickSearch.blankText+'" />',
			'</div>',
			'<div id="quicksearch_results"></div>',
			'<iframe id="quicksearch_iframe" style="z-index:500;position:absolute;display:none;border:none;"></iframe>',
		].join('');
		// add it after the "header" div
		$('#header').append(html);
		// position the results container		
		QuickSearch.realignResults();
		$('#quicksearch_results')
			.css("width", this.maxBoxWidth+'px')
			.hover(
				// mouseover
				function() {
					QuickSearch.resultsHide = false;
				},
				// mouseout
				function() {
					QuickSearch.resultsHide = true;
					
				}
			)
		// add events
		this.addEvents();
	},
	
	realignResults: function() {
		var qsb = $('#quicksearch_box');
		var pos = qsb.offset();
		var left = (qsb.width() == QuickSearch.minBoxWidth) ? 
			pos.left-(QuickSearch.maxBoxWidth-QuickSearch.minBoxWidth)+3 : pos.left+3;
		$('#quicksearch_results')
			.css("top", (pos.top+22)+'px')
			.css("left", left+'px');
	},
	
	/**
	 * Add events to the quick search box
	 */
	addEvents: function() {
		$('#quicksearch_box')
			// capture typing
			.keyup(QuickSearch.quickSearchBox_KeyUp)
			// format search box when focused
			.focus(QuickSearch.quickSearchBox_Focus)
			// format search box when blured
			.blur(QuickSearch.quickSearchBox_Blur);
	},

	quickSearchBox_KeyUp: function(e) {
		clearTimeout(QuickSearch.timeout);
		var qs = $(this);
		// get search query
		var query = qs.val();
		// if query is this.minQueryLength characters or longer
		if (query.length >= QuickSearch.minQueryLength) {
			QuickSearch.timeout = setTimeout(function() {
				QuickSearch.search(query);
			}, 500);
		}
		else {
			QuickSearch.numberOfResults = 0;
		}
	},

	quickSearchBox_Focus: function(e) {		
		var qs = $(this);
		// reliagn the results div incase the browser and resized
		QuickSearch.realignResults();
		// update style and value
		if (qs.val() == QuickSearch.blankText) {
			qs
				.val("")
				.css('width', QuickSearch.maxBoxWidth+'px')
				.css("color", "#000000");
		}
		// show results box if there are any results
		$('#quicksearch_results').show();
		QuickSearch.addIFrameFix();
		if (QuickSearch.numberOfResults == 0) {
			QuickSearch.showHelp();
		}
	},

	quickSearchBox_Blur: function(e) {
		var qs = $(this);
		// update style and value
		if (qs.val() == "") {
			qs
				.val(QuickSearch.blankText)
				.css("color", "#aaaaaa")
				.css("width", QuickSearch.minBoxWidth+"px");
		}
		// hide results box if we haven't said not to
		if (QuickSearch.resultsHide) {
			$('#quicksearch_results').hide();
			QuickSearch.removeIFrameFix();
		}
	},

	/**
	 * Perform a search for the entered query
	 */
	search: function(query) {
		var qsr = $('#quicksearch_results');
		qsr.show().html('<div class="quicksearch_result loading">Searching...</div>');
		$.get(
			'/ajax/quicksearch.php',
			{
				q: query
			},
			function(data) {
				try {
					var results = eval(data);
					QuickSearch.show(results);
				}
				catch(e) {
					console.log(e);
				}
			}
		);
	},

	show: function(results) {
		var qsr = $('#quicksearch_results');
		QuickSearch.numberOfResults = results.length;
		qsr.html("");
		// there was at least one result
		if (results.length > 0) {
			// loop through all results and generate html strings for them all
			var html = '';
			for (var i=0; i<results.length; i++) {
				var r = results[i];
				html += [
					'<div class="quicksearch_result">',
						'<a href="'+r['url']+'">',
							'<span class="type">'+r['type']+'</span>',
							r['name'],
						'</a>',
					'</div>'
				].join("");
			}
			qsr.append(html);
			QuickSearch.addIFrameFix();
			// add hover events to the newly added result divs
			$('div.quicksearch_result', qsr).hover(
				function() {
					$('a', this).addClass('hover');
					$('span.type', this).addClass('hover');
				},
				function() {
					$('a', this).removeClass('hover');
					$('span.type', this).removeClass('hover');
				}
			);
		}
		// there were no results
		else {
			qsr.html('<div class="quicksearch_result noresults">Your search returned no results</div>');
			QuickSearch.removeIFrameFix();
		}
	},
	
	addIFrameFix: function() {
		if ($.browser.msie && parseInt($.browser.version) <= 6 && QuickSearch.numberOfResults > 0) {
			QuickSearch.removeIFrameFix();
			// get results div size
			var qsr = $('#quicksearch_results');
			var pos = qsr.offset();
			var width = qsr.width();
			var height = qsr.height();
			$('#quicksearch_iframe')
				.show()
				.css('top', pos.top+'px').css('left', pos.left+'px').css('height', (height+2)+'px').css('width', width+'px');
		}
	},
	
	removeIFrameFix: function() {		
		if ($.browser.msie && parseInt($.browser.version) <= 6) {
			$('#quicksearch_iframe').hide();
		}
	},
	
	showHelp: function() {
		$('#quicksearch_results').html('<div class="quicksearch_result help">Search for a country, city, suburb or apartment</div>');
	}

}

$(document).ready(function() {
	QuickSearch.init();
});