$(document).ready(function(){

      var isIE = (navigator.userAgent.toLowerCase().indexOf('msie 6') != -1) || (navigator.userAgent.toLowerCase().indexOf('msie 7') != -1);
      var borderGap = 0;

      if (isIE)
      {
      borderGap = -1;
      }

      $('.mtt-item').each(function () {

      var distance = 0;

      var time = 300;
      var hideDelay = 280;
      var hideDelayTimer = null;
      var beingShown = false;
      var shown = false;
      var trigger = $(".mtt-linkitem",this);
      var info = $('.mtt-popup', this).css('opacity', 0);
      var name = $('.mtt-clearbg', this).css('opacity', 0); 



      $([trigger.get(0), info.get(0)]).mouseover(function () {

        if (hideDelayTimer) clearTimeout(hideDelayTimer);

          if (beingShown || shown) {
          // don't trigger the animation again
          return;
          } else {
              // reset position of info box
              beingShown = true;
              
              info.css({
              bottom: borderGap,
              left: 0,
              display: 'block',
              height: 0
              }).animate({
              bottom: '+=' + distance + 'px',
              height:'35px',
              opacity: 0.6
              }, time, 'swing');
                    
                name.css({
                bottom: borderGap,
                left: 0,
                display: 'block',
                height: 0
                }).animate({
                bottom: '+=' + distance + 'px',
                height:'25px',
                opacity: 1
                }, time, 'swing',function() {
                    beingShown = false;
                    shown = true;
                    });    
                    
            }
            return false;

            }).mouseout(function () {

      if (hideDelayTimer) clearTimeout(hideDelayTimer);
      hideDelayTimer = setTimeout(function () {
      
          hideDelayTimer = null;
          info.animate({
          bottom: '-=' + distance + 'px',
          opacity: 0
          }, time, 'swing');
      
          name.animate({
          bottom: '-=' + distance + 'px',
          opacity: 0
          }, time, 'swing', function () {
          shown = false;
          name.css('display', 'none');
          info.css('display', 'none');
          });
      
      }, hideDelay);
      return false;
      });

      });

});