document.body.style.margin = PAGEMARGIN + "px";
document.body.style.background = PAGECOLOUR;
document.body.style.textAlign = "center";

var pageTitle = document.createElement("title");
pageTitle.innerHTML = TITLE;
document.head.appendChild(pageTitle);

var pageHeading = document.createElement("div");
pageHeading.style.width = (PLAYAREAWIDTH - 20) + "px";
pageHeading.style.color = MAINFONTCOLOUR;
pageHeading.style.background = HEADINGBGCOLOUR;
pageHeading.style.textAlign = "center";
pageHeading.style.font = "bold 20px Verdana,Geneva,sans-serif";
pageHeading.style.margin = "0px auto 0px auto";
pageHeading.style.padding = "10px 10px 10px 10px";
pageHeading.innerHTML = TITLE;
document.body.appendChild(pageHeading);

var scoreBox = document.createElement("div");
scoreBox.style.width = (PLAYAREAWIDTH - 20) + "px";
scoreBox.style.color = MAINFONTCOLOUR;
scoreBox.style.background = HEADINGBGCOLOUR;
scoreBox.style.textAlign = "center";
scoreBox.style.font = "14px Verdana,Geneva,sans-serif";
scoreBox.style.margin = "0px auto 0px auto";
scoreBox.style.padding = "0px 10px 10px 10px";
scoreBox.innerHTML = "Score: 0";
document.body.appendChild(scoreBox);

// Create the playing area 

var playArea = document.createElement("div");
playArea.style.width = PLAYAREAWIDTH + "px";
playArea.style.height = PLAYAREAHEIGHT + "px";
playArea.style.margin = "0px auto 0px auto";
playArea.style.background = PLAYAREACOLOUR;
playArea.style.position = "relative";
playArea.style.zIndex = PLAYAREAZINDEX;
document.body.appendChild(playArea);

// Display the instructions

var instructions = document.createElement("div");
instructions.style.width = (PLAYAREAWIDTH - 14) + "px";
instructions.style.color = MAINFONTCOLOUR;
instructions.style.background = INSBGCOLOUR;
instructions.style.textAlign = "center";
instructions.style.font = "14px Verdana,Geneva,sans-serif";
instructions.style.margin = "0px auto 0px auto";
instructions.style.padding = "7px";
instructions.innerHTML = "<B>S</B> &nbsp;Start &nbsp; &nbsp; &#9664; &nbsp;Left &nbsp; &nbsp; &#9654; &nbsp;Right";
document.body.appendChild(instructions);

// Create the road

var roadPieces = []; // an array of the rectangles that make up the road
var roadPiece = 0;   // will serve as the index of the roadPieces array

for (roadPiece = 0; roadPiece < NUMROADPIECES ; roadPiece++)
{
   roadPieces[roadPiece] = document.createElement("div");
   roadPieces[roadPiece].style.width = ROADWIDTH + "px";
   roadPieces[roadPiece].style.height = ANIMDELTA + "px";
   roadPieces[roadPiece].style.background = ROADCOLOUR;
   roadPieces[roadPiece].style.position = "absolute";
   roadPieces[roadPiece].style.zIndex = ROADZINDEX;
   roadPieces[roadPiece].style.left = ROADINITPOS + "px";
   roadPieces[roadPiece].style.top = (roadPiece * ANIMDELTA) + "px";
   playArea.appendChild(roadPieces[roadPiece]);
   
}
var carOnPiece = Math.floor(3/4*NUMROADPIECES); // constant in this version

// Create the car (the manipulation below results in a triangle)

var car = document.createElement("div");
car.style.width = BLOCKSIZE + "px";
car.style.height = BLOCKSIZE + "px";
car.style.background = CARCOLOUR;
car.style.position = "absolute";
car.style.zIndex = CARZINDEX;
car.style.left = CARINITPOS + "px";
car.style.top = roadPieces[carOnPiece].style.top;
playArea.appendChild(car);

// Listen for key presses

var gameIsRunning = false;
var changeInCarPos = 0; // used for steering

document.onkeydown = checkDown;
function checkDown(e)
{
	if (e.keyCode === 37) changeInCarPos = -ANIMDELTA;	// 37 left cursor
	else if (e.keyCode === 39) changeInCarPos = ANIMDELTA;	// 39 right cursor
	else if (e.keyCode === 83 && !gameIsRunning)	// 83 is S
	{
		gameIsRunning = true;
		runGame();
	}
	
}

document.onkeyup = checkLift;
function checkLift(e)
{
	if
	(
		(e.keyCode === 37 && changeInCarPos < 0) ||		// 37 left cursor
		(e.keyCode === 39 && changeInCarPos > 0)		// 39 right cursor
	)
	changeInCarPos = 0;
}

// The game loop

function runGame()
{
   var score = 0;                   // The score
   var timeDelta = INITTIMEDELTA;   // Initial delay between each frame
   var flashNumber = NUMFLASHES;    // Flashes left on death animation
   
   var carLeftEdge = CARINITPOS;
   var roadLeftEdges = [];
   for (roadPiece = 0; roadPiece < NUMROADPIECES ; roadPiece++)
      roadLeftEdges[roadPiece] = ROADINITPOS;
   var changedLeftRoadEdge = ROADINITPOS;
   var roadDiceThrow = 0;
   var changeInRoadPos = 0;   // note: changeInCarPos is defined above
   
   // reset positions of the road and car
   
   render();
   
   // start difficulty timer
   
   var difficultyTimer = setTimeout(increaseDifficulty, DIFFICULTYPERIOD);
   
   function increaseDifficulty()
   {
      if (gameIsRunning)
      {
         if (timeDelta > MINTIMEDELTA) timeDelta--;
         difficultyTimer = setTimeout(increaseDifficulty, DIFFICULTYPERIOD);
      }
   }

   // start the game loop
   
   var frame = setTimeout(gameLoop, timeDelta);    
   
   function gameLoop()
   {
      
		// calculate movement
      
		carLeftEdge += changeInCarPos;
		if (carLeftEdge < 0)
			carLeftEdge = 0;
		else if (carLeftEdge > (PLAYAREAWIDTH - BLOCKSIZE))
			carLeftEdge = PLAYAREAWIDTH - BLOCKSIZE;
		
		roadDiceThrow = Math.random();
		if (roadDiceThrow < ROADGOESLEFT) changeInRoadPos = -ANIMDELTA;
		else if (roadDiceThrow >= ROADGOESRIGHT) changeInRoadPos = ANIMDELTA;
		else changeInRoadPos = 0;
		
		changedLeftRoadEdge += changeInRoadPos;
		if (changedLeftRoadEdge < 0)
			changedLeftRoadEdge = 0;
		else if (changedLeftRoadEdge > (PLAYAREAWIDTH - ROADWIDTH))
			changedLeftRoadEdge = PLAYAREAWIDTH - ROADWIDTH;
		
		for (roadPiece = NUMROADPIECES - 1; roadPiece >= 1; roadPiece--)
			roadLeftEdges[roadPiece] = roadLeftEdges[roadPiece - 1];
		roadLeftEdges[0] = changedLeftRoadEdge;
       
		// render new physical state
  
		render();
      
		// collision detection
      
		if (
			 (carLeftEdge < roadLeftEdges[carOnPiece]) ||
			 (carLeftEdge + BLOCKSIZE > roadLeftEdges[carOnPiece] + ROADWIDTH)
		   )
		{
			gameIsRunning = false;
			frame = setTimeout(deathAnimation, FLASHPERIOD);
		}
		
		// scoring
      
		score++;
      
		// loop again if the game is still going
      
		if (gameIsRunning) frame = setTimeout(gameLoop, timeDelta);
   }
   
   function render()
   {
      for (roadPiece = 0; roadPiece < NUMROADPIECES ; roadPiece++)
         roadPieces[roadPiece].style.left = roadLeftEdges[roadPiece] + "px";
      car.style.left = carLeftEdge + "px";
      //scoreBox.innerHTML = "Score: " + score + " (" + timeDelta + ")";
      scoreBox.innerHTML = "Score: " + score;
   }
   
   function deathAnimation()
   {
      if (flashNumber % 2 == 0)
         car.style.background = FLASHCOLOUR;
      else
         car.style.background = CARCOLOUR;

      flashNumber--;
      
      if (flashNumber > 0 && !gameIsRunning)
         frame = setTimeout(deathAnimation, FLASHPERIOD);
      else
         car.style.background = CARCOLOUR;
   }
}