var startAdjust = 0;
var sectionLengthMetres = 10;
var distanceMarkerMetres = 50;
var timerSpeed = 200;
var leadBoatPixels = 0;
var leadBoatMetres = 0;
var sectionLengthPixels = 40;		// value created dynamically in IE version
var screenWidthPixels = 0;
var distanceMarkerCount = 0;
var pixelsPerMetre = 0;
var lastLanePos = 0;

var metresToStartLine = 0;

var laneHeight = 34;
var offsetTopBoat = 60;             // was 54
var offsetTopLane = 46;             // was 40
var offsetBlackBarWidth = 46;

var startPos = 0;
var raceTime = 0;
var timer = new Date();
var nextSortDistance = 0;
var sortDistance = 200;
var slowestRowerTime = 0;
var countDownTimer = 0;

var nextId = 0;

// objects displayed on screen

var startButton = 0;
var scrollArea = 0;
var countDown = 0;
var timeDisplay = 0;

var dist0;
var distanceLine0;
var dist1;
var dist2left;

var countDownText = "6";                // text for countDown
var timeDisplayText = "00:00:00";       // something to start off with

var lanePad = 10;                       // why isn't this 0 ????

var distanceMarkerText = new Array();   // array of text elements contained within distanceMarkers
var boatResultTexts = new Array();      // 
var distanceLines = new Array();        //

var firstScroll = true;                 //
var lastLanePosPixels = 0;              //


var browser = new Object();             //

browser.version = parseInt(navigator.appVersion);
browser.isNetscape = false;
browser.isMicrosoft = false;
browser.isOpera = false;

if (navigator.appName.indexOf("Netscape") != -1)
{
    browser.isNetscape = true;
}
    
if (navigator.appName.indexOf("Microsoft") != -1)
{
    browser.isMicrosoft = true;
    offsetTopLane = offsetTopLane + 10;
    offsetTopBoat = offsetTopBoat + 2;
    lanePad = 0;
}    

if (navigator.appName.indexOf("Opera") != -1)
{
    browser.isOpera = true;
    offsetTopBoat = offsetTopBoat + 3;
}
    


function raceStart()
{
  startButton.style.visibility = "hidden";
  startPos = scrollArea.offsetLeft;
  timer.setHours( 0 );
  timer.setMinutes(0);
  nextSortDistance = sortDistance;
  
  countDown.style.visibility = "visible";
  countDownTimer = 5;
  startCountDown();
}


function startCountDown(){

  if ( countDownTimer > 0 )
  {
    countDown.removeChild(countDownText);
    countDownText = document.createTextNode(countDownTimer);
	countDown.appendChild(countDownText);
    countDownTimer=countDownTimer-1;
    setTimeout( "startCountDown()" , 1000 );
  }
  else 
  {
    countDown.style.visibility = "hidden";
    timeDisplay.style.visibility = "visible";
    dist0.style.left = "0px";
    dist0.metres = raceLength - startAdjust + distanceMarkerMetres;            // !!!!!
    dist0.style.visibility = "hidden";                                         // temporarily
    dist1.style.visibility = "visible";
    raceInterval();
  }
}

function raceInterval(){

// adjust the clock...
if (!distanceRace)
{
   timer.setTime( ( raceTotalTime - raceTime ) * 1000);
}
else
{
   timer.setTime( ( raceTime ) * 1000);
}
  var hours = timer.getHours();
  var minutes = timeJustify(timer.getMinutes());
  var seconds = timeJustify(timer.getSeconds());

  timeDisplay.removeChild(timeDisplayText);
  timeDisplayText = document.createTextNode(hours + ":" + minutes + ":" + seconds);
  timeDisplay.appendChild(timeDisplayText);

  var leadBoatDistance = leadDistance[raceTime];

  if ( leadBoatDistance < leadBoatMetres )
  {
    // Move boats across screen
    for ( boatNo = 0; boatNo < rowers.length ; boatNo++ )
    {
      // note - position of boat is (boat rear) - not boat nose.
      var boatPixels = ( leadBoatDistance - rower[boatNo][raceTime]) * pixelsPerMetre;
      document.getElementById("boat" + boatNo ).style.left = boatPixels + "px";
      if ( rowerRate[boatNo][raceTime] != 0 )
      {
        updateBoatResult(boatNo, rowerRate[boatNo][raceTime]);
      }
    }
  }
  else
  {
    // Scroll distance Markers
    
    for ( var distPtr = 0 ; distPtr < ( distanceMarkerCount ) ; distPtr++)
    {
      var distMarker = document.getElementById("dist"+distPtr);
      var laneMarker = document.getElementById("distLine"+distPtr);
      
      var markerDistanceFromLead = leadBoatDistance - (raceLength - distMarker.metres);

      if (markerDistanceFromLead > (leadBoatMetres + metresToStartLine))
      {
        // because its set to hidden, right at the beginning
        if (distPtr == 0)
        {
            distMarker.style.visibility = "visible";
            laneMarker.style.backgroundColor = "aqua";
            laneMarker.style.width = "1px";
        }
        
        distMarker.metres = distMarker.metres - ( distanceMarkerMetres * distanceMarkerCount );

        if ( distMarker.metres < 0 )
        {
            laneMarker.style.visibility = "hidden";
            distMarker.style.visibility = "hidden";
        }
        else 
        {
          var thisDistText = distanceMarkerText[distPtr];
          distMarker.removeChild(thisDistText);

          if (distanceRace)
          {
               thisDistText = document.createTextNode(distMarker.metres);
          }
          else
          {
               thisDistText = document.createTextNode(raceLength - distMarker.metres);
          }

          distMarker.appendChild(thisDistText);
          distanceMarkerText[distPtr] = thisDistText;
          
          if ( distMarker.metres == 0 )
          {
              laneMarker.style.backgroundColor = "white";
              laneMarker.style.width = "3px";
          }
        }
      }      
      distMarker.style.left = leadBoatPixels - (leadBoatDistance - (raceLength - distMarker.metres + metresToStartLine))*pixelsPerMetre  + "px";
      laneMarker.style.left = leadBoatPixels - (leadBoatDistance - (raceLength - distMarker.metres + metresToStartLine))*pixelsPerMetre  + "px";
    }

    for ( boatNo = 0; boatNo < rowers.length ; boatNo++){
      // Position each boat

      if ( raceTime < rower[boatNo].length ) 
      {
        var boatPosPixels = leadBoatPixels - (rower[boatNo][raceTime])*pixelsPerMetre;
        document.getElementById("boat" + boatNo).style.left = boatPosPixels + "px";

        if ( raceTime == ( rower[boatNo].length - 1 ) ) 
        {
          // Show final result
          raceSort();
          updateBoatResult(boatNo, results[boatNo]);
        }
        else
        {
          if ( rowerRate[boatNo][raceTime] != 0 )
          {
            updateBoatResult(boatNo, rowerRate[boatNo][raceTime]);
          }
        }
      }
    }
  }

  if ( leadBoatDistance >= nextSortDistance ){
    raceSort();
    nextSortDistance = nextSortDistance + sortDistance;
  }

  raceTime=raceTime+1;

  if ( raceTime < slowestRowerTime )
    setTimeout( "raceInterval()" ,  timerSpeed);

}


function updateBoatResult(boatNo, info)
{
    var thisBoat = document.getElementById("result"+boatNo);
    var thisBoatText = boatResultTexts[boatNo];
    thisBoat.removeChild(thisBoatText);
    var thisBoatText = document.createTextNode(info);
    thisBoat.appendChild(thisBoatText);
    boatResultTexts[boatNo] = thisBoatText;
}

function timeJustify( timeElement ){

  if (timeElement < 10 )
    timeElement = "0" + timeElement;

  return timeElement;
}

function createSortRower( rowerNo , distance ){
  this.rowerNo = rowerNo;
  this.distance = distance;
}

function raceSort(){

  return;

  var rowerCount = 0;
  var sortRowers = new Array();
  var startRowerPos = ( raceTime * (rowers.length + 1) ) + 1

  for ( rowerSortPtr =  0; rowerSortPtr < rowers.length; rowerSortPtr++ )
  {
    if (  raceTime < ( rower[rowerSortPtr].length - 2 ) )
    {
      var rowerDistance = leadDistance[raceTime] - rower[rowerSortPtr][raceTime];

      }
    else {
      var rowerDistance = raceLength + ( raceLength - rower[rowerSortPtr][0] );
  
    }

    sortRowers[ rowerSortPtr ] = new createSortRower( rowerSortPtr , rowerDistance );
  }

  sortRowers = sortRowers.sort( sortRowerFunc );

  for ( rowerCount = 0; rowerCount < rowers.length ; rowerCount++ ){
    var rowerPos = sortRowers[rowerCount].rowerNo;
    document.getElementById("boat"+rowerPos).style.top = ( offsetTopBoat + ( rowerCount * laneHeight )) + "px";
    document.getElementById("name"+rowerPos).style.top = ( offsetTopBoat + ( rowerCount * laneHeight )) + "px";
    document.getElementById("result"+rowerPos).style.top = ( offsetTopBoat + ( rowerCount * laneHeight )) + "px";
  }

}

function sortRowerFunc( rower1 , rower2 )
{
  if ( rower1.distance < rower2.distance ) retVal = 1;
  else if ( rower1.distance > rower2.distance )retVal = -1;
       else retVal = 0;
  return retVal;
}



/********************************************************************
*	build Screen													*
********************************************************************/

function buildScreen(){

    // Maximise window

    window.moveTo( 0 , 0 );
    window.resizeTo( screen.availWidth , screen.availHeight);

    screenWidthPixels = document.body.clientWidth;
    leadBoatPixels = ( screenWidthPixels / 100 ) * 75;


    // Is the raceDistance exactly divisible by 50 metres ??
    
    startAdjust = raceLength - (Math.floor(raceLength/distanceMarkerMetres)*distanceMarkerMetres);
    
    // Work out lane width

    pixelsPerMetre = sectionLengthPixels / sectionLengthMetres;
    leadBoatMetres = leadBoatPixels / pixelsPerMetre;
    screenWidthMetres = screenWidthPixels / pixelsPerMetre;
  
  
    var boatBodyWidthPixels = (sectionLengthPixels * 2) - 40;
    var wholeBoatWidthPixels = sectionLengthPixels * 2;
    metresToStartLine = Math.floor(wholeBoatWidthPixels/pixelsPerMetre);
  
  	// Distance labels for top of screen
  
  	var distanceArea = setupSpanId("distanceArea", document.body);
  	distanceArea.style.width = screenWidthPixels + "px";

  	var doneDistance = false;
  	var distanceMetres = raceLength;
  	

  	distanceMarkerCount = 0;
    var metresFromStart = 0;
    var distanceFromLeft = 0;

  	while ( doneDistance == false )
  	{                
    	if ( ( metresFromStart ) >  screenWidthMetres )
      		doneDistance = true;
   	 	else
		{
		    distanceFromLeft = wholeBoatWidthPixels + (metresFromStart * pixelsPerMetre );
			var thisDist = setupSpanId("dist" + distanceMarkerCount, distanceArea);
			thisDist.style.width = ( 2 * sectionLengthPixels ) + "px";
			thisDist.style.left = distanceFromLeft + "px";
            thisDist.className = "distance";
            thisDist.metres = distanceMetres;
                                          
            // add vertical line to distance marker
            
            var distanceLine = setupSpanId(getUniqueId(), thisDist);
            distanceLine.className = "distanceLine";
  	        distanceLine.style.top = 0 + "px";
  	        distanceLine.style.height = offsetBlackBarWidth + 5 + "px";
  	        
  	        // at the same time, make the set of lines that are going to be added to lanes
            
            var thisDistanceLine = getSpanId("distLine" + distanceMarkerCount);
            thisDistanceLine.className = "distanceLine2";
  	        thisDistanceLine.style.top = offsetTopLane + lanePad + "px";
  	        thisDistanceLine.style.left = distanceFromLeft + "px";
  	        thisDistanceLine.style.height = (laneHeight * rowers.length) + "px";
  	        distanceLines[distanceMarkerCount] = thisDistanceLine;
  	          	        
  	        // add metres text to distance marker
  	        
           var thisDistText = document.createTextNode(distanceMetres);

           if (!distanceRace)
           {
               var thisDistText = document.createTextNode(raceLength - distanceMetres);
           }
            thisDist.appendChild(thisDistText);
            distanceMarkerText[distanceMarkerCount] = thisDistText;
            
            if (distanceMarkerCount == 0)
            {
                dist0 = thisDist;
                distanceLine0 = thisDistanceLine;
                distanceMetres = raceLength - startAdjust;
                thisDistanceLine.style.backgroundColor = "white";
                thisDistanceLine.style.width = "3px";
            }
            else
            {
                if (distanceMarkerCount == 1)
                {
                    thisDist.style.visibility = "hidden";
                    dist1 = thisDist;
                }
                
                if (distanceMarkerCount == 2)
                {
                    dist2left = distanceFromLeft;
                }
                
      		    distanceMetres = distanceMetres -  distanceMarkerMetres;            
      		}
       		distanceMarkerCount = distanceMarkerCount + 1;
      		metresFromStart = raceLength - distanceMetres;
    	}
  	}

	// Show the boats

  	for ( var rowerCount = 0; rowerCount < rowers.length ; rowerCount++ ){

		var boatFrontSpans = getSetOfFrontSpans(boatBodyWidthPixels);
	
		var thisBoat = setupSpanIdClassData("boat" + rowerCount, "boat", (rowerCount +1), document.body);
		var thisName = setupSpanIdClassData("name" + rowerCount, "name", rowers[rowerCount], document.body);
		var thisResult = setupSpanIdClass("result" + rowerCount, "result", document.body);
        
  		for ( var boatSectionPtr = 1; boatSectionPtr <= 11 ; boatSectionPtr++ )
		{
			var nextSpan = boatFrontSpans[(boatSectionPtr-1)*2];
			var nextSpanId = boatFrontSpans[(boatSectionPtr-1)*2 + 1];
		
			thisBoat.appendChild(nextSpan);
			document.getElementById(nextSpanId).className = "boat";				// have to wait until its loaded into document B4 setting class!!
		}

    	thisBoat.style.top = ( offsetTopBoat + ( rowerCount * laneHeight ) - 1) + "px";
    	thisBoat.style.left = "0px";
    	thisBoat.style.width = (boatBodyWidthPixels) + "px";
    	thisName.style.top = ( offsetTopBoat + ( rowerCount * laneHeight )) + "px";

    	thisResult.style.top = ( offsetTopBoat + ( rowerCount * laneHeight )) + "px";
    	var thisResultText = document.createTextNode("");
    	thisResult.appendChild(thisResultText);
    	boatResultTexts[rowerCount] = thisResultText;
    }

    if (browser.isMicrosoft)
    {
  	    document.styleSheets(0).addRule(".result" ,"left:" + ( leadBoatPixels + ( 2 * sectionLengthPixels) + 50 ) + "px");    // for IE
  	}
  	else
  	{
  	    document.styleSheets[0].insertRule(".result {left:" + ( leadBoatPixels + ( 2 * sectionLengthPixels) + 50 ) + "px}", 0); // for FireFox
    }
    
	createLanes(wholeBoatWidthPixels);
	
  	// Add Time display and initialise
  	// with start time - need to have access to timeDisplayData

    timeDisplayText = document.createTextNode("00:00:00");
	timeDisplay = setupSpanId("timeDisplay", document.body);
	timeDisplay.appendChild(timeDisplayText);
	
  	slowestRowerTime = leadDistance.length - 1;
  	
  	// add start button 
  	
 	if (browser.isMicrosoft)
 	{
 	    var inputButton = "<input id=\"startButton\" type=\"button\" value=\"Start\" onclick=\"raceStart()\"/>";
        document.body.insertAdjacentHTML("beforeEnd", inputButton);
        startButton = document.getElementById("startButton");
 	}
 	else
 	{
 	    startButton = document.createElement("input");
	    startButton.setAttribute("id", "startButton");
	    startButton.setAttribute("type", "button");
	    startButton.setAttribute("value", "Start");
	    startButton.setAttribute("onClick", "raceStart()");
	    document.body.appendChild(startButton);
	}
	
	startButton.style.left = dist2left - 95 + "px";
 	
 	// add counter and initialise with text
 	// so that something is present to remove when we start countdown
 	
 	countDown = setupSpanId("countdown", document.body);
	countDownText = document.createTextNode(6);
	countDown.appendChild(countDownText);
 	
 	// add blackbar at top of screen
 	
 	setupSpanId("blackBar", document.body);
 	
  	setTimeout("convertRowerPace()", 1);
}


// provides a set of span elements (together with their ids) from which a boat can be built

/********************************************************************
*	get Set Of Front Spans 			    							*
********************************************************************/

function getSetOfFrontSpans(boatWidthPixels)
{
  	var boatSectionWidth = 6;
  	var boatSectionCount = 0;
  	var boatSectionOffset = -2;

	var boatFrontSpans = new Array();
	
  	for ( var boatSectionPtr = 1; boatSectionPtr <= 11 ; boatSectionPtr++ ){
    	// Loop until front of boat built

		var id = getUniqueId();
		var nextBoatFrontSpan = getSpanId(id);
		
		nextBoatFrontSpan.style.top = boatSectionPtr + "px";
		nextBoatFrontSpan.style.height = ( 26 -( boatSectionPtr * 2 )) + "px";
		nextBoatFrontSpan.style.left = (boatWidthPixels + boatSectionOffset) + "px";
		nextBoatFrontSpan.style.width = boatSectionWidth + "px";
		
		boatFrontSpans[(boatSectionPtr-1)*2] = nextBoatFrontSpan; 
		boatFrontSpans[(boatSectionPtr-1)*2 + 1] = id; 
    	boatSectionCount++;
    	boatSectionOffset+=boatSectionWidth;
    	if (boatSectionCount == 2){
      		boatSectionWidth--;
      		boatSectionCount = 0;
    	}
  	}
	
	return boatFrontSpans;
}


/********************************************************************
*	create Lanes 													*
********************************************************************/

function createLanes(boatWidthPixels)
{
  	// Make the lanes

	var visibleScrollArea = setupSpanIdClass("visibleScrollArea", "visibleScrollArea", document.body);
  	visibleScrollArea.style.height = ( rowers.length + 2 ) * laneHeight + "px";
    	
	scrollArea = setupSpanIdClass("scrollArea", "scrollArea", visibleScrollArea);
	
  	for ( var laneCount = 0; laneCount < ( rowers.length + 1) ; laneCount++ )
	{
		var hRule = document.createElement("hr");
		hRule.className = "hRule";
		hRule.style.top = offsetTopLane + (laneCount * laneHeight) + "px";
		hRule.style.width = pixelsPerMetre * raceLength + "px";
        scrollArea.appendChild(hRule);
  	}
  		
  	// Needed to anchor beginning of start line
	
	var boat0 = document.getElementById("boat" + 0);
	
  	// add distance lines to lane scroll area
  	
  	for (var distanceLineCount=0; distanceLineCount < distanceLines.length; distanceLineCount++)
  	{
  	    var thisDist = distanceLines[distanceLineCount];
  	    scrollArea.appendChild(thisDist);
  	}
}



/********************************************************************
*	convert Rower Pace												*
********************************************************************/

function convertRowerPace(){

  for ( var rowerCount = 0; rowerCount < rowers.length ; rowerCount++ ){

    for ( var seconds = 0; seconds < rowerRate[rowerCount].length ; seconds++){
      var speed = rowerRate[rowerCount][seconds];
      if ( speed != 0 ){
        var minutes = Math.floor( speed / 60 );
        rowerRate[rowerCount][seconds] = minutes + ":" + timeJustify( Math.floor( speed - ( minutes * 60 )));
      }
    }
  }
}



/********************************************************************
*	span Creation   												*
********************************************************************/
function setupSpanId(myId, target)
{
	var sp = document.createElement("span");
	sp.setAttribute("id", myId);
	target.appendChild(sp);
	return sp;
}
function setupSpanIdData(myId , data, target)
{
	var sp = setupSpanId(myId, target);
	sp.appendChild(document.createTextNode(data));
	return sp;
}
function setupSpanIdClass(myId , myClass, target)
{
	var sp = setupSpanId(myId, target);
	sp.className = myClass;
	return sp;
}
function setupSpanIdClassData(myId , myClass, data, target)
{
	var sp = setupSpanIdClass(myId, myClass, target);
	sp.appendChild(document.createTextNode(data));
	return sp;
}
// needed when building sections of a boat
function getSpanId(myId)
{
	var sp = document.createElement("span");
	sp.setAttribute("id", myId);
	return sp;
}
function getUniqueId()
{
	nextId++;
	return "Id" + nextId;
}