// Shorthand for $(document).ready();
$(function(){
  $("#previous_frame").on('click', function(event){
    event.preventDefault;  
    $('.frames').find('li').animate(
       {"left": "+33.33%"},"slow", function() {
          $(this).hide(); 
          $(this).show();
    });
  });
   
  $("#next_frame").on('click', function(event){
    event.preventDefault;

    $('.frames').find('li').animate({"right": "+33.33%"},"slow", function() {
      $(this).hide(); 
      $(this).show();
    });
  
  });
});

// var moveForward = function(position) {
//   console.log(position.constructor)
//   $(position).hide("slide", {direction: "left"}, 1000);
//   $(position).next().show("slide", {direction: "left"}, 1000);
// }

// var moveBackward = function(position) {
//   console.log(position.constructor)
//   $(position).hide("slide", {direction: "right"}, 1000);
//   $(position).prev().show("slide", {direction: "right"}, 1000); 
// }