function ZoomTool(mediaPath,toolXpos,toolYpos,startLevel,control,labels)
{
	this.toolXpos = toolXpos;
	this.toolYpos = toolYpos;
	this.toolWidth = 80;
	this.toolHeight = 112;
	this.lvlWidth = 40;
	this.lvlHeight = 16;
	this.zoomInOutWidth = 29;
	this.zoomInOutHeight = 29;
	this.highlightEffectTimeout = 200;//ms
	this.labels = labels;
	// Controled object
	this.controlClass = control;
	// Zoom ////////////////////////
	this.startLevel = startLevel;
	this.currentZoomLevel = 1;
	this.zoomLevelNumber = 6;
	////////////////////////////////
	this.mediaPath = mediaPath;
	this.imageExt = ".jpg";
	if (navigator.appName.indexOf("Microsoft")!=-1) {
		this.browserType = "IE";
	}else if(navigator.appName == "Opera"){
		this.browserType = "Opera";
	}else if(navigator.vendor.indexOf("Apple")!=-1){
		this.browserType = "Safari";
	}else{
		this.browserType = "Other";
	}
	//construct the path to image
	this.zoomBgImgSrc = this.mediaPath + "zoom_bg" + this.imageExt;
	this.zoomLvlImgSrc = this.mediaPath + "level";
	this.zoomInImgSrc = this.mediaPath + "zoom_in";
	this.zoomOutImgSrc = this.mediaPath + "zoom_out";
	// create div container
	this.createContainerDiv();
	// create tile names for this image
	this.loadImages();
}

ZoomTool.prototype.createContainerDiv = function()
{
	this.zoomToolDiv = document.createElement("div");
	//document.body.appendChild(this.zoomToolDiv);	
	document.getElementById('zoom').appendChild(this.zoomToolDiv);
	this.zoomToolDiv.style.position = "absolute";
	this.zoomToolDiv.style.left = this.toolXpos + "px";
	this.zoomToolDiv.style.top = this.toolYpos + "px";
	this.zoomToolDiv.style.width = this.toolWidth + "px";
	this.zoomToolDiv.style.height = this.toolHeight + "px";
	this.zoomToolDiv.style.overflow = "hidden";
}
ZoomTool.prototype.loadImages = function()
{
	// try loading bg image
	//this.zoomBg = new Image(); <><><><><><>
	this.zoomBg = document.createElement('img');
	this.zoomBg.tool = this;
	this.zoomBg.style.position = "absolute";
	this.zoomBg.onload = function(){this.tool.onBgImgLoad();}//same in IE and Firefox
	this.zoomBg.src = this.zoomBgImgSrc
	// loading level images
	for(var i = 1; i <= this.zoomLevelNumber; i++){
		//this["levelImgOn"+i] = new Image();  <><><><><><><><>
		this["levelImgOn"+i]  = document.createElement('img');
		//this["levelImgOff"+i] = new Image(); <><><><><><><><>
		this["levelImgOff"+i] = document.createElement('img');
		this["levelImgOn"+i].tool = this;
		this["levelImgOff"+i].tool = this;
		this["levelImgOn"+i].zoomLevel = i;
		this["levelImgOff"+i].zoomLevel = i;
		this["levelImgOn"+i].onload = function(){this.tool.onLevelImgOnLoaded(this.zoomLevel);}
		this["levelImgOff"+i].onload = function(){this.tool.onLevelImgOffLoaded(this.zoomLevel);}
		this["levelImgOn"+i].onclick = function(event){this.tool.onLevelClick(event)};
		this["levelImgOff"+i].onclick = function(event){this.tool.onLevelClick(event)};
		this["levelImgOn"+i].style.cursor = 'pointer';
		this["levelImgOff"+i].style.cursor = 'pointer';
		this["levelImgOn"+i].alt = eval("this.labels.Lzoomlevel"+i+"_alt");
		this["levelImgOff"+i].alt = eval("this.labels.Lzoomlevel"+i+"_alt");
		//
		this["levelImgOn"+i].src = this.zoomLvlImgSrc + i + "_on" + this.imageExt;
		this["levelImgOff"+i].src = this.zoomLvlImgSrc + i + "_off" + this.imageExt;
	}
	// try loading zoom in image
	//this.zoomInOffImg = new Image();  <><><><><>
	this.zoomInOffImg = document.createElement('img');
	this.zoomInOffImg.tool = this;
	this.zoomInOffImg.alt = this.labels.LzoomIn_alt;
	this.zoomInOffImg.style.position = "absolute";
	this.zoomInOffImg.style.cursor = 'pointer';
	this.zoomInOffImg.onload = function(){this.tool.onZoomInOffImgLoad();}//same in IE and Firefox
	//this.zoomInOffImg.onmousedown = function(event){this.tool.onZoomInMouseDown(event);}//same in IE and Firefox
	this.zoomInOffImg.onmouseover = function(event){this.tool.onZoomInMouseOver(event);}//same in IE and Firefox
	//this.zoomInOffImg.onmouseup = function(event){this.tool.onZoomInMouseUp(event);}//same in IE and Firefox
	//this.zoomInOffImg.onmouseout = function(event){this.tool.onZoomInMouseUp(event);}//same in IE and Firefox
	this.zoomInOffImg.src = this.zoomInImgSrc + "_off" + this.imageExt;	
	
	///////
	//this.zoomInOnImg = new Image(); <><><><><><><>
	this.zoomInOnImg = document.createElement('img');
	this.zoomInOnImg.tool = this;
	this.zoomInOnImg.alt = this.labels.LzoomIn_alt;
	this.zoomInOnImg.style.position = "absolute";
	this.zoomInOnImg.onload = function(){this.tool.onZoomInOnImgLoad();}//same in IE and Firefox
	this.zoomInOnImg.src = this.zoomInImgSrc + "_on" + this.imageExt;
	
	//////
	// try loading zoom out image
	//this.zoomOutOffImg = new Image(); <><><><><><><>
	this.zoomOutOffImg = document.createElement('img');
	this.zoomOutOffImg.tool = this;
	this.zoomOutOffImg.alt = this.labels.LzoomOut_alt;
	this.zoomOutOffImg.style.position = "absolute";
	this.zoomOutOffImg.style.cursor = 'pointer';
	this.zoomOutOffImg.onload = function(){this.tool.onZoomOutOffImgLoad();}//same in IE and Firefox
	//this.zoomOutOffImg.onmousedown = function(event){this.tool.onZoomOutMouseDown(event);}//same in IE and Firefox
	this.zoomOutOffImg.onmouseover = function(event){this.tool.onZoomOutMouseOver(event);}//same in IE and Firefox
	//this.zoomOutOffImg.onmouseout = function(event){this.tool.onZoomOutMouseOut(event);}//same in IE and Firefox
	//this.zoomOutOffImg.onmouseup = function(event){this.tool.onZoomOutMouseUp(event);}//same in IE and Firefox
	//this.zoomOutOffImg.onmouseout = function(event){this.tool.onZoomOutMouseUp(event);}//same in IE and Firefox
	this.zoomOutOffImg.src = this.zoomOutImgSrc + "_off" + this.imageExt;
	
	///////
	//this.zoomOutOnImg = new Image(); <><><><><><><>
	this.zoomOutOnImg = document.createElement('img');
	this.zoomOutOnImg.tool = this;
	this.zoomOutOnImg.alt = this.labels.LzoomOut_alt;
	this.zoomOutOnImg.style.position = "absolute";
	this.zoomOutOnImg.onload = function(){this.tool.onZoomOutOnImgLoad();}//same in IE and Firefox
	this.zoomOutOnImg.src = this.zoomOutImgSrc + "_on" + this.imageExt;
		
	///////
	//this.zoomInOnImg = new Image(); <><><><><><><>
	this.zoomInOverImg = document.createElement('img');
	this.zoomInOverImg.tool = this;
	this.zoomInOverImg.alt = this.labels.LzoomIn_alt;
	this.zoomInOverImg.style.position = "absolute";
	this.zoomInOverImg.style.cursor = 'pointer';
	this.zoomInOverImg.onload = function(){this.tool.onZoomInOverImgLoad();}//same in IE and Firefox
	this.zoomInOverImg.onmouseout = function(event){this.tool.onZoomInMouseOut(event);}//same in IE and Firefox
	this.zoomInOverImg.onmousedown = function(event){this.tool.onZoomInMouseDown(event);}//same in IE and Firefox
	this.zoomInOverImg.src = this.zoomInImgSrc + "_over" + this.imageExt;
	
	//////
	///////
	//this.zoomOutOnImg = new Image(); <><><><><><><>
	this.zoomOutOverImg = document.createElement('img');
	this.zoomOutOverImg.tool = this;
	this.zoomOutOverImg.alt = this.labels.LzoomOut_alt;
	this.zoomOutOverImg.style.position = "absolute";
	this.zoomOutOverImg.style.cursor = 'pointer';
	this.zoomOutOverImg.onload = function(){this.tool.onZoomOutOverImgLoad();}//same in IE and Firefox
	this.zoomOutOverImg.onmouseout = function(event){this.tool.onZoomOutMouseOut(event);}//same in IE and Firefox
	this.zoomOutOverImg.onmousedown = function(event){this.tool.onZoomOutMouseDown(event);}//same in IE and Firefox
	this.zoomOutOverImg.src = this.zoomOutImgSrc + "_over" + this.imageExt;
	//////
	
}
ZoomTool.prototype.onBgImgLoad = function()
{
	
	// create div that holds initial image
	this.zoomBgDiv = document.createElement("div");
	this.zoomBgDiv.style.position = "absolute";
	this.zoomBgDiv.style.left = 0 + 'px';
	this.zoomBgDiv.style.top = 0 + 'px';
	//append loaded image to div
	this.zoomBgDiv.appendChild(this.zoomBg);
	//append div to container
	this.zoomToolDiv.appendChild(this.zoomBgDiv);
}
ZoomTool.prototype.onLevelImgOnLoaded = function(i)
{
	//alert("onLevelImgOnLoaded");
	/// create level div
	this["levelImgOnDiv"+i] = document.createElement("div");
	//append it to container
	this.zoomToolDiv.appendChild(this["levelImgOnDiv"+i]);
	this["levelImgOnDiv"+i].style.position = "absolute";
	//if we are 0 zoom level hide preloaded tiles under the init image
	if(i <= this.startLevel){
		this["levelImgOnDiv"+i].style.zIndex = (2 * this.zoomLevelNumber) + i;
		this["levelImgOnDiv"+i].visible = true;
	}else{
		this["levelImgOnDiv"+i].style.zIndex = i;
		this["levelImgOnDiv"+i].visible = false;
	}
	this["levelImgOnDiv"+i].zoomStatus = "on";
	/// position
	this["levelImgOnDiv"+i].style.left = 5 + "px";
	this["levelImgOnDiv"+i].style.top = this.toolHeight - 10 - (i * this.lvlHeight) + "px";
	// append loaded image to tile div
	this["levelImgOnDiv"+i].appendChild(this["levelImgOn"+i]);
}
ZoomTool.prototype.onLevelImgOffLoaded = function(i)
{
	//alert("onLevelImgOnLoaded");
	/// create level div
	this["levelImgOffDiv"+i] = document.createElement("div");
	//append it to container
	this.zoomToolDiv.appendChild(this["levelImgOffDiv"+i]);
	this["levelImgOffDiv"+i].style.position = "absolute";
	//if we are 0 zoom level hide preloaded tiles under the init image
	this["levelImgOffDiv"+i].style.zIndex = this.zoomLevelNumber + i;
	this["levelImgOffDiv"+i].zoomStatus = "off";
	/// position
	this["levelImgOffDiv"+i].style.left = 5 + "px";
	this["levelImgOffDiv"+i].style.top = this.toolHeight - 10 - (i * this.lvlHeight) + "px";
	// append loaded image to tile div
	this["levelImgOffDiv"+i].appendChild(this["levelImgOff"+i]);
}
ZoomTool.prototype.onZoomInOnImgLoad = function()
{
	//alert("onLevelImgOnLoaded");
	/// create level div
	this.zoomInOnDiv = document.createElement("div");
	//append it to container
	this.zoomToolDiv.appendChild(this.zoomInOnDiv);
	this.zoomInOnDiv.style.position = "absolute";
	//if we are 0 zoom level hide preloaded tiles under the init image
	this.zoomInOnDiv.style.zIndex = 1;
	// width height
	this.zoomInOnDiv.style.width = this.zoomInOutWidth + "px";
	this.zoomInOnDiv.style.height = this.zoomInOutHeight + "px";	
	this.zoomInOnImg.style.width = this.zoomInOutWidth + "px";
	this.zoomInOnImg.style.height = this.zoomInOutHeight + "px";
	/// position
	if (this.browserType == "Safari")
	{
		this.zoomInOnDiv.style.left = (this.toolWidth -  this.zoomInOutWidth - 6) + "px";
	}
	else
	{
		this.zoomInOnDiv.style.left = (this.toolWidth -  this.zoomInOutWidth - 18) + "px";
	}
	this.zoomInOnDiv.style.top = 5 + "px";
	// append loaded image to tile div
	this.zoomInOnDiv.appendChild(this.zoomInOnImg);
}
ZoomTool.prototype.onZoomInOffImgLoad = function()
{
	//alert("onLevelImgOnLoaded");
	/// create level div
	this.zoomInOffDiv = document.createElement("div");
	//append it to container
	this.zoomToolDiv.appendChild(this.zoomInOffDiv);
	this.zoomInOffDiv.style.position = "absolute";
	//if we are 0 zoom level hide preloaded tiles under the init image
	this.zoomInOffDiv.style.zIndex = 2;
	// width height
	this.zoomInOffDiv.style.width = this.zoomInOutWidth + "px";
	this.zoomInOffDiv.style.height = this.zoomInOutHeight + "px";	
	this.zoomInOffImg.style.width = this.zoomInOutWidth + "px";
	this.zoomInOffImg.style.height = this.zoomInOutHeight + "px";
	/// position
	if (this.browserType == "Safari")
	{
		this.zoomInOffDiv.style.left = (this.toolWidth -  this.zoomInOutWidth - 6) + "px";
	}
	else
	{
		this.zoomInOffDiv.style.left = (this.toolWidth -  this.zoomInOutWidth - 18) + "px";
	}
	this.zoomInOffDiv.style.top = 5 + "px";
	// append loaded image to tile div
	this.zoomInOffDiv.appendChild(this.zoomInOffImg);
}
ZoomTool.prototype.onZoomInOverImgLoad = function()
{
	//alert("onLevelImgOnLoaded");
	/// create level div
	this.zoomInOverDiv = document.createElement("div");
	//append it to container
	this.zoomToolDiv.appendChild(this.zoomInOverDiv);
	this.zoomInOverDiv.style.position = "absolute";
	//if we are 0 zoom level hide preloaded tiles under the init image
	this.zoomInOverDiv.style.zIndex = 1;
	// width height
	this.zoomInOverDiv.style.width = this.zoomInOutWidth + "px";
	this.zoomInOverDiv.style.height = this.zoomInOutHeight + "px";	
	this.zoomInOverImg.style.width = this.zoomInOutWidth + "px";
	this.zoomInOverImg.style.height = this.zoomInOutHeight + "px";
	/// position
	if (this.browserType == "Safari")
	{
		this.zoomInOverDiv.style.left = (this.toolWidth -  this.zoomInOutWidth - 6) + "px";
	}
	else
	{
		this.zoomInOverDiv.style.left = (this.toolWidth -  this.zoomInOutWidth - 18) + "px";
	}
	this.zoomInOverDiv.style.top = 5 + "px";
	// append loaded image to tile div
	this.zoomInOverDiv.appendChild(this.zoomInOverImg);
}
ZoomTool.prototype.onZoomOutOffImgLoad = function()
{
	//alert("onLevelImgOnLoaded");
	/// create level div
	this.zoomOutOffDiv = document.createElement("div");
	//append it to container
	this.zoomToolDiv.appendChild(this.zoomOutOffDiv);
	this.zoomOutOffDiv.style.position = "absolute";
	//if we are 0 zoom level hide preloaded tiles under the init image
	this.zoomOutOffDiv.style.zIndex = 2;
	// width height
	this.zoomOutOffDiv.style.width = this.zoomInOutWidth + "px";
	this.zoomOutOffDiv.style.height = this.zoomInOutHeight + "px";	
	this.zoomOutOffImg.style.width = this.zoomInOutWidth + "px";
	this.zoomOutOffImg.style.height = this.zoomInOutHeight + "px";
	/// position
	if (this.browserType == "Safari")
	{
		this.zoomOutOffDiv.style.left = (this.toolWidth -  this.zoomInOutWidth - 6) + "px";
	}
	else
	{
		this.zoomOutOffDiv.style.left = (this.toolWidth -  this.zoomInOutWidth - 18) + "px";
	}
	this.zoomOutOffDiv.style.top = (this.toolHeight -  this.zoomInOutHeight - 5) + "px";
	// append loaded image to tile div
	this.zoomOutOffDiv.appendChild(this.zoomOutOffImg);
}
ZoomTool.prototype.onZoomOutOnImgLoad = function()
{
	//alert("onLevelImgOnLoaded");
	/// create level div
	this.zoomOutOnDiv = document.createElement("div");
	//append it to container
	this.zoomToolDiv.appendChild(this.zoomOutOnDiv);
	this.zoomOutOnDiv.style.position = "absolute";
	//if we are 0 zoom level hide preloaded tiles under the init image
	this.zoomOutOnDiv.style.zIndex = 1;
	// width height
	this.zoomOutOnDiv.style.width = this.zoomInOutWidth + "px";
	this.zoomOutOnDiv.style.height = this.zoomInOutHeight + "px";	
	this.zoomOutOnImg.style.width = this.zoomInOutWidth + "px";
	this.zoomOutOnImg.style.height = this.zoomInOutHeight + "px";
	/// position
	if (this.browserType == "Safari")
	{
		this.zoomOutOnDiv.style.left = (this.toolWidth -  this.zoomInOutWidth - 6) + "px";
	}
	else
	{
		this.zoomOutOnDiv.style.left = (this.toolWidth -  this.zoomInOutWidth - 18) + "px";
	}
	this.zoomOutOnDiv.style.top = (this.toolHeight -  this.zoomInOutHeight - 5) + "px";
	// append loaded image to tile div
	this.zoomOutOnDiv.appendChild(this.zoomOutOnImg);
}
ZoomTool.prototype.onZoomOutOverImgLoad = function()
{
	//alert("onLevelImgOnLoaded");
	/// create level div
	this.zoomOutOverDiv = document.createElement("div");
	//append it to container
	this.zoomToolDiv.appendChild(this.zoomOutOverDiv);
	this.zoomOutOverDiv.style.position = "absolute";
	//if we are 0 zoom level hide preloaded tiles under the init image
	this.zoomOutOverDiv.style.zIndex = 1;
	// width height
	this.zoomOutOverDiv.style.width = this.zoomInOutWidth + "px";
	this.zoomOutOverDiv.style.height = this.zoomInOutHeight + "px";	
	this.zoomOutOverImg.style.width = this.zoomInOutWidth + "px";
	this.zoomOutOverImg.style.height = this.zoomInOutHeight + "px";
	/// position
	if (this.browserType == "Safari")
	{
		this.zoomOutOverDiv.style.left = (this.toolWidth -  this.zoomInOutWidth - 6) + "px";
	}
	else
	{
		this.zoomOutOverDiv.style.left = (this.toolWidth -  this.zoomInOutWidth - 18) + "px";
	}
	this.zoomOutOverDiv.style.top = (this.toolHeight -  this.zoomInOutHeight - 5) + "px";
	// append loaded image to tile div
	this.zoomOutOverDiv.appendChild(this.zoomOutOverImg);
}
ZoomTool.prototype.onZoomInMouseDown = function(evt)
{
	this.zoomInOnDiv.style.zIndex = 3;
	if(this.currentZoomLevel < this.zoomLevelNumber)
	{
		this.currentZoomLevel ++;
		//highlight levels
		this.highlightOnState();
		//call object set zoom
		this.controlClass.zoomIn();
	}
	//turn of higlighted div
  	var self = this;
    setTimeout( function () { self.onZoomInMouseUp(); }, this.highlightEffectTimeout ) ;    	
}
ZoomTool.prototype.onZoomInMouseUp = function()
{
	this.zoomInOnDiv.style.zIndex = 1;
}
ZoomTool.prototype.onZoomInMouseOver = function(evt)
{
	this.zoomInOverDiv.style.zIndex = 2;	
}
ZoomTool.prototype.onZoomInMouseOut = function(evt)
{
	this.zoomInOverDiv.style.zIndex = 0;
	this.zoomInOffDiv.style.zIndex = 2;
}
ZoomTool.prototype.onZoomOutMouseDown = function(evt)
{
	this.zoomOutOnDiv.style.zIndex = 3;
	if(this.currentZoomLevel > 1)
	{
		this.currentZoomLevel --;
		//highlight levels
		this.highlightOnState();
		//call object set zoom
		this.controlClass.zoomOut();
	}
	//turn of higlighted div
  	var self = this;
    setTimeout( function () { self.onZoomOutMouseUp(); }, this.highlightEffectTimeout ) ; 
}
ZoomTool.prototype.onZoomOutMouseOver = function(evt)
{
	this.zoomOutOverDiv.style.zIndex = 2;	
}
ZoomTool.prototype.onZoomOutMouseOut = function(evt)
{
	this.zoomOutOverDiv.style.zIndex = 0;
	this.zoomOutOffDiv.style.zIndex = 2;
}
ZoomTool.prototype.onZoomOutMouseUp = function(evt)
{
	this.zoomOutOnDiv.style.zIndex = 1;
}
ZoomTool.prototype.onLevelClick = function(evt)
{
	var target;
	
	if (this.browserType == "IE"){
		target = event.srcElement;
	}else{
		target = evt.target;
	}
	this.currentZoomLevel = target.zoomLevel;
	//highlight levels
	this.highlightOnState();
	//call object set zoom
	this.controlClass.setZoom(this.currentZoomLevel);
}
ZoomTool.prototype.onLevelSet = function(lvl)
{
	this.currentZoomLevel = lvl;
	//highlight levels
	this.highlightOnState();
}
ZoomTool.prototype.highlightOnState = function(){
	for(var i = 1; i <= this.zoomLevelNumber; i++){
		if(i<=this.currentZoomLevel){//make visible
			if(!this["levelImgOnDiv"+i].visible){ // if on state is not visible
				this["levelImgOnDiv"+i].style.zIndex = (2 * this.zoomLevelNumber) + i;
				this["levelImgOnDiv"+i].visible = true;
			}
		}else{
			if(this["levelImgOnDiv"+i].visible){ // if on state is visible
				this["levelImgOnDiv"+i].style.zIndex = i;
				this["levelImgOnDiv"+i].visible = false;
			}
		}
	}
}