User:Chriskang/Sandbox/fwk.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/*<nowiki>*/

var mainTimer;
var effectInProgress = true;
var mouseX = 0;
var mouseY = 0;
var mainPanel;
var imageCount = 0;

function effectTick()
{
	if (effectInProgress)
	{
		doAllEffects();
		mainTimer = setTimeout("effectTick()",50);
	}
}

function doAllEffects()
{
	//document.getElementById('debugTxtOffsetLeft').firstChild.nodeValue = document.getElementById('debugTxt').offsetLeft;
	//document.getElementById('debugTxtOffsetTop').firstChild.nodeValue = document.getElementById('debugTxt').offsetTop;
	//document.getElementById('debugTxtScrollX').firstChild.nodeValue = document.body.scrollLeft;
	if (mainPanel) {	
		for ( var i = 0; i < imageCount; i++ )
		{
			zoomOneImage(mainPanel.childNodes[i].childNodes[0], 100 + (600 / (imageCount - 1)) * i);
		}
	}
	//zoomOneImage('1', 85);
	//zoomOneImage('2', 175);
	//zoomOneImage('3', 265);
	//zoomOneImage('4', 355);
	//zoomOneImage('5', 445);
	//zoomOneImage('6', 535);
	//zoomOneImage('7', 625);
	//zoomOneImage('8', 715);
}

function zoomOneImage(imageNode, centerX)
{
	var delta1 = 130 - 2 * Math.abs(mouseX - centerX);
	if (Math.abs(mouseY - 130) > 60) {
		delta1 = delta1 - 2 * (Math.abs(mouseY - 130) - 60);
	}
	delta1 = Math.max(delta1, 0);
	delta1 = Math.min(delta1, 90);
	if (imageNode) {
		imageNode.style.width = "" + (100 + delta1 / 2) + "px";
		imageNode.style.height = "" + (120 + delta1 / 1.667) + "px";
		//imageNode.style.left = "" + ((centerX - 40 - delta1 / 3 / 2) - (mouseX - centerX) / 50) + "px";
		imageNode.style.left = "" + (centerX - 50 - delta1 / 4) + "px";
		imageNode.style.top = "" + (40 - delta1 / 2.3) + "px";
		imageNode.style.zIndex = "" + delta1;
		imageNode.style.position = "absolute";
	}
	//setOpacity(imageNode, 0.5 + delta1 / 200.0);
}

//var IE = document.all?true:false
//if (!IE) document.captureEvents(Event.MOUSEMOVE)

function captureMousePosition(e) {
	if (mainPanel) {
		if (!e) var e = window.event;
		if (e.pageX || e.pageY) 	{
		//Firefox, Chrome
			mouseX = e.pageX - getX(mainPanel);
			mouseY = e.pageY - mainPanel.offsetTop
		}
		else if (e.clientX || e.clientY) 	{
		//IE
			mouseX = e.clientX - getX(mainPanel) + (document.documentElement.scrollLeft ?
	   document.documentElement.scrollLeft :
	   document.body.scrollLeft);
			mouseY = e.clientY - mainPanel.offsetTop + (document.documentElement.scrollTop ?
	   document.documentElement.scrollTop :
	   document.body.scrollTop);
		}

		//mouseX = mouseX - getX(mainPanel);
		//mouseY = mouseY - getY(mainPanel);
		
		if (mouseX < 0) mouseX = 0;
		if (mouseY < 0) mouseY = 0;
		if (mouseX > 790) mouseX = 790;
		if (mouseY > 300) mouseY = 300;
	}
	
	return true
}

function getX( oElement )
{
var iReturnValue = 0;
while( oElement != null ) {
iReturnValue += oElement.offsetLeft;
oElement = oElement.offsetParent;
}
return iReturnValue;
}

function getY( oElement )
{
var iReturnValue = 0;
while( oElement != null ) {
iReturnValue += oElement.offsetTop;
oElement = oElement.offsetParent;
}
return iReturnValue;
}


function setOpacity(obj, val)
{
    obj.style.opacity = val;
    obj.style.filter = "alpha(opacity="+ val*100 +")";
}

function initialize()
{
	//next line is stolen from Poke's CollapsibleTables
	var docContent = document.getElementById('bodyContent') || document.getElementById('article') || document.getElementById('mw_contentholder');
	if (docContent) {
		var divs = docContent.getElementsByTagName('div');
			
		for ( var i = 0, n = divs.length; i < n; i++ )
		{
			if (divs[i].className == 'magnified')
			{
				mainPanel = divs[i];
				imageCount = mainPanel.childNodes.length;
			}
		}
	}
	
	effectTick();
}

initialize();
document.onmousemove = captureMousePosition;

/*</nowiki>*/