function initImgTumbEffect(selector)
{

  $(selector).hover(function() {
    $(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/
    var img = $(this).find('img');
    
  //  var tmpImg = new Image();
 //   tmpImg.src = img.attr("src");

    var smallHeight = img.css("height");
    var smallWidth = img.css("width");
    var maxSize  = 320;


    var imgHalfWidth = parseInt(smallWidth)/2;
    var imgHalfHeight = parseInt(smallHeight)/2;

    var imgNaturalWidth;
    var imgNaturalHeight;


   // alert( smallWidth + "x" + smallHeight);

    var ratio = smallWidth/smallWidth;
    if (ratio > 1)
    {
      imgNaturalWidth = maxSize;
      imgNaturalHeight = maxSize/ratio;
    }
    else
    {
      imgNaturalHeight = maxSize;
      imgNaturalWidth = maxSize * ratio;
    }

    var top = (-imgNaturalHeight/2 + imgHalfHeight );
    var left = (-imgNaturalWidth/2 + imgHalfWidth );

    $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
      .animate({
        top:  top + "px",
        left: left + 'px',
        width: imgNaturalWidth + "px", /* Set new width */
        height: imgNaturalHeight + "px", /* Set new height */
        zindex: 100
      }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
   
     img.addClass("hover");
    } , function() {
    $(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
    var img = $(this).find('img');

    var smallHeight = img.css("height");
    var smallWidth = img.css("width");

  //  img.removeClass("hover");
    $(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
      .animate({
        marginTop: '0', /* Set alignment back to default */
        marginLeft: '0',
        top: '0',
        left: '0',
        width:  smallWidth + "px", /* Set width back to default */
        height: smallHeight + "px" /* Set height back to default */
      }, 400);
  });
}



function screenshotPreview(div) {
  /* CONFIG */
  xOffset = 10;
  yOffset = 30;
  
  // these 2 variable determine popup's distance from the cursor
  // you might want to adjust to get the right result
  /* END CONFIG */

  var selector = div  + " a";
  var img = $(selector + " img");

  $(selector).hover(function(e){

    var sizes = getZoomSizes(img);


    this.t = this.title;
    this.title = "";
    var c = (this.t != "") ? "<br/>" + this.t : "";
    $("body").append("<p id='screenshot'><img width='" + sizes.w  + "px'  height='"+ sizes.h + "px' src='"+ this.rel + "' alt='url preview' />"+ c +"</p>");
    $("#screenshot")
    .css("top",(e.pageY - xOffset) + "px")
    .css("left",(e.pageX + yOffset) + "px")
    .fadeIn("fast");
  },
  function(){
    this.title = this.t;
    $("#screenshot").remove();
  });

  $(selector).mousemove(function(e){
    $("#screenshot")
    .css("top",(e.pageY - xOffset) + "px")
    .css("left",(e.pageX + yOffset) + "px");
  });
}


function getZoomSizes(img)
{
  var smallHeight = img.height();
  var smallWidth = img.width();
  var maxSize  = 320;

  var ratio = smallWidth/smallHeight;

  var imgZoomedWidth = 0;
  var imgZoomedHeight = 0;

  if (ratio > 1)
  {
    imgZoomedWidth = maxSize;
    imgZoomedHeight = maxSize/ratio;
  }
  else
  {
    imgZoomedHeight = maxSize;
    imgZoomedWidth = maxSize * ratio;
  }

  return {w: Math.round(imgZoomedWidth), h: Math.round(imgZoomedHeight)}
}