/* Intro */
var H = 0;
var W = 0;
var M = false;
var txt, frm, dfrm;
var xZ, yZ;
var nx = 0;
var ny = 0;
var nw = 0;
var nh = 0;


function resize() {
	with (document.getElementById("screen")) {
		nx = offsetLeft;
		ny = offsetTop;
		nw = offsetWidth;
		nh = offsetHeight;
	}
	with (frm.style) {
		width  = W + "px";
		height = H + "px";
		left   = Math.round((nw-W)/2) + "px";
		top    = Math.round((nh-H)/2) + "px";
	}
}
onresize = resize;

document.onmousemove = function(e){
	if (!e) e = window.event;
	xm = (e.x || e.clientX) - nx;
	ym = (e.y || e.clientY) - ny;
	if(M != false){
		if(M.id == "frame"){
			var xM = M.offsetLeft - (xm + xZ);
			var yM = M.offsetTop - (ym + yZ);
			for(var i=0; i<9; i++) {
				dfrm[i].style.left = (dfrm[i].xZ - (xm + xZ)) + "px";
				dfrm[i].style.top  = (dfrm[i].yZ - (ym + yZ)) + "px";
				move(dfrm[i]);
			}
			M.style.left = (xm + xZ) + "px";
			M.style.top  = (ym + yZ) + "px";
		} else {
			M.style.left = (xm + dfrm[M.i].xZ) + "px";
			M.style.top  = (ym + dfrm[M.i].yZ) + "px";
			move(M);
		}
	}
	return false;
}
document.onmousedown = function(e){
	if (!e) e = window.event;
	tg = (e.target) ? e.target : e.srcElement;
	if(tg.id == "txt" || tg.parentNode.id == "txt") tg = document.getElementById("bkg");
	if(tg.parentNode.className == "dfrm"){
		M = tg.parentNode;
		dfrm[M.i].xZ = M.offsetLeft - xm;
		dfrm[M.i].yZ = M.offsetTop - ym;
		tg.style.cursor = "move";
	}
	if(tg.parentNode.id == "frame"){
		M = tg.parentNode;
		xZ = M.offsetLeft - xm;
		yZ = M.offsetTop - ym;
		M.style.cursor = "move";
		for(var i=0; i<9; i++) {
			dfrm[i].xZ = frm.offsetLeft + dfrm[i].offsetLeft;
			dfrm[i].yZ = frm.offsetTop + dfrm[i].offsetTop;
		}
	}
	return false;
}
document.onmouseup = function(){
	if(M != false){
		if(M.id == "frame") M.style.cursor = "pointer";
		else M.tg.cursor = "pointer";
		M = false;
	}
}

move = function(o) {
	o.tg.left = (-o.offsetLeft-1) + "px";
	o.tg.top  = (-o.offsetTop-1) + "px";
}

onload = function() {
	txt = document.getElementById("txt");
	frm = document.getElementById("frame");
	dfrm = frm.getElementsByTagName("div");
	W = document.getElementById("bkg").width;
	H = document.getElementById("bkg").height;
	resize();
	dfrm[1].style.top = (dfrm[0].offsetTop + dfrm[0].offsetHeight + 10) + "px";
	dfrm[2].style.top = (dfrm[1].offsetTop + dfrm[1].offsetHeight + 10) + "px";
    dfrm[3].style.left = (dfrm[2].offsetLeft + dfrm[2].offsetHeight + 25) + "px";
	dfrm[3].style.top = (dfrm[1].offsetTop + dfrm[2].offsetHeight + 10) + "px";
	dfrm[4].style.left = (dfrm[3].offsetLeft + dfrm[3].offsetHeight + 25) + "px";
	dfrm[4].style.top = (dfrm[1].offsetTop + dfrm[2].offsetHeight + 10) + "px";
	dfrm[5].style.left = (dfrm[2].offsetLeft + dfrm[2].offsetHeight + 25) + "px";
	dfrm[5].style.top = (dfrm[0].offsetTop + dfrm[2].offsetHeight + 10) + "px";
	dfrm[6].style.left = (dfrm[3].offsetLeft + dfrm[3].offsetHeight + 25) + "px";
	dfrm[6].style.top = (dfrm[0].offsetTop + dfrm[2].offsetHeight + 10) + "px";
	dfrm[7].style.left = (dfrm[2].offsetLeft + dfrm[2].offsetHeight + 25) + "px";
	dfrm[8].style.left = (dfrm[3].offsetLeft + dfrm[3].offsetHeight + 25) + "px";
	
	for(var i=0; i<9; i++) {
		dfrm[i].i  = i;
		dfrm[i].xZ = 0;
		dfrm[i].yZ = 0;
		dfrm[i].tg = dfrm[i].getElementsByTagName("img")[0].style;
		move(dfrm[i]);
		setTimeout("dfrm["+i+"].style.visibility='visible';", 1000+500*(i+1));
	}
}
/* Fine Intro 
}
onresize = resize;

document.onmousemove = function(e){
	if (!e) e = window.event;
	xm = (e.x || e.clientX) - nx;
	ym = (e.y || e.clientY) - ny;
	if(M != false){
		if(M.id == "frame"){
			var xM = M.offsetLeft - (xm + xZ);
			var yM = M.offsetTop - (ym + yZ);
			for(var i=0; i<3; i++) {
				dfrm2[i].style.left = (dfrm2[i].xZ - (xm + xZ)) + "px";
				dfrm2[i].style.top  = (dfrm2[i].yZ - (ym + yZ)) + "px";
				move(dfrm2[i]);
			}
			M.style.left = (xm + xZ) + "px";
			M.style.top  = (ym + yZ) + "px";
		} else {
			M.style.left = (xm + dfrm2[M.i].xZ) + "px";
			M.style.top  = (ym + dfrm2[M.i].yZ) + "px";
			move(M);
		}
	}
	return false;
}
document.onmousedown = function(e){
	if (!e) e = window.event;
	tg = (e.target) ? e.target : e.srcElement;
	if(tg.id == "txt" || tg.parentNode.id == "txt") tg = document.getElementById("bkg");
	if(tg.parentNode.className == "dfrm"){
		M = tg.parentNode;
		dfrm2[M.i].xZ = M.offsetLeft - xm;
		dfrm2[M.i].yZ = M.offsetTop - ym;
		tg.style.cursor = "move";
	}
	if(tg.parentNode.id == "frame"){
		M = tg.parentNode;
		xZ = M.offsetLeft - xm;
		yZ = M.offsetTop - ym;
		M.style.cursor = "move";
		for(var i=0; i<3; i++) {
			dfrm2[i].xZ = frm.offsetLeft + dfrm2[i].offsetLeft;
			dfrm2[i].yZ = frm.offsetTop + dfrm2[i].offsetTop;
		}
	}
	return false;
}
document.onmouseup = function(){
	if(M != false){
		if(M.id == "frame") M.style.cursor = "pointer";
		else M.tg.cursor = "pointer";
		M = false;
	}
}

move = function(o) {
	o.tg.left = (-o.offsetLeft-1) + "px";
	o.tg.top  = (-o.offsetTop-1) + "px";
}

onload = function() {
	txt = document.getElementById("txt");
	frm = document.getElementById("frame");
	dfrm2 = frm.getElementsByTagName("div");
	W = document.getElementById("bkg").width;
	H = document.getElementById("bkg").height;
	resize();
	dfrm2[1].style.top = (dfrm2[0].offsetTop + dfrm[0].offsetWidht + 20) + "px";
	dfrm2[2].style.top = (dfrm2[1].offsetTop + dfrm[1].offsetWidht + 20) + "px";
	for(var i=0; i<3; i++) {
		dfrm2[i].i  = i;
		dfrm2[i].xZ = 0;
		dfrm2[i].yZ = 0;
		dfrm2[i].tg = dfrm2[i].getElementsByTagName("img")[0].style;
		move(dfrm2[i]);
		setTimeout("dfrm["+i+"].style.visibility='visible';", 1000+500*(i+1));
	}
}*/