var eventHistory = []

function overlay_in() {
	$('.shadow').css({'display' : 'block'});
	$('.overlay').css({'display' : 'block'});
	$('.shadow').animate({'opacity' : 0.7});
	$('.overlay').animate({'top' : '10%'});
}

function overlay_out() {
	$('.shadow').animate({'opacity' : 0.0}, function () {
		$('.overlay').css({'display' : 'none'});
	});
	$('.overlay').animate({'top' : '-70%'}, function () {
		$('.shadow').css({'display' : 'none'});
	});
}

function save() {
	var name = $('#name').val();
	var cardID = $('.card-id').text();
	var authCode = 0;
	if ($('#fridge').is(':checked'))
		authCode += 1;
	if ($('#tools').is(':checked'))
		authCode += 2;
	$.getJSON('http://127.0.0.1:5000/addcard/' + cardID + '/' + name + '/' +  authCode, function(data) {

	});
	overlay_out();
}

$(document).ready(function() {
	jQuery.ajaxSetup({ cache: false });
	$.getJSON('http://127.0.0.1:5000/gethistory', function(data) {
		eventHistory = data.reverse();

		var newHistory = '<div class="event-wrapper">';
		for (var i = 0; i < eventHistory.length; i++) {
			var dateString = (new Date(eventHistory[i].time*1000)).toLocaleString('sv-SE');
			var newElement = '<div class="event" card-id="' + eventHistory[i].cardID + '">\
					<div class="time">' + dateString + '</div>\
					<div class="name">';
			if (eventHistory[i].name == "")
				newElement += '<span class="unknown_card">' + eventHistory[i].cardID + '</span>';
			else
				newElement += eventHistory[i].name;
			newElement += '</div>\
				</div>';
			newHistory += newElement;
		}
		newHistory += '</div>';
		var toInsert = $(newHistory);
		$('.search-bar').after(toInsert);

	});
	$('.recent').on('click', '.event', function() {
		var cardID = $(this).attr('card-id');
		$('.card-id').text(cardID);
		$.getJSON('http://127.0.0.1:5000/getcardinfo/' + cardID, function(data) {
			$('#name').val(data.name);
			if (data.fridge)
				$('#fridge').prop('checked', true);
			else
				$('#fridge').prop('checked', false);
			if (data.secretTools)
				$('#tools').prop('checked', true);
			else
				$('#tools').prop('checked', false);
		})
		.fail(function() {
			$('#name').val('');
			$('#fridge').prop('checked', false);
			$('#tools').prop('checked', false);
		});
		overlay_in();
	});
	$('.search-bar').on('keyup', function() {
		var newHistory = '<div class="event-wrapper">';
		var args = $('.search-bar').val().split(' ');
		var toMatch = [-1,-1,-1];
		var nameToMatch = '';
		for (var j = 0; j < args.length; j++) {
			if(args[j].charAt(0) == '-') {	
				switch(args[j].charAt(1)) {
					case 'y':
						toMatch[0] = parseInt(args[j].substring(2));
						break;
					case 'm':
						toMatch[1] = parseInt(args[j].substring(2));
						break;
					case 'd':
						toMatch[2] = parseInt(args[j].substring(2));
						break;
					default:
						break;
				}
			} else {
				nameToMatch += args[j] + ' ';
			}
		}
		nameToMatch = nameToMatch.substring(0, nameToMatch.length - 1);
		for (var i = 0; i < eventHistory.length; i++) {
			var dateMatch = true;
			var eventDate = new Date(eventHistory[i].time*1000);
			if (toMatch[0] > 0)
				dateMatch = dateMatch && (toMatch[0] == eventDate.getFullYear());
			if (toMatch[1] > 0)
				dateMatch = dateMatch && (toMatch[1] == (eventDate.getMonth() + 1));
			if (toMatch[2] > 0)
				dateMatch = dateMatch && (toMatch[2] == eventDate.getDate());
			/*if (toMatch[0]<0 && toMatch[1]<0 && toMatch[2]<0)
				dateMatch = false;*/
			if ((eventHistory[i].name.match(nameToMatch) != null) && dateMatch) {
				var dateString = eventDate.toLocaleString('sv-SE');
				var newElement = '<div class="event" card-id="' + eventHistory[i].cardID + '">\
						<div class="time">' + dateString + '</div>\
						<div class="name">';
				if (eventHistory[i].name == "")
					newElement += '<span class="unknown_card">' + eventHistory[i].cardID + '</span>';
				else
					newElement += eventHistory[i].name;
				newElement += '</div>\
					</div>';
				newHistory += newElement;
			}
		}
		newHistory += '</div>';
		$('.event-wrapper').replaceWith(newHistory);
	});
})