//////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////
//	
//	SLIDESHOW 		
//	---------
//
/////////////////////////////////////////////////////////////////////


function init()
{
	loadID();
	CJL_loadXmlDocument("slideshow.xml.php?p=41", writeXMLData);
}

//////////////////////////////////////////////////////////////////
///// CUSTOM VARS 
////////////////////////////////////////////
//slideshow
var swaptijd = 2; // tijd in seconden voor swap
//fade
var steps = 10; // number of opacity intervals  
var fadeinterval = 0.01; //milliseconden
//COLOR
var border = "2px #00CC66 solid";
var bordernormal = "2px #F9F9F9 solid";
var text = "#00CC66";
var textnormaal = "#000000";

///////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////
//arrays
var imageArray = new Array();
var titelArray = new Array();
var thumbArray = new Array();
var refArray = new Array();
//andere
var Timer;
var nextImage;
var fadeInTimer = 0; 
var fadeOutTimer;
var interval = swaptijd * 1000;
var curImage = -1;
var numImages; //aantal afbeeldingen (word door lengte van xml bepaald later)
//fade
var target;
var level = 0;
var fadelevel = 1/steps;
//xml
var slides;
//thumbnailswitch
var teller = 0;
var telleralg = 0;
var telleralg2 = 0;
var lijst = 0;
var teller2 = 0;
var lengte;
var isPlaying = 1;
var mode=1;
var length;
var lijsten;
var aantalLijsten;
var firstrun = 0;
var looping = 0;
var pause = 0;
///////////////////////////////////////////////////////////////////////////
//html elementen
var thumb1;
var thumb2;
var thumb3;
var thumb4;
var thumb5;
var thumb6;
var thumb7;

var tumb01Text;
var tumb02Text;
var tumb03Text;
var tumb04Text;
var tumb05Text;
var tumb06Text;
var tumb07Text;
	
var playknop;
var pauseknop;
var reverseknop;

var target;

var ref;
var titel;
	
function loadID()
{
	if (document.images.thumb1)
	thumb1 = document.images.thumb1;
	if (document.all && document.getElementById("thumb1"))
	thumb1 = document.getElementById("thumb1");
		
	if (document.images.thumb2)
	thumb2 = document.images.thumb2;
	if (document.all && document.getElementById("thumb2"))
	thumb2 = document.getElementById("thumb2");
		
	if (document.images.thumb3)
	thumb3 = document.images.thumb3;
	if (document.all && document.getElementById("thumb3"))
	thumb3 = document.getElementById("thumb3");
		
	if (document.images.thumb4)
	thumb4 = document.images.thumb4;
	if (document.all && document.getElementById("thumb4"))
	thumb4 = document.getElementById("thumb4");
		
	if (document.images.thumb5)
	thumb5 = document.images.thumb5;
	if (document.all && document.getElementById("thumb5"))
	thumb5 = document.getElementById("thumb5");
		
	if (document.images.thumb6)
	thumb6 = document.images.thumb6;
	if (document.all && document.getElementById("thumb6"))
	thumb6 = document.getElementById("thumb6");
		
	if (document.images.thumb7)
	thumb7 = document.images.thumb7;
	if (document.all && document.getElementById("thumb7"))
	thumb7 = document.getElementById("thumb7");
	
	tumb01Text = document.getElementById('tumb01Text');	
	tumb02Text = document.getElementById('tumb02Text');	
	tumb03Text = document.getElementById('tumb03Text');
	tumb04Text = document.getElementById('tumb04Text');
	tumb05Text = document.getElementById('tumb05Text');		
	tumb06Text = document.getElementById('tumb06Text');	
	tumb07Text = document.getElementById('tumb07Text');
	
	playknop = document.getElementById('playknop');
	pauseknop = document.getElementById('pauseknop');
	reverseknop = document.getElementById('reverseknop');
	
	if (document.images.myImage)
	target=document.images.myImage;
	if (document.all && document.getElementById('myImage'))
	target = document.getElementById('myImage');
	
	ref = document.getElementById('myImageText');
	titel = document.getElementById('titel');
	
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// XML INLADEN	  
////////////////////
function CJL_loadXmlDocument(xmlFile, cbFun)
{
   var xdoc;

   if( window.ActiveXObject && /Win/.test(navigator.userAgent) )
   {
      xdoc = new ActiveXObject("Microsoft.XMLDOM");

      xdoc.async = false;
      xdoc.load(xmlFile);

      cbFun(xdoc);

      return true;
   }
   else if( document.implementation && document.implementation.createDocument )
   {
      xdoc = document.implementation.createDocument("", "", null);
      xdoc.load(xmlFile);

      xdoc.onload = function()
      {
         cbFun(xdoc);
      }

      return true;
   }
   else
   {
      return false;
   }
}

//////////////////////////////////////////////////////////////////////////////////////////
// XML LOADING IN ARRAYS
///////////////////////////////
function writeXMLData(xdoc)
{		
	slides = xdoc.getElementsByTagName("slide");
	numImages = slides.length
	  
    for(var i = 0; i < slides.length; ++i)
    {		  		  
		titelArray[i] = xdoc.getElementsByTagName("title")[i].childNodes[0].nodeValue;	  	
		refArray[i] = xdoc.getElementsByTagName("ref")[i].childNodes[0].nodeValue;		  
	  	
		var imageName = xdoc.getElementsByTagName("image")[i].childNodes[0].nodeValue;
	  	imageArray[i] = new Image();
	  	imageArray[i].src = "img/fotoboek/"+ imageName;
		  
	  	var thumbName = xdoc.getElementsByTagName("tumb")[i].childNodes[0].nodeValue;
	  	thumbArray[i] = new Image();
	  	thumbArray[i].src ="img/fotoboek/"+ thumbName;
	 }
	 startSlideShow();
}

/////////////////////////////////////////////////////////////////////////////
// AUTOMATISCHE SLIDESHOW INITIAL
//////////////////////////////////
function playKnop()
{
	pause = 0;
	firstrun = 0;
	mode = 1;
	
	clearTimers();

	var img = curImage;

	if(isPlaying == 0)
	{
		isPlaying = 1;				
		Playing();
		//SlideShowStart(mode);
		fadeOut();
	}
	else
	{		
		clearTimers();
		isPlaying = 0;
		notPlaying();
	}
}

function pauseKnop()
{
	isPlaying = 0;	
	clearTimers();	
	notPlaying();
	pause = 1;
}

function Playing()
{
	playknop.style.visibility = "hidden";
	pauseknop.style.visibility = "visible";
	reverseknop.style.visibility = "hidden";
}

function notPlaying()
{	
	playknop.style.visibility = "visible";
	pauseknop.style.visibility = "hidden";
	reverseknop.style.visibility = "visible";
}

function reverseKnop()
{
	mode = 0;
	firstrun = 0;
	pause = 0;
	
	clearTimers();
	
	var img = curImage
	
	if(isPlaying == 0)
	{
		isPlaying = 1;
		//SlideShowStart(mode);
		fadeOut();
		Playing();
	}
	else
	{		
		clearTimers();
		isPlaying = 0;
		notPlaying();		
	}
}

function clearTimers()
{
	clearTimeout(Timer);
	clearTimeout(fadeInTimer);
	clearTimeout(fadeOutTimer);
}

function startSlideShow()
{	
	Playing();
	SlideShowStart(1);
	loadThumbs();
	loadThumbText(0);
}

/////////////////////////////////////////////////////////////////////////////
// STARTING SLIDESHOW 
///////////////////////////////
function SlideShowStart(modus)
{	
	if (document.images)
	{
		if(modus == 1)
		{
			nextImage = curImage + 1;
			if (nextImage >= numImages)
			nextImage = 0;
		}
		else
		{
			nextImage = curImage - 1;
			if (nextImage < 0)
			nextImage = numImages - 1;
		}
					
		target.style.opacity = level;
		target.style.MozOpacity = level;
		target.style.KhtmlOpacity = level;
		target.style.filter = "alpha(opacity=" + (level * 100) + ");";
	
		if (target)
		{
			target.src = imageArray[nextImage].src;
			curImage = nextImage;
		}
	} 
	
	swapRef(nextImage);
	swapTitel(nextImage);
	checkThumbnails(mode);
	swapBorder(mode);
	setTimeout("fadeIn()", 1);
}

function swapBorder(modus)
{	
	lengte = slides.length;
	lijsten = lengte / 7;
	aantalLijsten = Math.ceil(lijsten);
	
	if(modus == 1)
	{
		teller2++;
		telleralg2++;
		
		if (thumb1 && thumb2 && thumb3 && thumb4 && thumb5 && thumb6 && thumb7)
		{
			if(teller2 > 7)
			{
				teller2 = 1;
			}
			
			if(telleralg2 > lengte)
			{
				teller2 = 1;
				telleralg2 = 1;
				
				thumb1.style.border = border;
				thumb2.style.border = bordernormal;
				thumb3.style.border = bordernormal;
				thumb4.style.border = bordernormal;
				thumb5.style.border = bordernormal;
				thumb6.style.border = bordernormal;
				thumb7.style.border = bordernormal;
					
				tumb01Text.style.color = text;
				tumb02Text.style.color = textnormaal;
				tumb03Text.style.color = textnormaal;
				tumb04Text.style.color = textnormaal;
				tumb05Text.style.color = textnormaal;
				tumb06Text.style.color = textnormaal;
				tumb07Text.style.color = textnormaal;
			}		
			else
			{
					
				if(teller2 == 1)
				{
					thumb1.style.border = border;
					thumb2.style.border = bordernormal;
					thumb3.style.border = bordernormal;
					thumb4.style.border = bordernormal;
					thumb5.style.border = bordernormal;
					thumb6.style.border = bordernormal;
					thumb7.style.border = bordernormal;
					
					tumb01Text.style.color = text;
					tumb02Text.style.color = textnormaal;
					tumb03Text.style.color = textnormaal;
					tumb04Text.style.color = textnormaal;
					tumb05Text.style.color = textnormaal;
					tumb06Text.style.color = textnormaal;
					tumb07Text.style.color = textnormaal;
				}
				else if(teller2 == 2)
				{
					thumb1.style.border = bordernormal;
					thumb2.style.border = border;
					thumb3.style.border = bordernormal;
					thumb4.style.border = bordernormal;
					thumb5.style.border = bordernormal;
					thumb6.style.border = bordernormal;
					thumb7.style.border = bordernormal;
						
					tumb01Text.style.color = textnormaal;
					tumb02Text.style.color = text;
					tumb03Text.style.color = textnormaal;
					tumb04Text.style.color = textnormaal;
					tumb05Text.style.color = textnormaal;
					tumb06Text.style.color = textnormaal;
					tumb07Text.style.color = textnormaal;
				}
				else if(teller2 == 3)
				{
					thumb1.style.border = bordernormal;
					thumb2.style.border = bordernormal;
					thumb3.style.border = border;
					thumb4.style.border = bordernormal;
					thumb5.style.border = bordernormal;
					thumb6.style.border = bordernormal;
					thumb7.style.border = bordernormal;
					
					tumb01Text.style.color = textnormaal;
					tumb02Text.style.color = textnormaal;
					tumb03Text.style.color = text;
					tumb04Text.style.color = textnormaal;
					tumb05Text.style.color = textnormaal;
					tumb06Text.style.color = textnormaal;
					tumb07Text.style.color = textnormaal;
		
				}
				else if(teller2 == 4)
				{
					thumb1.style.border = bordernormal;
					thumb2.style.border = bordernormal;
					thumb3.style.border = bordernormal;
					thumb4.style.border = border;
					thumb5.style.border = bordernormal;
					thumb6.style.border = bordernormal;
					thumb7.style.border = bordernormal;
					
					tumb01Text.style.color = textnormaal;
					tumb02Text.style.color = textnormaal;
					tumb03Text.style.color = textnormaal;
					tumb04Text.style.color = text;
					tumb05Text.style.color = textnormaal;
					tumb06Text.style.color = textnormaal;
					tumb07Text.style.color = textnormaal;
				}
				else if(teller2 == 5)
				{
					thumb1.style.border = bordernormal;
					thumb2.style.border = bordernormal;
					thumb3.style.border = bordernormal;
					thumb4.style.border = bordernormal;
					thumb5.style.border = border;
					thumb6.style.border = bordernormal;
					thumb7.style.border = bordernormal;
						
					tumb01Text.style.color = textnormaal;
					tumb02Text.style.color = textnormaal;
					tumb03Text.style.color = textnormaal;
					tumb04Text.style.color = textnormaal;
					tumb05Text.style.color = text;
					tumb06Text.style.color = textnormaal;
					tumb07Text.style.color = textnormaal;
				}
				else if(teller2 == 6)
				{
					thumb1.style.border = bordernormal;
					thumb2.style.border = bordernormal;
					thumb3.style.border = bordernormal;
					thumb4.style.border = bordernormal;
					thumb5.style.border = bordernormal;
					thumb6.style.border = border;
					thumb7.style.border = bordernormal;
						
					tumb01Text.style.color = textnormaal;
					tumb02Text.style.color = textnormaal;
					tumb03Text.style.color = textnormaal;
					tumb04Text.style.color = textnormaal;
					tumb05Text.style.color = textnormaal;
					tumb06Text.style.color = text;
					tumb07Text.style.color = textnormaal;
				}
				else if(teller2 == 7)
				{
					thumb1.style.border = bordernormal;
					thumb2.style.border = bordernormal;
					thumb3.style.border = bordernormal;
					thumb4.style.border = bordernormal;
					thumb5.style.border = bordernormal;
					thumb6.style.border = bordernormal;
					thumb7.style.border = border;
						
					tumb01Text.style.color = textnormaal;
					tumb02Text.style.color = textnormaal;
					tumb03Text.style.color = textnormaal;
					tumb04Text.style.color = textnormaal;
					tumb05Text.style.color = textnormaal;
					tumb06Text.style.color = textnormaal;
					tumb07Text.style.color = text;
				}
				else
				{
				}
			}
		}
	}
	else
	{
		teller2--;
		telleralg2--;		
		
		if (thumb1 && thumb2 && thumb3 && thumb4 && thumb5 && thumb6 && thumb7)
		{		
			if(telleralg2 < 1 && teller2 == 0)
			{			
				telleralg2 = lengte;			
				teller2 = 7 - ((7 * aantalLijsten)-lengte);
			}		
			else if(teller2 == 0)
			{
				teller2 = 7;
			}

			if(teller2 == 1)
			{
				thumb1.style.border = border;
				thumb2.style.border = bordernormal;
				thumb3.style.border = bordernormal;
				thumb4.style.border = bordernormal;
				thumb5.style.border = bordernormal;
				thumb6.style.border = bordernormal;
				thumb7.style.border = bordernormal;
					
				tumb01Text.style.color = text;
				tumb02Text.style.color = textnormaal;
				tumb03Text.style.color = textnormaal;
				tumb04Text.style.color = textnormaal;
				tumb05Text.style.color = textnormaal;
				tumb06Text.style.color = textnormaal;
				tumb07Text.style.color = textnormaal;
			}
			else if(teller2 == 2)
			{
				thumb1.style.border = bordernormal;
				thumb2.style.border = border;
				thumb3.style.border = bordernormal;
				thumb4.style.border = bordernormal;
				thumb5.style.border = bordernormal;
				thumb6.style.border = bordernormal;
				thumb7.style.border = bordernormal;
					
				tumb01Text.style.color = textnormaal;
				tumb02Text.style.color = text;
				tumb03Text.style.color = textnormaal;
				tumb04Text.style.color = textnormaal;
				tumb05Text.style.color = textnormaal;
				tumb06Text.style.color = textnormaal;
				tumb07Text.style.color = textnormaal;
			}
			else if(teller2 == 3)
			{
				thumb1.style.border = bordernormal;
				thumb2.style.border = bordernormal;
				thumb3.style.border = border;
				thumb4.style.border = bordernormal;
				thumb5.style.border = bordernormal;
				thumb6.style.border = bordernormal;
				thumb7.style.border = bordernormal;
				
				tumb01Text.style.color = textnormaal;
				tumb02Text.style.color = textnormaal;
				tumb03Text.style.color = text;
				tumb04Text.style.color = textnormaal;
				tumb05Text.style.color = textnormaal;
				tumb06Text.style.color = textnormaal;
				tumb07Text.style.color = textnormaal;
	
			}
			else if(teller2 == 4)
			{
				thumb1.style.border = bordernormal;
				thumb2.style.border = bordernormal;
				thumb3.style.border = bordernormal;
				thumb4.style.border = border;
				thumb5.style.border = bordernormal;
				thumb6.style.border = bordernormal;
				thumb7.style.border = bordernormal;
				
				tumb01Text.style.color = textnormaal;
				tumb02Text.style.color = textnormaal;
				tumb03Text.style.color = textnormaal;
				tumb04Text.style.color = text;
				tumb05Text.style.color = textnormaal;
				tumb06Text.style.color = textnormaal;
				tumb07Text.style.color = textnormaal;
			}
			else if(teller2 == 5)
			{
				thumb1.style.border = bordernormal;
				thumb2.style.border = bordernormal;
				thumb3.style.border = bordernormal;
				thumb4.style.border = bordernormal;
				thumb5.style.border = border;
				thumb6.style.border = bordernormal;
				thumb7.style.border = bordernormal;
					
				tumb01Text.style.color = textnormaal;
				tumb02Text.style.color = textnormaal;
				tumb03Text.style.color = textnormaal;
				tumb04Text.style.color = textnormaal;
				tumb05Text.style.color = text;
				tumb06Text.style.color = textnormaal;
				tumb07Text.style.color = textnormaal;
			}
			else if(teller2 == 6)
			{
				thumb1.style.border = bordernormal;
				thumb2.style.border = bordernormal;
				thumb3.style.border = bordernormal;
				thumb4.style.border = bordernormal;
				thumb5.style.border = bordernormal;
				thumb6.style.border = border;
				thumb7.style.border = bordernormal;
					
				tumb01Text.style.color = textnormaal;
				tumb02Text.style.color = textnormaal;
				tumb03Text.style.color = textnormaal;
				tumb04Text.style.color = textnormaal;
				tumb05Text.style.color = textnormaal;
				tumb06Text.style.color = text;
				tumb07Text.style.color = textnormaal;
			}
			else if(teller2 == 7)
			{
				thumb1.style.border = bordernormal;
				thumb2.style.border = bordernormal;
				thumb3.style.border = bordernormal;
				thumb4.style.border = bordernormal;
				thumb5.style.border = bordernormal;
				thumb6.style.border = bordernormal;
				thumb7.style.border = border;
						
				tumb01Text.style.color = textnormaal;
				tumb02Text.style.color = textnormaal;
				tumb03Text.style.color = textnormaal;
				tumb04Text.style.color = textnormaal;
				tumb05Text.style.color = textnormaal;
				tumb06Text.style.color = textnormaal;
				tumb07Text.style.color = text;
			}
			else
			{
			}
		}
	}
}

///////////////////////////////////////////////////////////////////////////////////
// FADE-IN
///////////////////////////////
function fadeIn()
{	
	if(firstrun == 0)
	{
		if (document.images)
		{		
			if (target)
			{
				if(pause == 0)
				{
					if(level < 0.99)
					{
						looping = 1;
						level = level + fadelevel;
						target.style.opacity = level;
						target.style.MozOpacity = level;
						target.style.KhtmlOpacity = level;
						target.style.filter = "alpha(opacity=" + (level * 100) + ");";
						slideTimer = setTimeout("fadeIn()", fadeinterval);
					}					
					else
					{
						looping = 0;
						level = 1;
						target.style.opacity = level;
						target.style.MozOpacity = level;
						target.style.KhtmlOpacity = level;
						target.style.filter = "alpha(opacity=" + (level * 100) + ");";
						clearTimeout(fadeInTimer);			
						Timer = setTimeout("fadeOut()", interval);
					}	
				}
				else
				{
					if(level < 0.99)
					{
						looping = 1;
						level = level + fadelevel;
						target.style.opacity = level;
						target.style.MozOpacity = level;
						target.style.KhtmlOpacity = level;
						target.style.filter = "alpha(opacity=" + (level * 100) + ");";
						slideTimer = setTimeout("fadeIn()", fadeinterval);
					}					
					else
					{
					}	
				}
			}			
		}
		else
		{
			setTimeout("fadeIn()", 500);
		}
	}
	else
	{
		if (document.images)
		{		
			if (target)
			{
				if(level < 0.99)
				{
					level = level + fadelevel;
					target.style.opacity = level;
					target.style.MozOpacity = level;
					target.style.KhtmlOpacity = level;
					target.style.filter = "alpha(opacity=" + (level * 100) + ");";
					slideTimer = setTimeout("fadeIn()", fadeinterval);
				}					
			}			
		}
		else
		{
		setTimeout("fadeIn()", 500);
		}
	}
}


////////////////////////////////////////////////////////////////////////////////
// FADE-OUT
///////////////////////////////
function fadeOut()
{	
	if (document.images)
	{
		if (target)
		{
				if(level > 0)
				{
					level = level - fadelevel;
					target.style.opacity = level;
					target.style.MozOpacity = level;
					target.style.KhtmlOpacity = level;
					target.style.filter = "alpha(opacity=" + (level * 100) + ");";
					slideTimer=setTimeout("fadeOut()", fadeinterval);
				}
				else
				{
					level = 0;
					target.style.opacity = level;
					target.style.MozOpacity = level;
					target.style.KhtmlOpacity = level;
					target.style.filter = "alpha(opacity=" + (level * 100) + ");";
					clearTimeout(fadeOutTimer);
					setTimeout("SlideShowStart(mode)", 1);
				}	
		}			
	}
	else
	{
		setTimeout("fadeOut()", 500);
	}
}

/////////////////////////////////////////////////////////////////////////////////////
// SWAPPING REF (text beneath large image)
///////////////////////////////
function swapRef(img)
{
	ref.innerHTML = refArray[img];
}

function swapTitel(img)
{
	titel.innerHTML = titelArray[img];
}

///////////////////////////////////////////////////////////////////////////////////
// INITIAL THUMBNAIL TEXT LOADING
///////////////////////////////
function loadThumbText(img)
{ 	
	nextImage = 0;
	nextImage=curImage+1;			

	tumb01Text.innerHTML = titelArray[nextImage-1];
	tumb02Text.innerHTML = titelArray[nextImage];
	tumb03Text.innerHTML = titelArray[nextImage+1];
	tumb04Text.innerHTML = titelArray[nextImage+2];
	tumb05Text.innerHTML = titelArray[nextImage+3];
	tumb06Text.innerHTML = titelArray[nextImage+4];
	tumb07Text.innerHTML = titelArray[nextImage+5];

}

//////////////////////////////////////////////////////////////////////////////////////////
// INITIAL THUMBNAIL LOADING
///////////////////////////////
function loadThumbs()
{
	if (document.images)
	{
		if (thumb1 && thumb2 && thumb3 && thumb4 && thumb5 && thumb6 && thumb7)
		{
				thumb1.src = thumbArray[0].src;
				thumb2.src = thumbArray[1].src;
				thumb3.src = thumbArray[2].src;
				thumb4.src = thumbArray[3].src;
				thumb5.src = thumbArray[4].src;
				thumb6.src = thumbArray[5].src;
				thumb7.src = thumbArray[6].src;
		}
	}
}

function checkThumbnails(modus)
{	
	length = slides.length;
	lijsten = length / 7;
	aantalLijsten = Math.ceil(lijsten);


	if(modus == 1)
	{
		telleralg++;
		teller++;
		
		
		if(telleralg > length)
		{
			telleralg = 1;
			teller = 1;	
			lijst = 0;
			changeThumbnails(lijst, aantalLijsten, length, 1);	
		}
		else if(teller == 8)
		{	
			if(telleralg > length)
			{
				telleralg = 1;
				teller = 1;	
				lijst = 0;
				changeThumbnails(lijst, aantalLijsten, length, 1);	
			}
			else
			{
				teller = 1;
				lijst++;
				changeThumbnails(lijst, aantalLijsten, length, 1);		
			}
		}
		

	}
	else
	{
		telleralg--;
		teller--;
		
		if(telleralg < 1 && teller == 0)
		{			
			telleralg = length;			
			teller = 7 - ((7 * aantalLijsten)-length)
			lijst = aantalLijsten-1;
			changeThumbnails(lijst, aantalLijsten, length, 0);
			//loadThumbs();
			//loadThumbText(1);
		}		
		else if(teller == 0)
		{
			teller = 7;
			lijst--;
			changeThumbnails(lijst, aantalLijsten, length, 0);
		}
	}
}

function changeThumbnails(list, maxim, lengte, modus)
{
		if(list+1 == maxim)
		{
			if(lengte%7 == 6)
			{
				thumb1.src = thumbArray[list * 7 + 0].src;
				thumb2.src = thumbArray[list * 7 + 1].src;
				thumb3.src = thumbArray[list * 7 + 2].src;
				thumb4.src = thumbArray[list * 7 + 3].src;
				thumb5.src = thumbArray[list * 7 + 4].src;
				thumb6.src = thumbArray[list * 7 + 5].src;
				thumb7.src = "img/blank.gif";
				
				tumb01Text.innerHTML = titelArray[list * 7 + 0];
				tumb02Text.innerHTML = titelArray[list * 7 + 1];
				tumb03Text.innerHTML = titelArray[list * 7 + 2];
				tumb04Text.innerHTML = titelArray[list * 7 + 3];
				tumb05Text.innerHTML = titelArray[list * 7 + 4];
				tumb06Text.innerHTML = titelArray[list * 7 + 5];
				tumb07Text.innerHTML = "&nbsp;";	
			}
			else if(lengte%7 == 5)
			{
				thumb1.src = thumbArray[list * 7 + 0].src;
				thumb2.src = thumbArray[list * 7 + 1].src;
				thumb3.src = thumbArray[list * 7 + 2].src;
				thumb4.src = thumbArray[list * 7 + 3].src;
				thumb5.src = thumbArray[list * 7 + 4].src;
				thumb6.src = "img/blank.gif";
				thumb7.src = "img/blank.gif";
				
				tumb01Text.innerHTML = titelArray[list * 7 + 0];
				tumb02Text.innerHTML = titelArray[list * 7 + 1];
				tumb03Text.innerHTML = titelArray[list * 7 + 2];
				tumb04Text.innerHTML = titelArray[list * 7 + 3];
				tumb05Text.innerHTML = titelArray[list * 7 + 4];
				tumb06Text.innerHTML = "&nbsp;";
				tumb07Text.innerHTML = "&nbsp;";
			}
			else if(lengte%7 == 4)
			{
				thumb1.src = thumbArray[list * 7 + 0].src;
				thumb2.src = thumbArray[list * 7 + 1].src;
				thumb3.src = thumbArray[list * 7 + 2].src;
				thumb4.src = thumbArray[list * 7 + 3].src;
				thumb5.src = "img/blank.gif";
				thumb6.src = "img/blank.gif";
				thumb7.src = "img/blank.gif";
	
				tumb01Text.innerHTML = titelArray[list * 7 + 0];
				tumb02Text.innerHTML = titelArray[list * 7 + 1];
				tumb03Text.innerHTML = titelArray[list * 7 + 2];
				tumb04Text.innerHTML = titelArray[list * 7 + 3];
				tumb05Text.innerHTML = "&nbsp;";
				tumb06Text.innerHTML = "&nbsp;";
				tumb07Text.innerHTML = "&nbsp;";
			}
			else if(lengte%7 == 3)
			{
				thumb1.src = thumbArray[list * 7 + 0].src;
				thumb2.src = thumbArray[list * 7 + 1].src;
				thumb3.src = thumbArray[list * 7 + 2].src;
				thumb4.src = "img/blank.gif";
				thumb5.src = "img/blank.gif";
				thumb6.src = "img/blank.gif";
				thumb7.src = "img/blank.gif";
				
				tumb01Text.innerHTML = titelArray[list * 7 + 0];
				tumb02Text.innerHTML = titelArray[list * 7 + 1];
				tumb03Text.innerHTML = titelArray[list * 7 + 2];
				tumb04Text.innerHTML = "&nbsp;";
				tumb05Text.innerHTML = "&nbsp;";
				tumb06Text.innerHTML = "&nbsp;";
				tumb07Text.innerHTML = "&nbsp;";
			}
			else if(lengte%7 == 2)
			{
				thumb1.src = thumbArray[list * 7 + 0].src;
				thumb2.src = thumbArray[list * 7 + 1].src;
				thumb3.src = "img/blank.gif";
				thumb4.src = "img/blank.gif";
				thumb5.src = "img/blank.gif";
				thumb6.src = "img/blank.gif";
				thumb7.src = "img/blank.gif";
				
				tumb01Text.innerHTML = titelArray[list * 7 + 0];
				tumb02Text.innerHTML = titelArray[list * 7 + 1];
				tumb03Text.innerHTML = "&nbsp;";
				tumb04Text.innerHTML = "&nbsp;";
				tumb05Text.innerHTML = "&nbsp;";
				tumb06Text.innerHTML = "&nbsp;";
				tumb07Text.innerHTML = "&nbsp;";
			}
			else if(lengte%7 == 1)
			{
				thumb1.src = thumbArray[list * 7 + 0].src;
				thumb2.src = "img/blank.gif";
				thumb3.src = "img/blank.gif";
				thumb4.src = "img/blank.gif";
				thumb5.src = "img/blank.gif";
				thumb6.src = "img/blank.gif";
				thumb7.src = "img/blank.gif";
				
				tumb01Text.innerHTML = titelArray[list * 7 + 0];
				tumb02Text.innerHTML = "&nbsp;";
				tumb03Text.innerHTML = "&nbsp;";
				tumb04Text.innerHTML = "&nbsp;";
				tumb05Text.innerHTML = "&nbsp;";
				tumb06Text.innerHTML = "&nbsp;";
				tumb07Text.innerHTML = "&nbsp;";
			}
			else
			{
				thumb1.src = thumbArray[list * 7 + 0].src;
				thumb2.src = thumbArray[list * 7 + 1].src;
				thumb3.src = thumbArray[list * 7 + 2].src;
				thumb4.src = thumbArray[list * 7 + 3].src;
				thumb5.src = thumbArray[list * 7 + 4].src;
				thumb6.src = thumbArray[list * 7 + 5].src;
				thumb7.src = thumbArray[list * 7 + 6].src;
				
				tumb01Text.innerHTML = titelArray[list * 7 + 0];
				tumb02Text.innerHTML = titelArray[list * 7 + 1];
				tumb03Text.innerHTML = titelArray[list * 7 + 2];
				tumb04Text.innerHTML = titelArray[list * 7 + 3];
				tumb05Text.innerHTML = titelArray[list * 7 + 4];
				tumb06Text.innerHTML = titelArray[list * 7 + 5];
				tumb07Text.innerHTML = titelArray[list * 7 + 6];
			}
		}
		else
		{	
			thumb1.src = thumbArray[list * 7 + 0].src;
			thumb2.src = thumbArray[list * 7 + 1].src;
			thumb3.src = thumbArray[list * 7 + 2].src;
			thumb4.src = thumbArray[list * 7 + 3].src;
			thumb5.src = thumbArray[list * 7 + 4].src;
			thumb6.src = thumbArray[list * 7 + 5].src;
			thumb7.src = thumbArray[list * 7 + 6].src;
			
			tumb01Text.innerHTML = titelArray[list * 7 + 0];
			tumb02Text.innerHTML = titelArray[list * 7 + 1];
			tumb03Text.innerHTML = titelArray[list * 7 + 2];
			tumb04Text.innerHTML = titelArray[list * 7 + 3];
			tumb05Text.innerHTML = titelArray[list * 7 + 4];
			tumb06Text.innerHTML = titelArray[list * 7 + 5];
			tumb07Text.innerHTML = titelArray[list * 7 + 6];
		}
}


/////////////////////////////////////////////////////////////////////////////////
// THUMB CLICK BEHAVIOUR
///////////////////////////////
function thumbClick(thumb)
{	
	clearTimers()
	
	isPlaying = 0;
	notPlaying();
		
	length = slides.length;
	lijsten = length / 7;
	aantalLijsten = Math.ceil(lijsten);	
		
	if (thumb1 && thumb2 && thumb3 && thumb4 && thumb5 && thumb6 && thumb7)
	{
		if(thumb == 1)
		{
			thumb1.style.border = border;
			thumb2.style.border = bordernormal;
			thumb3.style.border = bordernormal;
			thumb4.style.border = bordernormal;
			thumb5.style.border = bordernormal;
			thumb6.style.border = bordernormal;
			thumb7.style.border = bordernormal;
			
			tumb01Text.style.color = text;
			tumb02Text.style.color = textnormaal;
			tumb03Text.style.color = textnormaal;
			tumb04Text.style.color = textnormaal;
			tumb05Text.style.color = textnormaal;
			tumb06Text.style.color = textnormaal;
			tumb07Text.style.color = textnormaal;
			
			teller = 1;
			teller2 = 1;
			telleralg = lijst * 7 + 1;
			telleralg2 =lijst * 7 + 1;
			
			curImage = lijst * 7; 	
			
			var src = ((lijst * 7) + teller);			
			target.src = imageArray[src-1].src;
		
			var ref = document.getElementById('myImageText');
			ref.innerHTML = refArray[src-1];
			titel.innerHTML = titelArray[src-1];

		}
		else if(thumb == 2)
		{
			thumb1.style.border = bordernormal;
			thumb2.style.border = border;
			thumb3.style.border = bordernormal;
			thumb4.style.border = bordernormal;
			thumb5.style.border = bordernormal;
			thumb6.style.border = bordernormal;
			thumb7.style.border = bordernormal;
				
			tumb01Text.style.color = textnormaal;
			tumb02Text.style.color = text;
			tumb03Text.style.color = textnormaal;
			tumb04Text.style.color = textnormaal;
			tumb05Text.style.color = textnormaal;
			tumb06Text.style.color = textnormaal;
			tumb07Text.style.color = textnormaal;
			
			teller = 2;
			teller2 = 2;
			telleralg = lijst * 7 + 2;
			telleralg2 =lijst * 7 + 2;	
			
			curImage = lijst * 7 + 1; 	
			
			var src = ((lijst * 7) + teller);			
			target.src = imageArray[src-1].src;
		
			var ref = document.getElementById('myImageText');
			ref.innerHTML = refArray[src-1];
			titel.innerHTML = titelArray[src-1];
		}
		else if(thumb == 3)
		{
			thumb1.style.border = bordernormal;
			thumb2.style.border = bordernormal;
			thumb3.style.border = border;
			thumb4.style.border = bordernormal;
			thumb5.style.border = bordernormal;
			thumb6.style.border = bordernormal;
			thumb7.style.border = bordernormal;
			
			tumb01Text.style.color = textnormaal;
			tumb02Text.style.color = textnormaal;
			tumb03Text.style.color = text;
			tumb04Text.style.color = textnormaal;
			tumb05Text.style.color = textnormaal;
			tumb06Text.style.color = textnormaal;
			tumb07Text.style.color = textnormaal;
			
			teller = 3;
			teller2 = 3;
			telleralg = lijst * 7 + 3;
			telleralg2 =lijst * 7 + 3;
			
			curImage = lijst * 7 + 2; 	
						
			var src = ((lijst * 7) + teller);			
			target.src = imageArray[src-1].src;
		
			var ref = document.getElementById('myImageText');
			ref.innerHTML = refArray[src-1];
			titel.innerHTML = titelArray[src-1];
			

		}
		else if(thumb == 4)
		{
			thumb1.style.border = bordernormal;
			thumb2.style.border = bordernormal;
			thumb3.style.border = bordernormal;
			thumb4.style.border = border;
			thumb5.style.border = bordernormal;
			thumb6.style.border = bordernormal;
			thumb7.style.border = bordernormal;
			
			tumb01Text.style.color = textnormaal;
			tumb02Text.style.color = textnormaal;
			tumb03Text.style.color = textnormaal;
			tumb04Text.style.color = text;
			tumb05Text.style.color = textnormaal;
			tumb06Text.style.color = textnormaal;
			tumb07Text.style.color = textnormaal;
			
			teller = 4;
			teller2 = 4;
			telleralg = lijst * 7 + 4;
			telleralg2 =lijst * 7 + 4;
			
			curImage = lijst * 7 + 3; 		
			
			var src = ((lijst * 7) + teller);			
			target.src = imageArray[src-1].src;
		
			var ref = document.getElementById('myImageText');
			ref.innerHTML = refArray[src-1];
			titel.innerHTML = titelArray[src-1];
			

		}
		else if(thumb == 5)
		{
			thumb1.style.border = bordernormal;
			thumb2.style.border = bordernormal;
			thumb3.style.border = bordernormal;
			thumb4.style.border = bordernormal;
			thumb5.style.border = border;
			thumb6.style.border = bordernormal;
			thumb7.style.border = bordernormal;
				
			tumb01Text.style.color = textnormaal;
			tumb02Text.style.color = textnormaal;
			tumb03Text.style.color = textnormaal;
			tumb04Text.style.color = textnormaal;
			tumb05Text.style.color = text;
			tumb06Text.style.color = textnormaal;
			tumb07Text.style.color = textnormaal;
			
			teller = 5;
			teller2 = 5;
			telleralg = lijst * 7 + 5;
			telleralg2 =lijst * 7 + 5;
			
			curImage = lijst * 7 + 4; 	
			
			var src = ((lijst * 7) + teller);			
			target.src = imageArray[src-1].src;
		
			var ref = document.getElementById('myImageText');
			ref.innerHTML = refArray[src-1];	
			titel.innerHTML = titelArray[src-1];
		}
		else if(thumb == 6)
		{
			thumb1.style.border = bordernormal;
			thumb2.style.border = bordernormal;
			thumb3.style.border = bordernormal;
			thumb4.style.border = bordernormal;
			thumb5.style.border = bordernormal;
			thumb6.style.border = border;
			thumb7.style.border = bordernormal;
				
			tumb01Text.style.color = textnormaal;
			tumb02Text.style.color = textnormaal;
			tumb03Text.style.color = textnormaal;
			tumb04Text.style.color = textnormaal;
			tumb05Text.style.color = textnormaal;
			tumb06Text.style.color = text;
			tumb07Text.style.color = textnormaal;
			
			teller = 6;
			teller2 = 6;
			telleralg = lijst * 7 + 6;
			telleralg2 =lijst * 7 + 6;
			
			curImage = lijst * 7 + 5; 	
			
			var src = ((lijst * 7) + teller);			
			target.src = imageArray[src-1].src;
		
			var ref = document.getElementById('myImageText');
			ref.innerHTML = refArray[src-1];	
			titel.innerHTML = titelArray[src-1];
						

		}
		else if(thumb == 7)
		{
			thumb1.style.border = bordernormal;
			thumb2.style.border = bordernormal;
			thumb3.style.border = bordernormal;
			thumb4.style.border = bordernormal;
			thumb5.style.border = bordernormal;
			thumb6.style.border = bordernormal;
			thumb7.style.border = border;
				
			tumb01Text.style.color = textnormaal;
			tumb02Text.style.color = textnormaal;
			tumb03Text.style.color = textnormaal;
			tumb04Text.style.color = textnormaal;
			tumb05Text.style.color = textnormaal;
			tumb06Text.style.color = textnormaal;
			tumb07Text.style.color = text;
									
			teller = 7;
			teller2 = 7;
			telleralg = lijst * 7 + 7;
			telleralg2 =lijst * 7 + 7;
			
			curImage = lijst * 7 + 6; 	
						
			var src = ((lijst * 7) + teller);			
			target.src = imageArray[src-1].src;
		
			var ref = document.getElementById('myImageText');
			ref.innerHTML = refArray[src-1];
			titel.innerHTML = titelArray[src-1];

		}
		else
		{
		}
	}
}

function vorigeThumbs()
{
	if(isPlaying == 1);
	{
		notPlaying();
		pause = 1;
		clearTimers();	
		isPlaying = 0;
	}
	
	lijst--;	
	if(lijst < 0)
	{
		lijst = aantalLijsten - 1;
	}
	length = slides.length;
	lijsten = length / 7;
	aantalLijsten = Math.ceil(lijsten);
	
	changeThumbnails(lijst, aantalLijsten, length, 0);
	
	curImage = lijst * 7;
	teller2 = 1;
	telleralg2 = lijst * 7 +1;
	teller = 1;
	telleralg = lijst * 7 + 1;
	
	target.src = imageArray[curImage].src;
	ref.innerHTML = refArray[curImage];
	titel.innerHTML = titelArray[curImage];
	
	thumb1.style.border = border;
	thumb2.style.border = bordernormal;
	thumb3.style.border = bordernormal;
	thumb4.style.border = bordernormal;
	thumb5.style.border = bordernormal;
	thumb6.style.border = bordernormal;
	thumb7.style.border = bordernormal;
		
	tumb01Text.style.color = text;
	tumb02Text.style.color = textnormaal;
	tumb03Text.style.color = textnormaal;
	tumb04Text.style.color = textnormaal;
	tumb05Text.style.color = textnormaal;
	tumb06Text.style.color = textnormaal;
	tumb07Text.style.color = textnormaal;
}

function volgendeThumbs()
{
	if(isPlaying == 1);
	{
		notPlaying();
		pause = 1;
		clearTimers();	
		isPlaying = 0;
	}

	
	lijst++;
	if(lijst > aantalLijsten-1)
	{
		lijst = 0;
	}
	length = slides.length;
	lijsten = length / 7;
	aantalLijsten = Math.ceil(lijsten);
	changeThumbnails(lijst, aantalLijsten, length, 0);
	
	curImage = lijst * 7
	teller2 = 1;
	telleralg2 = lijst * 7 + 1;
	teller = 1;
	telleralg = lijst * 7 + 1;
	
	target.src = imageArray[curImage].src;
	ref.innerHTML = refArray[curImage];
	titel.innerHTML = titelArray[curImage];
	
	thumb1.style.border = border;
	thumb2.style.border = bordernormal;
	thumb3.style.border = bordernormal;
	thumb4.style.border = bordernormal;
	thumb5.style.border = bordernormal;
	thumb6.style.border = bordernormal;
	thumb7.style.border = bordernormal;
		
	tumb01Text.style.color = text;
	tumb02Text.style.color = textnormaal;
	tumb03Text.style.color = textnormaal;
	tumb04Text.style.color = textnormaal;
	tumb05Text.style.color = textnormaal;
	tumb06Text.style.color = textnormaal;
	tumb07Text.style.color = textnormaal;
}