function ImageViewer(elementId,mediaPath,imgSize,viewerXpos,viewerYpos,viewerResolution)
{
	this.viewerXpos = viewerXpos;
	this.viewerYpos = viewerYpos;
	this.zoomCenterPositionX = 50; // percents used to center image when clicked on
	this.zoomCenterPositionY = 50; // percents centered
	this.viewerResolution = viewerResolution;
	this.viewerImageWidth = this.viewerResolution;
	this.viewerImageHeight = this.viewerResolution;
	// zoom tool
	this.zoomClass = null;
	//////
	this.overIconResolution = 118;
	this.overImageWidth = 118;
	this.overImageHeight = 118;
	// Zoom ////////////////////////
	this.currentZoomLevel = 1;
	this.zoomAction = "";
	this.zoomClickX = -1;
	this.zoomClickY = -1;
	this.xPosImg = 0;
	this.yPosImg = 0;
	this.zoomAction == "<>";
	//////
	this.xPosOverRectImg = 0;
	this.yPosOverRectImg = 0;
	this.overBoxWidth = 0;
	this.overBoxHeight = 0;
	// Drag ////////////////////////
	this.dragStartX = 0;
	this.dragStartY = 0;
	this.dragX = 0;
	this.dragY = 0;
	this.isDragging = false;
	this.hasBeenDragged = false;
	//////
	this.dragStartOverRectX = 0;
	this.dragStartOverRectY = 0;
	this.dragOverRectX = 0;
	this.dragOverRectY = 0;
	this.isDraggingOverBox = false;
	//Click event position
	this.xPosClick = 0;
	this.yPosClick = 0;
	//Scroll
	this.scrollViewerMovemenet = 0;
	this.scrollViewerRatio = 25;
	////////////////////////////////
	this.mediaPath = mediaPath;
	this.elementId = elementId;
	this.imageExt = ".jpg";
	this.viewerImgSize = imgSize;
	this.tileNumber = 9;
	////////////////////////////////////
	this.setMagnification();	
	////////////////////////////////////
	this.tileNamesArray = new Array(this.tileNumber);
	//Browser type
	//alert(navigator.userAgent.toLowerCase());
	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.initialImgSrc = this.mediaPath + elementId + "_" + this.viewerResolution + "x" + this.viewerResolution + this.imageExt;
	this.overviewImgSrc =  this.mediaPath + elementId + "_" + this.overIconResolution + "x" + this.overIconResolution + this.imageExt;
	// create div container
	this.createContainerDiv();
	// create tile names for this image
	this.setTileNames();
	// create the full sized image
	//this.initialImg = new Image(); <><><><><>
	this.initialImg = document.createElement('img');
	this.initialImg.viewer = this;
	this.initialImg.style.position = "absolute";
	this.initialImg.style.left = 0 + "px";
	this.initialImg.style.top = 0 + "px";
	this.initialImg.onload = function(){this.viewer.onInitImgLoad();}//same in IE and Firefox
	if(this.browserType == "IE"){
		//alert("IE");
		this.initialImg.onclick = function(){this.viewer.onInitImgClick();}
		this.initialImg.ondrag = function(){this.viewer.onInitImgDrag();}
		this.initialImg.ondragstart = function(){this.viewer.onInitImgDragStart();}
	}else{
		//alert("Other");
		this.initialImg.onclick = function(event){this.viewer.onInitImgClick(event)};
		this.initialImg.onmousedown  = function(event){this.viewer.onInitImgMouseDown(event);}
		this.initialImg.onmouseup  = function(){this.viewer.onInitImgMouseUp();}
		this.initialImg.onmouseout  = function(){this.viewer.onInitImgMouseUp();}
		this.initialImg.onmousemove  = function(event){this.viewer.onInitImgMouseMove(event);}
	}
	
	this.initialImg.src = this.initialImgSrc;
	// create the overview image
	//this.overviewImg = new Image(); <><><><><>
	this.overviewImg = document.createElement('img');
	this.overviewImg.viewer = this;
	this.overviewImg.style.position = "absolute";
	this.overviewImg.onload = function(){this.viewer.onOverImgLoad();}
	if(this.browserType == "IE"){//in IE since events are transparent we use backgr img for event dispatch
		this.overviewImg.ondrag = function(){this.viewer.onPanBoxOverDrag();}
		this.overviewImg.ondragstart = function(){this.viewer.onPanBoxOverStartDrag();}
	}
	this.overviewImg.src = this.overviewImgSrc;
}

ImageViewer.prototype.createContainerDiv = function()
{
	this.imageViewerDiv = document.createElement("div");
	//document.body.appendChild(this.imageViewerDiv);
	document.getElementById('imageContainer').appendChild(this.imageViewerDiv);
	this.imageViewerDiv.style.position = "absolute";
	this.imageViewerDiv.style.textAlign = "left";
	//this.imageViewerDiv.style.border = "dashed";
	//this.imageViewerDiv.style.borderWidth = "1px";;
	this.imageViewerDiv.style.backgroundColor = "white";
	this.imageViewerDiv.style.left = this.viewerXpos + "px";
	this.imageViewerDiv.style.top = this.viewerYpos + "px";
	this.imageViewerDiv.style.width = this.viewerResolution + "px";
	this.imageViewerDiv.style.height = this.viewerResolution + "px";
	this.imageViewerDiv.style.overflow = "hidden";
}
ImageViewer.prototype.setMagnification = function()
{
	if(this.viewerImgSize == 3000){
		if(this.viewerResolution == 400){
			this.magnListArray= new Array(0,0.2,0.4,0.6,0.8,1);
		}else if(this.viewerResolution == 500){
			this.magnListArray= new Array(0,0.25,0.42,0.61,0.81,1);
		}else if(this.viewerResolution == 600){
			this.magnListArray= new Array(0,0.3,0.44,0.63,0.82,1);
		}else if(this.viewerResolution == 700){
			this.magnListArray= new Array(0,0.35,0.51,0.67,0.84,1);
		}else if(this.viewerResolution == 800){
			this.magnListArray= new Array(0,0.4,0.55,0.7,0.85,1);
		}
	}else if(this.viewerImgSize == 2000){
		if(this.viewerResolution == 400){
			this.magnListArray= new Array(0,0.30,0.44,0.63,0.82,1);
		}else if(this.viewerResolution == 500){
			this.magnListArray= new Array(0,0.35,0.51,0.67,0.84,1);
		}else if(this.viewerResolution == 600){
			this.magnListArray= new Array(0,0.4,0.55,0.7,0.85,1);
		}else if(this.viewerResolution == 700){
			this.magnListArray= new Array(0,0.45,0.58,0.72,0.86,1);
		}else if(this.viewerResolution == 800){
			this.magnListArray= new Array(0,0.50,0.61,0.75,0.88,1);
		}
	}
}
ImageViewer.prototype.onInitImgLoad = function()
{
	
	// create div that holds initial image
	this.initImageDiv = document.createElement("div");
	this.initImageDiv.style.position = "absolute";
	this.initImageDiv.style.zIndex = this.tileNumber + 1;
	//append loaded image to div
	this.initImageDiv.appendChild(this.initialImg);
	//append div to container
	this.imageViewerDiv.appendChild(this.initImageDiv);
	//now its time to start loading tiles
	this.startLoadingTiles();
}
ImageViewer.prototype.onInitImgDrag = function(evt)
{
	//alert("onInitImgDrag evt:"+evt);

	var tileCoordX = 0;
	var tileCoordY = 0;
	var dragOnInitImage;
	var xPosDrag = 0;
	var	yPosDrag = 0;
	var target;
	
	if ((this.browserType == "IE") || (this.browserType == "Opera")){
		xPosDrag = event.offsetX;
		yPosDrag = event.offsetY;
	}else{
		xPosDrag = evt.layerX;
		yPosDrag = evt.layerY;
	}
	// IE uses srcElement, others use target
	if (this.browserType == "IE"){
		target = event.srcElement;
	}else{
		target = evt.target;
	}
    
    //see if these are tiles or init image
	if(target.tileIndex == null){
		dragOnInitImage = true;
	}else{
		dragOnInitImage = false;
		tileCoordX = target.tileCoordinateX;
		tileCoordY = target.tileCoordinateY;
	}

	if(dragOnInitImage){
		//alert("dragging on init image");
		this.dragX = xPosDrag + this.xPosImg;
		this.dragY = yPosDrag + this.yPosImg;
		// update zoom click since we are dragging image
		this.zoomClickX = this.dragX;
		this.zoomClickY = this.dragY;
		// update zoom center positions
		this.zoomCenterPositionX  = Math.round((xPosDrag / this.viewerImageWidth) * 100);
		this.zoomCenterPositionY = Math.round((yPosDrag / this.viewerImageHeight) * 100);
	}else{
		//alert("dragging on tiles");
		var fx = xPosDrag + (tileCoordX * (this.viewerImageWidth / this.viewerImgSize));
        var fy = yPosDrag + (tileCoordY * (this.viewerImageHeight / this.viewerImgSize));
		
		this.dragX = this.xPosImg + fx;
	    this.dragY = this.yPosImg + fy;
		// update zoom click since we are dragging image
		this.zoomClickX = this.dragX;
		this.zoomClickY = this.dragY;
		// update zoom center positions
		this.zoomCenterPositionX  = Math.round((fx / this.viewerImageWidth) * 100);
		this.zoomCenterPositionY = Math.round((fy / this.viewerImageHeight) * 100);
	}
	
	if((this.dragX >= 0) && (this.dragX <= this.viewerResolution)){
		if((this.dragY >= 0) && (this.dragY <= this.viewerResolution)){
			var xAxisDir = (this.dragX - this.dragStartX);
			var yAxisDir = (this.dragY - this.dragStartY);
			/// X Axis control /////////////////////
			if(xAxisDir > 0){//check if we can go right
				if(!((this.xPosImg + xAxisDir) > 0)){
					this.xPosImg = this.xPosImg + xAxisDir;
				}
			}
			if(xAxisDir < 0){//check if we can go right
				if(!((this.xPosImg + this.viewerImageWidth + xAxisDir) <= this.viewerResolution)){
					this.xPosImg = this.xPosImg + xAxisDir;
				}
			}
			/// Y Axis control
			if(yAxisDir > 0){//check if we can go right
				if(!((this.yPosImg + yAxisDir) > 0)){
					this.yPosImg = this.yPosImg + yAxisDir;
				}
			}
			if(yAxisDir < 0){//check if we can go right
				if(!((this.yPosImg + this.viewerImageWidth + yAxisDir) <= this.viewerResolution)){
					this.yPosImg = this.yPosImg + yAxisDir;
				}
			}
			///////////////////////////////////////
			this.initialImg.style.left = this.xPosImg + "px";
			this.initialImg.style.top = this.yPosImg + "px";
			this.dragStartX = this.dragX;
	        this.dragStartY = this.dragY;
	        // resize and move tiles 
			this.resizeAndMoveTiles();
			//move rectangle box
			this.onMovePanBoxRectangle();
			//document.getElementById("txtX").value = this.dragX;
			//document.getElementById("txtY").value = this.dragY;
		}
	}
}
ImageViewer.prototype.onInitImgDragStart = function()
{
	//alert("ondragstart");
	if(event.srcElement.tileIndex == null){
		//alert("start drag on init image");
		this.dragStartX = event.offsetX + this.xPosImg;
		this.dragStartY = event.offsetY + this.yPosImg;
	}else{
		//alert("start drag on tiles");
		this.dragStartX = this.xPosImg + event.offsetX + (event.srcElement.tileCoordinateX * (this.viewerImageWidth / this.viewerImgSize));
	    this.dragStartY = this.yPosImg + event.offsetY + (event.srcElement.tileCoordinateY * (this.viewerImageHeight / this.viewerImgSize));
	}
}
ImageViewer.prototype.onInitImgMouseMove = function(evt)
{
	if(this.isDragging){
		//alert("onInitImgMouseMove");
		this.hasBeenDragged = true;
		this.onInitImgDrag(evt);
	}
}
ImageViewer.prototype.onInitImgMouseDown = function(evt)
{
	
	if((evt.button == 0) || ((evt.button = 1) && (this.browserType == "Safari"))){
   		//alert("onInitImgMouseDown");
		this.isDragging = true;
		// IE uses srcElement, others use target
	    var target = evt.target != null ? evt.target : evt.srcElement;
	    
	    if ((this.browserType == "IE") || (this.browserType == "Opera")){
			this.xPosClick = event.offsetX;
			this.yPosClick = event.offsetY;
		}else{
			this.xPosClick = evt.layerX;
			this.yPosClick = evt.layerY;
		}
	
		if(target.tileIndex == null){
			//alert("mouse down on init image");
			this.dragStartX = this.xPosClick + this.xPosImg;
			this.dragStartY = this.yPosClick + this.yPosImg;
		}else{
			//alert("start drag on tiles");
			this.dragStartX = this.xPosImg + this.xPosClick + (target.tileCoordinateX * (this.viewerImageWidth / this.viewerImgSize));
		    this.dragStartY = this.yPosImg + this.yPosClick + (target.tileCoordinateY * (this.viewerImageHeight / this.viewerImgSize));

		}
	}
	evt.preventDefault();
}
ImageViewer.prototype.onInitImgMouseUp = function()
{
	//alert("onInitImgMouseUp");
	this.isDragging = false;
}
ImageViewer.prototype.onMoveViewerImg = function()
{
	//alert("onMoveVieverImg");
	this.xPosImg = -((this.xPosOverRectImg)/ this.overImageWidth * this.viewerImageWidth);
	this.yPosImg = -((this.yPosOverRectImg)/ this.overImageHeight * this.viewerImageHeight);
	// since 
	//alert("this.xPosImg=" + this.xPosImg);
	//alert("this.yPosImg=" + this.yPosImg);
	
	//this.zoomClickX = this.viewerResolution / 2;
	//this.zoomClickY = this.viewerResolution / 2;
			
	//if current zoom is not base level zoom
	if(this.currentZoomLevel != 1){
		this.initialImg.style.left = this.xPosImg + "px";
		this.initialImg.style.top = this.yPosImg + "px";
		// resize and move tiles 
		this.resizeAndMoveTiles();
	}
}
ImageViewer.prototype.onInitImgClick = function(evt)
{
	//alert("onInitImgClick this.hasBeenDragged:"+this.hasBeenDragged);
	var tileCoordX = 0;
	var tileCoordY = 0;
	var clickOnInitImage;
	var target;
	
	if(!this.hasBeenDragged){// this var ins not changed from init
		
		if ((this.browserType == "IE") || (this.browserType == "Opera")){
			this.xPosClick = event.offsetX;
			this.yPosClick = event.offsetY;
		}else{
			this.xPosClick = evt.layerX;
			this.yPosClick = evt.layerY;
		}
		// IE uses srcElement, others use target
		if (this.browserType == "IE"){
			target = event.srcElement;
		}else{
			target = evt.target;
		}
		
	    //see if these are tiles or init image
		if(target.tileIndex == null){
			clickOnInitImage = true;
		}else{
			clickOnInitImage = false;
			tileCoordX = target.tileCoordinateX;
			tileCoordY = target.tileCoordinateY;
		}
		if(this.currentZoomLevel < 6){	
			//alert("inside first if");
				
			if((this.currentZoomLevel == 1) || (target.tileIndex == null)){
				//alert("zooming on original image");
				this.zoomClickX = this.xPosClick + this.xPosImg;
				this.zoomClickY = this.yPosClick + this.yPosImg;
				// update zoom center positions
				this.zoomCenterPositionX  = Math.round((this.xPosClick / this.viewerImageWidth) * 100);
				this.zoomCenterPositionY = Math.round((this.yPosClick / this.viewerImageHeight) * 100);
			}else{
				//alert("zooming on tiles");
				var fx = this.xPosClick + (tileCoordX * (this.viewerImageWidth / this.viewerImgSize));
		        var fy = this.yPosClick + (tileCoordY * (this.viewerImageHeight / this.viewerImgSize));
		        
		        this.zoomClickX = this.xPosImg + fx;
		        this.zoomClickY = this.yPosImg + fy;
		        //alert(".tileCoordinateX : " + event.srcElement.tileCoordinateX + " || tileCoordinateY : " + event.srcElement.tileCoordinateY + " || tempX : " + tempX + " || tempY : " + tempY);
		        this.zoomCenterPositionX  = Math.round((fx / this.viewerImageWidth) * 100);
				this.zoomCenterPositionY = Math.round((fy / this.viewerImageHeight) * 100);
			}
			
			//////
			//alert("this.zoomClickX:" + this.zoomClickX);
			//alert("this.zoomClickY:" + this.zoomClickY);
			//alert("this.zoomCenterPositionX:" + this.zoomCenterPositionX);
			//alert("this.zoomCenterPositionY:" + this.zoomCenterPositionY);
			//////
			this.zoomAction = "clickZoom";
			
			this.currentZoomLevel++;
			this.setZoom(this.currentZoomLevel);
		}
	}
	this.hasBeenDragged = false;
	//this.isDragging = false;
}
ImageViewer.prototype.setZoomToolControl = function(control)
{
    // set class for zoom control
	this.zoomClass = control;
}
ImageViewer.prototype.setZoom = function(zoomLev)
{
	if(this.zoomAction != "clickZoom"){
		if(this.currentZoomLevel <= zoomLev){
			//alert("setZoom ZOOMING IN  zoomLev=" + zoomLev + " this.currentZoomLevel="+this.currentZoomLevel);
			this.zoomAction = "zoomIn";
		}else{
			//alert("setZoom ZOOMING OUT  zoomLev=" + zoomLev + " this.currentZoomLevel="+this.currentZoomLevel);
			this.zoomAction = "zoomOut";
		}
	}

	if(zoomLev == 1){
	   this.viewerImageWidth = this.viewerResolution;
	   this.viewerImageHeight = this.viewerResolution;
	}else{
	  // this.viewerImageWidth = this.viewerResolution;
	  // this.viewerImageHeight = this.viewerResolution;
	   this.viewerImageWidth = this.viewerImgSize * this.magnListArray[zoomLev-1];
	   this.viewerImageHeight = this.viewerImgSize * this.magnListArray[zoomLev-1];
	}
	this.currentZoomLevel = zoomLev;//reset the zoom level to pressed value
	this.zoomImage();
	//set scroll movement
	this.scrollViewerMovemenet = this.viewerImageWidth / this.scrollViewerRatio;
}
ImageViewer.prototype.zoomIn = function()
{
	if(this.currentZoomLevel < 6){
		this.zoomAction = "zoomIn";
		this.currentZoomLevel++;
		this.setZoom(this.currentZoomLevel);
	}
}
ImageViewer.prototype.zoomOut = function()
{
	if(this.currentZoomLevel > 1){
		this.zoomAction = "zoomOut";
		this.currentZoomLevel--;
		this.setZoom(this.currentZoomLevel);
	}
}
ImageViewer.prototype.zoomImage = function()
{
	//zooms image
	//alert("zoomImage   this.zoomAction:" + this.zoomAction);
	
	if(this.zoomAction == "clickZoom"){
		//alert("clickZoom");
		this.xPosImg = this.zoomClickX - (this.zoomCenterPositionX/100) * this.viewerImageWidth;
		this.yPosImg = this.zoomClickY - (this.zoomCenterPositionY/100) * this.viewerImageHeight;
		this.moveTilesOverInitImg();
	}else if(this.zoomAction == "zoomIn"){
    	//alert("zoomIn");
		if((this.zoomClickX == -1) && (this.zoomClickX == -1)){
			//alert("first time zoom in");
			this.zoomClickX = this.viewerResolution / 2;
			this.zoomClickY = this.viewerResolution / 2;
			// move tiles over te original image
			this.moveTilesOverInitImg();
		}
		this.xPosImg = this.zoomClickX - (this.zoomCenterPositionX/100) * this.viewerImageWidth;
		this.yPosImg = this.zoomClickY - (this.zoomCenterPositionY/100) * this.viewerImageHeight;
	}else if(this.zoomAction == "zoomOut"){
		if(this.currentZoomLevel != 1){
			//alert("zoomOut");
			this.zoomClickX = this.zoomClickX + ((this.viewerResolution / 2) - this.zoomClickX) * (1-this.magnListArray[this.currentZoomLevel-1]);
			this.zoomClickY = this.zoomClickY + ((this.viewerResolution / 2) - this.zoomClickY) * (1-this.magnListArray[this.currentZoomLevel-1]);
			//alert("this.zoomClickX:" + this.zoomClickX);
			//alert("this.zoomClickY:" + this.zoomClickY);
			var imgRatio = this.viewerResolution / this.viewerImageWidth;
			//alert("imgRatio:" + imgRatio);
			this.zoomCenterPositionX = this.zoomCenterPositionX + (50 - this.zoomCenterPositionX) * (1-this.magnListArray[this.currentZoomLevel-1]) * imgRatio;
			this.zoomCenterPositionY = this.zoomCenterPositionY + (50 - this.zoomCenterPositionY) * (1-this.magnListArray[this.currentZoomLevel-1]) * imgRatio;
			//alert("this.zoomCenterPositionX:" + this.zoomCenterPositionX);
			//alert("this.zoomCenterPositionY:" + this.zoomCenterPositionY);
			this.xPosImg = this.zoomClickX - (this.zoomCenterPositionX/100) * this.viewerImageWidth;
			this.yPosImg = this.zoomClickY - (this.zoomCenterPositionY/100) * this.viewerImageHeight;
			var difference = this.initialImg.width - this.viewerImageWidth;
		}else{
			//alert("zoomOut else show original");
			this.xPosImg = 0;
			this.yPosImg = 0;
			this.zoomCenterPositionX = 50;
			this.zoomCenterPositionY = 50;
			this.zoomClickX = -1;
			this.zoomClickY = -1;
			this.initialImg.style.left = this.xPosImg;
	        this.initialImg.style.top = this.yPosImg;
			//show original image;
			this.moveTilesUnderInitImg();
		}
    	
	}
	//adjusts the size of the original image in case tiles did not load
	this.initialImg.style.width = this.viewerImageWidth + "px";
	this.initialImg.style.height = this.viewerImageHeight + "px";
	//
	this.initialImg.style.left = this.xPosImg + "px";
	this.initialImg.style.top = this.yPosImg + "px";
	//////////////////////////////////////
	//alert("var xPosImg:" + this.xPosImg);
	//alert("var yPosImg:" + this.yPosImg);
	// resize and move tiles 
	this.resizeAndMoveTiles();
	//resize window pan comp
	this.panBoxRectangleResize();
	//set correct level on zoom tool
	this.zoomClass.onLevelSet(this.currentZoomLevel);
	//reset zoom action
    this.zoomAction = "";
}
ImageViewer.prototype.scrollUp = function()
{
	///////////////////////////////////////
	//alert("this.scrollViewerMovemenet:" + this.scrollViewerMovemenet + " this.yPosImg:" + this.yPosImg);
	if((this.yPosImg + this.scrollViewerMovemenet) < 0){
		//calculate new y coord
		this.yPosImg = this.yPosImg + this.scrollViewerMovemenet;
		//move image
		this.initialImg.style.top = this.yPosImg + "px";
	}else{//last nudge to border
		this.yPosImg = 0;
		//move image
		this.initialImg.style.top = this.yPosImg + "px";
	}
	//move rectangle box
	this.onMovePanBoxRectangle();
	// resize and move tiles 
	this.resizeAndMoveTiles();
}
ImageViewer.prototype.scrollDown = function()
{
	///////////////////////////////////////
	//alert("this.yPosImg + this.viewerImageHeight:" + tr + " this.scrollViewerMovemenet:" + this.scrollViewerMovemenet);
	if((this.yPosImg + this.viewerImageHeight - this.scrollViewerMovemenet) > this.viewerResolution){
		//calculate new y coord
		this.yPosImg = this.yPosImg - this.scrollViewerMovemenet;
		//move image
		this.initialImg.style.top = this.yPosImg + "px";
	}else{//last nudge to border
		this.yPosImg = this.viewerResolution - this.viewerImageHeight;
		//move image
		this.initialImg.style.top = this.yPosImg + "px";
	}
	//move rectangle box
	this.onMovePanBoxRectangle();
	// resize and move tiles 
	this.resizeAndMoveTiles();
}
ImageViewer.prototype.scrollLeft = function()
{
	///////////////////////////////////////
	//alert("this.scrollViewerMovemenet:" + this.scrollViewerMovemenet + " this.xPosImg:" + this.xPosImg);
	if((this.xPosImg + this.scrollViewerMovemenet) < 0){
		//calculate new y coord
		this.xPosImg = this.xPosImg + this.scrollViewerMovemenet;
		//move image
		this.initialImg.style.left = this.xPosImg + "px";
	}else{//last nudge to border
		this.xPosImg = 0;
		//move image
		this.initialImg.style.left = this.xPosImg + "px";
	}
	//move rectangle box
	this.onMovePanBoxRectangle();
	// resize and move tiles 
	this.resizeAndMoveTiles();
}
ImageViewer.prototype.scrollRight = function()
{
	///////////////////////////////////////
	//alert("this.xPosImg + this.viewerImageWidth:" + tr + " this.scrollViewerMovemenet:" + this.scrollViewerMovemenet);
	if((this.xPosImg + this.viewerImageWidth - this.scrollViewerMovemenet) > this.viewerResolution){
		//calculate new y coord
		this.xPosImg = this.xPosImg - this.scrollViewerMovemenet;
		//move image
		this.initialImg.style.left = this.xPosImg + "px";
	}else{//last nudge to border
		this.xPosImg = this.viewerResolution - this.viewerImageWidth;
		//move image
		this.initialImg.style.left = this.xPosImg + "px";
	}
	//move rectangle box
	this.onMovePanBoxRectangle();
	// resize and move tiles 
	this.resizeAndMoveTiles();
}
////////////////////// TILES /////////////////////////////
ImageViewer.prototype.setTileNames = function(){
	if(this.viewerImgSize == 3000){
		this.tileNamesArray[0] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_1000_1000_1000_1000.jpg";
        this.tileNamesArray[1] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_0_0_1000_1000.jpg";
        this.tileNamesArray[2] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_1000_0_1000_1000.jpg";  
        this.tileNamesArray[3] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_2000_0_1000_1000.jpg";  
        this.tileNamesArray[4] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_2000_1000_1000_1000.jpg";  
        this.tileNamesArray[5] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_2000_2000_1000_1000.jpg";  
        this.tileNamesArray[6] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_1000_2000_1000_1000.jpg";  
        this.tileNamesArray[7] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_0_2000_1000_1000.jpg";  
        this.tileNamesArray[8] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_0_1000_1000_1000.jpg";
	}else if(this.viewerImgSize == 2000){
		this.tileNamesArray[0] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_666_666_666_666.jpg";
        this.tileNamesArray[1] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_0_0_666_666.jpg";
        this.tileNamesArray[2] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_666_0_666_666.jpg";  
        this.tileNamesArray[3] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_1332_0_666_666.jpg";  
        this.tileNamesArray[4] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_1332_666_666_666.jpg";  
        this.tileNamesArray[5] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_1332_1332_666_666.jpg";  
        this.tileNamesArray[6] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_666_1332_666_666.jpg";  
        this.tileNamesArray[7] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_0_1332_666_666.jpg";  
        this.tileNamesArray[8] = this.mediaPath + this.elementId + "_viewer_" + this.viewerImgSize + "x" + this.viewerImgSize + "_0_666_666_666.jpg";
		
	}
}
ImageViewer.prototype.startLoadingTiles = function(){
	//alert("startLoadingTiles");
	for(var i = 0; i < this.tileNumber; i++){
		//this["tileImg"+i] = new Image(); <><><><><><>
		this["tileImg"+i] = document.createElement('img');
		this["tileImg"+i].viewer = this;
		this["tileImg"+i].tileIndex = i;
		this["tileImg"+i].onload = function(){this.viewer.onTileImgLoaded(this.tileIndex);}
		if(this.browserType == "IE"){
			//alert("IE");
			this["tileImg"+i].onclick = function(){this.viewer.onInitImgClick();}
			this["tileImg"+i].ondrag = function(){this.viewer.onInitImgDrag();}
			this["tileImg"+i].ondragstart = function(){this.viewer.onInitImgDragStart();}
		}else{
			//alert("Other");
			this["tileImg"+i].onclick = function(event){this.viewer.onInitImgClick(event)};
			this["tileImg"+i].onmousedown  = function(event){this.viewer.onInitImgMouseDown(event);}
			this["tileImg"+i].onmouseup  = function(){this.viewer.onInitImgMouseUp();}
			this["tileImg"+i].onmouseout  = function(){this.viewer.onInitImgMouseUp();}
			this["tileImg"+i].onmousemove  = function(event){this.viewer.onInitImgMouseMove(event);}
		}
		this["tileImg"+i].src = this.tileNamesArray[i];
	}
}
ImageViewer.prototype.onTileImgLoaded = function(i)
{
	//alert("onTileImgLoaded  i=" + i);
	this["tileImg"+i].loadedTile = true;
	this["tileImg"+i].style.width = (this.viewerImageWidth / Math.sqrt(this.tileNumber)) + "px";
	this["tileImg"+i].style.height = (this.viewerImageHeight / Math.sqrt(this.tileNumber)) + "px";
	/// create tile div
	this["tileDiv"+i] = document.createElement("div");
	//append it to container
	this.imageViewerDiv.appendChild(this["tileDiv"+i]);
	//document.body.appendChild(this["tileDiv"+i]);
	this["tileDiv"+i].style.position = "absolute";
	this["tileDiv"+i].style.backgroundColor = "white";
	this["tileDiv"+i].tileIsOnSurface = false;
	//if we are 0 zoom level hide preloaded tiles under the init image
	if(this.currentZoomLevel == 1){
		//alert("not zoomed in");
		this["tileDiv"+i].style.zIndex = this.tileNumber;
		this["tileDiv"+i].tileIsOnSurface = false;//loaded in the back of the original image
	}else{
		//alert("zoomed");
		this["tileDiv"+i].style.zIndex = (this.tileNumber + 1) + i;
		this["tileDiv"+i].tileIsOnSurface = true;//loaded on top of the original image
	}
	///
	this.getCoordinatesFromTileName(i);
	/// position
	this["tileDiv"+i].style.left = (this.xPosImg + (this["tileImg"+i].tileCoordinateX * (this.viewerImageWidth / this.viewerImgSize))) + "px";
	this["tileDiv"+i].style.top = (this.yPosImg + (this["tileImg"+i].tileCoordinateY * (this.viewerImageHeight / this.viewerImgSize))) + "px";
	//alert("this.xPosImg: " + this.xPosImg + " <> this.yPosImg: " + this.xPosImg +  " <> viewerImgWidth: " + this.viewerImageWidth + " <> tileCoordinateX: " + this.tileCoordinateX + " <> tileCoordinateY:" + this.tileCoordinateY + " <> x: " + this["tileDiv"+i].style.left + " <> y: " + this["tileDiv"+i].style.top);
	// height and width
	this["tileDiv"+i].style.width = (this.viewerImageWidth / Math.sqrt(this.tileNumber)) + "px";
	this["tileDiv"+i].style.height = (this.viewerImageHeight / Math.sqrt(this.tileNumber)) + "px";
	// append loaded image to tile div
	this["tileDiv"+i].appendChild(this["tileImg"+i]);
	
}
ImageViewer.prototype.getCoordinatesFromTileName = function(i)
{
	//alert("src:" + this["tileImg"+i].src);
	var srcString = this["tileImg"+i].src;
	var tempStr = srcString.substring(0,srcString.lastIndexOf("_"));
	tempStr = tempStr.substring(0,tempStr.lastIndexOf("_"));
	
	this["tileImg"+i].tileCoordinateY = tempStr.substring(tempStr.lastIndexOf("_")+1,tempStr.length);
	//alert("srcTile.tileCoordinateY:" + this["tileImg"+i].tileCoordinateY);
	tempStr = tempStr.substring(0,tempStr.lastIndexOf("_"));
	this["tileImg"+i].tileCoordinateX = tempStr.substring(tempStr.lastIndexOf("_")+1,tempStr.length);
	//alert("srcTile.tileCoordinateX:" + this["tileImg"+i].tileCoordinateX);
	
}
ImageViewer.prototype.resizeAndMoveTiles = function()
{
	//alert("move and resize tiles");
	for(var i = 0; i < this.tileNumber; i++){
		if((this["tileImg"+i] != null) && (this["tileImg"+i].loadedTile)){ // if image is created and 
			//size
			this["tileImg"+i].style.width = (this.viewerImageWidth / Math.sqrt(this.tileNumber)) + "px";
			this["tileImg"+i].style.height = (this.viewerImageHeight / Math.sqrt(this.tileNumber)) + "px";
			/// position
			this["tileDiv"+i].style.left = (this.xPosImg + (this["tileImg"+i].tileCoordinateX * (this.viewerImageWidth / this.viewerImgSize))) + "px";
			this["tileDiv"+i].style.top = (this.yPosImg + (this["tileImg"+i].tileCoordinateY * (this.viewerImageHeight / this.viewerImgSize))) + "px";
			//alert("this.xPosImg: " + this.xPosImg + " <> this.yPosImg: " + this.xPosImg +  " <> viewerImgWidth: " + this.viewerImageWidth + " <> tileCoordinateX: " + this.tileCoordinateX + " <> tileCoordinateY:" + this.tileCoordinateY + " <> x: " + this["tileDiv"+i].style.left + " <> y: " + this["tileDiv"+i].style.top);
			// height and width
			this["tileDiv"+i].style.width = (this.viewerImageWidth / Math.sqrt(this.tileNumber)) + "px";
			this["tileDiv"+i].style.height = (this.viewerImageHeight / Math.sqrt(this.tileNumber)) + "px";	
		}
	}
}
ImageViewer.prototype.moveTilesOverInitImg = function()
{	
	//alert("moveTilesOverInitImg");
	// when we move tiles under original then we don't care if they are loaded or not
	for(var i = 0; i < this.tileNumber; i++){
		if(this["tileImg"+i] != null){ // if image is created and 
			if((this["tileImg"+i].loadedTile) && (!this["tileDiv"+i].tileIsOnSurface)){ // if its loaded
				//alert("is loaded and not on surface");
				// bring tile to surface
				this["tileDiv"+i].style.zIndex = (this.tileNumber + 1) + i;
				this["tileDiv"+i].tileIsOnSurface = true;
			}
		}
	}
}
ImageViewer.prototype.moveTilesUnderInitImg = function()
{	
	//alert("moveTilesUnderInitImg");
	// move tiles under original image
	for(var i = 0; i < this.tileNumber; i++){
		if(this["tileImg"+i] != null){ // if image is created and 
			this["tileDiv"+i].style.zIndex = this.tileNumber;
			// mark images as not on surface
			this["tileDiv"+i].tileIsOnSurface = false;
		}
	}
	
}
/////////////////////  OVERVIEW IMG METHODS //////////////
ImageViewer.prototype.onOverImgLoad = function()
{
	this.imageViewerOverDiv = document.createElement("div");
	//document.body.appendChild(this.imageViewerOverDiv);
	document.getElementById('miniView2d').appendChild(this.imageViewerOverDiv);
	this.imageViewerOverDiv.style.position = "absolute";
	this.imageViewerOverDiv.style.backgroundColor = "white";
	this.imageViewerOverDiv.style.right = 0 + "px";
	this.imageViewerOverDiv.style.top = 0 + "px";
	//set div dimensions
	this.imageViewerOverDiv.style.width = this.overImageWidth + "px";
	this.imageViewerOverDiv.style.height = this.overImageHeight + "px";
	// Adjust Image
	this.overviewImg.style.width = this.overImageWidth + "px";
	this.overviewImg.style.height = this.overImageHeight + "px";
	this.overviewImg.style.left = 0 + 'px';
	this.overviewImg.style.top = 0 + 'px';
	this.overviewImg.style.zIndex = 1;
	// set div dimensions
	this.imageViewerOverDiv.style.overflow = "hidden";
	this.imageViewerOverDiv.appendChild(this.overviewImg);
	// create
	this.panBoxOverDiv = document.createElement("div");
	this.imageViewerOverDiv.appendChild(this.panBoxOverDiv);
	this.panBoxOverDiv.style.position = "absolute";
	this.panBoxOverDiv.style.top = 0 + "px";
	this.panBoxOverDiv.style.left = 0 + "px";
	this.panBoxOverDiv.style.border = "solid";
	this.panBoxOverDiv.style.borderColor = "red";
	this.panBoxOverDiv.style.borderWidth = "1px";
	this.panBoxOverDiv.style.zIndex = 2;
	if(this.browserType != "IE"){ // other browser do not have event transparency so we use div fo events dispatch
		this.panBoxOverDiv.viewer = this;
		this.panBoxOverDiv.onmousedown  = function(event){this.viewer.onPanBoxOverMouseDown(event);}
		this.panBoxOverDiv.onmouseup  = function(){this.viewer.onPanBoxOverMouseUp();}
		this.panBoxOverDiv.onmouseout = function(){this.viewer.onPanBoxOverMouseUp();}
		this.panBoxOverDiv.onmousemove  = function(event){this.viewer.onPanBoxOverMouseMove(event);}	
	}
	this.panBoxOverDiv.style.width = (this.overImageWidth-2) + "px";
	this.panBoxOverDiv.style.height = (this.overImageHeight-2) + "px";
}
ImageViewer.prototype.panBoxRectangleResize = function(){
	
	if(this.panBoxOverDiv != null)
	{
		this.xPosOverRectImg = Math.abs(this.xPosImg / this.viewerImageWidth) * this.overImageWidth;
		this.yPosOverRectImg = Math.abs(this.yPosImg / this.viewerImageHeight)  * this.overImageHeight;
		//
		this.panBoxOverDiv.style.left = this.xPosOverRectImg + "px";
		this.panBoxOverDiv.style.top = this.yPosOverRectImg + "px";
		//
		this.overBoxWidth = Math.floor((this.overImageWidth) * (this.viewerResolution / this.viewerImageWidth));
		this.overBoxHeight = Math.floor((this.overImageHeight) * (this.viewerResolution / this.viewerImageHeight));
		
		this.panBoxOverDiv.style.width = this.overBoxWidth + "px";
		this.panBoxOverDiv.style.height = this.overBoxHeight + "px";
	}
}
ImageViewer.prototype.onPanBoxOverDrag = function(evt)
{
	//alert("onPanBoxOverDrag");
	
	if (this.browserType == "IE"){
		this.dragOverRectX = event.offsetX;
		this.dragOverRectY = event.offsetY;
	}else if(this.browserType == "Opera"){
		this.dragOverRectX = evt.offsetX + this.xPosOverRectImg;
		this.dragOverRectY = evt.offsetY + this.yPosOverRectImg;
	}else{
		this.dragOverRectX = evt.layerX + this.xPosOverRectImg;
		this.dragOverRectY = evt.layerY + this.yPosOverRectImg;
	}
	//alert("this.dragOverRectX:"+ this.dragOverRectX);
	//alert("this.dragOverRectY:"+ this.dragOverRectY);
	//alert("this.dragOverRectX:" + this.dragOverRectX + "  this.xPosOverRectImg:" + this.xPosOverRectImg);
	if((this.dragOverRectX > this.xPosOverRectImg) && (this.dragOverRectX < (this.xPosOverRectImg + this.overBoxWidth))){
		if((this.dragOverRectY > this.yPosOverRectImg) && (this.dragOverRectY < (this.yPosOverRectImg + this.overBoxHeight))){
			//alert("this.dragOverRectX:" + this.dragOverRectX + "  this.dragStartOverRectX:" + this.dragStartOverRectX);
	
			var xAxisDir = (this.dragOverRectX - this.dragStartOverRectX);
			var yAxisDir = (this.dragOverRectY - this.dragStartOverRectY);
			//alert("xAxisDir:" + xAxisDir + "  yAxisDir:" + yAxisDir);
	
			/// X Axis control /////////////////////
			if(xAxisDir > 0){//check if we can go right
				if((this.xPosOverRectImg + this.overBoxWidth + xAxisDir) < this.overImageWidth-1){
					//alert("going right-" + " xAxisDir:" + xAxisDir+  " <> this.dragOverRectX:" + this.dragOverRectX + " - this.dragStartOverRectX:" + this.dragStartOverRectX);
					this.xPosOverRectImg = this.xPosOverRectImg + xAxisDir;
				}
			}
			if(xAxisDir <= 0){//check if we can go left
				if((this.xPosOverRectImg + xAxisDir) > 0 ){
					//alert("going left-" + " xAxisDir:" + xAxisDir+  " <> this.dragOverRectX:" + this.dragOverRectX + " - this.dragStartOverRectX:" + this.dragStartOverRectX);
					this.xPosOverRectImg = this.xPosOverRectImg + xAxisDir;
				}
			}
			/// Y Axis control
			if(yAxisDir > 0){//check if we can go down
				if((this.yPosOverRectImg + this.overBoxHeight + yAxisDir) < this.overImageHeight-1){
					//alert("going down-" + " yAxisDir:" + yAxisDir+  " <> this.dragOverRectY:" + this.dragOverRectY + " - this.dragStartOverRectY:" + this.dragStartOverRectY);
					this.yPosOverRectImg = this.yPosOverRectImg + yAxisDir;
				}
			}
			if(yAxisDir <= 0){//check if we can go up
				if((this.yPosOverRectImg + yAxisDir) > 0 ){
					//alert("going up-" + " yAxisDir:" + yAxisDir+  " <> this.dragOverRectY:" + this.dragOverRectY + " - this.dragStartOverRectY:" + this.dragStartOverRectY);
					this.yPosOverRectImg = this.yPosOverRectImg + yAxisDir;
				}
			}
			///////////////////////////////////////
					
			this.panBoxOverDiv.style.left = this.xPosOverRectImg + "px";
			this.panBoxOverDiv.style.top = this.yPosOverRectImg + "px";
	        //
	        this.dragStartOverRectX = this.dragOverRectX;
			this.dragStartOverRectY = this.dragOverRectY;
			//alert("this.dragOverRectX:" + this.dragOverRectX + "  this.dragStartOverRectX:" + this.dragStartOverRectX);
	
			// center the zoom
			this.zoomClickX = ((this.xPosOverRectImg + (this.overBoxWidth / 2)) / this.overImageWidth) * this.viewerResolution;
			this.zoomClickY = ((this.yPosOverRectImg + (this.overBoxHeight / 2)) / this.overImageHeight) * this.viewerResolution;
			// update zoom center positions
			this.zoomCenterPositionX = ((this.xPosOverRectImg + (this.overBoxWidth / 2)) / this.overImageWidth) * 100;
			this.zoomCenterPositionY = ((this.yPosOverRectImg + (this.overBoxHeight / 2)) / this.overImageHeight) * 100;
			
			//move main viewer
			this.onMoveViewerImg();
			
		}
	}	
}
ImageViewer.prototype.onPanBoxOverStartDrag = function(evt)
{
	var tempStartDragX = event.offsetX;
	var tempStartDragY = event.offsetY;
	
	if((tempStartDragX > this.xPosOverRectImg) && (tempStartDragX < (this.xPosOverRectImg + this.overBoxWidth))){
		if((tempStartDragY > this.yPosOverRectImg) && (tempStartDragY < (this.yPosOverRectImg + this.overBoxHeight))){
			//alert("inside");
			this.dragStartOverRectX = tempStartDragX;
			this.dragStartOverRectY = tempStartDragY;
		}
	}
}
ImageViewer.prototype.onPanBoxOverMouseMove = function(evt)
{
	if(this.isDraggingOverBox){
		//alert("onPanBoxOverMouseMove");
		this.onPanBoxOverDrag(evt);
	}
}
ImageViewer.prototype.onPanBoxOverMouseDown = function(evt)
{
	//alert("onPanBoxOverMouseDown evt.button="+evt.button);
   	if((evt.button == 0) || ((evt.button = 1) && (this.browserType == "Safari"))){
   		this.isDraggingOverBox = true;
		if ((this.browserType == "IE") || (this.browserType == "Opera")){
			this.dragStartOverRectX = event.offsetX + this.xPosOverRectImg;
			this.dragStartOverRectY = event.offsetY + this.yPosOverRectImg;
		}else{
			this.dragStartOverRectX = evt.layerX + this.xPosOverRectImg;
			this.dragStartOverRectY = evt.layerY + this.yPosOverRectImg;
		}
	}
	//alert("this.dragStartOverRectX:"+ this.dragStartOverRectX);
	//alert("this.dragStartOverRectY:"+ this.dragStartOverRectY);
	
	evt.preventDefault();
}
ImageViewer.prototype.onPanBoxOverMouseUp = function()
{
	//alert("onPanBoxOverMouseUp");
	this.isDraggingOverBox = false;
}
ImageViewer.prototype.onMovePanBoxRectangle = function()
{
	//alert("onMovePanBoxRectangle");
	this.xPosOverRectImg = Math.abs(this.xPosImg / this.viewerImageWidth) * this.overImageWidth;
	this.yPosOverRectImg = Math.abs(this.yPosImg / this.viewerImageHeight) * this.overImageHeight;
	
	this.panBoxOverDiv.style.left = this.xPosOverRectImg + "px";
	this.panBoxOverDiv.style.top = this.yPosOverRectImg + "px";
}