// Define some view elements to work with
var a = $("#a");
var b = $("#b");
var c = $("#c");

// Remove these views from the DOM
a.remove();
b.remove();
c.remove();

// This var will hold a reference to the current view
var currentView;

// Define some transitions 
  var offLeft = {
    left: "-100%"
  };
  var onHorizontal = {
    left: 0
  };

  var offRight = {
    left: "100%"
  };
  
  var offDown = {
    top: "100%"
  };
  var offUp = {
    top: "-100%"
  };
  
  var onVertical = {
    top: 0
  };
  
  // These combinations create transitions in four directions
  // Slide right: offRight, offLeft, onHorizontal
  // Slide left: offLeft, offRight, onHorizontal
  // Slide down: offDown, offUp, onVertical
  // Slide up: offUp, offDown, onVertical

// Some helper functions to create transitions in four directions
function pushLeft(newView) {
  showView(newView, offRight, offLeft, onHorizontal)
}

function pushRight(newView) {
  showView(newView, offLeft, offRight, onHorizontal)
}

function pushDown(newView) {
  showView(newView, offDown, offUp, onVertical);
}

function pushUp(newView) {
  showView(newView, offUp, offDown, onVertical);
}


function showView(newView, exit, start, enter) {
  // Hide Current View
  if (currentView) {
    currentView.animate(exit, 400, function() {
      this.remove();
    });
  }
  // Show New View
  currentView = newView;
  $("#container").append(currentView);
  currentView.css(start).animate(enter, 400, function() {

  });
}


// These functions make use of the new transition helper functions
$("#link-a").click(function(event) {
  pushRight(a);
});

$("#link-b").click(function(event) {
  pushRight(b);
});

$("#link-c").click(function(event) {
  pushRight(c);
});