// Cafe menu items. Note that the id property of each item must correspond exactly
// to the index of the item in the items array.
var items = [{id:0,item:'Felafel sandwich',cost:'$4.50',meal:'L'},{id:1,item:'Cheese pizza',cost:'$4.50',meal:'L'},
{id:2,item:'Breakfast Burrito',cost:'$3.50',meal:'B'},{id:3,item:'Hamburger',cost:'$4.00',meal:'L'},
{id:4,item:'Mac and Cheese',cost:'$4.50',meal:'D'},{id:5,item:'Muffin',cost:'$2.50',meal:'B'},
{id:6,item:'Salisbury Steak',cost:'$6.50',meal:'D'},{id:7,item:'Pancakes',cost:'$3.50',meal:'B'},
{id:8,item:'Spaghetti',cost:'$4.50',meal:'D'}];

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

// Event handler for order button
function orderItem() {
  // Each of the order buttons has the index of the associated
  // object hidden in its data-id attribute. Read that attribute
  // from the button and use it as an index into the items array.
  order.push(items[$(this).attr('data-id')]);
  // 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, button_td, 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].item+'</td><td class="align-middle">'+items[n].cost+'</td>');
    orderButton = $('<button>');
    orderButton.text('Order').attr('data-id',items[n].id);
    orderButton.click(orderItem);
    orderButton.addClass('btn btn-secondary align-middle');
    button_td = $('<td>');
    button_td.append(orderButton);
    newRow.append(button_td);
    $('#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, button_td, 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].item+'</td><td class="align-middle">'+order[n].cost+'</td>');
    removeButton = $('<button>');
    removeButton.text('Remove').attr('data-index',n);
    removeButton.click(removeItem);
    removeButton.addClass('btn btn-secondary align-middle');
    button_td = $('<td>');
    button_td.append(removeButton);
    newRow.append(button_td);
    $('#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();
}

// Event handler for the place order button
function showConfirm() {
  $('div#order').slideUp();
  $('div#confirm').show();
}

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

function setUp() {
  // Set up event handlers for the meal buttons by using
  // a set of anonymous functions.
  $('button#breakfast').click(function(){displayMeal('B');});
  $('button#lunch').click(function(){displayMeal('L');});
  $('button#dinner').click(function(){displayMeal('D');});
  // Set up event handlers for the other buttons
  $('button#viewOrder').click(showOrder);
  $('button#viewOrder').hide();
  $('button#place').click(showConfirm);
  $('button#back').click(showMenu);
  // Show the lunch menu as the default
  displayMeal('L');
  // Hide the order and confirm divs
  $('div#order').hide();
  $('div#confirm').hide();
}

$(document).ready(setUp);