var pictures, Pictures = Class.create();
Pictures.prototype = {
	initialize: function(){
		this.container = $('pictures_container');
		this.prev = $('pictures_prev');
		this.next = $('pictures_next');
		
		this.prev.onclick = this.backward.bindAsEventListener(this);
		this.next.onclick = this.forward.bindAsEventListener(this);
		
		this.width = 250;
		this.index = 0;
		this.current = 0;
		this.interval = 5000;
		this.direction = true;
		this.timeout = false;
		this.objects = [];
		this.load();
	},
	
	automate: function(){
		if(this.index == 0)	this.direction = true;
		
		if(this.index == this.objects.length-1)	this.direction = false;
		
		if(this.direction) this.index++;
		else this.index--;
		
		this.timeout = window.setTimeout("pictures.move(); pictures.automate();", this.interval);
	},

	load: function(){
		new Ajax.Request('/welkom/get_last_pictures', {onComplete: function(){ pictures.done(); }});
	},

	add: function(id, filename){
		this.objects[this.objects.length] = new Picture(id, filename);
	},

	done: function(){
		this.container.style.width = (this.width * this.objects.length) + 'px';
	
		new Effect.Appear(this.container);
		new Effect.Appear(this.next);
		
		this.automate();
	},
	
	forward: function(){
		if(this.timeout){
			this.index = this.current++;
			window.clearTimeout(this.timeout);
		}
	
		this.index++;
		this.move();
	},
	
	backward: function(){
		if(this.timeout){
			this.index = this.current--;
		
			window.clearTimeout(this.timeout);
		}
	
		this.index--;
		this.move();
	},
	
	move: function(){
		new Effect.Move(this.container, {x: -(this.index * this.width), mode: 'absolute', transition: Effect.Transitions.EaseFromTo});
		
		if(this.index == 0) this.prev.style.display = 'none';
		else this.prev.style.display = '';
		
		if(this.index == this.objects.length-1) this.next.style.display = 'none';
		else this.next.style.display = '';
		
		this.current = this.index;
	}
}

var Picture = Class.create();
Picture.prototype = {
	initialize: function(id, filename){
		this.id = id;
		this.filename = filename;
		
		this.create();
	},
	
	create: function(){
		this.object = document.createElement('div');
		this.object.id = 'picture_' + this;
		this.object.style.backgroundImage = 'url(/picture/image/' + this.id + '/feature/' + this.filename + ')'
		pictures.container.appendChild(this.object);
	}
}