function init() {
  
  Event.observe($('previousPhoto'), 'click', handlePhotoNavClick);
  Event.observe($('nextPhoto'), 'click', handlePhotoNavClick);
  Event.observe($('photo'), 'click', handlePhotoNavClick);
  
  Effect.Appear($('content'), {duration: 0.5})
}


function handlePhotoNavClick(event) {

	Event.stop(event);
	var link = Event.findElement(event, 'a');

	if (window.MSIE) {
	  $('photoBox').style.background = 'none';
	}
	
	Effect.Fade($('photoBox'), {
		duration: 0.5,
		afterFinish: function () {
			new Ajax.Request(link.href, {
			    method: 'get',
				onSuccess: function(transport) {
				  changePhoto(transport)
				}
			});
		}
	});
}

function changePhoto(transport) {

	var image = $$('#photoBox img').first();
    image.src = transport.headerJSON.src;
    image.alt = transport.headerJSON.src.substring(transport.headerJSON.src.lastIndexOf('/'), transport.headerJSON.src.lastIndexOf('.'));
    
    var nextPhotoLink = $$('#nextPhoto a').first();
    nextPhotoLink.href = nextPhotoLink.href.substring(0, nextPhotoLink.href.lastIndexOf('/')+1) + transport.headerJSON.nextPhoto;
    image.parentNode.href = nextPhotoLink.href.substring(0, nextPhotoLink.href.lastIndexOf('/')+1) + transport.headerJSON.nextPhoto;
    
    var previousPhotoLink = $$('#previousPhoto a').first();
    previousPhotoLink.href = previousPhotoLink.href.substring(0, previousPhotoLink.href.lastIndexOf('/')+1) + transport.headerJSON.previousPhoto;

    $('photoBox').removeClassName('horizontal');
    $('photoBox').removeClassName('vertical');
    $('photoBox').addClassName(transport.headerJSON.orientation);
    
    Event.observe(image, 'load', function (event) {
        Effect.Appear($('photoBox'), {duration: 0.5})
    });

}

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