var LexiconIndexWindow = Class.create();

LexiconIndexWindow.prototype = {

	initialize : function() {
		this.options = {
			xdist : 10,
			ydist : 10
		};
		
		this.buildWindow();
	},
	
	buildWindow : function() {
		
		var windowStyle = 'display: none;';
		if(this.window != undefined) {
			//save old style
			windowStyle = 'display: none; left:'+this.window.style.left+'; top:'+this.window.style.top+'; width:'+this.window.style.width+';';
			this.window.remove();
		}
		
	    this.window = Builder.node('div', {
	    	className: 'lexiconIndexWindow', style: windowStyle}, 
	    	[
	    	 	 Builder.node('div', {className:'border titleBarPanel'}, [
		    		 Builder.node('div', {className:'lexiconIndexWindowTitle'}, [
		    		    this.icon = Builder.node('div', {className:'containerIcon'}, [
		    		        Builder.node('img', {src:LEXICON_WINDOW_ICON}),                                             
		    		    ]),                                                         
		    		    Builder.node('div', {className:'containerHead'}, [
		    		        this.windowTitle = Builder.node('h3', {className:'containerContent'}),                                             
		    		    ]),
		    		 ]),
		    		 Builder.node('div', {className:'content lexiconIndexWindowContent'}, [
		    		  	this.inner = Builder.node('div', {className:'container-1 lexiconIndexWindowDescription'}),
		    		 ]),
	    		 ]),
	    	]);
	    
	    //remove empty icon
	    if(LEXICON_WINDOW_ICON == '') {
	    	this.icon.remove();
	    }

	    document.body.insertBefore(this.window, document.body.childNodes[0]);
	    Element.extend(this.window);
	},

	attach : function(element, title, content, width) {
		Event.observe(element, 'mouseover', this.show.bindAsEventListener(this, title, content, width));
		Event.observe(element, 'mouseout', this.hide.bindAsEventListener(this));
		Event.observe(element, 'mousemove', this.move.bindAsEventListener(this));
	},

	detach : function(element) {
		element.stopObserving('mouseover');
		element.stopObserving('mouseout');
		element.stopObserving('mousemove');
	},
	
	
	setWindowContent : function(title, content, width) {
		this.windowTitle.innerHTML = title;
		this.inner.innerHTML = typeof (content) == 'function' ? content() : content;
		this.window.style.width = (width ? width : this.window.getWidth()) + 'px';
	},
	
	show : function(event, title, content, width) {		
		var element = Event.element(event);

		if(typeof (title) == 'function') {
			title = title();
		}
		
		this.setWindowContent(title, content, width);
		this.move(event);
		
		if(title != '') {
			this.window.show();
		}
	},

	hide : function(event) {
		var element = Event.element(event);

		this.window.style.width = 'auto';
		this.window.hide();
	},

	move : function(event) {
		var xpos = Event.pointerX(event);
		var ypos = Event.pointerY(event);
		var offset = document.viewport.getScrollOffsets();
		var width = this.window.getWidth();
		var height = this.window.getHeight();

		if (xpos + width >= offset.left + Element.getWidth(document.body)
				- this.options.xdist * 2 - 5) {
			xpos = xpos - width - this.options.xdist * 2 + 5;
		}

		if (ypos + height >= offset.top + Element.getHeight(document.body)
				- this.options.ydist * 2 - 5) {
			ypos = ypos - height - this.options.ydist * 2 + 5;
		}

		this.window.style.left = xpos + this.options.xdist + 5 + 'px';
		this.window.style.top = ypos + this.options.ydist + 5 + 'px';
	}

}

onloadEvents.push(function() {
	LexiconIndexWindow = new LexiconIndexWindow();
});