/*
 * configuration example
 * new at.elements.tooltip({
		offsetY: 0,
		offsetX: 15,
		className: "tooltip",
		template: "<div>${message}</div>",
		data: {
			message: "klicken Sie hier"
		},
		noEvents: false
	});
 * 
 * 
 */

new Namespace("at.elements.tooltip");
at.elements.tooltip = Class.create({
	
	initialize : function (element,config)
	{
		this.element = element;
		this.config = config;		
		
		this.started = false;
		this.container = null;
		this.stopInterval = null;
		
		if(!this.config.noEvents) {
			this.addMouseOver();
			this.addMouseOut();
			this.addMouseMove();
		}
		
		if(!this.config.offsetY) {
			this.config.offsetY = 0;
		}
		if(!this.config.offsetX) {
			this.config.offsetX = 0;
		}
	},
	
	
	addMouseOver : function () {
		this.element.observe("mouseover", this.start.bind(this));
	},
	
	addMouseOut : function () {
		this.element.observe("mouseout", this.stop.bind(this));
	},
	
	addMouseMove : function () {
		this.element.observe("mousemove",this.setContainersPageOffset.bind(this));
	},
	
	start : function () {
		if(this.stopInterval != null) {
			clearInterval(this.stopInterval);
			this.stopInterval = null;
		}
		
		if(this.container == null) {
			var containerId = "tooltip_" + this.getUniqueId(10);
			var container = document.createElement("div");
			
			container.setAttribute("id",containerId);
			document.getElementsByTagName("body")[0].appendChild(container);
			
			this.container = $(containerId);
			
			this.container.setStyle({
				position: "absolute",
				zIndex: 100000
			});
			
			//console.log(this.config.template.process);
			
			this.container.addClassName(this.config.className);
			this.container.innerHTML = this.config.template.process(this.config.data);
		}
		else {
			this.container.setStyle({
				display: "block"
			});
		}
	},
	
	getUniqueId : function (size) {
		var chars = "abcdefghijklmnopqurstuvwxyz";
		var str = "";
		for(var i = 0; i < size; i++) {
			str += chars.substr( Math.floor(Math.random() * 26), 1 );
		}
		return str;
	},
	
	setContainersPageOffset : function (e) {						
		if(this.container) {
			this.container.setStyle({
				top: (Event.pointerY(e)+this.config.offsetY) + "px",
				left: (Event.pointerX(e)+ this.config.offsetX) + "px"
			});
		}
		else {
			this.start();
		}
	},
	
	stop : function () {
		if(this.stopInterval == null) {
			this.stopInterval = window.setInterval(this.stopAsync.bind(this),100);
		}
	},
	
	stopAsync : function () {
		clearInterval(this.stopInterval);
		this.stopInterval = null;
		
		if(this.container) {
			this.container.setStyle({display: "none"});
		}
	}

});



if(window.Event) {
    Object.extend(Event,{
        element: function(event) {
          var node = Event.extend(event).target;
          return node && Element.extend(node.nodeType == Node.TEXT_NODE ? node.parentNode : node);
        },

        pointer: function(event) {
          return {
            x: event.pageX || (event.clientX +
              ((document && document.documentElement && document.documentElement.scrollLeft)
                  || (document && document.body && document.body.scrollLeft))),
            y: event.pageY || (event.clientY +
              ((document && document.documentElement && document.documentElement.scrollTop)
                  || (document && document.body && document.body.scrollTop)))
          };
        }
    });
}