strPrev = "Previous Image";
strNext = "Next Image";
strClose = "Close";
strImgOf = "Image %1 of %2";

function preloadImages(ltIE7) {
	if (ltIE7) {
		new Image().src = "/_files/img/common/imgviewer/tl.png";
		new Image().src = "/_files/img/common/imgviewer/tc.png";
		new Image().src = "/_files/img/common/imgviewer/tr.png";
		new Image().src = "/_files/img/common/imgviewer/ml.png";
		new Image().src = "/_files/img/common/imgviewer/mr.png";
		new Image().src = "/_files/img/common/imgviewer/bl.png";
		new Image().src = "/_files/img/common/imgviewer/bc.png";
		new Image().src = "/_files/img/common/imgviewer/br.png";
	}
	else {
		new Image().src = "/_files/img/common/imgviewer/r-corners.png";
		new Image().src = "/_files/img/common/imgviewer/r-horz.png";
		new Image().src = "/_files/img/common/imgviewer/r-vert.png";
	}

	new Image().src = "/_files/img/common/imgviewer/loading.gif";
	new Image().src = "/_files/img/common/imgviewer/prev.png";
	new Image().src = "/_files/img/common/imgviewer/next.png";
	new Image().src = "/_files/img/common/imgviewer/prev_disabled.png";
	new Image().src = "/_files/img/common/imgviewer/next_disabled.png";
	new Image().src = "/_files/img/common/imgviewer/close.png";
}

modalWnd = null;
imgArea = null;
imgLoad = null;
imgMain = null;

function createWnd() {
	modalWnd = document.createElement("div");
	modalWnd.style.visibility = "hidden";
	modalWnd.innerHTML = '<div id="overlay" onclick="hideWnd()"></div>\
		<table cellpadding="0" cellspacing="0" id="wnd">\
		<tr>\
			<td class="tl"></td>\
			<td class="tc"></td>\
			<td class="tr"></td>\
		</tr>\
		<tr>\
			<td class="ml" rowspan="3"></td>\
			<td class="mc">\
				<table cellpadding="0" cellspacing="0" id="imgTable">\
				<tr><td align="center" id="imgArea"></td></tr>\
				</table>\
			</td>\
			<td class="mr" rowspan="3"></td>\
		</tr>\
		<tr><td class="mc" height="10"></td></tr>\
		<tr>\
			<td class="mc" height="40">\
				<table cellpadding="0" cellspacing="0" width="100%" height="100%">\
				<tr>\
					<td><img src="/_files/img/common/imgviewer/prev.png" width="58" height="22" alt="' + strPrev + '" id="btnPrev" onclick="changeImg(false)"><img src="/_files/img/common/imgviewer/next.png" width="58" height="22" alt="' + strNext + '" id="btnNext" onclick="changeImg(true)"></td>\
					<td align="center"><div id="imgNum"></div><div id="imgTitle"></div></td>\
					<td align="right"><img src="/_files/img/common/imgviewer/close.png" width="66" height="22" alt="' + strClose + '" style="cursor: pointer" onclick="hideWnd()"></td>\
				</tr>\
				</table>\
			</td>\
		</tr>\
		<tr>\
			<td class="bl"></td>\
			<td class="bc"></td>\
			<td class="br"></td>\
		</tr>\
		</table>';
	document.body.appendChild(modalWnd);

	imgArea = document.getElementById("imgArea");
	imgLoad = document.createElement("img");
	imgLoad.src = "/_files/img/common/imgviewer/loading.gif";
	imgArea.appendChild(imgLoad);
	imgMain = document.createElement("img");
}

images = null;
titles = null;
index = 0;

function reloadImg() {
	if (images == null || index < 0 || index >= images.length) return;

	if (imgArea.lastChild == imgMain) {
		imgArea.removeChild(imgMain);
		imgArea.appendChild(imgLoad);
	}
	imgMain.onload = function() {
		if (imgArea.lastChild == imgLoad) {
			imgArea.removeChild(imgLoad);
			imgArea.appendChild(imgMain);
		};
	}
	imgMain.src = "";
	imgMain.src = images[index];

	el = document.getElementById("btnPrev");
	if (index > 0) {
		el.src = "/_files/img/common/imgviewer/prev.png";
		el.style.cursor = "pointer";
	}
	else {
		el.src = "/_files/img/common/imgviewer/prev_disabled.png";
		el.style.cursor = "auto";
	}
	el = document.getElementById("btnNext");
	if (index < images.length - 1) {
		el.src = "/_files/img/common/imgviewer/next.png";
		el.style.cursor = "pointer";
	}
	else {
		el.src = "/_files/img/common/imgviewer/next_disabled.png";
		el.style.cursor = "auto";
	}

	el = document.getElementById("imgNum");
	el.innerHTML = strImgOf.replace("%1", index + 1).replace("%2", images.length);

	el = document.getElementById("imgTitle");
	if (titles != null && index >= 0 && index < titles.length) el.innerHTML = titles[index];
	else el.innerHTML = "";
}

function changeImg(next) {
	if (images == null) return;

	if (next) {
		if (index < images.length - 1) {
			index++;
			reloadImg();
		}
	}
	else if (index > 0) {
		index--;
		reloadImg();
	}
}

function getScrollTop() {
	return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
}

function showWnd(width, height, i, imgs, imgtitles) {
	if (modalWnd == null) createWnd();

	el = document.getElementById("wnd");
	el.style.width = width + 20 * 2 + "px";
	el.style.height = height + 20 * 2 + 10 + 40 + "px";
	el.style.marginLeft = -parseInt(el.style.width) / 2 + "px";
	el.style.marginTop = -parseInt(el.style.height) / 2 + getScrollTop() + "px";

	el = document.getElementById("imgTable");
	el.style.width = width + "px";
	el.style.height = height + "px";

	el = document.getElementById("overlay");
	el.style.width = "100%";
	el.style.height = document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + "px";

	modalWnd.style.visibility = "visible";

	keyEvent = function(ev) {
		if (!ev) ev = window.event;
		switch (ev.keyCode) {
			case 32: // space
			case 34: // page down
			case 39: // arrow right
			case 40: // arrow down
				changeImg(true);
				return false;
			case 8:  // backspace
			case 33: // page up
			case 37: // arrow left
			case 38: // arrow up
				changeImg(false);
				return false;
			case 27: // esc
				hideWnd();
				return false;
		}
		return true;
	}
	if (window.opera) document.onkeypress = keyEvent;
	else document.onkeydown = keyEvent;

	if (i != null) index = i;
	if (imgs != null) images = imgs;
	if (imgtitles != null) titles = imgtitles;
	reloadImg();
}

function hideWnd() {
	if (modalWnd == null) return;

	if (window.opera) document.onkeypress = null;
	else document.onkeydown = null;

	modalWnd.style.visibility = "hidden";

	el = document.getElementById("overlay");
	el.style.width = "10px";
	el.style.height = "10px";
}