//here to define the size of hover box.
var hoverBoxW = 50;
var hoverBoxH= 50;

var MediumImgBox = $("#MediumImgBox"), BoxOverMedium = $("#BoxOverMedium"), MediumImg = $("#MediumImg"), LargeImgInner = $("#LargeImgInner"), LargeImgWrapper = $("#LargeImgWrapper");
//alert("fwfw");
//ver coordsPage = $("#coordsPage"), coordsClient = $("#coordsClient");

BoxOverMedium.css({"width":hoverBoxW,"height":hoverBoxH,"opacity":0.8});
BoxOverMedium.hide();
//the event when mouse moving on medium image
if(MediumImgBox)
{
     MediumImgBox.mousemove(
      function(e){
//        coordsPage.html( e.pageX + ", " + e.pageY) ;
//        coordsClient.html(e.clientX + ", " + e.clientY);

            BoxOverMedium.show();
         ShowMedOverBox(e.pageX,e.pageY);
         
        //synchronize with large image show.
         OnHoverBoxMove();
         
         }
      )
         //on hover box click
     
     BoxOverMedium.click(function(){BoxOverMedium.children("div").addClass("BoxOverMediumActive");LargeImgWrapper.fadeIn(300);OnHoverBoxMove(); });
}

//display hover box
function ShowMedOverBox(cX, cY)
{
  
  //to ajust the position of hover box.
  var MedImgWidth = MediumImg.children("img").width();
  var MedImgHeight = MediumImg.children("img").height();
  cX=cX-hoverBoxW/2;
  cY=cY-hoverBoxH/2;
//  alert(cY);
  cX=Math.max(cX,MediumImgBox.position().left);
  cX=Math.min(cX,MediumImgBox.position().left+MedImgWidth-hoverBoxW);
  cY=Math.max(cY,MediumImgBox.position().top);
//  alert(cY);
  cY=Math.min(cY,MediumImgBox.position().top+MedImgHeight-hoverBoxH);
  BoxOverMedium.css({"left":cX, "top":cY});

//when mouse in and out of the medium image
  MediumImgBox.hover(function(){BoxOverMedium.show();},function(){BoxOverMedium.children("div").removeClass("BoxOverMediumActive");MediumImgBox.die(null,null);BoxOverMedium.hide();LargeImgWrapper.hide();});
}

function OnHoverBoxMove()
{
  var HoverBoxX = MediumImgBox.position().left - BoxOverMedium.position().left;
  var HoverBoxY = MediumImgBox.position().top - BoxOverMedium.position().top;
  var LargeHeight = LargeImgInner.children("img").height();
  var LargeWidth = LargeImgInner.children("img").width();
  var rateWidth = LargeWidth / MediumImg.children("img").width();
  var rateHeight = LargeHeight / MediumImg.children("img").height();
//  alert(rateHeight);
  LargeImgInner.css({"left":HoverBoxX*rateWidth,"top":HoverBoxY * rateHeight});
 
}