var Nav = new Class({
	initialize: function(container){
		this.home = $$('.enter-for-a-chance');
		this.nav = $(container).getElements('a');
		this.thumbs = $$('div.thumbs a');
		this.togglers = this.home.merge(this.nav);
		this.tabs = $$('div.tab');
		this.length = this.tabs.legth;
		this.active = 0;
		this.toggle();
	},
	toggle: function(){
		this.show(this.tabs[this.active]);

		this.togglers.each(function(el, i){
			el.addEvent('click', function(e){
				new Event(e).stop();
				if(i != this.active){
					this.hide(this.tabs[this.active]);
					this.togglers[this.active].removeClass('active');
					this.show(this.tabs[i]);
					el.addClass('active');
					this.active = i;
				}
			}.bind(this));
		}.bind(this));

		this.thumbs.each(function(el, i){
			el.addEvent('click', function(e){
				new Event(e).stop();
				this.hide(this.tabs[this.active]);
				this.show(this.tabs[(i+1)]);
				this.togglers[this.active].removeClass('active');
				this.togglers[(i+1)].addClass('active');
				this.active = (i+1);
			}.bind(this));
		}.bind(this));
	},
	show: function(el){
		new Fx.Style(el, 'opacity', {
			duration: 1000,
			transition: Fx.Transitions.Quint.easeInOut,
			onStart: function(){
				el.setOpacity(0);
				el.style.display = 'block';
			}.bind(this)
		}).start(0.0, 1.0);
	},
	hide: function(el){
		new Fx.Style(el, 'opacity', {
			duration: 1000,
			transition: Fx.Transitions.Quint.easeInOut,
			onComplete: function(){
				el.style.display = 'none';
			}.bind(this)
		}).start(1.0, 0.0);
	}
});

window.addEvent('domready', function(){
	new Nav('nav');
});