$.fn.carouselSlide = function(options) {    
  var items = this.find('img').get(),
    container = this,
    settings = $.extend({
        speed: 400,
        styles : [{},{},{}]
    }, options),
    animating = false;
    var current;
	slide("left", items[2]);
  function slide(direction, e) {
    animating = true;
    var left = direction.toLowerCase() === 'left';
	$(current).next().fadeOut("normal");
    $(items).each(function(i){
        $(items[i]).animate(settings.styles[left ? (i == 0 ? 2 : i - 1) : (i == 2 ? 0 : i + 1)], settings.speed, 'easeInOutCubic');
    });
	$(e).next().fadeIn("normal");
	current = e;
    setTimeout(function(){
        $(items[0]).parent().css({zIndex: left ? 1 : 2});
        $(items[1]).parent().css({zIndex: 1});
        $(items[2]).parent().css({zIndex: left ? 2 : 1});
    }, settings.speed / 2);
    setTimeout(function(){
        var old = items;
        items = [];
        items[0] = old[left ? 1 : 2];
        items[1] = old[left ? 2 : 0];
        items[2] = old[left ? 0 : 1];
        animating = false;
    }, settings.speed);
  }
  $(container).find('img').click(function(e){
      if(animating) {return;}
      if(e.target === items[0]) {slide('right', e.target)}
      else {slide('left', e.target)}
  })
  return this;
};

$(document).ready(function() {
	$('#carousel li img').css('cursor','pointer');
	$('#carousel').carouselSlide({
		speed: 400,
		styles : [
			{width: 300,height: 232,top: 60,left: 0},
			{width: 440,height: 340,left: 100,top: 0},
			{width: 300,height: 232,top: 60,left: 340}
		]
	})
});