
<div style="position:relative; left:0px; top:0px;">
<div id="floater0" style="z-index:1; position:absolute; float:left; font-size:12px; color:red; font-family:'Helvetica'"></div>
<div id="floater1" style="z-index:1; position:absolute; float:left; font-size:12px; color:red; font-family:'Helvetica'"></div>
<div id="floater2" style="z-index:1; position:absolute; float:left; font-size:12px; color:red; font-family:'Helvetica'"></div>
<div id="floater3" style="z-index:1; position:absolute; float:left; font-size:12px; color:red; font-family:'Helvetica'"></div>
<div id="floater4" style="z-index:1; position:absolute; float:left; font-size:12px; color:red; font-family:'Helvetica'"></div>
<div id="floater5" style="z-index:1; position:absolute; float:left; font-size:12px; color:red; font-family:'Helvetica'"></div>
<div id="floater6" style="z-index:1; position:absolute; float:left; font-size:12px; color:red; font-family:'Helvetica'"></div>
<div id="floater7" style="z-index:1; position:absolute; float:left; font-size:12px; color:red; font-family:'Helvetica'"></div>
<div id="floater8" style="z-index:1; position:absolute; float:left; font-size:12px; color:red; font-family:'Helvetica'"></div>
<div id="floater9" style="z-index:1; position:absolute; float:left; font-size:12px; color:red; font-family:'Helvetica'"></div>
<div id="floater10" style="z-index:1; position:absolute; float:left; font-size:12px; color:red; font-family:'Helvetica'"></div>
<div id="floater11" style="z-index:1; position:absolute; float:left; font-size:12px; color:red; font-family:'Helvetica'"></div>
<div id="floater12" style="z-index:1; position:absolute; float:left; font-size:12px; color:red; font-family:'Helvetica'"></div>
<div id="floater13" style="z-index:1; position:absolute; float:left; font-size:12px; color:red; font-family:'Helvetica'"></div>
<div id="floater14" style="z-index:1; position:absolute; float:left; font-size:12px; color:red; font-family:'Helvetica'"></div>
<div id="floater15" style="z-index:1; position:absolute; float:left; font-size:12px; color:red; font-family:'Helvetica'"></div>
<canvas id="theFrame"></canvas>
<div id="marqueecontainer" width="540" style="position:absolute; top:388px;">
<div id="marquee">
</div></div>
</div>

<div id="m2"></div>
<div id="m6"></div>
<div id="m3"></div>
<div id="m4"></div>
<div id="m5"></div>
<div id="m8"></div>
<div id="m7"></div>
<div id="m9"></div>
<div id="m1"></div>


<style>
#marquee {
   overflow:hidden;
   white-space: nowrap;
   font: 12px fixedsys, consolas, monospace;
 }
#marqueetest {
   overflow:hidden;
   white-space: nowrap;
   font: 12px fixedsys, consolas, monospace;
 }
#marqueecontainer {
   overflow:hidden;
   white-space: nowrap;
   background:#000;
   width:544px;
 }
.marqueesys {
   color:#0A0;
 }
.marqueebug {
   color:#0D0;
 }
.commobug {
   color:#060;
 }
</style>

<script>


/**
 * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
 * 
 * @param {String} text The text to be rendered.
 * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
 * 
 * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
 */
function getTextWidth2(text, font) {
    // re-use canvas object for better performance
    var canvas = getTextWidth2.canvas || (getTextWidth2.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
}

function getTextWidth(text, sz) {
var regex = /(<([^>]+)>)/ig
    text2 = text.replace(regex, "").replace(/&nbsp;/g," ");
//document.getElementById("m8").innerHTML=text.length;
//document.getElementById("m7").innerHTML=text2.length;
//document.getElementById("m9").innerHTML=text.replace(regex, "").length;
return text2.length*sz;
}

var marqueet="";
var newmarquee="&nbsp;";
window.addEventListener('load', function () {
	function go() {
if (marqueei > marqueewidth)
{
if (newmarquee.length<7)
{ marqueet=newmarquee; marqueem.innerHTML=marqueet; newmarquee="&nbsp;";marqueewidth = (getTextWidth(marqueet,thesz) + 1);  marqueei=544;}
else
{ marqueet=newmarquee; marqueem.innerHTML=marqueet; newmarquee="&nbsp;";marqueewidth = (getTextWidth(marqueet,thesz) + 1);  marqueei=0-544;}
}
		else
		{
		if (newmarquee.length>thesz)
		{
		if (marqueei>thesz-1)
		{
		chop=Math.floor(marqueei/thesz);
		chopped=1;
		while (chopped&&(marqueei>thesz-1)&&chop)
		{
		chopped=0;
		tochop=marqueet.substring(0,chop);
		if (chop)
		while (tochop.match("&nbsp;")&&chop)
		{
		marqueet=marqueet.replace("&nbsp;","");
		chop--;
		chopped++;
		//alert("chooped nbsp "+chop+" "+chopped);
		tochop=marqueet.substring(0,chop);		
		}
		if (chop)
		while (tochop.match(/(<[^>]+>[^<]*<\/[^>]+>)/i)&&chop)
		{
		l=tochop.match(/(<[^>]+>[^<]*<\/[^>]+>)/i);
		if (l) l=l[0].replace(/(<([^>]+)>)/ig, "").replace(/&nbsp;/g," ").length;
		else l=0;
		if (l>chop) break;
		marqueet=marqueet.replace(/(<[^>]+>[^<]*<\/[^>]+>)/i,"");
		chop-=l;
		chopped+=l;
		tochop=marqueet.substring(0,chop);		
		}
		marqueei=marqueei-(chopped*thesz);
		marqueewidth = (getTextWidth(marqueet,thesz) + 1);
		}
		}

		newspace="&nbsp;";
		//alert(marqueei+" "+marqueewidth);
		p=544+marqueei-marqueewidth;
		if (p>544) { marqueet=newmarquee; marqueem.innerHTML=marqueet; newmarquee="&nbsp;";marqueewidth = (getTextWidth(marqueet,thesz) + 1); marqueei=0-544;}
		else
		{
		if (p>0)
		{
		p=p/7;//marqueesz;
		for (i=0;i<p;i++) newspace+="&nbsp;";
		}

		marqueet+=newspace+newmarquee;
		marqueem.innerHTML=marqueet;
		marqueewidth = (getTextWidth(marqueet,thesz) + 1); 
		newmarquee="&nbsp;";
		}
		}
		}
		if (marqueestep!=0)
		{
			if (marqueewidth-marqueei>550*2)
			{var marqueeacc=Math.floor((marqueewidth-marqueei-550*2)/100)*Math.floor((marqueewidth-marqueei-550*2)/100)*Math.floor((marqueewidth-marqueei-550*2)/100)+20;
			if (marqueeacc>marqueewidth-marqueei-550*2) marqueeacc=10+marqueewidth-marqueei-550*2;
			if (marqueestep<marqueeacc) marqueestep+=10;
			if (marqueestep>marqueeacc) marqueestep-=10;
			if (marqueestep>marqueewidth-marqueei-550*2) marqueestep=10+marqueewidth-marqueei-550*2;
			}
			else {marqueeacc=10;marqueestep=10;}
			if (marqueestep<10) marqueestep=10;
			//marqueestep=10;
		}
		marqueei = marqueei + marqueestep;
	//	marqueei=marqueewidth-200;
		marqueem.style.marginLeft = -marqueei + 'px';
	//	document.getElementById("m1").innerHTML=marqueet;
	//	document.getElementById("m2").innerHTML=marqueei;
	//	document.getElementById("m3").innerHTML=marqueestep;
	//	document.getElementById("m4").innerHTML=marqueeacc;
	//	document.getElementById("m5").innerHTML="IT: "+(marqueewidth-marqueei);
	//	document.getElementById("m6").innerHTML=marqueewidth;
	}
	var marqueei = 544,
		thesz=Math.floor(getTextWidth2("aaaaaaaaaaaaaaaaaaaa","12px fixedsys, consolas, monospace")/20);
		marqueestep = 10,
		marqueespace = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	var marqueem = document.getElementById('marquee');
	marqueet = marqueem.innerHTML; //text
	marqueem.innerHTML = marqueet;// + marqueespace;
	marqueem.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789
	var marqueewidth =  (getTextWidth(marqueet,thesz) + 1);
	marqueei = 544,
	marqueem.style.position = '';
	var marqueesz=getTextWidth(" ",thesz);
	//marqueem.innerHTML = marqueet + marqueespace;
	marqueem.addEventListener('mouseenter', function () {
		marqueestep = 0;
	}, true);
	marqueem.addEventListener('mouseleave', function () {
		marqueestep = 10;
	}, true);
	var marqueex = setInterval(go, 50);
}, true);




var backdrop = new Image();
backdrop.src="gfx/Untitled3.png";

var tileset = new Image();
tileset.src="gfx/maptiles.gif";

var bugset =[];
for (i=0;i<16;i++)
{
bugset[i] = new Image();
bugset[i].src="gfx/bugtiles.gif";
}

var canvas=document.getElementById("theFrame");
canvas.width=576;
canvas.height=408;

canvasDraw=canvas.getContext("2d");





var frames=[
