// *********************************************************************************************************************** //
// ** Displays the album pages in pairs or in storyboard view, plus selection highlights and insertion point indicators ** //
// *********************************************************************************************************************** //

Renderer = function(pageWidth, pageHeight, maxPages, divContainer, divPages, indicator, ghostUrl, data) {
	this.pageWidth = pageWidth;
	this.pageHeight = pageHeight;
	this.maxPages = maxPages;
	this.pages = { even: null, odd: null, evenNumber: 0, oddNumber: 0, evenOld: null, oddOld: null }
	this.imageCounter = 0;
	this.pageImagesIds = 0;
	// this.ghostPageImagesIds = 0;	//** remove
	// this.firstFreeGhostImage = 0;	//** remove
	this.baseName = 'renderer_image_';
	this.baseNameGhosts = 'renderer_ghost_image_';
	this.baseNameSets = 'imageSet';
	this.currentSetName = ''
	this.currentSet = this.baseNameSets + this.currentSetName;
	this.imageSets = new Object();
	this.imageSetsGhosts = new Object();

	this.ghostsData = new Object();
	this.ghostsData.baseName = 'renderer_ghost_image_';
	this.ghostsData.ghostPageImagesIds = new Object();
	this.ghostsData.ghostPageImagesIds[this.currentSet] = 0;
	this.ghostsData.firstFreeGhostImage = new Object();
	this.ghostsData.firstFreeGhostImage[this.currentSet] = 0;
	this.ghostsData.ghostUrl = new Object();
	this.ghostsData.ghostUrl[this.currentSet] = ghostUrl;

	// Default sets created to maintain backwards-compatibility with products not aware of multiple sets (they don't set a currentSet, just assume one)
	this.imageSets[this.currentSet] = new ItemManager(0, this, 'createImage');
	this.imageSetsGhosts[this.currentSet] = new ItemManager(0, this, 'createGhostImage');

	this.im = this.imageSets[this.currentSet];
	this.imGhosts = this.imageSetsGhosts[this.currentSet];

	/* this.im = new ItemManager(0, this, 'createImage');
	this.imGhosts = new ItemManager(0, this, 'createGhostImage');
	this.ghostUrl = ghostUrl; */
	this.divPages = divPages;
	this.albumInfo = {};					//** remove
	this.currentImages = new Array();
	this.data = data;
	this.setHighlightOffsets(0, 0);

	if (indicator != null) {
		this.indicator = indicator;
		this.indicator.init();
		this.indicator.setMaxSize(this.pageWidth, this.pageHeight);
		this.indicator.hide();
	}

	this.highlightDiv = document.createElement('div');
	this.highlightDiv.style.position = 'absolute';
	this.highlightDiv.style.border = 'solid ' + data.renderer.highlightThickness + 'px ' + data.renderer.highlightColor;
	this.highlightDiv.style.visibility = 'hidden';
	this.highlightDiv.style.zIndex = 12;
	this.divPages.appendChild(this.highlightDiv);	//** check if it should be appended to this div
	this.selectedDiv = document.createElement('div');
	this.selectedDiv.style.position = 'absolute';
	this.selectedDiv.style.border = 'solid ' + data.renderer.selectedThickness + 'px ' + data.renderer.selectedColor;
	this.selectedDiv.style.visibility = 'hidden';
	this.selectedDiv.style.zIndex = 10;
	this.divPages.appendChild(this.selectedDiv);
//	this.initGhostImage();
}

Renderer.prototype.setHighlightOffsets = function(x, y) {
	this.highlightOffsetX = (x != null ? x : 0);
	this.highlightOffsetY = (y != null ? y : 0);
}

Renderer.prototype.addImageSet = function(setName, ghostUrl) {
	var set = this.baseNameSets + setName;
	if (!this.imageSets[set]) {
		this.imageSets[set] = new ItemManager(0, this, 'createImage');
		this.imageSetsGhosts[set] = new ItemManager(0, this, 'createGhostImage');
		this.ghostsData.ghostPageImagesIds[set] = 0;
		this.ghostsData.firstFreeGhostImage[set] = 0;
		this.ghostsData.ghostUrl[set] = ghostUrl;
	}
}

Renderer.prototype.removeImageSet = function(setName) {
	var set = this.baseNameSets + setName;

	// Remove the set and all corresponding DOM elements
	if (this.imageSets[set]) {
		var items = this.imageSets[set].getItems();
		for (var i = 0; i < items.length; i++) {
			var img = items[i].item.img;
			this.hideImage(img);
			img.parentNode.removeChild(img);
		}
		this.imageSets[set].freeAllItems();
		delete this.imageSets[set];
	}
	
	// Remove corresponding ghost images and their related data
	if (this.imageSetsGhosts[set]) {
		var items = this.imageSetsGhosts[set].getItems();
		for (var i = 0; i < items.length; i++) {
			var img = items[i].item.img;
			this.hideImage(img);
			img.parentNode.removeChild(img);
		}
		this.imageSetsGhosts[set].freeAllItems();
		delete this.imageSetsGhosts[set];
		delete this.ghostsData.ghostPageImagesIds[set];
		delete this.ghostsData.firstFreeGhostImage[set];
		delete this.ghostsData.ghostUrl[set];
	}	
}

Renderer.prototype.setCurrentImageSet = function(currentSetName, pageWidth, pageHeight) {
	if (currentSetName == null)
		currentSetName = '';

	this.currentSetName = currentSetName;
	this.currentSet = this.baseNameSets + this.currentSetName;

	this.im = this.imageSets[this.currentSet];
	this.imGhosts = this.imageSetsGhosts[this.currentSet];

	this.pageWidth = pageWidth;
	this.pageHeight = pageHeight;
}

// Returns the internal id of the generated image
Renderer.prototype.addPage = function(id) {
	if (id == null)
		idi = this.pageImagesIds++;
	else
		idi = id;
	var img = this.im.getItem(idi).item.img;
	img.style.position = 'absolute';

	return (id == null ? this.pageImagesIds - 1 : id);
}

Renderer.prototype.pageExists = function(imgId) {
	return this.im.itemExists(imgId);
}

Renderer.prototype.removePage = function(imgId) {
	//dbg.add('Renderer.removePage() - imgId: ' + imgId);
	/* var img = this.im.getItem(imgId).item.img;
	this.hideImage(img); */
	//** the destruction of the image should be replaced by one call to this.im.recycleItem(imgId);
	/* this.im.freeItem(imgId);
	img.parentNode.removeChild(img); */

	for (var i in this.imageSets) {
		if (typeof this.imageSets[i] == 'function')
			continue;

		if (this.imageSets[i].itemExists(imgId)) {
//			console.log('removing image ' + imgId + ' from set ' + i)
			var img = this.imageSets[i].getItem(imgId).item.img;
			this.hideImage(img);
			this.imageSets[i].freeItem(imgId);
			img.parentNode.removeChild(img);
		}
	}
}

Renderer.prototype.showPagePair = function(idEven, idOdd, isPano) {
	// Hide all visible images, and clear the list
	for (var i = 0; i < this.currentImages.length; i++) {
		this.hideImage(this.currentImages[i]);
	}

	this.hideGhostPageImages();

	if (this.indicator != null) {
		if (isPano)
			this.indicator.setMaxSize(this.pageWidth * 2, this.pageHeight);
		else
			this.indicator.setMaxSize(this.pageWidth, this.pageHeight);
	}

	var imgEven, imgOdd;
	if (idEven == -1) imgEven = this.getGhostPageImage();
	else if (idEven != null) imgEven = this.im.getItem(idEven).item.img;
	if (idOdd == -1) imgOdd = this.getGhostPageImage();
	else if (idOdd != null) imgOdd = this.im.getItem(idOdd).item.img;

	this.currentImages = new Array();

	if (imgEven) {
		imgEven.style.position = 'absolute';
		imgEven.style.display = 'block';
		imgEven.style.width 	= (isPano ? this.data.album['pixelWidth' + this.currentSetName] * 2 : this.data.album['pixelWidth' + this.currentSetName]) + 'px';
		imgEven.style.height	= this.data.album['pixelHeight' + this.currentSetName] + 'px';
		imgEven.style.top = this.data.renderer.pairsY + 'px';
		imgEven.style.left = this.data.renderer.pairsX + 'px';
		imgEven.style.border = this.data.renderer.imageBorderThickness + "px " + data.renderer.imageBorderColor + " solid";
		this.currentImages.push(imgEven);
	}
	if (imgOdd) {
		imgOdd.style.position  = 'absolute';
		imgOdd.style.display = 'block';
		imgOdd.style.width 	= this.data.album['pixelWidth' + this.currentSetName] + 'px';
		imgOdd.style.height	= this.data.album['pixelHeight' + this.currentSetName] + 'px';
		imgOdd.style.top = this.data.renderer.pairsY + 'px';
		imgOdd.style.left = (this.data.renderer.pairsX + this.pageWidth) + 'px';
		imgOdd.style.border = this.data.renderer.imageBorderThickness + "px " + data.renderer.imageBorderColor + " solid";
		this.currentImages.push(imgOdd);
	}

	//dbg.add('Renderer.showPagePair() - imgEven.id: ' + (imgEven ? imgEven.id : null) + ' - imgOdd.id: ' + (imgOdd ? imgOdd.id : null) + ' params: idEven: ' + idEven + ' - idOdd: ' + idOdd);
}

Renderer.prototype.updatePage = function(imgId, src, timestamp) {
	var img = this.im.getItem(imgId).item.img;
	if (timestamp)
		this.im.updateItem(imgId, { img: img, timestamp: timestamp });
	var oTmp = new Object();
	oTmp.ObjTo 	= img;
	oTmp.sSrc 	=  src;
	oImageLauncher.execAdd(oTmp);
}

/* Renderer.prototype.clearPageFromNonCurrentSets = function(imgId) {
	console.log('Renderer.clearPageFromNonCurrentSets(): - imageId: ' + imgId);
	for (var i in this.imageSets) {
		if (typeof this.imageSets[i] == 'function' || this.imageSets[i] == this.im)
			continue;

		if (this.imageSets[i].itemExists(imgId)) {
			console.log('Renderer.clearPageFromNonCurrentSets(): - clearing src from image ' + imgId + ', from set ' + i)
			var img = this.imageSets[i].getItem(imgId).item.img;
			img.src = '';
		}
	}
} */

Renderer.prototype.getPageTimestamp = function(imgId) {
	if (this.pageExists(imgId))
		return this.im.getItem(imgId).item.timestamp;
}

Renderer.prototype.getPageSrc = function(imgId) {
	var img = this.im.getItem(imgId).item.img;
	return img.src;
}

Renderer.prototype.showPagePairToSlideShow = function(idEven, idOdd, isPano, currentPages) {
	// Hide all visible images, and clear the list
	for (var i = 0; i < this.currentImages.length; i++) {
		this.hideImage(this.currentImages[i]);
	}
	this.hideGhostPageImages();

	this.data.renderer.pairsY = 0; //HACK!

	if (this.indicator != null) {
		if (isPano)
			this.indicator.setMaxSize(this.pageWidth * 2, this.pageHeight);
		else
			this.indicator.setMaxSize(this.pageWidth, this.pageHeight);
	}

	var imgEven, imgOdd;
	if (idEven == -1) imgEven = this.getGhostPageImage();
	else if (idEven != null) imgEven = this.im.getItem(idEven).item.img;
	if (idOdd == -1) imgOdd = this.getGhostPageImage();
	else if (idOdd != null) imgOdd = this.im.getItem(idOdd).item.img;

	this.currentImages = new Array();


	lblPagesOffsetHeight = '20';

	if (imgEven) {
		imgEven.style.display = 'block';
		imgEven.style.width 	= (isPano ? this.data.album.pixelWidth * 2 : this.data.album.pixelWidth) + 'px';
		imgEven.style.height	= this.data.album.pixelHeight + 'px';
		imgEven.style.top 	= '0px';//(this.data.renderer.pairsY + lblPagesOffsetHeight) + 'px';
		imgEven.style.left 	= this.data.renderer.pairsX + 'px';
		imgEven.style.border = this.data.renderer.imageBorderThickness + "px " + data.renderer.imageBorderColorSlideshow + " solid";
		this.currentImages.push(imgEven);
	}
	if (imgOdd) {
		imgOdd.style.display = 'block';
		imgOdd.style.width 	= this.data.album.pixelWidth + 'px';
		imgOdd.style.height	= this.data.album.pixelHeight + 'px';
		imgOdd.style.top = '0px';//(this.data.renderer.pairsY + lblPagesOffsetHeight) + 'px';
		imgOdd.style.left = (this.data.renderer.pairsX + this.pageWidth) + 'px';
		imgOdd.style.border = this.data.renderer.imageBorderThickness + "px " + data.renderer.imageBorderColorSlideshow + " solid";
		this.currentImages.push(imgOdd);
	}


	this.lblPageEven = document.getElementById('lblPageEven');
	/* this.lblPageEven.style.position = 'absolute';
	this.lblPageEven.style.width = this.data.album.pixelWidth + 'px';
	this.lblPageEven.style.height = lblPagesOffsetHeight + 'px';
	this.lblPageEven.style.top = '0px';
	this.lblPageEven.style.left = imgEven.offsetLeft + 'px'; */
	this.lblPageEven.style.textAlign = 'center';
	this.lblPageEven.style.lineHeight = '32px';
	this.lblPageEven.style.verticalAlign = 'bottom';
	this.lblPageEven.innerHTML = ((currentPages.even > 0 && currentPages.even <= currentPages.totalPages) ?  'Page ' + currentPages.even : '');

	this.lblPageOdd = document.getElementById('lblPageOdd');
	/* this.lblPageOdd.style.position = 'absolute';
	this.lblPageOdd.style.width = this.data.album.pixelWidth + 'px';
	this.lblPageOdd.style.height = lblPagesOffsetHeight + 'px';
	this.lblPageOdd.style.top = '0px';
	this.lblPageOdd.style.left = (isPano ? (imgEven.offsetWidth/2) : imgOdd.offsetLeft) + 'px'; */
	this.lblPageOdd.style.textAlign = 'center';
	this.lblPageOdd.style.lineHeight = '32px';
	this.lblPageOdd.style.verticalAlign = 'bottom';
	this.lblPageOdd.innerHTML = ((currentPages.odd > 0 && currentPages.odd <= currentPages.totalPages) ? 'Page ' + currentPages.odd : '');

}

/* Renderer.prototype.setGhostPageImage = function(img, src) {
//	var img = this.getGhostPageImage();	//this.getGhostPageImageForPair();
	var oTmp = new Object();
	oTmp.ObjTo 	= img;
	oTmp.sSrc 	=  src;
	oImageLauncher.execAdd(oTmp);
	dbg.add('Renderer.setGhostPageImage(): ' + img.src);
} */

Renderer.prototype.hideImage = function(img) {
	img.style.display = 'none';
	//img.style.top = (-1000) + 'px';
}

Renderer.prototype.getImage = function(imgId) {
	return this.im.getItem(imgId).item.img;
}

Renderer.prototype.getGhostPageImage = function() {
	var img = this.imGhosts.getItem(this.ghostsData.firstFreeGhostImage[this.currentSet]).item.img;
	this.ghostsData.firstFreeGhostImage[this.currentSet]++;
	return img;
}

Renderer.prototype.hideGhostPageImages = function() {
	var img;
	for (var i = 0; i < this.ghostsData.firstFreeGhostImage[this.currentSet]; i++) {
		img = this.imGhosts.getItem(i).item.img;
		//dbg.add('Renderer.hideGhostPageImages() - ghost image id: ' + img.id);
		this.hideImage(img);
	}
	this.ghostsData.firstFreeGhostImage[this.currentSet] = 0;
}

Renderer.prototype.cloneImage = function(imgId) {
	if (!this.im.itemExists(imgId))
		return null;
	
	var img = this.im.getItem(imgId).item.img.cloneNode(false);
	img.id = '';
	return img;
}

Renderer.prototype.cloneGhostImage = function() {
	var img = this.createGhostImage().img;
	this.divPages.removeChild(img);
	img.id = '';

	return img;
}

Renderer.prototype.showStoryboard = function(oContainer, aPagesPairs) {
	// Hide all visible images, and clear the list (needed now that there can be multiple image sets)
	for (var i = 0; i < this.currentImages.length; i++) {
		this.hideImage(this.currentImages[i]);
	}

	this.hideGhostPageImages();
	this.oContainer = oContainer;

	var iMarginLeft = 0; var iMarginInPairs = 10;
	var iImgInRow = 0; var iPairsInRow = 0;
	this.ImgPrev = null;

//	while (document.getElementsByName('divPageNumber').length>0) {  document.getElementsByName('divPageNumber')[0].parentNode.removeChild(document.getElementsByName('divPageNumber')[0]) }

	var nodes = document.getElementsByName('divPageNumber');
	while (nodes.length > 0) {
		nodes[0].parentNode.removeChild(nodes[0]);
	}

	for(var i = 0; i<aPagesPairs.length;i++){
		var pair = aPagesPairs[i];
		var isPano = pair.even.isPano();

		if (pair.even) {
			iPageNumberEven = pair.even.getPageNumber();
			if (isPano) { iPageNumberEven = (pair.even.getPageNumber()) + ' - ' + (pair.even.getPageNumber() + 1); }
			if (pair.even.isGhostPage() == true) { imgEven = this.getGhostPageImage(); }
			else { imgEven = this.im.getItem(pair.even.getUserData().id).item.img; }
			this.currentImages.push(imgEven);
		}

		if (pair.odd) {
			iPageNumberOdd = pair.odd.getPageNumber();
			if (pair.odd.isGhostPage() == true) {  imgOdd = this.getGhostPageImage(); }
			else { imgOdd = this.im.getItem(pair.odd.getUserData().id).item.img; }
			this.currentImages.push(imgOdd);
		}

		if (i==0) {
			iImgWidth 	= parseInt(((isPano ? this.data.album.pixelWidth * 2 : this.data.album.pixelWidth) * data.album.storyBoardPixelScaleFactor), 10);
			iImgHeight 	= parseInt((this.data.album.pixelHeight * data.album.storyBoardPixelScaleFactor), 10);
			iPairsWidth 	= (iImgWidth*2) + (iMarginInPairs*2);
			iMarginLeft 	= parseInt(((oContainer.offsetWidth%iPairsWidth)/2), 10);
			iPairsInRow	= parseInt((oContainer.offsetWidth/iPairsWidth), 0);
			this.ImgPrev 	= null;
			if (this.indicator != null) {
				this.indicator.setMaxSize(iImgWidth, iImgHeight);
			}
		}

		if ((i % iPairsInRow)==0 && (i!=0)) { iImgInRow = 0; } //Change Row

		iImgWidth = parseInt(((isPano ? this.data.album.pixelWidth * 2 : this.data.album.pixelWidth) * data.album.storyBoardPixelScaleFactor), 10);

		aPosition = this.renderImgToStoryboard(imgEven, iImgWidth, iImgHeight, iMarginLeft, iMarginInPairs, iImgInRow, iPairsInRow, iPageNumberEven);
		if (pair.even.userData == null) { pair.even.userData = new Object(); }
		pair.even.userData.offsetLeft 	= aPosition.offsetLeft;
		pair.even.userData.offsetTop 	= aPosition.offsetTop;
		pair.even.userData.offsetWidth 	= iImgWidth;
		pair.even.userData.offsetHeight	= iImgHeight;
		iImgInRow++;

		if (!isPano) {
			aPosition = this.renderImgToStoryboard(imgOdd, iImgWidth, iImgHeight, iMarginLeft, iMarginInPairs, iImgInRow, iPairsInRow, iPageNumberOdd);
			if (pair.odd.userData == null) { pair.odd.userData = new Object(); }
			pair.odd.userData.offsetLeft 	= aPosition.offsetLeft;
			pair.odd.userData.offsetTop 	= aPosition.offsetTop;
			pair.odd.userData.offsetWidth 	= iImgWidth;
			pair.odd.userData.offsetHeight 	= iImgHeight;
		}
		iImgInRow++;
	}

	this.ImgPrev = null;
}

Renderer.prototype.renderImgToStoryboard = function(ImgTmp, iImgWidth, iImgHeight, iMarginLeft, iMarginInPairs, iImgInRow, iPairsInRow, iPageNumber) {
	var iLeft = 0; var iTop = 0;
	ImgTmp.style.display 	= 'block';
	ImgTmp.style.position 	= 'absolute';
	ImgTmp.style.width 	= (iImgWidth) + 'px';
	ImgTmp.style.height 	= (iImgHeight) + 'px';
	ImgTmp.style.border = this.data.renderer.imageBorderThickness + "px " + this.data.renderer.imageBorderColor + " solid";

	if (this.ImgPrev==null && iImgInRow == 0){ //First Row
		iTop = iMarginInPairs;
	}
	else if (this.ImgPrev!=null && iImgInRow == 0){ //Change Row
		iTop = this.ImgPrev.offsetTop + this.ImgPrev.offsetHeight + iMarginInPairs;
	}
	else {

		iTop = this.ImgPrev.offsetTop - this.divPageNumber.offsetHeight;
	}

	if (this.ImgPrev==null || iImgInRow == 0){ //First Column
		iLeft = iMarginLeft;
	}
	else {
		iLeft = this.ImgPrev.offsetLeft + this.ImgPrev.offsetWidth;
	}

	if ((iImgInRow%2)==0){ iLeft+= iMarginInPairs; }


	this.divPageNumber = document.createElement('div');
	this.oContainer.appendChild(this.divPageNumber);
	this.divPageNumber.setAttribute('name', 'divPageNumber');
	this.divPageNumber.name = 'divPageNumber';
	this.divPageNumber.id = 'divPageNumber';
	this.divPageNumber.style.position = 'absolute';
	this.divPageNumber.style.left = iLeft + 'px';
	this.divPageNumber.style.top = iTop + 'px';
	this.divPageNumber.style.fontSize = '10px';
	this.divPageNumber.style.width = iImgWidth + 'px';
	//this.divPageNumber.style.border = '1px red solid';
	this.divPageNumber.innerHTML = 'Page ' + iPageNumber;
	iTop = iTop + this.divPageNumber.offsetHeight;

	if ((iLeft != ImgTmp.offsetLeft) || (iTop != ImgTmp.offsetTop) ){
		ImgTmp.style.left	= iLeft + 'px';
		ImgTmp.style.top	= iTop + 'px';
	} //else { dbg.add("No ReRender!"); }
	this.ImgPrev = ImgTmp;
	return { offsetLeft: iLeft,  offsetTop: iTop };
}

Renderer.prototype.showPageThumbnailView = function(oContainer, aPagesPairs, printStoryBoard) {
	this.hideGhostPageImages();
	this.oContainer = oContainer;

	this.PageThumbnailTable = document.createElement('table');
	this.oContainer.appendChild(this.PageThumbnailTable);
	this.PageThumbnailTable.id = 'tblPageThumbnail';
	this.PageThumbnailTable.border = 0;

	this.PageThumbnailTBody = document.createElement('tbody');
	this.PageThumbnailTable.appendChild(this.PageThumbnailTBody);

	var iMarginLeft = 0; var iMarginInPairs = 10;
	var iPairsInRow = 0;

	for(var i = 0; i<aPagesPairs.length;i++){

		var pair = aPagesPairs[i];
		var isPano = pair.even.isPano();

		if (pair.even) {
			iPageNumberEven = pair.even.getPageNumber();
			if (isPano) { iPageNumberEven = (pair.even.getPageNumber()) + ' - ' + (pair.even.getPageNumber() + 1); }
			if (pair.even.isGhostPage() == true) { imgEven = this.getGhostPageImage(); }
			else { imgEven = this.im.getItem(pair.even.getUserData().id).item.img; }
			this.currentImages.push(imgEven);
		}

		if (pair.odd) {
			iPageNumberOdd = pair.odd.getPageNumber();
			if (pair.odd.isGhostPage() == true) {  imgOdd = this.getGhostPageImage(); }
			else { imgOdd = this.im.getItem(pair.odd.getUserData().id).item.img; }
			this.currentImages.push(imgOdd);
		}

		if (i==0) {
			iImgWidth 	= parseInt(((isPano ? this.data.album.pixelWidth * 2 : this.data.album.pixelWidth) * data.album.storyBoardPixelScaleFactor), 10);
			iImgHeight 	= parseInt((this.data.album.pixelHeight * data.album.storyBoardPixelScaleFactor), 10);
			iPairsWidth 	= (iImgWidth*2) + (iMarginInPairs*2);
			iMarginLeft 	= parseInt(((oContainer.offsetWidth%iPairsWidth)/2), 10);
			iPairsInRow	= 2; //parseInt((oContainer.offsetWidth/iPairsWidth), 0);
		}

		if ((i % iPairsInRow)==0) { //Change Row
			this.PageThumbnailTr= document.createElement('tr');
			this.PageThumbnailTBody.appendChild(this.PageThumbnailTr);
		}

		iImgWidth = parseInt(((isPano ? this.data.album.pixelWidth * 2 : this.data.album.pixelWidth) * data.album.storyBoardPixelScaleFactor), 10);

		templateId = null;
		if (imgEven.userData != null) { templateId = imgEven.userData.templateId; }
		this.renderImgToPageThumbnailView(imgEven, iImgWidth, iImgHeight, iMarginLeft, iPageNumberEven, templateId, isPano, false, printStoryBoard);
		if (pair.even.userData == null) { pair.even.userData = new Object(); }

		if (!isPano) {
			templateId = null;
			if (imgOdd.userData != null) { templateId = imgOdd.userData.templateId; }
			this.renderImgToPageThumbnailView(imgOdd, iImgWidth, iImgHeight, iMarginLeft, iPageNumberOdd, templateId, isPano, true, printStoryBoard);
			if (pair.odd.userData == null) { pair.odd.userData = new Object(); }
		}
	}

	//this.oContainer.innerHTML = this.oContainer.innerHTML;
}

Renderer.prototype.renderImgToPageThumbnailView  = function(ImgTmp, iImgWidth, iImgHeight, iMarginLeft, iPageNumber, templateId, isPano, isOdd, printStoryBoard) {
	this.PageThumbnailTd = document.createElement('td');
	this.PageThumbnailTr.appendChild(this.PageThumbnailTd);
	this.PageThumbnailTd.width = 100;


	if (isPano) {
		this.PageThumbnailTd.colSpan = "2";
	}

	if (printStoryBoard == true) { ImgTmp = ImgTmp.cloneNode(false); }


	oTable = document.createElement('table');
	this.PageThumbnailTd.appendChild(oTable);
	oTable.border = 0;
	oTable.style.width = iImgWidth + 'px';

	oTBody = document.createElement('tbody');
	oTable.appendChild(oTBody);

	//ImgTmp.parentNode.removeChild(ImgTmp);

	oRow = document.createElement('tr');
	oTBody.appendChild(oRow);

	oCell = document.createElement('td');
	oRow.appendChild(oCell);
	oCell.style.height = '10px';
	oCell.style.textAlign = 'left';
	oCell.innerHTML = 'Page ' + iPageNumber;

	/*if (templateId != null && trim(templateId) != 'undefined') {
		oCell = document.createElement('td');
		oRow.appendChild(oCell);
		oCell.style.textAlign = 'left';
		oCell.innerHTML = 'Mat ID: ' + templateId ;


	}
	*/

	oRow = document.createElement('tr');
	oTBody.appendChild(oRow);

	oCell = document.createElement('td');
	oRow.appendChild(oCell);

	oCell.appendChild(ImgTmp);
	oCell.colSpan = "2";

	oCell.onmouseover=function(e)
	{
	oToolTip1= new ToolTip('oToolTip1',null, this.caption,this)
	if (!e) e = normalizeEvent(window.event);
	var caption 		= '';
	var fInterval		= null;
	var iSecons		= 0;
	var visible 		= false;


          if (templateId != null && trim(templateId) != 'undefined')
           {
	      var stmp  = 'Mat ID: ' + templateId;
	      window.clearInterval(this.fInterval); this.fInterval = null; this.iSecons = 0;
   	      var caption = stmp;

	      var x =getOffsetLeft(ImgTmp);
	      var y = getOffsetTop(ImgTmp);
	      //var x =e.clientX+10;
	      //var y = e.clientY+15;
	      function setInterval2()
	       {
		  iSecons++;
	   	  if (iSecons == 1)
		  {
			  oToolTip1.setCaption(caption);
			  oToolTip1.setPosition(x, y);
			  oToolTip1.show();
			  window.clearInterval(this.fInterval); this.fInterval = null; this.iSecons = 0;
		  }

	}

	setInterval2();
	   }
    }

	oCell.onmouseout=function() {
        window.clearInterval(this.fInterval); this.fInterval = null; this.iSecons = 0;
	oToolTip1.hidden();
	visisble=false;
	oToolTip1.html.div.onmousemove=null;

	}

	ImgTmp.style.display 	= 'inline';
	ImgTmp.style.position 	= '';
	ImgTmp.style.width 	= (iImgWidth) + 'px';
	ImgTmp.style.height 	= (iImgHeight) + 'px';
	ImgTmp.style.top = '0px'; ImgTmp.style.left = '0px';

	if (isPano == true || isOdd == true) {
		this.PageThumbnailTd = document.createElement('td');
		this.PageThumbnailTr.appendChild(this.PageThumbnailTd);
		this.PageThumbnailTd.style.paddingRight = '10px';
	}

}

Renderer.prototype.setHighlightArea = function(areaData) {
	if (!areaData) return;

	//dbg.add('Renderer.setHighlightArea() - x: ' + areaData.x + ', y: ' + areaData.y + ', w: ' + areaData.w + ', h: ' + areaData.h);
	this.highlightDiv.style.visibility = 'visible';
	this.highlightDiv.style.borderColor = this.data.renderer.highlightColor;
	this.highlightDiv.style.width = areaData.w + 'px';
	this.highlightDiv.style.height = areaData.h + 'px';
	this.highlightDiv.style.left = (areaData.x - this.data.renderer.highlightThickness + this.highlightOffsetX) + 'px';
	this.highlightDiv.style.top = (areaData.y - this.data.renderer.highlightThickness + this.highlightOffsetY) + 'px';
}

Renderer.prototype.unsetHighlightArea = function() {
	this.highlightDiv.style.visibility = 'hidden';
}

Renderer.prototype.setSelectedArea = function(areaData) {
	if (!areaData) return;

//	dbg.add('Renderer.setSelectedArea() - x: ' + areaData.x + ', y: ' + areaData.y + ', w: ' + areaData.w + ', h: ' + areaData.h);
	this.highlightDiv.style.borderColor =  this.data.renderer.selectedColor;
	this.selectedDiv.style.visibility = 'visible';
	this.selectedDiv.style.width = areaData.w + 'px';
	this.selectedDiv.style.height = areaData.h + 'px';
	this.selectedDiv.style.left = (areaData.x - this.data.renderer.highlightThickness + this.highlightOffsetX) + 'px';
	this.selectedDiv.style.top = (areaData.y - this.data.renderer.highlightThickness + this.highlightOffsetY) + 'px';
}

Renderer.prototype.unsetSelectedArea = function() {
	//dbg.add('SensibleAreasManager.unsetSelectedArea()');
	this.selectedDiv.style.visibility = 'hidden';
}

Renderer.prototype.showInsertIndicator = function(x, y) {
	this.indicator.setAsInsert();
	this.indicator.moveTo(x, y);
	this.indicator.show();
}

Renderer.prototype.hideIndicators = function() {
	this.indicator.hide();
}

Renderer.prototype.showReplaceIndicator = function(x, y) {
	this.indicator.setAsReplace();
	this.indicator.moveTo(x, y);
	this.indicator.show();
}


Renderer.prototype.setMaxSizeIndicator = function(x, y) {
	this.indicator.setMaxSize(x, y);
}

Renderer.prototype.hideIndicator = function() {
	this.indicator.hide();
}

Renderer.prototype.runAutoScroll = function(divContainer, oDrag) {
	if (this.oAutoScrollDiv == null) {
		this.oAutoScrollDiv 			= new AutoScrollDiv();
		this.oAutoScrollDiv.divContainer 	= divContainer;
		this.oAutoScrollDiv.absoluteHeight	= this.oAutoScrollDiv.divContainer.scrollHeight;
		this.oAutoScrollDiv.absoluteWidth	= this.oAutoScrollDiv.divContainer.scrollWidth;

	}
	this.oAutoScrollDiv.runAutoScroll(oDrag);
}

Renderer.prototype.clearAutoScroll = function() {
	if (this.oAutoScrollDiv == null) { return; }
	this.oAutoScrollDiv.clearAutoScroll();
	this.oAutoScrollDiv = null;
}

Renderer.prototype.createImage = function() {
	var newPic = document.createElement('img');
	newPic.id = this.baseName + this.imageCounter++;
	this.divPages.appendChild(newPic);
	newPic.style.border = this.data.renderer.imageBorderThickness + "px " + data.renderer.imageBorderColor + " solid";
	return { img: newPic };
}

/* Renderer.prototype.createGhostImage = function() {
	var ghost = this.ghostPageImage.cloneNode(false);
	ghost.id = this.baseNameGhosts + this.ghostPageImagesIds++;
	this.divPages.appendChild(ghost);
	ghost.style.display = 'block';
	ghost.style.position = 'absolute';
	ghost.style.border = this.data.renderer.imageBorderThickness + "px white solid";
	return { img: ghost };
}

Renderer.prototype.initGhostImage = function() {
	this.ghostPageImage = this.createImage().img;
	//this.setGhostPageImage(this.ghostPageImage, this.ghostUrl);
	this.ghostPageImage.src = this.ghostUrl;
	this.ghostPageImage.id = this.baseNameGhosts + this.ghostPageImagesIds++;
	this.ghostPageImage.style.position = 'absolute';
	this.ghostPageImage.style.border="1px white solid";
	this.ghostPageImage.style.display = 'none';
} */

//** Look ma, no init()
Renderer.prototype.createGhostImage = function() {
	var ghost = this.createImage().img;
//	ghost.id = this.baseNameGhosts + this.ghostPageImagesIds++;
	ghost.id = this.baseNameGhosts + this.currentSet + this.ghostsData.ghostPageImagesIds[this.currentSet]++;
	ghost.src = this.ghostsData.ghostUrl[this.currentSet];
	this.divPages.appendChild(ghost);
	ghost.style.display = 'block';
	ghost.style.position = 'absolute';
	ghost.style.border = this.data.renderer.imageBorderThickness + "px white solid";
	return { img: ghost };
}



Indicator = new Object();

Indicator.init = function () {
	Indicator.html = new Object();
	Indicator.html.container = document.getElementById('insertionArrows');
	Indicator.html.arrowTop = document.getElementById('insertionArrowTop');
	Indicator.html.arrowBottom = document.getElementById('insertionArrowBottom');
	Indicator.html.shaft = document.getElementById('insertionArrowShaft');
	Indicator.html.container.style.zIndex = 11;
	Indicator.maxWidth = 16;
	Indicator.maxHeight = 250;
	Indicator.opacity = 35;
}

Indicator.setMaxSize = function(w, h) {
	if (w != null) this.maxWidth = w;
	if (h != null) this.maxHeight = h;
}

Indicator.setOpacity = function(opacity) {
	this.opacity = opacity;
}

Indicator.setAsInsert = function() {
	this.html.container.style.width = 16 + 'px';
	this.html.container.style.height = (this.maxHeight + 16) + 'px';
	this.html.arrowTop.style.left = this.html.arrowBottom.style.left = '0px';
	this.html.arrowBottom.style.bottom = '0px';
	this.html.shaft.style.width = '4px';
	this.html.shaft.style.height = this.html.container.offsetHeight + 'px';
	this.html.shaft.style.top = '0px';
	this.html.shaft.style.left = (Math.round((this.html.container.offsetWidth - this.html.shaft.offsetWidth) / 2)) + 'px';
	setOpacity(this.html.shaft, 100);
}

Indicator.setAsReplace = function() {
	this.html.container.style.width = this.maxWidth + 'px';
	this.html.container.style.height = (this.maxHeight + 16) + 'px';
	this.html.arrowTop.style.left = this.html.arrowBottom.style.left = (Math.round((this.maxWidth - 16) / 2)) + 'px';
	this.html.arrowBottom.style.bottom = '0px';
	this.html.shaft.style.width = this.maxWidth + 'px';
	this.html.shaft.style.height = this.maxHeight + 'px';
	this.html.shaft.style.top = '8px';
	this.html.shaft.style.left = (Math.round(this.html.container.offsetWidth - this.html.shaft.offsetWidth) / 2) + 'px';
	setOpacity(this.html.shaft, this.opacity);
}

Indicator.moveTo = function(x, y) {
	if (x != null) this.html.container.style.left = (x - Math.round(this.html.container.offsetWidth / 2)) + 'px';
	if (y != null) this.html.container.style.top = (y - 8) + 'px';
}

Indicator.hide = function() {
	this.html.container.style.display = 'none';
}

Indicator.show = function() {
	this.html.container.style.display = 'block';
}

AutoScrollDiv = function(){
	this.divContainer 	= null;
	this.fInterval		= null;
	this.bAutoScroll	= false;
	this.sDirection		= '';
	this.iIncrement		= 0;
	this.iInterval		= 1;
	this.iMargin		= 10;
	this.absoluteHeight	= 0;
	this.absoluteWidth	= 0;
	this.iSecons		= 0;
}

AutoScrollDiv.prototype.runAutoScroll = function(oDrag) {
	if (this.divContainer == null) { return; }

	var iDivContainerBottom = (this.divContainer.offsetTop + this.divContainer.offsetHeight);
	var iDivContainerTop 	= (this.divContainer.offsetTop);
	var iDivContainerLeft 	= (this.divContainer.offsetLeft);
	var iDivContainerRight 	= (this.divContainer.offsetLeft + this.divContainer.offsetWidth);

	//Bottom
	if ((oDrag.offsetTop + oDrag.offsetHeight - this.divContainer.scrollTop) > (iDivContainerBottom)) {
		if ((this.divContainer.offsetHeight + this.divContainer.scrollTop) >= this.absoluteHeight) { this.clearAutoScroll(); return; }
		if (this.bAutoScroll == false) {
			this.iSecons 		= 0;
			this.bAutoScroll 	= true;
			this.sDirection		= 'V';
			this.iIncrement		= 10;
			this.setAutoScroll();
		}
		return;
	}
	//Top
	if ((oDrag.offsetTop - this.divContainer.scrollTop) <= (iDivContainerTop)) {
		if (this.divContainer.scrollTop <= 0) { this.clearAutoScroll(); return; }
		if (this.bAutoScroll == false) {
			this.iSecons 		= 0;
			this.bAutoScroll 	= true;
			this.sDirection		= 'V';
			this.iIncrement		= -10;
			this.setAutoScroll();
		}
		return;
	}
	this.clearAutoScroll();
}

AutoScrollDiv.prototype.clearAutoScroll = function() {
	window.clearInterval(this.fInterval); this.fInterval = null; this.bAutoScroll = false;
}


AutoScrollDiv.prototype.setAutoScroll = function() {
	this.fInterval 	= window.setInterval("doAutoScroll();", this.iInterval);
}

AutoScrollDiv.prototype.setScroll = function() {
	if (this.bAutoScroll == false) { return; }
	if (this.fInterval == null) { return; }

	if (this.iSecons < 50) { this.iSecons++; return }

	//dbg.add('this.sDirection: ' + this.sDirection);
	switch (this.sDirection) {
		case 'V': this.divContainer.scrollTop = this.divContainer.scrollTop + (this.iIncrement); break;
		case 'H': this.divContainer.scrollLeft = this.divContainer.scrollLeft + (this.iIncrement); break;
	}
}



toolTipOpening = function(name){
	this.name		= name;
	this.fInterval		= null;
	this.iSecons		= 0;
	this.visible 		= false;
	this.userData           = new Object();
	this.fEventHandle       = null;
	this.oToolTip = new ToolTip(this.name + '.oToolTip', null, '', this);
}

toolTipOpening.prototype.init = function(x, y) {
	this.clearInterval();
	this.x = x; this.y = y;


	//alert(Renderer.toolTipOpening.setInterval());
	this.fInterval 	= window.setInterval(this.name+ ".setInterval();", 1000);

}

toolTipOpening.prototype.setInterval = function() {
	this.iSecons++;

	if (this.iSecons == 1) {
		this.show();
		this.clearInterval();
	}
}

toolTipOpening.prototype.clearInterval = function() {
	window.clearInterval(this.fInterval); this.fInterval = null; this.iSecons = 0;
}

toolTipOpening.prototype.show = function() {
	var sCaption = this.oEventHandle[this.fEventHandle](this.userData);
	if (sCaption == '') { return; }
	this.oToolTip.setCaption(sCaption);
	this.oToolTip.setPosition(this.x, this.y);
	this.oToolTip.html.div.style.textAlign = 'left'; //Hack!
	this.oToolTip.show();

	//Hack!
	this.oToolTip.html.div.userData.oToolTipOpening = this.name;
	this.oToolTip.html.div.onmousemove = function(e) { var oTmp = eval(this.userData.oToolTipOpening); oTmp.hidden(e); }

	this.visible = true;
}

toolTipOpening.prototype.hidden = function() {
	//dbg.add('toolTipOpening.prototype.hidden');
	this.clearInterval();
	this.oToolTip.hidden();
	this.visible = false;

	this.oToolTip.html.div.onmousemove = null;
}