hhtKarussell = new Class({

	init:function(item){
		this.item = item;

			// teaser id's 
		this.teaser_ids = [];
		this.teaser_html = [];
		this.current_teaser = 0;
		
		
		var buttons = $ES('.control .preview .item', this.item);
		
			// click on teasers
		for (var i=0 ; i<buttons.length ; i++ ){
			var id = buttons[i].getProperty('hht:tab_id');
			this.teaser_ids.push(id);
			this.teaser_html.push( buttons[i].clone() );
			buttons[i].addEvent( 'click' , this.clickTeaser.bindWithEvent(this, [i] ) );
			
		}
		
			// click next and prev
		var next = $E('.control .nav_next', this.item);
		if (next) next.addEvent( 'click' , this.nextTeaser.bindWithEvent(this) );
		var next = $E('.control .nav_prev', this.item);
		if (next) next.addEvent( 'click' , this.prevTeaser.bindWithEvent(this) );

			// init preview
		this.showPreview(0);
	},	
	
	clickTeaser:function(e, num){
		this.showTeaser(num);
	},
	
	prevTeaser:function(){
		this.showTeaser( (this.current_teaser - 1 + this.teaser_ids.length) % this.teaser_ids.length );
	},
	
	nextTeaser:function(){
		this.showTeaser( (this.current_teaser + 1 + this.teaser_ids.length) % this.teaser_ids.length );
	},
	
	showTeaser:function(num){
		
		if (num == this.current_teaser)  return;
		
		var last_teaser = $E( '.tabs #'+this.teaser_ids[this.current_teaser], this.item);
		var next_teaser = $E( '.tabs #'+this.teaser_ids[num], this.item);
		
	//	console.debug( [ num, this.teaser_ids ,last_teaser, next_teaser] );
		
			// hide current teaser
		if ( last_teaser ) {

			if (last_teaser.style.display != 'none') {
				
				last_teaser.setStyles({
					'position':'absolute',
					'display': 'block',
					'opacity': 1
				});
				
				var last_fx = new Fx.Styles(last_teaser, {
					duration: 400,
					wait: false,
					fps: 16
				});
				
				last_fx.start({
					'opacity': 0
				}).chain(function(){
					last_teaser.setStyles({
						'position':'absolute',
						'display': 'block',
						'opacity': 0
					});
				});
			}
		}
		
		if ( next_teaser  ) {
			
				// load delayed images
			var images = $ES('img', next_teaser);
			for (var i = 0; i < images.length; i++) {
				var delayed_src =  images[i].getProperty('hht:delayed_src');
				var current_src =  images[i].getProperty('src'); 
				if ( delayed_src && current_src ){
					if ( delayed_src != current_src ){
						images[i].setProperty( 'src', delayed_src);
						images[i].removeProperty('hht:delayed_src');
					}
				}
			}
				
				// fade new teaser in
			if (next_teaser.style.display != "block" || next_teaser.style.opacity < 1) {
				
				next_teaser.setStyles({
					'display':'block',
					'position':'absolute',
					'opacity':0
				});
				
				var next_fx = new Fx.Styles(next_teaser, {
					duration: 400,
					wait: false,
					fps: 16
				});
				
				next_fx.start({
					'opacity': 1
				}).chain(function(){
					next_teaser.setStyles({
						'display':'block',
						'position':'absolute',
						'opacity':1
					});
				});
			}
		}				
		
			// updte preview
		this.showPreview(num);
		
			// save new number
		this.current_teaser = num;
	},
	
	showPreview:function(num){
			// update teaser preview 
		var preview = $E('.control .preview', this.item);
		if (preview){
				// remove old 
			preview.getChildren().each(function(el){
				el.remove();
			});
			 	// add new preview
			for (var i=0 ; i < this.teaser_ids.length ; i++ ){
				teaser_num = ( num + i - 1 + ( this.teaser_ids.length * 2 ) ) % this.teaser_ids.length;
				t = this.teaser_html[teaser_num].clone().injectInside(preview);
				t.addEvent( 'click' , this.clickTeaser.bindWithEvent(this, [teaser_num] ) );
				if (num == teaser_num ){
				 	t.addClass('item_current');
				}
			}		
		} 
	}
	
	
	
});

window.addEvent('load', function()	{
	
	$$ ("div.hht_karussell").each(function(item){
		item.hht_karussell = new hhtKarussell();
		item.hht_karussell.init(item);
	});
});