/*

12view gallery highlighter v 1.0
http://12view.de/

You are allowed to implement this feature on your website.
You only have to leave this Copyright within the source.

Original script from www.wingnut.net.ms
#################################################################
#  script by WingNut                        www.wingnut.net.ms  #
#                                                               #
#  this script has been published under the gnu public license  #
#  you may edit the script but never delete this comment! thx.  #
#################################################################

This version is a little bit simplified.
Thumbs are positioned "absolute" in relation to surrounding
box, "left" and "top" are not used.
One bug has been fixed: Execution is stopped if width or
height can't be determined.
In addition to that it is not necessary to know the
width and height of every thumb. It is determined when needed.

Implement thumbs as follows:
  <img ... style="position: absolute; z-index: 1;" class="thumb12Nails" >

If you know the thumb dimensions you can adjust the thumbs by adding
  "margin-top: <number>px; margin-left: <number>px;"
 in the style attribute.

Include this JS-source.

Enjoy.

*/

var zoomSteps = 5;
var stepSize = 4;
var waitMillisIn = 2;
var waitMillisOut = 10;
// show border when maximized - set borderWidths to 1
var borderColorLeftTop = '#000';
var borderColorRightBottom = '#000';
var borderWidthLeftTop = 1;
var borderWidthRightBottom = 1;

function initGallery() {
	var thumbs = document.getElementsByTagName('img');
	for (var i = 0; i < thumbs.length; i++) {
		if (thumbs[i].className == "thumb12Nails") {
			thumbs[i].originalWidth = thumbs[i].width;
			thumbs[i].originalHeight = thumbs[i].height;
			thumbs[i].originalMarginLeft = (isNaN(parseInt(thumbs[i].style.marginLeft)) ? 0 : parseInt(thumbs[i].style.marginLeft));
			thumbs[i].originalMarginTop = (isNaN(parseInt(thumbs[i].style.marginTop)) ? 0 : parseInt(thumbs[i].style.marginTop));
			thumbs[i].onmouseover = scaleImageIn;
			thumbs[i].onmouseout = scaleImgOut;
		}
	}
}
function resetImage(theImg) {
	with (theImg) {
		style.borderWidth = '0';
		setAttribute('width', theImg.originalWidth);
		setAttribute('height', theImg.originalHeight);
		//alert(theImg.originalMarginLeft + ", " + theImg.originalMarginTop);
		style.marginLeft = theImg.originalMarginLeft + 'px';
		style.marginTop = theImg.originalMarginTop + 'px';
		style.zIndex = 1;
	}
}
function scaleImgOut() {
	if (!(typeof waitMillisOut != 'undefined')) { return; }
	var theImg = this;
	try {
		window.clearInterval(intervalIn);
	}
	catch(ex) {}
	theImg.style.zIndex = 10;
	var intervalOut = window.setInterval(scaleStepOut, waitMillisOut);
	return;
	function scaleStepOut()   {
		var width = parseInt(theImg.getAttribute('width'));
		var height = parseInt(theImg.getAttribute('height'));
		if (isNaN(width) || isNaN(height) || width < theImg.originalWidth || height < theImg.originalHeight) {
			window.clearInterval(intervalOut);
			resetImage(theImg);
			return;
		}
		var actMarginTop = parseInt(theImg.style.marginTop);
		var actMarginLeft = parseInt(theImg.style.marginLeft);
		var v_marginLeft = isNaN(actMarginLeft) ? theImg.originalMarginLeft : actMarginLeft;
		var v_marginTop = isNaN(actMarginTop) ? theImg.originalMarginTop : actMarginTop;
		if(width >= height) {
			with(theImg) {
				style.marginLeft = (v_marginLeft + Math.round(stepSize / 2)) + 'px';
				style.marginTop = (v_marginTop + Math.round(stepSize * 3 / 8)) + 'px';
				setAttribute('width', width - stepSize);
				setAttribute('height', height - Math.round(stepSize * (3/4)));
			}
			if(width < theImg.originalWidth + stepSize) {
				window.clearInterval(intervalOut);
				//alert(theImg.originalMarginLeft + ", " + theImg.originalMarginTop);
				resetImage(theImg);
				return;
			}
		}
		else {
			with(theImg) {
				setAttribute('width', width - Math.round(stepSize * (3/4)));
				setAttribute('height', height - stepSize);
				style.marginLeft = (v_marginLeft + Math.round(stepSize * 3 / 8)) + 'px';
				style.marginTop = (v_marginTop + Math.round(stepSize/2)) + 'px';
			}
			if(height < theImg.originalHeight + stepSize) {
				window.clearInterval(intervalOut);
				//alert(theImg.originalMarginLeft + ", " + theImg.originalMarginTop);
				resetImage(theImg);
				return;
			}
		}
	}
}

function scaleImageIn()
{
	if (!(typeof waitMillisIn != 'undefined')) { return; }
	var theImage = this;
  theImage.style.zIndex = 10;
  var count = 0;
  intervalIn = window.setInterval(imgScaleStepIn, waitMillisIn);
  return false;

  function imgScaleStepIn()
  {
	var startWidth = parseInt(theImage.width);
	var startHeight = parseInt(theImage.height);
	var v_marginLeft = isNaN(parseInt(theImage.style.marginLeft)) ? theImage.originalMarginLeft : parseInt(theImage.style.marginLeft);
	var v_marginTop = isNaN(parseInt(theImage.style.marginTop)) ? theImage.originalMarginTop : parseInt(theImage.style.marginTop);
	if(startWidth >= startHeight) {
	  startWidth += stepSize;
	  startHeight += Math.round(stepSize * (3/4));
	  theImage.style.marginLeft = (v_marginLeft - Math.round(stepSize/2)) + 'px';
	  theImage.style.marginTop = (v_marginTop - Math.round(stepSize * 3 / 8)) + 'px';
	}
	else
	{
	  startWidth += Math.round(stepSize * (3/4));
	  startHeight += stepSize;
	  theImage.style.marginLeft = (v_marginLeft - Math.round(stepSize * 3 / 8)) + 'px';
	  theImage.style.marginTop = (v_marginTop - Math.round(stepSize/2)) + 'px';
	}
	theImage.setAttribute('width', startWidth);
	theImage.setAttribute('height', startHeight);
	count++;
	if (count >= zoomSteps) {
		if (borderWidthLeftTop > 0 || borderWidthRightBottom > 0) {
			with(theImage) {
				style.marginLeft     = (v_marginLeft - Math.round(stepSize * 3 / 8) - borderWidthLeftTop) + 'px';
				style.marginTop      = (v_marginTop - Math.round(stepSize/2) - borderWidthLeftTop) + 'px';
				style.borderTop      = borderWidthLeftTop + 'px solid ' + borderColorLeftTop;
				style.borderLeft     = borderWidthLeftTop + 'px solid ' + borderColorLeftTop;
				style.borderRight    = borderWidthRightBottom + 'px solid ' + borderColorRightBottom;
				style.borderBottom   = borderWidthRightBottom + 'px solid ' + borderColorRightBottom;
			}
		}
	  window.clearInterval(intervalIn);
	}
  }
}