CZoomViewer = function() {
	this.imageList = new Array();
	this.imageSet = '';
	this.isChangingImageSet = false;
	this.pendingImageSet = null;
	this.pendingTemplate = null;
	this.template = '';
	this.serverUrl = '';
	this.contentRoot = '';
	this.zoomView;
	this.containerId = '';
	this.maxZoom = 100;
	this.swatchBar;
	this.zoomLimit = 4;
	this.zoomStep = 1;
	this.modifier = '';
	this.swatchModifier = '';
	this.turnTime = 500;

	this.viewerWidth = 390;
	this.viewerHeight = 610;
	
	this.NORMAL_MODE_ZOOM_VIEW_WIDTH = 390;
	this.NORMAL_MODE_ZOOM_VIEW_HEIGHT = 490;

	this.QUICK_VIEW_ZOOM_VIEW_WIDTH = 262;
	this.QUICK_VIEW_ZOOM_VIEW_HEIGHT = 272;

	this.zoomViewWidth = this.NORMAL_MODE_ZOOM_VIEW_WIDTH;
	this.zoomViewHeight = this.NORMAL_MODE_ZOOM_VIEW_HEIGHT;

	this.allowZoomViewSizeChange = true;

	this.swatchCellWid = 68;
	this.swatchCellHei = 84;

	this.cellSpacing = 5;
	this.swBorderThickness = 0;
	this.fsSwBorderThickness = 0;

	this.swBorderColor = '#cccccc';
	this.fsSwBorderColor = '#cccccc';
	this.visibleSwatchCount = 4;

	this.fullscreenScrollEnabled = false;

	this.popupViewerReference;
	this.currentImageIdx = 0;
	this.prodName = '';
	this.currentMode = CZoomViewer.NORMAL_MODE;

	CZoomViewer.COUNTER ++;
	
	this.instanceCount = CZoomViewer.COUNTER;
	
	CZoomViewer.INSTANCES[CZoomViewer.COUNTER] = this;
	
};

CZoomViewer.COUNTER = 0;

CZoomViewer.NORMAL_MODE = 'normalMode';
CZoomViewer.QUICK_VIEW_MODE = 'quickViewMode';

CZoomViewer.INSTANCES = new Object();

CZoomViewer.prototype.setMode = function(inMode) {
	if ((inMode != CZoomViewer.NORMAL_MODE) && (inMode != CZoomViewer.QUICK_VIEW_MODE))
	{
		return;
	}
	if ((inMode == CZoomViewer.QUICK_VIEW_MODE) && this.allowZoomViewSizeChange)
	{
		this.zoomViewWidth = this.QUICK_VIEW_ZOOM_VIEW_WIDTH;
		this.zoomViewHeight = this.QUICK_VIEW_ZOOM_VIEW_HEIGHT;
	}
	this.currentMode = inMode;
};

CZoomViewer.prototype.setContainerId = function(inId) {
	this.containerId = inId;
};

CZoomViewer.prototype.setViewerSize = function(inWid, inHei) {
	this.viewerWidth = inWid;
	this.viewerHeight = inHei;
};

CZoomViewer.prototype.setZoomViewSize = function(inWid, inHei) {
	this.allowZoomViewSizeChange = false;
	this.zoomViewWidth = inWid;
	this.zoomViewHeight = inHei;
};

CZoomViewer.prototype.setSwatchSize = function(inWid, inHei) {
	this.swatchCellWid = inWid;
	this.swatchCellHei = inHei;
};

CZoomViewer.prototype.setImageModifier = function(inModifier) {
	this.modifier = unescape(inModifier);
};

CZoomViewer.prototype.setSwatchModifier = function(inswatchModifier) {
	this.swatchModifier = unescape(inswatchModifier);
};

CZoomViewer.prototype.setServerUrl = function(inServerUrl) {
	this.serverUrl = inServerUrl;
};

CZoomViewer.prototype.setContentRootUrl = function(inContentRoot) {
	this.contentRoot = inContentRoot;
};

CZoomViewer.prototype.setImageSet = function(inImageSet, inTemplate) {
	this.template = null;
	if (inTemplate != null)
	{
		this.template = inTemplate;
	}
	this.imageSet = inImageSet;
};

CZoomViewer.prototype.changeImageSet = function(inImage, inTemplate) {
	//prtected from repeated changeImageSet calls
	if (this.isChangingImageSet) {
		if ((inImage != this.imageSet) || (inTemplate != this.template)) {
			//we are curerntly loading new image set, and request to change to a diff set came in.
			this.pendingImageSet = inImage;
			this.pendingTemplate = inTemplate;
		} else {
			//we are curerntly loading new image set, and repeated request to change to the same set came in.
			this.pendingImageSet = null;
			this.pendingTemplate = null;
		}
		return;
	} else {
		//request to change to the same set as we are currently using came in.
		if ((inImage == this.imageSet) && (inTemplate == this.template)) {
			return;
		}
	}

	this.isChangingImageSet = true;
	this.imageSet = inImage;
	this.template = null;
	if (inTemplate != null)
	{
		this.template = inTemplate;
	}
	this.draw();
};

CZoomViewer.prototype.setProductName = function(inProdName) {
	this.prodName = inProdName
};

CZoomViewer.prototype.setSwatchBorderThickness = function(inSwBorderThickness) {
	this.swBorderThickness = inSwBorderThickness;
};

CZoomViewer.prototype.setFsSwatchBorderThickness = function(inFsSwBorderThickness) {
	this.fsSwBorderThickness = inFsSwBorderThickness;
};


CZoomViewer.prototype.setSwatchBorderColor = function(inSwBorderColor) {
	this.swBorderColor = inSwBorderColor;
};

CZoomViewer.prototype.setFsSwatchBorderColor = function(inFsSwBorderColor) {
	this.fsSwBorderColor = inFsSwBorderColor;
};

CZoomViewer.prototype.setFullscreenScroll = function(inScrollEnabled) {
	this.fullscreenScrollEnabled = inScrollEnabled;
};

CZoomViewer.prototype.draw = function() {
	this.unblockTouchEvents();
	this.createLayout();
	var classRef = this;
	function initViewer() {
		if ((classRef.imageList.length <= 1) && (classRef.imageList[0] == ''))
		{
			classRef.imageList[0] = classRef.imageSet;
		}
		classRef.init();
		if (classRef.isChangingImageSet) {
			classRef.isChangingImageSet = false;
			//load any sets which were requested while viewer was processing previous changeImageSet call
			if (classRef.pendingImageSet != null) {
				var imageSetTemp = classRef.pendingImageSet;
				var templateTemp = classRef.pendingTemplate;
				classRef.pendingImageSet = null;
				classRef.pendingTemplate = null
				classRef.changeImageSet(imageSetTemp, templateTemp);
			}
		}
	};
	this.imageList = new Array();
	sjLoadImageSet(this.serverUrl + this.imageSet, this.imageList, initViewer);
};

CZoomViewer.prototype.init = function() {
	//if (this.zoomView == null) {
		this.currentImageIdx = 0;
		var initialImage = this.imageList[this.currentImageIdx];
		if ((this.imageList[this.currentImageIdx].indexOf('_main') != -1) && (this.template != null) && (this.template != ''))
		{
			initialImage = this.template;

		} 
		
		if (this.modifier != '') {
			if (initialImage.indexOf('?') != -1)
			{
				initialImage += '&' + this.modifier;
			} else {
				initialImage += '?' + this.modifier;
			}
		}

		this.zoomView = new SjZViewer(this.serverUrl, initialImage);
		this.zoomView.setZoomLimit(this.zoomStep,this.zoomLimit,this.maxZoom);

this.zoomView.zviewer.initialising = function (x,y,scale,defaultScl) {
	this.defaultScl = this.initialScl = Math.max(Math.max(this.imgServerWidth / this.viewSize.width, this.imgServerHeight / this.viewSize.height), 1.0);//ss
	 if (defaultScl != null){
		this.defaultScl = this.initialScl = defaultScl;
	  }
	 if (scale == null){
		this.currentScl = this.defaultScl;
	  } else {
		var resetScl = scl1 = Math.max(this.imgServerWidth / this.viewSize.width, 
										this.imgServerHeight / this.viewSize.height);
		var prevResetScl = scl0 = Math.max(this.prevImgServerWidth / this.viewSize.width, 
											this.prevImgServerHeight / this.viewSize.height);
		resetScl = Math.max(resetScl,1.0);
		prevResetScl = Math.max(prevResetScl,1.0);
		//minimum allowed scale value.
		scale = scale * resetScl / prevResetScl;
		if (this.zoom_factor_limit != 0) {
			scale = Math.min(Math.max(scale, 1 / this.zoom_factor_limit),this.defaultScl);
		}
		this.currentScl = scale;
	 }

	//custom setting fullZoomInStepLimit to 2.

	this.setZoomScl([this.defaultScl, 1 + (this.defaultScl - 1) / 2, 1]);

	//set position
	this.defaultX = (this.viewSize.width - this.imgServerWidth/this.defaultScl)/2;
	 if (x == null){
		this.currentX = (this.viewSize.width - this.imgServerWidth/this.currentScl)/2;
	  } else {
		this.currentX = x;
	 }
	this.defaultY = (this.viewSize.height - this.imgServerHeight/this.defaultScl)/2;
	 if (y == null){
		this.currentY = (this.viewSize.height - this.imgServerHeight/this.currentScl)/2;
	  } else {
		this.currentY = y;
	 }
	
	if (!this.zoomScl){
		this.zoomSclArray = new Array();
		for(var i=0;i<=this.max_zoom;i++){
			this.zoomSclArray.push(this.defaultScl/Math.pow(this.zoom_factor , i));
		}
	}
	//create url
		this.idStr="";
		if (this.imageVersion){
			this.idStr = '&id='+this.imageVersion;
		}
		this.loadURL = this.navloadURL = this.mainURL+sjPBreak(this.mainURL)+'rgn='+
							Math.round(0)+','+
							Math.round(0)+','+
							Math.round(this.imgServerWidth)+','+
							Math.round(this.imgServerHeight);
		this.loadURL +=	'&scl='+(this.defaultScl)+this.idStr;
	//load image
		this.backImage.visible(false);
		this.backImage.load(this.loadURL);
		if (this.navLayer){
			clearTimeout(this.navLayer.dblnavImage._fadeid);
			this.navLayer.dblnavImage._fadeid = null;
			this.navDefaultScl = Math.max(Math.max(this.imgServerWidth / (this.navLayer.width()-5), this.imgServerHeight / (this.navLayer.height()-5)), 1.0);
			this.navloadURL +=	'&scl='+(this.navDefaultScl)+this.idStr;
			this.navLayer.dragImage.visible(false);
			this.navLayer.dblnavImage.visible(false);
			this.navLayer.dblnavImage.load(this.navloadURL);
		}
}

		
		this.zoomView.zviewer.initTouchHandlers();
		document.getElementById('foreImage'+this.zoomView.zviewer._elementId + '_img').title = this.prodName;
		document.getElementById('backImage'+this.zoomView.zviewer._elementId + '_img').title = this.prodName;
		document.getElementById('mapImage'+this.zoomView.zviewer._elementId + '_img').title = this.prodName;
		this.doubleTap(this.zoomView);
//		this.zoomView.setMaxZoom(this.maxZoom);
//	}
	this.createSwatches();
	this.initZoomButtons();
};

CZoomViewer.prototype.createSwatches = function() {
	var html = '';
	html += '<table border="0" cellspacing="0" cellpadding="0">';
	html += '	<tbody>';
	html += '		<tr>';
	var swatchIdx = 0;
	for (var i = 0; i < Math.min(this.imageList.length, this.visibleSwatchCount); i++)
	{	
		var imageURL = this.serverUrl + '/' + this.imageList[i] + '?wid='+this.swatchCellWid+'&hei='+this.swatchCellHei+'&fit=fit,1&fmt=jpg';

		if (this.swatchModifier != '') {
			imageURL += '&' + this.swatchModifier;
		}

		html += '			<td>';
		html += '				<div id="borderHolder_' + i + '" style="border:'+this.swBorderThickness+'px solid '+this.swBorderColor+';background-color:#FFFFFF;overflow:hidden;width:'+this.swatchCellWid+'px;height:'+this.swatchCellHei+'px">';
		html += '					<div onclick="CZoomViewer.INSTANCES['+this.instanceCount+'].onSwatchClick(\'' + i + '\', \'image\')" ontouchend="CZoomViewer.INSTANCES['+this.instanceCount+'].onSwatchClick(\'' + i + '\', \'image\')">';
		html += '						<img id="swatch_' + i + '" src="'+ imageURL + '" border="0" title="'+this.prodName+'"/>';
		html += '					</div>';
		html += '				</div>';
		html += '			</td>';
		html += '			<td>';
		html += '				<div style="width:'+this.cellSpacing+'px;overflow:hidden"></div>';
		html += '			<td>';
		
		swatchIdx++;
	}
	html += '		</tr>';

	document.getElementById('s7swatchBar').innerHTML = html;
};

CZoomViewer.prototype.getImageName = function(inImage) {
	var name = inImage.split('/');
	if (name.length > 1)
	{
		name = name[name.length - 1];
	}
	return name;
};

CZoomViewer.prototype.doubleTap = function(zobj){
	doubleClick = 'zoomReset';
	zobj.zviewer.addEventListener("doubleTap", 
		function (o){
			switch(doubleClick){
				case "none":
					return false;
					break;
				case "zoom":
					var minScale = Math.max(1 / zobj.zviewer.zoom_factor_limit, zobj.zviewer.defaultScl / Math.pow(zobj.zviewer.zoom_factor , zobj.zviewer.max_zoom));
					if ((zobj.zviewer.currentScl - minScale) > 0.000001) {
						zobj.zviewer.state = "zoomIn";
						zobj.zviewer.ZoomAt(zobj.zviewer.backImage,o.x,o.y,1/zobj.zviewer.zoom_factor);
					}
					break;
				case "reset":
					zobj.zviewer.ResetView(zobj.zviewer.backImage);
					break;
				case "zoomReset":
					var minScale = Math.max(1 / zobj.zviewer.zoom_factor_limit, zobj.zviewer.defaultScl / Math.pow(zobj.zviewer.zoom_factor , zobj.zviewer.max_zoom));
					if ((zobj.zviewer.currentScl - minScale) > 0.000001) {
						zobj.zviewer.state = "zoomIn";
						zobj.zviewer.ZoomAt(zobj.zviewer.backImage,o.x,o.y,1/zobj.zviewer.zoom_factor)
					}else{
						zobj.zviewer.ResetView(zobj.zviewer.backImage);
					}
					break;
			}  
			return false;
		}
	);
}

CZoomViewer.prototype.onSwatchClick = function(idx) {
	var imageUrl;
	if ((this.imageList[idx].indexOf('_main') != -1) && (this.template != null)  && (this.template != ''))
	{
		imageUrl = this.serverUrl + '/' + this.template;
	} else {
		imageUrl = this.serverUrl + '/' + this.imageList[idx];
		
		if (this.modifier != '')
		{
			if (this.imageList[idx].indexOf('?') != -1) {
				imageUrl += '&' + this.modifier;
			} else {
				imageUrl += '?' + this.modifier;
			}			
		}
	}
	this.currentImageIdx = idx;
	this.zoomView.setImage(imageUrl, true);
};

CZoomViewer.prototype.initZoomButtons = function() {
	if (document.getElementById('s7BtnZoomIn_'+this.instanceCount))
	{
		var btnZoomIn = document.getElementById('s7BtnZoomIn_'+this.instanceCount);
		var count = this.instanceCount;
		btnZoomIn.onclick = btnZoomIn.ontouchend = function(e) {
			e = fixEvent(e);
			CZoomViewer.INSTANCES[count].zoomView.zoomIn();
		};
	}
	
	if (document.getElementById('s7BtnZoomOut_'+this.instanceCount))
	{
		var btnZoomOut = document.getElementById('s7BtnZoomOut_'+this.instanceCount);
		btnZoomOut.onclick = btnZoomIn.ontouchend = function(e) {
			e = fixEvent(e);
			CZoomViewer.INSTANCES[count].zoomView.zoomOut();
		};
	}
	
	if (document.getElementById('s7BtnFullScreen_'+this.instanceCount))
	{
		var btnFullScreen = document.getElementById('s7BtnFullScreen_'+this.instanceCount);
		btnFullScreen.onclick = btnFullScreen.ontouchend = function(e) {
			e = fixEvent(e);
			CZoomViewer.INSTANCES[count].openFullScreenViewer();
		};
	}
};

CZoomViewer.prototype.createLayout = function() {
	var html = '<div id="s7viewerContainer_'+this.instanceCount+'" style="position:relative">';
	html += '<div id="izView" style="width:'+this.zoomViewWidth+'px;height:'+this.zoomViewHeight+'px;position:realtive;top:0px;left:0px"></div>';
	if (this.currentMode == CZoomViewer.NORMAL_MODE)
	{
		html += '<div id="zoomButtonsContainer_'+this.instanceCount+'" style="position:realtive;top:'+this.zoomViewHeight+'px;left:0px;height:28px;overflow:hidden">';
		html += '<table border="0" cellspacing="0" cellpadding="0">';
		html += '	<tbody><tr>';
		html += '		<td>';
		html += '			<div id="s7BtnZoomIn_'+this.instanceCount+'" style="position:relative;background-repeat:no-repeat;background-image:url('+this.contentRoot+'btnZoomIn.png);width:15px;height:28px"></div>';
		html += '		</td>';
		html += '		<td>';
		html += '			<div id="s7lblZoom_'+this.instanceCount+'" style="position:relative;background-repeat:no-repeat;background-image:url('+this.contentRoot+'lblZoom.png);width:24px;height:28px"></div>';
		html += '		</td>';
		html += '		<td>';
		html += '			<div id="s7BtnZoomOut_'+this.instanceCount+'" style="position:relative;background-repeat:no-repeat;background-image:url('+this.contentRoot+'-.png);width:23px;height:28px"></div>';
		html += '		</td>';
		html += '		<td>';
		html += '			<div id="s7BtnFullScreen_'+this.instanceCount+'" style="position:relative;background-repeat:no-repeat;background-image:url('+this.contentRoot+'btnFullScreen.png);width:62px;height:28px"></div>';
		html += '		</td>';

		html += '	</tr></tbody></table>';


/*		html += '	<div id="s7BtnZoomIn_'+this.instanceCount+'" style="position:relative;background-image:url('+this.contentRoot+'plus.png);width:10px;height:10px;top:'+((26 - 10) / 2)+'px;left:4px"></div>';
		html += '	<div id="s7lblZoom_'+this.instanceCount+'" style="position:relative;background-image:url('+this.contentRoot+'zoom.png);width:31px;height:15px;top:'+(-(26 - 10) / 2 + (26 - 15) / 2 - 2)+'px;left:'+(4 + 10 +10)+'px">';
		html += '</div>';
		html += '	<div id="s7BtnZoomOut_'+this.instanceCount+'" style="position:relative;background-image:url('+this.contentRoot+'-.png);width:13px;height:13px;top:'+((-10 - 15) + ((26 - 13) / 2))+'px;left:'+(4 + 10 + 10 + 31 + 10)+'px">';
		html += '</div>';
		html += '	<div id="s7BtnFullScreen_'+this.instanceCount+'" style="position:relative;background-image:url('+this.contentRoot+'fullscreen.png);width:64px;height:7px;top:'+((-10 - 15 - 13) + ((26 - 7) / 2))+'px;left:'+(4 + 10 + 10 + 31 + 10 + 13 + 10)+'px">';
		html += '</div>';*/
		html += '</div>';
	} else {
		html += '<div id="zoomButtonsContainer_'+this.instanceCount+'" style="position:realtive;top:'+this.zoomViewHeight+'px;left:0px;height:4px;overflow:hidden"></div>';
	}
	html += '<div id="s7swatchBar"></div>';
	html += '</div>';
	document.getElementById(this.containerId).innerHTML = html;
};


CZoomViewer.prototype.openFullScreenViewer = function() {
	this.popupViewerReference = new CPopupViewer();
	this.popupViewerReference.setServerUrl(this.serverUrl);
	this.popupViewerReference.setContentRootUrl(this.contentRoot);
	this.popupViewerReference.setProductName(this.prodName);
	this.popupViewerReference.setImageSet(this.imageSet, this.template);
	this.popupViewerReference.setCurrentImageIdx(this.currentImageIdx);
	this.popupViewerReference.setImageModifier(this.modifier);
	this.popupViewerReference.setSwatchModifier(this.swatchModifier);
	this.popupViewerReference.setSwatchBorderThickness(this.fsSwBorderThickness);
	this.popupViewerReference.setSwatchBorderColor(this.fsSwBorderColor);
	this.popupViewerReference.setFullscreenScroll(this.fullscreenScrollEnabled);
	this.popupViewerReference.show();
};

CZoomViewer.prototype.unblockTouchEvents = function() {
	//unblock events blocked by sj_touch
	if (window.removeEventListener && touchHandler) { 
		document.removeEventListener("touchstart", touchHandler, false);
		document.removeEventListener("touchmove", touchHandler, false);
		document.removeEventListener("touchend", touchHandler, false);
		document.removeEventListener("touchcancel", touchHandler, false);    
		document.removeEventListener("zoom", touchHandler, false);    
		document.removeEventListener("scroll", touchHandler, false);    
	}
};