var keylooksTooltips = new Class({
	options: {
		path: '/images/stories/'
	},
	initialize: function(parent, options){
		this.setOptions(options);
		this.parent = parent;
		this.findTips();
	},
	findTips:function(){
	    var self = this;
		this.parent.getElements('a[tipp!=]').each(function(single){
		    if (single.getProperty('tipp') != ''){
		        self.setTip(single);
    		}
		});
	},
	setTip: function(el)
	{
	    var content = new Element('img').setProperty('src', this.options.path+el.getProperty('tipp'));
	    el.tip = new tooltip({'content':content});
		el
		.addEvent('mouseenter', function(e){
			//el.tip.show(e);
		})
		.addEvent('mouseleave', function(e) {
			el.tip.hide(e);
		})
		.addEvent('mousemove', function(e) {
			el.tip.show(e);
		})
	}
});
keylooksTooltips.implement(new Options);


var tooltip = new Class({
	options: {
		title: null,
		content: 'leer'
	},
	initialize: function(options)
	{
		this.setOptions(options);
		//this.createTip();
		this.wrapper = null;
	},
	createTip: function(){
		this.wrapper = new Element('div');
		this.wrapper.hide = true;
		this.wrapper.setStyle('position', 'absolute')
		        .setStyle('display', 'none')
		        .setStyle('z-index', '99')
		        .inject($('page'), 'after');
		if (this.options.title != null)
		{
			this.wrapper.adopt(new Element('h2').setText(this.options.title));
		}
		if (this.options.content != null)
		{
		    this.wrapper.adopt(new Element('div').adopt(this.options.content).addClass('content'));
		}
	},
	hide:function()
	{
		this.wrapper.setStyle('display', 'none');
		//new Fx.Style(this.wrapper, 'opacity', {duration:500}).start(0);
		this.wrapper.hide = true;
	},
	show: function(e)
	{
	    if (this.wrapper == null) this.createTip();
	    var pos = this.getPosition(e);
		this.wrapper.setStyle('display', 'block');
		if (!isNaN(pos.x)) this.wrapper.setStyle('left', pos.x);
		if (!isNaN(pos.y)) this.wrapper.setStyle('top', pos.y);
	    if (this.wrapper.hide)
	    {
			new Fx.Style(this.wrapper, 'opacity', {duration:500}).start(0.9);
			this.wrapper.hide = false;
		}
	},
	getPosition: function(e)
	{
	    var position = {};
		if (e.type == 'mousemove')
		{
			if (document.all) {
		        xMousePos = window.event.x + $(e.srcElement).getCoordinates().left; //
		        yMousePos = window.event.y + $(e.srcElement).getCoordinates().top; //
		        //xMousePosMax = document.body.clientWidth+document.body.scrollLeft;
		        //yMousePosMax = document.body.clientHeight+document.body.scrollTop;
		        position.x = xMousePos;
		        position.y = yMousePos;
	        }
	        else
	        {
				position.x = e.pageX;
				position.y = e.pageY;
			}
		}
		else
		{
			position.x = e.page.x;
			position.y = e.page.y;
		}
		position.x += 10;
		position.y += 10;
		return position;
	}
	
	
});
tooltip.implement(new Options);