hhtTeaser = new Class({
	
	
	initTabs : function(){
		
			// 
		hhtTeaserList = {};	
						
			
			// add toggle events
		$$('div.hht_teaser a.button').addEvent('click', function(e){
			e = new Event(e);
			var item   = e.target;
			var item = e.target;
			while (item.hasClass('button') == false && item.getParent()  ){
				item = item.getParent();
			}
			hhtTeaser.toggleTab(item);
		});
		
			// add command events	
		$$('div.hht_teaser a.controller').addEvent('click', function(e){
			var event = new Event(e);
			var item  = new Element( event.target );
			while (item.hasClass('controller')  == false && item.getParent() ){
				item = new Element( item.getParent() );
			}
			var action = item.getProperty('hht:action');
			hhtTeaser.executeCommand(action, item);
			event.stop();
		});
			
			// add blur on focus event
		$$('div.hht_teaser a.button, div.hht_teaser a.controller').addEvent('focus', function(e){
			e = new Event(e);
			var item = e.target;
			item.blur();
		});
		
			// find all tabs_teaser elements
		$$('div.hht_teaser').each(function(tab_teaser, i){

				// find tab container
			var content = $E('div.tabs',tab_teaser );
			
			if (content) {
				$ES('div.tab', content ).each(function(tab, i){
					tab.setStyle('position','absolute');
					if (i > 0){ // inactive items
						tab.setProperty('hht:active','false');
						tab.setStyle('display','none');
						tab.setStyle('opacity',0);
					} else { //active
						tab.setProperty('hht:active','true');
						tab.setStyle('display','block');
						tab.setStyle('opacity',1);
						if (tab.getSize().size.y > 0) {
							content.setStyle('height',tab.getSize().size.y);
						} else {
							content.setStyle('height','');
						}
					}
				});
			
				
				var tabs    = $ES('div.tab', content);
				
					// check for current tab and activate otherwise activate first
				
					// find tabs container 
				var buttons = $ES('div.buttons',tab_teaser ).each(function(tab_area){
						// enable container
					tab_area.setStyle('display','block');
				});
				
				if ( tabs.length > 1) {
					var first_tab = $E('div.tab', content );
					if (first_tab){
						hhtTeaser.activateTab(first_tab);
					}
				}
	
				
					// find control and activate
				$ES('div.control',tab_teaser).each(function(item){
					item.setStyle('display','block');
				});
				
					// if 
				if ( tab_teaser.id   ){
					var id = tab_teaser.id;
					hhtTeaserList[id] = {object:tab_teaser, current:$E('div.tab',tab_teaser) };
				
					// show prev next items and start autorun
					if (tab_teaser.getProperty('hht:autorun') == 'true' ){
						hhtTeaserList[id]['timeout']  = hhtTeaser.executeCommand.periodical( 8000, this, ['next',tab_teaser]);
					}
				}
			}
		});
	},
	
	updateTabContainer:function(){
			// find all teaser items
		$$('div.hht_teaser').each(function(teaser, i){
			// check if the teaser is a tabTeaser
			if (hhtTeaserList[teaser.id ]){
				var current = hhtTeaserList[teaser.id ].current;
				var tabs = $E('div.tabs', teaser);
				if (tabs && current){
					tabs.setStyle('height',current.getSize().size.y);
				}
			}
		});
		 
	},
	
	toggleTab :function (item) {
		
		item = new Element(item);
			// get parent form
		var tab_container = item.getParent(); 
		while (tab_container.hasClass('hht_teaser') === false && tab_container.getParent() ) {
			tab_container =  tab_container.getParent();
		}	

			// get value from attribute
		var tab_id = item.getProperty('hht:tab_id');
		var target_tab = $E('div.tabs #'+tab_id , tab_container);

		if (target_tab)	{
				// activate tab
			hhtTeaser.activateTab(target_tab);
		}
	},
	
	activateTab : function(target_tab){

		target_tab = new Element(target_tab);
		
			// find container
		var tab_container = target_tab;
		while (tab_container.hasClass('hht_teaser') === false && tab_container.getParent() ) {
			tab_container = tab_container.getParent();
		}
		var tabs = $E('div.tabs', tab_container);
		
			// find tab in global list
		if (tabs){
			$ES('.tab', tab_container).each( function(tab,i){

				if ( target_tab == tab ){
					
						/***********************
						** show hidden images **
						***********************/
						
						var images = $ES('img', tab);
						images.each(function(image){
							var fn = function(image){
								var delayed_src = image.getProperty('hht:delayed_src');
								var current_src = image.getProperty('src');
								if (delayed_src && current_src) {
									if (delayed_src != current_src) {
										image.setProperty('src', delayed_src);
										image.removeProperty('hht:delayed_src');
									}
								}
							};
							fn.delay(12, this, image);
						});
						
						/************
						** fade in **
						*************/
						
					 if ( hhtTeaserList[tab_container.id]  ){
					 	hhtTeaserList[tab_container.id].current = tab;
					 }
					 
					 if ( tab.style.display != 'block' || tab.style.opacity < 1 ){

							// prepare
						tab.setStyle('opacity',0);
						tab.setStyle('display','block');
						tab.setStyle('position','absolute');
							// fade in						
						var fade_fx = new Fx.Styles(tab, {duration:600, wait:false, fps:16});
						fade_fx.start({ 'opacity': 1 });
							// change size of container
						var size_fx = new Fx.Styles(tabs, {duration:600, wait:false, fps:16});
						size_fx.start({ 'height': tab.getSize().size.y});
						
					}
					
				} else {
					
						/*************
						** fade out **
						**************/
					 
					if (tab.style.display != 'none') {
						var fx = new Fx.Styles(tab, {duration:400, wait:false, fps:16});
						fx.start({ 'opacity': 0 }).chain(function(){
							tab.setStyle('display','none');
							tab.setStyle('position','absolute');
						})
					}
				}
			
					// update tab buttons
				$ES('.button', tab_container).each( function(button, i){
					if (button.getProperty('hht:tab_id') == target_tab.id){
						button.addClass("current");
					} else {
						button.removeClass("current");
					}
				});
			});
		}	
	},
	
	executeCommand : function (action, item){
		
		var tab_container = $(item); 
		
		while (tab_container.hasClass('hht_teaser') === false && tab_container.getParent() ) {
			tab_container = tab_container.getParent();
		}	
		
		

		var allTabs    = $ES('.tab',tab_container);
 		currentTab = hhtTeaserList[ tab_container.id ].current;
 
		if (currentTab && allTabs.length>1) {
			switch (action){
				
				case 'prev':
					var currentPos = allTabs.indexOf(currentTab);
					var nextPos = (currentPos - 1 + allTabs.length )%allTabs.length;
					hhtTeaser.activateTab( allTabs[ nextPos ] );
					break;
					
				case 'next': 
					var currentPos = allTabs.indexOf(currentTab);
					var nextPos = (currentPos + 1 + allTabs.length)%allTabs.length;
					hhtTeaser.activateTab( allTabs[ nextPos ] );
					break;
					
				case 'play' :
					hhtTeaser.executeCommand('next',item);
					if (!hhtTeaserList[tab_container.id].timeout) {
						hhtTeaserList[tab_container.id]['timeout'] = hhtTeaser.executeCommand.periodical( 8000, this, ['next',item]);			
					}
						// togggle vivibility	
					$ES('a.controller', tab_container).each(function (item,i){
						switch (item.getProperty('hht:action')){
							case 'stop':
								item.style.display = 'inline';
								break;
							case 'play':
								item.style.display = 'none';
								break;							
						}
					});
					break;
					
				case 'stop' : 
					if ( hhtTeaserList[tab_container.id].timeout ) {
						$clear( hhtTeaserList[tab_container.id].timeout );
						hhtTeaserList[tab_container.id]['timeout'] = false;		
					}
					$ES('a.controller', tab_container).each(function (item,i){
						switch (item.getProperty('hht:action')){
							case 'stop':
								item.style.display = 'none';
								break;
							case 'play':
								item.style.display = 'inline';
								break;							
						}
					});

					break;
			}
		}
	}
});

window.addEvent('load', function()	{
	hhtTeaser = new hhtTeaser();
	hhtTeaser.initTabs();
});