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

// Add an array to hold the views
var viewsArray = [a, b, 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() {

  });
}



function showViewInArray(newView) {
  // Don't load the current view again
  if (currentView == newView) {
    return;
  }
  // Find the index of the current view
  var indexOfCurrentView = viewsArray.indexOf(currentView);
  // Find the index of the new view
  var indexOfNewView = viewsArray.indexOf(newView);
  if (indexOfCurrentView == -1) {
    // There is no current, so do a pushLeft
    pushRight(newView);
  } else {
    if (indexOfNewView < indexOfCurrentView) {
      // The new view is to the left in the array
      pushLeft(newView);
    } else {
      // The new view is to the right in the array
      pushRight(newView);
    }
  }
}



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

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

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