DynAPI.setLibraryPath('dynapi/src/lib');
DynAPI.include('dynapi.api.*');
DynAPI.include('dynapi.event.*');
DynAPI.include('dynapi.gui.dynimage.js');
DynAPI.returnErrors = false;

// global of dlxzoom instance
var zoomObject = null;
var fullZoomImage = null;
var animationEnabled = false;
 
// check to see if mac explorer
function isMacInternetExplorer() 
{
	if(is.platform=="mac" && (is.ie5 || is.ie4)) 
		return true;
	else 
		return false;
};

function getBrowser()
{
	var detect = navigator.userAgent.toLowerCase();
	var OS,browser,version,total,thestring;

	if (checkIt('konqueror'))
	{
		browser = "Konqueror";
		OS = "Linux";
	}
	else if (checkIt('safari')) browser = "Safari"
	else if (checkIt('omniweb')) browser = "OmniWeb"
	else if (checkIt('opera')) browser = "Opera"
	else if (checkIt('webtv')) browser = "WebTV";
	else if (checkIt('icab')) browser = "iCab"
	else if (checkIt('msie')) browser = "Internet Explorer"
	else if (!checkIt('compatible'))
	{
		browser = "Netscape Navigator"
		version = detect.charAt(8);
	}
	else browser = "An unknown browser";

	return browser;
	
}

function checkIt(string)
{
	var detect = navigator.userAgent.toLowerCase();
	place = detect.indexOf(string) + 1;
	thestring = string;
	return place;
}

		
// EQ Zoom Class
function DLXZoom(zoomImage, zoomWidth, zoomHeight, zoomWindowWidth, zoomWindowHeight, maxZoomLevels, zoomPerLevel, zoomBackground)
{
	// initialize the member variables for this instance
	this.zoomImage = zoomImage;
	this.zoomWidth = zoomWidth;
	this.zoomHeight = zoomHeight;
	this.zoomWindowWidth = zoomWindowWidth;
	this.zoomWindowHeight = zoomWindowHeight;
	this.zoomLevels = maxZoomLevels;
	this.zoomPerLevel = zoomPerLevel;
	this.zoomBackground = zoomBackground;
	this.MaxAnimationFrames = 8;
	this.currentFrame = 0;
	this.animationTimer = 0;
	this.intervalBetweenFrames = 5;
	this.maxMRWait = 10000;
	this.disableNavWindow = false;
	
	if (isMacInternetExplorer())
	{
		DynAPI.returnErrors = false;
		DynAPI.errorHandling = false;
	}
	
	browser = getBrowser();

	// this is the base MRL to the zoom script
	this.zoomImagePreviewMRL = zoomImage + "?";
	
	// contains current preview window zoom level and position
	this.currentPreviewPosition = new Object;
	this.currentPreviewPosition.x = 0;
	this.currentPreviewPosition.y = 0;
	this.currentPreviewPosition.zoomLevel = 0;

	// contains current new position to animate to
	this.newPosition = new Object;
	this.newPosition.x = 0;
	this.newPosition.y = 0;
	this.newPosition.zoomLevel = 0;
	
	// contains amount to animate between frames
	this.changePosition = new Object;
	this.changePosition.x = 0;
	this.changePosition.y = 0;
	this.changePosition.zoomLevel = 0;
	DragEvent.dragPlay = 1;
	
	// create containerView
	this.containerView = new DynLayer(null, 0, 0, zoomWindowWidth, zoomWindowHeight, 'transparent');
	
	// create mainView
	this.mainView = new DynLayer(null, 0, 0, zoomWidth, zoomHeight, zoomBackground);
	this.containerView.addChild(this.mainView);
	
	// navigation elements size information
	buttonSpacing = 1;
	buttonSize = 30;
	buttonWidth = 83;
	navSpacing = 7;
	this.thumbNailRatio = zoomWidth / (zoomWindowWidth - zoomWidth - navSpacing - 2);
	navWidth = Math.floor(this.zoomWidth/this.thumbNailRatio);
	navHeight = Math.floor(this.zoomHeight/this.thumbNailRatio);
	navX = zoomWidth + navSpacing;
	navY = zoomWindowHeight - buttonSize - navHeight;

	// create hourglass
	hourGlass = new DynImage.getImage('hourglass.gif');
	this.hourglass = new DynImage(hourGlass);
	this.hourglass.moveTo(zoomWidth - 27, 5);
	this.hourglass.setWidth(25);
	this.hourglass.setHeight(31);
	this.hourglass.setZIndex(55);
	this.containerView.addChild(this.hourglass);
	this.hourglass.setVisible(false);
	
	// create button layer
	this.buttonLayer = new DynLayer();
	this.containerView.addChild(this.buttonLayer);
	this.buttonLayer.setWidth(navWidth + 2);
	this.buttonLayer.setHeight(buttonSize);
	this.buttonLayer.setBgColor('#999999');
	this.buttonLayer.moveTo(navX, zoomWindowHeight - buttonSize);
	this.buttonLayer.setZIndex(50);	
	
	// create border for button layer
	this.leftBLine = new DynLayer( null,0,0,1,buttonSize,'#000000');
	this.rightBLine = new DynLayer( null,navWidth + 1,0,1, buttonSize,'#000000');
	this.bottomBLine = new DynLayer( null,0,buttonSize - 1,navWidth + 1,1, '#000000');
	this.buttonLayer.addChild( this.leftBLine );
	this.buttonLayer.addChild( this.rightBLine );
	this.buttonLayer.addChild( this.bottomBLine );
	this.leftBLine.setZIndex(40); 
	this.rightBLine.setZIndex(40); 
	this.bottomBLine.setZIndex(40);

	
	// create zoom in button
	zoomInButton = new DynImage.getImage('zoomin.gif');
	this.zoomInButton = new DynImage(zoomInButton);
	this.buttonLayer.addChild(this.zoomInButton);

	yLocation = 0;
	xLocation = (navWidth - buttonWidth) / 2 + 1;
	this.zoomInButton.moveTo(xLocation,yLocation);
	this.zoomInButton.setZIndex(50);
	xLocation += buttonSize - 1;
	
	// create zoom out button
	zoomOutButton = new DynImage.getImage('zoomout.gif');
	this.zoomOutButton = new DynImage(zoomOutButton);
	this.zoomOutButton.moveTo(xLocation, yLocation);
	this.zoomOutButton.setZIndex(50);
	this.buttonLayer.addChild(this.zoomOutButton);
	xLocation += buttonSize - 5;

	//create zoom reset button
	resetButton = new DynImage.getImage('reset.gif');
	this.resetButton = new DynImage(resetButton);
	this.resetButton.moveTo(xLocation,yLocation);
	this.resetButton.setZIndex(50);
	this.buttonLayer.addChild(this.resetButton);
		
	// create preview zoom layer
	fullZoomMRL = this.createZoomMRL(this.zoomImage, this.zoomWidth, this.zoomHeight, 0, 0, 0);
	fullZoomImage = new DynImage.getImage(fullZoomMRL);
	this.previewZoom = new DynImage(fullZoomImage);

	// create zoom navigation window
	this.navigationView = new navigationView(navWidth, navHeight, 'black', 'red', this, fullZoomImage);
	this.navigationView.mainLayer.moveTo(navX, navY)
	this.navigationView.mainLayer.setZIndex(50);
	this.containerView.addChild(this.navigationView.mainLayer);	

	// create true zoom layer
	this.trueZoom = null;
	
	this.mainView.addChild(this.previewZoom);

	// add zoom to main window
	DynAPI.document.addInflowChild(this.containerView);

	// enable dragging
	DragEvent.enableDragEvents(this.previewZoom);
	DragEvent.setDragBoundary(this.previewZoom, 0,this.zoomWidth,this.zoomHeight,0);
	DragEvent.enableDragEvents(this.navigationView.dragView);
	DragEvent.setDragBoundary(this.navigationView.dragView,0,navWidth,navHeight,0);
		
	// dynamic image used for MediaRich Zoom Image and true zoom layer
	this.mrZoomImage = null;

	// set visibility of zoom layers
	this.previewZoom.setVisible(true);
	
	// set up global in case we need it
	zoomObject = this;
	
	// event listener to handle mouse clicks for previewView
	previewZoomListener = new EventListener(this);
	
	// event listner for clicking on preview window
	previewZoomListener.onclick = function(e) {
		// get dlxoom Object
		target = e.getTarget();
		
		// do not handle if updating main window
		if (target.disableNavWindow)
			return;
				
		// create new Position object
		newPosition = new Object();
		
		// translate click to absolute coordintates
		newPosition.x = e.x / target.calculateZoomLevel(target.currentPreviewPosition.zoomLevel);
		newPosition.y = e.y / target.calculateZoomLevel(target.currentPreviewPosition.zoomLevel);

		//alert('e x,y new x,y ' + e.x + ',' + e.y + ' ' + newPosition.x + ',' + newPosition.y);
		
		// calculate new Zoom
		newPosition.zoomLevel = target.currentPreviewPosition.zoomLevel + 1;
						
		// offset for new zoom  level
		newPosition.x -= target.zoomWidth/ (2 * target.calculateZoomLevel(newPosition.zoomLevel));
		newPosition.y -= target.zoomHeight/ (2 * target.calculateZoomLevel(newPosition.zoomLevel));

		target.beginAnimation(newPosition);
	}
	
	// event listner for drag on preview window
	previewZoomListener.ondragend=function(e){
		target = e.getTarget();
		
		// create new Position object
		newPosition = new Object();
		
		// translate layer position to absolute coordinates		
		newPosition.x = -target.previewZoom.getX() / target.calculateZoomLevel(target.currentPreviewPosition.zoomLevel);
		newPosition.y = -target.previewZoom.getY() / target.calculateZoomLevel(target.currentPreviewPosition.zoomLevel);

		// leave zoom unchanged
		newPosition.zoomLevel = target.currentPreviewPosition.zoomLevel;
		
		// set newPosition
		target.newPosition = newPosition;
		target.currentPreviewPosition = newPosition;

		// update MR Zoom
		target.loadNewZoom();
		target.updateMRZoom(target.maxMRWait);	
		
		// update Navigation Box
		target.updateNavigationBox();

	}
	
	previewZoomListener.ondragmove = function(e) 
	{ 	
		target = e.getTarget();

		// update zoom box during drag
		posX = -target.previewZoom.getX() / target.calculateZoomLevel(target.currentPreviewPosition.zoomLevel) / target.thumbNailRatio;
		posY = -target.previewZoom.getY() / target.calculateZoomLevel(target.currentPreviewPosition.zoomLevel) / target.thumbNailRatio;
		target.navigationView.updateZoomBoxBorders(target.currentPreviewPosition.zoomLevel,posX,posY);
	};
	
	this.previewZoom.addEventListener(previewZoomListener);
		
	// event listener for zoomOut button
	zoomOutListener = new EventListener(this);
	zoomOutListener.onclick = function(e) {

		target = e.getTarget();

		// create new Position object
		newPosition = new Object();
		newPosition.x = target.currentPreviewPosition.x;
		newPosition.y = target.currentPreviewPosition.y;
		newPosition.zoomLevel = target.currentPreviewPosition.zoomLevel;
		
		if (newPosition.zoomLevel >= .2)
		{
		
			newPosition.zoomLevel -= 1;

			if (newPosition.zoomLevel <= .2)
			{
				newPosition.zoomLevel = 0;
				newPosition.x = 0;
				newPosition.y = 0;

			}
			else
			{
				// adjust newPosition based on new zoom level
				newPosition.x -= target.zoomWidth / ( 2 * target.calculateZoomLevel(newPosition.zoomLevel + 1));
				newPosition.y -= target.zoomHeight / (2 * target.calculateZoomLevel(newPosition.zoomLevel + 1));
			}

			// fire off animation
			target.beginAnimation(newPosition);
		}
	}
	this.zoomOutButton.addEventListener(zoomOutListener);
	

	// event listener for zoomIn button
	zoomInListener = new EventListener(this);
	zoomInListener.onclick = function(e) {

		target = e.getTarget();

		// create new Position object
		newPosition = new Object();
		newPosition.x = target.currentPreviewPosition.x;
		newPosition.y = target.currentPreviewPosition.y;
		newPosition.zoomLevel = target.currentPreviewPosition.zoomLevel + 1;
		newPosition.x += target.zoomWidth/ (2 * target.calculateZoomLevel(newPosition.zoomLevel));
		newPosition.y += target.zoomHeight/ (2 * target.calculateZoomLevel(newPosition.zoomLevel));
		
		//alert( 'new Position  x ' + newPosition.x + ',' + newPosition.y);		
		target.beginAnimation(newPosition);

	}
	this.zoomInButton.addEventListener(zoomInListener);
	
	
	// event listener for Reset button
	resetListener = new EventListener(this);
	resetListener.onclick = function(e) {

		target = e.getTarget();

		if (target.currentPreviewPosition.zoomLevel >= .2)
		{
			newPosition = new Object();
			newPosition.zoomLevel = 0;
			newPosition.x = 0;
			newPosition.y = 0;

			// fire off animation
			target.beginAnimation(newPosition);
		}
	}
	this.resetButton.addEventListener(resetListener);
}

// setup animation
DLXZoom.prototype.beginAnimation = function(newPosition)
{
	// check to see if zoom is past max
	if (newPosition.zoomLevel > this.zoomLevels) 
	{
		//alert('Maximum zoom levels reached');
	}
	else
	{				
		// set newPosition
		this.newPosition = newPosition;

		// set animation frame counter and parameters
		this.currentFrame = 1;

		// constrain image
		this.constrainZoom();
		
		// load zoom image in background
		this.loadNewZoom();

		// set intervals between frames
		// determine increment for x,y, and  zoom		
		oldCenterPoint = this.getCenterPoint(this.currentPreviewPosition);
		newCenterPoint = this.getCenterPoint(this.newPosition);
		this.changePosition.x = (newCenterPoint.x - oldCenterPoint.x) / this.MaxAnimationFrames ;
		this.changePosition.y = (newCenterPoint.y - oldCenterPoint.y) / this.MaxAnimationFrames ;
		
		this.changePosition.zoomLevel = (this.newPosition.zoomLevel - this.currentPreviewPosition.zoomLevel) / this.MaxAnimationFrames ;

		//alert('Change Position for zoom x,y,zoomlevel ' + this.changePosition.x + ',' + this.changePosition.y + ',' + this.changePosition.zoomLevel); 

		// start animation
		setTimeout('zoomObject.animateZoom();',20);
	}
}

DLXZoom.prototype.getCenterPoint = function(position)
{
	var centerPoint = new Object();
	centerPoint.x = position.x + this.zoomWidth / (2 * this.calculateZoomLevel(position.zoomLevel));
	centerPoint.y = position.y + this.zoomHeight / (2 * this.calculateZoomLevel(position.zoomLevel));
	return centerPoint;
}

// load new zoom image in seperate thread
DLXZoom.prototype.loadNewZoom = function()
{
	if (this.newPosition.zoomLevel != 0)
	{
	
		// show stop watch
		this.hourglass.setVisible(true);	
		this.updatingMRZoom = true;
		this.disableNavWindow = true;

		setTimeout('zoomObject.loadImageInBackground();', 5);
		this.loadImageInBackground();
	}
}

// load image in background
DLXZoom.prototype.loadImageInBackground = function()
{	
	// load MR zoom image
	zoomMRL = this.zoomMediaRichImage(this.newPosition, true);
	this.mrZoomImage = new DynImage.getImage(zoomMRL);

	// load new zoom layer
	this.trueZoom = new DynImage(this.mrZoomImage);
	this.updatingMRZoom = false;
}

DLXZoom.prototype.constrainZoom = function()
{
	if ( this.newPosition.zoomLevel != 0)
	{
		maxHeight = this.zoomHeight - this.zoomHeight / this.calculateZoomLevel(this.newPosition.zoomLevel);
		maxWidth  = this.zoomWidth - this.zoomWidth / this.calculateZoomLevel(this.newPosition.zoomLevel);

		if (this.newPosition.x < 0)
			this.newPosition.x = 0;
		else if (this.newPosition.x > maxWidth)
			this.newPosition.x = maxWidth;

		if (this.newPosition.y < 0) 
		    this.newPosition.y = 0; 
		else if (this.newPosition.y > maxHeight)
			this.newPosition.y = maxHeight; 
	} 
}

// animation routine
DLXZoom.prototype.animateZoom = function()
{
	// animate current frame
	this.zoomPreviewImage();	
	
	this.currentFrame++;

	if (this.currentFrame > this.MaxAnimationFrames)
	{
		// now display zoom image
		this.updateMRZoom(this.maxMRWait);
		return;
	}		
	else
	{
		setTimeout('zoomObject.animateZoom();',20);
	}

}

DLXZoom.prototype.updateMRZoom = function(waitTime)
{	
	// if reseting image than preview is good enough
	if (this.newPosition.zoomLevel == 0)
	{	// clear hourglass 
		this.hourglass.setVisible(false);	
		this.disableNavWindow = false;
		return;
	}	
		
	loaded = this.trueZoom != null && this.trueZoom.getImage().complete && !this.updatingMRZoom;
	
	if (isMacInternetExplorer())
		loaded = loaded && this.trueZoom.getImage().width > 1 && this.trueZoom.getImage().height > 1;
	
	
	// if not call us again and wait 
	if(waitTime >= 0 && !loaded) 
	{
		setTimeout( 'zoomObject.updateMRZoom('+eval(waitTime-500)+');', 100 );
		return;
	}
	else
	{	
		// clear hourglass 
		this.hourglass.setVisible(false);
				
		// create new true zoom layer
		this.trueZoom.setWidth(this.zoomWidth);
		this.trueZoom.setHeight(this.zoomHeight);
		this.previewZoom.addChild(this.trueZoom);
		this.trueZoom.moveTo(this.currentPreviewPosition.x * this.calculateZoomLevel(this.currentPreviewPosition.zoomLevel), 
				     this.currentPreviewPosition.y * this.calculateZoomLevel(this.currentPreviewPosition.zoomLevel));
		this.trueZoom.setVisible(true);
		this.disableNavWindow = false;
	}

}

// calculate scale value
DLXZoom.prototype.calculateZoomLevel = function(zoomLevel)
{
	return Math.pow(this.zoomPerLevel, zoomLevel);
}

DLXZoom.prototype.zoomPreviewImage = function()
{
	// update preview window
	
	// update center point
	newCenter = this.getCenterPoint(this.currentPreviewPosition);
	
	newCenter.x += this.changePosition.x;
	newCenter.y += this.changePosition.y;
		
	this.currentPreviewPosition.zoomLevel += this.changePosition.zoomLevel;
	
	// update newX and newY based on new zoom level
	newCenter.x -= this.zoomWidth/ (2 * this.calculateZoomLevel(this.currentPreviewPosition.zoomLevel));
	newCenter.y -= this.zoomHeight/ (2 * this.calculateZoomLevel(this.currentPreviewPosition.zoomLevel));
	
	// assign new position
	this.currentPreviewPosition.x = newCenter.x;
	this.currentPreviewPosition.y = newCenter.y;

	//alert('preview X,Y,Zoom ' + this.currentPreviewPosition.x + ',' + this.currentPreviewPosition.y + ',' + this.currentPreviewPosition.zoomLevel);

	// redraw preview using absolute coordinates
	
	// check to see if we are near zero
	if (this.currentPreviewPosition.zoomLevel < .1)
	{
		this.currentPreviewPosition.zoomLevel = 0;
		this.currentPreviewPosition.x = 0;
		this.currentPreviewPosition.y = 0;
	}

	// calculate new height and width
	var newWidth = this.zoomWidth * this.calculateZoomLevel(this.currentPreviewPosition.zoomLevel);
	var newHeight = this.zoomHeight * this.calculateZoomLevel(this.currentPreviewPosition.zoomLevel);

	// calculate offset 
	layerXOffset = -this.currentPreviewPosition.x * this.calculateZoomLevel(this.currentPreviewPosition.zoomLevel);
	layerYOffset = -this.currentPreviewPosition.y * this.calculateZoomLevel(this.currentPreviewPosition.zoomLevel);
	
	//alert('layer offset ' + layerXOffset + ',' + layerYOffset);
	//alert('new width,height ' + newWidth + ',' + newHeight);

	// set image width
	this.previewZoom.setSize(newWidth,newHeight);

	// move and show
	this.previewZoom.moveTo(layerXOffset, layerYOffset);
	
	//alert('actual width,height ' + this.previewZoom.getWidth() + ',' + this.previewZoom.getHeight());
	//alert('actual x,y ' + this.previewZoom.getX() + ',' + this.previewZoom.getY());

	// update Navigation Box
	this.updateNavigationBox();

	// update drag boundary
	DragEvent.setDragBoundary(this.previewZoom, this.zoomHeight - newHeight,newWidth,newHeight,this.zoomWidth-newWidth);
}

// update navigation box
DLXZoom.prototype.updateNavigationBox = function()
{
	// update navigation box
	zbX = this.currentPreviewPosition.x / this.thumbNailRatio;
	zbY = this.currentPreviewPosition.y / this.thumbNailRatio;
	zbW = this.zoomWidth / this.thumbNailRatio / this.calculateZoomLevel(this.currentPreviewPosition.zoomLevel);
	zbH = this.zoomHeight / this.thumbNailRatio / this.calculateZoomLevel(this.currentPreviewPosition.zoomLevel);

	this.navigationView.updateZoomBoxBorders(this.currentPreviewPosition.zoomLevel,zbX,zbY,zbW,zbH);
	this.navigationView.updateZoomBox(this.currentPreviewPosition.zoomLevel,zbX,zbY,zbW,zbH);
}

// Zoom MediaRich Image
DLXZoom.prototype.zoomMediaRichImage = function(newPosition) 
{		
	// create zoom MRL
	zoomMRL = this.createZoomMRL(this.zoomImage, this.zoomWidth, this.zoomHeight, newPosition.x, newPosition.y, newPosition.zoomLevel);

	return zoomMRL;
}

// create MediaRich MRL
DLXZoom.prototype.createZoomMRL = function(zoomImage, browserWidth, browserHeight, outputX, outputY, zoomLevel)
{
	mrlParams = 'zm=' + browserWidth +',' + browserHeight + ',' + this.calculateZoomLevel(zoomLevel) +
		     ',' + outputX + ',' + outputY;
	return this.zoomImagePreviewMRL + mrlParams;
}

function navigationView( width, height, borderColor, rectColor, mainView, image ) 
{
	// create base layer
	this.mainLayer = new DynLayer(null,0,0,width + 2,height + 2,borderColor);
	this.mainView = mainView;
	this.mainView.navLayer = this.mainLayer;

	// create image thumbnail layer
	this.thumbNailView = new DynImage(image,width,height);
	this.thumbNailView.setWidth(width);
	this.thumbNailView.setHeight(height);
	this.thumbNailView.moveTo(1,1);
	this.mainLayer.addChild(this.thumbNailView);	
	
	// set up zoom box
	this.zoomboxWidth = width;
	this.zoomboxHeight = height;
	
	// create drag view box
	//this.dragView = new DynLayer(null,0,0,width,height,'red');
	this.transparent = DynImage.getImage('transparent.gif');
	this.dragView = new DynImage(this.transparent);
	this.dragView.setWidth(width);
	this.dragView.setHeight(height);
	
	// create zoom box
	this.leftLine = new DynLayer( null,-1,-1,this.zoomboxWidth,1,rectColor );
	this.rightLine = new DynLayer( null,-1,-1,this.zoomboxWidth,1,rectColor );
	this.topLine = new DynLayer( null,-1,-1,1,this.zoomboxHeight,rectColor );
	this.bottomLine = new DynLayer( null,-1,-1,1,this.zoomboxHeight,rectColor );
	this.mainLayer.addChild( this.leftLine );
	this.mainLayer.addChild( this.rightLine );
	this.mainLayer.addChild( this.topLine );
	this.mainLayer.addChild( this.bottomLine );
	this.mainLayer.addChild( this.dragView );
	this.leftLine.setZIndex(40); 
	this.rightLine.setZIndex(40); 
	this.topLine.setZIndex(40); 
	this.bottomLine.setZIndex(40);
	this.dragView.setZIndex(45);

	// event listener to handle mouse clicks for thumbnailView
	thumbNailViewListener = new EventListener(mainView);
	
	if (!isMacInternetExplorer())
	{
		thumbNailViewListener.onclick = function(e) 
		{				
			target = e.getTarget();

			// do not handle if updating main window
			if (target.disableNavWindow)
				return;

			// create new Position object
			newPosition = new Object();

			// translate click to absolute coordintates
            if(is.ie)
            {
    			newPosition.x = (e.x - target.navLayer.getX()) * target.thumbNailRatio;
    			newPosition.y = (e.y - target.navLayer.getY()) * target.thumbNailRatio;
            }
            else
            {
    			newPosition.x = (e.x * target.thumbNailRatio);
    			newPosition.y = (e.y * target.thumbNailRatio);
            }

			
			//alert('e x,y new x,y ' + e.x + ',' + e.y + ' ' + newPosition.x + ',' + newPosition.y);
			//alert('e previewLayer x,y ' + target.navLayer.getX() + ',' + target.navLayer.getY());

			// calculate new Zoom
			newPosition.zoomLevel = target.currentPreviewPosition.zoomLevel + 1;

			// offset for new zoom  level
			newPosition.x -= target.zoomWidth / (2 * target.calculateZoomLevel(newPosition.zoomLevel));
			newPosition.y -= target.zoomHeight / (2 * target.calculateZoomLevel(newPosition.zoomLevel));

			target.beginAnimation(newPosition);
		}	
	}
	this.thumbNailView.addEventListener(thumbNailViewListener);
	
	// event listener for navigation box
	navBoxListener = new EventListener(mainView);
	if (!isMacInternetExplorer())
	{
		navBoxListener.onclick = function(e) 
		{ 	
			target = e.getTarget();

			// do not handle if updating main window
			if (target.disableNavWindow)
				return;

			// create new Position object
			newPosition = new Object();			

			// translate click to absolute coordintates
            if(is.ie)
            {
    			newPosition.x = (e.x - target.navLayer.getX()) * target.thumbNailRatio;
    			newPosition.y = (e.y - target.navLayer.getY()) * target.thumbNailRatio;
            }
            else
            {
    			newPosition.x = ((target.navigationView.dragView.getX()) + e.x) * target.thumbNailRatio;
    			newPosition.y = ((target.navigationView.dragView.getY()) + e.y) * target.thumbNailRatio;
            }

			//alert('e x,y new x,y ' + e.x + ',' + e.y + ' ' + newPosition.x + ',' + newPosition.y);
			//alert('e previewLayer x,y ' + target.navLayer.getX() + ',' + target.navLayer.getY());

			// calculate new Zoom
			newPosition.zoomLevel = target.currentPreviewPosition.zoomLevel + 1;

			// offset for new zoom level
			newPosition.x -= target.zoomWidth / (2 * target.calculateZoomLevel(newPosition.zoomLevel));
			newPosition.y -= target.zoomHeight / (2 * target.calculateZoomLevel(newPosition.zoomLevel));

			target.beginAnimation(newPosition);
		};
	}
	
	navBoxListener.ondragmove = function(e) 
	{ 	
	
		target = e.getTarget();
		
		// update zoom box during drag
		target.navigationView.updateZoomBoxBorders(target.currentPreviewPosition.zoomLevel,target.navigationView.dragView.getX(),target.navigationView.dragView.getY());
		
		// update main window during drag
		// calculate offset 
		layerXOffset = -target.navigationView.dragView.getX() * target.calculateZoomLevel(target.currentPreviewPosition.zoomLevel) * target.thumbNailRatio;
		layerYOffset = -target.navigationView.dragView.getY() * target.calculateZoomLevel(target.currentPreviewPosition.zoomLevel) * target.thumbNailRatio;
				
		// move and show
		target.previewZoom.moveTo(layerXOffset, layerYOffset);

	};
	
	// after drag ends update everything
	navBoxListener.ondragend = function(e) 
	{ 	
		target = e.getTarget();

		// create new Position object
		newPosition = new Object();

		// translate click to absolute coordintates
		newPosition.x = target.navigationView.dragView.getX() * target.thumbNailRatio;
		newPosition.y = target.navigationView.dragView.getY() * target.thumbNailRatio;

		// calculate new Zoom
		newPosition.zoomLevel = target.currentPreviewPosition.zoomLevel;
			
		// set newPosition
		target.newPosition = newPosition;
		target.currentPreviewPosition = newPosition;

		// update MR Zoom
		target.loadNewZoom();
		target.updateMRZoom(this.maxMRWait);

	};
	this.dragView.addEventListener(navBoxListener);

	
	return this;

}

navigationView.prototype.updateZoomBoxBorders = function(zoomLevel,posX,posY,width,height)
{
	if( zoomLevel <= .2 ) 
	{
		this.topLine.setVisible(false);
		this.bottomLine.setVisible(false);
		this.leftLine.setVisible(false);
		this.rightLine.setVisible(false);
	} 
	else 
	{
		// if new width is passed then use it
		if (width != null)
			this.zoomboxWidth = width;

		if (height != null)
			this.zoomboxHeight = height;
			
		
		this.topLine.setVisible(false);
		this.bottomLine.setVisible(false);
		this.leftLine.setVisible(false);
		this.rightLine.setVisible(false);

		this.topLine.setSize(this.zoomboxWidth,1);
		this.bottomLine.setSize(this.zoomboxWidth,1);
		this.leftLine.setSize(1,this.zoomboxHeight);
		this.rightLine.setSize(1,this.zoomboxHeight);

		this.topLine.moveTo(posX + 1,posY + 1);	
		this.bottomLine.moveTo(posX + 1,posY + this.zoomboxHeight);	
		this.leftLine.moveTo(posX + 1,posY + 1);	
		this.rightLine.moveTo(posX + this.zoomboxWidth, posY + 1);	
		
		this.topLine.setVisible(true);
		this.bottomLine.setVisible(true);
		this.leftLine.setVisible(true);
		this.rightLine.setVisible(true);
	}
}

navigationView.prototype.updateZoomBox = function(zoomLevel,posX,posY,width,height)
{
	if( zoomLevel <= .2 ) 
	{
		this.dragView.setVisible(false);
	} 
	else 
	{
		// set drag view size
		this.dragView.moveTo(posX + 1, posY + 1);
		this.dragView.setWidth(width);
		this.dragView.setHeight(height);
		this.dragView.setVisible(true);
	}
}