var MOverBox = new Class({
	
	object: null,
	title: '',
	text: '',
	action: 'mouseover',
	contents: new Array(),
	contentsIndex: new Array(),
	
	initialize: function(object, title, text, action) {
		this.object = $(object);
		this.title = title;
		this.text = text;
		this.action = !action ? 'mouseover' : action;
		if(!this.object) {
			return;
		}
		
		this.object.addEvent(this.action, function() {
			this.initElement(object);
			this.object.display.show();
		}.bind(this));				
	},
	
	initElement: function(element) {
		
		if(element.display) {
			element.display.s = 0;
			element.display.setStyle('display', 'block');
			return;
		}
		
		var isIE = false;//Client.Engine.ie;
		
		//element.setStyle('cursor', 'help');
		//element.setStyle('zIndex', 10);
		element.display = new Element('div', {
			styles: {
				position: 'absolute',
				left: 270,
				top: element.getPosition().y - 178,
				width: 280,
				zIndex:22000,
				opacity: 0.0001
			}
		});
		
		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',
				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.innerHTML = this.title;
		ititle.inject(element.innerContent);
		var icontent = new Element('div', { 'class': 'moverbox_content', });
		icontent.innerHTML = this.text;
		icontent.inject(element.innerContent);
		
		element.display.setStyle('top', parseInt(element.display.getStyle('top')) + 100 - icontent.getSize().y);
		
		//element.innerContent.innerHTML = '<div class="fis_glossary_comp">Materialsgate Glossar</div><div class="fis_glossary_title">Extrusion</div><div class="fis_glossary_content">Da wird wohl was rausgezogen irgendwo... Weiss auch nich genau... Jetzt kommt auf jeden Fall ein langer Text... TEXT... TEXT......sadfasf gsg sdfg sdfg sdfgddfasd asdf g sdfgsfd sfdkgs d gxdgf nyjyf agsdjssdfdf iasdf ghTEXT......xf bsdcfh dfb gd g df sf gfdf ssad gsdfs dfgsdfg sdffg sdgfdfd hhdfgru ilhjkhdfg xdsfasdsdh dfgj sfdsdfgffasd asdf kajsdf iab sctdhdf dfgsdg sdfg sdf Tdfg sEXT......sadfasdfasd asdf kajsdf iafgssdf fd,gnsdg sjg sdfjg hsdfgh sdfjkghsdflkj sdfjg sdkfg sdfg</div>';
		
		
		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.Morph(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 == element.display || target == element || target == element.innerContent || target == element.outerContent) {
					return;
				}
				target = target.getParent();
				if(target.get('tag') == '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();
			}
		});
	
	},
	
	removeHTMLTags: function(strInputCode){
 		strInputCode = strInputCode.replace(/&(lt|gt);/g, function (strMatch, p1){
 		 	return (p1 == "lt")? "<" : ">";
 		});
 		return strInputCode.replace(/<\/?[^>]+(>|$)/g, "");
 	}	

	
});

/*

return;
		
		var content = this.object.innerHTML;
		var splitted = this.removeHTMLTags(content).split(/\s+/);
		for(var i = 0; i < splitted.length; i++) {
			for(var wordIndex = 0; this.words[wordIndex]; wordIndex++) {
				var word = this.words[wordIndex];
				if(splitted[i].match(word)) {
					this.object.innerHTML = this.object.innerHTML.replace(new RegExp('(^|\\s+)(' + splitted[i] + ')($|\\s+)','g'), "$2");
					break;
				}
			}
		}
		
		*/