var mainBlackMaxOpacity = 0.7;
var mainBlackOpacity = 0;
var mainBlackTimerId = 0;

var mainImageWidth = 700;
var mainImageHeight = 726;
var mainImageX = 0;
var mainImageY = 0;
var mainImageObj = new Image();
var mainImagePath;
var mainImageObjOpacity;

var mainImagePartsRows = 2;
var mainImagePartsCols = 2;

var mainImageParts = new Array(mainImagePartsRows * mainImagePartsCols);
var mainImagePartsEl = new Array(mainImagePartsRows * mainImagePartsCols);
var mainImageFadePercent;
var mainImageFadeOffset = 10;
var mainImageMaxPercent = 50 + (mainImagePartsRows * mainImagePartsCols - 1) * mainImageFadeOffset;

var i;

var currentProd = 0;

function MBSetOpacity(op)
{
	var mainBlack = document.getElementById("mainBlack");
	mainBlack.style.opacity = op;
	mainBlack.style.mozOpacity = op;
	mainBlack.style.khtmlOpacity = op;
	mainBlack.style.filter = "alpha(opacity=" + (op * 100) + ")";
}

function startMBFadeIn(path)
{
	mainImagePath = path;
	mainBlackOpacity = 0;
	var mainBlack = document.getElementById("mainBlack");
	MBSetOpacity(0);
	mainBlack.style.display = "block";
	mainBlackTimerId = setTimeout("MBFadeIn()", 50);
}

function startMBFadeIn_ext(path, prod, index)
{
	var mil = document.getElementById('mainImageLeft');
	var mir = document.getElementById('mainImageRight');
	
	currentProd = prod;
	
	if(index > 0)
		mil.style.display = "block";
	if(index < productPhotos[prod].length - 1)
		mir.style.display = "block";
	currentPhoto = index;

	mainImageLeftRightOut(mil);
	mainImageLeftRightOut(mir);
	
	mainImagePath = path;
	mainBlackOpacity = 0;
	var mainBlack = document.getElementById("mainBlack");
	MBSetOpacity(0);
	mainBlack.style.display = "block";
	mainBlackTimerId = setTimeout("MBFadeIn()", 10);
}

function MBFadeIn()
{
	MBSetOpacity(mainBlackOpacity);
	if(mainBlackOpacity < mainBlackMaxOpacity)
	{
		mainBlackOpacity += 0.1;
		mainBlackTimerId = setTimeout("MBFadeIn()", 10);
	}
	else
	{
		startShowMainImage();
	}
}

function MBHide()
{
	var mil = document.getElementById('mainImageLeft');
	var mir = document.getElementById('mainImageRight');

	var mainBlack = document.getElementById("mainBlack");
	var mainImage = document.getElementById("mainImage");
	var mainAction = document.getElementById("mainAction");
	var mio = document.getElementById("mainImageObj");	
	var mao = document.getElementById("mainActionObj");	
	clearTimeout(mainBlackTimerId);
	mainBlack.style.display = "none";
	mainImage.style.display = "none";
	mainAction.style.display = "none";
	mio.src = "./pic/1x1.gif";
	mao.src = null;
	mil.style.display = "none";
	mir.style.display = "none";
}

function showAction(text)
{
	var mainBlack = document.getElementById("mainBlack");
	MBSetOpacity(0.7);
	mainBlack.style.display = "block";
	var mainActionText = document.getElementById("mainActionText");
	var mainActionDiv = document.getElementById("mainActionDiv");
	
	var bx = document.body.scrollLeft;
	var by = document.body.scrollTop;
	var dex = document.documentElement.scrollLeft;
	var dey = document.documentElement.scrollTop;
	var viewportX =  ((bx && dex) == 0)?(bx || dex):Math.max(bx, dex);
	var viewportY =  ((by && dey) == 0)?(by || dey):Math.max(by, dey);
	
	var bw = document.body.clientWidth;
	var bh = document.body.clientHeight;
	var dew = document.documentElement.clientWidth;
	var deh = document.documentElement.clientHeight;
	var viewportW = ((bw && dew) == 0)?(bw || dew):Math.min(bw, dew);
	var viewportH = ((bh && deh) == 0)?(bh || deh):Math.min(bh, deh);
	
	mainActionDiv.style.left = (viewportX + ((viewportW - 500) >> 1)) + "px";
	mainActionDiv.style.top = (viewportY + ((viewportH - mainActionDiv.clientHeight) >> 1)) + "px";
	mainActionText.innerHTML = text;
	mainActionDiv.style.display = "block";
}

function startShowMainImage()
{
	var mi = document.getElementById("mainImage");
	var mips = document.getElementById("mainImagePartSuper");
	
	mips.style.display = "none";
	mips.style.width = mi.style.width = mainImageWidth + "px";
	mips.style.height = mi.style.height = mainImageHeight + "px";
	var bx = document.body.scrollLeft;
	var by = document.body.scrollTop;
	var dex = document.documentElement.scrollLeft;
	var dey = document.documentElement.scrollTop;
	var viewportX =  ((bx && dex) == 0)?(bx || dex):Math.max(bx, dex);
	var viewportY =  ((by && dey) == 0)?(by || dey):Math.max(by, dey);
	
	var bw = document.body.clientWidth;
	var bh = document.body.clientHeight;
	var dew = document.documentElement.clientWidth;
	var deh = document.documentElement.clientHeight;
	var viewportW = ((bw && dew) == 0)?(bw || dew):Math.min(bw, dew);
	var viewportH = ((bh && deh) == 0)?(bh || deh):Math.min(bh, deh);
	
//	alert(bw + "," + bh + "," + dew + "," + deh + "," + viewportW + "," + viewportH + "," + (bh && deh)) ;
	mi.style.top = viewportY + ((viewportH - mainImageHeight) >> 1) + "px";
	mi.style.left = viewportX + ((viewportW - mainImageWidth) >> 1) + "px";
	
	mi.style.display = "block";
	resetMainImageParts();
	setTimeout("mainImageFadeIn()", 30);
}

function changeImage(dir)
{
	var mil = document.getElementById('mainImageLeft');
	var mir = document.getElementById('mainImageRight');
	var mio = document.getElementById("mainImageObj");

	currentPhoto += dir;
	//alert(currentPhoto + ", " + dir + ", " + productPhotos.length);
	mil.style.display = (currentPhoto == 0)?"none":"block";
	mir.style.display = (currentPhoto == productPhotos[currentProd].length - 1)?"none":"block";
	mio.src="./img.jpg?src=" + productPhotos[currentProd][currentPhoto][0] + ".jpg";
	//alert(productPhotos[currentPhoto][0]);
}

function mainImageFadeIn()
{
	recountMainImageParts();
	renderMainImageParts();
	if(mainImageFadePercent < mainImageMaxPercent)
	{
		mainImageFadePercent += 3;
		setTimeout("mainImageFadeIn()", 10);
	}
	else
	{
		var mips = document.getElementById("mainImagePartSuper");
		var mio = document.getElementById("mainImageObj");
		mio.style.display = "none";
		mips.style.opacity = 0.99;
		mips.style.khtmlOpacity = 0.99;
		mips.style.mozOpacity = 0.99;
		mips.style.display = "block";
		var i;
		for(i = 0; i < mainImagePartsRows * mainImagePartsCols; i++)
		{
			mainImagePartsEl[i].style.display="none";
		}
		
/*		mainImageObj.onload = "startShowMainImageObj()";		
		mainImageObj.onerror = "imgLoadError()";		
		mainImageObj.src = mainImagePath;
*/
			mio.src = mainImagePath;
	}
}

function imgLoadError()
{
	alert("error!");
}

function setMainImageObjOpacity(k)
{
	if(k > 1) k = 1;
	var mio = document.getElementById("mainImageObj");
	mio.style.opacity = k;
	mio.style.mozOpacity = k;
	mio.style.khtmlOpacity = k;
	mio.style.filter = ((k == 1)?"none":("alpha(opacity=" + (k * 100) + ")"));
}

function startShowMainImageObj()
{
	mainImageObjOpacity = 0;
	var mio = document.getElementById("mainImageObj");
	setMainImageObjOpacity(0);
	mio.style.display = "block";
	setTimeout("mainImageObjFadeIn()", 30);
}

function mainImageObjFadeIn()
{
	setMainImageObjOpacity(mainImageObjOpacity);
	if(mainImageObjOpacity < 1)
	{
		mainImageObjOpacity += 0.1;
		setTimeout("mainImageObjFadeIn()", 30);
	}
	else
	{
		setMainImageObjOpacity(1);
	}
}

function resetMainImageParts()
{
	var r = mainImagePartsRows;
	var c = mainImagePartsCols;
	var i = 0, j = 0;
	for(i = 0; i < c; i++)
		for(j = 0; j < r; j++)
		{
			var index = j * c + i;
			mainImageParts[index] = new Array(6);
		}

	for(i = 0; i < mainImagePartsRows * mainImagePartsCols; i++)
	{
		mainImagePartsEl[i] = document.getElementById("mainImagePart_" + i);
	}		
	mainImageFadePercent = 0;
	recountMainImageParts();
	for(i = 0; i < mainImagePartsRows * mainImagePartsCols; i++)
	{
		mainImagePartsEl[i].style.display = "block";
	}		
	renderMainImageParts();
}

function renderMainImageParts()
{
	var i;
	for(i = 0; i < mainImagePartsRows * mainImagePartsCols; i++)
	{
		mainImagePartsEl[i].style.left = mainImageParts[i][0] + "px";
		mainImagePartsEl[i].style.top = mainImageParts[i][1] + "px";
		mainImagePartsEl[i].style.width = mainImageParts[i][2] + "px";
		mainImagePartsEl[i].style.height = mainImageParts[i][3] + "px";
		mainImagePartsEl[i].style.opacity = mainImageParts[i][4];
		mainImagePartsEl[i].style.mozOpacity = mainImageParts[i][4];
		mainImagePartsEl[i].style.khtmkOpacity = mainImageParts[i][4];
		mainImagePartsEl[i].style.filter = "alpha(opacity=" + mainImageParts[i][4] * 100 + ")";
	}
}

function recountMainImageParts()
{
	var r = mainImagePartsRows;
	var c = mainImagePartsCols;
	var mw = mainImageWidth;//. * mainImageFadePercent)/mainImageMaxPercent;
	var mh = mainImageHeight;// * mainImageFadePercent)/mainImageMaxPercent;
	var pw = (mw / r);
	var ph = (mh / r);
	var i = 0, j = 0;
	for(i = 0; i < c; i++)
		for(j = 0; j < r; j++)
		{
			var index = j * c + i;
			mainImageParts[index][5] = mainImageFadePercent - index * mainImageFadeOffset;
			var p = mainImageParts[index][5];
			if(p < 0) p = 0;
			if(p > 100) p = 100;
			var cx = i * pw + (pw >> 1) + Math.sin(p/20)*(100 - p)*2;
			var cy = j * ph + (ph >> 1) + Math.sin(p/20)*(100 - p)*2;
			var w = (pw * p) / 100;
			var h = (ph * p) / 100;
			var o = p / 100;
			if (o > 0.99) o = 0.99;
			var x = cx - (w >> 1);
			var y = cy - (h >> 1);
			mainImageParts[index][0] = x;
			mainImageParts[index][1] = y;
			mainImageParts[index][2] = w;
			mainImageParts[index][3] = h;
			mainImageParts[index][4] = o;
		}
}

function mainImageLeftRightOverMove(el)
{
	el.style.opacity = "1";
	el.style.mozOpacity = "1";
	el.style.khtmlOpacity = "1";
	el.style.filter = "alpha(opacity=100)";
}

function mainImageLeftRightOut(el)
{
	el.style.opacity = "0.3";
	el.style.mozOpacity = "0.3";
	el.style.khtmlOpacity = "0.3";
	el.style.filter = "alpha(opacity=0.3)";
}