/**
 * @author Joshi
 */

var reemers = {
	teasers : [],
	initTeaser : function  ()
	{
		$$('.teaser').each ( function ( div )
		{
			reemers.teasers.push(new reemers.Teaser(div));
		});
	},
	Teaser : Class.create(),
	toggleSize : function () 
	{
		if ( $('increase'))
		{
			$('increase').observe ( 'click', function (ev) 
			{
				Event.stop ( ev );
				$(document.body).setStyle({
					'fontSize': ( parseInt ( $(document.body).getStyle('fontSize') )) + 1 + 'px'
				})
				$$('img').each ( function (img){
					img.setStyle({
						'fontSize': ( parseInt ( img.getStyle('fontSize') )) + 1 + 'px'
					})
				});
			});
			$('decrease').observe ( 'click', function (ev) 
			{
				Event.stop ( ev );
				$(document.body).setStyle({
					'fontSize': ( parseInt ( $(document.body).getStyle('fontSize') )) - 1 + 'px'
				});
				$$('img').each ( function (img){
					img.setStyle({
						'fontSize': ( parseInt ( img.getStyle('fontSize') )) - 1 + 'px'
					})
				});
			});
		}
	}
};


reemers.Teaser.addMethods 
({
	initialize: function (container)
	{
		this.activeElement = null;
		this.container = container;
		this.indexIt();
		this.setActiveElement ( this.container.down('ul.thumbs a') );
		this.startImageChanger();
		
		
	},
	startImageChanger : function () 
	{
		var self = this;
		this.pe  = new PeriodicalExecuter (function () 
		{
			self.hideActiveElement ();
			self.setActiveElement ( self.activeElement._nextElement );
		},5);
	},
	indexIt : function () 
	{
		var firstElement = null;
		var currentElement = null;
		
		this.container.select('ul.thumbs a').each ( function ( a )
		{
			a._target = null;
			
			if ( (rel = a.rel) || (rel = a.getAttribute('rel')) ) 
			{
				if ( target = $(rel) )
				{
					if ( firstElement === null )
					{
						firstElement = a;
					}
					
					if ( currentElement )
					{
						currentElement._nextElement = a;
					}
					
					if ( ! a.up('li').next('li') )
					{
						a._nextElement = firstElement;
					}
					
					currentElement = a;
					
					a._target = target;
					this.bindEvent( a );
					a._target.hide();
				}
			}
		},this);
	},
	bindEvent : function (a) 
	{
		a.observe ( 'mouseover', function ( ev )
		{
			Event.stop ( ev );
			this.pe.stop();
			
			if (a != this.activeElement )
			{
				this.hideActiveElement();
				this.setActiveElement ( a );
			}
		}.bindAsEventListener(this));
		
		a.observe ('mouseout',function(ev)
		{
			this.pe.stop();
			this.startImageChanger();
		}.bindAsEventListener(this));
	},
	hideActiveElement : function () 
	{
		var self=this;
	
		if ( this.activeElement )
		{
			new Effect.Fade (self.activeElement._target,{duration:0.5, 
			beforeStart:function()
			{
				var queue = Effect.Queues.get('out');
				queue.each (function(effect){
					/*effect.cancel();
					effect.element.setStyle({display:'none'});*/
				});
			},queue:{position:'front', scope:"out"}});
			self.activeElement.removeClassName ('active');
			self.activeElement._target.removeClassName ('active');	
		}
	},
	setActiveElement : function ( a )
	{
		var self = this;
		a._target.addClassName( 'active' );
		a.addClassName ( 'active' );
		
		a._target.appear ( {from:0, to:1,duration:0.5,queue:{position:'front', scope:"in"},
		beforeStart : function () 
		{
			var queue = Effect.Queues.get('in');
			queue.each (function(effect){
				effect.cancel()
				new Effect.Fade ( effect.element, {duration:0.3} );
			});
		},
		afterFinish:function(){
			a._target.setStyle({display:'block'});
		}});
		self.activeElement = a;
	}
}); 
document.observe ( 'dom:loaded', function (ev )
{
	reemers.initTeaser();
	reemers.toggleSize();
});