// Requires shader.js

function VidShader(target) {
  this.target = $(target)
  this.video = this.target.down('object')

  this.target.setStyle({ width: this.video.getStyle('width') })

  var cntl = new Element('div', { 'class': 'control' })
  var label = new Element('label', { 'for': this.video.id + '_screen' })
  label.update(this.target.readAttribute('title') || 'Play video')
  this.target.writeAttribute('title', 'Play video')
  cntl.insert(label)
  this.target.insert(cntl)

  var screen = new Element('div', { 'class': 'screen', style: 'background-color:black', 'id': this.video.id + '_screen' })
  screen.setStyle({ width: this.video.getStyle('width'), height: this.video.getStyle('height') })
  screen.insert(this.video)
  this.target.insert(screen)

  this.shader = new Shader(label, { shaded: true, afterUnshade: VidShader.afterUnshade, beforeShade: VidShader.beforeShade })
  this.shader.vidShader = this
  this.video.hide()
}

VidShader.init = function() {
  $$('.video').each(function(vid) { new VidShader(vid) })
}

VidShader.afterUnshade = function(shader) {
  shader.vidShader.video.show()
  shader.vidShader.target.writeAttribute('title', 'Hide video')
}

VidShader.beforeShade = function(shader) {
  shader.vidShader.video.hide()
  shader.vidShader.target.writeAttribute('title', 'Play video')
}

Event.observe(window, 'load', VidShader.init)