var Slideshow = new Class({

	Implements: [Options,Events],
	
	Binds: [
		'initializeData',
		'transitionComplete',
		'imageLoaded',
		'next',
		'previous',
		'play',
		'stop'
	],

	options: {
		url: document.location.href,
		cycle: true,
		animate: true,
		loop: 5000,
		duration: 1000,
		transition: 'cubic:in:out',
		hideNavigation: false
	},

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

	initialize: function(element, options){
		var self = this;
		this.setOptions(options);
		
		this.container = document.id(element);
		this.container.addEvents({
			mouseenter: this.stop,
			mouseleave: function(){
				if(self.options.animate)
					self.play();
			}
		});
		this.scroller = this.container.getElement('ul');
		
		this.fx = new Fx.Tween(this.scroller, {
			property: 'margin-left',
			link: 'cancel',
			duration: this.options.duration,
			transition: this.options.transition,
			onComplete: this.transitionComplete
		});

		this.nextButton = this.container.getElement('.next');
		if(this.nextButton){
			this.nextButton.set('tween', { link: 'cancel'});
			this.nextButton.addEvent('click', this.next);
		}
		
		this.previousButton = this.container.getElement('.previous');
		if(this.previousButton){
			this.previousButton.set('tween', { link: 'cancel'});
			this.previousButton.addEvent('click', this.previous);
		}
		this.request = new Request.JSON({
			url: this.options.url,
			onSuccess: this.initializeData/*,
			onFailure: function(xhr){console.log('error', xhr);}*/
		}).get();
	},
	
	toElement: function(){
		return this.container;
	},
	
	initializeData: function(json){
		this.urls = json;
		this.getPages();
		this.loadImage();
		if(this.scrollOffset.length > 1){
			if(this.options.animate)
				this.play();
		}
	},
	
	getPages: function(){
		var self = this;
		var pageWidth = this.container.getWidth();
		var count = 0, total = 0;
		this.scrollOffset = [];
		this.scrollOffset.push(0);
		this.urls.each(function(item, index){
			// Create all lis
			var li = new Element('li');
			self.scroller.adopt(li);
			self.items[index] = li;
			
			if(count >= pageWidth){
				total += count;
				self.scrollOffset.push(total);
				count = 0;
			}
			count += pageWidth;
		});
		this.scroller.setStyle('width', pageWidth * this.scrollOffset.length);
		this.fireEvent('pages', this.scrollOffset.length);
	},
	
	loadImage: function(){
		var url = this.urls[this.current];
		var img = Asset.image(url.image, {
			onload: this.imageLoaded.pass(img)
		});
		if(url.comment !== null)
			img.set('title', url.comment);
	},
	
	imageLoaded: function(img){
		var li = this.items[this.current];
		li.adopt(img);
		this.scroll();
		if(this.options.animate)
			this.play();
	},
	
	scroll: function(){
		var scroll = this.scrollOffset[this.current];
		if(scroll !== null)
			this.fx.start(-(scroll));
			
		this.fireEvent('change', this.current);
	},
	
	next: function(event){
		var self = this;
		if(event)
			event.preventDefault();
			
		if(this.options.hideNavigation)
			this.hideNavigation();
			
		this.stop();
		
		if(this.scrollOffset.length == 0) return;
		this.current++;
		if(this.current > this.scrollOffset.length-1)
			this.current = this.options.cycle ? 0 : this.scrollOffset.length-1;
			
		if(this.getCurrent())
			this.scroll();
		else
			this.loadImage();
	},
	
	getCurrent: function(){
		var li = this.items[this.current];
		if(li.getElement('img'))
			return li;
			
		return null;
	},
	
	transitionComplete: function(){
		this.showNavigation();
		if(this.options.animate)
			this.play();
	},

	next: function(event){
		var self = this;
		if(event)
			event.preventDefault();
			
		if(this.options.hideNavigation)
			this.hideNavigation();
			
		this.stop();
		
		if(this.scrollOffset.length == 0) return;
		this.current++;
		if(this.current > this.scrollOffset.length-1)
			this.current = this.options.cycle ? 0 : this.scrollOffset.length-1;
		
		if(this.getCurrent())
			this.scroll();
		else
			this.loadImage();
	},

	previous: function(event){
		if(event)
			event.preventDefault();
			
		if(this.options.hideNavigation)
			this.hideNavigation();
			
		this.stop();
		
		if(this.scrollOffset.length == 0) return;
		this.current--;
		if(this.current < 0)
			this.current = this.options.cycle ? this.scrollOffset.length-1 : 0;
		
		if(this.getCurrent())
			this.scroll();
		else
			this.loadImage();
	},
	
	gotoSlide: function(pos){
		this.current = pos;
		if(this.getCurrent())
			this.scroll();
		else
			this.loadImage();
	},
	
	play: function(){
		clearInterval(this.timer);
		this.timer = this.next.periodical(this.options.loop, this);
	},
	
	stop: function(){
		clearInterval(this.timer);
	},
	
	showNavigation: function(){
		if(this.nextButton){
			this.nextButton.fade('in');
		}
		if(this.previousButton){
			this.previousButton.fade('in');
		}
	},
	
	hideNavigation: function(){
		if(this.nextButton){
			this.nextButton.fade('hide');
		}
		if(this.previousButton){
			this.previousButton.fade('hide');
		}
	}
});

var Navigation = new Class({
	
	Implements: [Options, Events],
	
	Binds: [
		'click'
	],
	
	options: {
		symbol: '●'
		//onChange
	},
	
	pages: null,
	
	initialize: function(element, options){
		this.element = document.id(element);
		this.setOptions(options);
		this.element.addEvent('click:relay(a)', this.click);
	},
	
	setElements: function(){
		this.elements = this.element.getElements('li');
		this.elements[0].addClass('active');
	},
	
	createElements: function(num){
		var self = this;
		this.element.empty();
		num.each(function(i){
			self.element.adopt(
				new Element('li').adopt(
					new Element('a', {href: '#', text: self.options.symbol})
				)
			);
		});
		this.setElements();
	},
	
	setActive: function(active){
		this.elements.removeClass('active');
		this.elements[active].addClass('active');
	},
	
	click: function(event, a){
		event.preventDefault();
		this.fireEvent('change', this.elements.indexOf(a.getParent()));
	}
});


/*var Comments = new Class({
	
	Binds: [
		'changeComment'
	],
	
	initialize: function(element, getCommentFn){
		this.element = document.id(element);
		this.getComment = getCommentFn;
		
		this.fx = new Fx.Tween(this.element, {
			property: 'opacity',
			link: 'cancel',
			onComplete: this.changeComment
		});
		
		this.fx.set(0);
	},
	
	changeComment: function(){
		if(this.element.getStyle('visibility') == 'hidden'){
			var text = this.getComment();
			if(text){
				this.element.set('text', text);
				this.fx.start(.85);
			}
		}
	},
	
	change: function(){
		this.fx.start(0);
	},
	
	toElement: function(){
		this.element;
	}
});
*/