StackBase= Class.create({
  	initialize: function(){
		this.cycle = true;
		this.__selectedIndex = this.selectedIndex = 0;
  		this.items = this.childElements();

  	},
	addChild: function(child){
		var ret = this.insert({bottom:child});
		this.items = this.childElements();
		return ret;
	},
	addChildAt: function(child, id){
		var ret = this.items[id].insert({before:child});
		this.items = this.childElements();
		return ret;
	},
	removeChild: function(id){
		var ret = this.items[id].remove();
		this.items = this.childElements();
		return ret;
	},
	removeChildren: function(startIndex, length){
		var ret = new Array();
		for(var i = startIndex; i < length; i++)
			ret[i] = this.items[id].remove();
		this.items = this.childElements();
		return ret;
	},
	setSelectedIndex: function(index){
		if(this.__selectedIndex != index){
			this.__selectedIndex = this.selectedIndex = index;
			this.fire('event:change');
		}
	},
	next: function(){
		var si = this.__selectedIndex + 1;
		if(this.cycle && si >= this.items.length)
			si = 0;
		else if(si >= this.items.length)
			si = this.items.length - 1;
		this.setSelectedIndex(si);

	},
	prev: function(){
		var si = this.__selectedIndex - 1;
		if(this.cycle && si < 0)
			si = this.items.length - 1;
		else if(si < 0)
			si = 0;
		this.setSelectedIndex(si);

	}
});

ViewStack = Class.create(StackBase, {
  	initialize: function($super){
		$super();
		this.__lastIndex = -1;
		this.observe('event:change', this.__onIndexChanged);
		this.__hideAll();
		this.items[this.__selectedIndex].show();
  	},
	__onIndexChanged: function(event){
		this.__hideAll();
		this.items[this.__selectedIndex].show();
		this.__lastIndex = this.__selectedIndex;
	},
	__hideAll: function(){
		for(var i = 0; i < this.items.length; i++){
			this.items[i].hide();
		}
	}

});