var FlyOut = new Class({
	options: {
		$class: '',
		id: '',
		initWidth: 10,
		initHeight: 12,
		width: 150,
		height: 240*.75,
		opacity: true,
		infoText: [],
		direction: 'right',
		contentStyles: {}
	},
	
	initialize: function(i, obj){
		this.i = i;
		var $self = this;
		var options = this.options = $extend(this.options, obj);	
		
		this.i.each(
			function(e, i){
				e.top = e.getCoordinates().top;
				e.left = e.getCoordinates().left;
				if(!options.infoText[i]){
					//e.setStyle('display', 'none');
					//return;
					options.infoText.push('...');
				}
				e.options = options;
				e.indx = i;
				
				e.addEvent('mouseover', $self.infoFlyOut);	
			}
		);
		//this.i.addEvent('mouseover', this.infoFlyOut);	
	},
	
	infoFlyOut: function(){
		var $self = this;
		// this will contain the text or contant of the flyout
		var content = new Element('div', 
			{
				'styles': this.options.contentStyles
			}
		).appendText(this.options.infoText[$self.indx]);
		
		// this is a temporary injection to gather the offset height of the content in order to dictate the height of the parent	
		content.setStyles({'position':'absolute', 'left':'-500', 'top':'-500'}).inject(document.body);
		var contentHeight = content.offsetHeight;
		contentHeight += (content.getStyle('margin-top').toInt());
		contentHeight += (content.getStyle('margin-bottom').toInt());
		
		// here all temporary styles are removed and the object is removed from the DOM (not from memory)
		content.setStyles({'position':'', 'left':'', 'top':''});
		content.remove();
		
		var $infoFlyout = new Element('div',
			{
				'class': this.options.$class,
				'id': this.options.id,
				'styles':{
					'position': 			'absolute',
					'z-index':			200,
					'left': 				(this.getCoordinates().left) + 'px',
					'top': 				(this.getCoordinates().top) + 'px',
					'opacity': 			this.options.opacity ? 0 : 1
				}
			}
		).inject(document.body);
		
		var $dropShadow = new Element('div',
			{
				'styles':{
					'position': 			'absolute',
					'z-index':			$infoFlyout.getStyle('z-index') - 1,
					'left': (this.getCoordinates().left) + 'px',
					'top': (this.getCoordinates().top) + 'px',
					'width': this.options.initWidth + 'px',
					'height': this.options.initHeight + 'px',
					'background-color': '#000',
					'opacity': 0
				}
			}
		).inject(document.body);
		$infoFlyout.$dropShadow = $dropShadow;
		
		if(window.ie6){
			var iframe_flyout = new Element('iframe',
				{
					'frameborder': 0,
					'src': '',
					'styles':{
						'position':'absolute', 
						'left': (this.getCoordinates().left) + 'px',
						'top': (this.getCoordinates().top) + 'px',
						'width':		this.options.initWidth + 'px',
						'height':		this.options.initHeight + 'px'
					}
				}
			).inject(document.body);
			$infoFlyout.iframe = iframe_flyout;
		}
		
		content.inject($infoFlyout);
		
		// TRANSITION FX...
		new Fx.Styles($infoFlyout).start(
			{
				'opacity': 	[this.options.opacity ? 0 : 1, 1],
				'width':		this.options.width,
				'height':		contentHeight,
				'left':			this.options.direction == 'left' ? $infoFlyout.getStyle('left').toInt() - this.options.width + this.options.initWidth : this.getCoordinates().left
			}
		);
		$infoFlyout.origin = this;
		new Fx.Styles($dropShadow).start(
			{
				'opacity':		.15,
				'width':			this.options.width + 10,
				'height':			contentHeight + 10,
				'left': 			(this.options.direction == 'left' ? $dropShadow.getStyle('left').toInt() - this.options.width + this.options.initWidth : this.getCoordinates().left) - 4,
				'top': 			this.getCoordinates().top - 4
			}
		);
		$dropShadow.origin = this;
		
		if(window.ie6){
			new Fx.Styles(iframe_flyout).start(
				{
					'opacity':	[this.options.opacity ? 0 : 1, 1],
					'width':		this.options.width,
					'height':		contentHeight,
					'left':			this.options.direction == 'left' ? iframe_flyout.getStyle('left').toInt() - this.options.width + this.options.initWidth : this.getCoordinates().left
				}
			);
		}
		// END OF TRANSITION FX...
		
		doConceal = function(){
			var el = $(this);
			timer = (function(){
				new Fx.Styles(el).start(
					{
						'width':		$self.options.initWidth,
						'height':		$self.options.initHeight,
						'left':			el.origin.getCoordinates().left
					}
				).chain(
					function(){
						el.setStyle('display', 'none');
					}
				);
				new Fx.Styles(el.$dropShadow).start(
					{
						'width':			$self.options.initWidth,
						'height':			$self.options.initHeight,
						'left': 			el.$dropShadow.origin.getCoordinates().left,
						'top': 			el.$dropShadow.origin.getCoordinates().top,
						'opacity':		0
					}
				).chain(
					function(){
						el.$dropShadow.setStyle('display', 'none');
					}
				);
				if(window.ie6){
					new Fx.Styles(el.iframe).start(
						{
							'width':		$self.options.initWidth,
							'height':		$self.options.initHeight
						}
					).chain(
						function(){
							el.iframe.setStyle('display', 'none');
						}
					);
				}
			}).delay(750);
		}
		
		$infoFlyout.addEvents({
			'mouseleave': doConceal
		});
	}
	
});