var device = "mobile" ;
// Multiply the pixels by this amount so that the images are not grainy.  A factor of 2
// is good for laptop/desktop devices, but four may be necessary for tablets/phones.
var drawRatio = 2 ;

var doLogo = false ;

var use_ws   = false ;
var use_ajax =  true ;

// Physical constants.
var SoL = 3e8     ; // Speed of light.
var CoE = 1.6e-19 ; // Charge of electron.
var pi = Math.PI ;

var shifts_per_game      = -2 ;
var collisions_per_shift = 60 ;

// Control over the speed of the game.
var collision_delay_min =  800 ;
var collision_delay_max = 1000 ;
var collision_delay = collision_delay_max ;
var collision_breath = 250 ;

var nCharsPerName = 32 ;

var player_names = ['Peter Higgs' , 'Brian Cox' , 'Rolf Heuer' , 'Fabiola Gionatti', 'Emmy Noether' , 'Niels Bohr' , 'Marie Curie' , 'Carlo Rubbia' , 'Lisa Randall' , 'Maria Goeppert-Meyer' ] ;

// Colours.
var text_color = 'black' ;
var eventDisplay_fillColor = '#000000' ;
var collision_matched_color    = 'rgba(0,255,0,0.8)' ;
var collision_notMatched_color = 'rgba(255,0,0,0.8)' ;

// probabilities for each kind of collision.
var probability_Higgs = 0.1 ;

// Used for the histograms
var mass_min = 100 ;
var mass_max = 150 ;
var histogram_nBins = 25 ;
var histogram_drawStyle = 'rect' ;
histogram_drawStyle = 'pe' ;
var histogram_xAxisLAbelFrequency = 5 ;
var time_animate_histogram = 5000 ;
//var time_animate_histogram = 500 ;

// Used for the heartbeat (eg for drawing animations).
var delay = 50 ;
var delay_animate_histogram = 50 ;
var delay_enable_click = 500 ;
var delay_drawStep = 50 ;

// Dimensions of the detector and canvas
// "S" refers to the detector.
// Sr is the maximal width of the detector in real life (eg cavern walls).
// SR is the maximal width of the detector on the canvas.
// cw and ch and canvas width and height.
var Sr =  10 ;
var SR = 375*drawRatio ;
var cw = 2*SR ;
var ch = 2*SR ;

// Tweaks for the event display.
var particleLineWidthFactor = 0.0025 ;
var particleHeadSizeFactor  = 0.02   ;
var particleLineWidth = particleLineWidthFactor*cw ;
var particleHeadSize  =  particleHeadSizeFactor*cw ;

// Number of slices in R and phi for the cells.
var NR   =  50 ;
var NPhi = 250 ;

var cellSizeR   =   Sr/NR   ;
var cellSizePhi = 2*pi/NPhi ;

// Functions used to map real coordinates to canvas coordinates.
var xMax = Sr ;
var yMax = Sr ;

// Settings for the jets:
// How much spread the jet is allowed to have per track

var B1_0 = 0.10 ;
var B2_0 = 0.08 ;

// Colours for the particles:
var track_color = 'rgb(200,200,200)' ;

function team_object(title, color, box_x, box_y, box_w, box_h){
  this.title = title  ;
  this.color = color ;
  this.nSigma = 0 ;

  this.apply_style = function(){
    // Just change some colours to make everything "branded".
    // This should probably be changed to something cooler later on.
    // Also the border widths should be stored in settings.js.
    document.body.style.background = this.color ;
    Get('div_gameWrapper').style.border = '9px solid ' + this.color ;
    Get('div_teamname'   ).style.backgroundColor = this.color ;
    Get('div_header'     ).style.border = '1px solid ' + this.color ;
    Get('div_footer'     ).color = this.color ;
    if(canvas){
      canvas.style.borderTop    = '9px solid ' + this.color ;
      canvas.style.borderBottom = '9px solid ' + this.color ;
    }
  }
  this.box = new experiment_box(box_x, box_y, box_w, box_h) ;
  this.draw_experiment_box = function(context, image_name){
    this.box.draw(context, this.title, this.color, image_name) ;
  }
}

function experiment_box(x, y, w, h){
  this.x = x ;
  this.y = y ;
  this.w = w ;
  this.h = h ;

  this.draw = function(context, name, color, image_name){
    // This just write some text and an image.  At the moment it draws things to the
    // canvas, but let's not completely discount the idea of using the HTML DOM- it could
    // be cheaper.
    context.save() ;
    context.lineWidth = 0.005*cw ;
    context.font = 0.07*ch+'px arial' ;
    context.fillStyle = color ;
    context.fillRect(x, y, w, h) ;
    context.strokeRect(x, y, w, h) ;

    // Hard coded values!  These should be changed.
    context.fillStyle = 'white'
    context.fillText('Team', x+0.5*w, y+0.075*ch) ;
    context.fillText(name  , x+0.5*w, y+0.15*ch) ;
    var img = Get(image_name) ;
    context.drawImage(img,  x+0.01*cw, y+h-0.23*ch, drawRatio*img.width, drawRatio*img.height) ;

    context.restore() ;
  }
  this.contains = function(x, y){
    x *= drawRatio ;
    y *= drawRatio ;
    return (x>=this.x && x<=this.x+this.w && y>=this.y && y<=this.y+this.h) ;
  }
}

var teams = [] ;
teams['neutral'] = new team_object('CERN' , 'rgb(  0,  0,  0)',      -1,     -1,       0,      0) ;
teams['ATLAS'  ] = new team_object('ATLAS', 'rgb(236,103, 29)', 0.05*cw, 0.5*ch, 0.35*cw, 0.4*ch) ;
teams['CMS'    ] = new team_object('CMS'  , 'rgb( 17,133,193)', 0.60*cw, 0.5*ch, 0.35*cw, 0.4*ch) ;


// A series of trivial functions to save some typing.  The most common mathematcal
// functions are aliased here to save typing.

function random_color(lower, rnd){
  var r = Math.floor(lower + rnd.random()*(255-lower)) ;
  var g = Math.floor(lower + rnd.random()*(255-lower)) ;
  var b = Math.floor(lower + rnd.random()*(255-lower)) ;
  var color = 'rgb('+r+','+g+','+b+')' ;
  return color ;
}

function psuedorandom_number_generator(){
  this.seed = 1 ;
  this.a = 1255214 ;
  this.b = 247256 ;
  this.set_seed = function(seed){
    //if(isNaN(seed)) seed = floor(1e9*random()) ;
    this.seed = floor(seed) ;
  }
  this.random = function(){
    this.seed = this.seed*this.a%this.b ;
    return this.seed/this.b ;
  }
}

function min(a,b){ return Math.min(a,b) ; }
function max(a,b){ return Math.max(a,b) ; }
function   abs(x){ return Math. abs(x)  ; }
function   abs(x){ return Math. abs(x)  ; }
function  sqrt(x){ return Math.sqrt(x)  ; }
function  acos(x){ return Math.acos(x)  ; }
function   cos(x){ return Math. cos(x)  ; }
function   sin(x){ return Math. sin(x)  ; }
function   log(x){ return Math. log(x)  ; }
function   exp(x){ return Math. exp(x)  ; }
function floor(x){ return Math.floor(x) ; }
function atan2(y,x){ return Math.atan2(y,x) ; }
function pow(x,n){ return Math.pow(x,n) ; }
function random(){ return Math.random() ; }

// Non standard function that Aidan really needs to check.
function random_gaussian(sigma){ return sqrt(-2*sigma*log(random())) ; }

// Get and Create HTML elements.  These can be removed if they cause confusion.  This is
// merely my own preference.
function Get(id){ return document.getElementById(id) ; }
function Create(type){ return document.createElement(type) ; }

// The normal AJAX stuff.  We can replace this with jQuery if we like.
function GetXmlHttpObject(){
  if(window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    return new XMLHttpRequest() ;
  }
  if(window.ActiveXObject){
    // code for IE6, IE5
    return new ActiveXObject("Microsoft.XMLHTTP") ;
  }
  return null ;
}

function ajax_object(){
  this.xmlhttp = GetXmlHttpObject() ;
  this.send = function(message){
    if(message.indexOf('sid=')==-1) message = message + '&sid=' + random() ;
    this.xmlhttp.open('GET', message, true) ;
    this.xmlhttp.send(null) ;
  }
}

function getParameterByName(name){
  // Taken from http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
  var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search) ;
  return match && decodeURIComponent(match[1].replace(/\+/g, ' ')) ;
}


// Converting real coordinates to canvas coordinates.
function X_from_x(x){ return SR + SR*x/xMax ; }
function Y_from_y(y){ return SR + SR*y/yMax ; }

var touchEvent = false ;

function eventDisplayClickMouseDown(evt){
  if(touchEvent){
    touchEvent = false ;
    return ;
  }
  else{
    eventDisplayClick(evt) ;
  }
}

function eventDisplayClickTouchStart(evt){
  touchEvent = true ;
  eventDisplayClick(evt) ;
}

function eventDisplayClick(evt){
  // This function detects a click and repsonds appropriately.
  // Keep careful track of the game state- there may be a bug where the final click of a
  // shift doesn't trigger an event!
  
  if(game.can_click==false) return ;
  
  if(game.state=='game_start'){
    pick_team(evt) ;
  }
  else if(game.state=='shift_start'){
    Get('span_shiftNumber').innerHTML = game.shift_counter ;
    set_footer_toplogy() ;
    
    // Start the collision thread to deliver new events
    collision_thread() ;
    game.state = 'playing' ;
    
    // Make sure we are not paused.  Explicitly setting paused=false might be simpler.
    if(game.paused) game.toggle_pause() ;
    
    // Reset everything
    game.reset_statistics() ;
    
    return ;
  }
  else if(game.state=='shift_end'){
    game.start_shift() ;
    game.state = 'shift_start' ;
  }
  else if(game.paused){
    // Wake the game up.  Is this counterintuitive for the player?  Best ask them!
    game.toggle_pause() ;
    return ;
  }
  else if(game.state=='playing'){
    // Play the game.
    game.current_shift.trigger.fire() ;
  }
}

// Controls to pause the game.
function keyDown(evt){
  var keyDownID = window.event ? event.keyCode : (evt.keyCode != 0 ? evt.keyCode : evt.which) ;
  switch(keyDownID){
    case 80: // p
      game.toggle_pause() ;
    case 32: // Space
      break ;
  }
}


var music = [] ;
var current_music = null ;
var current_music_index = null ;
var music_playing = false ;

function create_music_playlist(){
  music.push(Get('music_intuit'   )) ;
  music.push(Get('music_Klockworx')) ;
  current_music_index = 0 ;
  current_music = music[current_music_index] ;
  Get('span_current_song').innerHTML = 'Track ' + (current_music_index+1) ;
  Get('canvas_music_pause').style.display = 'none' ;
}

function add_music_eventListeners(){
  Get('canvas_music_previous'  ).addEventListener('click', music_previous ) ;
  Get('canvas_music_play'      ).addEventListener('click', music_play     ) ;
  Get('canvas_music_pause'     ).addEventListener('click', music_play     ) ;
  Get('canvas_music_stop'      ).addEventListener('click', music_stop     ) ;
  Get('canvas_music_next'      ).addEventListener('click', music_next     ) ;
  Get('canvas_music_sound_off' ).addEventListener('click', sounds_mute_off) ;
  Get('canvas_music_sound_on'  ).addEventListener('click', sounds_mute_on ) ;
}

function draw_music_canvases(){
  var types = ['play','pause','stop','previous','next','sound_on','sound_off'] ;
  for(var i=0 ; i<types.length ; i++){
    draw_music_canvas(types[i]) ;
  }
}

function draw_music_canvas(type){
  var canvas_music = Get('canvas_music_'+type) ;
  var context_music = canvas_music.getContext('2d') ;
  var w = 20 ;
  var h = 20 ;
  canvas_music.width  = w ;
  canvas_music.height = h ;
  context_music.fillStyle = 'rgb(255,255,255)' ;
  context_music.fillRect(0,0,w,h) ;
  context_music.fillStyle = 'rgb(0,0,0)' ;
  if(type=='play'){
    context_music.beginPath() ;
    context_music.moveTo(0.2*w, 0.2*h) ;
    context_music.lineTo(0.8*w, 0.5*h) ;
    context_music.lineTo(0.2*w, 0.8*h) ;
    context_music.closePath() ;
    context_music.fill() ;
  }
  else if(type=='pause'){
    context_music.fillRect(0.2*w,0.2*h,0.2*w,0.6*h) ;
    context_music.fillRect(0.6*w,0.2*h,0.2*w,0.6*h) ;
  }
  else if(type=='stop'){
    context_music.fillRect(0.2*w,0.2*h,0.6*w,0.6*h) ;
  }
  else if(type=='next'){
    context_music.beginPath() ;
    context_music.moveTo(0.1*w, 0.7*h) ;
    context_music.lineTo(0.5*w, 0.5*h) ;
    context_music.lineTo(0.1*w, 0.3*h) ;
    context_music.closePath() ;
    context_music.fill() ;
    context_music.fillStyle = 'rgb(0,0,0)' ;
    context_music.beginPath() ;
    context_music.moveTo(0.5*w, 0.7*h) ;
    context_music.lineTo(0.9*w, 0.5*h) ;
    context_music.lineTo(0.5*w, 0.3*h) ;
    context_music.closePath() ;
    context_music.fill() ;
  }
  else if(type=='previous'){
    context_music.beginPath() ;
    context_music.moveTo(0.5*w, 0.7*h) ;
    context_music.lineTo(0.1*w, 0.5*h) ;
    context_music.lineTo(0.5*w, 0.3*h) ;
    context_music.closePath() ;
    context_music.fill() ;
    context_music.fillStyle = 'rgb(0,0,0)' ;
    context_music.beginPath() ;
    context_music.moveTo(0.9*w, 0.7*h) ;
    context_music.lineTo(0.5*w, 0.5*h) ;
    context_music.lineTo(0.9*w, 0.3*h) ;
    context_music.closePath() ;
    context_music.fill() ;
  }
  else if(type=='sound_on'){
    context_music.beginPath() ;
    context_music.moveTo(0.2*w, 0.4*h) ;
    context_music.lineTo(0.5*w, 0.2*h) ;
    context_music.lineTo(0.5*w, 0.8*h) ;
    context_music.lineTo(0.2*w, 0.6*h) ;
    context_music.closePath() ;
    context_music.fill() ;
    
    context_music.beginPath() ;
    context_music.arc(0.5*w, 0.5*h, 0.3*w, 2*pi/6, -2*pi/6, true) ;
    context_music.stroke() ;
    context_music.beginPath() ;
    context_music.arc(0.5*w, 0.5*h, 0.2*w, 2*pi/6, -2*pi/6, true) ;
    context_music.stroke() ;
  }
  else if(type=='sound_off'){
    context_music.beginPath() ;
    context_music.moveTo(0.2*w, 0.4*h) ;
    context_music.lineTo(0.5*w, 0.2*h) ;
    context_music.lineTo(0.5*w, 0.8*h) ;
    context_music.lineTo(0.2*w, 0.6*h) ;
    context_music.closePath() ;
    context_music.fill() ;
  }
}

function sounds_mute_on(){
  game.muted = true ;
  Get('canvas_music_sound_off').style.display = ''     ;
  Get('canvas_music_sound_on' ).style.display = 'none' ;
}
function sounds_mute_off(){
  game.muted = false ;
  Get('canvas_music_sound_on' ).style.display = ''     ;
  Get('canvas_music_sound_off').style.display = 'none' ;
}

function music_previous(){
  music_stop() ;
  current_music_index = (current_music_index-1)%music.length ;
  if(current_music_index<0) current_music_index += music.length ;
  current_music = music[current_music_index] ;
  music_play() ;
  music_play() ;
}
function music_next(){
  music_stop() ;
  current_music_index = (current_music_index+1)%music.length ;
  current_music = music[current_music_index] ;
  music_play() ;
  music_play() ;
}

function music_play(){
  if(current_music){
    Get('span_current_song').innerHTML = 'Track ' + (current_music_index+1) ;
    if(music_playing){
      current_music.pause() ;
      music_playing = false ;
      Get('canvas_music_play' ).style.display = '' ;
      Get('canvas_music_pause').style.display = 'none' ;
    }
    else{
      current_music.play() ;
      music_playing = true ;
      Get('canvas_music_play' ).style.display = 'none' ;
      Get('canvas_music_pause').style.display = '' ;
    }
  }
}
function music_pause() {
  if(current_music){
    current_music.pause() ;
    Get('canvas_music_play' ).style.display = '' ;
    Get('canvas_music_pause').style.display = 'none' ;
  }
}
function music_stop(){
  if(current_music){
    current_music.pause() ;
    current_music.currentTime = 0 ;
    music_playing = false ;
    Get('canvas_music_play' ).style.display = '' ;
    Get('canvas_music_pause').style.display = 'none' ;
  }
}

// The detector is arranged in a hierarchy of components.
// In real life the detector is split into subdetectors that interact with different
// particles in different ways.  These are usually arranged in different radial ranges.
// Subdetectors are arranged in layers in r.
// Circular subdetectors are hard to make, so they are split into regular polygons.
// (We work in circular coordinates, so use polygons with lots of sides!)
// Each side of the polygon is a wedge.
// Finally each subdetector is split into segments.
//
// The hierarchy looks something like this:
// Detector
//  +Subdetector
//  +-+-Layer
//  | +-+-Wedge
//  | | +---Segment
//  | | +---Segment
//
// We only really care about the segments, and everything else is arranged so that we can
// recursively reach all segments from the top level.
// There's probably a better way of arranging the detector, but this'll do for now.
//
// Subdetectors have characteristic responses to each particle type.  There's some real
// physics involved in understanding these responses!

function detector_object(){
  // Strengths of the magnetic fields.
  this.B1 = 0.10 ;
  this.B2 = 0.08 ;

  this.subdetectors = [] ;
  this.segments     = [] ;
  
  // We populate two arrays of cells.
  // A two dimensional array is used for looping over r and phi.
  // A one dimensional array is used for single line loops (eg to reset all cells easily.)
  this.cells        = [] ;
  this.cells_linear = [] ;
  this.make_cells = function(){
    for(var u=0 ; u<NR ; u++){
      this.cells.push([]) ;
      var r = u*cellSizeR ;
      for(var v=0 ; v<NPhi ; v++){
        var phi = v*cellSizePhi ;
        var cell = new cell_object(r, phi) ;
        this.cells[u].push(cell) ;
        this.cells_linear.push(cell) ;
      }
    }
  }
  
  // This should only be used for debugging purposes, as it is very expensive!
  this.draw_cells = function(context){
    for(var u=1 ; u<this.cells.length ; u++){
      for(var v=0 ; v<this.cells[u].length ; v++){
        this.cells[u][v].draw(context) ;
      }
    }
  }
  
  this.start_collision = function(){
    for(var i=0 ; i<this.cells_linear.length ; i++){
      this.cells_linear[i].start_collision() ;
    }
    for(var i=0 ; i<this.segments.length ; i++){
      this.segments[i].start_collision() ;
    }
  }
  
  // Basic geometry of the magnetic fields.  The field flips once (edge of the solenoid)
  // then there's a step down (edge of the yoke) then it disappears.
  this.magnetFlipR = 0.20*Sr ;
  this.magnetStepR = 0.45*Sr ;
  this.magnetEdgeR = 0.95*Sr ;
  
  this.process_collision = function(collision){
    if(true==collision.is_processed) return ;
    collision.is_processed = true ;
    // Reset all the cells and segments so we can analyse the event.
    //this.start_collision() ;
    
    for(var i=0 ; i<this.cells_linear.length ; i++){
      this.cells_linear[i].update_segments() ;
    }
  }
  this.process_particle = function(particle){
    // This should propagate a particle using the Lorentz force law for the magnetic
    // fields in the detector.  It's a bit broken because the units are not handled
    // properly.
    
    // Parameters based on the magnetic field, and particle mass.
    var k1 =  pow(SoL,2)*this.B1/(particle.mass*1e9) ;
    var k2 = -pow(SoL,2)*this.B2/(particle.mass*1e9) ;
    
    // Express v in ms^-1.
    var gv = particle.pt/particle.mass ;
    var vt = SoL*sqrt(gv*gv/(gv*gv+1)) ;
    var vx = vt*cos(particle.phi) ;
    var vy = vt*sin(particle.phi) ;
    
    // Express t in s.
    var dt = 1e-9 ;
    var x  = particle.track.x0 ;
    var y  = particle.track.y0 ;
    var sign = particle.charge ;
    var k = k1 ;
    var trajectory = [] ;
    trajectory.push([x,y]) ;
    for(var i=0 ; i<100 ; i++){
      var b2 = (vx*vx+vy*vy)/(SoL*SoL) ;
      var g  = 1/sqrt(1-b2) ;
      
      // Careful!  We need to normalise vx and vy to make sure we don't violate the speed
      // of light
      var dvx =  k*particle.charge*vy*dt ;
      var dvy = -k*particle.charge*vx*dt ;
      var vxTmp = vx + dvx ;
      var vyTmp = vy + dvy ;
      
      vx = vt*vxTmp/sqrt(vxTmp*vxTmp+vyTmp*vyTmp) ;
      vy = vt*vyTmp/sqrt(vxTmp*vxTmp+vyTmp*vyTmp) ;
      var dx = vx*dt ;
      var dy = vy*dt ;
      x += dx ;
      y += dy ;
      var r = sqrt(x*x+y*y) ;
      if(this.specialParticle){
        if(r>particle_settings[particle.particle_type].rCutoff) break ;
      }
      if(r<this.magnetFlipR){
        sign = particle.charge ;
        k = k1 ;
      }
      else if(r<this.magnetStepR){
        sign = -particle.charge ;
        k = k2 ;
      }
      else if(r<this.magnetEdgeR){
        sign = -particle.charge ;
        k = 0 ;
      }
      else{
        break ;
      }
      trajectory.push([x,y]) ;
    }
    return trajectory ;
  }
  this.draw = function(context){
    for(var i=0 ; i<this.subdetectors.length ; i++){
      this.subdetectors[i].draw(context) ;
    }
  }
  this.draw_active_segments = function(context){
    for(var i=0 ; i<this.segments.length ; i++){
      if(this.segments[i].is_touched) this.segments[i].draw(context) ;
    }
  }
}

function subdetector_object(name, r1, r2, spacing_r, spacing_phi, nLayers, nWedges, nSegments, strokeColor, fillRgb0, fillRgb1, particle_responses){
  this.name = name ;
  this.r1 = r1 ;
  this.r2 = r2 ;
  this.fillRgb0 = fillRgb0 ;
  this.fillRgb1 = fillRgb1 ;
  this.strokeColor = strokeColor ;
  this.nLayers = nLayers ;
  this.layerDR = (this.r2-this.r1)/this.nLayers ;
  
  this.layers = [] ;
  for(var i=0 ; i<nLayers ; i++){
    var r1Tmp = this.r1 + (i+0)*this.layerDR ;
    var r2Tmp = this.r1 + (i+1)*this.layerDR - spacing_r ;
    this.layers.push(new subdetector_layer_object(r1Tmp, r2Tmp, spacing_phi, nWedges, nSegments, fillRgb0, fillRgb1, this.strokeColor, particle_responses)) ;
  }
  this.draw = function(context){
    for(var i=0 ; i<this.layers.length ; i++){
      this.layers[i].draw(context) ;
    }
  }
}
function subdetector_layer_object(r1, r2, spacing_phi, nWedges, nSegments, fillRgb0, fillRgb1, strokeColor, particle_responses){
  this.r1 = r1 ;
  this.r2 = r2 ;
  this.spacing = spacing_phi ;
  this.nWedges = nWedges ;
  this.fillRgb0 = fillRgb0 ;
  this.fillRgb1 = fillRgb1 ;
  this.strokeColor = strokeColor ;
  
  this.wedges = [] ;
  this.wedgeDPhi = 2*pi/this.nWedges ;
  for(var i=0 ; i<this.nWedges ; i++){
    var phi1Tmp = (i+0)*this.wedgeDPhi ;
    var phi2Tmp = (i+1)*this.wedgeDPhi - spacing_phi ;
    this.wedges.push(new subdetector_wedge_object(this.r1, this.r2, phi1Tmp, phi2Tmp, nSegments, fillRgb0, fillRgb1, this.strokeColor, particle_responses)) ;
  }
  this.draw = function(context){
    for(var i=0 ; i<this.wedges.length ; i++){
      this.wedges[i].draw(context) ;
    }
  }
}
function subdetector_wedge_object(r1, r2, phi1, phi2, nSegments, fillRgb0, fillRgb1, strokeColor, particle_responses){
  this.r1 = r1 ;
  this.r2 = r2 ;
  this.phi1 = phi1 ;
  this.phi2 = phi2 ;
  this.nSegments = nSegments ;
  this.fillRgb0 = fillRgb0 ;
  this.fillRgb1 = fillRgb1 ;
  this.strokeColor = strokeColor ;
  
  this.segments = [] ;
  this.segmentDPhi = (this.phi2-this.phi1)/nSegments ;
  var xA = this.r1*cos(this.phi1) ;
  var yA = this.r1*sin(this.phi1) ;
  var xB = this.r1*cos(this.phi2) ;
  var yB = this.r1*sin(this.phi2) ;
  var xC = this.r2*cos(this.phi1) ;
  var yC = this.r2*sin(this.phi1) ;
  var xD = this.r2*cos(this.phi2) ;
  var yD = this.r2*sin(this.phi2) ;
  
  for(var i=0 ; i<this.nSegments ; i++){
    var phi1Tmp = this.phi1 + (i-0.0)*this.segmentDPhi ;
    var phi2Tmp = this.phi1 + (i+1.0)*this.segmentDPhi ;
    var x1 = xA + (xB-xA)*(i+0)/this.nSegments ;
    var y1 = yA + (yB-yA)*(i+0)/this.nSegments ;
    var x2 = xA + (xB-xA)*(i+1)/this.nSegments ;
    var y2 = yA + (yB-yA)*(i+1)/this.nSegments ;
    var x3 = xC + (xD-xC)*(i+1)/this.nSegments ;
    var y3 = yC + (yD-yC)*(i+1)/this.nSegments ;
    var x4 = xC + (xD-xC)*(i+0)/this.nSegments ;
    var y4 = yC + (yD-yC)*(i+0)/this.nSegments ;
    this.segments.push(new subdetector_segment_object(this.r1, this.r2, phi1Tmp, phi2Tmp, x1, y1, x2, y2, x3, y3, x4, y4, fillRgb0, fillRgb1, this.strokeColor, particle_responses)) ;
  }
  this.draw = function(context){
    for(var i=0 ; i<this.segments.length ; i++){
      this.segments[i].draw(context) ;
    }
  }
}
function subdetector_segment_object(r1, r2, phi1, phi2, x1, y1, x2, y2, x3, y3, x4, y4, fillRgb0, fillRgb1, strokeColor, particle_responses){
  // Segments have trapezium shapes.  This doesn't match onto polar coordinates exactly
  // so we must make the number of segments large enough to make the mismatch small.

  // Add this to the list of segments so that we can loop over all segments easily.
  detector.segments.push(this) ;
  
  // Set the range in (r,phi).
  this.r1 = r1 ;
  this.r2 = r2 ;
  this.phi1 = phi1 ;
  this.phi2 = phi2 ;
  
  // Styles.
  this.fillRgb0 = fillRgb0 ;
  this.fillRgb1 = fillRgb1 ;
  this.strokeColor = strokeColor ;
  
  // Actual physics content!
  this.particle_responses = particle_responses ;
  
  // The vertices in physical (x,y) space.
  this.x1 = x1 ;
  this.y1 = y1 ;
  this.x2 = x2 ;
  this.y2 = y2 ;
  this.x3 = x3 ;
  this.y3 = y3 ;
  this.x4 = x4 ;
  this.y4 = y4 ;
  
  // Vertices in (X,Y) space on the canvas for drawing.
  this.X1 = X_from_x(this.x1) ;
  this.Y1 = Y_from_y(this.y1) ;
  this.X2 = X_from_x(this.x2) ;
  this.Y2 = Y_from_y(this.y2) ;
  this.X3 = X_from_x(this.x3) ;
  this.Y3 = Y_from_y(this.y3) ;
  this.X4 = X_from_x(this.x4) ;
  this.Y4 = Y_from_y(this.y4) ;
  
  // Make this untouched
  this.is_touched = false ;
  
  // The response will change on an event by event basis, and is the sum of the
  // individual particle responses for that particular event.
  this.response = 0 ;
  
  this.activate_cells = function(){
    // This is an expensive function that should only be called when the detector
    // geometry is updated.  It adds the segment to the cells so that cells can turn the
    // segments on quickly.  This is where we look in (r,phi) space instead of (x,y)
    // space.
    var i0 = floor(this.  r1/cellSizeR  ) ;
    var i1 = floor(this.  r2/cellSizeR  ) ;
    var j0 = floor(this.phi1/cellSizePhi) ;
    var j1 = floor(this.phi2/cellSizePhi) ;
    for(var i=i0 ; i<i1 ; i++){
      for(var j=j0 ; j<j1 ; j++){
        detector.cells[i][j].add_segment(this) ;
      }
    }
    return ;
  }
  
  this.start_collision = function(){
    // It's very important that we reset these values for a new event!
    this.is_touched = false ;
    this.response = 0 ;
  }
  
  this.draw = function(context){
    // Save the canvas, start a path, set the style and assemble the path.
    context.save() ;
    context.beginPath() ;
    context.fillStyle   = this.fillColor ;
    context.strokeStyle = this.strokeColor ;
    context.moveTo(this.X1,this.Y1) ;
    context.lineTo(this.X2,this.Y2) ;
    context.lineTo(this.X3,this.Y3) ;
    context.lineTo(this.X4,this.Y4) ;
    context.lineTo(this.X1,this.Y1) ;
    context.closePath() ;
    context.stroke() ;
    
    // Use the response to determine the colour of the segment.
    // First put it in the range [0,1]
    if(this.response<0) this.response = 0 ;
    if(this.response>1) this.response = 1 ;
    
    // The colours are arranged in a simple linear gradient.
    // This may be changed if it turns out a different gradient looks more "natural".
    var fr = Math.floor(this.fillRgb0[0]+this.response*(this.fillRgb1[0])) ;
    var fg = Math.floor(this.fillRgb0[1]+this.response*(this.fillRgb1[1])) ;
    var fb = Math.floor(this.fillRgb0[2]+this.response*(this.fillRgb1[2])) ;
    
    // Okay, enough rambling, let's just draw this thing.
    //context.fillStyle = 'rgb(' + fr + ',' + fg + ',' + fb + ')' ;
    
    var xA = 0.5*(this.X1+this.X2) ;
    var yA = 0.5*(this.Y1+this.Y2) ;
    var xB = 0.5*(this.X3+this.X4) ;
    var yB = 0.5*(this.Y3+this.Y4) ;
    
    var dX = xA-xB ;
    var dY = yA-yB ;
    var cX = 0.5*(xA+xB) ;
    var cY = 0.5*(yA+yB) ;
    
    var xC = cX - dX ;
    var yC = cY - dY ;
    var xD = cX + dX ;
    var yD = cY + dY ;
    
    var gradient = context.createLinearGradient(xC,yC,xD,yD) ;
    gradient.addColorStop(0,'white') ;
    gradient.addColorStop(0.5,'rgb(' + fr + ',' + fg + ',' + fb + ')') ;
    gradient.addColorStop(1,'white') ;
    context.fillStyle = gradient ;
    
    context.fill() ;
    context.restore() ;
  }
  
  this.touch = function(particle_types){
    this.is_touched = true ;
    
    for(var i=0 ; i<particle_names.length ; i++){
      if(particle_types[particle_names[i]]) this.response += this.particle_responses[particle_names[i]] ;
    }
    
    // Add some noise.
    this.response += -0.1+0.2*random() ;
  }
}
// To save CPU time a map of cells is made in (r,phi) space.  The detector components are
// mapped onto these cells.  As the particles pass through the detector they pass through
// the cells and these light up the detector components.
function cell_object(r, phi){
  this.rMid   = r   + 0.5*cellSizeR   ;
  this.phiMid = phi + 0.0*cellSizePhi ;
  this.r1     = r   - 0.0*cellSizeR   ;
  this.r2     = r   + 1.0*cellSizeR   ;
  this.phi1   = phi - 0.5*cellSizePhi ;
  this.phi2   = phi + 0.5*cellSizePhi ;
  
  // General settings.
  // Set is_touched to false at the start of each event, and true when a particle hits it.
  this.is_touched = false ;
  // Some cells don't match up to detector components, so don't bother with them.
  this.is_in_acceptance = false ;
  
  // Each cell can belong to at least one subdetector segment.
  this.segments = [] ;
  this.particle_types = [] ;
  for(var i=0 ; i<particle_names.length ; i++){
    this.particle_types[particle_names[i]] = false ;
  }
  
  this.touch = function(particle_type){
    this.is_touched = true ;
    this.particle_types[particle_type] = true ;
  }
  this.start_collision = function(){
    this.is_touched = false ;
    for(var i=0 ; i<particle_names.length ; i++){
      this.particle_types[particle_names[i]] = false ;
    }
  }
  this.add_segment = function(segment){
    this.is_in_acceptance = true ;
    this.segments.push(segment) ;
  }
  this.draw = function(context){
    //if(this.is_in_acceptance==false) return ;
    
    context.save() ;
    
    var CX = X_from_x(0) ;
    var CY = Y_from_y(0) ;
    var R1 = X_from_x(this.r1) - X_from_x(0) ;
    var R2 = X_from_x(this.r2) - Y_from_y(0) ;
    
    var X1 = X_from_x(this.r1*cos(this.phi1)) ;
    var Y1 = Y_from_y(this.r1*sin(this.phi1)) ;
    var X2 = X_from_x(this.r2*cos(this.phi1)) ;
    var Y2 = Y_from_y(this.r2*sin(this.phi1)) ;
    var X3 = X_from_x(this.r1*cos(this.phi2)) ;
    var Y3 = Y_from_y(this.r1*sin(this.phi2)) ;
    var X4 = X_from_x(this.r2*cos(this.phi2)) ;
    var Y4 = Y_from_y(this.r2*sin(this.phi2)) ;
    
    context.lineWidth = 1 ;
    context.strokeStyle = '#00aaff' ;
    context.fillStyle   = '#ff00ff' ;
    var direction = (this.phi1>this.phi2) ;
    context.beginPath() ;
    context.moveTo(X1, Y1) ;
    context.arc(CX, CY, R1, this.phi1, this.phi2,  direction) ;
    context.lineTo(X4, Y4) ;
    context.arc(CX, CY, R2, this.phi2, this.phi1, !direction) ;
    context.lineTo(X1, Y1) ;
    if(this.is_touched) context.fill() ;
    context.stroke() ;
    
    context.restore() ;
  }
  this.update_segments = function(){
    if(this.is_touched){
      for(var i=0 ; i<this.segments.length ; i++){
        this.segments[i].touch(this.particle_types) ;
      }
    }
  }
}

function make_detector(){
  // Run away if we're in mobile mode.
  //if(device=='mobile') return ;

  // These are somewhat arbitrary arrangements of subdetectors that are vaguely inspired
  // by general purpose detectors.  They are arranged in radii to look good on the
  // canvas rather than to be realistic.  They're roughly on a logarithmic scale.
  
  // Let's make a few subdetectors:
  // Line colours first.
  var strkColor = 'rgb(255,255,255)' ; // Pixel tracker.
  var ptrkColor = 'rgb(  0,150,150)' ; // Silicon tracker (should really be first.)
  var ecalColor = 'rgb(  0,200,  0)' ; // Electromagnetic calorimeter.
  var hcalColor = 'rgb(150,170,255)' ; // Hadronic calorimeter.
  var mcalColor = 'rgb(250,  0,  0)' ; // Muon chambers.  (In reality this a collection of many subdetectors.)
  
  // Now fill colours.  Each subdetector has a linear gradient between the pairs of stops.
  var strkRgb0 = [100,100,100] ; var strkRgb1 = [255,255,255] ;
  var ptrkRgb0 = [  0,150,150] ; var ptrkRgb1 = [  0,255,255] ;
  var ecalRgb0 = [ 0,100,   0] ; var ecalRgb1 = [255,255,255] ;
  var hcalRgb0 = [ 50, 50,100] ; var hcalRgb1 = [255,255,255] ;
  var mcalRgb0 = [255,100,100] ; var mcalRgb1 = [255,255,255] ;
  
  // Make the particle responses.  These are roughly inspired by physics knowledge.
  var strkResponses = [] ;
  strkResponses['pion'    ] = 1.0 ;
  strkResponses['muon'    ] = 1.0 ;
  strkResponses['electron'] = 1.0 ;
  strkResponses['photon'  ] = 0.0 ;
  strkResponses['tau'     ] = 1.0 ;
  
  var ptrkResponses = [] ;
  ptrkResponses['pion'    ] = 1.0 ;
  ptrkResponses['muon'    ] = 1.0 ;
  ptrkResponses['electron'] = 1.0 ;
  ptrkResponses['photon'  ] = 0.0 ;
  ptrkResponses['tau'     ] = 1.0 ;
  
  var ecalResponses = [] ;
  ecalResponses['pion'    ] = 0.1 ;
  ecalResponses['muon'    ] = 0.1 ;
  ecalResponses['electron'] = 1.0 ;
  ecalResponses['photon'  ] = 1.0 ;
  ecalResponses['tau'     ] = 0.3 ;
  
  var hcalResponses = [] ;
  hcalResponses['pion'    ] = 0.1 ;
  hcalResponses['muon'    ] = 0.1 ;
  hcalResponses['electron'] = 0.3 ;
  hcalResponses['photon'  ] = 0.3 ;
  hcalResponses['tau'     ] = 1.0 ;
  
  var mcalResponses = [] ;
  mcalResponses['pion'    ] = 0.1 ;
  mcalResponses['muon'    ] = 0.8 ;
  mcalResponses['electron'] = 0.1 ;
  mcalResponses['photon'  ] = 0.1 ;
  mcalResponses['tau'     ] = 0.1 ;
  
  // Assemble the subdetectors.
  // function subdetector_object(name, r1, r2, spacing_r, spacing_phi, nLayers, nWedges, nSegments, fillColor, strokeColor)
  var strk = new subdetector_object('strk', 0.03*Sr, 0.12*Sr, 0.01*Sr, 0.001*2*pi, 6, 12,  3, strkColor, strkRgb0, strkRgb1, strkResponses) ;
  var ptrk = new subdetector_object('ptrk', 0.13*Sr, 0.27*Sr, 0.01*Sr, 0.002*2*pi, 5, 60,  1, ptrkColor, ptrkRgb0, ptrkRgb1, ptrkResponses) ;
  var ecal = new subdetector_object('ecal', 0.30*Sr, 0.49*Sr, 0.01*Sr, 0.005*2*pi, 4, 12, 12, ecalColor, ecalRgb0, ecalRgb1, ecalResponses) ;
  var hcal = new subdetector_object('hcal', 0.52*Sr, 0.70*Sr, 0.01*Sr, 0.005*2*pi, 3, 16,  8, hcalColor, hcalRgb0, hcalRgb1, hcalResponses) ;
  var mcal = new subdetector_object('mcal', 0.72*Sr, 0.99*Sr, 0.03*Sr, 0.003*2*pi, 3, 18, 10, mcalColor, mcalRgb0, mcalRgb1, mcalResponses) ;
  
  // Put the subdetectors into the detector.
  detector.subdetectors.push(ptrk) ;
  detector.subdetectors.push(strk) ;
  detector.subdetectors.push(ecal) ;
  detector.subdetectors.push(hcal) ;
  detector.subdetectors.push(mcal) ;
}

function make_logo_detector(){
  // Lightweight version for the logo.
  // Line colours first.
  var hcalColor = 'rgb(150,170,255)' ; // Hadronic calorimeter.
  var mcalColor = 'rgb(250,  0,  0)' ; // Muon chambers.  (In reality this a collection of many subdetectors.)
  var mcalColor = 'rgb(  0,  0,  0)' ; // Muon chambers.  (In reality this a collection of many subdetectors.)
  
  // Now fill colours.  Each subdetector has a linear gradient between the pairs of stops.
  var hcalRgb0 = [ 50, 50,100] ; var hcalRgb1 = [255,255,255] ;
  var mcalRgb0 = [100,100,100] ; var mcalRgb1 = [255,255,255] ;
  
  // Make the particle responses.  These are roughly inspired by physics knowledge.
  var hcalResponses = [] ;
  hcalResponses['pion'    ] = 0.1 ;
  hcalResponses['muon'    ] = 0.1 ;
  hcalResponses['electron'] = 0.3 ;
  hcalResponses['photon'  ] = 0.3 ;
  hcalResponses['tau'     ] = 1.0 ;
  
  var mcalResponses = [] ;
  mcalResponses['pion'    ] = 0.1 ;
  mcalResponses['muon'    ] = 0.8 ;
  mcalResponses['electron'] = 0.1 ;
  mcalResponses['photon'  ] = 0.1 ;
  mcalResponses['tau'     ] = 0.1 ;
  
  // Assemble the subdetectors.
  // function subdetector_object(name, r1, r2, spacing_r, spacing_phi, nLayers, nWedges, nSegments, fillColor, strokeColor)
  var hcal = new subdetector_object('hcal', 0.52*Sr, 0.70*Sr, 0.01*Sr, 0.005*2*pi, 2, 16,  1, hcalColor, hcalRgb0, hcalRgb1, hcalResponses) ;
  var mcal = new subdetector_object('mcal', 0.72*Sr, 0.99*Sr, 0.03*Sr, 0.003*2*pi, 2, 18,  1, mcalColor, mcalRgb0, mcalRgb1, mcalResponses) ;
  
  // Put the subdetectors into the detector.
  //detector.subdetectors.push(hcal) ;
  detector.subdetectors.push(mcal) ;
}
// These objects are supposed to handle the particles (their path through the detector
// etc) but some parts are broken.

// These particles have tracks.
function particle_object(type, charge, pt, phi, x0, y0, isCosmic){
  this.type   = type   ;
  this.charge = charge ;
  this.pt     = pt     ;
  this.phi    = phi    ;
  this.settings = particle_settings[this.type] ;
  this.charge = this.settings.charge ; // Set charge to 0 for photons.
  this.mass = this.settings.mass ;
  this.isCosmic = isCosmic ;
  
  var nDirs = 4 ;
  this.phi = 2*pi*((nDirs*(this.phi/(2*pi)))%nDirs) ;
  this.track = new trackObject(this.charge, this.mass, this.pt, this.phi, x0, y0, this.settings.color, this.type, this.isCosmic) ;
  this.track.lineWidth = this.settings.lineWidth ;
  this.draw = function(context, step){
    this.track.draw(context, step) ;
    
    var last_point_index = (step<0) ? this.track.trajectory.length : floor(this.track.trajectory.length*step/100) ;
    last_point_index = max(0,min(last_point_index, this.track.trajectory.length-1)) ;
    var xy = this.track.trajectory[last_point_index] ;
    var X = X_from_x(xy[0]) ;
    var Y = Y_from_y(xy[1]) ;
    draw_particle_head(context, X, Y, this.settings.headSize, this.settings.color, this.settings.symbol, this.settings.headShape) ;
  }
}

// This class has tracks as members.
function jet_object(pt, phi, x0, y0, color, PNG){
  this.pt  = pt  ;
  this.phi = phi ;
  this.color = color ;
  this.tracks = [] ;
  this.x0 = x0 ;
  this.y0 = y0 ;
  var remaining_pt = pt ;
  var charge = (PNG.random()<0.5) ? 1 : -1 ;
  do{
    charge *= -1 ;
    var sign = -charge ;
    var pt_tmp  = 0.75*remaining_pt*PNG.random() ;
    var phi_tmp = this.phi + sign*PNG.random()*collision_parameters.jet_track_dphi ;
    remaining_pt -= pt_tmp ;
    this.tracks.push(new trackObject(charge, mPi, pt_tmp, phi_tmp, 0, 0, this.color, 'pion', false)) ;
  } while(remaining_pt>collision_parameters.jet_track_pt_threshold) ;
  for(var i=0 ; i<this.tracks.length ; i++){
    this.tracks[i].make_trajectory(detector) ;
  }
  this.draw = function(context, step){
    for(var i=0 ; i<this.tracks.length ; i++){
      this.tracks[i].draw(context, step) ;
    }
  }
}

function trackObject(charge, mass, pt, phi, x0, y0, color, particle_type, isCosmic){
  this.charge = charge ;
  this.mass = mass ;
  this.pt  =  pt ;
  this.phi = phi ;
  this.color = color ;
  this.particle_type = particle_type ;
  this.lineWidth = particleLineWidth ;
  this.trajectory = [] ;
  this.x0 = x0 ;
  this.y0 = y0 ;
  this.isCosmic = isCosmic ;
  if(this.isCosmic){
    this.y0 = -0.95*Sr ;
  }
  
  this.specialParticle = false ;
  for(var j=0 ; j<special_particle_names.length ; j++){
    if(special_particle_names[j]==this.particle_type) this.specialParticle = true ;
  }
  
  this.make_trajectory = function(theDetector){
    // This should propagate a particle using the Lorentz force law for the magnetic
    // fields in the detector.  It's a bit broken because the units are not handled
    // properly.
    
    // Parameters based on the magnetic field, and particle mass.
    var k1 =  pow(SoL,2)*theDetector.B1/(this.mass*1e9) ;
    var k2 = -pow(SoL,2)*theDetector.B2/(this.mass*1e9) ;
    
    // Express v in ms^-1.
    var gv = this.pt/this.mass ;
    var vt = SoL*sqrt(gv*gv/(gv*gv+1)) ;
    var vx = vt*cos(this.phi) ;
    var vy = vt*sin(this.phi) ;
    
    // Express t in s.
    var dt = 1e-9 ;
    var x  = this.x0 ;
    var y  = this.y0 ;
    var sign = this.charge ;
    var k = k1 ;
    this.trajectory.push([x,y]) ;
    for(var i=0 ; i<500 ; i++){
      var b2 = (vx*vx+vy*vy)/(SoL*SoL) ;
      var g  = 1/sqrt(1-b2) ;
      
      // Careful!  We need to normalise vx and vy to make sure we don't violate the speed
      // of light
      var dvx =  k*this.charge*vy*dt ;
      var dvy = -k*this.charge*vx*dt ;
      var vxTmp = vx + dvx ;
      var vyTmp = vy + dvy ;
      
      vx = vt*vxTmp/sqrt(vxTmp*vxTmp+vyTmp*vyTmp) ;
      vy = vt*vyTmp/sqrt(vxTmp*vxTmp+vyTmp*vyTmp) ;
      var dx = vx*dt ;
      var dy = vy*dt ;
      x += dx ;
      y += dy ;
      var r = sqrt(x*x+y*y) ;
      if(r<0.2*Sr){
        sign = this.charge ;
        k = k1 ;
      }
      if(this.specialParticle){
        if(this.isCosmic && r>Sr*1.2){
          break ;
        }
        else if(r>particle_settings[this.particle_type].rCutoff){
          break ;
        }
      }
      if(r<detector.magnetFlipR){
        sign = this.charge ;
        k = k1 ;
      }
      else if(r<detector.magnetStepR){
        sign = -this.charge ;
        k = k2 ;
      }
      else if(r<detector.magnetEdgeR){
        sign = -this.charge ;
        k = 0 ;
      }
      else{
        break ;
      }
      this.trajectory.push([x,y]) ;
    }
  }
  this.make_trajectory_old = function(theDetector){
    // This should propagate a particle using the Lorentz force law for the magnetic
    // fields in the detector.  It's a bit broken because the units are not handled
    // properly.
    
    // Parameters based on the magnetic field, and particle mass.
    var k1 =  pow(SoL,2)*theDetector.B1/(this.mass*1e9) ;
    var k2 = -pow(SoL,2)*theDetector.B2/(this.mass*1e9) ;
    
    // Express v in ms^-1.
    var gv = this.pt/this.mass ;
    var vt = SoL*sqrt(gv*gv/(gv*gv+1)) ;
    var vx = vt*cos(this.phi) ;
    var vy = vt*sin(this.phi) ;
    
    // Express t in s.
    var dt = 1e-9 ;
    var x  = this.x0 ;
    var y  = this.y0 ;
    var sign = this.charge ;
    var k = k1 ;
    this.trajectory.push([x,y]) ;
    for(var i=0 ; i<500 ; i++){
      var b2 = (vx*vx+vy*vy)/(SoL*SoL) ;
      var g  = 1/sqrt(1-b2) ;
      
      // Careful!  We need to normalise vx and vy to make sure we don't violate the speed
      // of light
      var dvx =  k*this.charge*vy*dt ;
      var dvy = -k*this.charge*vx*dt ;
      var vxTmp = vx + dvx ;
      var vyTmp = vy + dvy ;
      
      vx = vt*vxTmp/sqrt(vxTmp*vxTmp+vyTmp*vyTmp) ;
      vy = vt*vyTmp/sqrt(vxTmp*vxTmp+vyTmp*vyTmp) ;
      var dx = vx*dt ;
      var dy = vy*dt ;
      x += dx ;
      y += dy ;
      var r = sqrt(x*x+y*y) ;
      if(r<0.2*Sr){
        sign = this.charge ;
        k = k1 ;
      }
      if(this.specialParticle){
        if(this.isCosmic && r>Sr*1.2){
          break ;
        }
        else if(r>particle_settings[this.particle_type].rCutoff){
          break ;
        }
      }
      if(r<detector.magnetFlipR){
        sign = this.charge ;
        k = k1 ;
      }
      else if(r<detector.magnetStepR){
        sign = -this.charge ;
        k = k2 ;
      }
      else if(r<detector.magnetEdgeR){
        sign = -this.charge ;
        k = 0 ;
      }
      else{
        break ;
      }
      this.trajectory.push([x,y]) ;
    }
  }
  
  this.touch_cells = function(the_detector){
    // Run away if we're in mobile mode.
    if(device=='mobile') return ;
  
    // Touch all the cells so that the segments can get turned on.
    for(var i=0 ; i<this.trajectory.length ; i++){
      var xy = this.trajectory[i] ;
      var x = xy[0] ;
      var y = xy[1] ;
      var r  = sqrt(x*x+y*y) ;
      var phi = atan2(y,x) ;
      if(phi<0   ) phi += 2*pi ;
      if(phi>2*pi) phi -= 2*pi ;
      var u = floor(  r/cellSizeR  ) ;
      var v = floor(phi/cellSizePhi) ;
      if(u<the_detector.cells.length){
        if(v<the_detector.cells[u].length){
          the_detector.cells[u][v].touch(this.particle_type) ;
        }
      }
    }
    return ;
  }
  this.make_trajectory(detector) ;
  this.touch_cells(detector) ;
  
  this.draw = function(context, step){
    // Normal stuff for the canvas.
    context.save() ;
    context.beginPath() ;
    context.lineCap = 'round' ;
    
    // We stop after a certain number of steps.  In this case step is a percentage of the
    // number of points available.
    var last_point_index = (step<0) ? this.trajectory.length : floor(this.trajectory.length*step/100) ;
    last_point_index = Math.min(last_point_index, this.trajectory.length-1) ;
    
    // Walk through the trajectory.
    context.moveTo(X_from_x(this.trajectory[1][0]),Y_from_y(this.trajectory[1][1])) ;
    
    // rTmp makes sure we stop if we find r becoming smaller again.
    var rTmp = 0 ;
    for(var i=0 ; i<last_point_index ; i++){
      var xy = this.trajectory[i] ;
      var r = sqrt( pow(xy[0],2) + pow(xy[1],2) ) ;
      if(r<rTmp && this.isCosmic==false) break ;
      rTmp = r ;
      if(this.specialParticle){
        if(this.isCosmic){
        }
        else if(r>particle_settings[this.particle_type].rCutoff){
          break ;
        }
      }
      else if(r>0.3*Sr){
        break ;
      }
      context.lineTo(X_from_x(xy[0]),Y_from_y(xy[1])) ;
    }
    
    if(doLogo) this.lineWidth *= 2 ;
    // Set line styles here.  Draw the first line.
    context.lineWidth = 2*this.lineWidth ;
    context.strokeStyle = 'rgb(255,255,255)' ;
    context.stroke() ;
    
    // Now draw the second line, following the same path.
    context.lineWidth = this.lineWidth ;
    context.strokeStyle = this.color ;
    context.shadowBlur = 5 ;
    context.shadowColor = this.color ;
    context.stroke() ;
    
    context.restore() ;
  }
}
// Simple function to clear the canvas.
function clear_canvas(context){
  context.fillStyle = eventDisplay_fillColor ;
  context.fillRect(0,0,cw,ch) ;
}

// This function draws a detector with no activity in it.  This can then be used to speed
// up drawing of the detector with activity in it.
function make_eventDisplay_base(){
  //return ;
  var canvas_base = Get('canvas_eventDisplay_hidden') ;
  var context_base = canvas_base.getContext('2d') ;
  
  //context_base.drawImage(Get('img_CMSPhoto'),  0, 0) ;
  
  context_base.fillStyle = 'rgba(255,255,255,0.25)' ;
  //context_base.fillRect(0,0,cw,ch) ;
  
  detector.draw(context_base) ;
}

function draw_eventDisplay_base_old(context){
  context.drawImage(Get('canvas_eventDisplay_hidden'),0,0) ;
}

function draw_eventDisplay_base(context){
  context.drawImage(Get('img_detectorBase'),0,0,cw,ch) ;
}

function draw_eventDisplay(collision, context){
  // Clear the canvas so we start with a clean black background.
  clear_canvas(context) ;
  
  // Draw the base image.
  draw_eventDisplay_base(context) ;
  
  // For debugging purposes, we can draw a mesh of cells.
  if(game.underlay_cells) draw_cells(context) ;
  
  // Draw the active segments over the top.
  detector.draw_active_segments(context) ;
  
  // Draw the tracks next.  So far these are only decorative.
  collision.draw_tracks(context, -1) ;
  
  // Now the jets.  These are collections of tracks of the same colour.
  // decorative so far.
  collision.draw_jets(context, -1) ;
  
  // Draw the main particles last, as we need the player to see these very clearly.
  if(game.difficulty!='pro'){
    collision.draw_main_particles(context, -1) ;
  }
  
  //collision.draw_interaction_point(context) ;
  
  // For debugging purposes, we can draw a mesh of cells again, this time on top of the
  // detector components and particles.
  if(game.overlay_cells) draw_cells(context) ;
}

function draw_eventDisplay_step_proxy(){
  if(game.kill_drawStep){
    var time_left = collision_delay*(100-game.draw_step)/100 ;
    window.setTimeout(collision_breather, time_left) ;
    return ;
  }
  var collision = game.current_shift.current_collision ;
  if(game.draw_step==0){
    var canvas_hidden = Get('canvas_eventDisplay_hidden_activity') ;
    var context_hidden = canvas_hidden.getContext('2d') ;
    draw_eventDisplay_step0(collision, context_hidden) ;
  }
  else{
    draw_eventDisplay_step(collision, context, game.draw_step*game.draw_step_scale) ;
  }
  
  if(game.paused==false){
    var nSteps = collision_delay/delay_drawStep ;
    var dStep = 100/nSteps ;
    game.draw_step += dStep ;
    game.draw_step = floor(game.draw_step) ;
  }
  if(game.draw_step<=100){
    window.setTimeout(draw_eventDisplay_step_proxy, delay_drawStep) ;
  }
  else{
    window.setTimeout(collision_breather, delay_drawStep) ;
  }
}

function draw_eventDisplay_step0(collision, context){
  // Clear the canvas so we start with a clean black background.
  clear_canvas(context) ;
  
  // Draw the base image.
  draw_eventDisplay_base(context) ;
  
  // For debugging purposes, we can draw a mesh of cells.
  if(game.underlay_cells) detector.draw_cells(context) ;
  
  // Draw the active segments over the top.
  detector.draw_active_segments(context) ;
  
  // Draw the tracks next.  So far these are only decorative.
  collision.draw_tracks(context, -1) ;
  
  // Now the jets.  These are collections of tracks of the same colour.
  // decorative so far.
  collision.draw_jets(context, -1) ;
}

function draw_eventDisplay_step(collision, context, step){
  context.drawImage(Get('canvas_eventDisplay_hidden_activity'),0,0) ;
  
  // For debugging purposes, we can draw a mesh of cells.
  //if(game.underlay_cells) draw_cells(context) ;
  
  // Draw the active segments over the top.
  //detector.draw_active_segments(context) ;
  
  // Draw the main particles last, as we need the player to see these very clearly.
  if(game.difficulty!='pro'){
    collision.draw_main_particles(context, step) ;
  }
  
  // For debugging purposes, we can draw a mesh of cells again, this time on top of the
  // detector components and particles.
  //if(game.overlay_cells) draw_cells(context) ;
}

function draw_game_start_screen(){
  // Function to draw the first screen of the game.  This is screen is only seen once,
  // but we call this function many times to animate the spokes.
  context.save() ;
  clear_canvas(context) ;
  
  spokes.draw(context) ;
  
  // Make some nice text boxes.  This was written last minute, so it should probably be
  // tided up and many variables moved to settings.js.
  context.strokeStyle = '#ffffff' ;
  context.lineWidth = 2 ;
  
  context.fillStyle = text_color ;
  context.textAlign = 'center' ;
  context.font = 0.08*ch+'px arial' ;
  context.fillText('Welcome to the'     , 0.5*cw, 0.15*ch) ;
  context.fillText('Higgs Trigger Game!', 0.5*cw, 0.27*ch) ;
  
  context.lineWidth = 1 ;
  context.font = 0.05*ch+'px arial' ;
  context.fillText('Choose your team:', 0.5*cw,  0.40*ch) ;
  
  context.font = 0.1*ch+'px arial' ;
  context.fillText('vs', 0.5*cw,  0.7*ch) ;
  
  // Draw some text boxes.
  teams['ATLAS'].draw_experiment_box(context, 'img_ATLAS') ;
  teams['CMS'  ].draw_experiment_box(context, 'img_CMS'  ) ;
  
  context.restore() ;
}

function draw_particle_head(context, X, Y, size, color, text, shape){
  context.save() ;
  
  //var rho = 5 ;
  var rho = drawRatio*size ;
  
  context.beginPath() ;
  if(abs(shape)<=2){
    context.arc(X, Y, rho, 0, 2*pi, true) ;
  }
  else if(abs(shape)>=3){
    var extra = (shape>0) ? 0 : 0.5 ;
    shape = abs(shape) ;
    for(var i=0 ; i<shape ; i++){
      var theta = 2*pi*(i+extra)/shape ;
      var Xi = X + rho*cos(theta) ;
      var Yi = Y + rho*sin(theta) ;
      if(i==0){
        context.moveTo(Xi, Yi) ;
      }
      else{
        context.lineTo(Xi,Yi) ;
      }
    }
    context.closePath() ;
  }
  context.fillStyle = color ;
  var dR = 0.5*rho ;
  var gradient = context.createRadialGradient(X+0.75*dR,Y-0.75*dR,0,X+0.8*dR,Y-0.8*dR,2*dR) ;
  gradient.addColorStop(0,'white') ;
  gradient.addColorStop(1,color  ) ;
  context.fillStyle = gradient ;
  context.shadowBlur = size ;
  context.shadowColor = 'rgb(0,0,0)' ;
  context.fill() ;
  
  context.strokeStyle = 'rgb(0,0,0)' ;
  context.fillStyle = 'rgb(255,255,255)' ;
  context.font = 'italic ' + 1.5*(rho) + 'px times , serif' ;
  context.textBaseline = 'middle' ;
  context.textAlign    = 'center' ;
  context.shadowBlur = 0 ;
  context.strokeText(text, X, Y) ;
  context.fillText(text, X, Y) ;
  
  context.restore() ;
}

// Settings for the spinning spokes
function spokes_object(nSpokes, rate, oddColor, evenColor){
  this.nSpokes   = nSpokes   ;
  this.rate      = rate      ;
  this.oddColor  = oddColor  ;
  this.evenColor = evenColor ;
  
  this.draw = function(context){
    // This function draw the light/dark green spinning "spokes" that appear in the
    // background between shifts.
    context.save() ;
    
    // Fill the background with one colour, then draw triangles with the other.
    context.fillStyle = this.oddColor ;
    context.fillRect(0,0,cw,ch) ;
    
    // Draw the spokes in the other colour.
    context.fillStyle = this.evenColor ;
    
    // Advance phi0 so that the triangles get offset by a slightly different amount with
    // each heartbeat.
    var phi0 = this.rate*heartbeat_counter
    
    // Now loop over the spokes and draw triangles to complete the pattern.
    for(var i=0 ; i<this.nSpokes ; i+=2){
      var phi1 = phi0 + 2*pi*(i+0)/this.nSpokes ;
      var phi2 = phi0 + 2*pi*(i+1)/this.nSpokes ;
      
      // Would it cheaper to make only one path or several?
      context.beginPath() ;
    
      // Some boring maths stuff.  Yawn.
      context.moveTo(0.5*cw, 0.5*ch) ;
      context.lineTo(0.5*cw+2*cw*cos(phi1), 0.5*ch+2*cw*sin(phi1)) ;
      context.lineTo(0.5*cw+2*cw*cos(phi2), 0.5*ch+2*cw*sin(phi2)) ;
      context.lineTo(0.5*cw, 0.5*ch) ;
      context.closePath() ;
      context.fill() ;
    }
    
    context.restore() ;
  }
}
var spokes = new spokes_object(30, 0.002*2*pi, 'rgb(248,169,34)', 'rgb(254,191,36)') ;

// Particle masses
var mEl = 0.10005 ;
var mMu = 0.105 ;
var mPi = 0.137 ;
var mPh = 0.00000001 ;
var mTau = 1.777;

// Make the lowest level "fundamental" particles.
var particle_names = [] ;
particle_names.push('electron') ;
particle_names.push('pion'    ) ;
particle_names.push('muon'    ) ;
particle_names.push('tau'     ) ;
particle_names.push('photon'  ) ;

var special_particle_names = [] ;
special_particle_names.push('electron') ;
special_particle_names.push('muon'    ) ;
special_particle_names.push('tau'     ) ;
special_particle_names.push('photon'  ) ;

function particle_settings_object(mass, charge, color, symbol, lineWidth, rCutoff, headShape, headSize){
  this.mass      = mass      ;
  this.charge    = charge    ;
  this.color     = color     ;
  this.symbol    = symbol    ;
  this.lineWidth = lineWidth ;
  this.rCutoff   = rCutoff   ;
  this.headShape = headShape ;
  this.headSize  = headSize  ;
}

var plw = particleLineWidth ;
var phs = particleHeadSize  ;
var particle_settings = [] ;
particle_settings['muon'    ] = new particle_settings_object(mMu , 1, 'rgb(255,100,100)', '\u03BC', plw, 0.90*Sr, 1, phs) ;
particle_settings['electron'] = new particle_settings_object(mEl , 1, 'rgb(  0,200,  0)', 'e'     , plw, 0.51*Sr, 6, phs) ;
particle_settings['photon'  ] = new particle_settings_object(mPh , 0, 'rgb(  0,  0,  0)', '\u03B3', plw, 0.51*Sr, 5, phs) ;
particle_settings['tau'     ] = new particle_settings_object(mMu , 1, 'rgb(150, 57,239)', '\u03C4', plw, 0.65*Sr, 4, phs) ;
particle_settings['pion'    ] = new particle_settings_object(mPi , 1, 'rgb(  0,  0,  0)', '\u03BE', plw, 0.65*Sr,-4, phs) ;
function update_particle_settings(lineWidth, headSize){
  particleLineWidth = lineWidth ;
  particleHeadSize  = headSize  ;
  for(var i=0 ; i<particle_names.length ; i++){
    particle_settings[particle_names[i]].lineWidth = particleLineWidth ;
    particle_settings[particle_names[i]].headSize  = particleHeadSize  ;
  }
}


// These classes are used to recursively decay particles and pick final states.
// The particles are arranged at the bottom of the page, and should be changeable to suit
// the style of game being played.
// A random final state is chosen in the following way:
// <particle_decay_collection>.recursively_decay(<psuedorandom_number_generator>) ;

function particle_decay_object(probability, topology){
  this.topology = topology ;
  this.probability = probability ;
  this.cumulative_probability = 0 ;
  this.normalised_probability = 0 ;
  this.normalised = false ;
}

// This class contains a list of decay modes for a given particle.
function particle_decay_collection(name){
  // Name of the particle.
  this.name = name ;
  
  // List of decay modes, each containing a probability and a topology.
  this.decay_modes = [] ;
  
  // Complete and unique list of final state topologies after all downstream decays.
  this.final_state_topologies = [] ;
  
  this.add_decay_mode = function(probability, topology){
    // This just pushes back a new decay mode.
    this.decay_modes.push(new particle_decay_object(probability, topology)) ;
    this.normalise_probabilities() ;
  }
  
  this.normalise_probabilities = function(){
    // This adds up all the probabilities of the next level down.
    // First add all probabilities.
    var cumulative_probability = 0 ;
    for(var i=0 ; i<this.decay_modes.length ; i++){
      this.decay_modes[i].normalised = false ;
      cumulative_probability += this.decay_modes[i].probability ;
      this.decay_modes[i].cumulative_probability = cumulative_probability ;
    }
    // Then normalise them.
    for(var i=0 ; i<this.decay_modes.length ; i++){
      this.decay_modes[i].cumulative_probability /= cumulative_probability ;
      this.decay_modes[i].normalised_probability = this.decay_modes[i].probability/cumulative_probability ;
      this.decay_modes[i].normalised = true ;
    }
  }
  this.choose_decay_mode = function(PNG){
    if(isNaN(PNG.seed)) return [] ;
    // This just picks a random decay mode.
    if(this.is_stable()) return [this.name] ;
    var rnd = PNG.random() ;
    for(var i=0 ; i<this.decay_modes.length ; i++){
      if(rnd<this.decay_modes[i].cumulative_probability){
        return this.decay_modes[i].topology ;
      }
    }
  }
  this.is_stable = function(){
    // This is needed to see if we have reached the final level of a decay tree.
    return (this.decay_modes.length==0) ;
  }
  this.recursively_decay = function(PNG){
    // This function recursively decays a particle.  It loops through the daughters and
    // pushes back particles based on the following criteria:
    // 1- if the daughter is stable it gets pushed back.
    // 2- otherwise the daughter is recursively decayed.
    //
    // decay_scheme is a global variable used to look up the relevant decays.
    var final_state_topology = [] ;
    
    // Check to see if we've reached a stable particle (eg trying to decay a muon.)
    if(this.is_stable()){
      final_state_topology.push(this.name) ;
      return final_state_topology ;
    }
    
    // Now get the daughter particles.  Careful, we need to clone this array so that we
    // don't change the original!
    // This breaks when seed is NaN, but fixing that can cause an infinite loop!
    var intermediate_topology = this.choose_decay_mode(PNG).slice(0) ;
    
    for(var i=0 ; i<intermediate_topology.length ; i++){
      // We receive a particle name, so look up the particle archetype by this name.
      var intermediate = decay_scheme[intermediate_topology[i]] ;
      if(intermediate.is_stable()){
        // If it's stable just push it into the final state topology.
        final_state_topology.push(intermediate_topology[i]) ;
      }
      else{
        // Otherwise decay the daughter particle.
        var decay_mode = intermediate.choose_decay_mode(PNG) ;
        for(var j=0 ; j<decay_mode.length ; j++){
          intermediate_topology.push(decay_mode[j]) ;
        }
        
      }
    }
    return final_state_topology ;
  }
  this.get_final_state_topologies = function(){
    // Get all final state topologies and sort them into a unique list.
    // This is useful to see what counts as a "signal" event.
    var topologies   = [] ;
    var probabilites = [] ;
    
    // Escape if we have a stable particle.
    if(this.is_stable()) return [[this.name], [1.0]] ;
    
    for(var i=0 ; i<this.decay_modes.length ; i++){
      // The number of final states can vary depending on what intermediate particles we
      // have.  Start with an empty vector of final states and increment as necessary.
      var intermediate_topologies    = [] ;
      var intermediate_probabilities = [] ;
      for(var j=0 ; j<this.decay_modes[i].topology.length ; j++){
        var archetype = decay_scheme[this.decay_modes[i].topology[j]] ;
        if(archetype.is_stable()){
          // If we get here then we have reached the end of a decay tree.
          var name = archetype.name ;
          var prob = this.decay_modes[i].normalised_probability ;
          if(intermediate_topologies.length==0){
            // If this is the first particle, then add a new intermediate topology.
            intermediate_topologies   .push([name]) ;
            intermediate_probabilities.push([prob]) ;
          }
          else{
            // Otherwise add the particle to the existing intermediate topologies.
            for(var k=0 ; k<intermediate_topologies.length ; k++){
              intermediate_topologies[k]   .push(name) ;
            }
          }
        }
        else{
          // Otherwise we need to split the decay tree further.
          var downstream_decays        = archetype.get_final_state_topologies() ;
          var downstream_topologies    = downstream_decays[0] ;
          var downstream_probabilities = downstream_decays[1] ;
          if(intermediate_topologies.length==0){
            intermediate_topologies    = downstream_topologies   .slice(0) ;
            intermediate_probabilities = downstream_probabilities.slice(0) ;
          }
          else{
            var tmp_topologies   = intermediate_topologies   .slice(0) ;
            var tmp_probabilties = intermediate_probabilities.slice(0) ;
            intermediate_topologies    = [] ;
            intermediate_probabilities = [] ;
            for(var k=0 ; k<downstream_topologies.length ; k++){
              for(var l=0 ; l<tmp_topologies.length ; l++){
                intermediate_topologies   .push(tmp_topologies[l].concat(downstream_topologies[k])) ;
                intermediate_probabilities.push(tmp_probabilties[l]*downstream_probabilities[k]) ;
              }
            }
          }
        }
      }
      topologies   = topologies  .concat(intermediate_topologies   ) ;
      probabilites = probabilites.concat(intermediate_probabilities) ;
    }
    
    // Now we need to trim things down into a unique list.
    var topologies_out   = [] ;
    var probabilites_out = [] ;
    for(var i=0 ; i<topologies.length ; i++){
      var match = false ;
      for(var j=i+1 ; j<topologies.length ; j++){
        if(match_topologies(topologies[i], [topologies[j]])){
          match = true ;
          break ;
        }
      }
      if(match==false){
        topologies_out  .push(  topologies[i]) ;
        probabilites_out.push(probabilites[i]) ;
      }
    }
    
    return [topologies_out,probabilites_out] ;
  }
  this.set_final_state_topologies = function(){
    // Don't do this by default because it can be expensive.
    this.final_state_topologies = this.get_final_state_topologies() ;
  }
}

function match_topologies(topology, target_topologies){
  // This function compares the topology of a collision to the signal topologies.  It
  // compares the topologies one at a time, removing items from the target topology as
  // they are matched.
  for(var i=0 ; i<target_topologies.length ; i++){
    var target = target_topologies[i] ;
    
    // First make an array of matches and fill it with false
    var matches = [] ;
    for(var j=0 ; j<target.length ; j++){
      matches.push(false) ;
    }
    
    // Now compare the topologies.
    for(var j=0 ; j<topology.length ; j++){
      for(var k=0 ; k<target.length ; k++){
        if(matches[k]) continue ;
        if(topology[j]==target[k]){
          matches[k] = true ;
          break ;
        }
      }
    }
    
    // At this point we have an array of matches for the target, so just run over the
    // array of matches.  Assume success until we see a failure to match.
    var success = true ;
    for(var j=0 ; j<matches.length ; j++){
      if(matches[j]==false){
        success = false ;
        break ;
      }
    }
    if(success) return true ;
  }
  // If we get this far then none of the topologies were matched.
  return false ;
}

function generic_particle_decay(name, decays){
  // This is a short hand function that assembles a particle_decay_collection from a
  // single array, so we can have single line particle declarations.
  var particle_decay = new particle_decay_collection(name) ;
  for(var i=0 ; i<decays.length ; i++){
    particle_decay.add_decay_mode(decays[i][0], decays[i][1]) ;
  }
  return particle_decay ;
}

function generic_decay_scheme(name, particle_list){
  // This makes a decay scheme (a string indexed array of particle_decay_collection
  // objects) that can be used for collision decays.
  var scheme = new particle_decay_collection(name) ;
  for(var i=0 ; i<particle_list.length ; i++){
    var particle_name = particle_list[i][0] ;
    var particle = new generic_particle_decay(particle_name, particle_list[i][1]) ;
    scheme[particle_name] = particle ;
  }
  return scheme ;
}

// Define the different schema, starting from the simplest to the most complex.
var cosmics_decay_array = [
  ['signal'     , [ [ 1.0 , ['ZBoson']] ]] ,
  ['background' , [ [ 1.0 , []] ]] ,
  ['ZBoson'     , [ [1.0, ['muon','muon']] ]] ,
  ['muon'       , [] ] 
] ;

var WZToEMu_decay_array = [
  ['signal'     , [ [ 1.0 , ['electron','electron']], [1.0, ['muon','muon']] ]] ,
  ['background' , [ [ 1.0 , ['ZBoson']], [1.0, ['WBoson']] ]] ,
  ['ZBoson'     , [ [1.0, ['muon','muon']] , [1.0, ['electron','electron']] ]] ,
  ['WBoson'     , [ [1.0, ['muon']] , [1.0, ['electron']] ]] ,
  ['muon'    , []] ,
  ['electron', []]
] ;

var WZToEMuTau_decay_array = [
  ['signal'     , [ [ 1.0 , ['tau','electron']], [1.0, ['tau','muon']] ]] ,
  ['background' , [ [ 1.0 , ['ZBoson']], [1.0, ['WBoson']] ]] ,
  ['ZBoson'     , [ [ 1.0 , ['unstableTau', 'unstableTau']], [1.0, ['muon','muon']] , [1.0, ['electron','electron']] ]] ,
  ['WBoson'     , [ [ 1.0 , ['unstableTau']], [1.0, ['muon']] , [1.0, ['electron']] ]] ,
  ['unstableTau', [ [17.84, ['electron']], [17.36, ['muon']] , [67.0, ['tau']] ]] ,
  ['tau'     , []] ,
  ['muon'    , []] ,
  ['electron', []]
] ;

var VV_decay_array = [
  ['signal'     , [ [ 1.0 , ['tau','electron']], [1.0, ['tau','muon']] ]] ,
  ['background' , [ [ 1.0 , ['ZBoson','ZBoson']], [1.0, ['WBoson','WBoson']], [ 1.0 , ['ZBoson']], [1.0, ['WBoson']] ]] ,
  ['ZBoson'     , [ [ 1.0 , ['unstableTau', 'unstableTau']], [1.0, ['muon','muon']] , [1.0, ['electron','electron']] ]] ,
  ['WBoson'     , [ [ 1.0 , ['unstableTau']], [1.0, ['muon']] , [1.0, ['electron']] ]] ,
  ['unstableTau', [ [17.84, ['electron']], [17.36, ['muon']] , [67.0, ['tau']] ]] ,
  ['tau'     , []] ,
  ['muon'    , []] ,
  ['electron', []]
] ;

var VVH_decay_array = [
  ['signal'     , [ [ 1.0 , ['HBoson']] ]] ,
  ['background' , [ [ 1.0 , ['ZBoson','ZBoson']], [1.0, ['WBoson','WBoson']], [ 1.0 , ['ZBoson']], [1.0, ['WBoson']] ,[0.5, ['photon','photon']] , [ 0.5 , ['photon']] ]] ,
  ['HBoson'     , [ [ 2.79e-2, ['ZBoson','ZBoson']], [2.24e-1, ['WBoson','WBoson']], [1.59e-3, ['ZBoson','photon']] , [6.22e-2, ['unstableTau','unstableTau']], [2.16e-4, ['muon'  ,'muon']] , [0.05, ['photon'  ,'photon']] ]] ,
  ['ZBoson'     , [ [ 1.0 , ['unstableTau', 'unstableTau']], [1.0, ['muon','muon']] , [1.0, ['electron','electron']] ]] ,
  ['WBoson'     , [ [ 1.0 , ['unstableTau']], [1.0, ['muon']] , [1.0, ['electron']] ]] ,
  ['unstableTau', [ [17.84, ['electron']], [17.36, ['muon']] , [67.0, ['tau']] ]] ,
  ['tau'     , []] ,
  ['muon'    , []] ,
  ['electron', []] ,
  ['photon'  , []]
] ;
var VVHNoTau_decay_array = [
  ['signal'     , [ [ 1.0 , ['HBoson']] ]] ,
  ['background' , [ [ 1.0 , ['ZBoson','ZBoson']], [1.0, ['WBoson','WBoson']], [ 1.0 , ['ZBoson']], [1.0, ['WBoson']] ]] ,
  ['HBoson'     , [ [ 2.79e-2, ['ZBoson','ZBoson']], [0, ['WBoson','WBoson']], [0, ['ZBoson','photon']] , [0, ['unstableTau','unstableTau']], [0, ['muon'  ,'muon']] ]] ,
  ['ZBoson'     , [ [ 0.0 , ['unstableTau', 'unstableTau']], [1.0, ['muon','muon']] , [1.0, ['electron','electron']] ]] ,
  ['WBoson'     , [ [ 0.0 , ['unstableTau']], [1.0, ['muon']] , [1.0, ['electron']] ]] ,
  ['unstableTau', [ [17.84, ['electron']], [17.36, ['muon']] , [67.0, ['tau']] ]] ,
  ['tau'     , []] ,
  ['muon'    , []] ,
  ['electron', []]
] ;

function topLevel_decay_scheme(name, decay_array, signal_probability, background_probability){
  // In principle this is the object that gets called to decay the event.
  var topLevel = generic_decay_scheme(name, decay_array) ;
  topLevel.add_decay_mode(signal_probability    , ['signal'    ]) ;
  topLevel.add_decay_mode(background_probability, ['background']) ;
  topLevel.normalise_probabilities() ;
  return topLevel ;
}

var all_decay_schema = [] ;
all_decay_schema['WZToEMu'   ] = topLevel_decay_scheme('WZToEMu'   , WZToEMu_decay_array   , 0.0, 1.0) ;
all_decay_schema['WZToEMuTau'] = topLevel_decay_scheme('WZToEMuTau', WZToEMuTau_decay_array, 0.0, 1.0) ;
all_decay_schema['VV'        ] = topLevel_decay_scheme('VV'        , VV_decay_array        , 0.0, 1.0) ;
all_decay_schema['VVH'       ] = topLevel_decay_scheme('VVH'       , VVH_decay_array       , 1.0, 0.0) ;
all_decay_schema['VVHNoTau'  ] = topLevel_decay_scheme('VVHNoTau'  , VVHNoTau_decay_array  , 1.0, 1.0) ;

var decay_scheme = all_decay_schema['VV'] ;
var decay_scheme = all_decay_schema['VVHNoTau'] ;
// Classes etc for handling the beam collisions.  A collision gives rise to jets, tracks,
// and other particles (so far just electrons and muons.)

var collision_parameters = {
  nJet_min      :   2,
  nJet_max      :  10,
  nTrack_min    :   5,
  nTrack_max    :  20,
  jet_pt_min    :  50 ,
  jet_pt_max    : 150 ,
  track_pt_min  :  10 ,
  track_pt_max  :  90 ,
  jet_track_dphi: 0.05*pi ,
  jet_track_pt_threshold: 30,
  prob_has_cosmics: 0.8
}

var collision_object = function(){
  // Particles in the collision.
  this.jets           = [] ;
  this.tracks         = [] ;
  this.main_particles = [] ;
  
  this.is_made = false ;
  this.is_processed = false ;
  
  this.topology = [] ;
  this.isCosmic = false ;
  
  // Give the collision a pseudorandom number generator.
  this.seed = floor(1e9*random()) ;
  this.PNG = new psuedorandom_number_generator() ;
  this.PNG.set_seed(this.seed) ;
  
  this.remake_generator = function(seed){
    this.seed = seed ;
    this.PNG = new psuedorandom_number_generator() ;
    this.PNG.set_seed(this.seed) ;
  }
  
  // If the event is a Higgs event, give it a mass and set the flag.
  this.hMass = 0 ;
  this.isHiggs = false ;
  
  this.purge = function(){
    // If we ever store events, this can be used to minimise memory use.
    this.jets    = [] ;
    this.tracks  = [] ;
    this.main_particles = [] ;
  }
  this.make_particles = function(){
    if(true==this.is_made) return ;
    // Randomly assign particles their kinematic properties.  This should be changed to
    // generate pseudorandom numbers using a seed instead, so that the spy mode sees
    // exactly the same events as they players by passing a single number around.
    // These variables should be stored in settings.js.
    
    if(this.isCosmic){
      //this.topology = (this.PNG.random()<collision_parameters.prob_has_cosmics) ? ['muon','muon'] : [] ;
      this.topology = (this.PNG.random()<collision_parameters.prob_has_cosmics) ? ['muon'] : [] ;
      var charge = (this.PNG.random()<0.5) ? -1 : 1 ;
      
      var phi = 0.5*pi-0.125*pi+this.PNG.random()*pi*0.25 ;
      var x0 = Sr*(-0.2 + 0.4*this.PNG.random()) ;
      var y0 = Sr*(-0.1 + 0.2*this.PNG.random()) ;
      for(var i=0 ; i<this.topology.length ; i++){
        if(i==1) phi += pi ;
        var muon = new particle_object(this.topology[i], charge, 30, phi, x0, y0, true) ;
        this.main_particles.push(muon) ;
        charge *= -1 ;
      }
      return ;
    }
    
    var pars = collision_parameters ;
    
    // Make some tracks and jets.
    this.nTracks = pars.nTrack_min + floor(this.PNG.random()*(pars.nTrack_max-pars.nTrack_min)) ;
    this.nJets   = pars.nJet_min   + floor(this.PNG.random()*(pars.nJet_max-pars.nJet_min)    ) ;
    
    for(var i=0 ; i<this.nTracks ; i++){
      var q = (this.PNG.random()<0.5) ? -1 : 1 ;
      var pt  = pars.track_pt_min + (pars.track_pt_max-pars.track_pt_min)*this.PNG.random() ;
      var phi = 2*pi*this.PNG.random() ;
      var color = track_color ;
      var track = new trackObject(q, mPi, pt, phi, 0, 0, color, 'pion', false) ;
      this.tracks.push(track) ;
    }
    for(var i=0 ; i<this.nJets ; i++){
      var pt = pars.jet_pt_min + (pars.jet_pt_max-pars.jet_pt_min)*this.PNG.random() ;
      var phi = 2*pi*this.PNG.random() ;
      var color = random_color(100, this.PNG) ;
      var jet = new jet_object(pt, phi, 0, 0, color, this.PNG) ;
      this.jets.push(jet) ;
    }
    var charge = (this.PNG.random()<0.5) ? -1 : 1 ;
    var phi = 0 ;
    for(var i=0 ; i<this.topology.length ; i++){
      phi = (i%2==1) ? (0.5+this.PNG.random())*pi+phi : 2*pi*this.PNG.random() ;
      this.main_particles.push(new particle_object(this.topology[i], charge, 30, phi, 0, 0, false)) ;
      charge *= -1 ;
    }
    this.is_made = true ;
  }
  this.add_tracks = function(n){
    var pars = collision_parameters ;
    for(var i=0 ; i<n ; i++){
      var q = (this.PNG.random()<0.5) ? -1 : 1 ;
      var pt  = pars.track_pt_min + (pars.track_pt_max-pars.track_pt_min)*this.PNG.random() ;
      var phi = 2*pi*this.PNG.random() ;
      var color = track_color ;
      var track = new trackObject(q, mPi, pt, phi, 0, 0, color, 'pion', false) ;
      this.tracks.push(track) ;
    }
  }
  
  this.draw_step = function(context, step){
    this.draw_tracks(context, step) ;
    this.draw_jets(context, step) ;
    this.draw_main_particles(context, step) ;
    this.draw_interaction_point(context) ;
  }
  this.draw_tracks = function(context, step){
    for(var i=0 ; i<this.tracks.length ; i++){
      this.tracks[i].draw(context, step) ;
    }
  }
  this.draw_jets = function(context, step){
    for(var i=0 ; i<this.jets.length ; i++){
      this.jets[i].draw(context, step) ;
    }
  }
  this.draw_main_particles = function(context, step){
    for(var i=0 ; i<this.main_particles.length ; i++){
      this.main_particles[i].draw(context, step) ;
    }
  }
  this.draw_interaction_point = function(context){
    context.save() ;
    context.beginPath() ;
    context.fillStyle = 'rgb(255,255,255)' ;
    context.arc(0.5*cw, 0.5*ch, 0.01*cw, 0, 2*pi, true) ;
    context.fill() ;
    context.restore() ;
  }
  
  this.end_collision = function(){
    if(game.mode=='suddenDeath'){
      var trigger = game.current_shift.trigger ;
      if(trigger.fired==true  && trigger.match_collision==false){
        game.state = 'game_over' ;
        game.game_over_message = 'You should not have clicked that collision.' ;
      }
      else if(trigger.fired==false && trigger.match_collision==true){
        game.state = 'game_over' ;
        game.game_over_message = 'Oops!  You missed a collision.' ;
      }
    }
  }
}

function make_collision(){
  // Generate a random event, populating it with main_particles.
  var r = random() ;
  if(false && r<probability_Higgs && game.mode=='collaborative'){
    return make_Higgs_collision(126) ;
  }
  else{
    var coll = new collision_object() ;
    if(game.mode=='cosmics') coll.isCosmic = true ;
    coll.topology = decay_scheme.recursively_decay(coll.PNG) ;
    return coll ;
  }
}
function make_matching_collision(topology){
  // Generate an event matching a topology, populating it with main_particles.
  var success = false ;
  var coll = null ;
  var counter = 0 ;
  while(false==success && counter<100){
    counter++ ;
    coll = new collision_object() ;
    coll.topology = decay_scheme.recursively_decay(coll.PNG) ;
    success = match_topologies(coll.topology, [topology]) ;
  }
  return coll ;
}
function make_Higgs_collision(mass){
  // This just sets the Higgs flag in the event.
  var coll = new collision_object() ;
  coll.isHiggs = true ;
  coll.topology = decay_scheme['signal'].recursively_decay(coll.PNG) ;
  coll.hMass = mass ;
  return coll ;
}

function collision_thread(){
  // Okay, now things get a bit tricky again.
  // First allow the user to click.
  
  if(game.state=='game_over'){
    game.draw_game_over_screen() ;
    return ;
  }
  
  game.can_click = true ;
  
  if(game.current_shift.collision_counter==collisions_per_shift){
    game.current_shift.trigger.update_table() ;
    window.setTimeout(game.end_shift, delay) ;
    
    // Reset the collision counter.
    game.current_shift.collision_counter = 0 ;
  }
  else if(game.paused){
    // Why do we reset the delay here?  I forget...
    collision_delay = collision_delay_max ;
    window.setTimeout(collision_thread, delay) ;
    return ;
  }
  else{
    // Update the states.
    game.current_shift.trigger.update_table() ;
    
    // Reset all the cells and segments so we can analyse the event.
    detector.start_collision() ;
    
    // Update all the detector segments so they light up properly.
    game.current_shift.current_collision = make_collision() ;
    game.current_shift.current_collision.make_particles() ;
    detector.process_collision(game.current_shift.current_collision) ;
    
    // Speed up the event as the run continues.
    var dDelay = 0.5*(collision_delay - collision_delay_min) ;
    collision_delay = collision_delay - dDelay ;
    
    // Reset the trigger flags.
    game.current_shift.trigger.start_collision() ;
    
    // Increment the counter.
    game.current_shift.collision_counter++ ;
    
    // Saving events- add an option to turn this off to reduce memory usage!
    game.current_shift.collisions.push(game.current_shift.current_collision) ;
    
    // Single player mode only.
    if(game.current_shift.collision_counter<collisions_per_shift){
      Get('span_eventNumber').innerHTML = game.current_shift.collision_counter ;
    }
    
    game.update_score() ;
    
    // Enable the user to click.
    game.enable_click() ;
    
    game.kill_drawStep = false ;
    // Draw things.  This is expensive!
    if(game.animate_eventDisplay){
      game.draw_step = 0 ;
      draw_eventDisplay_step_proxy() ;
    }
    else{
      draw_eventDisplay_step(game.current_shift.current_collision, context, -1) ;
      
      // Make the next collision.
      window.setTimeout(collision_breather, collision_delay) ;
    }
  }
}

// This function just gives the player a chance to see the result of their choice.
function collision_breather(){
  if(game.paused){
    window.setTimeout(collision_breather, delay) ;
  }
  else{
    game.can_click = false ;
    game.current_shift.current_collision.end_collision() ;
    clear_canvas(context) ;
    draw_eventDisplay_base(context) ;
    window.setTimeout(collision_thread, collision_breath) ;
  }
}

// This is a class for handling a histogram of masses (or any variable of interest) and
// then animating it to show the results.  Its psychologically important to see it animate
// before the player's/audiences eyes!

function four_lepton_mass_histogram(canvas){
  // Keep the object available in this scope.
  var self = this ;
  self.nBins = histogram_nBins ;
  self.bins = [] ;
  self.binsInOrder_array = [] ;
  self.nHiggs = 0 ;
  for(var i=0 ; i<self.nBins ; i++){
    self.bins.push(0) ;
    self.binsInOrder_array.push(0) ;
  }
  self.drawStyle = histogram_drawStyle ;
  self.mass_min = mass_min ;
  self.mass_max = mass_max ;
  
  self.canvas = canvas ;
  self.context = self.canvas.getContext('2d') ;
  
  // Used for the animation.
  self.binsInOrder = [] ;
  self.binsInOrder_index = 0 ;
  
  // The colour of the histogram should match the experiment.
  self.color = teams['neutral'].color ;
  
  self.margin = 0.15 ;
  
  self.ghost_mass = 115 ;
  
  self.fit_animation_step = 0 ;
  self.nSigma = 0 ;
  self.average_bin_content = 0 ;
  self.max_index =-1 ;
  
  self.add_mass = function(mass){
    // This adds a mass to the histograms.  The lookup function is quite cheap.
    if(mass<self.mass_min) return ;
    if(mass>self.mass_max) return ;
    var index = Math.floor((self.nBins+0)*(mass-self.mass_min)/(self.mass_max-self.mass_min)) ;
    self.bins[index]++ ;
    self.binsInOrder.push(index) ;
  }
  self.add_Higgs = function(){
    self.nHiggs++ ;
  }
  self.max_height = function(){
    // Find the heigh of the highest bin so we can dynamically change the y-axis etc.
    var result = 0 ;
    for(var i=0 ; i<self.bins.length ; i++){
      if(self.bins[i]>result) result = 1*self.bins[i] ;
    }
    return result ;
  }
  self.nEvents = function(){
    // Sum up all the events stored.  It might be cheaper to increment a counter as we
    // fill the histogram.
    var total = 0 ;
    for(var i=0 ; i<self.bins.length ; i++){
      total += self.bins[i] ;
    }
    return total ;
  }
  self.draw = function(theBins){
    // Save a few characters.
    var c = self.context ;
    
    c.save() ;
  
    // Okay, now things get messy.
    
    // Margin around the histogram, in relative units (ie 15%.)
    var m = self.margin ;
    var w = canvas.width  ;
    var h = canvas.height ;
    
    // Plot width and height.
    var pw = w*(1-2*m) ;
    var ph = h*(1-2*m) ;
    
    // Maximum height, which must take the error bars into account.
    var mh = self.max_height()+2*sqrt(self.max_height()) ;
    
    // Clear the plotting area.
    c.fillStyle = 'rgb(255,255,255)' ;
    c.fillRect(0,0,w,h) ;
    
    // Set colours etc.
    c.fillStyle = self.color ;
    c.strokeStyle = self.color ;
    c.textAlign = 'center' ;
    c.font = '20px arial' ;
    
    // Draw a nice border around the plot area.
    c.strokeRect(w*m,h*m,pw,ph) ;
    
    // Draw the axis titles.  A bit messy, but works.
    var x_xAxisTitle = w*0.6 ;
    var y_xAxisTitle = h - 0.1*m*h ;
    c.fillText('mass (four leptons) [GeV]', x_xAxisTitle, y_xAxisTitle) ;
    
    var x_yAxisTitle = w*m*0.8 ;
    var y_yAxisTitle = h*0.1 ;
    c.fillText('collisions', x_yAxisTitle, y_yAxisTitle) ;
    
    // Now draw the bins one by one, including tick marks.  Tick marks are a pain.
    var bin_width = pw/(theBins.length) ;
    for(var i=0 ; i<=theBins.length ; i++){
      // First get the value of the mass for the labels.
      var mass = Math.floor(self.mass_min + i*(self.mass_max-self.mass_min)/(theBins.length)) ;
      
      // Dimensions hardcoded?  What was I thinking?
      var x = w*m + (i+0.0)*bin_width ;
      var y = h - 0.5*m*h ;
      var tickLength = 0.1*m*h ;
      if(i%histogram_xAxisLAbelFrequency==0){
        // Now add a tick with a label.
        c.fillText(mass, x, y) ;
        tickLength *=2 ;
      }
      
      // Draw the tick mark.
      c.beginPath() ;
      c.moveTo(x, h-1*m*h-tickLength) ;
      c.lineTo(x, h-1*m*h+tickLength) ;
      c.stroke() ;
      c.closePath() ;
      
      // Check for an empty bin.  (Things can get tricky if you try to draw error bars on
      // a zero bin.)
      if(theBins[i]==0) continue ;
      
      // Draw the bin, depending on the style.
      if(self.drawStyle=='rect'){
        // Barchart.
        var x1 = w*m + i*bin_width ;
        var y1 = h - h*m ;
        c.fillRect(x1, y1, bin_width, -ph*theBins[i]/(1+mh)) ;
      }
      else{
        // Data points with error bars.
        var x2 = w*m + (i+0.5)*bin_width ;
        var y2 = h -h*m - ph*theBins[i]/(1+mh) ;
        c.beginPath() ;
        c.arc(x2,y2,5,0,2*pi,true) ;
        c.closePath() ;
        c.fill() ;
        var err = 0.5*ph*sqrt(theBins[i])/(1+mh) ;
        c.beginPath();
        c.moveTo(x2,y2-err) ;
        c.lineTo(x2,y2+err) ;
        c.stroke() ;
        c.closePath() ;
      }
    }
    
    // Now the y-axis.  The tick intervals should be handled more gracefully than self.
    self.context.beginPath() ;
    var di = 1 ;
    if(mh>=10  ) di =   2 ;
    if(mh>=20  ) di =  10 ;
    if(mh>=100 ) di =  10 ;
    if(mh>=200 ) di =  25 ;
    if(mh>=1000) di = 100 ;
    if(mh>=2000) di = 250 ;
    for(var i=0 ; i<=mh ; i+=di){
      var x = m*w ;
      var y = h-h*m-ph*i/(1+mh) ;
      c.moveTo(x-5,y) ;
      c.lineTo(x+5,y) ;
      c.fillText(i,0.5*m*w,y) ;
    }
    c.stroke() ;
    
    c.restore() ;
  }
  self.animate_accumulate = function(){
    // Yuck, this needs to be tidied up.
    // Basically add events one by one.
    
    // Save a few characters.
    var c = self.context ;
    if(self.binsInOrder_index>=self.binsInOrder.length){
      // If we're on the final event, update the sigmas.  This should be done elsewhere.
      // But I was under a lot of time pressure.
      var w = self.canvas.width  ;
      var h = self.canvas.height ;
      c.font = 0.1*w + 'px arial' ;
      c.fillStyle = self.color ;
      
      if(self.binsInOrder_index==self.binsInOrder.length && self.nSigma<1){
        self.nSigma = 3.6 + random()*0.6 ;
      }
      
      if(results_mode=='sigma'){
        //c.fillText(self.nSigma.toPrecision(2)+' \u03C3!', 0.7*w, 0.12*h) ;
      }
      else{
        var percent = 100*Math.exp(-self.nSigma*self.nSigma) ;
        //c.fillText(percent.toPrecision(2)+'%!', 0.4*w, 0.12*h) ;
      }
      if(experiments['ATLAS'].nSigma<1){
        Get('button_analyse_CMS_show').style.display = '' ;
        experiments['ATLAS'].nSigma = self.nSigma ;
      }
      else if(experiments['CMS'  ].nSigma<1){
        Get('button_continue_postShow').style.display = '' ;
        
        //Get('button_combine').style.display = '' ;
        experiments['CMS'  ].nSigma = self.nSigma ;
      }
      window.setTimeout(spy.animate_fit, delay_animate_histogram) ;
      
      return ;
    }
    // Update the binsInOrder and redraw the histogram.
    self.binsInOrder_array[self.binsInOrder[self.binsInOrder_index]]++ ;
    self.draw(self.binsInOrder_array) ;
    self.binsInOrder_index++ ;
    
    // Send the signal for the next draw call.
    window.setTimeout(spy.animate_histogram, delay_animate_histogram) ;
    //self.draw_pistons(self.binsInOrder_index) ;
    self.draw_gears(self.binsInOrder_index) ;
  }
  
  self.animate_fit_ghost = function(){
    // Pretend to perform a fit.
    
    // Save a few characters.
    var s = self.fit_animation_step ;
    var c = self.context ;
    var s0 =   0 ;
    var s1 = 100 ;
    
    if(s>s1) return ;
    
    var id = 'canvas_histogram_' + self.name + '_hidden' ;
    var canvas_tmp  = Get(id) ;
    var context_tmp = canvas_tmp.getContext('2d') ;
    
    // A handful of useful variables.
    var w = self.canvas.width  ;
    var h = self.canvas.height ;
    var m = self.margin ;
    var pw = w*(1-2*m) ;
    var ph = h*(1-2*m) ;
    var mh = self.max_height()+2*sqrt(self.max_height()) ;
    
    var envelope = exp(-(s%100)*0.05)*sin(2*pi*s/50.0) ;
    
    var bkg = 0 ;
    c.drawImage(canvas_tmp, 0 ,0) ;
    
    if(s==s0){
      context_tmp.drawImage(self.canvas, 0 ,0) ;
      
      // Find the average bin height for the background.
      var total = 0 ;
      var n = 0 ;
      var max_height = 0 ;
      var ghost_height = 0 ;
      for(var i=0 ; i<self.bins.length ; ++i){
        if(self.bins[i]>max_height){
          max_height = self.bins[i] ;
          self.max_index = i ;
        }
        
        // Exclude the peak region (cheating, I know).
        if(self.name=='ATLAS' && i>=10) continue ;
        if(self.name=='CMS'   && i<=15) continue ;
        if(self.bins[i]>ghost_height){
          ghost_height = self.bins[i] ;
          self.ghost_mass = i ;
        }
        total += self.bins[i] ;
        n++ ;
      }
      self.average_bin_content = total/n ;
    }
    
    if(s>=s0 && s<=s1){
      var x1 = w*m ;
      var x2 = w*(1-m) ;
      bkg = 0*self.average_bin_content ;
      var y0 = h - h*m - ph*bkg/(1+mh) ;
      
      var m0 = self.mass_min + (self.mass_max-self.mass_min)*(self.ghost_mass+0.5)/self.bins.length ;
      var x0 = m*w + pw*(m0-self.mass_min)/(self.mass_max-self.mass_min) + pw*0.25*envelope ;
      c.beginPath() ;
      for(var i=0 ; i<1000 ; ++i){
        var x = m*w + pw*i/1000.0 ;
        var gauss = exp(-(x-x0)*(x-x0)/250.0)*(0.75*self.max_height()) ;
        var y = h - h*m - ph*(0.5*gauss+bkg)/(1.0+mh) ;
        if(i%10==0){
          c.moveTo(x,y) ;
        }
        else if(i%10<5){
          c.lineTo(x,y) ;
        }
      }
      c.closePath() ;
      c.stroke() ;
    }
    if(s==s1){
      var m0 = self.mass_min + (self.mass_max-self.mass_min)*(self.ghost_mass+0.5)/self.bins.length ;
      var x0 = m*w + pw*(1+envelope)*(m0-self.mass_min)/(self.mass_max-self.mass_min) ;
      var gauss = (0.75*self.max_height()-bkg) ;
      var y = h - 1.5*h*m - ph*(0.5*gauss+bkg)/(1.0+mh) ;
      
      self.draw_marks(c, x0, y) ;
      
    }
    self.draw_gears(s) ;
    
    self.fit_animation_step++ ;
    
    // Send the signal for the next draw call.
    if(s>=s0 && s<s1){
      window.setTimeout(self.animate_fit_ghost, delay_animate_histogram) ;
    }
    else{
      Get('button_analyse_both_ghost').style.display = 'none' ;
      Get('button_continue_postGhost').style.display = '' ;
    }
  }
  
  self.animate_fit_measureBackground = function(){
    // Pretend to perform a fit.
    
    // Save a few characters.
    var s = self.fit_animation_step ;
    var c = self.context ;
    var s0 = 100 ;
    var s1 = 200 ;
    
    if(s>s1) return ;
    
    var id = 'canvas_histogram_' + self.name + '_hidden' ;
    var canvas_tmp  = Get(id) ;
    var context_tmp = canvas_tmp.getContext('2d') ;
    
    if(s==s0){
      context_tmp.drawImage(self.canvas, 0 ,0) ;
    }
    else{
      // A handful of useful variables.
      var w = self.canvas.width  ;
      var h = self.canvas.height ;
      var m = self.margin ;
      var pw = w*(1-2*m) ;
      var ph = h*(1-2*m) ;
      var mh = self.max_height()+2*sqrt(self.max_height()) ;
      
      var envelope = exp(-(s%100)*0.05)*sin(2*pi*s/50.0) ;
      
      c.drawImage(canvas_tmp, 0 ,0) ;
      if(s<=s1){
        c.lineWidth = 1 ;
        var x1 = w*m ;
        var x2 = w*(1-m) ;
        
        // Find the final resting point of the line.
        var y0 = h - h*m - ph*self.average_bin_content/(1+mh) ;
        
        // But "wobble" a bit on the way there to make it look like we're thinking.
        var y  = y0 + h*m*envelope ;
        
        // Draw the line.
        c.beginPath() ;
        c.moveTo(x1, y) ;
        c.lineTo(x2, y) ;
        c.closePath() ;
        c.stroke() ;
      }
    }
    self.draw_gears(s) ;
    
    self.fit_animation_step++ ;
    
    // Send the signal for the next draw call.
    if(s<s1){
      window.setTimeout(self.animate_fit_measureBackground, delay_animate_histogram) ;
    }
    else{
      Get('button_analyse_both_bkg').style.display = 'none' ;
      Get('button_continue_postBkg').style.display = '' ;
    }
  }
  
  self.animate_fit_peak = function(){
    // Pretend to perform a fit.
    
    // Save a few characters.
    var s = self.fit_animation_step ;
    var c = self.context ;
    
    if(s>300) return ;
    
    var id = 'canvas_histogram_' + self.name + '_hidden' ;
    var canvas_tmp  = Get(id) ;
    var context_tmp = canvas_tmp.getContext('2d') ;
    
    // A handful of useful variables.
    var w = self.canvas.width  ;
    var h = self.canvas.height ;
    var m = self.margin ;
    var pw = w*(1-2*m) ;
    var ph = h*(1-2*m) ;
    var mh = self.max_height()+2*sqrt(self.max_height()) ;
    
    var envelope = exp(-(s%100)*0.05)*sin(2*pi*s/50.0) ;
    
    c.drawImage(canvas_tmp, 0 ,0) ;
    if(s>=200 && s<=300){
      var x1 = w*m ;
      var x2 = w*(1-m) ;
      var bkg = self.average_bin_content ;
      var y0 = h - h*m - ph*bkg/(1+mh) ;
      
      // Just draw the freaking line this time.
      c.beginPath() ;
      c.moveTo(x1, y0) ;
      c.lineTo(x2, y0) ;
      c.closePath() ;
      c.stroke() ;
      
      var m0 = self.mass_min + (self.mass_max-self.mass_min)*(self.max_index+0.5)/self.bins.length ;
      var x0 = m*w + pw*(1+envelope)*(m0-self.mass_min)/(self.mass_max-self.mass_min) ;
      c.beginPath() ;
      for(var i=0 ; i<1000 ; ++i){
        var x = m*w + pw*i/1000.0 ;
        var gauss = exp(-(x-x0)*(x-x0)/250.0)*(0.75*self.max_height()-bkg) ;
        var y = h - h*m - ph*(gauss+bkg)/(1.0+mh) ;
        if(i==0){
          c.moveTo(x,y) ;
        }
        else{
          c.lineTo(x,y) ;
        }
      }
      c.closePath() ;
      c.stroke() ;
    }
    self.draw_gears(s) ;
    
    self.fit_animation_step++ ;
    
    // Send the signal for the next draw call.
    if(s>=200 && s<300){
      window.setTimeout(self.animate_fit_peak, delay_animate_histogram) ;
    }
    else{
      Get('button_analyse_both_peak').style.display = 'none' ;
      Get('button_continue_postPeak').style.display = '' ;
    }
  }
  
  self.animate_fit_signal = function(){
    // Pretend to perform a fit.
    
    // Save a few characters.
    var s = self.fit_animation_step ;
    var c = self.context ;
    
    var id = 'canvas_histogram_' + self.name + '_hidden' ;
    var canvas_tmp  = Get(id) ;
    var context_tmp = canvas_tmp.getContext('2d') ;
    
    // A handful of useful variables.
    var w = self.canvas.width  ;
    var h = self.canvas.height ;
    var m = self.margin ;
    var pw = w*(1-2*m) ;
    var ph = h*(1-2*m) ;
    var mh = self.max_height()+2*sqrt(self.max_height()) ;
    
    var envelope = exp(-(s%100)*0.05)*sin(2*pi*s/50.0) ;
    
    c.drawImage(canvas_tmp, 0 ,0) ;
    if(s>=300 && s<=400){
      var x1 = w*m ;
      var x2 = w*(1-m) ;
      var bkg = self.average_bin_content ;
      var y0 = h - h*m - ph*bkg/(1+mh) ;
      
      // Just draw the freaking line this time.
      c.beginPath() ;
      c.moveTo(x1, y0) ;
      c.lineTo(x2, y0) ;
      c.closePath() ;
      c.stroke() ;
      
      var m0 = self.mass_min + (self.mass_max-self.mass_min)*(self.max_index+0.5)/self.bins.length ;
      var x0 = m*w + pw*(m0-self.mass_min)/(self.mass_max-self.mass_min) ;
      c.beginPath() ;
      for(var i=0 ; i<1000 ; ++i){
        var x = m*w + pw*i/1000.0 ;
        var gauss = exp(-(x-x0)*(x-x0)/250.0)*(self.max_height()-bkg)*(1+envelope) ;
        var y = h - h*m - ph*(gauss+bkg)/(1.0+mh) ;
        if(i==0){
          c.moveTo(x,y) ;
        }
        else{
          c.lineTo(x,y) ;
        }
      }
      c.closePath() ;
      c.stroke() ;
    }
    self.draw_gears(s) ;
    
    self.fit_animation_step++ ;
    
    // Send the signal for the next draw call.
    if(s>=300 && s<400){
      window.setTimeout(self.animate_fit_signal, delay_animate_histogram) ;
    }
    else{
      if(results_mode=='sigma'){
        c.fillText(self.nSigma.toPrecision(2)+' \u03C3!', 0.7*w, 0.12*h) ;
      }
      else{
        var percent = 100*Math.exp(-self.nSigma*self.nSigma) ;
        c.fillText(percent.toPrecision(2)+'%!', 0.4*w, 0.12*h) ;
      }
    
      if(spy.current_team_name=='ATLAS'){
        Get('button_analyse_CMS_signal').style.display = '' ;
      }
      else{
        Get('button_continue_postSignal').style.display = '' ;
      }
    }
  }
  
  self.draw_gears = function(s){
    var c = self.context ;
    c.save() ;
    c.fillStyle   = self.color ;
    c.strokeStyle = self.color ;
    
    var gears = [] ;
    var w = self.canvas.width  ;
    var h = self.canvas.height ;
    gears.push(new gear_object(0.24*w,0.30*h,0.040*w,0.010*w,9,-1)) ;
    gears.push(new gear_object(0.31*w,0.26*h,0.024*w,0.005*w,8, 1)) ;
    
    for(var i=0 ; i<gears.length ; i++){
      var g = gears[i] ;
      
      c.fillStyle   = 'rgb(255,255,255)' ;
      c.beginPath() ;
      c.arc(g.cx,g.cy,1.5*g.r,0,2*pi,true) ;
      c.fill() ;
    }
    
    for(var i=0 ; i<gears.length ; i++){
      var g = gears[i] ;
      
      c.fillStyle   = self.color ;
      c.strokeStyle = self.color ;
      
      c.lineWidth = g.lw ;
      c.beginPath() ;
      c.arc(g.cx,g.cy,g.r,0,2*pi,true) ;
      c.stroke() ;
      
      c.lineWidth = 3 ;
      c.beginPath() ;
      c.arc(g.cx,g.cy,0.75*g.r,0,2*pi,true) ;
      c.stroke() ;
      
      c.save() ;
      c.translate(g.cx,g.cy) ;
      for(var j=0 ; j<g.n ; j++){
        c.save() ;
        c.rotate(2*pi*s*g.dir/(5*g.r) + 2*pi*j/g.n) ;
        c.translate(0,g.r+0.5*g.lw) ;
        c.beginPath() ;
        var gsx = 0.5*g.r*2*pi/(2*g.n) ;
        var gsy = 0.6*g.lw ;
        c.moveTo(  -gsx, gsy) ;
        c.lineTo(   gsx, gsy) ;
        c.lineTo( 2*gsx,-gsy) ;
        c.lineTo(-2*gsx,-gsy) ;
        c.lineTo(  -gsx, gsy) ;
        c.fill() ;
        c.restore() ;
      }
      c.restore() ;
    }
    c.restore() ;
  }
  
  self.draw_pistons = function(s){
    var c = self.context ;
    c.save() ;
    c.fillStyle   = self.color ;
    c.strokeStyle = self.color ;
    
    var pistons = [] ;
    var w = self.canvas.width  ;
    var h = self.canvas.height ;
    pistons.push(new piston_object(0.24*w,0.30*h,0.25*h,0.2*h,0.015*h,0)) ;
    pistons.push(new piston_object(0.30*w,0.30*h,0.25*h,0.2*h,0.015*h,0)) ;
    
    for(var i=0 ; i<pistons.length ; i++){
      var p = pistons[i] ;
      
      c.fillStyle   = 'rgb(255,255,255)' ;
      c.fillRect(p.x-p.r,p.y3,2*p.r,p.y1-p.y3) ;
    }
    
    for(var i=0 ; i<pistons.length ; i++){
      var p = pistons[i] ;
      
      c.fillStyle   = self.color ;
      c.strokeStyle = self.color ;
      
      c.beginPath() ;
      c.arc(p.x,p.y2,p.r,0,-pi,true) ;
      c.lineTo(p.x+p.r,p.y1) ;
      c.lineTo(p.x-p.r,p.y1) ;
      c.lineTo(p.x-p.r,p.y2) ;
      c.lineTo(p.x+p.r,p.y2) ;
      c.closePath() ;
      c.fill() ;
    }
    c.restore() ;
  }
  
  self.draw_marks = function(context, x0, y){
    var c = context ;
    c.save() ;
    c.fillStyle = 'rgb(100,100,100)' ;
    c.textAlign = 'center' ;
    
    var marks = [
      [ 0.10*ch,  0.00*cw,  0.000*ch] ,
      [ 0.05*ch,  0.03*cw,  0.010*ch] ,
      [ 0.07*ch, -0.04*cw,  0.020*ch] ,
      [ 0.04*ch, -0.04*cw, -0.050*ch] ,
      [ 0.03*ch, -0.02*cw,  0.040*ch] ,
      [ 0.03*ch,  0.01*cw,  0.035*ch]
    ] ;
    var nMarks = marks.length ;
    for(var i=0 ; i<nMarks ; i++){
      c.font = marks[i][0]+'px arial' ;
      c.fillText('?', x0+marks[i][1], y+marks[i][2]) ;
    }
    c.restore() ;
  }
}

// Gear object used to "think".
function gear_object(cx,cy,r,lw,n,dir){
  this.cx  =  cx ;
  this.cy  =  cy ;
  this.r   =   r ;
  this.lw  =  lw ;
  this.n   =   n ;
  this.dir = dir ;
}

// Piston object used to "think".
function piston_object(x,y1,y2,y3,r,phase){
  this.x     =     x ;
  this.y1    =    y1 ;
  this.y2    =    y2 ;
  this.y3    =    y3 ;
  this.r     =     r ;
  this.phase = phase ;
}

// This is an object for managing the trigger.  It takes numbers of muons and electrons.
// It also sends the results of the event to the server.

function trigger_object(topology, description, name){
  // topology is n array, eg ['electron','muon'].
  this.topology = topology ;
  
  this.name = name ;
  
  // Flags to keep track of the status of the trigger.
  this.fired = false ;
  this.match_collision = false ;
  this.touched = false ;
  
  // Description of the trigger to remind the user when to fire.
  this.description = description ;
  this.update_text = function(){
    Get('span_trigger_description').innerHTML = this.description ;
  }
  
  this.collisions = [] ;
    
  this.start_collision = function(){
    // Set this flag to false- the user hasn't clicked yet
    this.fired = false ;
    
    // Check to see if the event topology matches the trigger topology.
    this.match_collision = match_topologies(game.current_shift.current_collision.topology, [this.topology]) ;
    
    // Touch the trigger so that we know the game has "seen" the trigger.
    this.touched = true ;
  }
  this.fire = function(){
    // Don't allow the user to fire more than once.
    if(this.fired) return ;
    game.kill_drawStep = true ;
    
    // Now fire the trigger and draw the result on the screen
    this.fired = true ;
    this.draw_success_or_failure(context) ;
    this.sound_success() ;
    
    // Send the result via websocket.
    if(game.current_shift.trigger.match_collision){
      var seed     = game.current_shift.current_collision.seed     ;
      var topology = game.current_shift.current_collision.topology ;
      if(game.use_ws){
        var request = 'trigger:'+game.team_name+':'+seed ;
        game.ws.send(request) ;
      }
      else if(game.use_ajax){
        var topology_string = topology.join() ;
        var request = 'event_store.php?task=add_single_collision&team=' + game.team_name + '&topology=' + topology_string + '&trigger=' + this.name + '&seed=' + seed + '&playerName=' + game.player.name ;
        game.ajax.send(request) ;
      }
    }
  }
  this.send_results_to_server = function(){
    return ;
    var request = '?task=add_collisions&trigger=' + this.name + '&team=' + game.team_name + '&seeds=' ;
    for(var i=0 ; i<this.collisions.length ; i++){
      if(i>0) request += ',' ;
      request += this.collisions[i].seed ;
    }
    request = 'event_store.php'+request+'&sid=' + Math.random() ;
    game.ajax.send(request) ;
  }
  this.update_table = function(){
    // Check to see if the game knows about this trigger yet.
    if(this.touched==false) return ;
    
    if(!game.current_shift.current_collision) return ;
    
    // Follow the logic to update the statistics correctly.  It's fairly straightforward.
    if(this.fired){
      if(this.match_collision){
        // Hurray!  The user fired the trigger properly and has a true positive.
        game.current_shift.statistics.values['true_positives']++ ;
        this.collisions.push(game.current_shift.current_collision) ;
      }
      else{
        // Oops!  The user fired the trigger for an irrelevant event.
        game.current_shift.statistics.values['false_positives']++ ;
      }
      // Whatever the result, this event gets saved and so contributes to the trigger
      // budget.
      game.current_shift.statistics.values['total_savedEvents']++ ;
      
      // Check to see if the event is "Higgslike" or not.
      var Higgsy = match_topologies(game.current_shift.current_collision.topology, decay_scheme['signal'].final_state_topologies) ;
      if(Higgsy){
        game.current_shift.statistics.values['higgsy_events']++ ;
        histogram.add_mass(game.current_shift.current_collision.hMass) ;
      }
    }
    else{
      if(this.match_collision){
        // Oops!  The user missed an event.
        game.current_shift.statistics.values['false_negatives']++ ;
      }
      else{
        // Phew, we didn't want this event anyway.
        game.current_shift.statistics.values['true_negatives']++ ;
      }
    }
    // Update the number of events we've seen, whether or not we saved them.
    game.current_shift.statistics.values['total_deliveredEvents']++ ;
    
    game.write_statistics() ;
  }
  this.draw_topology_on_shift_start_screen = function(w, h){
    var Y  = 0.5*h ;
    var dX = 0.2*w  ;
    var DX = (this.topology.length-1)*dX ;
    
    for(var i=0 ; i<this.topology.length ; i++){
      var X = (this.topology.length==1) ? 0.5*w : 0.5*w - 0.5*DX + DX*i/(this.topology.length-1) ;
      var settings = particle_settings[this.topology[i]] ;
      draw_particle_head(context, X, Y, 2.0*settings.headSize, settings.color, settings.symbol, settings.headShape) ;
    }
  }
  this.draw_success_or_failure = function(context){
    // Standard stuff for a new path.
    context.save() ;
    context.beginPath() ;
    if(game.current_shift.trigger.match_collision){
      this.draw_success(context) ;
    }
    else{
      this.draw_failure(context) ;
    }
  }
  
  this.draw_success = function(context){
    // Standard stuff for a new path.
    context.save() ;
    
    context.lineCap = 'round' ;
    context.beginPath() ;
    
    // Define some variables to draw the circles etc.  We should probably put these
    // in settings.js.
    context.lineWidth = 0.1*SR ;
    // Set the stroke colour.  We need better variable names for this!
    context.strokeStyle = collision_matched_color ;
    context.arc(0.5*cw, 0.5*ch, 0.8*SR, 0, 2*pi, true) ;
    
    // Tick mark.
    context.moveTo(0.3*cw,0.6*ch) ;
    context.lineTo(0.5*cw,0.7*ch) ;
    context.lineTo(0.7*cw,0.3*ch) ;
    
    // Finish things off.
    context.stroke() ;
    context.restore() ;
  }
  this.draw_failure = function(context){
    // Standard stuff for a new path.
    context.save() ;
    
    context.lineCap = 'round' ;
    context.beginPath() ;
    
    // Define some variables to draw the circles etc.  We should probably put these
    // in settings.js.
    context.lineWidth = 0.1*SR ;
    // Set the stroke colour.  We need better variable names for this!
    context.strokeStyle = collision_notMatched_color ;
    context.arc(0.5*cw, 0.5*ch, 0.8*SR, 0, 2*pi, true) ;
    
    // Cross mark.
    context.moveTo(0.3*cw,0.7*ch) ;
    context.lineTo(0.7*cw,0.3*ch) ;
    context.moveTo(0.3*cw,0.3*ch) ;
    context.lineTo(0.7*cw,0.7*ch) ;
    
    // Finish things off.
    context.stroke() ;
    context.restore() ;
  }

  this.sound_success = function(){
    if(game.muted==true) return ;
    var id = (this.match_collision) ? 'audio_win' : 'audio_fail' ;
    var sound = Get(id) ;
    sound.volume = 0.2 ;
    sound.currentTime = 0 ;
    sound.play() ;
  }
}

var ee_trigger = new trigger_object(['electron','electron'] , 'at least two electrons.'            , 'ee') ;
var  e_trigger = new trigger_object(['electron'           ] , 'at least one electron.'             , 'e' ) ;
var mm_trigger = new trigger_object(['muon','muon'        ] , 'at least two muons.'                , 'mm') ;
var  m_trigger = new trigger_object(['muon'               ] , 'at least one muon.'                 , 'm' ) ;
var  t_trigger = new trigger_object(['tau'                ] , 'at least one tau.'                  , 't' ) ;
var em_trigger = new trigger_object(['electron','muon'    ] , 'at least one electron and one muon.', 'em') ;
var et_trigger = new trigger_object(['electron','tau'     ] , 'at least one electron and one tau.' , 'et') ;
var mt_trigger = new trigger_object(['tau','muon'         ] , 'at least one tau and one muon.'     , 'tm') ;
var tt_trigger = new trigger_object(['tau','tau'          ] , 'at least two taus.'                 , 'tt') ;
var  p_trigger = new trigger_object(['photon'             ] , 'at least one photon.'               , 'p' ) ;
var pp_trigger = new trigger_object(['photon','photon'    ] , 'at least two photons.'              , 'pp') ;

var all_triggers = [] ;
all_triggers.push(ee_trigger) ;
all_triggers.push( e_trigger) ;
all_triggers.push(mm_trigger) ;
all_triggers.push( m_trigger) ;
all_triggers.push( t_trigger) ;
all_triggers.push(em_trigger) ;
all_triggers.push(et_trigger) ;
all_triggers.push(mt_trigger) ;
all_triggers.push(tt_trigger) ;
all_triggers.push( p_trigger) ;
all_triggers.push(pp_trigger) ;

var cosmics_triggers = [] ;
cosmics_triggers.push( m_trigger) ;

var single_lepton_triggers = [] ;
single_lepton_triggers.push(e_trigger) ;
single_lepton_triggers.push(m_trigger) ;

var EMu_triggers = [] ;
EMu_triggers.push( e_trigger) ;
EMu_triggers.push( m_trigger) ;
EMu_triggers.push(ee_trigger) ;
EMu_triggers.push(mm_trigger) ;
EMu_triggers.push(em_trigger) ;

var EMuTau_triggers = [] ;
EMuTau_triggers.push( e_trigger) ;
EMuTau_triggers.push( m_trigger) ;
EMuTau_triggers.push( t_trigger) ;
EMuTau_triggers.push(ee_trigger) ;
EMuTau_triggers.push(mm_trigger) ;
EMuTau_triggers.push(em_trigger) ;
EMuTau_triggers.push(et_trigger) ;
EMuTau_triggers.push(mt_trigger) ;
EMuTau_triggers.push(tt_trigger) ;

var triggers_by_mode = [] ;

triggers_by_mode['cosmics'   ] = cosmics_triggers ;
triggers_by_mode['WZToEMu'   ] = single_lepton_triggers ;
triggers_by_mode['EMu'       ] = EMu_triggers ;
triggers_by_mode['WZToEMuTau'] = all_triggers ;
triggers_by_mode['VV'        ] = EMuTau_triggers ;
triggers_by_mode['VVH'       ] = EMuTau_triggers ;
triggers_by_mode['all'       ] = all_triggers ;

var triggers = triggers_by_mode['EMu'    ] ;
//var triggers = triggers_by_mode['cosmics'] ;

// function to get a random trigger.  This should be edited to be tweakable in the
// settings, based on difficulty, age range etc
function random_trigger(PNG){
  return triggers[floor(PNG.random()*triggers.length)] ;
}
// A series of functions to update the header and footer so we can set images or text,
// depending on the game state.  Mostly self explanatory, it's just moving images from a
// hidden div to the header/footer and back again.

function clear_header(){
  var hiddenDiv = Get('div_hidden') ;
  var headerDiv = Get('div_header') ;
  while(headerDiv.childNodes.length>0){ hiddenDiv.appendChild(headerDiv.childNodes[0]) ; }
}
function clear_footer(){
  var hiddenDiv = Get('div_hidden') ;
  var footerDiv = Get('div_footer') ;
  while(footerDiv.childNodes.length>0){ hiddenDiv.appendChild(footerDiv.childNodes[0]) ; }
}
function set_header_image(){
  clear_header() ;
  //Get('div_header').appendChild(Get('img_header')) ;
  Get('div_header').style.backgroundImage = 'url('+Get('img_header').src+')' ;
}
function set_footer_image(){
  clear_footer() ;
  Get('div_footer').appendChild(Get('img_footer')) ;
}
function set_header_and_footer_images(){
  set_header_image() ;
  set_footer_image() ;
}
function set_header_events_summary_table(){
  clear_header() ;
  Get('div_header').appendChild(Get('table_events_summary')) ;
}
function set_footer_toplogy(){
  clear_footer() ;
  Get('div_footer').appendChild(Get('div_topology')) ;
}
function shift_object(PNG){
  this.collisions = [] ;
  this.collision_counter = 0 ;
  this.trigger = random_trigger(PNG) ;
  
  // Statistics about the collisions.
  this.statistics = new statistics_object() ;

  this.score = 0 ;
  
  this.start = function(){
    // Draw the shift start screen.
    game.shift_counter++ ;
    if(game.shift_counter>shifts_per_game && shifts_per_game>0){
      // This code never gets called with the current settings.  It's for the "end game"
      // (eg single player mode) so we should make something cool happen here instead, such
      // as adding the player's name to a leaderboard.
      var score = game.update_score() ;
    
      // This is the only place where we use the histgoram.
      animate_histogram() ;
      return ;
    }
    
    // Update the trigger text.
    game.current_shift.trigger.update_text() ;
    
    // Reset the game state.
    game.state = 'shift_start' ;
    game.paused = true ;
    game.can_click = false ;
    window.setTimeout(game.enable_click, delay_enable_click) ;
  
    game.reset_statistics() ;
  }
  this.end = function(context){
    // Send results to the server.
    game.current_shift.trigger.send_results_to_server() ;
    
    if(game.mode=='suddenDeath'){
      collision_delay_min *= 0.9 ;
      collision_delay_max *= 0.9 ;
      collision_delay_min = Math.max(collision_delay_min, 500) ;
      collision_delay_max = Math.min(collision_delay_max,1000) ;
    }
    else if(game.mode=='pro'){
      collision_delay_min *= 0.9 ;
      collision_delay_max *= 0.8 ;
      collision_delay_min = Math.max(collision_delay_min, 250) ;
      collision_delay_max = Math.min(collision_delay_max, 500) ;
    }
    
    // Draw the shift end screen.
    set_header_and_footer_images() ;
    //Get('div_header').appendChild(Get('table_music_player')) ;
    game.current_shift.draw_end_screen(context) ;
    game.state = 'shift_end' ;
    game.paused = true ;
    game.can_click = false ;
    window.setTimeout(game.enable_click, delay_enable_click) ;
  }
  
  this.draw_start_screen = function(context){
    // This is the screen the player sees between shifts.  It's loaded many times during
    // the course of a game and we call this function many times to animate the spokes.
    context.save() ;
    clear_canvas(context) ;
    
    spokes.draw(context) ;
    
    // Some more hard coded stuff that should probably be cleaned up.
    context.fillStyle = text_color ;
    context.textBaseline = 'middle' ;
    context.textAlign = 'center' ;
    context.font = 0.11*ch+'px arial' ;
    context.fillText('NEW SHIFT!', 0.5*cw, 0.15*ch) ;
    
    context.font = 0.06*ch+'px arial' ;
    context.fillText('Fire the trigger (click) for', 0.5*cw,  0.3*ch) ;
    context.fillText('events that contain:', 0.5*cw, 0.37*ch) ;
    
    // Better function name for this?
    game.current_shift.trigger.draw_topology_on_shift_start_screen(cw, ch) ;
    
    context.fillText(game.current_shift.trigger.description, 0.5*cw, 0.62*ch) ;
    
    if(game.can_click){
      context.fillText('Click to begin.', 0.5*cw, 0.9*ch) ;
    }
    
    context.restore() ;
  }
  this.draw_end_screen = function(c){
    // This shows the player their "score" which isn't used at the moment, but could be sent
    // to the server for analysis.  As usual we call this many times to animate the spokes.
    c.save() ;
    clear_canvas(c) ;
    
    spokes.draw(c) ;
    
    // We should probably write some simple function to write text on screen so we don't
     // need to hard code so much stuff like this.  We have plenty of space on the canvas
    // and we can play around with different statistics etc.
    // Consider adding some "friendly" graphics to say things like "Good job!" with a
    // smiley person.
    c.fillStyle = text_color ;
    c.textAlign = 'center' ;
    c.font = 0.11*ch+'px arial' ;
    c.fillText('Shift summary:', 0.5*cw, 0.125*ch) ;
    
    c.font = 0.06*ch+'px arial' ;
    c.fillText('Events saved: '       + this.statistics.values['total_savedEvents'] , 0.5*cw, 0.25*ch) ;
    c.fillText('Correct clicks: '     + this.statistics.values['true_positives'   ] , 0.5*cw, 0.32*ch) ;
    c.fillText('Incorrect clicks: '   + this.statistics.values['false_positives'  ] , 0.5*cw, 0.39*ch) ;
    c.fillText('Collisions missed: '  + this.statistics.values['false_negatives'  ] , 0.5*cw, 0.46*ch) ;
    //context.fillText('Collisions ignored: ' + this.statistics.values['true_negatives'   ] , 0.5*cw, 0.53*ch) ;
    c.font = 0.1*ch+'px arial' ;
    c.fillText('Score: ' + ((100/collisions_per_shift)*this.statistics.score()).toPrecision(3) + '%' , 0.5*cw, 0.62*ch) ;
    
    c.font = 0.04*ch+'px arial' ;
    c.fillText('Thank you for contributing to science!'       , 0.5*cw, 0.72*ch) ;
    c.fillText('With your help we\'ll find the Higgs boson!'  , 0.5*cw, 0.77*ch) ;
    
    if(game.can_click){
      // Finish with instructions about how to pass on to the next player, if this is
      // needed.
      // We can add different modes (multiplayer etc.)
      c.font = 0.06*ch+'px arial' ;
      c.fillText('Click to start the next shift.', 0.5*cw, 0.9*ch) ;
      c.font = 0.03*ch+'px arial' ;
      c.fillText('(Feel free to pass to the next player when you are ready)', 0.5*cw, 0.95*ch) ;
    }
    c.restore() ;
  }
}
// This object keeps track of the game so we don't have as many global variables flying
// around as we used to.

function statistics_object(){
  // This object holds all the useful information about the numbers of successes etc.
  this.fields = ['true_positives', 'true_negatives', 'false_positives', 'false_negatives', 'total_events', 'higgsy_events', 'total_savedEvents', 'total_deliveredEvents'] ;
  this.values = [] ;
  this.reset = function(){
    for(var i=0 ; i<this.fields.length ; i++){
      this.values[this.fields[i]] = 0 ;
    }
  }
  this.reset() ;
  
  this.add_statistics = function(other){
    for(var i=0 ; i<this.fields.length ; i++){
      this.values[this.fields[i]] += other.values[this.fields[i]] ;
    }
  }
  
  this.score = function(){
    var result = this.values['true_positives']+this.values['true_negatives'] - 0.5*(this.values['false_positives']+this.values['false_negatives']) ;
    if(result<0) result = 0 ;
    return result ;
  }
}

function player_object(){
  this.list_of_names = player_names ;
  this.name = this.list_of_names[floor(random()*this.list_of_names.length)] ;
}

function game_object(){
  this.state = 'preamble' ;
  this.mode = 'collaborative' ;
  this.difficulty = 'easy' ;
  
  this.ws = false ;
  this.use_ws = use_ws ;
  if(this.use_ws){
    this.ws = new WebSocket('ws://www.ministryofsense.com:8080/') ;
    this.ws.onopen = function(e){
      console.log("Connection established!") ;
      game.ws.send('type:triggerPush') ;
    } ;
    this.ws.onmessage = function(e){} ;
  }
  
  this.ajax = false ;
  this.use_ajax = use_ajax ;
  if(this.use_ajax){
    this.ajax = new ajax_object() ;
  }
  
  this.paused = true ;
  this.muted  = false ;
  this.can_click = true ;
  this.team_name = 'neutral' ;
  
  this.player = new player_object() ;
  
  // Settings for animating the event display.
  // This is expressed as percentage of how "complete" the animation is.  Once this is
  // > 100% the animation stops.
  this.draw_step = 0 ;
  // Allow the user to turn off the animations if they get annoying etc.
  this.animate_eventDisplay = true ;
  // Allow the app to stop the animation.
  this.kill_drawStep = false ;
  // This is used to "speed up" the animation.  A scale of 2 will go through the
  // animation twice as quickly, and when it reaches 100% it'll stay at the end.
  this.draw_step_scale = 2 ;
  
  this.seed = floor(1e9*random()) ;
  this.PNG = new psuedorandom_number_generator() ;
  this.PNG.set_seed(this.seed) ;
  this.current_shift = null ;
  this.shift_counter = 0 ;
  this.shifts = [] ;
  
  // For debugging, show the cells on the canvas.
  this.underlay_cells = false ;
  this. overlay_cells = false ;
  
  // Statistics about the collisions.
  this.statistics = new statistics_object() ;

  this.score = 0 ;
  
  this.reset_statistics = function(){
    this.statistics.reset() ;
  }
  
  this.update_statistics = function(){
    this.reset_statistics() ;
    for(var i=0 ; i<this.shifts.length ; i++){
      this.statistics.add_statistics(this.shifts[i].statistics) ;
    }
    this.statistics.add_statistics(this.current_shift.statistics) ;
  }
  
  this.update_score = function(){
    this.update_statistics() ;
    this.score = this.statistics.score() ;
    Get('td_score').innerHTML = this.score ;
    return this.score ;
  }
  
  this.write_statistics = function(){
    this.update_statistics() ;
    for(var i=0 ; i<this.statistics.fields.length ; i++){
      if(Get('span_'+this.statistics.fields[i])){
        Get('span_'+this.statistics.fields[i]).innerHTML = this.statistics.values[this.statistics.fields[i]] ;
      }
    }
  }
  
  this.toggle_pause = function(){ this.paused = !this.paused ; }
  this.toggle_mute  = function(){ this.muted  = !this.muted  ; }
  
  this.start_shift = function(){
    game.current_shift = new shift_object(this.PNG) ;
    game.current_shift.start(context) ;
  }
  this.end_shift = function(){
    game.current_shift.end(context) ;
    game.shifts.push(game.current_shift) ;
  }
  this.enable_click = function(){ game.can_click = true ; }
  
  this.draw_game_over_screen = function(){
    draw_eventDisplay(this.current_shift.current_collision, context) ;
    this.current_shift.trigger.draw_failure(context) ;
    
    this.update_statistics() ;
    var score = this.statistics.values['true_positives'] + this.statistics.values['true_negatives'] ;
    
    var divWrapper = Get('div_eventDisplay') ;
    divWrapper.innerHTML = '<br />' ;
    divWrapper.style.backgroundSize = '750px 750px' ;
    divWrapper.style.backgroundImage = 'url('+canvas.toDataURL()+')' ;
    
    var divTmp = Create('div') ;
    divTmp.className = 'game_over' ;
    
    var h2 = Create('h2') ;
    h2.className = 'game_over' ;
    h2.innerHTML = 'Game over!' ;
    divTmp.innerHTML = '<br />' ;
    divTmp.appendChild(h2) ;
    
    var p = Create('p') ;
    p.className = 'game_over' ;
    p.innerHTML = this.game_over_message ;
    divTmp.appendChild(p) ;
    
    var p2 = Create('p') ;
    p2.className = 'game_over_score' ;
    p2.innerHTML = 'Score = ' +score + ' collisions' ;
    divTmp.appendChild(p2) ;
    divWrapper.appendChild(divTmp) ;
    
    divTmp = Create('div') ;
    divTmp.className = 'game_over' ;
    
    var button = Create('button') ;
    button.innerHTML = 'Submit score' ;
    button.className = 'game_over' ;
    button.id = 'button_submitScore' ;
    button.addEventListener('click', submit_score_suddenDeath) ;
    divTmp.appendChild(button) ;
    
    button = Create('button') ;
    button.innerHTML = 'Return home' ;
    button.className = 'game_over' ;
    button.id = 'button_returnHome' ;
    button.addEventListener('click', home_screen) ;
    divTmp.appendChild(button) ;
    
    divWrapper.appendChild(divTmp) ;
    
    Get('div_playSpace').appendChild(divWrapper) ;
    Get('div_hidden'   ).appendChild(Get('canvas_eventDisplay')) ;
  }
}

function home_screen(){
  game.state = 'preamble' ;
  var hiddenDiv = Get('div_hidden') ;
  var playSpace = Get('div_playSpace') ;
  while(playSpace.childNodes.length>0){ hiddenDiv.appendChild(playSpace.childNodes[0]) ; }
  playSpace.appendChild(Get('div_playFrontPage')) ;
  teams['neutral'].apply_style() ;
}

function submit_score_suddenDeath(){
  submit_score() ;
  var button = Get('button_submitScore')
  var div = button.parentNode
  div.removeChild(button) ;
  var p = Create('p') ;
  p.className = 'submit_score' ;
  p.innerHTML = 'Score submitted!' ;
  div.insertBefore(p, Get('button_returnHome')) ;
}
function submit_score(){
  var mode = game.mode ;
  if(game.mode=='suddenDeath' && game.difficulty=='pro') mode = 'pro' ;
  var request = '?task=add_score&score=' + game.statistics.score() + '&mode=' + mode + '&username=' + game.player.name ;
  var uri = 'event_store.php'+request+'&sid=' + Math.random() ;
  xmlhttp.open('GET', uri, true) ;
  xmlhttp.send(null) ;
}

function heartbeat(){
  // A heartbeat for periodic updates.
  // Maybe reset this after a huge number so we don't get int overflow?
  heartbeat_counter++ ;
  
  // Call the next heartbeat: Now done with setInterval
  //window.setTimeout(heartbeat, delay) ;
  
  // Draw the various screens depending on the state of the game.
  if(game.state=='shift_end'   && game.current_shift) game.current_shift.draw_end_screen(context)   ;
  if(game.state=='shift_start' && game.current_shift) game.current_shift.draw_start_screen(context) ;
  if(game.state=='game_start') draw_game_start_screen(context)  ;
}

function start_collaborative_game(){
  game.state = 'game_start' ;
  if(game.team_name=='ATLAS' || game.team_name=='CMS'){
    teams[game.team_name].apply_style() ;
    game.start_shift() ;
    game.state = 'shift_start' ;
  }
  start_game('collaborative') ;
}
function start_suddenDeath_game(){
  triggers = triggers_by_mode['all'] ;
  decay_scheme = all_decay_schema['VVH'] ;
  game.shifts = [] ;
  game.reset_statistics() ;
  game.state = 'shift_start' ;
  start_game('suddenDeath') ;
  game.start_shift() ;
}
function start_pro_game(){
  game.difficulty = 'pro' ;
  start_suddenDeath_game() ;
}
function start_cosmics_game(){
  game.state = 'shift_start' ;
  detector.B1 *= 1.0 ;
  detector.B2 *= 1.0 ;
  start_game('cosmics') ;
  game.start_shift() ;
}
function start_cosmicsNoField_game(){
  game.state = 'shift_start' ;
  detector.B1 *= 0.0 ;
  detector.B2 *= 0.0 ;
  start_game('cosmics') ;
  game.start_shift() ;
}
function start_story_game(){
  game.state = 'slides' ;
  detector.B1 = B1_0 ;
  detector.B2 = B2_0 ;
  start_game('cosmics') ;
  slides[0].draw() ;
  //game.start_shift() ;
}
function start_game(mode){
  game.mode = mode ;
  Get('div_hidden'   ).appendChild(Get('div_playFrontPage'  )) ;
  Get('div_playSpace').appendChild(Get('canvas_eventDisplay')) ;
  game.can_click = true ;
}

function changePlayerName(){
  var name = Get('input_name').value ;
  game.player.name = name ;
}
function checkPlayerName(){
  var name = Get('input_name').value ;
  if(name.length>nCharsPerName){
    name = name.substr(0,nCharsPerName-1) ;
  }
}

function pick_team(evt){
  // This is a little messy, so maybe rewrite this (along with the draw functions) to make
  // it easier to change.
  
  // First get the position of the mouse on the canvas.
  // Check this for cross browser compatibility!  It's okay for Firefox, Safari, Chrome.
  var x = evt.pageX - evt.target.offsetLeft ;
  var y = evt.pageY - evt.target.offsetTop  ;
  
  // See if the user has hit a target.
  var team_names = ['ATLAS','CMS'] ;
  for(var i=0 ; i<team_names.length ; i++){
    var click = (teams[team_names[i]].box.contains(x,y)) ;
    if(click){
      game.team_name = team_names[i] ;
      game.state = 'shift_start' ;
      game.start_shift() ;
    }
  }
  teams[game.team_name].apply_style() ;
  Get('div_teamname').innerHTML = 'Team ' + teams[game.team_name].title ;
}


function textbox_object(x, y, width, text){
  this.x = x ;
  this.y = y ;
  this.w = width ;
  this.text = text ;
  this.font_size = 0.025*ch ;
  this.draw = function(context){
    context.save() ;
    context.font = this.font_size + 'px arial , sans-serif' ;
    wrapText(context, this.text,this.x,this.y,this.w,1.5*this.font_size,true) ;
    context.restore() ;
  }
}

function wrapText(context, text,x,y_in,maxWidth,lineHeight,draw){
  // Taken from www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/
  if(text==undefined) return 0 ;
  var words = text.split(' ') ;
  var line = '' ;
  var w = 0 ;
  var h = 0 ;
  var y = 0 ;

  for(var n=0 ; n<words.length ; n++){
    var testLine = line + words[n] + ' ' ;
    var testWidth = context.measureText(testLine).width ;
    if(testWidth>maxWidth){
      y = y_in+h ;
      if(draw) context.fillText(line, x, y) ;
      line = words[n] + ' ' ;
      h += lineHeight ;
    }
    else{
      line = testLine ;
      if(testWidth>w) w = testWidth ;
    }
  }
  y = y_in+h ;
  if(draw) context.fillText(line, x, y) ;
  h += lineHeight ;
  if(draw==-1) return w ;
  return h ;
}

function slide_object(){
  this.text_boxes = [] ;
  this.title = '' ;
  this.add_text_box = function(x, y, width, text){
    this.text_boxes.push(new textbox_object(x, y, width, text)) ;
  }
  this.draw = function(){
    var context = canvas.getContext('2d') ;
    var w = canvas.width  ;
    var h = canvas.height ;
    context.save() ;
    context.fillStyle = '#ffffff' ;
    context.fillRect(0, 0, w, h) ;
    
    context.font = 0.05*ch + 'px arial' ;
    context.fillStyle = '#000000' ;
    context.textAlign = 'center' ;
    context.textBaseline = 'middle' ;
    context.fillText(this.title, 0.5*cw, 0.1*ch) ;
    
    for(var i=0 ; i<this.text_boxes.length ; i++){
      this.text_boxes[i].draw(context) ;
    }
  }
}

var slides = [] ;

var slide_tmp = new slide_object() ;

slide_tmp.title = 'Welcome to the trigger game' ;
slide_tmp.add_text_box(0.5*cw, 0.2*ch, 0.6*cw, 'Welcome to the trigger game!  In this game you\'re going collect data that will enable you to discover the Higgs boson.') ;

slide_tmp.add_text_box(0.5*cw, 0.4*ch, 0.6*cw, 'At the LHC we receive up to 40 million collisions per second.  This is far too much data for us to save every single collision, so we filter interesting events using the trigger system.') ;

slides.push(slide_tmp) ;



// Objects for the canvases we draw onto.
var canvas  = null ;
var context = null ;

// Detector parts.
var detector = new detector_object() ;

// A histogram to draw the final results.
var histogram = null ;

// Variables to control the game.
var heartbeat_counter = 0 ;

var game = new game_object() ;

// Phone home!  We may refactor this to something more friendly (eg jQuery.)
var xmlhttp = GetXmlHttpObject() ;

function start(){
  // Set the global variables.
  canvas = Get('canvas_eventDisplay') ;
  context = canvas.getContext('2d') ;
  //context.translate(0.5,0.5) ;
  context.lineCap = 'round' ;
  
  var canvas_eventDisplay_hidden = Create('canvas') ;
  canvas_eventDisplay_hidden.id = 'canvas_eventDisplay_hidden' ;
  canvas_eventDisplay_hidden.width  = cw ;
  canvas_eventDisplay_hidden.height = ch ;
  Get('div_hidden').appendChild(canvas_eventDisplay_hidden) ;
  
  var canvas_eventDisplay_hidden_activity = Create('canvas') ;
  canvas_eventDisplay_hidden_activity.id = 'canvas_eventDisplay_hidden_activity' ;
  canvas_eventDisplay_hidden_activity.width  = cw ;
  canvas_eventDisplay_hidden_activity.height = ch ;
  Get('div_hidden').appendChild(canvas_eventDisplay_hidden_activity) ;
  
  canvas.width  = cw ;
  canvas.height = ch ;
  canvas.style.width  = '750px' ;
  canvas.style.height = '750px' ;
  
  home_screen() ;
  
  // Apply the style to be neutral.  This is done so that we only need to set a single
  // colour in settings.js and make the style function as complex as we like.
  teams['neutral'].apply_style() ;
  set_header_and_footer_images() ;
  
  if(getParameterByName('team')){
    if(getParameterByName('team')=='ATLAS'){
      game.team_name = 'ATLAS' ;
    }
    else if(getParameterByName('team')=='CMS'){
      game.team_name = 'CMS' ;
    }
    
    var person = prompt('Please enter your name', '') ;
    if(person!=null) game.player.name = person ;
    start_collaborative_game() ;
  }
  
  // Add eventListeners.
  document.addEventListener('keydown'   , keyDown          ) ;
  canvas  .addEventListener('mousedown' , eventDisplayClickMouseDown) ;
  canvas  .addEventListener('touchstart', eventDisplayClickTouchStart) ;
  
  Get('button_playCollaborative').addEventListener('click', start_collaborative_game) ;
  Get('button_playSuddenDeath'  ).addEventListener('click', start_suddenDeath_game  ) ;
  Get('button_playPro'          ).addEventListener('click', start_pro_game          ) ;
  //Get('button_playStory'        ).addEventListener('click', start_story_game        ) ;
  
  Get('input_name' ).addEventListener('change', checkPlayerName ) ;
  Get('button_name').addEventListener('click' , changePlayerName) ;
  
  // These are not visible, and are mainly there so we can make them visible for single
  // player mode.
  Get('span_eventsPerShift').innerHTML = collisions_per_shift ;
  Get('span_shiftsPerGame' ).innerHTML = shifts_per_game ;
  
  // Make a histogram and trigger for use later.
  histogram = new four_lepton_mass_histogram(canvas) ;
  
  window.setInterval(heartbeat, delay) ;
  
  Get('input_name').value = game.player.name ;
  
  window.setTimeout(begin, 10) ;
  
  //slides[0].draw(canvas) ;
}

function begin(){
  // Now do the expensive stuff.
  make_detector() ;
  
  // This is CPU intensive, so do it last
  detector.make_cells() ;
  for(var i=0 ; i<detector.segments.length ; i++){
    detector.segments[i].activate_cells() ;
  }
  
  make_eventDisplay_base() ;
}