var timer;

var loadToolTip = function(words) {
  var content = $('article');
  var triggerWords = words;
  for (i=0;triggerWords.length>i;i++) {
    var word = triggerWords[i][0];
    var wordId = triggerWords[i][1];

    var re = new RegExp('(\\W)('+word+')(\\W)','gi');
    
    var abbr = new Element('abbr').setProperties({'id': wordId, 'class': 'abbr'}).appendText(word);
    content.innerHTML = content.innerHTML.replace(re, '$1<abbr id="' + wordId + '" class="abbr">$2</abbr>$3');
  }
  $$("abbr").addEvent('click', function(node) {
    timer = (function(node, obj) {
    if(!$('tooltip_' + this.getProperty('id'))) {
      makeToolTip(this.getProperty('id'), this);
    }
    placeToolTip(this.getProperty('id'), this);
    }).delay(0, this)
  })
  $$("abbr").addEvent('mouseleave', function(node) {
    $clear(timer)
  })  
}

var makeToolTip = function(id, obj) {
  var tooltip = new Element('div', {
    'styles': {
      'visibility': 'hidden'
    },
    'class': 'modal popup-mini',
    'id': 'tooltip_' + id
  });
  tooltip.injectTop(document.body);
  url = '?module=Articles;action=Article.publicShow;ID=' + id + ';template=getArticle'
  var getContent = new Ajax(url, {
    method: 'get',
    update: tooltip,
    onComplete: function() { makeCloseButton(tooltip) }
  }).request();
}

var makeCloseButton = function(tooltip) {
  var tooltipCloseContainer = new Element('div', {
    'class': 'closeWordList'
  })
  var tooltipClose = new Element('a', {
    'href': 'javascript:void(0)'
  }).appendText('Lukk vindu')
  tooltipClose.addEvent('click', function(close) {
    tooltipCloseContainer.parentNode.setStyle('visibility', 'hidden')
  });
  tooltipClose.injectTop(tooltipCloseContainer);
  tooltipCloseContainer.injectInside(tooltip);
}

var placeToolTip = function(id, obj) {
  var tt = $('tooltip_' + id);
  var obj = $(obj);
  tt.setStyles(
    {
      'top': obj.getPosition().y + 35 + 'px',
      'left': obj.getPosition().x - 25 + 'px',
      'visibility': 'visible'
    }
  )
  
  /*tt.setStyle('top', obj.getPosition().y + 35 + 'px');
  tt.setStyle('left', obj.getPosition().x - 25 + 'px');
  tt.setStyle('visibility', 'visible');*/
  
  /*tt.style.top=obj.getPosition().y + 35 + 'px';
  tt.style.left=obj.getPosition().x - 25 + 'px';*/
  
 /* tt.setAttribute('style', 'top: ' + obj.offsetTop + 35 + 'px');
  tt.style.visibility='visible';*/
  return false;
}

var removeToolTip = function(id) {
  $('tooltip_' + id).setStyle('visibility', 'hidden');
}