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 (clicked.id != 'noTab') {
				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';
					
					if (viewPanel.id == 'BookingTabNavigationTabContent1') {
						viewPanel.up(0).up('#resortBooking').addClassName('resortBookingBgNew');
					}else{ viewPanel.up(0).up('#resortBooking').removeClassName('resortBookingBgNew') }					
					
					this.lastSelected.removeClassName(this.lastSelected.identify() + 'Selected');
					this.lastSelected.removeClassName('selected');
					
					viewPanel.style.opacity = '0';
					viewPanel.style.display = 'block';
					
					new Effect.Appear(this.listId + clicked.tabContent, {
						duration: 0.2
					});
					
					clicked.addClassName(clicked.identify() + 'Selected');
					clicked.addClassName('selected');
					this.lastSelected = clicked;
				}
				
				Event.stop(event);
			}
		}.bindAsEventListener(this));
	}
});