#248 Offline Apps Part 2

curl https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js > public/javascripts/jquery.tmpl.js
curl https://github.com/wycats/jquery-offline/raw/master/lib/jquery.offline.js > public/javascripts/jquery.offline.js
curl https://github.com/wycats/jquery-offline/raw/master/lib/json.js > public/javascripts/json.js

respond_to :html, :json

def index
  @items = Item.all
  respond_with(@items)
end

<%= javascript_include_tag :defaults, "jquery.tmpl", "json", "jquery.offline" %>

<script type="text/html" id="item_template">
  <li>${item.name}</li>
</script>
<ol id="items">
  <li><em>Loading items...</em></li>
</ol>

$(function() {
  if ($.support.localStorage) {
    $(window.applicationCache).bind("error", function() {
      console.log("There was an error when loading the cache manifest.");
    });
    if (!localStorage["pendingItems"]) {
      localStorage["pendingItems"] = JSON.stringify([]);
    }
    $.retrieveJSON("/items.json", function(data) {
      var pendingItems = $.parseJSON(localStorage["pendingItems"]);
      $("#items").html($("#item_template").tmpl(data.concat(pendingItems)));
    });
    $("#new_item").submit(function(e) {
      var pendingItems = $.parseJSON(localStorage["pendingItems"]);
      var item = {[data]($(this).serialize(),) [item]({"name":$("#item_name").val()}};)
      $("#item_template").tmpl(item).appendTo("#items");
      pendingItems.push(item);
      localStorage["pendingItems"] = JSON.stringify(pendingItems)
      $("#item_name").val("");
      sendPending();
      e.preventDefault();
    });
    function sendPending() {
      if (window.navigator.onLine) {
        var pendingItems = $.parseJSON(localStorage["pendingItems"]);
        if (pendingItems.length > 0) {
          var item = pendingItems[0];
          $.post("/items", item.data, function(data) {
            var pendingItems = $.parseJSON(localStorage["pendingItems"]);
            pendingItems.shift();
            localStorage["pendingItems"] = JSON.stringify(pendingItems)
            setTimeout(sendPending, 100);
          });
        }
      }
    }
    sendPending();
    $(window).bind("online", sendPending);
  } else {
    alert("Try a different browser.");
  }
});