function onclickImg( aImg ){
  var imgElem = Event.element( aImg );
  if( ! imgElem._loaded ){
    imgElem._loaded = true;
    var src = imgElem.src.replace( 'thumb/', '' );
    new GSImageLoader( src, onloadImg, imgElem.id );
  }
}

function onloadImg( aImage, aId ){

  var frame = document.createElement( 'div' );
  frame.id = 'imageFrame' + aId;

  Element.setStyle( frame, { 
    top: Position.cumulativeOffset( $( aId ) )[1] + 'px', 
    width: aImage.width + 30 + 'px', 
    height: aImage.height + 30 + 'px', 
    zIndex: aId.replace( 'img', '' ) + 1, 
    display: 'none' 
  } );
  Element.addClassName( frame, 'imageFrame' );
  document.body.appendChild( frame );

  var imgElem = document.createElement( 'img' );
  imgElem.width = aImage.width;
  imgElem.height = aImage.height;
  imgElem.src = aImage.src;
  frame.appendChild( imgElem );

  new Effect.Appear( frame, { duration: 0.5, afterFinish: function( aEffect ){
    Event.observe( aEffect.element, 'click', onclickFrame );
  } } );
}

function onclickFrame( aEvent ){
  var elem = Event.element( aEvent );
  if( elem.tagName.toLowerCase() == 'img' ){ elem = elem.parentNode; }
  var func = function( aEffect ){
    var elem = aEffect.element;
    $( elem.id.replace( 'imageFrame', '' ) )._loaded = false;
    Element.remove( elem );
  }
  new Effect.Fade( elem, { duration: 0.5, afterFinish: func } );
}

function init(){
  var index = 0;
  $A( $('left').getElementsByTagName('img') ).each( function(img){
    if( ! Element.hasClassName( img, 'nolink' ) ){
      Event.observe( img, 'click', onclickImg );
      img.id = 'img' + index;
    }
    index++;
  } );
}

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