preloaded = false;
done = false;
freeField = 0;
maxX = 3;
maxY = 3;
maxFields = maxX*maxY;
fields  = new Array (maxFields);
slidepos = 0;
sliderID = 0;
initCounter = 10;
clickCounter = 0;

function initOverlay() {
	p1 = new Image();  p1.src="/fileadmin/templates/images/ovl_p1.jpg";
	p2 = new Image();  p2.src="/fileadmin/templates/images/ovl_p2.jpg";
	p3 = new Image();  p3.src="/fileadmin/templates/images/ovl_p3.jpg";
	p4 = new Image();  p4.src="/fileadmin/templates/images/ovl_p4.jpg";
	p5 = new Image();  p5.src="/fileadmin/templates/images/ovl_p5.jpg";
	p6 = new Image();  p6.src="/fileadmin/templates/images/ovl_p6.jpg";
	p7 = new Image();  p7.src="/fileadmin/templates/images/ovl_p7.jpg";
	p8 = new Image();  p8.src="/fileadmin/templates/images/ovl_p8.jpg";
	bgn = new Image();  bgn.src="/fileadmin/templates/images/ovl_bg.gif";
	bgu = new Image();  bgu.src="/fileadmin/templates/images/ovl_bgu.gif";
	bgd = new Image();  bgd.src="/fileadmin/templates/images/ovl_bgd.gif";
	bgl = new Image();  bgl.src="/fileadmin/templates/images/ovl_bgl.gif";
	bgr = new Image();  bgr.src="/fileadmin/templates/images/ovl_bgr.gif";
	blank = new Image(); blank.src="/fileadmin/templates/images/ovl_p0.gif";
	preloaded=true;
	slide();
	obj_ovl_flash=new fader("ovl_flash");
	obj_click_ct=new fader("click_ct");
	document.getElementById("ovl_done").style.visibility="visible";
	setTimeout("initPuzzle()",2000);
}

function initPuzzle() {
	document.getElementById("ovl_done").style.visibility="hidden";
	document.getElementById("ovl_flash").style.visibility="hidden";
	document.getElementById("click_ct").style.visibility="hidden";
	obj_ovl_flash.fadeTo(90, 5);
	obj_click_ct.fadeTo(100, 5);
	if (preloaded) {
		for (var i=0; i<maxFields; i++) {
			imgName="field"+i;
			this.document[imgName].src=blank.src;
		}
		for (var i=0; i<(maxFields-1); i++) fields[i]=i+1;
		fields[maxFields-1]=0; freeField=maxFields-1;
		var lastField=100;
		for (var i=0; i<100; i++) {
			var y=0; var ok=false;
			while (!ok) {
				y=Math.floor(maxFields*Math.random());
				if ((y != lastField) 
				&& ((((y+1)==freeField) && ((freeField % maxX) != 0)) 
				|| (((y-1)==freeField) && ((y % maxX) != 0)) 
				|| (y+maxX == freeField) || (y-maxX == freeField))) ok=true;
			}
			lastField=freeField;
			fields[freeField] = fields[y];
			fields[y]=0; freeField=y;
		}
		for (var i=0; i<maxFields; i++) showField(i);
		done=false;
	}
	if ((initCounter>0)||(freeField==4)) {
		initCounter=initCounter-1;
		setTimeout("initPuzzle()",100);
	}
	else initCounter=10;
	clickCounter=0;
}

function showField(n) {
	if (preloaded) {
		imgName="field"+n;
		if (fields[n]==0) imgSrc=blank.src;
		else imgSrc=eval("p"+fields[n]+".src");
		this.document[imgName].src=imgSrc;
	}
}

function setField(n) {
	col=n%3;
	row=Math.floor(n/3);
	fcol=freeField%3;
	frow=Math.floor(freeField/3);
	if ((!done)&&(preloaded)&&((col==fcol)&&(Math.abs(row-frow)==1))||((row==frow)&&(Math.abs(col-fcol)==1))) {
		unmarkField();
		fields[freeField] = fields[n];
		fields[n]=0;
		showField(n);
		showField(freeField);
		freeField=n;
		clickCounter++;
		if (solved()) {
			document.getElementById("click_ct").firstChild.nodeValue=clickCounter;
			document.getElementById("click_ct").style.visibility="visible";
			document.getElementById("ovl_flash").style.visibility="visible";
			document.getElementById("ovl_done").style.visibility="visible";
			obj_ovl_flash.fadeTo(0, 10);
			obj_click_ct.fadeTo(0, 2);
		}
	}
}

function markField(n) {
	col=n%3;
	row=Math.floor(n/3);
	fcol=freeField%3;
	frow=Math.floor(freeField/3);
	for (var i=0; i<9; i++) document.getElementById("pf"+i).style.cursor="default";
	if ((!done)&&(preloaded)&&((col==fcol)&&(Math.abs(row-frow)==1))||((row==frow)&&(Math.abs(col-fcol)==1))) {
		document.getElementById("pf"+n).style.cursor="pointer";
		if (col>fcol) bg="bgl";
		else if (col<fcol) bg="bgr";
		else if (row>frow) bg="bgu";
		else bg="bgd";
		document.getElementById("ovl_tbl").style.backgroundImage="url(/fileadmin/templates/images/ovl_"+bg+".gif)";
	}
}

function unmarkField(n) {
	for (var i=0; i<9; i++) document.getElementById("pf"+i).style.cursor="default";
	document.getElementById("ovl_tbl").style.backgroundImage="url(/fileadmin/templates/images/ovl_bg.gif)";
}

function solved() {
	for (var i=0; i<(maxFields-1); i++) if (fields[i] != i+1) return false;
	return true;
}

function slide() {
	slidepos=(slidepos>-1424) ? slidepos-1 : 0;
	document.getElementById("ovl_slider").style.left=slidepos+"px";
	sliderID=setTimeout("slide()", 10);
}

function ovl_close() {
	document.getElementById("overlay").style.visibility="hidden";
	document.getElementById("ovl_done").style.visibility="hidden";
	if (sliderID) clearTimeout(sliderID);
	initCounter=10;
}

function fader(id) {
	this.id = id;
	this.getOpacity = function() {
		if (document.all) {
			return document.all[this.id].filters["alpha"].opacity;
		}
		else if (document.getElementById) {
			return document.getElementById(this.id).style.MozOpacity*100;
		}
	}
	this.setOpacity = function(percent) {
		if (document.all) {
			document.all[this.id].filters["alpha"].opacity = percent;
		}
		else if (document.getElementById) {
			document.getElementById(this.id).style.MozOpacity = percent/100;
		}
	}
	this.fadeTo = function(newOpacity, deltaPercent) {
		window.clearTimeout(this.timeout);
		currentOpacity = this.getOpacity();
		if (newOpacity > currentOpacity) {
			if (currentOpacity < newOpacity - deltaPercent) {
				this.setOpacity(currentOpacity + deltaPercent);
				this.timeout = window.setTimeout("obj_"+this.id+".fadeTo("+newOpacity+", "+deltaPercent+")", 50);
			}
			else {
				this.setOpacity(newOpacity);
			}
		}
		else if (newOpacity < currentOpacity) {
			if (currentOpacity > newOpacity + deltaPercent) {
				this.setOpacity(currentOpacity - deltaPercent);
				this.timeout = window.setTimeout("obj_"+this.id+".fadeTo("+newOpacity+", "+deltaPercent+")", 50);
			}
			else {
				this.setOpacity(newOpacity);
			}
		}
	}
}