var NJS = NJS || {};

NJS.PictureSlide = new Class({
	Implements: Options,
	options: {
		visiblePictures: 3,
		spacing: 20,
		fade: 0.2,
		marginLeft: 50,
		fxOptions: {
			transition: 'cubic:in:out',
			duration: 500
		},
		fxLag: 100
	},
	running: false,
	initialize: function(listElement, previousElement, nextElement, options) {
		var that = this;
	
		this.setOptions(options);
		
		this.listElement = $(listElement);
		this.listElement.getChildren('li').each(function(el, i) {
				if(i < this.options.visiblePictures) {
					el.setStyle('opacity', 1 - (this.options.fade * i));
					el.setStyle('z-index', Math.max(0, this.options.visiblePictures - i));
					el.setStyle('top', this.getTop(i) + 'px');
					el.setStyle('left', this.getLeft(i) + 'px');
				} else {
					el.setStyle('display', 'none');
					el.setStyle('z-index', 0);
				}
				el.setStyle('position', 'absolute');
			}, this);

		$(nextElement).addEvent('click', function(event) {
			that.step(1);
			event.stop();
			return false;
		});
		$(previousElement).addEvent('click', function(event) {
			that.step(-1);
			event.stop();
			return false;
		});
		
	},
	step: function(step) {
		if(this.running) return;
		this.running = true;
		
		var that = this;
		
		var fxs = new Array();		
		if(step > 0) {
			var liElement = this.listElement.getFirst('li').clone();
			liElement.setStyle('z-index', 0);
			liElement.setStyle('display', 'none');
			liElement.inject(this.listElement);
			
			this.listElement.getChildren('li').each(function(el, i) {
				if(i == 0) {
					el.setStyle('z-index', el.getStyle('z-index') + 1);
					var fx = new Fx.Morph(el, this.options.fxOptions);
					fx.addEvent('complete', function() {
						el.dispose();
					});
					fx.start({
						'opacity': 0,
						'top': this.getTop(-2),
						'left': this.getLeft(-2)
					});
					fxs.push(fx);
				} else if(i > 0 && i < this.options.visiblePictures + 1) {
					if(i == this.options.visiblePictures) {
						el.setStyle('opacity', 0);
						el.setStyle('display', 'block');
						el.setStyle('top', '0px');
						el.setStyle('left', this.getLeft(i) + 'px');
						
					}
					var fx = new Fx.Morph(el,
						$merge(this.options.fxOptions,
							{duration: this.options.fxOptions.duration + i * this.options.fxLag}));
					fx.start({
						'top': (el.getStyle('top').toInt() + this.options.spacing),
						'left': (el.getStyle('left').toInt() - this.options.spacing),
						'opacity': Math.max(el.getStyle('opacity') + this.options.fade, 
							1 - (this.options.fade * (this.options.visiblePictures - 1))),
						'z-index': el.getStyle('z-index').toInt() + 1
					});
					fxs.push(fx);
				} else {
					el.setStyle('display', 'none');
				}
			}, this);
		} else if(step < 0) {
			var liElement = this.listElement.getLast('li').clone();
			liElement.setStyle('z-index', this.options.visiblePictures + 1);
			liElement.setStyle('opacity', 1 - this.options.fade);
			liElement.setStyle('display', 'block');
			liElement.setStyle('top', this.getTop(-1));
			liElement.setStyle('left', this.getLeft(-1));
			liElement.inject(this.listElement, 'top');
			
			this.listElement.getChildren('li').each(function(el, i, els) {
				// all new front and visible pictures
				if(i < this.options.visiblePictures + 1) {
					el.setStyle('z-index', el.getStyle('z-index').toInt() - 1);
					var fx = new Fx.Morph(el,
						$merge(this.options.fxOptions,
							{duration: this.options.fxOptions.duration + i * this.options.fxLag}));

					// only the next visible ones 
					if(i < this.options.visiblePictures) {
						fx.start({
							'top': (el.getStyle('top').toInt() - this.options.spacing),
							'left': (el.getStyle('left').toInt() + this.options.spacing),
							'opacity': i == 0 ? 1 : el.getStyle('opacity') - this.options.fade 
						});
					} else {
						fx.start({
							'top': this.getTop(this.options.visiblePictures + 1),
							'left': this.getLeft(this.options.visiblePictures + 1),
							'opacity': 0,
							'z-index': 0
						});
						fx.addEvent('complete', function() {
							el.setStyle('display', 'none');
						});
					}
					if(i == els.length - 1) {
						fx.addEvent('complete', function() {

							el.dispose();
						});
					}
					fxs.push(fx);
				} else {
					el.setStyle('display', 'none');

					if(i == els.length - 1) {
						el.dispose();
					}
				}
			}, this);
		}
		
		var g = new Group(fxs);
		g.addEvent('complete', function() {
			that.running = false;
		});
	},
	getTop: function(i) {
		return (this.options.visiblePictures - i) * this.options.spacing;
	},
	getLeft: function(i) {
		return (this.options.marginLeft + (this.options.spacing * i));
	}	
});

window.addEvent('domready', function() {
	var previousLink = new Element('a', {
		'id': 'previous',
		'href': '#',
		'text': '&laquo; zurück'
	});
	previousLink.inject($('picture-wrap'));	
	var nextLink = new Element('a', {
		'id': 'next',
		'href': '#',
		'text': 'nächstes &raquo;'
	});
	nextLink.inject($('picture-wrap'));
	var slide = new NJS.PictureSlide('picture-list', 'previous', 'next');
});