// *********************************************************************************************************************** //
// ** 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;
	this.firstFreeGhostImage = 0;
	this.baseName = 'renderer_image_';
	this.baseNameGhosts = 'renderer_ghost_image_';
	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);
}

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

	return (this.pageImagesIds - 1);
}

Renderer.prototype.removePage = function(imgId) {
	dbg.add('Renderer.removePage() - imgId: ' + imgId);
	var img = this.im.getItem(imgId).item;
	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);
}

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;
	if (idOdd == -1) imgOdd = this.getGhostPageImage();
	else if (idOdd != null) imgOdd = this.im.getItem(idOdd).item;

	this.currentImages = new Array();

	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 = this.data.renderer.pairsY + 'px';
		imgEven.style.left = this.data.renderer.pairsX + 'px';
		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 = this.data.renderer.pairsY + 'px';
		imgOdd.style.left = (this.data.renderer.pairsX + this.pageWidth) + 'px';
		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) {
	var img = this.im.getItem(imgId).item;
	var oTmp = new Object();
	oTmp.ObjTo 	= img;
	oTmp.sSrc 	=  src;
	oImageLauncher.execAdd(oTmp);	
}

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;
	if (idOdd == -1) imgOdd = this.getGhostPageImage();
	else if (idOdd != null) imgOdd = this.im.getItem(idOdd).item;

	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 	= (this.data.renderer.pairsY + lblPagesOffsetHeight) + 'px';
		imgEven.style.left 	= this.data.renderer.pairsX + 'px';
		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 = (this.data.renderer.pairsY + lblPagesOffsetHeight) + 'px';
		imgOdd.style.left = (this.data.renderer.pairsX + this.pageWidth) + 'px';
		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.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.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;
}

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

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

Renderer.prototype.showStoryboard = function(oContainer, aPagesPairs) {
	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]) }
	
	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; }
			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; }
			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';

	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; }
			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; }
			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 = 'right';
		oCell.innerHTML = 'Mat ID: ' + templateId + ' &#160;';
	}
	
	
	
	oRow = document.createElement('tr');
	oTBody.appendChild(oRow);
	
	oCell = document.createElement('td');
	oRow.appendChild(oCell);

	oCell.appendChild(ImgTmp);
	oCell.colSpan = "2";
	
	ImgTmp.style.display 	= 'block';
	ImgTmp.style.position 	= 'relative';
	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 white solid";
	return 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 ghost;
}

Renderer.prototype.initGhostImage = function() {
	this.ghostPageImage = this.createImage();
	//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';
}



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;	
	}
}