// Cafe menu items. We will fetch these from the server at startup
var items;

// Order array - initially empty
var order = [];

// Work-around for missing JQuery.postJSON
jQuery["postJSON"] = function(url,data,callback) {
	$.ajax({
	  url:url,
	  type:'POST',
	  data:JSON.stringify(data),
	  contentType:'application/json',
	  dataType:'json',
	  success: callback
	});
};

// Search the items list for the item with the given id
function findItem(id) {
	var n, length;

	length = items.length;
	for(n = 0;n < length;n++)
		if(items[n].iditem == id)
			return items[n];

	return items[0];
}

// Event handler for order button
function orderItem() {
  // Each of the order buttons has the id of the associated
  // object hidden in its data-id attribute. Find that item
	// and push it onto the order list.
	var item = findItem($(this).attr('data-id'));
  order.push(item);
  // The View Order button is initially hidden. As soon
  // as the user orders an item we will want to make it
  // visible.
  $('button#viewOrder').show();
  // Blur the button to remove the undesirable focussed appearance
  $(this).blur();
}

// Reloads the menu table
function displayItems(items) {
  var table, newRow, buttonTD, orderButton;
  var n, length;

  // Remove any existing entries from the table
  $('#menu tr').remove();

  // Add new rows for the items in the list
  length = items.length;
  for(n = 0;n < length;n++) {
    newRow = $('<tr>').html('<td class="align-middle">'+items[n].name+'</td><td class="align-middle">$'+items[n].cost/100+'</td>');
    orderButton = $('<button>');
    orderButton.text('Order').attr('data-id',items[n].iditem);
    orderButton.click(orderItem);
		orderButton.addClass('btn btn-secondary align-middle');
		buttonTD = $('<td>');
		buttonTD.append(orderButton);
    newRow.append(buttonTD);
    $('#menu').append(newRow);
  }
}

// Event handler for remove button
function removeItem() {
  order.splice($(this).attr('data-index'),1);
  displayOrders();
}

// Fills the order table with items from the order array
function displayOrders() {
  var table, newRow, buttonTD, removeButton;
  var n, length;

  // Remove any existing entries from the table
  $('#items tr').remove();

  // Add new rows for the items in the order list
  length = order.length;
  for(n = 0;n < length;n++) {
    newRow = $('<tr>').html('<td class="align-middle">'+order[n].name+'</td><td class="align-middle">$'+order[n].cost/100+'</td>');
    removeButton = $('<button>');
    removeButton.text('Remove').attr('data-index',n);
    removeButton.click(removeItem);
		removeButton.addClass('btn btn-secondary align-middle');
		buttonTD = $('<td>');
		buttonTD.append(removeButton)
    newRow.append(buttonTD);
    $('#items').append(newRow);
  }
}

// An example of a filter function designed to filter a list of objects
function filterList(list,meal) {
  var result, n, length;

  result = []; // Make a new, empty list
  length = list.length;
  for(n = 0;n < length;n++) {
    // Search the original list for items that have the desired meal property
    if(list[n].meal == meal)
      result.push(list[n]); // Add items that match to the new list
  }

  return result;
}

// Helper function to handle displaying a different meal
function displayMeal(meal) {
  var newList;

  newList = filterList(items,meal);
  displayItems(newList);
}

// Event handler for the view order button
function showOrder() {
  $('div#view').slideUp();
  $('div#order').show();

  displayOrders();
}

// Success callback for the place order POST
function showConfirm(data) {
	$('span#number').text(data);
  $('div#order').slideUp();
  $('div#confirm').show();
}

// Event handler for the place order button
function placeOrder() {
	// Construct a list of id numbers for the ordered items
	var n, length, ids;
	ids = [];
	length = order.length;
	for(n = 0;n < length;n++)
		ids.push(order[n].iditem);
	// Construct the order object
	var toPost = {customer:$('input#name').val(),phone:$('input#phone').val(),items:ids};
	// POST it to the server
	$.postJSON('http://cmsc106.net/cafe/purchase',toPost,showConfirm);
}

// Event handler for the back to menu button
function showMenu() {
  $('div#order').hide();
  $('div#view').slideDown();
}

// Callback function for the fetch items query
function receiveItems(data) {
	items = data;
	$('div#starting').hide();
	$('div#view').show();
	displayMeal('lunch');
}

function setUp() {
  // Set up event handlers for the meal buttons by using
  // a set of anonymous functions.
  $('button#breakfast').click(function(){displayMeal('breakfast');});
  $('button#lunch').click(function(){displayMeal('lunch');});
  $('button#dinner').click(function(){displayMeal('dinner');});
  // Set up event handlers for the other buttons
  $('button#viewOrder').click(showOrder);
  $('button#viewOrder').hide();
  $('button#place').click(placeOrder);
  $('button#back').click(showMenu);
  // Hide the menu, order, and confirm divs
	$('div#menu').hide();
  $('div#order').hide();
  $('div#confirm').hide();
	// Start the process of loading the menu items
	$.getJSON('http://cmsc106.net/cafe/item',receiveItems);
}

$(document).ready(setUp);