var files;
var index=0;

var inSlideshow=false,slideshowReady=false;

function ImageDetails(name,portrait,fnumber,exposure,iso,date,title,caption)
{
  this.index=index++;
  this.name=name;
  this.portrait=portrait;
  this.fnumber=fnumber;
  this.exposure=exposure;
  this.iso=iso;
  this.date=date;
  this.title=title;
  this.caption=caption;
  
  this.image=null;
}

ImageDetails.prototype.startLoading=function(after)
{
  if(!this.image)
  {
    this.image=new Image();
    var that=this;

    this.image.onload=function()
    {
      that.isLoaded=true;
      after();
    }
    this.image.src="pics/img-"+this.name+".jpg";
  }
  else
  {
    after();
  }
} 

function updateOpacity(pic)
{
  if(pic.opacityIndex<10)
  {
    pic.style.opacity='0.'+pic.opacityIndex;
    pic.style.filter='alpha(opacity='+pic.opacityIndex+'0)';
  }
  else
  {
    pic.style.opacity='1';
    pic.style.filter='';
  }
}

function setText(id,text)
{
  var el=document.getElementById(id);
  while(el.firstChild)
  {
    el.removeChild(el.firstChild);
  }
  el.appendChild(document.createTextNode(text));
}

function startLoading(file)
{
  var loading=document.getElementById('loading');
  loading.style.visibility='visible';
  var next=document.getElementById('next');
  next.enabled=false;
  next.style.color='#666';
  
  file.startLoading(function()
  {
    next.enabled=true;
    next.style.color='';
    loading.style.visibility='hidden';
    if(inSlideshow && slideshowReady)
    {
      doNext();
    }
  });
  
}

function doNext()
{
  var backAtStart=false;
  if(currentImage==null)
  {
    showImage(files[0],function() {});
  }
  else if(currentImage.index+1 < files.length)
  {    
    showImage(files[currentImage.index+1],function() {});
  }
  else
  {
    startLoading(files[0],function(){});
    showDisplay('intro');
    backAtStart=true;
  }
  
  if(inSlideshow)
  {    
    if(backAtStart)
    {
      inSlideshow=false;
      var slideshow=document.getElementById('slideshow');
      slideshow.removeChild(slideshow.firstChild);
      slideshow.appendChild(document.createTextNode("Start slideshow"));
    }
    else
    {
      slideshowReady=false;
      setTimeout(function()
      {      
        if(!inSlideshow) return;
        if(document.getElementById('next').enabled)
        {
          doNext();
        }
        else
        {
          slideshowReady=true;
        }
      },5000);
    }
  }
}



var currentDisplayType;
var currentImage;

function showImage(file,after)
{
  // Load next image too
  if(file.index+1 < files.length)
  {    
    startLoading(files[file.index+1],function(){});
  }

  var middle=function()
  {
    currentImage=file;
    
    document.getElementById('image').className=
      file.portrait?'portrait':'landscape';
    var pic=document.getElementById('pic');
    while(pic.firstChild) pic.removeChild(pic.firstChild);
    var img=document.createElement('img');
    img.alt=file.title;
    img.src="pics/img-"+file.name+".jpg";
  
    setText('title',file.title);
    setText('caption',file.caption);
  
    setText('fnumber',file.fnumber);
    setText('exposure',file.exposure);
    setText('iso',file.iso);
    setText('date',file.date);
  
    pic.appendChild(img); 
    pic.image=img;
    fadeIn('image',after);
    var link=document.getElementById('link');
    link.style.visibility="visible";
    link.href="./?image="+file.name;
    var previous=document.getElementById('previous');
    if(file.index==0)
      previous.href="./";
    else
      previous.href="./?image="+files[file.index-1].name;
  };

  fadeOut(currentDisplayType,middle);
}

function showDisplay(id)
{
  var middle=function()
  {
    currentImage=null;
    currentDisplayType=id;
    fadeIn(currentDisplayType,function(){});
    var link=document.getElementById('link');
    link.style.visibility="hidden";
    var previous=document.getElementById('previous');
    previous.href="./?image="+files[files.length-1].name;
  }
  fadeOut(currentDisplayType,middle);
}

function fadeOut(id,after,notfirst)
{
  var el=document.getElementById(id);
  if(!notfirst)
  {
    el.opacityIndex=10;
  }  
  el.opacityIndex--;
  if(el.opacityIndex==0)
  {
    el.style.display='none';
    after();
  }
  else
  {
    updateOpacity(el);
    setTimeout(function()
    {
      fadeOut(id,after,true);
    },20);  
  }
}

function fadeIn(id,after,notfirst)
{
  currentDisplayType=id;
  var el=document.getElementById(id);
  if(!notfirst)
  {
    el.opacityIndex=0;
    updateOpacity(el);
    el.style.display='block';
  }  
  el.opacityIndex++;
  updateOpacity(el);
  if(el.opacityIndex>=10) 
  {
    after();
  }
  else
  {
    setTimeout(function()
    {
      fadeIn(id,after,true);
    },20);  
  }
}

function init()
{
  var parameters=/^\?image=([0-9]+)$/;
  var result=parameters.exec(location.search);
  var done=false;
  if(result)
  {
    for(var i=0;i<files.length;i++)
    {
      if(files[i].name==result[1])
      {
        files[i].startLoading(function()
        {
          showImage(files[i],function() {});
        });
        done=true;
        document.getElementById('mainloading').style.display='block';
        currentDisplayType='mainloading';
        break;
      }
    }    
  }
  if(!done)
  {
    document.getElementById('intro').style.display='block';
    currentDisplayType='intro';
    files[0].startLoading(function(){});
  }
  
  var next=document.getElementById('next');
  next.enabled=true;
  next.onclick=function()
  {
    if(next.enabled)
    {
      doNext();
    }
    return false;
  };
  
  var slideshow=document.getElementById('slideshow');
  slideshow.style.display='inline';
  slideshow.onclick=function()
  {
    if(!inSlideshow)
    {
      inSlideshow=true;
      slideshowReady=true;
      slideshow.removeChild(slideshow.firstChild);
      slideshow.appendChild(document.createTextNode("Stop slideshow"));
      if(next.enabled)
      {
        doNext();
      }
    }
    else
    {
      inSlideshow=false;
      slideshowReady=false;
      slideshow.removeChild(slideshow.firstChild);
      slideshow.appendChild(document.createTextNode("Start slideshow"));
    }
  }
}