Effect.Tooltip = Class.create();
Object.extend(Object.extend(Effect.Tooltip.prototype, Effect.Base.prototype), {
  initialize: function(element, content) {
    this.element = $(element);
    if(!this.element) throw(Effect._elementDoesNotExistError);
    var options = Object.extend({
      content: content,
      title: false,
      className: 'tooltip',
      offset: {'x':16, 'y':16}
    }, arguments[2] || {});
    this.start(options);
  },
  setup: function() {
    // create a wrapper
    this.wrapper = document.createElement('div');
    this.wrapper.className = this.options.className;
    Element.setStyle(this.wrapper, {
	  position: 'absolute',
      display: 'none'
    });
    // add the title
    if(this.options.title) {
      var title = document.createElement('div');
      title.className = 'title';
      Element.update(title, this.options.title);
      this.wrapper.appendChild(title);
    }
    // create the actual tooltip
    this.tip = document.createElement('div');
    this.tip.className = 'content';
    Element.update(this.tip, this.options.content);
    this.wrapper.appendChild(this.tip);

    // add wrapper to the body
    document.body.appendChild(this.wrapper);

    // add observers
    this.element.observe('mouseover', this.showTip.bind(this));
    this.element.observe('mouseout', this.hideTip.bind(this));
  },
  showTip: function(event){
    this.positionTip(event);
    this.wrapper.show();
  },
  hideTip: function(){
    this.wrapper.hide();
  },
  positionTip: function(event){
    var offsets = {'x': this.options.offset['x'],'y': this.options.offset['y']};
    var mouse = {'x': Event.pointerX(event), 'y': Event.pointerY(event)};
    var page = {'x':this.viewportSize()['x'], 'y':this.viewportSize()['y']};
	//alert(page['x']+' | '+page['y']);
    var tip = {'x': mouse['x'] + this.options.offset['x'] + this.wrapper.getWidth(),
    'y' : mouse['y'] + this.options.offset['y'] + this.wrapper.getHeight()};

    // inverse x or y to keep tooltip within viewport
	
	// bottom right
    // inverse x or y to keep tooltip within viewport
	if(tip['x']>page['x']) { offsets['x'] = 0-(this.wrapper.getWidth() + this.options.offset['x']); }
    if(tip['y']>page['y']) { offsets['y'] = 0-(this.wrapper.getHeight() + this.options.offset['y']); }
	
	if(offsets['x'] > 0 && offsets['y'] > 0) {
		imagen="balloonTL.gif";
	}
	if(offsets['x'] > 0 && offsets['y'] < 0) {
		imagen="balloonBL.gif";
	}
	if(offsets['x'] < 0 && offsets['y'] > 0) {
		imagen="balloonTR.gif";
	}
	if(offsets['x'] < 0 && offsets['y'] < 0) {
		imagen="balloonBR.gif";
	}
	var directorios=window.location.pathname;
	var patron=/pais/;
	var patron2=/tags/;
	if (directorios.search(patron)!=-1 || directorios.search(patron2)!=-1){
		directorio="../../";
	}
	else{
		directorio="../";
	}
    this.wrapper.setStyle({
	  background: 'transparent url('+directorio+'img/recetas_home/'+imagen+') no-repeat',
      left: mouse['x'] + offsets['x'] + 'px',
      top: mouse['y'] + offsets['y'] + 'px'
    });
  },
  viewportSize : function(){
    if (self.innerHeight) return {'x': self.innerWidth, 'y': self.innerHeight};
    else if (document.documentElement && document.documentElement.clientHeight)
    return {'x': document.documentElement.clientWidth, 'y': document.documentElement.clientHeight};
    else if (document.body) return {'x': document.body.clientWidth, 'y': document.body.clientHeight};
  }
});


function conversion(texto){
				texto="<p class=\"tip_titulo\">"+texto+"<\/p>";
				texto=texto.replace("(","<div id=\"vid_pas\"><p><strong>");
				texto=texto.replace("recetas en","<\/strong>recetas en");
				texto=texto.replace("recetas paso","<\/strong>recetas paso");
				texto=texto.replace("receta en","<\/strong>receta en");
				texto=texto.replace("receta paso","<\/strong>receta paso");
				texto=texto.replace("video","<strong>video<\/strong>");
				texto=texto.replace("paso a paso","<strong>paso a paso<\/strong>");
				texto=texto.replace(")","<\/p><\/div>");
				texto=texto.replace(",","<\/p><p><strong>");
				return texto;
}
		function init() {
			for (i=1;i<=40;i++){
				if(i!=25){
					this['titleScript'+i]=conversion($('tip'+i).getAttribute('title'));
					$('tip'+i).title="";
					new Effect.Tooltip('tip'+i, "<img src='../img/flags/flag"+i+".gif' width:'30px' height:'23px' \/>"+ this['titleScript'+i], {className: 'tip', offset: {x:10, y:10}});
				}
			}
		}
		Event.observe(window, 'load', init, false);