/* eslint no-console: 0 */

var canvasElement = document.querySelector('canvas')
var frameNumberElement = document.querySelector('#frame-number')
var totalTimeElement = document.querySelector('#total-time')

var frame = {
  total: 100,
  current: 0
}

function FastImageRender() {

}

var imageRender = new FastImageRender(
  canvasElement
, {
    render: 'canvas'
  , textureLoader: false
  }
)

function loadNext() {
  console.time('load')
//  var width = 300
//  var height = 300
  //  loader.src = 'http://placehold.it/' + width + 'x' + height + '?' +
  //    Date.now()
  //  loader.src = 'http://lorempixel.com/' + width + '/' + height +
  //    '/abstract/Frame-' + frames.current + '/?' + Date.now()
  imageRender.load('images/screen.jpg?' + Date.now())
//  imageRender.load('images/screen.jpg')
}

var startTime = new Date().getTime()

loadNext()

imageRender.onLoad = function(image) {
  console.timeEnd('load')
  console.time('draw')
  imageRender.draw(image)
  console.timeEnd('draw')

  frameNumberElement.innerHTML = frame.current

  if (frame.current++ < frame.total) {
    loadNext()
  } else {
    var endTime = new Date().getTime()
    var totalTime = endTime - startTime
    totalTimeElement.innerHTML = totalTime / 1000 + ' seconds'
  }
}