var Navigator = new Class({
	
	Implements: Options,
	
	page: parseInt(1),
	items: [],
	ajax: null,
	
	options: {
		pages: null,
		url: null,
		next_button: null,
		previous_button: null,
		ul: null
	},
	
	initialize: function(options) {
		var that = this;
		that.setOptions(options);
		that.options.next_button.addEvent('click', function(){ that.next();	});
		that.options.previous_button.addEvent('click', function(){ that.previous(); });
	},
	
	getitems: function() {
		this.items = this.options.ul.getElements('li');
	},
	
	next: function() {
		if ( this.page < this.options.pages  ) {
			this.page++;
			this.request();
		}
	},
	
	previous: function() {
		if ( this.page > 1 ) {
			this.page--; 
			this.request();
		}
	},
	
	fadein: function() {
		this.getitems();
		this.items.each(function(el, i) { (function() { new Fx.Tween(el).start('opacity', 0) }).delay(100 * i);	});
	},

	fadeout: function() {
		this.getitems();
		this.items.each(function(el, i) { (function () { new Fx.Tween(el).start('opacity', 1) }).delay(100 * i); });
	},
	
	request: function() {
		var that = this;
		that.fadein();
		(function() {
			that.clear();
			if ( that.ajax != null ) that.ajax.cancel();
			that.ajax = new Request.HTML({
				onComplete: function(tree, els, html) {	
					that.mount(els);
				}
			});
			that.ajax.get(that.options.url + that.page);
		}).delay(800);
	},
	
	clear: function() {
		this.items.each(function(el, i) {
			el.dispose();
		});
	},
	
	mount: function(els) {
		var that = this;
		var imgs = [];
		els.each(function(el) {
			if (el.tagName == "LI") {
				new Fx.Tween(el).set('opacity', 0);
				that.options.ul.grab(el);
			} else if (el.tagName == "IMG") {
				imgs.push(el.src);
			}
		});
		new Asset.images(imgs, {
			onComplete: function(){
				that.fadeout();	
			}
		});
	}
});