my_id     = 'http://picasaweb.google.com/data/feed/api/user/tbd.plugins/albumid/5241526735361689121?kind=photo&alt=json&callback={callback}'

json = { callbacks: {} }
var images = []
var pos = 0
var pos_max = 0

function addGallery()
{
  var content = document.getElementById('gallery')
  for (i in images) {
    var img_link = document.createElement('a')
    img_link.className = 'thickbox'
    img_link.url = images[i].url
    img_link.title = images[i].title
    img_link.pos = images[i].pos
    img_link.onclick= function() {
      showImage(images[this.pos])
      return false
    }

    var img = document.createElement('img')
    img.setAttribute('src',    images[i].thumb.url)
    img.setAttribute('width',  images[i].thumb.width)
    img.setAttribute('height', images[i].thumb.height)

    img_link.appendChild(img)
    content.appendChild(img_link)
  }
}

function parseGallery(json_obj) {
  var feed = json_obj.feed
  var content = document.getElementById('gallery')
  clearContent()
  for (i in feed.entry) {
    var entry = feed.entry[i]
    var item = new Object

    item.url = entry.media$group.media$content[0].url+'?imgmax=640'
    item.title = entry.media$group.media$description.$t
    item.thumb = entry.media$group.media$thumbnail[0]
    item.pos = parseFloat(i)

    images.push(item)
  }

  pos_max = feed.entry.length-1
  pos = pos_max
  addGallery()
  showImage(images[pos_max])
}

function showImage(obj)
{
  pos = obj.pos
  myview = document.getElementById('preview')
  var img = document.createElement('img')
  img.setAttribute('src', obj.url)
  while (myview.hasChildNodes()) {
    myview.removeChild(myview.firstChild)
  }

  var caption = document.createElement('div')
  caption.innerHTML = obj.title
  myview.appendChild(img)
  myview.appendChild(caption)
}

function load_json(url, callback) {
  var script = document.getElementById('jsondata')
  var headID = document.getElementsByTagName("head")[0]
  if (script) {
    headID.removeChild(script)
  }
  var script = document.createElement('script')
  script.id = 'jsondata'
  script.type = 'text/javascript'
  script.src = url.replace(/{callback}/, callback)
  headID.appendChild(script)
}

function clearContent() {
  var content = document.getElementById('gallery')
  while (content.hasChildNodes()) {
    content.removeChild(content.firstChild)
  }
}

function init_gallery() {
  load_json(my_id, 'parseGallery')
}

function event_handler(e) {
  var evt = e || window.event
  switch(e.keyCode) {
    case 39:
    case 38: 
      if (pos < pos_max)
      {
        pos = pos + 1   
      }
      break
    case 37:
    case 40: 
      if (pos > 0)
      {
        pos = pos - 1 
      }
      break
  }
  showImage(images[pos])
}

window.onload = init_gallery
window.onkeypress = event_handler