var tileData = new Array();
var tileBase64 = new Array(10);
var tW = tH = 16;
var bShowBuffer = false;
var lMapData = new Array();
var lScreenWidth = 256;
var lScreenHeight = 240;
var lScaler = 1;
var lPScrollVal = 2;
var lCurXOffset = 0;
var lCurYOffset = 0;
var lCurPXOffset = 0;
var lCurPYOffset = 0;
var lCurPAWidth = 0;
var lCurPAHeight = 0;
var lTileCount = 11;
var b64GPre = 'data:image/gif;base64,';
var b64IH1 = b64GPre + 'R0lGODlhEAAQAJECAABzu7W6/////wAAACH5BAEAAAIALAAAAAAQABAAAA';
var b64IH2 = b64GPre + 'R0lGODlhEAAQAJECALW6/wBzu////wAAACH5BAEAAAIALAAAAAAQABAAAA';
var b64IH3 = b64GPre + 'R0lGODlhEAAQAJECACM771+X/////wAAACH5BAEAAAIALAAAAAAQABAAAA';

tileBase64[1] = b64IH1 + 'I6lIJoppsBwIvxIIqXATZonWkJ9T0QCQoR1CwYt5Fw6YmnS5lvKJm1yqlVPsDgDxgDjUIxzo6IbO6GBQA7';
tileBase64[2] = b64IH1 + 'IdlI8pwO0Po5wt2Iuz3pj6DzLKeIQiiaaICaguWgAAOw==';
tileBase64[3] = b64IH1 + 'I8VC52kWgAQYqCvoWxnCF6WCUNkB1bc33h1rWkuY5uF7PkLUpn2kWMjqKJciHOx1cUDpc2kKrCWEqn1GkBADs=';
tileBase64[4] = b64IH1 + 'I0FB5xZiDfQFpuwSNVbTDObT3Yx4SeVjoXglaqyFLcmsnm2M5wDb6n7cMBO8IeMWakkVyQAgA7';
tileBase64[5] = b64IH1 + 'I/lBVxy2m63EsBAPjsE/bKeiFVFCkO1UHWCQIHpXgYZbif9IJHJyf8X4PRajYig2jDcFzLhQy40/yYDA1yai0AADs=';
tileBase64[6] = b64IH1 + 'IqlI+pu8B/nJBKOnArsiwHnEXGdX1TkoFgs2KnSE7pdq5vI465XnfQnygAADs=';
tileBase64[7] = b64IH2 + 'I5FAKZYgod0AktxSdfnZFS1lQg8zgjuaCWw43ldKSnLHTfCcYmDkkRz8iQgDWXhveiAR034otoFBQAADs=';
tileBase64[8] = b64IH1 + 'IxDCB5IYft4oNHBKZQzak7a2gdNGbbREVlWaHm16wWpcijam+kfbX2DcsFfzGixzgqAAA7';
tileBase64[9] = b64IH1 + 'IylGInYJwLWGzoxRjufUf7ZQGZ6DlJOUkOupmUBm0NO4HxbVuxCrpwyjnBcjpX8IhMKgsAOw==';
tileBase64[10] = b64IH3 + 'IuFBCnJwZ90mIOoklp27zzu0AeqIgdmY1SaXwom72xtYaVh6uT+dVPe/LxNi9eAQA7';
tileBase64[11] = b64IH1 + 'JAlIBglsoBEQMwuLBswuxgeR0KaHCSYIrO0U2jusCj8omsmzovSmVo+SvVYkRai7gIGTmYGkTWSfxqM5Yx1mjECgA7';


lMapData = [
	[3, 3, 6, 1, 1, 1, 1, 8, 1, 6, 6, 1, 1, 1, 1, 8, 6, 1, 1, 1, 1, 8, 1, 6, 6, 1, 1, 1, 1, 8, 1, 6, 1, 1, 1, 1, 9, 9, 9, 9, 9, 9, 9],
	[6, 1, 1, 8, 7, 8, 0, 0, 1, 1, 1, 8, 7, 8, 0, 0, 1, 8, 7, 8, 0, 0, 1, 1, 1, 8, 7, 8, 0, 0, 1, 1, 1, 1, 1, 6, 9, 6, 6, 9, 9, 6, 6],
	[1, 4, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 9, 6, 6, 6, 9, 6],
	[4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 6, 9, 9, 9, 6, 9],
	[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 9, 9, 9, 9, 9, 9],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 6, 6, 9, 9, 6, 6],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 9, 6, 6, 6, 9, 6],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 6, 9, 9, 9, 6, 9],
	[3, 3, 1, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 9, 9, 9, 9, 9, 9],
	[6, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 6, 6, 9, 9, 6, 6],
	[1, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 9, 6, 6, 6, 9, 6],
	[4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 6, 9, 9, 9, 6, 9],
	[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	[1, 5, 5, 5, 5, 1, 5, 5, 1, 5, 5, 5, 5, 1, 5, 5, 1, 5, 5, 5, 5, 1, 5, 5, 1, 5, 5, 5, 5, 1, 5, 5, 9, 9, 9, 9, 9, 9, 9, 9, 1, 5, 5],
	[1, 1, 6, 6, 1, 1, 6, 1, 1, 1, 6, 6, 1, 1, 6, 1, 1, 1, 6, 6, 1, 1, 6, 1, 1, 1, 6, 6, 1, 1, 6, 1, 9, 6, 6, 9, 9, 6, 6, 9, 1, 1, 6]
];

var lMapHeight = lMapData.length;
var lMapWidth = lMapData[0].length;
var lMaxMapScrollH = lMapWidth - (lScreenWidth / tW);
var lMaxMapScrollV = lMapHeight - (lScreenHeight / tH);

var getElement = function (id) {
	return document.getElementById(id);
}
var appChild = function (parent, child) {
	return parent.appendChild(child);
}
var createElement = function (tag) {
	return document.createElement(tag);
}

function init() {
	var cPADiv = createElement("div");
	cPADiv.setAttribute("id", "PADiv");
	cPADiv.style.position = 'absolute';
	cPADiv.style.left = '50%';
	cPADiv.style.top = 10;
	cPADiv.style.overflow = 'hidden';
	cPADiv.style.width = cPADiv.width = (lScreenWidth * lScaler);
	cPADiv.style.height = cPADiv.height = (lScreenHeight * lScaler);
	cPADiv.style.marginLeft = -((lScreenWidth * lScaler) / 2);
	appChild(document.body, cPADiv);
	var cPlayArea = createElement("canvas");
	cPlayArea.setAttribute("id", "cPlayArea");
	cPlayArea.style.position = 'absolute';
	cPlayArea.style.left = 0;
	cPlayArea.style.top = 0;
	cPlayArea.style.width = cPlayArea.width = lCurPAWidth = (lScreenWidth * lScaler) + (tW);
	cPlayArea.style.height = cPlayArea.height = lCurPAHeight = (lScreenHeight * lScaler) + (tH);
	cPlayArea.style.backgroundColor = "#000";
	appChild(cPADiv, cPlayArea);
	preloadTiles();
	document.onkeypress = keyHandler;
	alignDebugBox();
	debugPrint("Loading...");
	setTimeout("startIt()", 500);
}

function togBuffer() {
	if (bShowBuffer) {
		var cPADiv = getElement("PADiv");
		cPADiv.style.overflow = 'hidden';
		bShowBuffer = false;
	} else {
		var cPADiv = getElement("PADiv");
		cPADiv.style.overflow = 'visible';
		bShowBuffer = true;
	}
	alignDebugBox();
}

function alignDebugBox() {
	var dBox = getElement('debugBox');
	var cPA = getElement('PADiv');
	if (bShowBuffer) {
		dBox.style.top = cPA.offsetTop + lCurPAHeight + 2;
	} else {
		dBox.style.top = cPA.offsetTop + cPA.offsetHeight + 2;
	}
}

function preloadTiles() {
	for (tCount = 1; tCount <= lTileCount; tCount++) {
		tileData[tCount] = new Image();
		if (tileBase64[tCount]) {
			tileData[tCount].src = tileBase64[tCount];
		} else {
			tileData[tCount].src = "./images/tile"+tCount+".gif";
		}
	}
}

function drawTile(id, x, y) {
	if (id != 0) {
		var cPlayArea = getElement('cPlayArea').getContext('2d');
		cPlayArea.drawImage(tileData[id], (x * tW) * lScaler, (y * tH) * lScaler, tW * lScaler, tH * lScaler);
	}
}

function drawScreen(lXOffset, lYOffset) {
	var lXCount = 0;
	var lYCount = 0;
	var lMaxYCount = (lCurPAHeight / tH);
	var lMaxXCount = (lCurPAWidth / tW);
	if ((lMapHeight - 1) < (lMaxYCount + lYOffset)) {
		lMaxYCount = (lMapHeight - 1) - lYOffset;
	}
	if ((lMapWidth - 1) < (lMaxXCount + lXOffset)) {
		lMaxXCount = (lMapWidth - 1) - lXOffset;
	}
	clearScreen();
	for (lYCount = 0; lYCount <= lMaxYCount; lYCount++) {
		for (lXCount = 0; lXCount <= lMaxXCount; lXCount++) {
			drawTile(lMapData[lYCount + lYOffset][lXCount + lXOffset], lXCount, lYCount);
		}
	}
}

function clearScreen() {
	var cPlayArea = getElement('cPlayArea').getContext('2d');
	cPlayArea.clearRect(0, 0, (lCurPAWidth * lScaler), (lCurPAHeight * lScaler));
}

function doMove(strDir) {
	var bDoMove = false;
	var bDoPMove = false;
	switch (strDir) {
		case 'right':
			if (lCurPXOffset < lCurPAWidth && lCurXOffset < lMaxMapScrollH) {
				lCurPXOffset+=(lPScrollVal * lScaler);
				bDoPMove = true;
			}
			if (lCurPXOffset > ((tW-lPScrollVal) * lScaler) && lCurXOffset < lMaxMapScrollH) {
				lCurPXOffset = 0;
				lCurXOffset++;
				bDoMove = true;
			}
			break;
		case 'left':
			if (lCurPXOffset >= 0 && lCurXOffset >= 0) {
				lCurPXOffset-=(lPScrollVal * lScaler);
				bDoPMove = true;
			}
			if (lCurPXOffset < 0 && lCurXOffset == 0) {
				lCurPXOffset = 0;
			}
			if (lCurPXOffset < 0 && lCurXOffset > 0) {
				lCurPXOffset = ((tW-lPScrollVal) * lScaler);
				lCurXOffset--;
				bDoMove = true;
			}
			break;
	}
	if (bDoMove) {
		drawScreen(lCurXOffset, lCurYOffset);
	}
	if (bDoPMove) {
		var cPA = getElement("cPlayArea");
		cPA.style.left = -(lCurPXOffset);
	}
}

function reScale(lScale) {
	clearScreen();
	lScaler = lScale;
	if (lScaler == 2) {
		lCurPXOffset = lCurPXOffset * 2;
		lCurPYOffset = lCurPYOffset * 2;
	} else {
		lCurPXOffset = lCurPXOffset / 2;
		lCurPYOffset = lCurPYOffset / 2;
	}
	var cPlayArea = getElement('cPlayArea');
	var cPADiv = getElement('PADiv');
	cPADiv.style.marginLeft = -(lScreenWidth * lScaler) / 2;
	cPADiv.style.width = cPADiv.width = (lScreenWidth * lScaler);
	cPADiv.style.height = cPADiv.height = (lScreenHeight * lScaler);
	cPlayArea.style.left = -(lCurPXOffset);
	cPlayArea.style.width = cPlayArea.width = lCurPAWidth = (lScreenWidth * lScaler) + (tW * 2);
	cPlayArea.style.height = cPlayArea.height = lCurPAHeight = (lScreenHeight * lScaler) + (tH * 2);
	cPlayArea.style.left = -(lCurPXOffset);
	drawScreen(lCurXOffset, lCurYOffset);
	alignDebugBox();
}

function startIt() {
	debugPrint("Platform Tile Engine (Metroid Edition)");
	debugPrint("Version 0.0.1a  d08.04.10");
	debugPrint("Written By: TeleKawaru");
	debugPrint("Arrow Keys, ESDF, or IJKL to move MAP");
	debugPrint("ETC: 1 = 1x, 2 = 2x");
	drawScreen(lCurXOffset, lCurYOffset);
}

function debugPrint(strText) {
	var dBox = getElement('debugBox');
	if (dBox.innerHTML.length > 0) {
		dBox.innerHTML += "<br />\n"+strText;
	} else {
		dBox.innerHTML += strText;
	}
	dBox.scrollTop = dBox.scrollHeight;
}

function keyHandler(e) {
	var eventObj = window.event? event : e;
	var keyCode = eventObj.charCode? eventObj.charCode : eventObj.keyCode;
	var mChar = String.fromCharCode(keyCode);
	var matchedkey = false;
	switch (keyCode) {
		case 37:
			mChar = 'j';
			break;
		case 38:
			mChar = 'i';
			break;
		case 39:
			mChar = 'l';
			break;
		case 40:
			mChar = 'k';
			break;
	}
	switch (mChar) {
		case '1':
			reScale(1);
			break;
		case '2':
			reScale(2);
			break;
		case 'h':
			togBuffer();
			break;
		case 'i':
		case 'e':
			matchedkey = true;
			doMove('up');
			break;
		case 'j':
		case 's':
			matchedkey = true;
			doMove('left');
			break;
		case 'k':
		case 'd':
			matchedkey = true;
			doMove('down');
			break;
		case 'l':
		case 'f':
			matchedkey = true;
			doMove('right');
			break;
		default:
			break;
	}
	if (matchedkey) {
		return false;
	} else {
		return true;
	}
}