document.observe("dom:loaded",slideshowstartup);

var posslinks = null;
var overlaydisplayed = false;
var currentlink = null;
var playUpdater = null;
var isloading = false;

function slideshowstartup()
{
  loaderimage = new Image();
  loaderimage.src = 'images/ajax-loader.gif'; 
  posslinks = $$('a.ssl');
  posslinks.each(registeronclick)
  Event.observe($('previous-link'),'click', linkPrev);
  Event.observe($('next-link'),'click', linkNext);
  Event.observe($('close-link'),'click', linkClose);
  Event.observe($('play-link'),'click', playPause);
}

function playPause()
{
if(!playUpdater)
	{
  	playUpdater = new PeriodicalExecuter(nextPhoto, 3);
  	$('play-link').down().src = 'images/pause.png';
  	}
else
	{
	playUpdater.stop();
	playUpdater = null;
	$('play-link').down().src = 'images/play.png';
	}
}

function linkClose()
{
  if(playUpdater)playPause()
  Effect.Fade('slideshowwrapper', { duration: 1,queue: 'end' });
  setTimeout(function(){
  $('photoholder').setStyle({height:'100px',width:'100px'});
  $('photo').setStyle({height:'90px',width:'90px'});
  $('photo').src = 'images/ajax-loader.gif';
  overlaydisplayed = false;
  },1000);
}

function linkPrev()
{
  if(playUpdater)playPause()
  nextlink = currentlink.previous("a.ssl");
  if(!nextlink)nextlink = currentlink.up().select("a.ssl").last();
  loadAndDisplay(nextlink);
}

function nextPhoto()
{
  if(isloading)return; //dont advance if we are still loading
  nextlink = currentlink.next("a.ssl");
  if(!nextlink)nextlink = currentlink.up().down("a.ssl");
  loadAndDisplay(nextlink);  
}

function linkNext()
{
  if(playUpdater)playPause()
  nextlink = currentlink.next("a.ssl");
  if(!nextlink)nextlink = currentlink.up().down("a.ssl");
  loadAndDisplay(nextlink);
}

function registeronclick(linkelement)
{
 Event.observe(linkelement,'click', ochandler); 
}

function ochandler(evt)
{
  //wtf this is giving me the image element in child
  child = Event.element(evt);
  Event.stop(evt);
  if(!overlaydisplayed)displayoverlay();
  currentlink = child.parentNode;
  loadAndDisplay(currentlink)  
}

function loadAndDisplay(nodetodisplay)
{
preimage = new Image();  
preimage.onload = function(){
  							isloading = false;  
  							Effect.Fade('photo', { duration: 0.3,from: 1, to: 0.01,queue: 'end' });
  							//sleep(2)
    						resizeStuff(preimage);
							//$('photo').setOpacity(0);    						  
							Effect.Appear('photo', { duration: 0.3, from: 0.01, to: 1,queue: 'end'  });
							
							//preload next image now this one is done
							
							nextlink = currentlink.next("a.ssl");
  							if(!nextlink)nextlink = currentlink.up().down("a.ssl");
							
							preload = new Image();
							preload.src = nextlink.getAttribute('href');
							
							setTimeout(function(){
							  						$('photo').setAttribute('src',nodetodisplay.getAttribute('href'));
							  						totalelements = posslinks.length;
							  						currentelement = nodetodisplay.previousSiblings().length - 3; //dont ask
													$('imgnumber').update(currentelement + ' of ' + totalelements);	  
												 },300)   						  
							}
isloading = true;  
preimage.src = nodetodisplay.getAttribute('href'); 
currentlink = nodetodisplay; 
}

function displayoverlay()
{
  wrapperdiv = $('slideshowwrapper');
  wrapperdiv.setStyle({display:'block'});
  $('overlay').setOpacity(0.7);
  scroll(0,0);
  overlaydisplayed = true;
}

function resizeStuff(image)
{ //this function does, erm, stuff
windowheight = document.viewport.getDimensions().height - 75;
windowwidth = document.viewport.getDimensions().width - 100;

imageheight = image.height
imagewidth = image.width

widthscale = windowwidth/imagewidth;
heightscale = windowheight/imageheight;

scale = Math.min(widthscale,heightscale);

//at some point fix smaller images being scaled up to screen size

newwidth = imagewidth * scale;
newheight = imageheight * scale;

$('photoholder').morph({height:newheight + 'px',width:newwidth +'px'},{duration:0.3});
$('photo').morph({height:newheight + 'px',width:newwidth +'px'},{duration:0.3});

}