jQuery(document).ready(function() {
  getMsgBox = function() {
    var MsgBoxHtml = 
    '<div class="preview-box">' +
    '</div>';
    return MsgBoxHtml;
  }
  jQuery("body").prepend(getMsgBox());
  var msg = jQuery(".preview-box");
  jQuery('a[href*=/view/]').hover(
    function() {
      var loader1 = "<img id='loadimg1' src='/images/load.gif' width='25' border='0' alt='Loading...' />";
      var loader2 = "<img id='loadimg2' src='/images/load.gif' width='25' border='0' alt='Loading...' />";
      var offset = jQuery(this).offset();
      msg.html(loader1 + ' ' + loader2).css({'left' : offset.left, 'top' : offset.top - msg.outerHeight(), 'display' : 'block'});
      jQuery.get('/get_images.php?link=' + jQuery(this).attr('href'), {}, function(html) {
        if (html != "Error!") {
          var reg = new RegExp("[,]+", "g");
          var get = html.split(reg);
          msg.find('#loadimg1').load(function() {
            msg.css({'top' : offset.top - msg.outerHeight()});
            msg.find('#loadimg1').css({'width' : '200'});
          });
          msg.find('#loadimg2').load(function() {
            msg.css({'top' : offset.top - msg.outerHeight()});
            msg.find('#loadimg2').css({'width' : '200'});
          });
          msg.find('#loadimg1').attr('src', get[0]);
          msg.find('#loadimg2').attr('src', get[1]);
        }
      }, 'html');
    },
    function() {
      msg.css({'display' : 'none'});
    }
  );
});