var modEventsBox = new Class({
	initialize: function(options) {
		this.options = Object.extend({
			event_box: null,		// element displaying the tooltip
			message:null,		// some predefined message
			ajax:null,			// show message from ajax / if message is not null, this will override it
			Class:'mod_jscalendar_day_expand',	// tooltip display class
			followMouse:false,	// follow mouse on move
			sticky:false,		// remove tooltip if closed
			fromTop: 0,		// distance from mouse or object
			duration: 500,		// fade effect transition duration
			fadeDistance: 0    // the distance the tooltip sarts fading in/out
		}, options || {});
		this.el = $(this.options.event_box);
		this.start();
		this.visible = 0;
	},
	
	start: function(){
		this.createContainer();
		
		this.header.setHTML(this.el.title);
		this.el.set({'title':''});
		
		if(!this.options.ajax){
			this.message.setHTML(this.options.message);
		}else{
			//replace back & to & from ajax url
			//we have XHTML error with & in url, but javascript error with &
			this.options.ajax = this.options.ajax.replace("&", "&");
			//this.message.removeClass('message');
			//this.message.addClass('message_loading');
			new Ajax(this.options.ajax, {
				method: 'get',
				onComplete: function() {
					//this.message.removeClass('message_loading');
					//this.message.addClass('message');
				}.bind(this),
				update: this.message
			}).request();
		}

		this.fx = new Fx.Styles(this.container, {duration:this.options.duration, wait:false, transition:Fx.Transitions.Sine.easeOut});
		
		this.el.addEvent( this.options.followMouse ? 'mousemove' : 'mouseenter', this.showToolTip.bind(this) );
		this.container.addEvent( this.options.followMouse ? 'mousemove' : 'mouseenter', this.showToolTip.bind(this) );
		
		if(!this.options.sticky){
			this.el.addEvent('mouseleave', this.hideToolTip.bind(this));	
			this.el.addEvent('click', this.hideToolTip.bind(this));
			this.container.addEvent('mouseleave', this.hideToolTip.bind(this));	
			this.container.addEvent('click', this.hideToolTip.bind(this));			
		}else{
			this.closeTip = new Element('a').set({'class':'sticky_close','href':'#'}).setStyles({'position':'absolute','top':3,'right':3});
			this.closeTip.injectInside(this.header);	
			this.closeTip.addEvent('click', this.hideToolTip.bind(this));
		}
	},
	
	showToolTip: function(event){
		var event = new Event(event);
		
		this.elemHeight = this.el.getCoordinates().height;
		
		
		this.top = this.options.followMouse ? event.client.y : this.el.getPosition().y;
		var left = this.options.followMouse ? event.client.x : this.el.getPosition().x;
		
		var top_dist = this.visible == 1 ? 
					   this.top + this.options.fromTop + this.elemHeight : 
					   this.top + this.options.fromTop + this.elemHeight + this.options.fadeDistance;//+ this.elemHeight
		
		this.container.setStyles({'top': top_dist,'left':left,'display':'block', 'z-index':'110000'});		
		this.fx.start({'opacity':1, 'top':this.top + this.options.fromTop + this.elemHeight});	
		this.visible = 1;

		//$("preview_frame").src = "components/com_template_edit/template_positions/index.php?TemplateID=" + this.options.TemplateID + "&TemplateName=" + this.options.TemplateName + "&layer_bg=" + this.options.layer;
		//$('header_layer_14').setStyle('background', '#c64934');	
	},
	
	hideToolTip: function(){		
		this.container.setStyles({'z-index':'100000'});
		this.fx.start({'opacity':0,'top': this.top + this.options.fromTop + this.elemHeight + this.options.fadeDistance});
		this.visible = 0;
	},
	
	createContainer: function(){
		this.container = new Element('div').set({'class':this.options.Class}).setStyles({'position':'absolute','opacity':0,'display':'none','z-index':'100000'}).injectInside(document.body);
		this.header = new Element('div');//.set({'class':'top'});
		this.message = new Element('div');//.set({'class':'message'})
		var footer = new Element('div');//.set({'class':'footer'});
		this.container.adopt(this.header, this.message, footer);				
	},
	
	alert: function(message){
		$('debug').innerHTML += '<br>'+message;
	}
});