/**
 * WPL search popup
 */
(function($) {
	var WplSearchPopup = function (searchEl, options) {
		this.searchEl = searchEl;
		this.isInit = false;
		this.isOpen = false;
		this.resultsEl = null;
		this.resultsLists = {};
		this.currentSearch = '';
		this.searchResultCache = {};

		var thiss = this;

		searchEl.focus(function () {
			thiss.init();
		});
		searchEl.blur(function () {
			thiss.timedClose();
		});
		searchEl.keyup(function () {
			thiss.refresh();
		});
	};

	WplSearchPopup.prototype.open = function() {
		if (this.isOpen) {
			return;
		}
		this.resultsEl.show();
		this.isOpen = true;
	};

	WplSearchPopup.prototype.close = function() {
		if (!this.isOpen) {
			return;
		}
		this.resultsEl.hide();
		this.isOpen = false;
	};

	WplSearchPopup.prototype.timedClose = function() {
		var thiss = this;
		window.setTimeout(function () {
			thiss.close();
		}, 250);
	};

	// Prepare the HTML of the auto-search
	WplSearchPopup.prototype.init = function () {
		if (this.isInit) {
			return;
		}

		this.resultsEl = $("<div class='search-popup-box'></div>");
		// Start closed
		this.resultsEl.hide();
		
		// Product list
		this.resultsEl.append("<h2>Products and services</h2>");
		this.resultsLists.product = $("<ul class='search-popup-list'></ul>");
		this.resultsLists.product.appendTo(this.resultsEl);

		// Info centre list
		this.resultsEl.append("<h2>Info Centre</h2>");
		this.resultsLists.infoCentre = $("<ul class='search-popup-list'></ul>");
		this.resultsLists.infoCentre.appendTo(this.resultsEl);

		// Attach the "search whole site" link
		var searchAll = $("<a href='#' class='search-popup-all-link'>Search whole site</a>");
		searchAll.click(function (e) {
			// Submit search form when this link is clicked
			e.preventDefault();
			$(this).parents('form').submit()
		}).after();
		searchAll.appendTo(this.resultsEl);

		// Attach the results element after the search input
		this.searchEl.after(this.resultsEl);

		this.isInit = true;

	};

	// Refresh results for current search string
	WplSearchPopup.prototype.refresh = function () {
		var searchStr = this.searchEl.val();
		if (0 === searchStr.length) {
			// Nothing in the search box, don't show the popup
			close();
			return;
		}

		this.open();

		// We have some text in the search box
		if (this.currentSearch == searchStr) {
			// No change
			return;
		}

		this.showResults(searchStr);
	};

	// Try and show results for the given search string
	WplSearchPopup.prototype.showResults = function (searchStr) {
		if (typeof(this.searchResultCache[searchStr]) != 'undefined') {
			this.drawResults(searchStr, this.searchResultCache[searchStr])
		} else {
			this.loadResults(searchStr);
		}
	};

	// Load results form server
	WplSearchPopup.prototype.loadResults = function (searchStr) {
		var url = '/search/popup';
		var data = {
			s: searchStr
		};
		var thiss = this;
		$.getJSON(url, data, function (results) {
			// Cache results for later
			thiss.searchResultCache[searchStr] = results;

			// Draw results now
			thiss.drawResults(searchStr, results);
		});
	};

	// Draw results into popup
	WplSearchPopup.prototype.drawResults = function (searchStr, results) {
		var typeResults;

		// Product results
		if (results.product) {
			typeResults = results.product;
		} else {
			typeResults = [];
		}
		this.drawResultType(this.resultsLists.product, typeResults);

		// Info centre
		if (results.info_centre) {
			typeResults = results.info_centre;
		} else {
			typeResults = [];
		}
		this.drawResultType(this.resultsLists.infoCentre, typeResults);

		this.open();
	};

	WplSearchPopup.prototype.drawResultType = function (ul, results) {
		ul.empty();

		var html = '';

		if (results.length > 0) {
			for (var i = 0; i < results.length; i++) {
				var row = results[i];

				html += "<li><a href='" + row.url + "'><strong>" + row.title + "</strong><br/>" + row.body + "</a></li>";
			}
		} else {
			html += "<li><a href='#'>None found</a></li>";
		}

		ul.append(html);
	};

	/**
	 *
	 */
	$.fn.wplSearchPopup = function(options) {
		options = $.extend( {
			
		}, options || {});

		return this.each(function() {
			var searchEl = $(this);

			new WplSearchPopup(searchEl, options);
		});
	};

})(jQuery);