var RollOverBloc = Class.create();

RollOverBloc.prototype = {
	
	sClassName: 'RollOverBloc',
	
	// ----- PROPERTIES -----
	
	sTabId: 	'',
	sBlocId: 	'',
	
	oTabElement: 	null,
	oBlocElement: 	null,
	iBlocHeight: 	0,
	oBlocEffect: 	null,
	oClosingTimeout: null,
	
	// ----- CONSTRUCTOR -----
	
	initialize: function(sTabId, sBlocId)
	{
		this.trace('CONSTRUCTOR()');
		
		//
		this.sTabId 	= sTabId;
		this.sBlocId 	= sBlocId;
		
		//
		this.oTabElement = $(this.sTabId);
		if(this.oTabElement == null)
		{
			this.trace('ERROR - NO TAB');
			return(false);
		}
		
		//
		this.oBlocElement = $(this.sBlocId);
		if(this.oBlocElement == null)
		{
			this.trace('ERROR - NO BLOC');
			return(false);
		}
		this.iBlocHeight = this.oBlocElement.getHeight();
		this.oBlocElement.setStyle(
			{
				height: '1px'
			}
		);
		
		//
		this.oTabElement.observe('mouseover', this.onTabElementRollOver.bind(this));
		this.oTabElement.observe('mouseout', this.onTabElementRollOut.bind(this));
		this.oBlocElement.observe('mouseover', this.onBlocElementRollOver.bind(this));
		this.oBlocElement.observe('mouseout', this.onBlocElementRollOut.bind(this));
	},
	
	// ----- METHODS -----
	
	openBloc: function()
	{
		this.trace('openBloc()');
		
		//
		this.cancelEffect();
		this.oBlocEffect =  new Effect.Morph(
			this.oBlocElement,
			{
				duration: 0.5,
				style: 'height: '+ this.iBlocHeight +'px;'
			}
		);
	},
	
	closeBloc: function()
	{
		this.trace('closeBloc()');
		
		//
		this.cancelEffect();
		this.oBlocEffect =  new Effect.Morph(
			this.oBlocElement,
			{
				delay: 0.1,
				duration: 0.5,
				style: 'height: 1px;'
			}
		);
	},
	
	cancelEffect: function()
	{
		this.trace('cancelEffect()');
		
		//
		if(this.oBlocEffect != null)
		{
			this.oBlocEffect.cancel();
		}
	},
	
	cancelTimeout: function()
	{
		this.trace('cancelTimeout()');
		
		//
		if(this.oClosingTimeout != null)
		{
			clearTimeout(this.oClosingTimeout);
		}
	},
	
	// ----- EVENTS -----
	
	//
	onTabElementRollOver: function(event)
	{
		this.trace('onTabElementRollOver()');
		
		//
		this.cancelTimeout();
		this.openBloc();
	},
	
	// 
	onTabElementRollOut: function(event)
	{
		this.trace('onTabElementRollOut()');
		
		//
		this.oClosingTimeout = setTimeout(this.closeBloc.bind(this), 100);
	},
	
	//
	onBlocElementRollOver: function(event)
	{
		this.trace('onBlocElementRollOver()');
		
		this.cancelTimeout();
	},
	
	// 
	onBlocElementRollOut: function(event)
	{
		this.trace('onBlocElementRollOut()');
		
		//
		this.oClosingTimeout = setTimeout(this.closeBloc.bind(this), 100);
	},
	
	// ----- MISC -----
	
	trace: function(objToTrace)
	{
		if(typeof(console) != 'undefined')
		{
			if(typeof(objToTrace) == 'string')
			{
				console.log('['+ this.sClassName +'] '+ objToTrace);
			}
			else
			{
				console.log('['+ this.sClassName +'] >');
				console.log(objToTrace);
			}
		}
	}
};