/* OSC Begin */
var zoomI = null;
/* OSC End */

/**
 * Turns an IMG inside of a DIV into an zoomable and movable object.
 * It is required that the containing DIV is at least positioned as relative,
 * absolute or fixed and has a width and height set - otherwise the image will
 * resize the div also. The overflow behavior is set automatically though.
 * 
 * You can style the elements of the tool bar via CSS:
 *  div.toolbar
 *  div.toolbar > div.tbgrabber
 *  div.toolbar > a.zoomin
 *  div.toolbar > a.zoomout
 *  div.toolbar > a.reset
 *
 * @param img
 *            The image which shall be converted into a zoomable image
 */
function ZoomImage(img) {
	// let's get the parent node first and then see if the node is an image and
	// the parent node is a div. if not we leave everything as it is.
	var parentCont = img.up();
	parentCont.type = "parentCont";
	if(!(img.nodeName == "IMG" && parentCont.nodeName == "DIV"))
		return;
	// variables for saving mouse properties
	var cX = 0;
	var cY = 0;
	var dragElem; // can be the image or the tool bar
	var ratiosR2M; // = ratio of "distance from left/top edge of imgCont to the center of parentCont" to "width/height of imgCont"
	// variables for saving image related properties
	var lSrc = img.src; // last source, used by the public setter function
	var pcW = parentCont.offsetWidth; // width of the parent div
	var pcH = parentCont.offsetHeight; // height of the parent div
	var pcL = parentCont.offsetLeft; // left offset of the parent div
	var pcT = parentCont.offsetTop; // top offset of the parent div
	var riW; // real width of the image
	var riH; // real height of the image
	var aS; // available scales
	var minS; // smallest scale, that's when the image fits exactly into the div
	var csI; // current index of aS used on the image
	// now we create the new elements we need for scaling and drag&drop
	var imgCont = new Element("div"); // here we will place the image
	imgCont.mvBox;
	dragElem = imgCont;
	var imgLay = new Element("div"); // dummy layer to "hide" the img
	// and calculate the image related variables
	/* OSC */
	setDimensionAndScales();
	// it's time to set the styles
	parentCont.style.overflow = "hidden";
	imgCont.style.position = "absolute";
	imgCont.style.cursor = "url("+Constants.url.staticRoot + "images/openhand.cur), default";
	imgLay.style.position = "absolute";
	imgLay.style.width = "100%";
	imgLay.style.height = "100%";
	imgLay.style.zIndex = "2";
	imgLay.style.background = "url("+Constants.url.staticRoot + "images/test/blank.gif)";
	/* OSC
  img.style.position = "absolute"; */
	img.style.width = "100%";
	img.style.height = "100%";
	img.style.zIndex = "1";
	// set the event handlers
	imgLay.onmousedown = dragI;
	img.onload = setDimensionAndScales; 	
	// add everything to the parent div of the img
	imgCont.insert(imgLay);
	imgCont.insert(img);
	parentCont.insert(imgCont);
	/* OSC #
  var tBar = createToolBar();
	aC(parentCont,tBar);*/
	// OSC Begin
	$('bttn_zoom_in').onclick = function() { zoomIn(); return false; };
	$('bttn_zoom_out').onclick = function() { zoomOut(); return false; };
	$('bttn_zoom_reset').onclick = function() { reset(); return false; };
	$('zoomBtns').show();
	// OSC END
	
	// private functions
	function setDimensionAndScales() {
		// create a new image to retrieve the real dimensions
		var nI = new Image();
		nI.src = img.src;
		riW = nI.width;
		riH = nI.height;
		// calculate scalings in steps used by Photoshop
		aS = new Array();				
		var minS = (riW/riH >= pcW/pcH) ? pcW/riW : pcH/riH;		
		aS[0] = 4;
		var n = 1;
		var nextS = 6;		
		while (minS < 4/nextS) {
			aS[n] = nextS;
			n++;
			nextS = 2*aS[n-2];
		}
		for (s = 0; s < aS.length; s++)
			aS[s] = 4 / aS[s];
		csI = aS.length;
		aS[aS.length] = minS;
		reset();
	}
	
	/* OSC 
	function createToolBar() {
		// create toolbar container
		var tBar = cE("div");
		tBar.mvBox = { left:0, right:pcW, top:0, bottom:pcH };
		tBar.className = "toolbar";
		tBar.style.position = "absolute";
		tBar.style.zIndex = "3";
		tBar.style.cursor = "default";
		// the element where we can grab the toolbar
		var tbGrabber = cE("div");
		tbGrabber.className = "tbgrabber";
		// zoom in button
		var zIBut = cE("a");
		aC(zIBut,cT("Zoom In"));
		zIBut.href = "#";
		zIBut.className = "zoomin";
		// zoom out button
		var zOBut = cE("a");
		aC(zOBut,cT("Zoom Out"));
		zOBut.href = "#";
		zOBut.className = "zoomout";
		// reset button
		var rBut = cE("a");
		aC(rBut,cT("Reset"));
		rBut.href = "#";
		rBut.className = "reset";
		// set event handlers
		zIBut.onclick = function() { zoomIn(); this.blur(); return false; };
		zOBut.onclick = function() { zoomOut(); this.blur(); return false; };
		rBut.onclick = function() { reset(); this.blur(); return false; };
		// tricky access to the offsets after attaching to the document
		// for one time calculation of the moveBox ;)
		tbGrabber.onmousedown = function(e) {
			dragTB(e);
			this.parentNode.mvBox = {
				left:0, // alt: -this.offsetWidth/2
				right:pcW-this.offsetWidth, // alt: pcW-this.offsetWidth/2
				top:0,
				bottom:pcH-this.offsetHeight
			};
			this.onmousedown = dragTB;
		};
		// and append
		aC(tBar,tbGrabber);
		aC(tBar,zIBut);
		aC(tBar,zOBut);
		aC(tBar,rBut);
		return tBar;
	}
	*/
	
	function move(e) {
		var evt = e || window.event;
		var mX = evt.clientX - cX;
		var mY = evt.clientY - cY;
		if (mX > dragElem.mvBox.left && mX < dragElem.mvBox.right) 
			dragElem.style.left = mX + "px";
		if (mY > dragElem.mvBox.top && mY < dragElem.mvBox.bottom)
			dragElem.style.top = mY + "px";
		if (document.selection && document.selection.empty)
			document.selection.empty();
		else {
			var sel = window.getSelection() || document.getSelection();
			if (sel.collpase) sel.collapse();
			else if (sel.removeAllRanges) sel.removeAllRanges();
		}
	}
	function dragI(e) {
		dragElem = imgCont;
		imgCont.style.cursor = "url(" + Constants.url.staticRoot + "images/closedhand.cur), move";
		self.document.body.onmouseup = dropI;
		drag(e);
	}
	/* OSC 
	function dragTB(e) {
		dragElem = tBar;
		dragElem.style.cursor = "move";
		self.document.body.onmouseup = dropTB;
		drag(e);
	}
	*/
	function drag(e) {
		var evt = e || window.event;
		cX = evt.clientX - dragElem.offsetLeft;
		cY = evt.clientY - dragElem.offsetTop;
		parentCont.onmousemove = move;
	}
	function dropI() {
		ratiosR2M.left = (pcW/2 - imgCont.offsetLeft)/imgCont.offsetWidth;
		ratiosR2M.top = (pcH/2 - imgCont.offsetTop)/imgCont.offsetHeight;
		dragElem.style.cursor = "url("+Constants.url.staticRoot + "images/openhand.cur), default";
		drop();
	}
	/* OSC
	function dropTB() {
		dragElem.style.cursor = "default";
		drop();
	}*/
	
	function drop() {
		self.document.body.onmouseup = null;
		parentCont.onmousemove = null;
		//dragElem = null;
	}
	function zoomIn() {
		if(aS[csI-1]) { csI--; setZoom(); }
	}
	function zoomOut() {
		if(aS[csI+2]) { csI++; setZoom();
		} else if(aS[csI+1]) { reset(); }
	}
	function setZoom() {
		var niW = Math.round(aS[csI]*riW);
		var niH = Math.round(aS[csI]*riH);
		var niL = Math.round(pcW/2 - ratiosR2M.left*niW);
		var niT = Math.round(pcH/2 - ratiosR2M.top*niH);		
		imgCont.mvBox = {left:pcW-niW, right:0, top:pcH-niH, bottom:0};		
		if (niL < imgCont.mvBox.left) niL = imgCont.mvBox.left;
		else if (niL > 0) niL = 0;
		if (niT < imgCont.mvBox.top) niT = imgCont.mvBox.top;
		else if (niT > 0) niT = 0;
		imgCont.style.width = niW + "px";
		imgCont.style.height = niH + "px";
		imgCont.style.left = niL + "px";
		imgCont.style.top = niT + "px";
	}
	function reset() {	
		ratiosR2M = { left:0.5, top:0.5 };
		csI = aS.length - 1;
		var niW = Math.round(aS[csI]*riW);
		var niH = Math.round(aS[csI]*riH);
		var niL = Math.round(pcW/2 - niW/2);
		var niT = Math.round(pcH/2 - niH/2);
		imgCont.mvBox = { left:niL, right:niL, top:niT, bottom:niT };
		imgCont.style.width = niW + "px";
		imgCont.style.height = niH + "px";
		imgCont.style.left = niL + "px";
		imgCont.style.top = niT + "px";
	}

	// public functions
	this.getImgSize = function() { return { width:riW, height:riH }; }
	this.getImgSrc = function() { return img.src; }
	this.setImgSrc = function(src) { if(src != lSrc) img.src = lSrc = src; }
}