var Slideshow = new Class({

	Implements: [Options,Events],

	options: {
		cycle: true,
		animate: true,
		loop: 5000,
		duration: 1000,
		transition: 'cubic:in:out',
		hideNavigation: true
	},

	container: null,
	scroller: null,
	items: null,
	pages: [],
	current: 0,
	nextButton: null,
	previousButton: null,
	fx: null,
	timer: null,

	initialize: function(element, options){
		var self = this;
		this.setOptions(options);
		options = this.options;

		this.container = document.id(element);
		this.container.addEvents({
			swipe: function(event){
				if(event.direction == 'left')
					self.next();
				else
					self.previous();
			},
			mouseenter: function(){
				self.pauseIndicator.setStyle('display', 'block');
				self.stop();
			},
			mouseleave: function(){
				self.pauseIndicator.setStyle('display', 'none');
				if(self.options.animate)
					self.play();
			}
		});
		this.scroller = this.container.getElement('ul');
		this.items = this.scroller.getChildren('li');
		var width = 0;
		this.items.each(function(item){
			width += item.getWidth() + item.getStyle('margin-left').toInt() + item.getStyle('margin-right').toInt();
		});
		this.scroller.setStyle('width', width);

		this.fx = new Fx.Tween(this.scroller, {
			property: 'margin-left',
			link: 'cancel',
			duration: this.options.duration,
			transition: this.options.transition,
			onComplete: this.transitionComplete.bind(this)
		});
		this.pauseIndicator = this.container.getElement('.pause');
		this.nextButton = this.container.getElement('.next');
		this.previousButton = this.container.getElement('.previous');
		if(!Browser.Features.Touch){
			this.nextButton.set('tween', { link: 'cancel'});
			this.nextButton.addEvent('click', this.next.bind(this));
			this.previousButton.set('tween', { link: 'cancel'});
			this.previousButton.addEvent('click', this.previous.bind(this));
		}

		this.getPages();

		if(this.pages.length > 1){
			this.hideNavigation();
			if(!Browser.Features.Touch){
				this.showNavigation();
			}
			if(this.options.animate)
				this.play();
		}
	},

	getPages: function(){
		var self = this;
		var pageWidth = this.container.getWidth();
		var count = 0, total = 0;
		this.pages = [];
		this.pages.push(0);
		this.items.each(function(item){
			if(count >= pageWidth){
				total += count;
				self.pages.push(total);
				count = 0;
			}
			count += item.getWidth().toInt();
		});
		this.fireEvent('pages', this.pages.length);
	},

	getCurrent: function(){
		return this.items[this.current];
	},

	transitionComplete: function(){
		if(!Browser.Features.Touch){
			this.showNavigation();
		}
		if(this.options.animate)
			this.play();
	},

	next: function(event){
		if(event)
			event.preventDefault();

		if(this.options.hideNavigation && !Browser.Features.Touch)
			this.hideNavigation();

		this.stop();

		if(this.pages.length == 0) return;
		this.current++;
		if(this.current > this.pages.length-1)
			this.current = this.options.cycle ? 0 : this.pages.length-1;

		this.scroll();
		this.fireEvent('change', this.current);
	},

	previous: function(event){
		if(event)
			event.preventDefault();

		if(this.options.hideNavigation && !Browser.Features.Touch)
			this.hideNavigation();

		this.stop();

		if(this.pages.length == 0) return;
		this.current--;
		if(this.current < 0)
			this.current = this.options.cycle ? this.pages.length-1 : 0;

		this.scroll();
		this.fireEvent('change', this.current);
	},
	
	hideNavigation: function(){
		this.nextButton.fade('hide');
		this.previousButton.fade('hide');
	},
	
	showNavigation: function(){
		this.nextButton.fade('in');
		this.previousButton.fade('in');
	},
	
	play: function(){
		clearInterval(this.timer);
		this.timer = this.next.periodical(this.options.loop, this);
	},
	
	stop: function(){
		clearInterval(this.timer);
	},
	
	gotoSlide: function(pos){
		this.current = pos;
		this.scroll();
		this.fireEvent('change', this.current);
	},
	
	scroll: function(){
		var scroll = this.pages[this.current];
		if(scroll != undefined)
			this.fx.start(-(scroll));
	}
});

var DotNavigation = new Class({

	Implements: [Options, Events],

	options: {
		symbol: '●'
		/*
		onChange
		*/
	},

	pages: null,

	initialize: function(element, options){
		this.element = document.id(element);
		this.setOptions(options);
		this.element.addEvent('click:relay(li)', this.click.bind(this));
	},

	setNumberOfPages: function(numberOfPages) {
		var self = this;
		this.pages = [];
		this.element.empty();
		numberOfPages.each(function(i){
			self.pages[i] = new Element('li', {text: self.options.symbol});
			self.element.adopt(self.pages[i]);
		});
		this.pages[0].addClass('active');
	},

	setActive: function(activePage){
		this.pages.each(function(li){ li.removeClass('active'); });
		this.pages[activePage].addClass('active');
	},

	click: function(event){
		event.preventDefault();
		var li = document.id(event.target);
		this.fireEvent('change', this.pages.indexOf(li));
	}
});