var dmsTabs = new Class ({
	
	init:function(tab_area){
		
		this.tab_area = tab_area;
		this.buttons  = $ES('.dms_tab_buttons .dms_tab_button',tab_area);
		this.contents = $ES('.dms_tab_contents .dms_tab_content',tab_area);
		
			// add events
		for (var k = 0; k<this.buttons.length; k++){
			var button = new Element( this.buttons[k] );
			button.addEvent('click', this.click_tab.bindWithEvent(this ) );
			
		}
			// set size
		var tab_area_width = false;
		if ( tab_area.getProperty('dms:tab_fullwidth')=="true" ){
			var tab_area_size  = tab_area.getSize();
			tab_area_width = tab_area_size.size.x;
		}		
		
		if ( tab_area.getProperty('dms:tab_width') ){
			tab_area_width = parseInt( tab_area.getProperty('dms:tab_width') );			
		}
		
		if (tab_area_width)	{
			var button_number = this.buttons.length;
			var button_padding = 8;

				// fixed width for some buttons
			for (var k = 0; k<this.buttons.length; k++){
				var button = new Element( this.buttons[k] );
				var width  = button.getProperty('dms:tab_width');
				if ( width > 0 ){
					$E('span' , button).setStyle('width', '' + (width-button_padding) + 'px' );
					button_number --; 
					tab_area_width -= width;
				} 
			}
				// calculate width for flexible buttons
			var button_width = Math.round( (tab_area_width / button_number ) - button_padding );
			var first_button_width  =  tab_area_width - button_padding - ( (button_width + button_padding) * (button_number -1 ) );

				// set width of buttons			
			var is_first_rendered = false;
			for (var k = 0; k<this.buttons.length; k++){
				var button = new Element( this.buttons[k] );
				if (!button.getProperty('dms:tab_width')) {
					if (is_first_rendered == false){
						$E('span' , button).setStyle('width', '' + first_button_width + 'px' );
						is_first_rendered = true;
					} else {
						$E('span' , button).setStyle('width', '' + button_width + 'px' );
					}
				}
			}
		}
			// handle autostart && anchor
		var autostart_id = false
		if ( tab_area.getProperty('dms:tab_autoload') ) {
			autostart_id = tab_area.getProperty('dms:tab_autoload');
		}
		if ( window.location.hash ) {
			var hash = window.location.hash;
			autostart_id = hash.substring(1);
		}

		if ( autostart_id)	{
			for (var k = 0; k<this.buttons.length; k++){
				var button = new Element( this.buttons[k] );
				if (button.getProperty('dms:tab_id') == autostart_id){
					this.activate_button(button);
				}	
			}
		}
		
		/*
			// activate first tab
		
		if (buttons.length > 0){
			var tab_id = buttons[0].getProperty('dms:tab_id');
			this.activate_tab(tab_id, tab_area);
		}
		*/
		
	},
	
	click_tab:function (event){
		var event = new Event(event);
		if ( this.activate_button(event.target) ) {
			event.stop();
		} 
	},
	
	
	
	
	activate_button:function (target){
	
		while (!target.hasClass('dms_tab_button') && target.getParent() ){
			target = target.getParent();
		}
		if (target.hasClass('dms_tab_button') ){ 
			var tab_id = target.getProperty('dms:tab_id');
			var tab_ajax_url = target.getProperty('dms:tab_ajax_url');

			if ( tab_id && $E( '#'+tab_id, this.tab_area ) ) { //activate present tab
				this.activate_tab(tab_id);
				return true;
			} else if ( tab_ajax_url ) { //activate ajax tab
					// open tab if already there
				if ( !target.dms_tab_id ) {
					
						// create tab
					var tab = new Element('div');
					tab.addClass ('dms_tab_content');
					tab.injectInside( $E('.dms_tab_contents',this.tab_area) ); 
					
						// add loading info
					var msg = '';
					var t = '';
					if ( target.getProperty('dms:tab_ajax_msg_head') ) msg += '<h2>'+ target.getProperty('dms:tab_ajax_msg_head') +'</h2>';
					msg += '<p><img src="img/geduld_anim.gif" width="123" height="62" alt="" title="" /></p>';
					if ( target.getProperty('dms:tab_ajax_msg_body') ) msg += '<p>'+ target.getProperty('dms:tab_ajax_msg_body') +'</p>';

					var loading_msg = new Element('div');
					loading_msg.addClass('dms_tab_loading');
					loading_msg.setHTML( msg );
					loading_msg.injectInside(tab);
					
						// set ids
					if (!tab_id) {
						tab.id = 'dms_tab_' + Math.round( Math.random() * 99999 );
					} else {
						tab.id = tab_id;
					}
					target.dms_tab_id = tab.id;
						// start ajax loading 
					var ajax = new Ajax(
						tab_ajax_url, 
						{
							method: 'get',
							update: tab
						}
					);
					ajax.request();
				} 
				
					// activate tab
				if ( target.dms_tab_id ) {
					this.activate_tab(target.dms_tab_id);
				}	
				return true;
			} else { // use as normal link
				// let the event roll

			}
			
		}
	},
	
	activate_tab_id:function(id){
			// find button and activate
		for (var k = 0; k<this.buttons.length; k++){
			var button = new Element( this.buttons[k] );
			if (button.getProperty('dms:tab_id') == id){
				this.activate_button(button);
			}	
		}
	},
	
	activate_tab:function (tab_id){

		if (tab_id  ){
				//activate buttons
			var buttons  = $ES('.dms_tab_buttons .dms_tab_button',this.tab_area);
			for (var i=0 ; i<buttons.length ; i++){
				var button = new Element( this.buttons[i]);
				if (button.getProperty('dms:tab_id')==tab_id){
					button.addClass('active');
				} else {
					button.removeClass('active');
				}
			}
				// activate contents
			var contents = $ES('.dms_tab_contents .dms_tab_content',this.tab_area);
			for (var i =0 ; i<contents.length ; i++){
				var content = new Element(contents[i]);
				if (content.getProperty('id')==tab_id){
					content.addClass('active');
				} else {
					content.removeClass('active');
				}
			}
		}
	}
	
});

window.addEvent('domready', function()	{		
	$$('#dms_content div.dms_tabbed_area').each(function(tabbed_area){
		tabbed_area.dms_tabs = new dmsTabs();
		tabbed_area.dms_tabs.init(tabbed_area);
	});
	
});