// brownieSetup.js
  function BrownieGraph (horizSize, vertSize, padSizePercent, noBars) {
    var maxHeight    = 13; // The maximum "out of ten"!?!
    var scaleWidth   = horizSize/(100*noBars+padSizePercent*(noBars+1));
    this.noOfBars    = noBars;
    this.barSize     = Math.round(100*scaleWidth);
    this.padSize     = Math.round(padSizePercent*scaleWidth);
    this.horizSize   = noBars*(this.barSize+this.padSize)+this.padSize+2;
    this.scaleHeight = Math.round(vertSize/(maxHeight+1));
    this.vertSize    = (maxHeight+1)*this.scaleHeight;
    this.leftBot     = 5*this.scaleHeight-8;
    this.leftMid     = 10*this.scaleHeight-24-this.leftBot;
    this.leftTop     = this.vertSize-32-this.leftMid-this.leftBot;
    this.bar         = new Array();
  }
  function Bar (graphScaleHeight, img, height) {
    this.img     = "images/brownies/Bar" + img + ".gif";
    this.link    = img;
    this.loc     = "images/brownies/Loc" + img + ".gif";
    this.height  = height * graphScaleHeight;
  }
  function outputBrownieGraph (graph) {
    document.write('<center><table border="0" cellpadding="0" ' +
	'cellspacing="0"><tr align="center" valign="bottom">' +
        '<td></td><td></td><td align="right"><img border="0" ' +
	'src="images/brownies/Grey.gif" alt="" width="1" ' +
        'height="1" /></td><td colspan="' +
        (2*graph.noOfBars+3) + 
        '" /><img border="0" ' +
	'src="images/brownies/Grey.gif" alt="" width="' +
        (graph.horizSize-1) + '" height="1"></td></tr>' +
        '<tr align="center" valign="bottom">' +
        '<td></td><td rowspan="5"><img border="0" ' +
        'src="images/brownies/White.gif" alt="" width="' +
        (2*graph.padSize) + '" height="' +
        (graph.vertSize) + '"></td><td align="right">' +
        '<img border="0" src="images/brownies/Grey.gif" alt="" ' +
        'width="1" height="' +
        (graph.leftTop) + 
        '" /></td><td rowspan="5"><img border="0" ' +
        'src="images/brownies/White.gif" alt="" width="' +
        graph.padSize + '" height="1"></td>');
    for(var i=0; i<graph.noOfBars; i++) {
      document.write('<td rowspan="5"><a ' +
	'onmouseover=\'' +
          ((document.getElementById) ? ('document.getElementById("Location")') : (((document.all) ? 'document.all.' : 'document.') + 'Location')) +
          '.src=locImages[' + i + '].src;\' ' +
        'onmouseout=\'' + 
	  ((document.getElementById) ? ('document.getElementById("Location")') : (((document.all) ? 'document.all.' : 'document.') + 'Location')) +
          '.src=locationImage.src;\' href="#' + 
        graph.bar[i].link +
        '"><img border="0" src="' + 
        graph.bar[i].img + '" width="' +
	graph.barSize + '" height="' + 
        graph.bar[i].height + 
        '" alt="" /></a></td>');
      document.write('<td rowspan="5" width="' + graph.padSize + '"></td>');
    }
    document.write('<td rowspan="5"><img border="0" alt="" ' +
	'src="images/brownies/Grey.gif" width="1" height="' +
        (graph.vertSize) + '"></td></tr>' +
        '<tr><td rowspan="3" valign="middle"><img border="0" alt="" ' +
        'src="images/brownies/Score.gif" width="12" ' +
        'height="112" /></td><td align="right"><img border="0" src="images/brownies/10.gif"' +
        'width="26" height="16" alt="10" /></td></tr>' +
	'<tr><td align="right"><img border="0" src="images/brownies/Grey.gif"' +
        'width="1" height="' +
        (graph.leftMid) + '" alt="" /></td></tr>' +
	'<tr><td align="right"><img border="0" src="images/brownies/5.gif"' +
        'width="16" height="16" alt="5" /></td></tr>' +
	'<tr><td></td><td align="right"><img border="0" src="images/brownies/Grey.gif"' +
        'width="1" height="' +
        (graph.leftBot) + '" alt="" /></td></tr>' +
        '<tr align="center" valign="top">' +
        '<td></td><td></td><td align="right">' +
        '<img border="0" src="images/brownies/Grey.gif" ' +
        'width="1" height="1" alt="" /></td><td colspan="' +
        (2*graph.noOfBars+3) + 
        '"><img border="0" ' +
	'src="images/brownies/Grey.gif" width="' +
        (graph.horizSize-1) + '" height="1" alt="" /></td></tr>' +
        '<tr align="center" valign="middle"><td colspan="' +
        (2*graph.noOfBars+5) + '" height="' + (2*graph.padSize) + '"></td></tr>' +
        '<tr align="center" valign="middle">' +
        '<td></td><td></td><td></td><td></td>' +
        '<td colspan="' + (2*graph.noOfBars-1) +
        '"><img id="Location" name="Location" border="0" src="images/brownies/Locations.gif" ' +
        'width="256" height="20" alt="" /></td><td></td><td></td></tr></table></center>');
  }

  function preloadGrph() {
    // Graph images:
    whiteImage.src = "images/brownies/White.gif";
    greyImage.src = "images/brownies/Grey.gif";
    tenImage.src = "images/brownies/10.gif";
    fiveImage.src = "images/brownies/5.gif";
    scoreImage.src = "images/brownies/Score.gif";
    locationImage.src = "images/brownies/Locations.gif";    
    titleImage.src = "images/brownies/Chackbrew.gif";
  }

  function preloadLocs(graph) {
    // Bar images before locs
    for (var i=0; i<(graph.noOfBars); i++) {
      barImages[i] = new Image();
      barImages[i].src = ((graph.bar[i]).img);
    }
    // Location images:
    for (var i=0; i<(graph.noOfBars); i++) {
      // for (var j=0; j<2000; j++) {; };
      locImages[i] = new Image(256,20);
      locImages[i].src = ((graph.bar[i]).loc);
    }
  }

var titleImage = new Image();
var whiteImage = new Image();
var greyImage = new Image();
var tenImage = new Image();
var fiveImage = new Image();
var scoreImage = new Image();
var locationImage = new Image();
var barImages = new Array();
// preloadGrph();
var locImages = new Array();
var noOfBars = 37;
var brownieGraph = new BrownieGraph (500, 300, 10, noOfBars);
var bgsh = brownieGraph.scaleHeight;
brownieGraph.bar[0]  = new Bar(bgsh, "War",      7   );
brownieGraph.bar[1]  = new Bar(bgsh, "Brug",     9.5 );
brownieGraph.bar[2]  = new Bar(bgsh, "Isle",     6   );
brownieGraph.bar[3]  = new Bar(bgsh, "Straw",   12   );
brownieGraph.bar[4]  = new Bar(bgsh, "Berl",     7   );
brownieGraph.bar[5]  = new Bar(bgsh, "Egham",   10   );
brownieGraph.bar[6]  = new Bar(bgsh, "Bars",     3   );
brownieGraph.bar[7]  = new Bar(bgsh, "IPBBday",  8   );
brownieGraph.bar[8]  = new Bar(bgsh, "ShipInn",  5   );
brownieGraph.bar[9]  = new Bar(bgsh, "Morr",     9   );
brownieGraph.bar[10] = new Bar(bgsh, "EdsShed",  7.25);
brownieGraph.bar[11] = new Bar(bgsh, "ManPicc",  8   );
brownieGraph.bar[12] = new Bar(bgsh, "Sains",    5   );
brownieGraph.bar[13] = new Bar(bgsh, "Exeter",   8   );
brownieGraph.bar[14] = new Bar(bgsh, "MilliesY", 7   );
brownieGraph.bar[15] = new Bar(bgsh, "PLand",    6   );
brownieGraph.bar[16] = new Bar(bgsh, "JMC",      8   );
brownieGraph.bar[17] = new Bar(bgsh, "Pastries", 9   );
brownieGraph.bar[18] = new Bar(bgsh, "Ryde",     8   );
brownieGraph.bar[19] = new Bar(bgsh, "DurCath",  10  );
brownieGraph.bar[20] = new Bar(bgsh, "Windsor",  8   );
brownieGraph.bar[21] = new Bar(bgsh, "Waitrose", 9   );
brownieGraph.bar[22] = new Bar(bgsh, "Mildert",  9.5 );
brownieGraph.bar[23] = new Bar(bgsh, "Felt",     13  );
brownieGraph.bar[24] = new Bar(bgsh, "Gner",     7   );
brownieGraph.bar[25] = new Bar(bgsh, "Oswald",   8   );
brownieGraph.bar[26] = new Bar(bgsh, "Nero",     6   );
brownieGraph.bar[27] = new Bar(bgsh, "Kariba",   7   );
brownieGraph.bar[28] = new Bar(bgsh, "Ludlow",   10  );
brownieGraph.bar[29] = new Bar(bgsh, "Thomas",   8.5 );
brownieGraph.bar[30] = new Bar(bgsh, "Dolgoch",  13  );
brownieGraph.bar[31] = new Bar(bgsh, "DurhamSU", 9   );
brownieGraph.bar[32] = new Bar(bgsh, "DurTesco", 8.5 );
brownieGraph.bar[33] = new Bar(bgsh, "Crusty",   10  );
brownieGraph.bar[34] = new Bar(bgsh, "Bourton",  9   );
brownieGraph.bar[35] = new Bar(bgsh, "Fine",     10  );
brownieGraph.bar[36] = new Bar(bgsh, "Nord",     9   );

// preloadLocs(brownieGraph);

// Location images are 256x20 with TimesNewRoman 16pt Bold
// Four spaces between title and score
// Colours are now in trborownies.css