var fotoMax;				// your number of photo's
var fotoPath = 'images/'; 		// path to your photo-files (can be relative)
var pathSystem = 'system/';		// path to system-files (icons etc.)
var thumbPath = 'thumbnails/';    	// path to your thumbnails (can be relative)
var hiresPath = 'images_hires'	// path to your hires photo-files
var XMLfile = 'afbeeldingen.xml'  	// xml-file with image-information
var duurFade = 200;         		// in milliseconds
var duurSlide = 4000;      		// in milliseconds
var slideSizeH = 800;        		// height of show area in pixels
var slideSizeW = 1100;        	// width of show area in pixels
var thumbnailSizeW = 200;
var thumbnailTop = 110;
var thumbnailScrollW = 13;
var thumbnailScrollY = 0;
var countdownH = 100;
var xmlFotos;
var xmlRubriek;
var arrayFotos = new Array();
var trustedUser = false;
var isIE;
var isSafari;
var refDownload;
var siteInfo;
var downloadFoto;
var winDownload = null;

var fotoNr = 1;
var fotoOpacity = 100;
var fotoFade = 10;
var idInterval;
var idLauncheFade;
var idShowProgress;
var slideZichtbaar;
var slideOnzichtbaar;
var thumbnails;
var infobox;
var controls;
var slideshowPaused = true;
var controls_fade = 3;
var controls_opacity = 60;
var imgHeight;
var imgWidth;
var imgPositionX;
var imgPositionY;
var divBackground;
var imagesLoaded = 0;
var countdown;
var countdownbar;
var countdownTime;
var countdownInterval = 200;
var idCountdown;
var countdownHh;
var countdownDelta;

var _startX = 0;
var _startY = 0;
var _offsetX = 0;
var _offsetY = 0;
var _dragElement;
var _scrollYmin;
var _scrollYMax;
var _scrollRatio;
var _thumbdivHeight;
var _clipTop = 0;
var _mouseY = 0;
var _mouseX = 0;



function $(elementId)
{
  return document.getElementById(elementId);
}

function onKeyDown(e) {
var code;

	if (!e) 
	  var e = window.event;
	if (e.keyCode) 
	  code = e.keyCode;
	else if (e.which) 
	  code = e.which;

	if (code == 37)
	  slideBack();
	if (code == 39)
	  slideForward();
	if (code == 32)
	  pauseSlideshow();
}

function pauseSlideshow() {

  if (slideshowPaused) {
  
    //
    // Restart timer again
    slideshowPaused = false;
    idLauncheFade = setTimeout(launchFade, 50);
    
    $('button_pause').src = pathSystem + 'slideshow_pause.gif';
    
  } else {
  
    //
    // Cancel timer
    clearTimeout(idLauncheFade);
    cancelCountdown();
    slideshowPaused = true;

    $('button_pause').src = pathSystem + 'slideshow_play.gif';
    
  }

}

function setSpeedImage() {
  
  var speed = parseInt(duurSlide / 1000);
  speed = (speed > 8 ? 8 : speed);

  $('button_speed').src = pathSystem + 'slideshow_speed' + speed + '.gif';

}

function increaseSpeed() {
  
  if (duurSlide > 1000) {
    duurSlide = duurSlide - 1000;
    setSpeedImage();
  }
}

function decreaseSpeed() {

  if (duurSlide < 10000) {
    duurSlide = duurSlide + 1000;
    setSpeedImage();
  }
}

function slideForward() {
  
  clearInterval(idInterval);
  clearTimeout(idLauncheFade);

  slideshowPaused = false;
  pauseSlideshow();
  
  fotoOpacity = 30;
  launchFade();

}

function slideBack() {

  clearInterval(idInterval);
  clearTimeout(idLauncheFade);
  
  fotoNr = fotoNr - 3;
  if (fotoNr < 1) {
    fotoNr = fotoMax + fotoNr;
  }
  setNextFoto();
  
  slideshowPaused = false;
  pauseSlideshow();
  
  fotoOpacity = 30;
  launchFade();

}
 
function thumbnailClick(fotonummer) {

  clearInterval(idInterval);
  clearTimeout(idLauncheFade);
  
  fotoNr = fotonummer;
  setNextFoto();
  
  fotoOpacity = 30;
  setTimeout(launchFade, 250);

}

function cancelCountdown()
{
  clearInterval(idCountdown);
  countdown.style.display = 'none';
}

function countdownDo()
{
  countdownTime += countdownInterval;
  countdownHh -= countdownDelta;
  if (countdownHh < 0)
    countdownHh = 0;
  countdownbar.style.height = parseInt(countdownHh);
  countdownbar.style.top = countdownH - parseInt(countdownHh);
}

function initCountdown()
{
  clearInterval(idCountdown);

  countdownbar.style.height = countdownH;
  countdownbar.style.top = 1;
  countdown.style.display = '';

  countdownDelta = countdownH / (duurSlide / countdownInterval);
  countdownHh = countdownH;

  countdownTime = 0;
  idCountdown = setInterval(countdownDo, countdownInterval);
}

function reallyDownloadImage()
{
  if (isIE)
  {
    //
    // Show window to right-click and save
    showDownloadForm();

  } else
  {
    document.location.href = 'download.php?thisimage=' + arrayFotos[downloadFoto][2];
  }

}

function downloadHiResImage(foto) {

  slideshowPaused = false;  
  pauseSlideshow();

  downloadFoto = foto;

  if (!trustedUser)
    askLogin(true);
  else
    reallyDownloadImage();
}

function afterDownload()
{
  $('saveHires').style.display = 'none';
  $('saveHires').style.zIndex = 1;
}

function showDownloadForm()
{
  var el = $('downloadThisImage');
  el.innerHTML = '<a href="' + hiresPath + '/' + arrayFotos[downloadFoto][2] + '" target="_blank">' + arrayFotos[downloadFoto][2] + '</a>';

  el = $('saveHires');
  el.style.top = parseInt(controls.style.top) - 186;
  el.style.left = parseInt(controls.style.left);
  setOpacity(el, 90);
  el.style.display = '';
  el.style.zIndex = 2001;

  el.focus();
  
}

function askLogin(hideIncorrect)
{
  if (hideIncorrect)
    $('inputincorrect').innerHTML = '&nbsp;';
  
  var el = $('inputPrompt');
  el.style.top = parseInt(controls.style.top) - 124;
  el.style.left = parseInt(controls.style.left);
  setOpacity(el, 90);
  el.style.zIndex = 2000;
  el.style.display = '';

  el = $('inputtyped');
  el.focus();
  el.select();
}

function afterInput(clickedOK)
{
var i;
var check = 1;

  // Hide prompt-window
  $('inputPrompt').style.display = 'none';
  $('inputPrompt').style.zIndex = '1';

  if (clickedOK) 
  {
    var typed = $('inputtyped').value;

    // check
    for (i = 0; i < typed.length; i++) {
      check = check * typed.charCodeAt(i);
    }
  
    trustedUser = (check == 158316725660472);

    if (!trustedUser)
    {
      if ($('inputincorrect').innerHTML == '&nbsp;') {
    	  $('inputincorrect').innerHTML = 'Password incorrect.';
        askLogin(false);
	}
    }
    else {
      reallyDownloadImage();
    }
  }
}

function inputKeyPressed(e) {
var code;

	if (!e) 
	  var e = window.event;
	if (e.keyCode) 
	  code = e.keyCode;
	else if (e.which) 
	  code = e.which;

	if ( (code == 10) || (code == 13) )
	  afterInput(true);
      else if (code == 27)
        afterInput(false);
}

function setOpacity(obj, opac) {
var opacPerc;

  opacPerc = opac / 100;
  
  obj.style.opacity = opacPerc;
  obj.style.MozOpacity = opacPerc;
  obj.style.khtmlOpacity = opacPerc;
  obj.style.filter = 'alpha(opacity=' + opac + ')';

}

function leadingZero(number)
{
  return ((String(number).length == 1) ? ('0' + number) : number);
}

function _debug(str) {
  
  var t = new Date();
  $('debug').innerHTML = '<p>|' + leadingZero(t.getHours()) + ':' + leadingZero(t.getMinutes()) + ':' + leadingZero(t.getSeconds()) + '| ' + str + '</p>';
}


function setSlideshowInfo() {
var fotoHuidig;
var info;

  fotoHuidig = ((fotoNr - 1) < 1 ? (fotoMax + fotoNr - 1) : (fotoNr - 1));
  info = $('slide_info')  

  info.innerHTML = '<table width=100%><tr><td class="info" width="90%"><span class="info">' + arrayFotos[fotoHuidig][5] + '&nbsp;&nbsp;</span>' +
			 '&nbsp;&nbsp;<b>' + arrayFotos[fotoHuidig][1] + '</b></td>' +
			 '<td class="info" align="right" width="10%">' + arrayFotos[fotoHuidig][0] + '</td></tr></table>';

  refDownload.href = 'javascript: downloadHiResImage(' + fotoHuidig + ')';
  
}

function setControlPosition() 
{
  //
  // Position of photo is calculated before (in setNextFoto())
  infobox.style.top = imgPositionY + imgHeight + 12;
  infobox.style.left = imgPositionX + 12;
  infobox.style.width = imgWidth - 20;
  if (imgWidth < 400) {
    infobox.style.width = parseInt(slideSizeW * 0.7);
    infobox.style.left = thumbnailSizeW + parseInt(slideSizeW * 0.15) + 12;
  }

  controls.style.top = imgPositionY + imgHeight - 33;
  controls.style.left = imgPositionX + 3;
  
  countdown.style.top = imgPositionY + imgHeight - countdownH;
  countdown.style.left = imgPositionX - 8;
}

function setNextFoto() 
{
var html;
var deltaX;
var deltaY;
var ratioX; var ratioY; var ratio;
var H; var W;
var imgEl;

  //
  // Adjust size of image when image is bigger than available window space
  imgHeight = parseInt(arrayFotos[fotoNr][4]);
  imgWidth = parseInt(arrayFotos[fotoNr][3]);
  
  ratioY = slideSizeH / imgHeight;
  ratioX = slideSizeW / imgWidth;
  ratio = (ratioX < ratioY) ? ratioX : ratioY;
  ratio = ratio * 0.92;
  if (ratio > 1)
    ratio = 1;
  H = parseInt(imgHeight * ratio);
  W = parseInt(imgWidth * ratio);

  //
  // Set image in the middle, vertically 
  deltaY = parseInt((slideSizeH - H) / 2);
  deltaX = parseInt((slideSizeW - W) / 2);

  imgPositionX = deltaX;
  imgPositionY = deltaY;
  imgHeight = H;
  imgWidth = W;

  html = '<div style="z-index: 30; position: absolute; ' +
	   'top: ' + imgPositionY + '; left: ' + imgPositionX + '"> ' +
	   '<img class="slideshow" id="img' + fotoNr + 
	   '" src="' + fotoPath + arrayFotos[fotoNr][0] + '" ' +
	   'height=' + H + ' width=' + W + '></div>';

  html = html +
	   '<div class="shadow" id="shadow_img' + fotoNr + 
	   '" style="z-index: 6; position: absolute; ' +
	   'height: ' + H + '; width: ' + W + '; ' +
	   'top: ' + (imgPositionY + 6) + '; ' +
	   'left: ' + (imgPositionX + 6) + 
   	   ';"></div>';

  slideOnzichtbaar.innerHTML = html;
  imgPositionX = imgPositionX + thumbnailSizeW;

  fotoNr++;

  if (fotoNr > fotoMax) {
    fotoNr = 1;
  }

}

function doFade() {
var slideSwap;

  fotoOpacity = fotoOpacity - fotoFade;
  if (fotoOpacity >= 0) {
    
    setOpacity(slideZichtbaar, fotoOpacity);
    
    if ((controls_fade == 0) && (!slideshowPaused)) {
      controls_opacity = controls_opacity - parseInt(60 / (100 / fotoFade));
      setOpacity(controls, controls_opacity);
    }

    return;
  
  } else {    

    clearInterval(idInterval);

    setOpacity(slideZichtbaar, 0);
    fotoOpacity = 100;

    if (controls_fade == 0)
      setOpacity(controls, 0);

    setControlPosition();
    
    slideOnzichtbaar.style.zIndex = 51;
    slideZichtbaar.style.zIndex = 50;
    
    slideSwap = slideOnzichtbaar;
    slideOnzichtbaar = slideZichtbaar;
    slideZichtbaar = slideSwap;
    
    if (slideshowPaused == false) {
      idLauncheFade = setTimeout(launchFade, duurSlide);
      initCountdown();
    }

    setSlideshowInfo();
    
    setNextFoto();
    
  }
  
}

function launchFade() {

  setOpacity(slideOnzichtbaar, 100);
  
  controls_fade = (controls_fade > 0 ? (controls_fade - 1) : 0);
    
  idInterval = setInterval(doFade, (duurFade / (100 / fotoFade)));

}

function scrollwheelTurn(delta) 
{
var Y;

  var scrollOuter = $('scrollOuter');
  var scrollInner = $('scrollInner');
  var barY = parseInt(scrollInner.style.top);
  
  delta = -1 * delta;
  
  Y = parseInt(scrollInner.style.top);
  Y = Y + (delta * 0.02 * parseInt(scrollOuter.style.height));
 
  if (Y < _scrollYmin)
    Y = _scrollYmin;
  if (Y > _scrollYmax)
    Y = _scrollYmax;
  
  scrollInner.style.top = Y + 'px';
    
  var vlak = (Y - thumbnailScrollY - (isIE ? 2 : 2)) * _scrollRatio;
  thumbnails.style.top = thumbnailTop - vlak;
  thumbnails.style.clip = 'rect(' + vlak + 'px auto ' + (vlak + _thumbdivHeight) + 'px 0px)';
  _clipTop = vlak;
}

function scrollbarClick(e) 
{
var Y;

  var scrollOuter = $('scrollOuter');
  var scrollInner = $('scrollInner');
  var barY = parseInt(scrollInner.style.top);
  
  if (!e)
    var e = window.event;
    
  if ((e.clientY - thumbnailTop) < barY) {
    Y = barY - parseInt(scrollInner.style.height);
  } else {
    Y = barY + parseInt(scrollInner.style.height);
  }
  if (Y < _scrollYmin)
    Y = _scrollYmin;
  if (Y > _scrollYmax)
    Y = _scrollYmax;
  
  scrollInner.style.top = Y + 'px';
    
  var vlak = (Y - thumbnailScrollY - (isIE ? 2 : 2)) * _scrollRatio;
  thumbnails.style.top = thumbnailTop - vlak;
  thumbnails.style.clip = 'rect(' + vlak + 'px auto ' + (vlak + _thumbdivHeight) + 'px 0px)';
  _clipTop = vlak;
}


function OnMouseDown(e) {

  if (e == null)
    var e = window.event;
    
  var target = (e.target != null) ? e.target : e.srcElement;
  
  if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'scrollInner') {
    
    _startX = e.clientX;
    _startY = e.clientY;
    
    _offsetX = parseInt(target.style.left);
    _offsetY = parseInt(target.style.top);
    
    _dragElement = target;
    document.onmousemove = OnMouseMoveDrag;
    
    document.body.focus();
    document.onselectstart = function () { return false; };
    target.ondragstart = function() { return false; };
    
    return false;
  }
}

function OnMouseMoveDrag(e) {
  
  if (e == null)
    var e = window.event;
  
  var Y = _offsetY + e.clientY - _startY;
  
  if ((Y >= _scrollYmin) && (Y <= _scrollYmax)) {
  
    _dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
    
    var vlak = Y * _scrollRatio - (isIE ? 2 : 2);
    thumbnails.style.top = thumbnailTop - vlak;
    thumbnails.style.clip = 'rect(' + vlak + 'px auto ' + (vlak + _thumbdivHeight) + 'px 0px)';
    _clipTop = vlak;

  }

}

function OnMouseUp(e) {

  if (_dragElement != null) {
    
    document.onmousemove = OnMouseMove;
    document.onselectstart = null;
    _dragElement.ondragstart = null;
    
    _dragElement = null;
  
  }
}


function OnMouseMove(e) 
{
  
  if (e == null)
    var e = window.event;
  
  if ( (_mouseY == e.clientY) && (_mouseX == e.clientX) )
    return;

  if (controls_fade == 0) {
  
    setOpacity(controls, 60);
    controls_opacity = 60;
    
  }
  
  _mouseY = e.clientY;
  _mouseX = e.clientX;

  controls_fade = 2;

}

function onScrollwheel(e){

  var delta = 0;

  if (!e) 
    e = window.event;

  if (e.wheelDelta) {

    delta = e.wheelDelta/120;

    if (window.opera) 
      delta = -delta;

  } else if (e.detail)
      delta = -e.detail / 3;

  if (delta) {
    
    // apply scroll...
    scrollwheelTurn(delta);
  }

}


function CollapseExpandNode(node)
{
  var el = $("thumbtree_" + node);
  el.style.display = (el.style.display == "") ? "none" : "";
  
  el = $("thumbrubriek_" + node);
  el.className = (el.className == "licht") ? "donker" : "licht";
  
  thumbnailSetScrollbar(false);
}


function highlightRubriek(el)
{
  el = $("thumbrubriek_" + el);
  el.className = (el.className == "licht") ? "donker" : "licht";
}


function readFotosFromXml()
{
var i;
var rubriek;
var foto;
var ii;

  foto = 1;
  for (rubriek = 0; rubriek < xmlRubriek.length; rubriek++)
  {

    for (i = 0; i < (xmlRubriek[rubriek].getElementsByTagName('afbeelding').length); i++)
    {

      arrayFotos[foto] = new Array(6);

	arrayFotos[foto][0] = xmlFotos[(foto - 1)].getElementsByTagName('file')[0].firstChild.nodeValue;
	arrayFotos[foto][1] = xmlFotos[(foto - 1)].getElementsByTagName('naam')[0].firstChild.nodeValue;
	arrayFotos[foto][2] = xmlFotos[(foto - 1)].getElementsByTagName('filehires')[0].firstChild.nodeValue;
	arrayFotos[foto][3] = xmlFotos[(foto - 1)].getElementsByTagName('width')[0].firstChild.nodeValue;
	arrayFotos[foto][4] = xmlFotos[(foto - 1)].getElementsByTagName('height')[0].firstChild.nodeValue;
	arrayFotos[foto][5] = xmlRubriek[rubriek].getElementsByTagName('title')[0].firstChild.nodeValue;

      foto = foto + 1;

    }
    
  }

}


function placeThumbnailsInTree()
{
var i;
var rubriek;
var foto;
var ii;
var el;

  foto = 1;

  for (rubriek = 0; rubriek < xmlRubriek.length; rubriek++)
  {
    el = $("thumbtree_" + rubriek);
    html = "";

    for (i = 0; i < (xmlRubriek[rubriek].getElementsByTagName('afbeelding').length); i++)
    {

      html = html + '<p class="thumb"><img class="thumb" id="thumb_' + foto + '" src="' +
           	 thumbPath + arrayFotos[foto][0] +
             '" onclick="parent.thumbnailClick(' + foto + ');" ';
	if ((foto % 5) == 0) 
	  html = html + 'onload="imgLoaded(' + foto + ');" ';

	html = html + '></p>';
      
      foto = foto + 1;

    }
    
    el.innerHTML = html;

  }

  setTimeout(afterResize, 250);

}

function placeThumbnailTree()
{
var i;
var html;

  html = '';

  for (rubriek=0; rubriek < xmlRubriek.length; rubriek++) {
  
    html = html + '<h3 class="licht" onmouseover="highlightRubriek(' + rubriek + ')" onmouseout="highlightRubriek(' + rubriek + ')" id="thumbrubriek_' + 
			rubriek + '"><span onclick=CollapseExpandNode("' + rubriek + '");>' +
			'<img src="system/thumbnail_collapse.gif" width="16" height="16" style="position: relative; top: 5;"> ' + 
			xmlRubriek[rubriek].getElementsByTagName('title')[0].firstChild.nodeValue + '</span></h3>' +
			'<div class="thumb" id="thumbtree_' + rubriek + '" style="display: none"><p class="thumb">building tree...</p></div>';
  }

  thumbnails.innerHTML = html;

}


function afterResize() {
var availH;
var availW;
var slideX;
var slideY;
var thumbscrollbar;
var divbody;

  thumbscrollbar = $('thumbscrollbar');

  availH = (window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight);
  availW = (window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth);
  
  slideSizeH = availH - 32;
  slideSizeW = availW - thumbnailSizeW;

  slideOnzichtbaar.style.top = 0;
  slideOnzichtbaar.style.left = thumbnailSizeW;
  slideZichtbaar.style.top = 0;
  slideZichtbaar.style.left = thumbnailSizeW;

  slideOnzichtbaar.style.width = slideSizeW;
  slideOnzichtbaar.style.height = slideSizeH;
  slideZichtbaar.style.width = slideSizeW;
  slideZichtbaar.style.height = slideSizeH;

  divBackground.style.width = thumbnailSizeW;
  divBackground.style.top = 0;
  divBackground.style.left = 0;
  divBackground.style.height = availH;

  //
  // set scrollbar for thumbnails
  thumbnailSetScrollbar(true);
  
  //
  // prevent scrolling out of filled area
  divbody = $('divbody');
  divbody.style.height = availH;

}

function thumbnailSetScrollbar(setClip) 
{

  var availH = (window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight);
  var thumbscrollbar = $('thumbscrollbar');
  var scrollOuter = $('scrollOuter');
  var scrollInner = $('scrollInner');
  var height = availH - thumbnailTop;
  var scrollH = (height * height)/ parseInt(thumbnails.offsetHeight);
  var scrollRatio = (parseInt(thumbnails.style.top) - thumbnailTop) / parseInt(thumbnails.offsetHeight) * -1;

  thumbscrollbar.style.height = height;

  scrollOuter.style.height = height - (isIE ? 0 : 2);
  scrollOuter.style.top = -1;
  scrollOuter.style.left = 6;
  scrollOuter.style.width = thumbnailScrollW - (isIE ? 0 : 2);
  
  scrollInner.style.width = thumbnailScrollW - 4;
  scrollInner.style.left = (isIE ? 8 : 8);
  scrollInner.style.top = parseInt(height * scrollRatio) + (isIE ? 1 : 1);
  if ((scrollH + parseInt(scrollInner.style.top)) > height)
    scrollH = height - parseInt(scrollInner.style.top);
  scrollInner.style.height = scrollH - 3;

  _scrollYmin = isIE ? 1 : 2;
  _scrollYmax = _scrollYmin + parseInt(scrollOuter.style.height) - parseInt(scrollInner.style.height) - 4;
  _scrollRatio = (parseInt(thumbnails.offsetHeight) + 8) / (parseInt(scrollOuter.style.height) - 4);
  
  if (setClip) {
    _thumbdivHeight = _clipTop + availH - thumbnailTop - 3;
    thumbnails.style.clip = 'rect(' + _clipTop + ' ' + thumbnails.style.width + ' ' + _thumbdivHeight + 'px 0px)';
  }

}


function imgLoaded(foto)
{
  imagesLoaded = imagesLoaded + 1;
  $("siteinfo_progressbar").style.width = parseInt(imagesLoaded / fotoMax * 571 * 5) - 9;
  var perc = parseInt(imagesLoaded / fotoMax * 500);
  if (perc > 100)
    perc = 100;
  $("siteinfo_progressperc").innerHTML = perc + '%';
}


function waitUntillLoaded()
{
  if ((imagesLoaded * 5 / fotoMax) > 0.9) {
    
    clearInterval(idInterval);
    imgLoaded(fotoMax);

  }

}

function clickTab1()
{
  var el = $("siteinfo_tabimage");
  el.src = pathSystem + 'slideshow_infobackground1.jpg';
  el.useMap = '#maptab1';
  $("siteinfo_progressbar").style.display = "";
  $("siteinfo_progressperc").style.display = "";
}

function clickTab2()
{
  var el = $("siteinfo_tabimage");
  el.src = pathSystem + 'slideshow_infobackground2.jpg';
  el.useMap = '#maptab2';
  $("siteinfo_progressbar").style.display = "none";
  $("siteinfo_progressperc").style.display = "none";
}

function clickPlay()
{
  hideSiteinfo(true);
}

function hideSiteinfo(restartShow)
{
  siteInfo.style.display = "none";
  siteInfo.style.width = 1;
  siteInfo.style.height = 1;
  
  if (restartShow)
    pauseSlideshow();
}

function showSiteinfo(clickAway)
{
var infoinnerH = 550;
var infoinnerW = 704;
var infoH; var infoW;
var el;

  if (clickAway)
  {
    slideshowPaused = false;  
    pauseSlideshow();
  }

  var availH = (window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight);
  var availW = (window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth);
  infoH = parseInt(availH * 1);
  infoW = parseInt((availW - thumbnailSizeW) * 1);

  siteInfo.style.left = thumbnailSizeW + parseInt((availW - infoW - thumbnailSizeW) / 2)
  siteInfo.style.top = parseInt((availH - infoH) / 2)
  siteInfo.style.height = infoH;
  siteInfo.style.width = infoW;

  var deltaW = parseInt((infoW - infoinnerW) / 2);
  var deltaH = parseInt((infoH - infoinnerH) / 8);

  el = $("siteinfotop");
  el.style.left = deltaW;
  el.style.top = deltaH;
  el = $("siteinfotab");
  el.style.left = deltaW;
  el.style.top = deltaH + 112 + 24;
  el = $("siteinfo_progressbar");
  el.style.left = deltaW + 63;
  el.style.top = deltaH + 112 + 24 + 313;
  el = $("siteinfo_progressperc");
  el.style.left = deltaW + 60;
  el.style.top = deltaH + 112 + 24 + 311;

  setOpacity(siteInfo, 96);
  siteInfo.style.display = "";
  
}  

function InitDragDrop() 
{

  document.onmousedown = OnMouseDown;
  document.onmouseup = OnMouseUp;
  if (window.addEventListener)
    window.addEventListener('DOMMouseScroll', onScrollwheel, false);
  window.onmousewheel = document.onmousewheel = onScrollwheel;

}


function slideshowInitStart() {
var i;
var xmlDoc;
var availH;
var availW;
var slideX;
var slideY;
var thumbscrollbar;
var titel;

  //
  // Test browser
  isIE = (navigator.userAgent.toLowerCase().indexOf("msie") != -1);
  isSafari = (navigator.userAgent.toLowerCase().indexOf("safari") != -1);
  fotoFade = (isIE ? 25 : 25);

  //
  // Read image-list from xml
  if (isSafari)
  {
    var http = new XMLHttpRequest();
    http.open("GET", XMLfile, false);
    http.send(null);
    xmlDoc = http.responseXML;
  } else {
  try {
    xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
  }
  catch(e) {
    try {
      xmlDoc = document.implementation.createDocument("","",null);
    }
    catch(e) {
      alert(e.message);
    }
  }
  try {
    xmlDoc.async = false;
    xmlDoc.load(XMLfile);
  }
  catch(e) {
    alert(e.message);
  }
  }
  xmlFotos = xmlDoc.getElementsByTagName('afbeelding');
  fotoMax = xmlFotos.length;
  xmlRubriek = xmlDoc.getElementsByTagName('rubriek');
  readFotosFromXml();
  
  //
  // Init slide-layers
  slideOnzichtbaar = $('slide2');
  slideZichtbaar = $('slide1');
  thumbnails = $('thumbnails');
  controls = $('controls');
  infobox = $('infobox');
  titel = $('titel');
  thumbscrollbar = $('thumbscrollbar');
  refDownload = $('download_image');
  divBackground = $('background');
  siteInfo = $('siteinfo');
  countdown = $('countdown');
  countdownbar = $('countdownbar');

  thumbnails.style.width = thumbnailSizeW - thumbnailScrollW;
  thumbnails.style.top = thumbnailTop;
  thumbnails.style.left = thumbnailScrollW;
  thumbscrollbar.style.top = thumbnailTop;
  thumbscrollbar.style.left = 0;
  thumbscrollbar.style.width = thumbnailScrollW + 2;
  titel.style.left = 0;
  titel.style.top = 0;
  titel.style.width = thumbnailSizeW;
  titel.style.height = thumbnailTop;

  var scrollOuter = $('scrollOuter');
  var scrollInner = $('scrollInner');
  scrollOuter.style.height = 1;
  scrollInner.style.top = 0;
  
  setOpacity(controls, 60);
  setOpacity(countdown, 60);
  countdown.style.display = 'none';
  countdown.style.width = countdownbar.style.width = (isIE ? 4 : 2);

  showSiteinfo(false);
  placeThumbnailTree();
  InitDragDrop();
  afterResize();
  
  setNextFoto();
  
  window.onresize = afterResize;
  document.onmousemove = OnMouseMove;
  document.onkeydown = onKeyDown; 
  
  placeThumbnailsInTree();
  
  setControlPosition();
  setSlideshowInfo();

  idInterval = setInterval(waitUntillLoaded, 400);

}

function slideshowInit()
{
  //
  // Pretend page is loaded, start builing in half a second
  setTimeout(slideshowInitStart, 100);
}