var Bitrockers_hintLayer = new Class({
	
	iframe:		false,
	contextName: null,
	layerName: null,
	iFrameContextLayer: null,
	
	initialize:		function (pLayerName, pContextName)	{
		this.layerName = pLayerName;
		this.contextName = pContextName;
		window.onDomReady(this.onReady.bind(this));
		
	},
	
	onReady:		function ()	{
		
		// move layer to document.body context
		document.body.appendChild($(this.layerName));
		
		// add event listeners (use addEvent for using correct curor e.g. on anchors)
		// $(this.contextName).addEvent('mousemove', this.mouseMove.bindAsEventListener(this));
		$(this.contextName).addEvent('mouseover', this.mouseOver.bindAsEventListener(this));
		$(this.contextName).addEvent('mouseout', this.mouseOut.bindAsEventListener(this));

		// eventually create iframe
		var innerChild = $(this.layerName).getChildren();
		if (innerChild[0])	{
			this.iFrameContextLayer = innerChild[0];
		} else {
			this.iFrameContextLayer = this.layerName;
		}
		
		if (window.ie6)	{
			this.iframe = true;
			if (!$('hintLayer_iframe'))	{
				var iframe = document.createElement('iframe');
				iframe.id = 'hintLayer_iframe';
				$(iframe).setStyles({display: 'none', position: 'absolute', border: '0px', margin: '0px'});
				document.body.appendChild(iframe);
			}
		}
	},
	
	mouseOver:		function(event)	{
		this.positionLayer(event);
		$(this.layerName).setStyle('display','block');
		if(this.iframe)	{
			this.positionIFrame();
			$('hintLayer_iframe').setStyle('display','block');
		}
	},
	

	mouseMove:		function(event)	{
		// display layer
		this.positionLayer(event);
		if (this.iframe)	this.positionIFrame();
		
	},
	
	mouseOut:		function()	{
		$(this.layerName).setStyle('display','none');
		if(this.iframe)	$('hintLayer_iframe').setStyle('display','none');
	},
	
	positionLayer:	function(event)	{
		var layer = $(this.layerName);
		//var newX = event.clientX + Window.getScrollLeft() + 10;
		//var newY = event.clientY + Window.getScrollTop() + 10;
		var newX = $(this.contextName).getLeft();
		var newY = $(this.contextName).getTop() + $(this.contextName).offsetHeight + 2;
		layer.setStyles( {top: newY + 'px', left: newX + 'px'} );
		
	},
	
	positionIFrame:	function()	{
		var layer = $(this.iFrameContextLayer);
		var styles = { top: layer.getTop(), left: layer.getLeft(), width: layer.offsetWidth + 'px' , height: layer.offsetHeight + 'px'};
		$('hintLayer_iframe').setStyles(styles);
	}

});



// Layers
var Bitrockers_layer = new Class({
	
	effectInProgress: false,				// if effect in progress, stop animation
	layerGroup:		false,					// close all other layers in this group when this layer gets opened
	opened:			false,
	
	initialize:			function(layerName, contextName, layerGroup)	{
		this.layerName = layerName;
		this.contextName = contextName;
		
		if (layerGroup)	this.layerGroup = layerGroup;
		
		window.onDomReady(this.onReady.bind(this));
	},
	
	onReady:			function()	{
		
		// check for layers with naming convention
		if ($(this.layerName + '_progress'))	{
			// store original content?
			// never display those layer
			$(this.layerName + '_progress').setStyles({overflow: 'hidden', display: 'none'});
		};
		if ($(this.layerName + '_message'))	{
			// store original content?
			// never display those layer
			$(this.layerName + '_message').setStyles({overflow: 'hidden', display: 'none'});
		};
		// close handler?
		if ($(this.layerName + '_close'))	{
			$(this.layerName + '_close').onclick = this.close.bind(this);
		}


		// add effect
		this.effect = new Fx.Styles($(this.layerName + '_container'), {duration: 100, onComplete: this.toggleComplete.bind(this)});

		// set status
		if ($(this.layerName + '_container').getStyle('height') != '0px')	this.opened = true;	
		
		
		// no context?
		if (!$(this.contextName)) return;
		$(this.contextName).onclick = this.toggle.bind(this);
		
		
		// add layer to global layerGroupsarray
		if (!Bitrockers_layer.layerGroups)	Bitrockers_layer.layerGroups = [];
		if (!Bitrockers_layer.layerGroups[this.layerGroup])	Bitrockers_layer.layerGroups[this.layerGroup] = [];
		Bitrockers_layer.layerGroups[this.layerGroup].push(this);
		
		
	},
	
	open:				function(event)	{
			if (this.opened)	return false;		// do nothing if already opened
			this.opened = true;
			this.effectClose = false;
			// has progress? if so, close
			if ($(this.layerName + '_progress'))	$(this.layerName + '_progress').setStyle('display','none');
			if ($(this.layerName + '_message'))	$(this.layerName + '_message').setStyle('display','none');
			if ($(this.layerName + '_content'))	$(this.layerName + '_content').setStyle('display','block');
			
		
			// open from
			var openFrom = 0;
			var layerContainer = $(this.layerName + '_container');
			
			// any other layers in this group? if so, close them
			var groupLayers = Bitrockers_layer.layerGroups[this.layerGroup];
			for(i=0; i < groupLayers.length; i++)	{
				if (groupLayers[i].layerName != this.layerName && groupLayers[i].opened)	{
					// there is another layer from this group open, close it and resize this instantly to size of 
					// of "old" layer
					openFrom = $(groupLayers[i].layerName + '_container').offsetHeight;
					groupLayers[i].groupClose();
				}
			}

			layerContainer.setStyle('display','block');
			var scrollHeight = layerContainer.scrollHeight;
			layerContainer.setStyle('height', openFrom + 'px');
			$(this.layerName).setStyle('display','block');	
			this.effect.custom({'height':  [openFrom, scrollHeight ]});		
			return false;
	},
	
	close:				function(e)	{
			if (!this.opened)	return false;		// do nothing if already closed
			this.effectClose = true;
			this.closeReal();
			return false;
	},
	
	closeReal:			function()	{
			$(this.layerName + '_container').effect('height', {duration: 100, onComplete: this.toggleComplete.bind(this)}).custom($(this.layerName).scrollHeight, 0);
			return false;
	},
	
	groupClose:			function()	{
			// gets called if another layer of this group gets opened
			$(this.layerName + '_container').setStyle('height','0px');
			this.effectClose = true;
			this.toggleComplete();
	},
	
	toggle:				function(event)	{
		if (this.effectInProgress)	{
		 	this.effect.clearTimer();
		}
		this.effectInProgress = true;
		if (!this.opened)	{
			// show layer
			this.open();
		} else {
			// hide layer
			this.close();
		}
		return false;
		
	},
	
	toggleComplete:		function()	{
		this.effectInProgress = false;
		if (this.effectClose)	{
			// close layer completey
			this.opened = false;
		} else {
			 $(this.layerName + '_container').setStyle('height','auto');
			 this.opened = true;
		}
	},
	
	showProgress:		function()	{
		$(this.layerName + '_progress').setStyle('display','block');
	}
	
	
});