var newfacetagbefore
var newfacetagafter
var faceurl
var newfacetag
var facewidth=100
var faceheight=100
var facewidthnew=100
var faceheightnew=100

function initonload() {
	document.all.bodycontainer.style.posLeft=x_faceandbody
	document.all.bodycontainer.style.posTop=y_faceandbody
	document.all.facecontainer.style.posLeft=x_faceandbody
	document.all.facecontainer.style.posTop=y_faceandbody
	document.all.controlcontainer.style.posLeft=x_control
	document.all.controlcontainer.style.posTop=y_control
	document.all.formcontainer.style.posLeft=x_form
	document.all.formcontainer.style.posTop=y_form
}
	
function changeface(thissample) {
	newfacetagbefore="<img src=\""
	newfacetagafter="\" border=0>"
	faceurl=thissample
	newfacetag=newfacetagbefore+faceurl+newfacetagafter
	facecontainer.innerHTML=newfacetag
	facewidth=parseInt(document.all.facecontainer.offsetWidth)
	faceheight=parseInt(document.all.facecontainer.offsetHeight)
	facewidthnew=facewidth
	faceheightnew=faceheight
}

function addface() {
	newfacetagbefore="<img src=\""
	newfacetagafter="\" border=0>"
	faceurl=document.f.addfaceurl.value			
	newfacetag=newfacetagbefore+faceurl+newfacetagafter
	facecontainer.innerHTML=newfacetag
	facewidth=parseInt(document.all.facecontainer.offsetWidth)
	faceheight=parseInt(document.all.facecontainer.offsetHeight)
	facewidthnew=facewidth
	faceheightnew=faceheight
}

function changebody(thisurl) {
	bodycontainer.innerHTML="<img src=\""+thisurl+"\" border=0>"
}

function moveface(thisdirection) {
	if (thisdirection=="upfast") {
		document.all.facecontainer.style.posTop-=10
	}
	if (thisdirection=="downfast") {
		document.all.facecontainer.style.posTop+=10
	}
	if (thisdirection=="leftfast") {
		document.all.facecontainer.style.posLeft-=10
	}
	if (thisdirection=="rightfast") {
		document.all.facecontainer.style.posLeft+=10
	}
	if (thisdirection=="upslow") {
		document.all.facecontainer.style.posTop-=1
	}
	if (thisdirection=="downslow") {
		document.all.facecontainer.style.posTop+=1
	}
	if (thisdirection=="leftslow") {
		document.all.facecontainer.style.posLeft-=1
	}
	if (thisdirection=="rightslow") {
		document.all.facecontainer.style.posLeft+=1
	}
}

function resizeface(thiszoom) {
	if (thiszoom=="bigger") {
		facewidthnew*=1.03
	}
	if (thiszoom=="smaller") {
		facewidthnew*=0.97
	}
	newfacetagbefore="<img src=\""
	newfacetagafter="\" border=0 width="+facewidthnew+">"
	newfacetag=newfacetagbefore+faceurl+newfacetagafter
	facecontainer.innerHTML=newfacetag
}

if (document.all) {
	document.write("<div style=\"position:absolute;top:-1000px;left:0px;\" id=\"facecontainer\"></div>")

	document.write("<div style=\"position:absolute;top:-1000px;left:0px;\" id=\"bodycontainer\"><img src=\"magictransformer/monalisa.gif\"></div>")

	document.write("<div style=\"position:absolute;top:-1000px;left:0px;\" id=\"controlcontainer\">")
	document.write("<IMG SRC=\"magictransformer/control.gif\" USEMAP=\"#control.gif\" WIDTH=60 HEIGHT=60 BORDER=0>")
	document.write("<MAP NAME=\"control.gif\">")
	document.write("<AREA SHAPE=RECT COORDS=\"17,5,40,12\" HREF=\"javascript:moveface(\'upslow\')\">")
	document.write("<AREA SHAPE=RECT COORDS=\"14,0,42,5\" HREF=\"javascript:moveface(\'upfast\')\">")
	document.write("<AREA SHAPE=RECT COORDS=\"17,47,41,54\" HREF=\"javascript:moveface(\'downslow\')\">")
	document.write("<AREA SHAPE=RECT COORDS=\"17,54,41,59\" HREF=\"javascript:moveface(\'downfast\')\">")
	document.write("<AREA SHAPE=RECT COORDS=\"6,18,11,40\" HREF=\"javascript:moveface(\'leftslow\')\">")
	document.write("<AREA SHAPE=RECT COORDS=\"0,18,6,40\" HREF=\"javascript:moveface(\'leftfast\')\">")
	document.write("<AREA SHAPE=RECT COORDS=\"47,18,53,41\" HREF=\"javascript:moveface(\'rightslow\')\">")
	document.write("<AREA SHAPE=RECT COORDS=\"53,18,59,37\" HREF=\"javascript:moveface(\'rightfast\')\">")
	document.write("<AREA SHAPE=RECT COORDS=\"15,22,29,36\" HREF=\"javascript:resizeface(\'bigger\')\">")
	document.write("<AREA SHAPE=RECT COORDS=\"30,21,43,36\" HREF=\"javascript:resizeface(\'smaller\')\">")
	document.write("</MAP>")
	document.write("</div>")

	document.write("<div style=\"position:absolute;top:-1000px;left:0px;\" id=\"formcontainer\">")
	document.write("<form name=\"f\" action=\"\" method=\"post\" enctype=\"multipart/form-data\">")
	document.write("<font size=1 face=Verdana color=black>")
	
	document.write("<strong>Add your face:</strong><br> Click \'browse\' to search for your face-image on your harddisk (button may have different name in other languages). Then click button \'add image\'.<br><br>")

	document.write("<input type=file name=\"addfaceurl\" size=20 style=\"font-size:9pt\">")
	document.write("<input type=button value=\"add image\" onClick=\"addface()\" style=\"font-size:9pt\"><br><br>")

	document.write("<strong>Position your face</strong>:<br>Click the control panel to move and resize your face-image until it fits into the hole.<br><br>")

	document.write("<strong>Select a body:</strong><br>")
	document.write("<a href=\"javascript:changebody(\'magictransformer/monalisa.gif\')\">Mona Lisa</a><br>")
	document.write("<a href=\"javascript:changebody(\'magictransformer/bodybuilder.gif\')\">Body Builder</a><br>") 
	document.write("<a href=\"javascript:changebody(\'magictransformer/santa.gif\')\">Santa Claus</a><br>")
	document.write("<a href=\"javascript:changebody(\'magictransformer/sittingbull.gif\')\">Sitting Bull</a><br>")
	document.write("<a href=\"javascript:changebody(\'magictransformer/superman.gif\')\">Superman</a><br>")
	document.write("<a href=\"javascript:changebody(\'magictransformer/napoleon.gif\')\">Napoleon</a>")
	document.write("</font>")
	document.write("</form>")
	document.write("</div>")

	window.onload=initonload
}
if (!document.all) {
	alert("Your browser does not support Magic Transformer")
}