var Nav = Class.create();
Nav.prototype = {

	initialize: function() {
		this.effectDuration = 0.2;
		this.delay = this.effectDuration * 2;
	
		this.menuListItems = $$('#nav ul li a');
		this.backgroundImages = $$('#nav_button_bg_container .nav_button_bg');

		this.menuListItemCount = this.menuListItems.size();
		this.backgroundImagesCount = this.backgroundImages.size();
		
		this.backgroundEffects = new Hash();

		this.HIDE_EVERYTHING = 909;
		
		this.menuListItems.each(function(element, i) {
			element.observe('mouseover', function() { 
				this.activeIndex = this.backgroundImagesCount - this.menuListItemCount + i + 1; 
				this.checkActiveIndex();
			}.bind(this));
			
			element.observe('mouseout', function() { 
				this.activeIndex = this.HIDE_EVERYTHING;
				this.checkActiveIndex();
			}.bind(this));
		}, this);
	},
	
	checkActiveIndex: function() {
		if(this.activeIndex) {
			this.backgroundImages.each(function(bgImage, i) {
				var effect = null;
				if(this.activeIndex == i + 1) {
					effect = new Effect.Appear(bgImage, { queue: 'end', duration: this.effectDuration });
				} else if(bgImage.visible()) {
					effect = new Effect.Fade(bgImage, { queue: 'front', duration: this.effectDuration });
				}
				
				var oldEffect = this.backgroundEffects.get(i);
				if(oldEffect) 
					oldEffect.cancel();
				this.backgroundEffects.set(i, effect);
			}, this);

			this.activeIndex = null;
		}
	}
};