var currentPhoto = 0;
var currentContainer = 1;

var play=true;
var ready = [false, false];
var playDelay = 5;
var eventID;

function moveToNext()
{
    var nextContainer= (currentContainer==1)?2:1;
    
    if(ready[currentContainer-1])
    {
        ready[currentContainer-1]=false;
        $('imageContainer'+nextContainer).hide();
        $('imageContainer'+currentContainer).setStyle({zIndex: '0'});
        $('imageContainer'+nextContainer).setStyle({zIndex: '1'});
        new Effect.Appear('imageContainer'+nextContainer, {queue: 'end', duration: 1.0});
        updateImage.delay(1.0) ;
        updateTitle();
    }
    
    eventID = moveToNext.delay(playDelay);
}

function updateImage()
{
    currentPhoto = (currentPhoto+1)%selectedPhotos.length;
    var nextContainer= (currentContainer==1)?2:1;
    
    $('imageContainer'+currentContainer).setStyle({zIndex: '0'});
    $('imageContainer'+nextContainer).setStyle({zIndex: '1'});
    
    
    var width = selectedPhotos[currentPhoto][0];
    var height = selectedPhotos[currentPhoto][1];
    
    if(width<500)
    {
        var fillingwidth = (500-width)/2+1;
        $('img'+currentContainer).setStyle({'marginLeft': fillingwidth+'px'});
        
    }
    $('img'+currentContainer).setStyle({'width': width+'px'});
    $('imageContainer'+currentContainer).innerHTML = "<a href='bekijk/"+selectedPhotos[currentPhoto][4]+"'><img src='"+selectedPhotos[currentPhoto][2]+"' onload='setReady("+currentContainer+");' id='img"+currentContainer+"'/></a>";
    
    //    
        //$('fillingleft').setStyle({width: '100'});
    //    $('fillingright').setStyle('width':fillingwidth);
    
    currentContainer = nextContainer;
    
    //$('controls').innerHTML += "Container "+currentContainer+": "+currentPhoto+" ";
}

function setReady(nr)
{
    ready[nr-1]=true;
}



Event.observe(window, 'load', function() {
    updateTitle();
    
    $('imageContainer1').setStyle({zIndex:'1'});
    $('imageContainer2').setStyle({zIndex:'0'});
    $('imageContainer2').hide();
    $('imageContainer1').innerHTML = "<a href='bekijk/"+selectedPhotos[currentPhoto][4]+"'><img id='img1' src='"+selectedPhotos[currentPhoto][2]+"' onload='setReady(1);'/></a>";
    currentPhoto+=1;
    $('imageContainer2').innerHTML = "<a href='bekijk/"+selectedPhotos[currentPhoto][4]+"'><img id='img2' src='"+selectedPhotos[currentPhoto][2]+"' onload='setReady(2);'/></a>";
    eventID = moveToNext.delay(playDelay);
    //$('photoContainer2').hide();
});

function updateTitle()
{
    $("titleInside").innerHTML = "<p>"+selectedPhotos[currentPhoto][3]+"&nbsp;</p>";
    $("titleBackground").innerHTML = "<p>"+selectedPhotos[currentPhoto][3]+"&nbsp;</p>";
    $("descriptionInside").innerHTML = "<p><a href='bekijk/"+selectedPhotos[currentPhoto][4]+"'>Lees het bijbehorende artikel</a></p>";
}