var nextid;
var previousid;

var preload = new Image();
preload.src='/engine/command/paintings/img/black.jpg';

function showPhoto(id) {
	var pic = pictures[id];
	var box = document.getElementById('IVDiv');
	var fol = document.getElementById('fadeOutLayer');
	var img = document.getElementById('IVImage');
	var availHeight;
	var availWidth;
	var imgPadding = 100;
	var imgMargin = 30;
	var imgBorder = 0;
	/* Using actual picture size to compute box 
	var boxWidth = parseInt(pic.width) + ((imgPadding + imgMargin + imgBorder)*2);
	var boxHeight = parseInt(pic.height) + ((imgPadding + imgMargin + imgBorder)*2) + 140;
	*/
	var boxWidth = 600 + ((imgPadding + imgMargin + imgBorder)*2);
	var boxHeight = 475 + ((imgPadding + imgMargin + imgBorder)*2) + 100;

	if (parseInt(pic.index) + 1 == picOrder.length) {
		nextid = picOrder[0];
	} else {
 		nextid = picOrder[parseInt(pic.index) + 1];
	}
	
	if (pic.index == 0) {
		previousid = picOrder[picOrder.length -1];
	} else {
		previousid = picOrder[pic.index - 1];
	}


	if(typeof(window.innerWidth) == 'number') {
		availHeight = window.innerHeight;
		availWidth = window.innerWidth;
	} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
		availHeight = document.documentElement.clientHeight;
		availWidth = document.documentElement.clientWidth;
	}else if(document.body && (document.body.clientWidth || document.body.clientHeight)){
		availHeight = document.body.clientHeight;
		availWidth = document.body.clientWidth;
	}

	var left = (availWidth/2) - (boxWidth/2);
	var top = (availHeight/2) - (boxHeight/2);
	img.src ='/engine/command/paintings/img/black.jpg';
	img.width = pic.width;
	img.height=pic.height;
	img.src=pic.url;
	document.getElementById('IVTitle').innerHTML= pic.title;
	document.getElementById('IVComments').innerHTML= pic.comments;
	if (pic.url_purchase == '') {
		document.getElementById('IVPurchase').innerHTML=' ';
	} else {
		document.getElementById('IVPurchase').innerHTML='<a href="' + pic.url_purchase + '">Reproductions available online at MyArtChannel.com (Click here)</a><br>&nbsp;';
	}

	var info = pic.mediaName;
	if (parseInt(pic.actualWidth) > 0 && parseInt(pic.actualHeight) > 0) {
		info = info + ', ' + pic.actualWidth + '"x' + pic.actualHeight + '"';
	}
	if (parseInt(pic.framedWidth) > 0 && parseInt(pic.framedHeight) > 0) {
		info = info + ', ' + pic.framedWidth + '"x' + pic.framedHeight + '" framed';
	}
	if (parseInt(pic.sold) == 1) {
		info = info + ', Sold.';
	} else {
		if (parseFloat(pic.price) > 0) {
			info = info + ', CDN$' + pic.price;
		}
	}
	document.getElementById('IVInfo').innerHTML= info;
	document.getElementById('IVControls').width = (parseInt(pic.width) + (imgPadding*2)) + 'px';
	document.getElementById('IVControlTable').width = boxWidth;
	document.getElementById('IVDiv').width = boxWidth + 'px';
	document.getElementById('IVDiv').width = boxWidth + 'px';
	document.getElementById('IVControlMiddle').width = parseInt(pic.width) + 'px';

	var yOffset;
	if (self.pageYOffset) { // all except Explorer
		yOffset = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict{
		yOffset = document.documentElement.scrollTop;
	} else if (document.body && (document.body.scrollTop)) { // all other Explorers
		yOffset = document.body.scrollTop;
	} else {
		yOffset = 0;
	}
	var top = ((availHeight/2)+yOffset) - (boxHeight/2);

	box.style.top=top+"px";
	box.style.left=left+"px";
	box.style.display="block";
	
	fol.style.zIndex = 50;
	
	//document.getElementById('IVControlMiddle').innerHTML='top:' + top + ', availHeight:' + availHeight + ', yOffset:' + yOffset + ', boxHeight:' + boxHeight;

	
}
function closePhoto() {
	document.getElementById('IVDiv').style.display='none';
	document.getElementById('fadeOutLayer').style.zIndex = -1 ;
}
function nextImage() {
	showPhoto(nextid);
}
function previousImage() {
	showPhoto(previousid);
}