// TODO: IMPORTANT performace wise
// Remove all live search instances and only make hash changes and 
// bind the hashchange event to liveSearch();
// CHECK THE KNOWN ISSUES FIRST IN THIS URL
// http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.param.querystring

var searchCopy = 'Search';

var sliderLetterPositionInterval;
var ui; // the slider handle
var searchVal = '';
var q = '';
var page = ''
var category = '';
var order_by = '';
var order = '';
var letter = '';
var sliderValue = '';


$(function() {
	// $("#slider").slider('animate', true);
	$("#slider_wrapper").show();
	$("#search").addClass('searchWithJs');
	$("#searchButton").hide();
	
	$("#searchField").val(searchCopy);
	$("#searchField").addClass("searchFieldGrayText");
	
	$("#searchField").submit(function(){
		$('input[type=submit]', this).attr('disabled', 'disabled');
		return false;
	});
	
	// disable submit button
	$(document).keypress(function (evt) { 
		if (evt.keyCode == 13) { 
			return false;
		}
	 });
	
	$("#searchField").focus(function(e){
		if($("#searchField").val() == searchCopy){
			$("#searchField").val('');
			$("#searchField").removeClass("searchFieldGrayText");
		}
	});
	
	$("#searchField").blur(function(e){
		if($("#searchField").val() == ''){
			$("#searchField").val(searchCopy);
			$("#searchField").addClass("searchFieldGrayText");
		}
	});	
	
	
	$("#cur_letter").hide();
	$("#slider").slider("disable");
	$("#slider").slider( {
		orientation : "vertical",
		min : 1,
		max : 26
		// value: sliderValue,
		// ,animate: true
	});

	$("#categories").change(function(e) {
		var val = $(e.currentTarget).val();
		if(val == '') {
			removeState(['page', 'letter', 'category']);
		} else {
			$.bbq.pushState({ category: $(e.currentTarget).val()});
			$.bbq.removeState('page', 'letter', 'all');
		}
		resetSlider();
		liveSearch();
	});
	
	$("#resetButton").click(function(){
		window.location.hash = "#all";
		resetSlider();
		liveSearch();
		delay(function(){
			if($("#searchField").val() == ''){
				$("#searchField").val(searchCopy);
				$("#searchField").addClass("searchFieldGrayText");
			}
		}, 3);
	});
		
	$("#slider_wrapper").hover(function(){
		$("#slider").slider("enable");
		return false;
	});
	
	$("#slider").slider({
		slide: function(e, u){
			ui = u;
			clearInterval(sliderLetterPositionInterval);
			sliderLetterPositionInterval = setInterval("positionCurrentLetter()", 3);
		},
		change: function(e, u){
			ui = u;
			clearInterval(sliderLetterPositionInterval);
			sliderLetterPositionInterval = setInterval("positionCurrentLetter()", 3);
		},
		start: function(e, u){
			ui = u;
			positionCurrentLetter();
			$("#cur_letter").show();
		},
		stop: function(e, ui){
			clearInterval(sliderLetterPositionInterval);
			positionCurrentLetter();
			// $("#cur_letter").hide();
			$.bbq.pushState({ letter: $("#cur_letter").text() });
			removeState(['page', 'q', 'category']);
			liveSearch();
			$("#searchField").val(searchCopy);
			$("#searchField").addClass("searchFieldGrayText");
			$("#categories").val($("#categories option:first").val());
		}
	});
	
	// Execute initial search because firefox doesn't reset the textfield and select box
	// liveSearch(); // Warning - FIXME: This causes double request.
	initVars();
	repopulateFromHash();
	
	// Sorting
	$("#merchant_name").click(function(e){
		var order = ($(e.currentTarget).next().attr('alt') == 'asc') ? 'desc' : 'asc';
		$.bbq.pushState({ order: order, order_by: 'name' });
		toggleSortArrow(e.currentTarget);
		liveSearch();
		return false;
	});
	$("#merchant_category").click(function(e){
		var order = ($(e.currentTarget).next().attr('alt') == 'asc') ? 'desc' : 'asc';
		$.bbq.pushState({ order: order, order_by: 'category' });
		toggleSortArrow(e.currentTarget);
		liveSearch();
		return false;
	});
	
	function toggleSortArrow(target){
		sort = $(target).next().attr('alt');
		if(sort == 'asc'){
			$(target).next().attr('alt', 'desc');
			$(target).next().attr('src', 'images/table_sort_down.gif');
		} else if (sort == 'desc') {
			$(target).next().attr('alt', 'asc');
			$(target).next().attr('src', 'images/table_sort_up.gif');
		}
	}
	
	$(".pagination_link").live('click', function(e) {
		var GET = getUrlVars(e.currentTarget['href']);
		var page = GET['page'];
		$.bbq.pushState({ page: page });
		$.bbq.removeState('all');
		liveSearch();
		return false;
	});
	$("#searchField").keyup(function(e) {
		if ($(e.currentTarget).val() != searchVal) {
			delay(function() {
				// var href = $(this).attr( "href" );
				searchVal = $(e.currentTarget).val();
				removeState(['page', 'letter']);
				if(searchVal == ''){
					removeState('q');
				} else {
					$.bbq.pushState({ q: searchVal});
				}
				resetSlider();
				liveSearch();
			}, 500);
		}
	});
	$("#searchField").keydown(function(e){
		if(e.keyCode == 27){
			$("#searchField").hide(); // fix for firefox
			$("#searchField").val('');
			$("#searchField").show();
		}
	});
	
		// Bind a callback that executes when document.location.hash changes.
	  $(window).bind( "hashchange", function(e) {
			// liveSearch();
			// repopulateFromHash();
	  });

	  // Since the event is only triggered when the hash changes, we need
	  // to trigger the event now, to handle the hash the page may have
	  // loaded with.
	  $(window).trigger( "hashchange" );
});

function positionCurrentLetter(){
	var top = $(ui.handle).offset().top - 5;
	var left = $(ui.handle).offset().left - 25; 
	$("#cur_letter").offset({ top: top, left: left });
	$("#cur_letter").text(String.fromCharCode(64 + Math.abs(27 - ui.value)));
}

function liveSearch() {
	initVars();
	$("#loading").show();

	var params = window.location.hash.replace("#", "");
	
	$.ajax( {
		url : '_merchants.php?' + params + "&language=" + language,
		// contentType: "charset=latin1",
		dataType: 'html',
		success : function(data) {
			$(".odd").remove();
			$(".even").remove();
			$('#recordsTable > tbody:last').append(data);
			$('#loading').fadeOut('fast');
		}
	});
	$.ajax({
		url : 'pagination.php?' + params + "&language=" + language,
		contentType: "application/x-www-form-urlencoded;charset=latin1",
		success : function(data) {
			$("#pagination").empty();
			$("#pagination").append(data);
		}
	});
}

var delay = (function() {
	var timer = 0;
	return function(callback, ms) {
		clearTimeout(timer);
		timer = setTimeout(callback, ms);
	};
})();

function getUrlVars(request) {
	var vars = [], hash;
	var hashes = request.slice(request.indexOf('?') + 1).split('&');
	for ( var i = 0; i < hashes.length; i++) {
		hash = hashes[i].split('=');
		vars.push(hash[0]);
		vars[hash[0]] = hash[1];
	}
	return vars;
}

function repopulateFromHash(){
	if($("#searchField").val() != searchCopy){
		$("#searchField").removeClass("searchFieldGrayText");
	}
	if($.bbq.getState('q') == undefined){
		$("#searchField").val(searchCopy);
		$("#searchField").addClass("searchFieldGrayText");
	} else {
		$("#searchField").val($.bbq.getState('q'));
	}
		
	$("#categories").val($.bbq.getState("category"));
	
	sliderValue = 26;
	if(letter != '') {
		letterCode = letter.charCodeAt(0) - 64;
		sliderValue = Math.abs(27 - letterCode);
		$("#cur_letter").show();
	}
	$("#slider").slider('value', sliderValue);
	$("#slider").slider({animate: true});
	liveSearch();
}

function removeState(arg){
	$.bbq.pushState('all');
	$.bbq.removeState(arg);
	if(window.location.hash == "#all=") {
		window.location.hash = "#all";
	} else {
		$.bbq.removeState('all');
	}
}

function resetSlider() {
	$("#slider").slider("disable"); // TODO: move handle to top position
	$("#cur_letter").hide();
}

function initVars(){
	q = $.bbq.getState( "q" );
	page = $.bbq.getState( "page" );
	category = $.bbq.getState( "category" );
	order_by = $.bbq.getState( "order_by" );
	order = $.bbq.getState("order");
	letter = $.bbq.getState('letter');
	
	if(window.q == undefined) window.q = '';
	if(window.page == undefined) window.page = '';
	if(window.category == undefined) window.category = '';
	if(window.order_by == undefined) window.order_by = '';
	if(window.order == undefined) window.order = '';
	if(window.letter == undefined) window.letter = '';
}