var Feature = Class.create();
Feature.prototype = {
	initialize: function(){
		this.controller = $('spaces_controller');
		
		this.spaces = [];
		this.addspaces();
		
		this.system = true;
		this.index = 0;
		
		new Effect.Move('helper', {x: 105, duration: 0.7});
		
		window.setTimeout(function(){
			new Effect.Move('helper', {x: -150, duration: 0.7});
		}, 4000);
		
		this.interval = window.setInterval(function(){
			if(!feature.system){
				window.clearInterval(feature.interval);
			} else {
				if(feature.index+1 >= feature.spaces.length){
					feature.index = 0;
				} else {
					feature.index++;
				}
				
				feature.spaces[feature.index].click(true);
			}
		}, 10000);
	},
	
	addspaces: function(){
		elements = document.getElementsByClassName('space_button');
		
		for(i=0; i<elements.length; i++){
			this.spaces[i] = new Space(elements[i], i);
		}
	},
	
	setinactive: function(){
		for(i=0; i<this.spaces.length; i++){
			this.spaces[i].setinactive();
		}
	}
}

var Space = Class.create();
Space.prototype = {
	initialize: function(button, index){
		this.index = index;
		this.button = button;
		this.name = button.id.replace('button_', '');
		this.info = $('info_' + this.name);
		
		this.active = false;
		
		if(index == 0){
			this.setactive();
		}
		
		this.button.onclick = this.click.bindAsEventListener(this);
	},
	
	click: function(system){
		new Effect.Appear(this.info);
		new Effect.Move(feature.controller, {x: -(this.index * 472), y: 0, mode: 'absolute', duration: 1.7});
		
		this.setactive();
		
		if(system !== true){
			feature.system = false;
		}
	},
	
	setactive: function(){
		if(feature){
			feature.setinactive();
		}
	
		this.button.style.border = '2px solid #FFFFFF';
	
		this.active = true;
	},
	
	setinactive: function(){
		this.info.style.display = 'none';
		this.button.style.border = '2px solid #000000';
	
		this.active = false;
	}
	
}