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();
			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">';
		for (var i = 0; i < eventHistory.length; i++) {
			var eventDate = new Date(eventHistory[i].time*1000);
			var mdy = $('.search-bar').val().split('/');
			var dateMatch = false;
			switch(mdy.length) {
				case 1:
					dateMatch = parseInt(mdy[0])==(eventDate.getMonth()+1);
					break;
				case 2:
					dateMatch = (parseInt(mdy[0])==(eventDate.getMonth()+1)) && (parseInt(mdy[1])==eventDate.getDate());
					break;
				case 3:
					dateMatch = (parseInt(mdy[0])==(eventDate.getMonth()+1)) && (parseInt(mdy[1])==eventDate.getDate()) && (parseInt(mdy[2])==eventDate.getFullYear());
					break;
				default:
					break;
			}
			if (eventHistory[i].name.match($('.search-bar').val()) || dateMatch) {
				var dateString = eventDate.toLocaleString();
				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);
	});
})