$(function () {
           $('#m1,#m2,#m3').each(function () {
               var distance = 10;
               var time = 250;
               var hideDelay = 200;
               var hideDelayTimer = null;
               var beingShown = false;
               var shown = false;
               var trigger = $('.key', this);
               var info = $('.popup', 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({
                           top: -485,
                           left: -177,
						   position: 'absolute',
						   zIndex: 99,
                           display: 'block'
                       }).animate({
                           top: '-=' + distance + 'px',
                           opacity: 1
                       }, time, 'swing', function() {
                           beingShown = false;
                           shown = true;
                       });
                   }
                   return false;
               }).mouseout(function () {
                   if (hideDelayTimer) clearTimeout(hideDelayTimer);
                   hideDelayTimer = setTimeout(function () {
                       hideDelayTimer = null;
                       info.animate({
                           top: '-=' + distance + 'px',
                           opacity: 0
                       }, time, 'swing', function () {
                           shown = false;
                           info.css('display', 'none');
                       });
                   }, hideDelay);
                   return false;
               });
           });
       });
	   
	   
	   
	          $(function () {
           $('#m4').each(function () {
               var distance = 10;
               var time = 250;
               var hideDelay = 200;
               var hideDelayTimer = null;
               var beingShown = false;
               var shown = false;
               var trigger = $('.key2', this);
               var info = $('.popup2', 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({
                           top: -286,
                           left: 32,
						   position: 'absolute',
						   zIndex: 99,
                           display: 'block'
                       }).animate({
                           top: '-=' + distance + 'px',
                           opacity: 1
                       }, time, 'swing', function() {
                           beingShown = false;
                           shown = true;
                       });
                   }
                   return false;
               }).mouseout(function () {
                   if (hideDelayTimer) clearTimeout(hideDelayTimer);
                   hideDelayTimer = setTimeout(function () {
                       hideDelayTimer = null;
                       info.animate({
                           top: '-=' + distance + 'px',
                           opacity: 0
                       }, time, 'swing', function () {
                           shown = false;
                           info.css('display', 'none');
                       });
                   }, hideDelay);
                   return false;
               });
           });
       });


       $(function () {
           $('#m5').each(function () {
               var distance = 10;
               var time = 250;
               var hideDelay = 200;
               var hideDelayTimer = null;
               var beingShown = false;
               var shown = false;
               var trigger = $('.key3', this);
               var info = $('.popup3', 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({
                           top: -120,
                           left: 32,
						   position: 'absolute',
						   zIndex: 99,
                           display: 'block'
                       }).animate({
                           top: '-=' + distance + 'px',
                           opacity: 1
                       }, time, 'swing', function() {
                           beingShown = false;
                           shown = true;
                       });
                   }
                   return false;
               }).mouseout(function () {
                   if (hideDelayTimer) clearTimeout(hideDelayTimer);
                   hideDelayTimer = setTimeout(function () {
                       hideDelayTimer = null;
                       info.animate({
                           top: '-=' + distance + 'px',
                           opacity: 0
                       }, time, 'swing', function () {
                           shown = false;
                           info.css('display', 'none');
                       });
                   }, hideDelay);
                   return false;
               });
           });
       });