///////////////////////////////////////////////////////////
// Class Tabs
// instantiated in Map
///////////////////////////////////////////////////////////

var Tabs = Class.create({
	

	///////////////////////////////////////////////////////////
	// initialize
	///////////////////////////////////////////////////////////
	
	initialize:function(container, map){
		
		this.container = container;
		this.map = map;
		
		this.CURRENT_STATE = 'kaart';
		
		// show tabs
		this.container.setStyle({ visibility: 'visible' });
		
		// find tab links
		this.links = $$('#'+ this.container.identify() +' li a');
		
		// catch click
		this.links.invoke('observe', 'click', this.toggleTabs.bind(this));
		
	},
	

	///////////////////////////////////////////////////////////
	// toggle tabs
	///////////////////////////////////////////////////////////

	toggleTabs:function(e){
		
		Event.stop(e);
		Event.element(e).blur()
		
		var el = Event.element(e);
		var rel = el.readAttribute('href').split('#')[1];
		
		// remove active classname from previously active
		$$('#'+ this.container.identify() +' li').invoke('removeClassName', 'active');
		
		// add active classname
		el.up().addClassName('active');
		
		
		// take further action
		if(rel != this.CURRENT_STATE){
			switch(rel){
			
				// show map
				case 'kaart':
					this.showMap();
				break;
			
				// show list
				case 'lijst':
					this.showList();
				break;
			}
		}
	},
	
	
	///////////////////////////////////////////////////////////
	// showMap
	///////////////////////////////////////////////////////////

	showMap:function(){
		
		this.CURRENT_STATE = 'kaart';
		
		// hide tooltip
		$('tooltip').hide();
		
		// observe markers
		this.map.markers.each(function(el, i){
			Event.observe(el[0], 'click', el[1]);
		}.bind(this));
		
		// swap classnames for map
		this.map.mapContainer.addClassName('interactive');
		this.map.mapContainer.removeClassName('static');
		
	},	
	
	
	///////////////////////////////////////////////////////////
	// showList
	///////////////////////////////////////////////////////////

	showList:function(){

		this.CURRENT_STATE = 'lijst';
		
		// hide tooltip
		$('tooltip').hide();
		
		// don't catch clicks
		this.map.markers.each(function(el, i){
			Event.stopObserving(el[0], 'click', el[1]);
		}.bind(this));

		// swap classnames for map
		this.map.mapContainer.removeClassName('interactive');
		this.map.mapContainer.addClassName('static');

	}
	
});