
var MOverBox = new Class({
	object: null,
	title: '',
	text: '',
	contents: new Array(),
	contentsIndex: new Array(),
	
	displayleft: 0,
	displaytop: 0,
	
	innerheight: 0,
	
	initialize: function(object, title, text) {
		this.object = $(object);
		this.title = title;
		this.text = text;
		if(!this.object) {
			return;
		}
		
		
		
		this.object.addEvent('mouseover', function() {
			this.initElement(object);
			this.object.display.show();
		}.bind(this));				
	},
	
	initElement: function(element) {
		
		this.displayleft = element.getPosition().x - 95 + element.getSize().size.x / 2 + 4;
		this.displaytop = element.getPosition().y - 55 - this.innerheight;
		
		if(element.display) {
			element.display.s = 0;
			element.display.setStyle('display', 'block');
			element.display.setStyles({
				left: this.displayleft,
				top: this.displaytop
			});
			return;
		}
		
		
		var isIE = Browser.Engine.trident && Browser.Engine.version < 5;
		
		element.setStyle('cursor', 'help');
		
		element.display = new Element('div', {
			styles: {
				position: 'absolute',
				left: this.displayleft,
				top: this.displaytop,
				width: 280,
				zIndex:22000,
				opacity: 0.0001,
				cursor: 'help'
			}
		});
		
		new Element('div', {
			styles: {
				background: 'url(/graphics/moverbox/moverbox_top.' + (isIE ? 'gif' : 'png') + ') no-repeat',
				height:16,
				margin: 0,
				padding: 0
			}
		}).inject(element.display);
		
		element.outerContent = new Element('div', {
			styles: {
				background: 'url(/graphics/moverbox/moverbox_right.' + (isIE ? 'gif' : 'png') + ') repeat-y right',
				margin: 0,
				padding: 0				
			}
		});
		
		element.innerContent = new Element('div', {
			styles: {
				background:'url(/graphics/moverbox/background.png) repeat-y',
				borderLeft: '1px solid #211955',
				margin: '0 10px 0 0',
				padding: '0 0 0 10px',
				position: 'relative'
			}
		});
		
		element.innerContent.inject(element.outerContent);
		element.outerContent.inject(element.display);
		
		element.display.inject(document.body);
		
		var ititle = new Element('div', { 'class': 'moverbox_title' });
		ititle.setHTML(this.title);
		ititle.inject(element.innerContent);
		var icontent = new Element('div', { 'class': 'moverbox_content' });
		icontent.setHTML(this.text);
		icontent.inject(element.innerContent);
		
		this.innerheight = element.innerContent.getSize().size.y;
		element.display.setStyles({
			top: this.displaytop - this.innerheight
		});
		
		
		new Element('img', {
			src: '/graphics/moverbox/moverbox_bottom.' + (isIE ? 'gif' : 'png') + '',
			styles: {
				margin: 0,
				padding: 0
			}
		}).inject(element.display);
		
		element.display.inject(document.body);
		
		element.display.s = 0;
		element.display.fxonComplete = function() {
			if(element.display.s == 0) {
				element.display.s = 1;
			}
			else if(element.display.s == 1) {
				element.display.s = 0;				
				element.display.setStyle('display', 'none');					
			}
		}
		
		element.display.fx = new Fx.Styles(element.display, {
			duration: 200, 
			transition: Fx.Transitions.Quad.easeInOut, 
			wait: false,
			onComplete: function() {
				element.display.fxonComplete();
			}
		});
		
		element.display.show = function() {
			element.display.fx.start({
				opacity: 1
			});
		};
		element.display.hide = function() {
			element.display.fx.start({
				opacity: 0.0001
			});
		};
		
		var outer = function(e) {
			new Event(e).stop();
			var vrytarget = $(e.relatedTarget);
			var target = $(e.relatedTarget);
			
			while(target) {
				if(!target || !target.getParent) {
					break;
				}
				if(target == element.display || target == icontent || target == element || target == element.innerContent || target == element.outerContent) {
					return;
				}
				target = target.getParent();
				if(target.getTag() == 'body') {
					target = false;
				}
			}
			element.display.hide();		
		};
		
		element.addEvent('mouseout', outer);
		element.display.addEvent('mouseout', outer);
		element.addEvent('click', function() {
			if(element.display.s == 0) {
				element.display.show();
			}
		});
		element.display.addEvent('click', function() {
			if(element.display.s == 1) {
				element.display.hide();
			}
		});
		
	
	}

	
});
