// JavaScript Document

document.onmousedown=coordinates;
document.onmouseup=mouseup;

var imareax = 0;
var imareay = 0;
var imposx = 200;
var imposy = 120;
var smallimposx = 200;
var smallimposy = 155;
var recx = 0;
var recy = 0;
var recdim = 200;
var imfactor = (1224 / 653);



var boxdim = recdim+10;


function coordinates(e)
{
if (e == null) { e = window.event;}
var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;

if (sender.id=="moveMe")
  {
  mouseover=true;
  //pleft=parseInt(movMeId.style.left);
  //ptop=parseInt(movMeId.style.top);
  xcoor=e.clientX;
  ycoor=e.clientY;
  
  xcoor_relativetoRec = xcoor - (imareax + imposx + recx);
  ycoor_relativetoRec = ycoor - (imareay + imposy + recy);
  
  
  
  
  document.onmousemove=moveImage;
  return false;
  }
else { return false; }
}

function moveImage(e)
{
if (e == null) { e = window.event;}


//movMeId.style.left=pleft+e.clientX-xcoor+"px";
//movMeId.style.top=ptop+e.clientY-ycoor+"px";
xcoor = e.clientX;
ycoor = e.clientY;
t_abs = (ycoor - (ycoor_relativetoRec));
l_abs = (xcoor - (xcoor_relativetoRec));

centx = l_abs + (recdim/2);
centy = t_abs + (recdim/2);




distfromleftofSmallX = centx - (imareax + smallimposx);
distfromtopofSmallY = centy - (imareay + smallimposy);


largedistx = parseInt(distfromleftofSmallX * imfactor);
largedisty = parseInt(distfromtopofSmallY * imfactor);

centx_relative = centx - (imareax);
centy_relative = centy - (imareay);

imposx = (centx_relative - largedistx);
imposy = (centy_relative - largedisty);

str = imposx;
fback = document.getElementById("feedback");
//fback.innerHTML = str; 

l = l_abs - (imareax + imposx);
t = t_abs - (imareay + imposy);

r = l+recdim;
b = t+recdim;
recx = l;
recy = t;






movMeId.style.clip = "rect("+t+"px,"+r+"px,"+b+"px,"+l+"px)";

movMeId.style.left = imposx+"px";
movMeId.style.top = imposy+"px";


boxId.style.left = (l - 5)+(imposx)+"px";
boxId.style.top = (t - 5)+(imposy)+"px";



return false;
}

function mouseup(e)
{
document.onmousemove=null;
}


function showmag(){
	
	boxId = document.getElementById("framebox");
	movMeId=document.getElementById("moveMe");
	
	
	boxId.style.left = (smallimposx - 5)+"px";
	boxId.style.top = ((smallimposy) - 5)+"px";
	boxId.style.visibility = "visible";



	movMeId.style.top=(smallimposy)+"px";
	movMeId.style.left=smallimposx+"px";
	movMeId.style.visibility = "visible";
}

	
//The movable image
function maginit(){

recx = 0;
recy = 0;
imposx = smallimposx;
imposy = smallimposy;

smallimId= document.getElementById("smallim");//container
smallimId.style.top=(smallimposy)+"px";
smallimId.style.left=smallimposx+"px";

movMeId=document.getElementById("moveMe");//largeimage within container
if(magon == true){
movMeId.style.top=(smallimposy)+"px";
movMeId.style.left=smallimposx+"px";
}else{
	movMeId.style.top=1000+"px";
movMeId.style.left=0+"px";
movMeId.style.visibility = "hidden";
}
	
movMeId.style.clip = "rect(0px, "+recdim+"px, "+recdim+"px, 0px)";

boxId = document.getElementById("framebox");
boxId.style.width = boxdim+"px";
boxId.style.height = boxdim+"px";
boxId.style.background = "#000000";

if(magon == true){
boxId.style.left = (smallimposx - 5)+"px";
boxId.style.top = ((smallimposy)- 5)+"px";
}
else{
	boxId.style.left = (0 - 5)+"px";
boxId.style.top = (1000 - 5)+"px";
boxId.style.visibility = "hidden";
}

//fback = document.getElementById("feedback");
//fback.innerHTML = "testomg"; 
}