$(document).ready(function() { 
  var $slidingDivs = $('div.slide');
  
  // increase zIndex for current slide panel when it's moused over
  $slidingDivs.hover(function() {
    $(this).css('zIndex', 2000);
  }, function() {
    $(this).css('zIndex', 1000);
  });  
  
  $('#slide-nav button').each(function(index) {
    
    var $marginLefty = $slidingDivs.eq(index);
 
    // set initial marginLeft and display properties for the sliding divs
    var props = {
      marginLeft: $marginLefty.outerWidth() + 'px',
      display: 'block'
    };
    $marginLefty.css(props);
 
    // on button click...
    $(this).click(function() {
 
      var newMargin = parseInt($marginLefty.css('marginLeft'),10) == 0 ? props.marginLeft : 0;
      $slidingDivs.stop(true, true).animate({marginLeft: props.marginLeft}, function() {
        $marginLefty.animate({
          marginLeft: newMargin
        });        
      });
      
    });
  });  
});