var header_navigation, HeaderNavigation = Class.create();
HeaderNavigation.prototype = {
	initialize: function(){
		elements = $('header_navigation').select('li');
		this.buttons = [];
		
		for(i=0; i<elements.length; i++){
			this.buttons[i] = new HeaderNavigationButton(elements[i]);
		}
	}
}

HeaderNavigationButton = Class.create();
HeaderNavigationButton.prototype = {
	initialize: function(element){
		this.element = element;
		this.image = element.down('img');
		
		if(this.element.hasClassName('active')){
			this.image.setOpacity(0.01);
			this.image.src = this.image.src.replace('.png', '_active.png');
			
			this.image.appear({duration: 0.8});
		} else {
			this.element.onclick = this.click.bindAsEventListener(this);
			this.element.down('img').onmouseover = this.over.bindAsEventListener(this);
			this.element.down('img').onmouseout = this.out.bindAsEventListener(this);
		}
	},
	
	over: function(){
		if(!this.element.hasClassName('hover')){
			this.element.addClassName('hover');
		
			this.image.setOpacity(0.01);
			
			if(this.image.src.indexOf('_over') < 1) this.image.src = this.image.src.replace('.png', '_over.png');
			
			this.image.appear({duration: 0.4});
		}
	},
	
	out: function(){
		if(this.element.hasClassName('hover')){
			this.element.removeClassName('hover');
		
			this.image.setOpacity(0.01);
			if(this.image.src.indexOf('_over') > 1) this.image.src = this.image.src.replace('_over.png', '.png');
			
			this.image.appear({duration: 0.2});
		}
	},
	
	click: function(){
		this.image.fade({duration: 0.3, to: 0.01});
	}
}

var Navigation = Class.create();
Navigation.prototype = {
	initialize: function(){
		this.controller = $('pages');
		
		this.index = 0;
		this.pagewidth = 970;
		this.pages = [];
		this.addpages();
		
		this.controller.style.width = ((this.pagewidth * this.pages.length) + 50) + 'px';
	},
	
	addpages: function(){
		elements = document.getElementsByClassName('page');
		
		for(i=0; i<elements.length; i++){
			this.pages[i] = new NavigationPage(elements[i], i);
		}

		this.pages[0].setactive();
	},
	
	findactive: function(){
		for(i=0; i<this.pages.length; i++){
			if(this.pages[i].active){
				return this.pages[i];
			}
		}
	},
	
	goleft: function(){
		if((this.index-1) < 0){
			this.index = this.pages.length-1;
		} else {
			this.index--;
		}
		
		this.pages[this.index].click();
	},
	
	goright: function(){
		if((this.index+1) > this.pages.length-1){
			this.index = 0;
		} else {
			this.index++;
		}
		
		this.pages[this.index].click();
	}
}

var NavigationPage = Class.create();
NavigationPage.prototype = {
	initialize: function(element, index){
		this.index = index;
		
		this.button = $('button_' + element.id.replace('page_', ''));
		
		if(this.button){
			this.button.onclick = this.click.bindAsEventListener(this);
		}
		
		this.active = false;
	},
	
	click: function(){
		new Effect.Move(navigation.controller, {x: -(this.index * navigation.pagewidth), y: 0, mode: 'absolute', duration: 1});

		for(i=0; i<navigation.pages.length; i++){
			navigation.pages[i].setinactive();
		}
		
		this.setactive();
	},
	
	setactive: function(){
		if(this.button){
			this.button.className = 'active';
		}
		
		this.active = true;
	},
	
	setinactive: function(){
		if(this.button){
			this.button.className = '';
		}
		
		this.active = false;
	}
}

var instructions, Instructions = Class.create();
Instructions.prototype = {
	initialize: function(){
		this.button = $('instructions_button');
		this.content = $('instructions');
	},
	
	toggle: function(){
		Element.toggle(this.content);
	}
}