if (!document.trace) {
	this.trace = function(output) {
		//if (console.log && output) console.log(output);
	}
}

var BucketNav = new Class({
	
	
	initialize : function(view) {
	
		if (!view) return;
		
		trace('BucketNav.initialize()');
		
		this.view = view;
		this.menuItems = this.view.getFirst().getChildren();
		this.contentItems = this.view.getChildren()[1].getChildren();
		this.numElements = this.menuItems.length;
		
		for (var i = 0; i < this.numElements; ++i) {
			var menuItem = this.menuItems[i];	
			menuItem.setStyle('cursor', 'pointer');	
			menuItem.addEvent('mousedown', this.onMenuItemSelect.bindWithEvent(this));
		}
		
		for (var j = 0; j < this.numElements; ++j) {
			var contentItem = this.contentItems[j];
			contentItem.setStyle('display', 'none');
			//contentItem.setOpacity(0);
		}
		
		this.currentIndex = -1;
		this.transitioning = false;
		
		this.setNav(0);
	},
	
	
	onMenuItemSelect : function(e) {
		this.setNav(this.getMenuItemIndex(e.target));
	},
	
	
	/**
	 * Set the current view state based on a nav index.
	 * @param 	index The nav index / view state index to set to.
	 */
	setNav : function(index) {
		trace('BucketNav.setNav(' + index + ')');
		
		if (index == this.currentIndex || this.transitioning) return;
		
		if (index < 0) index = 0;
		if (index > this.numElements - 1) index = this.numElements - 1;
		
		if (this.currentIndex >= 0) this.hideElementByIndex(this.currentIndex);
		this.showElementByIndex(index);
		
		this.transitioning = true;
		
		this.currentIndex = index;
	},
	
	
	onTransitionComplete : function(e) {
		this.transitioning = false;
	},
	
	
	showElementByIndex : function(index) {
		
		var contentItem = this.contentItems[index];
		
		contentItem.setStyle('display', 'block');
		contentItem.setOpacity(0);
		
		var scope = this;
		
		var fade = new Fx.Styles(contentItem, {duration: BucketNav.TRANSITION_DURATION, transition: Fx.Transitions.Cubic.easeInOut});
		fade.addEvent('onComplete', function() { scope.onTransitionComplete(); });
		
		fade.start({
			'opacity': [0, 1]
		});
		
		var menuItem = this.menuItems[index];
		menuItem.addClass('active');
	},
	
	
	hideElementByIndex : function(index) {
	
		var contentItem = this.contentItems[index];
		contentItem.setStyle('display', 'none');
		
		//var fade = new Fx.Styles(contentItem, {duration: BucketNav.TRANSITION_DURATION, transition: Fx.Transitions.Cubic.easeInOut});
		
		//fade.start({
			//'opacity': [1, 0]
		//});
		
		var menuItem = this.menuItems[index];
		menuItem.removeClass('active');
	},
	
	
	getMenuItemIndex : function(menuItem) {
		
		for (var i = 0; i < this.numElements; ++i) {
			if (this.menuItems[i] == menuItem) return i;
		}
		
		return -1;
	},
	
	
	toString : function() {
		return "[PanelMenu]";
	}
});


BucketNav.TRANSITION_DURATION = 200;