var fadeTime = 0.4
var a = true
function init() {
 $("images").select("img").each(function(img) {
  Element.extend(img)
  img.observe("click", showLarge)
  img.preload = new Element("img", {src: img.src.replace("t-vimlig", "m-vimlig")})
 })
 $("puff").observe("click", hidePuff)
}

function showLarge(e) {
  var t = e.element()
  var puff = $("puff")
  $A(puff.childNodes).each(function(elem){Element.remove(elem)})
  var m = t.preload
  puff.appendChild(m)
  var scrollOff = document.viewport.getScrollOffsets()
  var viewport = {x: document.viewport.getWidth(), y: document.viewport.getHeight()}
  var x = viewport.x / 2 + scrollOff.left - m.width / 2
  var y = -puff.viewportOffset().top
  m.relativize()
  m.setStyle({top: (y + 50) + "px", left: x + "px", border: "20px solid black"})
  //puff.setStyle({height: viewport.y + "px", backgroundColor: "white"})
  showPuff()
}

function hidePuff() {
  Effect.Fade("puff", {duration: fadeTime})
}

function showPuff() {
  Effect.Appear("puff", {duration: fadeTime})
}

Event.observe(window, "load", init)