// Panel Slider
$.fn.imageSlide = function(options) {    
  var images = this.find('img').get(),
    container = this,
    settings = $.extend({
        speed: 400,
        styles : [{},{},{}]
    }, options),
    animating = false;  
  function slide(direction) {      
    animating = true;
    var left = direction.toLowerCase() === 'left';
    
    $(images).each(function(i){
        $(images[i]).animate(settings.styles[left ? (i == 0 ? 2 : i - 1) : (i == 2 ? 0 : i + 1)], settings.speed);
    });    
    setTimeout(function(){
        $(images[0]).css({zIndex: left ? 1 : 2});
        $(images[1]).css({zIndex: 1});
        $(images[2]).css({zIndex: left ? 2 : 1});
    }, settings.speed / 2);    
    setTimeout(function(){
        var old = images;
        images = [];
        images[0] = old[left ? 1 : 2];
        images[1] = old[left ? 2 : 0];
        images[2] = old[left ? 0 : 1];
        animating = false;
    }, settings.speed);
      
  } 
  $(container).click(function(e){
      if(animating) {return;}
      if(e.target === images[0]) {slide('right')}
      else {slide('left')}
  })
  return this;
};

$('#panel img').css('cursor','pointer');
$('#panel').imageSlide({
    // Higher = slower
    speed: 400,
    // Set each image's dimensions here:
    styles : [
        {width: 300,top: 80,left: 0},
        {width: 478,left: 84,top: 0},
        {width: 300,top: 80,left: 345}
    ]
})