function Esb() {
  this.ctx = $('#canvas')[0].getContext('2d')

  this.esb = new Image()
  this.lights = new Image()

  this.esb.src = "images/esb.png"
  this.lights.src = "images/lights.png"

  this.imagesLoaded = function() {
    return this.lights.complete && this.esb.complete
  }

  this.update = function(date) {
    var day = date.getDate()
    var month = (date.getMonth() + 1)
    var year = date.getFullYear()
    var obj = this

    $.ajax({
      url: ("/" + year + "/" + month + "/" + day),
      type: 'GET',
      dataType: 'html',
      timeout: 1000,
      error: function(){
        obj.lower_color = parseColor("black")
        obj.middle_color = parseColor("black")
        obj.top_color = parseColor("black")

        if (date < new Date()) var event = "I don't remember!"
        else var event = "Cannot predict now."

        $("#colors").html("")
        $("#event").html(event)
        $("#month").html(parseMonth(month).slice(0, 3))
        $("#day").html(day)

        obj.draw()
      },
      success: function(data){
        eval("var info =" + data)

        obj.lower_color = parseColor(info.colors[0])
        obj.middle_color = parseColor(info.colors[1])
        obj.top_color = parseColor(info.colors[2])

        $("#colors").html("(" + colorText(info.colors[0]) + ", " + colorText(info.colors[1]) + ", " + colorText(info.colors[2]) + ")")
        $("#event").html(info.event)
        $("#month").html(parseMonth(month).slice(0, 3))
        $("#day").html(day)

        obj.draw()
      }
    });
  }

  this.draw = function() {
    this.ctx.clearRect(0, 0, $('#canvas')[0].width, $('#canvas')[0].height) // clear canvas
    this.ctx.drawImage(this.esb, 0, 0)

    this.ctx.beginPath()
    this.drawLower()
    this.drawMiddle()
    this.drawTop()

    this.ctx.drawImage(this.lights, 0, 0)
  }

  this.drawLower = function() {
    this.ctx.fillStyle = this.lightingFillStyle(166, 207, ["rgba(" + this.lower_color + ", 0.4)", "rgba(" + this.lower_color + ", 0.4)"])
    this.ctx.fillRect(42, 166, 20, 40); // Left
    this.ctx.fillRect(86, 166, 21, 40); // Right

    this.ctx.fillStyle = this.lightingFillStyle(166, 207, ["rgba(" + this.lower_color + ", 0.1)", "rgba(" + this.lower_color + ", 0.4)", "rgba(" + this.lower_color + ", 0.4)", "rgba(" + this.lower_color + ", 0.1)"])
    this.ctx.fillRect(62, 166, 25, 40); // Middle
  }

  this.drawMiddle = function() {
    this.ctx.moveTo(47,  166)
    this.ctx.lineTo(48,  163)
    this.ctx.lineTo(47,  147)
    this.ctx.lineTo(103, 147)
    this.ctx.lineTo(104, 162)
    this.ctx.lineTo(108, 166)
    this.ctx.lineTo(47,  166)

    this.ctx.fillStyle = this.lightingFillStyle(153, 166, ["rgba(" + this.middle_color + ", 0.2)", "rgba(" + this.middle_color + ", 0.2)"])
    this.ctx.fill()
  }

  this.drawTop = function() {
    this.ctx.fillStyle = "rgba(" + this.top_color + ", 0.7)"

    this.ctx.fillRect(61, 126, 26, 2)
    this.ctx.fillRect(64, 123, 21, 2)

    for (var i = 0; i < 13; i++) {
      this.ctx.fillRect(73, 118 - (i * 3), 3, 3)
    }
  }

  this.lightingFillStyle = function(top, bottom, colors) {
    var gradient = this.ctx.createLinearGradient(0, bottom, 0, top)
    for (var i = 0; i < colors.length; i++) {
      var postition = i / (colors.length - 1)
      gradient.addColorStop(postition, colors[i])
    }

    return gradient
  }
}