$(function(){
  
  
  $carousel = $("#carousel");
  $extras = $("#carousel-extras");
  
  $previous = $("<a href='#' id='carousel-previous'></a>");
  $next = $("<a href='#' id='carousel-next'></a>");
  
  $previous
    .click(function(){
      console.log("previous");
      
      // remove the main figure
      $old_figure = $carousel.children(".figure");
      $old_figure.remove();
      
      // remove the last extra
      $new_figure = $extras.children(".extra:last-child").children(".figure");
      $extras.children(".extra:last-child").remove();
      
      // add the main figure to the start of the extras
      $extras.prepend($("<div class='extra'></div>").append($old_figure));
      
      // add the last figure to the main
      $carousel.append($new_figure);
      
      return false;
    });
  
  $next
    .click(function(){
      console.log("next");
      
      // remove the main figure
      $old_figure = $carousel.children(".figure");
      $old_figure.remove();
      
      // remove the first extra
      $new_figure = $extras.children(".extra:first-child").children(".figure");
      $extras.children(".extra:first-child").remove();
      
      // add the main figure to the end of the extras
      $extras.append($("<div class='extra'></div>").append($old_figure));
      
      // add the first figure to the main
      $carousel.append($new_figure);
      
      return false;
    });
  
  $carousel
    .append($previous)
    .append($next);
  
  
  
});