<!-- ------------------------------------------------------ -->
<!--  iPunchOut! - WRITTEN FOR THE iPHONE BY WILLIAM POWERS -->
<!-- ------------------------------------------------------ -->

var startingX = 110;
var startingY = 60;
var currentX = startingX;
var currentY = startingY;
var idling;						// opponent begins by idling
var movingLeft = false;			// opponent begins moving to the right
var which = 0;					// which sprite to display when idling
var idleticks = 0;				// idle timer
var gameticks = 2;				// game timer
var guardUp = false;			// used to modify whether guard is up or down
var attacking = false;
var dodging = false;			// whether player is dodging
var player_knockout;
var enemy_knockout;
var enemyKOs;
var playerKOs;
var gametimer;
var attacktimer;
var recovertimer;
var KOtimer;
var roundNum;
var gameover;
var oneseconds;
var tenseconds;
var minutes;
var pDamage;				// player's damage
var cDamage;				// opponent's damage
var points;
var screen_opacity;
var marqueePos;
var endround;
var stunned;
var stunpunches;

function cSpriteList()
{
	for (var i = 0; i < arguments.length; ++i) {
		this[cSpriteList.arguments[i]] = new cAttribute();
	}
}

function cAttribute()
{
	this.x = null;
	this.y = null;
	this.width = null;
	this.height = null;
	this.image = null;
}

function launchGame()
{
	setTimeout("setStage()", 1500);
}

function setStage()
{
	var preloader = document.getElementById('preloader');
	preloader.style.display = 'none';
	document.body.removeChild(preloader);
	preloader = document.getElementById('preloaderBG');
	preloader.style.display = 'none';
	document.body.removeChild(preloader);
	preloader = null;

	// hide toolbar in iPhone Safari
	setTimeout(function() { window.scrollTo(0, 1); }, 100);

	document.body.style.backgroundColor = 'black';
	elem = document.getElementById('main');
	elem.style.background = '#0066ff';
	elem = document.getElementById('whitebg');
	elem.style.display = 'block';
	elem = document.getElementById('player_damage');
	elem.style.display = 'block';
	elem = document.getElementById('enemy_damage');
	elem.style.display = 'block';
	elem = document.getElementById('clock');
	elem.style.display = 'block';
	elem = document.getElementById('round');
	elem.style.display = 'block';
	elem = document.getElementById('score');
	elem.style.display = 'block';
	elem = document.getElementById('slot0');
	elem.style.display = 'block';
	elem = document.getElementById('ring');
	elem.style.display = 'block';
	elem = document.getElementById('stage');
	elem.style.display = 'block';
	elem = document.getElementById('glass_joe');
	elem.style.display = 'block';
	elem = document.getElementById('screenshade');
	elem.style.display = 'block';

	initialize();
}
function initialize()
{
	var elem;

	elem = document.getElementById('screenshade');
	elem.style.filter = 'alpha(opacity=0)';
	elem.style.opacity = '0';

	elem = document.getElementById('player_damage');
	elem.style.width = '0px';
	elem = document.getElementById('enemy_damage');
	elem.style.width = '0px';

	elem = document.getElementById('roundnumber');
	elem.src = 'images/posterround1.gif';

	elem = document.getElementById('roundlabel');
	elem.src = 'images/round1.gif';

	roundNum = 1;
	idling = true;
	idleticks = 0;
	gameticks = 2;
	player_knockout = false;
	enemy_knockout = false;
	enemyKOs = 0;
	playerKOs = 0;
	screen_opacity = 0;

	points = 0;
	resetScore();

	minutes = 0;
	tenseconds = 0;
	oneseconds = 0;
	updateClock();

	gameover = false;
	endround = false;

	pDamage = 0;
	cDamage = 0;

	// start the game loop
	displayRound(roundNum, 'cont');
}

function displayRound(num, status)
{
	var elem = document.getElementById('posterround');
	elem.style.display = 'block';

	if (status == 'start') {
		marqueePos = -400;
		elem.style.top = marqueePos + 'px';
		elem = document.getElementById('roundnumber');
		elem.src = 'images/posterround' + num + '.gif';
		elem = document.getElementById('roundlabel');
		elem.src = 'images/round' + num + '.gif';
		setTimeout("displayRound("+num+",'cont')", 50);
	}
	else if (status == 'cont') {
		if (marqueePos < 0) {
			marqueePos += 20;
			elem.style.top = marqueePos + 'px';
			setTimeout("displayRound("+num+",'cont')", 50);
		}
		else {
			setTimeout("displayRound("+num+",'halt')", 2500);
		}
	}
	else if (status == 'halt') {
		elem.style.display = 'none';
		beginRound();
	}
}

function resetScore()
{
	var score;
	for (i = 1; i < 5; i++) {
		score = document.getElementById('slot'+i);
		score.style.display = 'none';
	}
}
function updateScore()
{
	var score, temp, i = 1;
	for (temp = Math.floor(points/10); temp > 0; temp = Math.floor(temp/10)) {
		score = document.getElementById('slot'+i);
		score.style.display = "block";
		score.src = "images/n" + (temp - Math.floor(temp/10)*10) + ".gif";
		i++;
	}
}

function beginRound()
{
	var elem;
	idling = true;
	enemy_knockout = false;
	player_knockout = false;
	endround = false;
	//playerKOs = 0;
	//enemyKOs = 0;
	gameticks = 2;
	// players reclaim health
	if (roundNum > 1) {
		recovery = Math.floor(Math.random()*2)+4;
		cDamage -= recovery * 10;
		if (cDamage < 0) cDamage = 0;
		elem = document.getElementById('enemy_damage');
		elem.style.width = cDamage;
		recovery = Math.floor(Math.random()*3)+3;
		pDamage -= recovery * 10;
		if (pDamage < 0) pDamage = 0;
		elem = document.getElementById('player_damage');
		elem.style.width = pDamage;
	}
	recover();
	resetClock();
	dodgeZones(true);
	hitZones(true);
	gameLoop();
}

function endRound()
{
	clearTimeout(KOtimer);
	clearInterval(gametimer);
	clearInterval(attacktimer);
	idling = false;
	attacking = false;
	hitZones(false);
	dodgeZones(false);
	setTimeout("displayRound("+roundNum+", 'start')", 1500);
}

function renderGetUp(frame, location)
{
	var elem, framerate, recovery;
	elem = document.getElementById('count');
	elem.style.display = "none";

	switch (frame) {
		case 1:
			// amount of health regained
			recovery = Math.floor(Math.random()*2)+4;
			cDamage -= recovery * 10;
			if (cDamage < 0) cDamage = 0;
			elem = document.getElementById('enemy_damage');
			elem.style.width = cDamage;
			elem = document.getElementById('glass_joe');
			elem.style.top = startingY + 20;
			location == 'r' ?	elem.style.left = startingX + 90 : elem.style.left = startingX - 90;
			elem = document.getElementById('sprite');
			elem.src = 'images/getup1.gif';
			elem.style.width = '6em';
			elem.style.height = '6em';
			framerate = 500;
		break;
		case 2:
			elem = document.getElementById('glass_joe');
			elem.style.top = startingY + 10;
			location == 'r' ?	elem.style.left = startingX + 90 : elem.style.left = startingX - 90;
			elem = document.getElementById('sprite');
			elem.src = 'images/getup2.gif';
			elem.style.width = '5em';
			elem.style.height = '8em';
			framerate = 800;
		break;
		case 3:
			elem = document.getElementById('glass_joe');
			elem.style.top = startingY + 10;
			location == 'r' ?	elem.style.left = startingX + 70 : elem.style.left = startingX - 70;
			elem = document.getElementById('sprite');
			elem.src = sprites["idleJoe3"].image;
			elem.style.width = '5em';
			elem.style.height = '12.4em';
			framerate = 200;
		break;
		case 4:
			elem = document.getElementById('glass_joe');
			elem.style.top = startingY + 10;
			location == 'r' ?	elem.style.left = startingX + 50 : elem.style.left = startingX - 50;
			elem = document.getElementById('sprite');
			elem.src = sprites["idleJoe4"].image;
			elem.style.width = '5.4em';
			elem.style.height = '14.2em';
			framerate = 200;
		break;
		case 5:
			elem = document.getElementById('glass_joe');
			elem.style.top = startingY + 20;
			location == 'r' ?	elem.style.left = startingX + 30 : elem.style.left = startingX - 30;
			elem = document.getElementById('sprite');
			elem.src = sprites["idleJoe5"].image;
			elem.style.width =  sprites["idleJoe5"].width;
			elem.style.height =  sprites["idleJoe5"].height;
			framerate = 200;
		break;
	}
	frame++;
	if (frame < 6)	{
		setTimeout("renderGetUp(" + frame +",'" + location + "')", framerate);
	}
	else {
		recover();
		gameLoop();
	}
}

function timeToKO(count, arg)
{
	var elem, rand;
	elem = document.getElementById('count');
	elem.style.display = "block";

	switch (arg) {
		case "start":	// initiate countdown for player, rather than opponent
			elem.style.top = "386px";
			elem.style.left = "155px";
		break;
		case "stop":
			elem.style.display = "none";
			clearTimeout(KOtimer);
			return;
		break;
		case "r":	// opponent was knocked out with a right punch
			elem.style.top = "200px";
			elem.style.left = "268px";
		break;
		case "l":	// opponent was knocked out with a left punch
			elem.style.top = "200px";
			elem.style.left = "34px";
		break;
	}

	elem = document.getElementById('countnumber');
	elem.src = "images/n" + count + ".gif";

	// determine random chance of getting up
	if (count > 3 && arg != "start") {
		// odds of getting up improve with time
		rand = Math.floor(Math.random()*(10-count));
		if (!rand) { renderGetUp(1, arg); return; }
	}

	count++;
	if (count < 11) {
		KOtimer = setTimeout("timeToKO(" + count + ",'" + arg + "')", 1000);
	}
	else {
		elem = document.getElementById('count');
		elem.style.display = "none";
		elem = document.getElementById('tapscreen');
		elem.style.display = "none";
		(arg != "start") ? endGame("KO! You win!") : endGame("KO! You lose.");
	}
}

function doDamage(target, pain)
{
	var elem;
	// each health meter is 60px wide
	if (target == "p")	{	// player was dealt damage
		pDamage += pain;
		elem = document.getElementById('player_damage');
		if (pDamage > 49) {
			elem.style.width = 50;
			playerKOs++;
			player_knockout = true;
		}
		else
			elem.style.width = pDamage + 'px';
	}
	else {					// opponent was dealt damage
		cDamage += pain;
		elem = document.getElementById('enemy_damage');
		if (cDamage > 59) {
			// knockout
			points += Math.floor((600 - gameticks)/10)*40;
			elem.style.width = 60;
			enemyKOs++;
			enemy_knockout = true;
		} else {
			points += 10;
			elem.style.width = cDamage + 'px';
		}
		updateScore();
	}
}

function resetClock()
{
	var elem;
	minutes = 0;
	tenseconds = 0;
	oneseconds = 0;

	elem = document.getElementById('minutes');
	elem.src = 'images/n' + minutes + '.gif';
	elem = document.getElementById('tenseconds');
	elem.src = 'images/n' + tenseconds + '.gif';
	elem = document.getElementById('oneseconds');
	elem.src = 'images/n' + oneseconds + '.gif';
}

function updateClock()
{
	var elem;
	// oneseconds, tenseconds, minutes
	if (oneseconds < 9) {
		oneseconds++;
	}
	else {
		oneseconds = 0;
		if (tenseconds < 5) {
			tenseconds++;
		}
		else {
			tenseconds = 0;
			if (minutes	< 1)
				minutes++;
			else {
				endround = true;
				minutes = 2; tenseconds = 0; oneseconds = 0;
				roundNum++;
				if (roundNum < 4)
					endRound();
				else
                    endGame("Time's Up! You lose by decision.");
			}
		}
	}

	elem = document.getElementById('minutes');
	elem.src = 'images/n' + minutes + '.gif';
	elem = document.getElementById('tenseconds');
	elem.src = 'images/n' + tenseconds + '.gif';
	elem = document.getElementById('oneseconds');
	elem.src = 'images/n' + oneseconds + '.gif';
}

function endGame(comment)
{
	var elem;
	var answer;

	clearTimeout(KOtimer);
	clearInterval(gametimer);
	clearInterval(attacktimer);
	idling = false;
	attacking = false;
	hitZones(false);
	dodgeZones(false);

	answer = confirm(comment + " Rematch?");
	if (answer)
        initialize();
}

function renderKO(direction, koPhase)
{
	var elem;
	var timeout;
	if (!koPhase) {
		idling = false;

		// cancel any pending attacks
		clearTimeout(attacktimer);
		// stop the game clock
		clearTimeout(gametimer);
		// cancel recovery timer
		clearTimeout(recovertimer);

		// disable hit zones
		dodgeZones(false);
		hitZones(false);

		// if punch is coming from the right, go left, and vice versa
		direction.charAt(0) == 'l' ? direction = 'r' : direction = 'l';


		elem = document.getElementById('glass_joe');
		elem.style.top = startingY - 20;
		direction == 'r' ?	elem.style.left = startingX + 40 : elem.style.left = startingX - 40;
		elem = document.getElementById('sprite');
		elem.src = 'images/' + direction + 'ko1.gif';
		elem.style.width = '6.4em';
		elem.style.height = '14em';
		timeout = 400;
	} else if (koPhase == 1) {
		elem = document.getElementById('glass_joe');
		elem.style.top = startingY + 20;
		direction == 'r' ?	elem.style.left = startingX + 90 : elem.style.left = startingX - 90;
		elem = document.getElementById('sprite');
		elem.src = 'images/' + direction + 'ko2.gif';
		elem.style.width = '6em';
		elem.style.height = '8em';
		timeout = 300;
	} else if (koPhase == 2) {
		elem = document.getElementById('glass_joe');
		elem.style.top = startingY + 30;
		direction == 'r' ?	elem.style.left = startingX + 100 : elem.style.left = startingX - 100;
		elem = document.getElementById('sprite');
		elem.src = 'images/' + direction + 'ko3.gif';
		elem.style.width = '6em';
		elem.style.height = '6em';
		timeout = 100;
	} else if (koPhase == 3) {
		elem = document.getElementById('glass_joe');
		elem.style.top = startingY + 28;
		direction == 'r' ?	elem.style.left = startingX + 100 : elem.style.left = startingX - 100;
		timeout = 100;
	} else if (koPhase == 4) {
		elem = document.getElementById('glass_joe');
		elem.style.top = startingY + 30;
		direction == 'r' ?	elem.style.left = startingX + 100 : elem.style.left = startingX - 100;
		// start the count
		(enemyKOs < 3) ? timeToKO(1, direction) : endGame("TKO! You win!");
	}


	koPhase++;
	if (koPhase < 5)
        setTimeout("renderKO('" + direction + "'," + koPhase + ")", timeout);
}

function gameLoop()
{
	var rnum;

	if (gameover || endround) { return; }
	// update the clock every other frame
	if (!(++gameticks%2)) {	updateClock();	}

	if (idling) {

		if (idleticks == 10) {		// every 10 idleticks, check to see if enemy moves guard or attacks
			rnum = Math.floor(Math.random()*6);
			// 1 in 3 chances of changing guard.  if guardUp is 0, make it 3, else, make it 0
			if (!rnum) { !guardUp ? guardUp = true : guardUp = false; }
			if (rnum < 4) { attacking = true; }
			idleticks = 0;
		}

		(attacking && !player_knockout) ? attack(0) : renderIdle();
	}
	idleticks++;
	gametimer = setTimeout('gameLoop()', 200);
}

// enemy recovers from a block or hit
function recover(extra)
{
	var elem;
	if (extra == 'stunned') { // revert to stunned sprite
		clearTimeout(recovertimer);
		elem = document.getElementById('glass_joe');
		elem.style.top = sprites["stunned"].y;
		elem.style.left = sprites["stunned"].x;

		elem = document.getElementById('sprite');
		elem.src = sprites["stunned"].image;
		elem.style.width = sprites["stunned"].width;
		elem.style.height = sprites["stunned"].height;
		elem = document.getElementById('crack');
		elem.style.display = 'none';

		hitZones(true);
		dodgeZones(true);
		recovertimer = setTimeout("recover()", 1000);
		return;
	}
	if (!gameover) {
		if (!player_knockout) {	dodgeZones(true); hitZones(true); }
		idleticks = 0;
		idling = true;
		player_knockout = false;
		enemy_knockout = false;
		attacking = false;
		stunned = false;
	}
	elem = document.getElementById('crack');
	elem.style.display = 'none';
}

function playerRecover()
{
	var elem;
	if (screen_opacity > 0) {
		screen_opacity -= 30;
		elem = document.getElementById('screenshade');
		elem.style.filter = 'alpha(opacity=' + screen_opacity + ')';
		elem.style.opacity = '.' + screen_opacity;
		if (screen_opacity == 0) {
			screen_opacity = 0;
			elem = document.getElementById('tapscreen');
			elem.style.display = 'none';
			// amount of damage regained
			var recovery = Math.floor(Math.random()*3)+3;
			pDamage -= recovery * 10;
			if (pDamage < 0) pDamage = 0;
			elem = document.getElementById('player_damage');
			elem.style.width = pDamage;
			// halt the countdown, if any
			timeToKO(1, 'stop');
			recover();
			gameLoop();
		}
	}
}

function renderIdle()
{
	var elem;
	elem = document.getElementById('glass_joe');

	// move Joe side to side
	if (which == 0) {
		currentX = startingX + 4;
		currentY = startingY;
		which = 1;
		movingLeft = false;
	}
	else if (which == 1) {
		currentX = startingX;
		currentY = startingY + 7;
		movingLeft ? which = 0 : which = 2;
	}
	else {
		currentX = startingX - 4;
		currentY = startingY;
		which = 1;
		movingLeft = true;
	}

	elem.style.top = currentY;
	elem.style.left = currentX;

	elem = document.getElementById('sprite');
	guardUp ? elem.src = sprites["idleJoe"+(which+3)].image : elem.src = sprites["idleJoe"+which].image;
	elem.style.width = sprites["idleJoe"+which].width;
	elem.style.height = sprites["idleJoe"+which].height;
}

// this function checks to see if the computer will block a strike
function wasBlocked(punch)
{
	var guarded, elem, rand;

	// determine if parrying the direction of the strike
	switch (punch) {
		case 'leftUpper':
		case 'rightUpper':
			guardUp ? guarded = true : guarded = false;
		break;
		case 'leftBody':
		case 'rightBody':
			!guardUp ? guarded = true : guarded = false;
		break;
	}

	if (attacking) {
		//rand = Math.floor(Math.random()*5);
		// was punch blocked, regardless?
		//if (!rand) { renderEnemyBlock(punch); return true; } else { return false; }
	}
	else if (guarded) {		// strike is blocked
		rand = Math.floor(Math.random()*3);
		// was punch blocked, regardless?
		if (!rand) { renderEnemyBlock(punch); return true; } else { return false; }
		return true;
	}
	else {
		rand = Math.floor(Math.random()*2);
		// was punch blocked, regardless?
		//if (!rand) { renderEnemyBlock(punch); }
		// change guard?
		if (!guarded && !rand) { guardUp = !guardUp; return true; } else { return false; }
	}
}

function renderEnemyBlock(p)
{
	var elem;
	if (p == 'leftUpper' || p == 'rightUpper') {
		elem = document.getElementById('sprite');
		elem.src = 'images/gjoeblock2.gif';
		elem.style.width = '7em';
		elem.style.height = '16em';
		elem = document.getElementById('glass_joe');
		elem.style.top = currentY;
		elem.style.left = currentX;
	} else {
		elem = document.getElementById('sprite');
		elem.src = 'images/gjoeblock1.gif';
		elem = document.getElementById('glass_joe');
		elem.style.top = currentY + 10;
		elem.style.left = currentX;
	}
}

function renderPlayerKO(value)
{
	var elem;

	// stop the game clock
	clearTimeout(gametimer);

	hitZones(false);
	dodgeZones(false);

	elem = document.getElementById('screenshade');
	elem.style.filter = 'alpha(opacity=' + value + ')';
	elem.style.opacity = '.' + value;
	value += 5;
	if (value < 90) {
		setTimeout("renderPlayerKO(" + value + ")", 50);
	}
	else {
		if (playerKOs < 3) {
			screen_opacity = 90;
			elem = document.getElementById('tapscreen');
			elem.style.display = 'block';
			timeToKO(1, 'start');
		}
		else {
			endGame("TKO! You lose.");
		}
	}
}

function dodge(where)
{
	var stage;
	if (!dodging) { dodgeZones(false); hitZones(false); dodging = true; }

	stage = document.getElementById('stage');
	var posX = parseInt(stage.style.left);
	var posY = parseInt(stage.style.top);

	switch (where) {
		case 'left':
			if (posX != 40) {
				stage.style.left = posX + 20;
				stage.style.top = posY + 5;
				setTimeout("dodge('left')", 100);
			}
			else {
				setTimeout("dodge('returnright')", 400);
			}
		break;
		case 'right':
			if (posX != -40) {
				stage.style.left = posX - 20;
				stage.style.top = posY + 5;
				setTimeout("dodge('right')", 100);
			}
			else {
				setTimeout("dodge('returnleft')", 400);
			}
		break;
	  	case 'returnright':
			if (posX != 0) {
				stage.style.left = posX - 20;
				stage.style.top = posY - 5;
				setTimeout("dodge('returnright')", 100);
			}
			else {
				dodging = false;
				if (!gameover) { dodgeZones(true); hitZones(true); }
			}
		break;
		case 'returnleft':
			if (posX != 0) {
				stage.style.left = posX + 20;
				stage.style.top = posY - 5;
				setTimeout("dodge('returnleft')", 100);
			}
			else {
				dodging = false;
				if (!gameover) { dodgeZones(true); hitZones(true); }
			}
		break;
	}
}

function attack(attackPhase)
{
	var elem, randomDmg;
	idling = false;

	if (attacking) {
		elem = document.getElementById('glass_joe');
		elem.style.top = sprites["upperCut"+attackPhase].y;
		elem.style.left = sprites["upperCut"+attackPhase].x;

		elem = document.getElementById('sprite');
		elem.src = sprites["upperCut"+attackPhase].image;
		elem.style.width = sprites["upperCut"+attackPhase].width;
		elem.style.height = sprites["upperCut"+attackPhase].height;

		++attackPhase;
		if (attackPhase == 1 || attackPhase == 2) {
			hitZones(false);
			attacktimer = setTimeout("attack('" + attackPhase + "')", 200);
		}
		else if (attackPhase == 3) {
			timeToStrike = 800;
			//timeToStrike = (Math.round(Math.random()*6)+1)*250;
			attacktimer = setTimeout("attack('" + attackPhase + "')", timeToStrike);
		}
		else if (attackPhase == 4) {
			if (!dodging) {
				dodgeZones(false);
				randomDmg = (Math.round(Math.random()*3)+1)*10;
				doDamage('p', randomDmg);
				if (player_knockout) {
					setTimeout("renderPlayerKO(" + 0 + ")", 200);
				}
				else {
					elem = document.getElementById('crack');
					elem.style.display = 'block';
				}
			}
			attacktimer = setTimeout("attack('" + attackPhase + "')", 200);
		}
		else {
			if (!player_knockout) hitZones(true);
			attacktimer = setTimeout('recover()', 800);
		}
	}
}
function processStunned(strikezone)
{
	var elem = document.getElementById('glass_joe');
	elem.style.top = sprites[strikezone + "Hit"].y;
	elem.style.left = sprites[strikezone + "Hit"].x;

	elem = document.getElementById('sprite');
	elem.src = sprites[strikezone + "Hit"].image;
	elem.style.width = sprites[strikezone + "Hit"].width;
	elem.style.height = sprites[strikezone + "Hit"].height;

	if (enemy_knockout) {
		setTimeout("renderKO('" + strikezone + "'," + 0 + ")", 400);

	} else {
		if (--stunpunches) {
			recovertimer = setTimeout("recover('stunned')", 400);
		} else {
			stunned = false;
			recovertimer = setTimeout("recover()", 400);
		}
	}
}
function defend(strikezone)
{
	var elem, rand, blocked = false;
	idling = false;

	// disable hit zones
	hitZones(false);

	// cancel any pending attacks
	clearTimeout(attacktimer);

	if (!stunned) { blocked = wasBlocked(strikezone); }

	// check if strike is deflected or not
	if (!blocked) {

		// calculate base damage + bonus
		rand = Math.floor(Math.random()*4) + 6;
		doDamage('c', rand);

		if (stunned) {
			clearTimeout(recovertimer);
			processStunned(strikezone);
		}
		else if (attacking) {	// check to see if stun-punched
			elem = document.getElementById('crack');
			elem.style.display = 'none';
			elem = document.getElementById('glass_joe');
			elem.style.top = sprites["stunned"].y;
			elem.style.left = sprites["stunned"].x;

			elem = document.getElementById('sprite');
			elem.src = sprites["stunned"].image;
			elem.style.width = sprites["stunned"].width;
			elem.style.height = sprites["stunned"].height;
			stunned = true;
			hitZones(true);
			dodgeZones(true);
			// determine the amount of times player can strike before enemy becomes unstunned
			stunpunches = Math.round(Math.random()*3)+2;
			clearTimeout(recovertimer);
			enemy_knockout ? setTimeout("renderKO('" + strikezone + "'," + 0 + ")", 400) : recovertimer = setTimeout("recover()", 1000);
		}
		else {
			clearTimeout(recovertimer);
			elem = document.getElementById('glass_joe');
			elem.style.top = sprites[strikezone + "Hit"].y;
			elem.style.left = sprites[strikezone + "Hit"].x;

			elem = document.getElementById('sprite');
			elem.src = sprites[strikezone + "Hit"].image;
			elem.style.width = sprites[strikezone + "Hit"].width;
			elem.style.height = sprites[strikezone + "Hit"].height;
			enemy_knockout ? setTimeout("renderKO('" + strikezone + "'," + 0 + ")", 400) : recovertimer = setTimeout("recover()", 400);
		}

	} else {
		// if punch is blocked successfully, determine if counterpunch
		rand = Math.floor(Math.random()*2);
		if (!rand) { recover(); attacking = true; } else { recovertimer = setTimeout('recover()', 400); }
	}
}

function hitZones(enabled)
{
	var hitarea;
	if (enabled) {
		hitarea = document.getElementById('left_upper_zone');
		hitarea.style.display = 'block';

		hitarea = document.getElementById('right_upper_zone');
		hitarea.style.display = 'block';

		hitarea = document.getElementById('left_lower_zone');
		hitarea.style.display = 'block';

		hitarea = document.getElementById('right_lower_zone');
		hitarea.style.display = 'block';
	}
	else {
		hitarea = document.getElementById('left_upper_zone');
		hitarea.style.display = 'none';

		hitarea = document.getElementById('right_upper_zone');
		hitarea.style.display = 'none';

		hitarea = document.getElementById('left_lower_zone');
		hitarea.style.display = 'none';

		hitarea = document.getElementById('right_lower_zone');
		hitarea.style.display = 'none';
	}
}

function dodgeZones(enabled)
{
	var hitarea;
	if (enabled) {
		hitarea = document.getElementById('left_dodge_zone');
		hitarea.style.display = 'block';

		hitarea = document.getElementById('right_dodge_zone');
		hitarea.style.display = 'block';
	}
	else {
		hitarea = document.getElementById('left_dodge_zone');
		hitarea.style.display = 'none';

		hitarea = document.getElementById('right_dodge_zone');
		hitarea.style.display = 'none';
	}
}
////////////////////////////////////////
// IMAGE PRELOADER CODE
////////////////////////////////////////
var numImagesLoaded = 0;
var TOTAL_IMAGES = 44;

function checkImagesLoaded()
{
	++numImagesLoaded;
	var preloader = document.getElementById('preloader');

	if (preloader == null) {	// create preloader graphics
		preloader = document.createElement('div');
		preloader.setAttribute('id', 'preloaderBG');
		preloader.style.display = 'block';
		preloader.style.position = 'absolute';
		preloader.style.top = '158px';
		preloader.style.left = '109px';
		preloader.style.height = '11px';
		preloader.style.width = '98px';
		preloader.style.border = 'thin solid #dddddd';
		document.body.appendChild(preloader);
		preloader = document.createElement('div');
		preloader.setAttribute('id', 'preloader');
		preloader.style.position = 'absolute';
		preloader.style.display = 'block';
		preloader.style.top = '160px';
		preloader.style.left = '110px';
		preloader.style.height = '10px';
		preloader.style.width = '0px';
		preloader.style.color = '#aaaaaa';
		preloader.style.fontFamily = 'Arial, Helvetica, sans-serif';
		preloader.style.fontSize = '14px';
		preloader.style.background = '#ddeeff';
		preloader.innerHTML = '<p>Loading Sprites...</p>';
		document.body.appendChild(preloader);
	}

	preloader.style.width = Math.floor(numImagesLoaded*100/TOTAL_IMAGES) + 'px';
	if (numImagesLoaded == TOTAL_IMAGES) {
		preloader.innerHTML = '<p>Starting Game...</p>';
	}
}

var sprites = new cSpriteList("stunned", "leftUpperHit", "rightUpperHit", "leftBodyHit", "rightBodyHit", "upperCut0", "upperCut1", "upperCut2", "upperCut3", "upperCut4", "idleJoe0", "idleJoe1", "idleJoe2", "idleJoe3", "idleJoe4", "idleJoe5");

sprites["stunned"].x = 120;
sprites["stunned"].y = 64;
sprites["stunned"].width = '6em';
sprites["stunned"].height = '16em';
sprites["stunned"].image = 'images/gjoestunned.gif';

sprites["leftUpperHit"].x = 128;
sprites["leftUpperHit"].y = 60;
sprites["leftUpperHit"].width = '7em';
sprites["leftUpperHit"].height = '16em';
sprites["leftUpperHit"].image = 'images/gjoeluppcut0.gif';

sprites["rightUpperHit"].x = 80;
sprites["rightUpperHit"].y = 60;
sprites["rightUpperHit"].width = '7em';
sprites["rightUpperHit"].height = '16em';
sprites["rightUpperHit"].image = 'images/gjoeruppcut0.gif';

sprites["leftBodyHit"].x = 130;
sprites["leftBodyHit"].y = 90;
sprites["leftBodyHit"].width = '6.4em';
sprites["leftBodyHit"].height = '14em';
sprites["leftBodyHit"].image = 'images/gjoebodyblow.gif';

sprites["rightBodyHit"].x = 94;
sprites["rightBodyHit"].y = 84;
sprites["rightBodyHit"].width = '6.4em';
sprites["rightBodyHit"].height = '14em';
sprites["rightBodyHit"].image = 'images/gjoebodyblow.gif';

sprites["upperCut0"].x = 80;
sprites["upperCut0"].y = 80;
sprites["upperCut0"].width = '6.8em';
sprites["upperCut0"].height = '15em';
sprites["upperCut0"].image = 'images/gjoepunch0.gif';

sprites["upperCut1"].x = 80;
sprites["upperCut1"].y = 80;
sprites["upperCut1"].width = '6.8em';
sprites["upperCut1"].height = '15em';
sprites["upperCut1"].image = 'images/gjoepunch1.gif';

sprites["upperCut2"].x = 80;
sprites["upperCut2"].y = 80;
sprites["upperCut2"].width = '6.8em';
sprites["upperCut2"].height = '15em';
sprites["upperCut2"].image = 'images/gjoepunch0.gif';

sprites["upperCut3"].x = 130;
sprites["upperCut3"].y = 80;
sprites["upperCut3"].width = '6.8em';
sprites["upperCut3"].height = '15em';
sprites["upperCut3"].image = 'images/gjoepunch2.gif';

sprites["upperCut4"].x = 130;
sprites["upperCut4"].y = 80;
sprites["upperCut4"].width = '6.8em';
sprites["upperCut4"].height = '15em';
sprites["upperCut4"].image = 'images/gjoepunch3.gif';

sprites["idleJoe0"].x = 128;
sprites["idleJoe0"].y = 60;
sprites["idleJoe0"].width = '6.4em';
sprites["idleJoe0"].height = '16.8em';
sprites["idleJoe0"].image = 'images/gjoeidle0.gif';

sprites["idleJoe1"].x = 128;
sprites["idleJoe1"].y = 60;
sprites["idleJoe1"].width = '6.4em';
sprites["idleJoe1"].height = '16.8em';
sprites["idleJoe1"].image = 'images/gjoeidle1.gif';

sprites["idleJoe2"].x = 128;
sprites["idleJoe2"].y = 60;
sprites["idleJoe2"].width = '6.4em';
sprites["idleJoe2"].height = '16.8em';
sprites["idleJoe2"].image = 'images/gjoeidle2.gif';

sprites["idleJoe3"].x = 128;
sprites["idleJoe3"].y = 60;
sprites["idleJoe3"].width = '6.4em';
sprites["idleJoe3"].height = '16.8em';
sprites["idleJoe3"].image = 'images/gjoeidle3.gif';

sprites["idleJoe4"].x = 128;
sprites["idleJoe4"].y = 60;
sprites["idleJoe4"].width = '6.4em';
sprites["idleJoe4"].height = '16.8em';
sprites["idleJoe4"].image = 'images/gjoeidle4.gif';

sprites["idleJoe5"].x = 128;
sprites["idleJoe5"].y = 60;
sprites["idleJoe5"].width = '6.4em';
sprites["idleJoe5"].height = '16.8em';
sprites["idleJoe5"].image = 'images/gjoeidle5.gif';