var SlideShow = new Class({
	Implements : [Options, Events],
	options : {
		// main slideshow list
		container : null,
		// next button
		nextTrigger : null,
		// previous button
		previousTrigger : null,
		// interval between auto scrolls
		autoPlayDelay: 5000
	},
	current : null,
	initialize : function(options) {
		this.setOptions(options);
		this.loadImages();
		this.frames = $(this.options.container).getElements('li');
		this.current = 0;
		var slideshow = this;
		$(this.options.previousTrigger).addEvents({
					'mouseover' : function() {
						$clear(slideshow.autoPlay);
						this.addClass('active');
					},
					'mouseout' : function() {
						this.removeClass('active');
					},
					'click' : function() {
						slideshow.previous();
					}
				});
		$(this.options.nextTrigger).addEvents({
					'mouseover' : function() {
						$clear(slideshow.autoPlay);
						this.addClass('active');
					},
					'mouseout' : function() {
						this.removeClass('active');
					},
					'click' : function() {
						slideshow.next();
					}
				});
		$(this.options.container).addEvents({
					'mouseleave':function(){
						slideshow.autoPlay = slideshow.next.periodical(slideshow.options.autoPlayDelay,slideshow);
					},
					'mouseenter':function(){
						$clear(slideshow.autoPlay);
					}
				});
		this.frames.each(function(item){
			item.addEvents({
				'mouseenter':function(){
					var info = item.getElement('span.info');
					if(info)
						info.tween('margin-top',(160-item.getSize().y));
//						info.tween('margin-top',-item.getSize().y/6);
				},
				'mouseleave':function(){
					var info = item.getElement('span.info');
					if(info)
						info.tween('margin-top',0);
				}
			});
		});
		this.autoPlay = this.next.periodical(this.options.autoPlayDelay,this);
                this.next();
	},
	loadImages : function() {
		$(this.options.container).getElements('li').each(function(frame) {
					var loader = frame.getElement('span.loading');
					var img = new Asset.image(frame.getProperty('title'), {
								onload : function() {
									this.replaces(loader);
									frame.removeProperty('title');
								}
							});
				});
	},
	previous : function() {
		var container = $(this.options.container);
		var last = container.getLast('li');
		last.setStyle('margin-left' , -(last.getSize().x) + 'px');
		last.inject(container,'top');
		var lastMorph = new Fx.Morph(last,{
									  link:'chain'
							});
		lastMorph.start({'margin-left':0});
	},
	next : function() {
		var container = $(this.options.container);
		var first = container.getFirst('li');
		var firstMorph = new Fx.Morph(first,{
                                                                          transition: 'linear',
                                                                          duration: 4960,
									  link:'stop',
									  onComplete:function(el){
										  el.inject(container,'bottom');
										  el.setStyle('margin-left','0px');
									  }
							});
		firstMorph.start({'margin-left':-(first.getSize().x)});
	}
});


window.addEvent('domready', function() {
			var slideShow = new SlideShow({
						container : 'slideshow',
						previousTrigger : 'previous',
						nextTrigger : 'next'
					});
		});