$(function(){

  var query = $('#query');

  // Set up pagination
  $('#viewport').serialScroll({
    items: '.page',
    prev: '#controls .prev',
    next: '#controls .next',
    axis: 'x',
    lazy: true,
    duration: 0
  });

  var ajax_queue = $.manageAjax.create('cacheQueue', {
    queue: 'clear'
  });

  query.focus();

  query.live('keypress', perform);
  query.live('keydown', perform);
  query.live('keyup', perform);
  query.bind('blur', perform);

  function perform(){
    var value = query.val();
    if(value.length > 0){
      ajax_queue.add({
        success: populate,
        url: '/food_banks/closest',
        type: 'GET',
        data: { query: query.val() },
        dataType: 'json'
      });
    } else {
      $('#reset').hide();
      $('#results').hide();
      $('#empty').show();
    }
  }

  function populate(food_banks){
    var ids = [];
    $.each(food_banks, function(i, food_bank){
      ids.push(food_bank.id);
    });
    if (ids.length > 0){
      $('#reset').hide();
      $('#empty').hide();
      $('#results').empty();
      var page = $('<div class="page"></div>');
      var counter = 0;
      $('#results').append(page);
      $.each(ids, function(i, id){
        if(counter == 4){
          page = $('<div class="page"></div>');
          $('#results').append(page);
          counter = 0;
        }
        page.append($('#food_banks #food_bank_' + id).clone());
        counter = counter + 1;
      });
      $('#results').show();
      $('#controls').show();

    } else {
      $('#reset').hide();
      $('#results').hide();
      $('#controls').hide();
      $('#empty').show();
    }
  }

});