var x_left=0
var y_top=1
var x_right=4
var y_bottom=5
var i_strkcolor=2
var i_strkweight=3
var i_id=0
var ii=0

var content
document.write('<div id="roof" style="position:relative;width:'+cnvswidth+'px;height:'+cnvsheight+'px;border:1 dotted;overflow:hidden">')
for (i=0;i<path.length-1;i++) {
	if (y_bottom<path.length-1) {	
		for (i=0;i<=speedloop;i++) {
		if (path[x_left]==-100 || path[x_right]==-100) {
			x_left=x_left+4
			x_right=x_right+4
			y_top=y_top+4
			y_bottom=y_bottom+4
			i_strkcolor=i_strkcolor+4
			i_strkweight=i_strkweight+4
		}	
		if (path[y_top]==-100 || path[y_bottom]==-100) {
			x_left=x_left+4
			x_right=x_right+4
			y_top=y_top+4
			y_bottom=y_bottom+4
			i_strkcolor=i_strkcolor+4
			i_strkweight=i_strkweight+4
		}
		var xl=parseInt(path[x_left])*scal+50-(scal*50)
		var yl=parseInt(path[y_top])*scal+50-(scal*50)
		document.write('<div id="v'+i_id+'" style="position:absolute;top:'+(yl-50)+'px;left:'+(xl-50)+'px;width:'+parseInt(path[i_strkweight])+'px;height:'+parseInt(path[i_strkweight])+'px;background-color:'+path[i_strkcolor]+';visibility:hidden"><img src="onepixel.gif"></div>')

x_left=x_left+4
		x_right=x_right+4
		y_top=y_top+4
		y_bottom=y_bottom+4
		i_strkcolor=i_strkcolor+4
		i_strkweight=i_strkweight+4
		i_id++
		}
		}
}
	document.write('</div>')

function hidedrawing() {
	for (i=0;i<i_id-1;i++) {
			document.getElementById("v"+i).style.visibility="hidden"
	}
}

function showanimation() {
	if (document.getElementById("v"+ii)) {
			document.getElementById("v"+ii).style.visibility="visible"
			ii++;
			var tmr=setTimeout("showanimation()",60/speedloop)
	}
	else {
		clearTimeout(tmr)
	}
}

window.onload=showanimation

</script>