$(function() {
	$.fn.timelineSlider = function(settings) {
		settings = jQuery.extend({
			interval: 5000,
			auto: true,
			speed: 'slow'
		}, settings);

		var slider = $(this);
		var slideWidth = slider.children().width();
		var slideHeight = slider.children().height();
		var css = new Array();
		var rate = 1 / (slider.children().length - 1);
		var left = slideWidth * (- 1 - rate) + 300;
		var diff = 50;
		var timer;

		slider.children().each(function(i) {
			var width = parseInt(slideWidth * (1 - rate * (i - 1)));
			var height = parseInt(slideHeight * (1 - rate * (i - 1)));
			var top = parseInt((slider.height() - height) / 2);
			left += parseInt(diff * (1 - rate * (i - 1)) + 100);
			css[i] = {
				width: width + 'px',
				height: height + 'px',
				top: top + 'px',
				left: left + 'px'
			};
			$(this).css('zIndex', 100 - i);
		});

		if (settings.auto) $('#Controller').addClass('Pause');
		else $('#Controller').addClass('Play');
		$('#Controller').click(_controll);
		_slide();

		function _controll() {
			if (settings.auto) {
				settings.auto = false;
				clearTimeout(timer);
				$(this).removeClass('Pause');
				$(this).addClass('Play');
			} else {
				settings.auto = true;
				_slide();
				$(this).removeClass('Play');
				$(this).addClass('Pause');
			}
		}

		function _slide() {
			slider.children().each(function() {
				i = 100 - $(this).css('zIndex')
				if (i == 0) {
					$(this).css('zIndex', 101).animate({
							width: css[i].width,
							height: css[i].height,
							top: css[i].top,
							left: css[i].left,
							opacity: 0
						}, settings.speed, 'linear', function() {
						$(this).css({
							width: '1px',
							height: '1px',
							top: parseInt(slideHeight / 2) + 'px',
							left: slider.width() + 'px',
							zIndex: 101 - css.length,
							opacity: 1
						});
					});
				} else $(this).css('zIndex', 101 - i).animate(css[i], settings.speed);
			});
			if (settings.auto) timer = setTimeout(_slide, settings.interval);
		}
	};
});