function init() {
  listen_for_events()
  $('current-gallery').insert('<img src="' + $('big-picture').src + '" id="loading-picture">')
	new PeriodicalExecuter(auto_play, 4)
}

function auto_play(executer) {
 if ($('visuals').hasClassName('stop-autoplay')) {
   executer.stop()
 } else {
   current = $$('#thumbnails .selected').first()
   next = (current.next() == null) ? $$('#thumbnails li').first() : current.next()
   image_for_link(next.select('a').first())
 }
}

function listen_for_events() {
 $$('#galleries>ul>li').each(function(g){
   g.observe('click', swap_gallery)
 })
  $$('#thumbnails a').each(function(i){
    i.observe('click', swap_image)
  })
}

function swap_gallery(event) {
//  $('visuals').addClassName('stop-autoplay')
  if (not_animating()) {
    $('visuals').addClassName('animating')
    $('thumbnails').select(".selected").each(function(i){
      i.removeClassName('selected')
    })
    old_html = $('thumbnails').innerHTML
    $('thumbnails').innerHTML = this.innerHTML
    this.up().insert("<li>"+ old_html + "</li>")
		new Effect.Morph(this, {
			style: 'height:0',
			duration: 0.5,
			afterFinish: function(effect) {
				effect.element.remove()
				$('visuals').removeClassName('animating')
				image_for_link($$('#thumbnails a').first())
			}
		})
		listen_for_events()
  }
  event.stop()
}

function swap_image(event) {
  $('visuals').addClassName('stop-autoplay')
  if (not_animating() && (this.href != $('big-picture').src)) {
    image_for_link(this)
  }
  event.stop()
}

function image_for_link(element) {
  $$('#thumbnails li.selected').each(function(i){
    i.removeClassName('selected')
  })
	element.up().addClassName('selected')
  preload_image_for(element.href)

}

function preload_image_for(uri) {
  preload = new Image
  preload.onload = function() { 
    $('loading-picture').setStyle("opacity:0")
    $('loading-picture').src = uri
    $('visuals').addClassName('animating')
    new Effect.Morph('loading-picture', {
      style: "opacity:1",
      duration: 1,
      afterFinish: function() {
        $('big-picture').src = $('loading-picture').src
        $('loading-picture').setStyle("opacity:0")
        $('visuals').removeClassName('animating')
      }
    })
  }
  preload.src = uri
}

function not_animating() {
  return !($('visuals').hasClassName('animating'))
}

document.observe('dom:loaded', init)