var copyPosition = function() {
  copyToClipboard(r0.toString());
}

var copyToClipboard = function(text) { 
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text); 
} ;

var fscale = 3 ; 

var fscaleSlider = d3.select("#fscaleSlider")
  .attr('value', fscale)
  .on("input", function() {
    fscale  = +this.value;
    set_zscale() ;
    z_range() ;
    redraw() ;
  }) ;

///  *******************
/// 
///  initialize position:
///  
///  *******************

var rmin = Math.pow(2, 1/6) ; // the minimizer of the lennard-jones potential
var r0   = [0, 0, 0, rmin, 0, 0, 0, rmin, 0, 0, 0, rmin] ; // , rmin, rmin, rmin
var N    = r0.length / 3 ; // number of L-J particles
var xI   = 0 ;
var yI   = 1 ;
var Ndim = r0.length ; // number of free dimensions / degrees of freedom

var canvas = d3.select('#canvas_1') ;
var size   = 127 ;

canvas
  .attr('width', size)
  .attr('height', size)


var element = document.getElementById("canvas_1") ;
var c       = element.getContext("2d") ;

// read the width and height of the canvas
var width  = element.width ;
var height = element.height ;

var body = d3.select(document.body) ;
var td   = d3.select('#svg_td') ;

var copyButton = td.append('input')
  .attr('type', 'button')
  .attr('value', 'current position')
  .attr('onClick', 'copyPosition() ; return false ;') ;

td.append('br')

var dimSelect = [] ;
var Ndsel     = 2 ;

  dimSelect1 = td.append('input')
    .attr('id', 'dimSelect1')
    .attr('type', 'range')
    .attr('value', 1)
    .attr('min', 1)
    .attr('max', Ndim - 1)
    .attr('step', 1)
    .on('input', function() {
        if(Number(this.value) >= Number(dimSelect2.node().value)) {
          dimSelect2.node().value = Number(this.value) + 1 ;
        }
        xI = Number(dimSelect1.node().value) - 1 ;
        yI = Number(dimSelect2.node().value) - 1 ;
        dselOut1.html('i = ' + (xI + 1)) ;
        dselOut2.html('j = ' + (yI + 1)) ;
        update_figure(true) ;
    }) ;

  var dselOut1 = td.append('output')
    .attr('id', 'dimSelect1out')
    .attr('for', 'dimSelect1')
    .html('i = ' + (xI + 1)) ;

  td.append('br') ;

  dimSelect2 = td.append('input')
    .attr('id', 'dimSelect2')
    .attr('type', 'range')
    .attr('value', 2)
    .attr('min', 2)
    .attr('max', Ndim)
    .attr('step', 1)
    .on('input', function() {
        if(Number(this.value) <= Number(dimSelect1.node().value)) {
          dimSelect1.node().value = Number(this.value) - 1 ;
        }
        xI = Number(dimSelect1.node().value) - 1 ;
        yI = Number(dimSelect2.node().value) - 1 ;
        dselOut1.html('i = ' + (xI + 1)) ;
        dselOut2.html('j = ' + (yI + 1)) ;
        update_figure(true) ;
    }) ;

  var dselOut2 = td.append('output')
    .attr('id', 'dimSelect2out')
    .attr('for', 'dimSelect2')
    .html('j = ' + (yI + 1))  ;

function setPixel(imageData, x, y, r, g, b, a) {
    var index = (x + y * imageData.width) * 4 ;
    imageData.data[index + 0] = r ;
    imageData.data[index + 1] = g ;
    imageData.data[index + 2] = b ;
    imageData.data[index + 3] = a ;
}

// create a new pixel array
var imageData = c.createImageData(width, height) ;

var xRange = [-2.5, 2.5] ;
var yRange = [-2.5, 2.5] ;

var xscale ; 
var yscale ; 

var set_scale = function() {
  xscale = d3.scale.linear()
      .domain([0, width])
      .range(xRange) ;

  yscale = d3.scale.linear()
      .domain([0, height])
      .range(yRange) ;
} ;

set_scale() ;

var zscale = d3.scale.linear() ;
var zdomain ;
var zrange = ["rgb(0, 88, 11)", "rgb(0, 255, 33)", "rgb(0, 3, 33)", "rgb(0, 11, 55)", "rgb(0, 88, 155)", "rgb(0, 88, 155)", "rgb(111, 0, 33)", "rgb(122, 0, 33)", "rgb(155, 0, 88)"] ;

var f     = [] ;
var fvec  = [] ;
var fmin  = Infinity, fmax = -Infinity ;            

var lennard_jones = function(d) { // Lennard-Jones term
  var V = Math.pow(d, -6) ; 
  V = V * V - V ;
  return V ;
}

var objective_function = function(r) {
    var V     = 0 ;
    for(var i = 0 ; i < N - 1 ; i++) {
        for(var j = i + 1 ; j < N ; j++) {
            var d2 = 0 ;
            for(k = 0 ; k < 3 ; k++) {                            
              var drk = r[i * 3 + k] - r[j * 3 + k] ; // 3 dimensions per particle: (x, y, z)
              d2 += drk * drk ;
            }
            var d  = Math.sqrt(d2) ; // the distance between the spheres
            V += lennard_jones(d) ;
        }
    }
    V *= 4 ; // so each perfect contact scores a -1 energy
    return V ;
}

var stepSize = 0.00001 ; // for numerical gradient (secant)

var gradient_function = function(r) {
  var g = [] ;
  for(var i = 0 ; i < r.length ; i++) {
      var r1 = r.slice(0) ;
      r1[i] += stepSize ;
      fp = objective_function(r1) ;
      r1[i] -= 2 * stepSize ;
      fm = objective_function(r1) ;
      g[i] = (fp - fm) / (2 * stepSize) ;                
  }
  // console.log('grad', g, r.length)
  return g ;
} ;

var xval = [] ;
var yval = [] ;            

function update_image() {
    var count = 0 ;

    for (var i = 0 ; i < height ; i++) {
        f[i] = [] ;
        xval[i] = [] ;
        yval[i] = [] ;
        for(var j = 0 ; j < width ; j++) {
            var x = xRange[0] + (i / width) * (xRange[1] - xRange[0]) ;
            var y = yRange[0] + (j / width) * (yRange[1] - yRange[0]) ;
            var r = r0.slice(0) ;
            for (k = 0 ; k < r0.length ; k++) {
              if(k == xI) r[xI] = x + r0[xI] ;
              if(k == yI) r[yI] = y + r0[yI] ;
            }
            f[i][j] = objective_function(r) ;
            xval[i][j] = x ;
            yval[i][j] = y ;
            // console.log('x', x, 'y', y, 'r', r, 'f', f[i][j])
            if(f[i][j] < fmin) {
                fmin = f[i][j] ;
                ropt = r.slice(0) ;
            }
            if(f[i][j] > fmax) fmax = f[i][j] ;
            fvec[count] = f[i][j] ;
            count++ ;
        }
    }

    var fmid   = 0.5 * (fmin + fmax) ;
    var fsort  = fvec.slice(0).sort(d3.ascending)
    var fmed   = d3.quantile(fsort, 0.5) ;
    var fran   = fmed - fmin ;


    // zdomain = [fmin, d3.quantile(fsort, 1/3), d3.quantile(fsort, 2/3), Infinity] ;
    set_zscale() ;
      //.domain([fmin, d3.quantile(fvec, 0.1), d3.quantile(fvec, 0.45), d3.quantile(fvec, 0.5), d3.quantile(fvec, 0.75), d3.quantile(fvec, 0.95), fmax])
      //.range(["rgb(0, 0, 44)", "rgb(11, 33, 121)", "rgb(22, 88, 121)", "rgb(111, 111, 111)", "rgb(121, 88, 22)", "rgb(111, 11, 0)", "rgb(44, 0, 0)"]);   
} ; // end update_image

var set_zscale = function() {
    zdomain = [fmin, fmin + .01 * fscale, fmin + .1 * fscale, fmin + 0.2 * fscale, fmin + 0.4 * fscale, fmin + .8 * fscale, fmin + 1.6 * fscale, fmax * 0.1 * fscale, Infinity] ;
    zdomain.sort(d3.ascending) ;    
}

var redraw = function() {
    for (var i = 0 ; i < height ; i++) {
        for(var j = 0 ; j < width ; j++) {      
            var r = d3.rgb(zscale(f[i][j])).r ; 
            var g = d3.rgb(zscale(f[i][j])).g ;
            var b = d3.rgb(zscale(f[i][j])).b ;
            if(i == Math.ceil(height / 2) &&  j == Math.ceil(width / 2)) {
                r = 255 ;
                g = 255 ;
                b = 0 ;
                
            }
            setPixel(imageData, i, j, r, g, b, 255) ; // 255 opaque
        }
    }
    // copy the image data back onto the canvas
    c.putImageData(imageData, 0, 0) ; // at coords 0,0                
}

var update_figure = function (scaleSwitch) {
    update_image() ;
    if(scaleSwitch) {
      set_scale() ;
      z_range() ;        
    }
    redraw() ;
    update_text() ;    
}

var updating = false ;

var update_position = function(dx, dy, i, j) {
  if(updating) return ;
  updating = true ;
  var Nstep = 4 ;
  var kstep = 0 ;

  // console.log('upos', 'r0', r0, dx, dy)

  var step = function() {
    if(kstep < Nstep) {
        r0[i] += dx / Nstep ;
        r0[j] += dy / Nstep ;
        update_figure() ;
        kstep++ ;
        var delay = 16 ;
        setTimeout(step, delay) ;
        // console.log('stepping', kstep)
    } else {                
      // console.log('done stepping', kstep, 'r0', r0)
      z_range() ;
      redraw() ;
      update_text() ;
      updating = false ;
    }
  }
  step() ;
}

var update_text = function() {
  update_xtext() ;
  update_ytext() ;
  update_ttext() ;
}

var update_ttext = function() {
  d3.select('#temperatureText').text('f(x) = ' + objective_function(r0).toPrecision(6)) ;
}

var update_xtext = function() {
  d3.select('#xlabel').html('x<sub>' + (xI + 1) + '</sub> = ' + r0[xI].toPrecision(8)) ;
}

var update_ytext = function() {
  d3.select('#ylabel').html('x<sub>' + (yI + 1) + '</sub> = ' + r0[yI].toPrecision(8)) ;
}

var z_range = function() {
  zscale
    .domain(zdomain)
    .range(zrange) ;   
}

update_position(0, 0, xI, yI) ;

canvas.on('click', function() { 
    var xy = d3.mouse(canvas.node()) ;
    xy[0] /= canvas.node().clientWidth ;
    xy[1] /= canvas.node().clientHeight ;
    xy[0] *= width ;
    xy[1] *= height ;
    xy[0] = Math.floor(xy[0]) ;
    xy[1] = Math.floor(xy[1]) ;
    console.log(xy)
    Npix = 3 ; // for local search to "snap" to the minimum pixel close to where the user clicked
    var minf   = f[xy[1]][xy[0]] ;
    var mini   = xy[1] ;
    var minj   = xy[0] ;
    var iStart = Math.max(0, xy[0] - Npix) ;
    var iEnd   = Math.min(width - 1, xy[0] + Npix) ;
    var jStart = Math.max(0, xy[1] - Npix) ;
    var jEnd   = Math.min(height - 1, xy[1] + Npix) ;
    for (var i = iStart ; i <= iEnd ; i++) {
      for (var j = jStart ; j <= jEnd ; j++) {
        if(f[i][j] < minf) {
          minf = f[i][j] ;
          mini = i ;
          minj = j ;
        }
      }
    }
    update_position(xval[mini][minj], yval[mini][minj], xI, yI) ;
  }
) ;

var scrolling = false ;

var scroll = function() {
  if(scrolling) return ;
  scrolling = true ;
  console.log(d3.event)
  if(d3.event.wheelDelta !== undefined) {
    var delta  = d3.event.wheelDelta / Math.abs(d3.event.wheelDelta) ;
  }
  if(d3.event.detail !== undefined) {
    var delta  = -d3.event.detail / Math.abs(d3.event.detail) ;
  }
  var step = .2 ;
  if(delta < 0) {
    step = 1 + step ;
  } else {
    step = 1 - step ;
  }
  xRange[0] = step * xRange[0] ;
  xRange[1] = step * xRange[1] ;
  yRange[0] = step * yRange[0] ;
  yRange[1] = step * yRange[1] ;
  set_scale() 
  update_image() ;
  z_range() ;
  redraw() ;
  scrolling = false ;
} ;

canvas
  .on("mousewheel.zoom", null)
  .on("DOMMouseScroll.zoom", null) // disables older versions of Firefox
  .on("wheel.zoom", null) // disables newer versions of Firefox

canvas.on("mousewheel", scroll)  // default scroll wheel listener
canvas.on("DOMMouseScroll.zoom", scroll) ;