var TabView = Class.create({
	initialize: function(listId){
		this.listId = listId;
		this.numOfTabs = $$("#" + this.listId + " li").length;
		this.listElement = $$("#" + this.listId);
		this.lastSelected = $$("#" + this.listId + " li.selected")[0];
		this.tabArray = new Array();
		this.setupTabs();
		this.addListeners();
	},
	
	setupTabs: function(){
		var els = $$("#" + this.listId + " li");
		for(var i = 0; i < this.numOfTabs; i++){
			els[i].tabContent = "TabContent" + i;
		}
	},
	
	addListeners: function(){
		Event.observe(this.listElement[0],'click',function(event){
			var child = Event.element(event);
			var clicked = Event.findElement(event,"LI");
			if(this.lastSelected != clicked){
			var viewPanel = $(this.listId + clicked.tabContent);
			var lastSelectedPanel = $(this.listId + this.lastSelected.tabContent);

			lastSelectedPanel.style.display = "none";
			viewPanel.style.display = 'block';
			this.lastSelected.className = "";
			
			viewPanel.style.opacity = '0';
			viewPanel.style.display = 'block';
			new Effect.Appear(this.listId + clicked.tabContent,{duration:0.2});
			
			clicked.className = 'selected';
			this.lastSelected = clicked;
			}
			Event.stop(event);
		}.bindAsEventListener(this));
	}
});