CPopupViewer = function() {
	this.imageList = new Array();
	this.imageSet = '';
	this.serverUrl = '';
	this.template;
	this.contentRoot = '';
	this.zoomView;
	this.containerId = '';
	this.maxZoom = 100;
	this.swatchBar;
	this.zoomLimit = 4;
	this.zoomStep = 2;
	this.modifier = '';
	this.swatchModifier = '';
	this.turnTime = 500;

	this.containerRef;

	this.viewerWidth = 0;
	this.viewerHeight = 0;

	this.zoomViewWidth = 0;
	this.zoomViewHeight = 0;
	
	this.swatchCellWid = 68;
	this.swatchCellHei = 72;

	this.cellSpacing = 7;
	this.swBorderThickness = 0;

	this.popupContainerPadding = new Object();
	this.popupContainerPadding.top = 0;
	this.popupContainerPadding.left = 0;
	this.popupContainerPadding.right = 0;
	this.popupContainerPadding.bottom = 0;
	
	this.fullscreenScrollEnabled = false;
	
	this.prodName = '';

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

	this.currentImageIdx = 0;
	
	CPopupViewer.COUNTER ++;
	this.instanceCount = CPopupViewer.COUNTER;

	CPopupViewer.INSTANCES[CPopupViewer.COUNTER] = this;
	this.createViewerContainer();
};

CPopupViewer.COUNTER = 0;

CPopupViewer.INSTANCES = new Object();

CPopupViewer.prototype.createViewerContainer = function(inContainerId) {
	this.containerRef = window.parent.document.createElement("div");
	this.containerRef.className = 's7PopupViewerContainer';
	this.containerRef.id = 'popupViewerContainer_' + this.instanceCount;
	document.getElementsByTagName('body')[0].appendChild(this.containerRef);

	this.containerId = this.containerRef.id;
};

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

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

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

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

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

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

CPopupViewer.prototype.changeImageSet = function(inImage, inTemplate) {
	this.template = null;
	if (inTemplate != null)
	{
		this.template = inTemplate;
	}
	this.imageSet = inImage;
	this.draw();
};

CPopupViewer.prototype.setCurrentImageIdx = function(inIdx) {
	this.currentImageIdx = inIdx
};

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

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

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

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

CPopupViewer.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();
	};
	this.imageList = new Array();
	sjLoadImageSet(this.serverUrl + this.imageSet, this.imageList, initViewer);
};

CPopupViewer.prototype.init = function() {
	var zoomViewContId = 'popupIzView_'+this.instanceCount;
	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, null, null, null, null, null, null, null, zoomViewContId);

	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
		
		//hardcoding reset scale to 1

		this.defaultScl = this.initialScl = 1
		 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;
		 }

		this.setZoomScl([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;
		 }

		 this.currentY = 0
		
		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);
			}
	}

	
	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.zoomView.zviewer.initTouchHandlers();
		
	this.doubleTap(this.zoomView);
	this.zoomView.setMaxZoom(this.maxZoom);

	this.createSwatches();
	this.initZoomButtons();
};

CPopupViewer.prototype.createSwatches = function() {
	var html = '';
	html += '<table border="0" cellspacing="0" cellpadding="0">';
	html += '	<tbody>';
	
	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 += '		<tr>';
		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="CPopupViewer.INSTANCES['+this.instanceCount+'].onSwatchClick(\'' + i + '\', \'image\')" ontouchend="CPopupViewer.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 += '		</tr>';
		html += '		<tr>';
		html += '			<td>';
		html += '				<div style="height:'+this.cellSpacing+'px;overflow:hidden"></div>';
		html += '			<td>';
		html += '		</tr>';
		
		swatchIdx++;
	}

	document.getElementById('s7swatchBarPopup_'+this.instanceCount).innerHTML = html;
};


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

CPopupViewer.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;
		}
	);
}

CPopupViewer.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);
	this.zoomView.setRGNN('0,0,0.01,0.01');
};

CPopupViewer.prototype.initZoomButtons = function() {
	if (document.getElementById('s7PopupBtnZoomIn_'+this.instanceCount))
	{
		var btnZoomIn = document.getElementById('s7PopupBtnZoomIn_'+this.instanceCount);
		var count = this.instanceCount;
		btnZoomIn.onclick = btnZoomIn.ontouchend = function(e) {
			e = fixEvent(e);
			CPopupViewer.INSTANCES[count].zoomView.zoomIn();
		};
	}
	
	if (document.getElementById('s7PopupBtnZoomOut_'+this.instanceCount))
	{
		var btnZoomOut = document.getElementById('s7BtnZoomOut_'+this.instanceCount);
		var count = this.instanceCount;
		btnZoomOut.onclick = btnZoomIn.ontouchend = function(e) {
			e = fixEvent(e);
			CPopupViewer.INSTANCES[count].zoomView.zoomOut();
		};
	}
	if (document.getElementById('s7BtnClosePopup_'+this.instanceCount))
	{
		var btnClose = document.getElementById('s7BtnClosePopup_'+this.instanceCount);
		var count = this.instanceCount;
		btnClose.onclick = btnClose.ontouchend = function(e) {
			e = fixEvent(e);
			CPopupViewer.INSTANCES[count].hide();
		};
	}
	

};

CPopupViewer.prototype.createLayout = function() {

	var availableSize = sjScreenSize();
	
	availableSize.w -= (this.popupContainerPadding.left + this.popupContainerPadding.right);
	availableSize.h -= (this.popupContainerPadding.top + this.popupContainerPadding.bottom);

	var zoomViewLeft = 86;
	var zoomViewRight = 8;
	var zoomViewBottom = 0;
	var zoomViewTop = 8;

	var swGridLeft = 8;
	var swGridTop = 8;

	this.zoomViewWidth = availableSize.w - zoomViewLeft - zoomViewRight;
	this.zoomViewHeight = availableSize.h - zoomViewTop - zoomViewBottom;

	var topPos = 0;
	var leftPos = 0;

	if(document.body&&(document.body.scrollLeft||document.body.scrollTop)){
			topPos = document.body.scrollTop;
			leftPos = document.body.scrollLeft;
		}else if(document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)){
			topPos = document.documentElement.scrollTop;
			leftPos = document.documentElement.scrollLeft;
		}
	var html = '';
	html += '<div id="s7PopupViewerContainer_'+this.instanceCount+'" style="position:relative;width:'+availableSize.w+'px;height:'+availableSize.h+'px;overflow:hidden;background-color:#ffffff">';
	html += '	<div id="popupIzView_'+this.instanceCount+'" style="position:relative;width:'+this.zoomViewWidth+'px;height:'+this.zoomViewHeight+'px;top:'+zoomViewTop+'px;left:'+zoomViewLeft+'px;z-index:2"></div>';
	html += '	<div id="s7BtnClosePopup_'+this.instanceCount+'" style="position:relative;background-image:url('+this.contentRoot+'btnClose.png);width:33px;height:7px;top:'+(-this.zoomViewHeight + zoomViewTop + 5)+'px;left:'+(this.zoomViewWidth + zoomViewLeft - 5 - 33)+'px;z-index:3"></div>';
	html += '	<div id="s7swatchBarPopup_'+this.instanceCount+'" style="position:relative;left:' + swGridLeft + 'px;top:' + (swGridTop - this.zoomViewHeight - 7) + 'px;z-index:1"></div>';
	html += '</div>';
	document.getElementById(this.containerId).style.position = 'absolute';
	document.getElementById(this.containerId).style.left = (this.popupContainerPadding.left + leftPos) + 'px';
	document.getElementById(this.containerId).style.top = (this.popupContainerPadding.top + topPos) +'px';
	document.getElementById(this.containerId).style.overflow = 'hidden';
	
	document.getElementById(this.containerId).innerHTML = html;
};


CPopupViewer.prototype.show = function() {
	if (this.containerId != '')
	{
		document.getElementById(this.containerId).style.display = 'block';
	}
	if (!this.fullscreenScrollEnabled)
	{
		document.documentElement.style.overflow = "hidden";
	}
	
	this.draw();
};

CPopupViewer.prototype.hide = function() {
	if (!this.fullscreenScrollEnabled)
	{
		document.documentElement.style.overflow = "auto";
	}
	document.getElementById(this.containerId).style.display = 'none';
};

CPopupViewer.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);    
	}
};