/*******************    FUNCTION  DEFINITION  ************************************/

function BPG_Magnify(BB,Mfile,CW,CH)
{
// the event that triggered this call is document load

// object BB is the 'base' image B
// Keep it as a visible object to all functions
var B= BB;
//AS_AppendParLine('Par1','ZoomInit : object src = '+B.src);


// Create a new div, to be put around the selected image
var D = document.createElement("div");


// to help with debugging
//D.setAttribute('id','added_div')
//AS_AppendParLine('Par1','ZoomInit : the new div id= = '+D.id);

// put the new div under the same parent as the selected image (whatever it was, body, table, another div)
var P = B.parentNode; // parentElement works only for IE. An Element is a type of node. Node is more general
P.appendChild(D);

//AS_AppendParLine('Par1','ZoomInit : last child of parent is id='+P.lastChild.id);
//AS_AppendParLine('Par1','ZoomInit : parent of target was id='+P.id);
//AS_AppendParLine('Par1','ZoomInit : parent of new div is  = '+D.parentNode.id);


// For debugging, style it so that we can see it
//D.style.border="solid 2";

// explicit relative positioning to help child absolute positioning (discovered experimentally)
D.style.position="relative";

// remove the base image from the old parent
P.removeChild(B);

// and put the base image in the new div
D.appendChild(B);

// and shrink fit the div around the base image
D.style.width=B.width+"px";
D.style.height=B.height+"px";

// Left and top position of Base image B wrt document
function DocPosition(obj)
{
	var L=0,T=0;
	for ( /* empty */ ; obj != null; obj = obj.offsetParent)
	{
	L += obj.offsetLeft;
	T += obj.offsetTop;
	}
	return {L:L,T:T}; 
	// left and top pixel position from document top left corner
	// access as structure fields
}
var BP=DocPosition(B);

// Present a loading message: it's a div inside the other div
var Msg;
Msg = document.createElement("div");
D.appendChild(Msg);
Msg.style.position="absolute";
Msg.style.top=0;
Msg.style.left=0;
Msg.style.visibility="visible";
Msg.innerHTML='<div style="background-color: #ffeb77; color: #333333; padding:2px; font-family: verdana,arial,helvetica; font-size: 10px;">Loading...</div>';


// create a new image to hold the magnified image
var M;
M = document.createElement("img");
// and put it in the div
D.appendChild(M);
// make it invisible
M.style.visibility="hidden";

// enable positioning of M
M.style.position="absolute";
// layer it over the base
M.style.zIndex=B.style.zIndex+1;
// define the onload
if (M.addEventListener) { //DOM2
	M.addEventListener("load",OnloadM,true);
	} else { //IE
	M.onload=OnloadM;
	}
// get the magnified image, offscreen
M.src=Mfile;

// Scaling: size ratio between base and magnified
var S;


function OnloadM()
{ 
// scaling factor between base and magnified
	S=M.width/B.width;
	// make the div sensitive to mouse drag
	if (D.addEventListener) { //DOM2
	D.addEventListener("mousedown",MouseDown,true);
	} else { //IE
	D.onmousedown=MouseDown;
	}
	
	Msg.innerHTML='<div style="background-color: #ffeb77; color: #333333; padding:2px; font-family: verdana,arial,helvetica; font-size: 10px;">Ready!</div>';
 
// 

}




function MagClip(Event)
{
	// get the cursor position
	var C=Cursor(Event);
	//AS_AppendParLine("Par1","ZoomClip : x="+C.X+", y="+C.Y+", relative to image: x="+(C.X-BP.L)+", y="+(C.Y-BP.T));

	// Focal point relative to base image
	var FL=C.X-BP.L-CW/2;
	var FT=C.Y-BP.T-CH/2;
// Note: -CW/2 is an off-center offset for better look and feel

	// clipping of M
	var CT,CL;
	CL=S*FL-CW/2;
	CT=S*FT-CH/2; 
	M.style.clip='rect('+CT+'px '+(CL+CW)+'px '+(CT+CH)+'px '+CL+'px)';

//AS_AppendParLine("Par1","M.src = "+M.src);
//AS_AppendParLine("Par1","M.style.clip = "+M.style.clip);
//AS_AppendParLine("Par1","FL="+FL+", FT="+FT+", BP.L="+BP.L+", BP.T="+BP.T);
//AS_AppendParLine("Par1","S="+S+", CW="+CW+", CH="+CH+", CW/2="+CW/2);

	// position of M : note M and B are positioned absolute, within a same div
	//M.style.pixelLeft=CL+CW/2-FL;
	//M.style.pixelTop=CT+CH/2-FT;
	M.style.left=Math.floor(-FL)+"px";
	M.style.top=Math.floor(-FT)+"px";
// Note: position is wrt to clipped edge, not edge of image
 

// OBSERVATION: edge is hit when FL=0 or FL=BW (and analogously T and H)


}



function MouseUp(Event)
{
if (!Event) Event=window.event; //IE
AS_AppendParLine('Par1','mouse up : event type = '+Event.type);


if (document.removeEventListener) { //DOM2
	document.removeEventListener("mousemove",MouseMove,true);
    document.removeEventListener("mouseup",MouseUp,true);	
	} else { //IE
	document.onmousemove = null;
	document.onmouseup = null;
	} 

	// make the magnified image invisible
	M.style.visibility="hidden";
	
	// hint to the user
	D.style.cursor="default";
};


// Mouse Move
function MouseMove(Event)
{
if (!Event) Event=window.event; //IE

// comment out to avoid too many log writes
//AS_AppendParLine('Par1','mouse move : event type = '+Event.type);

if (Event.stopPropagation) Event.stopPropagation(); // DOM2
else Event.cancelBubble=true; //IE
Event.preventDefault();

	MagClip(Event);

	// the magical statement that makes sure any combined move+up triggers
	// the mouseup handler too
	return false;
};


// Mouse down
function MouseDown(Event)
{

if (!Event) Event=window.event; //IE

if (Event.stopPropagation) Event.stopPropagation(); // DOM2
else Event.cancelBubble=true; //IE

if (Event.preventDefault) Event.preventDefault(); // DOM2
else Event.returnValue=false; //IE
	
	// no need to see the message anymore
	Msg.style.visibility="hidden";

	// hint to the user that they can drag
	D.style.cursor="hand";

	// Show the magnification
	MagClip(Event);

	// make M visible
	M.style.visibility="visible";

	// track further movement across entire document (not just the div)
	// to be able to deal with movements past div edges gracefully

	
	if (document.addEventListener) { //DOM2
	document.addEventListener("mousemove",MouseMove,true);
    document.addEventListener("mouseup",MouseUp,true);	
	} else { //IE
	document.onmousemove = MouseMove;
	document.onmouseup = MouseUp;
	}
	
}



/*
Basic Equations

0.a) independent parameters
CW,CH clipping window height and width

0.b) dependent parameters
S=MH/BH=MW/BW scaling between base image and magnified (overlayed) image
BW,BH,BL,BT: width, height left and top, size & position of base image
MW,MH,ML,MT: width, height left and top, size & position of magnified image
PX,PY: pointer position at time of capture

1) focus, relative to base image
FL=PX-BL
FT=PY-BT

2) Magnified Image Clip
CL=S*FL-CW/2
CT=S*FT-CH/2

3) Magnified Image position
ML=PX-CL-CW/2
MT=PY-CT-CH/2


*/



}



/*******************    FUNCTION  DEFINITION  ************************************/
function Cursor(e)
{
// input e is the event
	var x=0,y=0;

	if (e.pageX || e.pageY) 	{
		x = e.pageX;
		y = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		x = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		y = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	// posx and posy contain the mouse position relative to the document
	return {X:x,Y:y}; // return as structure
}




/*******************    FUNCTION  DEFINITION  ************************************/
function AS_CenterOverOldestSibling()
{
/* 
Center 'this' image w.r.t the oldest sibling (under the same parent)
*/
AS_AppendParLine("Par1","CenterOverOldestSibling : called for "+this.src);

AS_CenterImage(this,this.parentNode.firstChild);

AS_AppendParLine("Par1","CenterOverOldestSibling : done");
} 



/*******************    FUNCTION  DEFINITION  ************************************/

function AS_CenterImage(Ctr,Ref)
{
/* 
Style an image C so that it is centered w.r.t a reference image R
M: the overlay image
B->R: the base image 
*/

AS_AppendParLine("Par1","AS_CenterOver : "+Ctr.src+" over "+Ref.src);

//AS_AppendParLine("Par1","AS_CenterOver : "+B.src+" L="+B.style.pixelLeft+" T="+B.style.pixelTop+" Z="+M.style.zIndex
//    +" W="+B.width+" H="+B.height);

//AS_AppendParLine("Par1","AS_CenterOver :  H="+B.height);

// position
Ctr.style.left= Math.floor(Ref.style.left+(Ref.width-Ctr.width)/2)+"px";
Ctr.style.top= Math.floor(Ref.style.top+(Ref.height-Ctr.height)/2)+"px";

// IE and Safari can do pixelLeft. Mozilla needs style.left with "px"
//Ctr.style.pixelLeft= Ref.style.pixelLeft+(Ref.width-Ctr.width)/2;
//Ctr.style.pixelTop= Ref.style.pixelTop+(Ref.height-Ctr.height)/2;

//AS_AppendParLine("Par1","AS_CenterOver : done");

}


/*******************    FUNCTION  DEFINITION  ************************************/

function AS_AppendParLine(Pid,Text)
{
document.getElementById(Pid).innerHTML = document.getElementById(Pid).innerHTML+"<br>"+Text;
}