window.onload = execSlider;
var slider = new Array();
	slider["groteFoto"] = new Array();
	slider["altgroteFoto"] = new Array();
	slider["kleinplaatje1"] = new Array();
	slider["altkleinplaatje1"] = new Array();
	slider["href1"] = new Array();
	slider["prijs1"] = new Array();
	slider["altprijs1"] = new Array();
	slider["lijst1"] = new Array();
	slider["kleinplaatje2"] = new Array();
	slider["altkleinplaatje2"] = new Array();
	slider["href2"] = new Array();
	slider["prijs2"] = new Array();
	slider["altprijs2"] = new Array();
	slider["lijst2"] = new Array();
	
function execSlider() {
	
	// Instellingen:
	tijd = 5500;
	
	// Een legestartfoto om het rode kruisje te vermijden, schrijf hieronder het pad naar de lege foto:
	LegeStartFoto = "http://www.archiefkasten-shop.nl/thumb/blank.jpg"

	/* VOEG ELEMENTEN TOE: */

		//---------- GROEP 1 -----------//
	// Plaats Grote Foto Link=
	var groteFoto = "http://www.archiefkasten-shop.nl/thumb/draaideurkast-archiefkast.gif";	
	var altgroteFoto = "Archiefkast draaideurkast";
	// Kleine foto rechts (boven)=
	var kleineFoto1 = "http://www.archiefkasten-shop.nl/thumb/draaideurkast.gif";
	var altKleineFoto1 = "Bisley hangmappenkast";
	var hrefkleineFoto1 = "http://www.archiefkasten-shop.nl/producten/68/Draaideurkast+Amsterdam/1305/";
	var prijskleineFoto1 = "http://www.archiefkasten-shop.nl/thumb/draaideurkast_prijs.gif"
	var altprijskleineFoto1 = "Prijs van de draaideurkast";
	
	
	var lijst1 = new Array(); // Hierin komen de eigenschappen van het object, dus de lijst van kleine foto
	// Je kan zo veel eigenschappen toevoegen als je wil, let op dat de lijst uit de box kan komen indien te groot wordt.
	lijst1.push(" - H195 / H180 x B120 x D45");  
	lijst1.push(" - Incl. 4 legplanken per kast");
	lijst1.push(" - Stabiele gelaste stalen corpus");
	// Kleine foto rechts (onder)=
	var kleineFoto2 = "http://www.archiefkasten-shop.nl/thumb/draaideurkasten-set.gif";
	var altKleineFoto2 = "Draaideurkast";
	var hrefkleineFoto2 = "http://www.archiefkasten-shop.nl/producten/68/Set+Draaideurkasten+Amsterdam+2+stuks/1307/";
	var prijskleineFoto2 = "http://www.archiefkasten-shop.nl/thumb/draaideurkast_prijs2.gif"
	var altprijskleineFoto2 = "Prijs van de Bisley hangmappenkast 2 laden";
	var lijst2 = new Array(); // Hierin komen de eigenschappen van het object, dus de lijst van kleine foto
	// Je kan zo veel eigenschappen toevoegen als je wil, let op dat de lijst uit de box kan komen indien te groot wordt.
	lijst2.push(" - Set van 2 draaideurkasten");  
	lijst2.push(" - Incl. 4 legplanken per kast");
	lijst2.push(" - Stabiele gelaste stalen corpus");
	
	addGroep(groteFoto, altgroteFoto,kleineFoto1,altKleineFoto1,hrefkleineFoto1,prijskleineFoto1,altprijskleineFoto1,lijst1, kleineFoto2,altKleineFoto2,hrefkleineFoto2,prijskleineFoto2,altprijskleineFoto2,lijst2);
		
	/*************************************
	 *            GROEP 2                *
	 *************************************/
	 
	groteFoto = "http://www.archiefkasten-shop.nl/templates/images/bisleyslider.gif";
	altgroteFoto = "Bisley Archiefkast";
	kleineFoto1 = "http://www.archiefkasten-shop.nl/thumb/bisley-hangmappenkast-4laden.gif";
	altKleineFoto1 = "Draaideurkast";
	hrefkleineFoto1 = "http://www.archiefkasten-shop.nl/thumb/bisley-hangmappenkast-4laden.gif";
	prijskleineFoto1 = "http://www.archiefkasten-shop.nl/thumb/hangmappenkast_prijs.gif"
	altprijskleineFoto1 = "Prijs van de draaideurkast amsterdam";
	var lijst1 = new Array(); 
	lijst1.push(" - 4 laden hangmappenkast");  
	lijst1.push(" - Verkrijgbaar in verschillende kleuren");
	lijst1.push(" - Volledig gelaste stalen romp");
	kleineFoto2 = "http://www.archiefkasten-shop.nl/thumb/bisley-hangmappenkast-2laden.gif";
	altKleineFoto2 = "Bisley hangmappenkast 2 laden";
	hrefkleineFoto2 = "http://www.archiefkasten-shop.nl/producten/76/Bisley+hangmapkast+2L/2250/";
	prijskleineFoto2 = "http://www.archiefkasten-shop.nl/thumb/hangmappenkast_prijs2.gif"
	altprijskleineFoto2 = "Prijs van de hangmappenkast 2 laden";
	var lijst2 = new Array(); 
	lijst2.push(" - 2 laden hangmappenkast");  
	lijst2.push(" - Verkrijgbaar in verschillende kleuren");
	lijst2.push(" - Volledig gelaste stalen romp");
	
	addGroep(groteFoto, altgroteFoto,kleineFoto1,altKleineFoto1,hrefkleineFoto1,prijskleineFoto1,altprijskleineFoto1,lijst1, kleineFoto2,altKleineFoto2,hrefkleineFoto2,prijskleineFoto2,altprijskleineFoto2,lijst2);
	
	/*************************************
	 *            GROEP 3                *
	 *************************************/
	 
	groteFoto = "http://www.archiefkasten-shop.nl/thumb/bisley_roldeurkast.gif";
	altgroteFoto = "Bisley Archiefkast";
	kleineFoto1 = "http://www.archiefkasten-shop.nl/thumb/roldeurkast-bisley.gif";
	altKleineFoto1 = "Bisley Roldeurkast";
	hrefkleineFoto1 = "http://www.archiefkasten-shop.nl/producten/94/Bisley+roldeurkast+Basic+695/2254/";
	prijskleineFoto1 = "http://www.archiefkasten-shop.nl/thumb/roldeurkast_prijs.gif"
	altprijskleineFoto1 = "Prijs van de Bisley roldeurkast";
	var lijst1 = new Array(); 
	lijst1.push(" - 5 jaar garantie");  
	lijst1.push(" - Inclusief lateraal legbord");
	lijst1.push(" - Afmeting: H69,5 x B120 x D43 cm");
	kleineFoto2 = "http://www.archiefkasten-shop.nl/thumb/roldeurkast_bisley_groot.gif";
	altKleineFoto2 = "Bisley roldeurkast groot";
	hrefkleineFoto2 = "http://www.archiefkasten-shop.nl/producten/94/Bisley+roldeurkast+Basic+1980/2256/";
	prijskleineFoto2 = "http://www.archiefkasten-shop.nl/thumb/roldeurkast_prijs2.gif"
	altprijskleineFoto2 = "Prijs van de Bisley roldeurkast";
	var lijst2 = new Array(); 
	lijst2.push(" - Verstelbare legplanken");  
	lijst2.push(" - Verkrijgbaar in verschillende kleuren");
	lijst2.push(" - Incl. 4 legplanken");
	
	addGroep(groteFoto, altgroteFoto,kleineFoto1,altKleineFoto1,hrefkleineFoto1,prijskleineFoto1,altprijskleineFoto1,lijst1, kleineFoto2,altKleineFoto2,hrefkleineFoto2,prijskleineFoto2,altprijskleineFoto2,lijst2);	
	
	// Je kan nog meerdere groepen toevoegen, kopieer dan hetzelfde zoals hierboven en wijzig de waarden 
	// om fouten te voorkomen.
	
	// Einde Toevoegen Elementen

	// Vanaf hier niets wijzigen
	clearTimeout(tt); // clear cache
	clearTimeout(fSlider);
	document.getElementById("groteFoto").src = LegeStartFoto;
	document.getElementById("kleineFoto1").src = LegeStartFoto;	
	document.getElementById("kleineFoto2").src = LegeStartFoto;	
	document.getElementById("groteFotoIn").src = LegeStartFoto;	
	document.getElementById("kleineFoto1In").src = LegeStartFoto;	
	document.getElementById("kleineFoto2In").src = LegeStartFoto;	
	loop();	
}

function addGroep(groteFoto, altgroteFoto, kleinplaatje1, altkleinplaatje1,href1, prijs1, altprijs1, lijst1
				  , kleinplaatje2,altkleinplaatje2,href2, prijs2, altprijs2, lijst2) {
	slider["groteFoto"].push(groteFoto);
	slider["altgroteFoto"].push(altgroteFoto);	
	slider["kleinplaatje1"].push(kleinplaatje1);
	slider["altkleinplaatje1"].push(altkleinplaatje1);
	slider["href1"].push(href1);
	slider["prijs1"].push(prijs1);
	slider["altprijs1"].push(altprijs1);
	slider["lijst1"].push(lijst1);
	slider["kleinplaatje2"].push(kleinplaatje2);
	slider["altkleinplaatje2"].push(altkleinplaatje2);
	slider["href2"].push(href2);
	slider["prijs2"].push(prijs2);
	slider["altprijs2"].push(altprijs2);
	slider["lijst2"].push(lijst2);

}

var teller = 0;
var tijd;
var tt;

function loop() {

if (teller>=slider["groteFoto"].length) {
	teller = 0;
}	
if (stoppen == 1) {
	clearTimeout(tt);
} else {
	show_group(teller);
	teller++;
	tt = setTimeout(loop, tijd); 
}
			
}

function show_group(nr) {
	nr = parseInt(nr);
	
	imgin = slider["groteFoto"][nr];
	k1imgin = slider["kleinplaatje1"][nr];
	k2imgin = slider["kleinplaatje2"][nr];
	
	fade(document.getElementById("groteFoto"),document.getElementById("groteFotoIn"),imgin,
			document.getElementById("kleineFoto1"),document.getElementById("kleineFoto1In"),k1imgin,
			document.getElementById("kleineFoto2"),document.getElementById("kleineFoto2In"),k2imgin);
	
	document.getElementById("groteFoto").alt = slider["altgroteFoto"][nr];

	document.getElementById("hrefkleineFoto1").href = slider["href1"][nr];
	document.getElementById("hrefkleineFoto1info").href = slider["href1"][nr];
	document.getElementById("kleineFoto1").alt = slider["altkleinplaatje1"][nr];
	document.getElementById("prijs1").src = slider["prijs1"][nr];
	document.getElementById("prijs1").alt = slider["altprijs1"][nr];
	
	printlijst(document.getElementById("lijst1"),slider["lijst1"][nr]);
	
	
	
	document.getElementById("hrefkleineFoto2").href = slider["href2"][nr];
	document.getElementById("hrefkleineFoto2info").href = slider["href2"][nr];
	document.getElementById("kleineFoto2").alt = slider["altkleinplaatje2"][nr];
	document.getElementById("prijs2").src = slider["prijs2"][nr];
	document.getElementById("prijs2").alt = slider["altprijs2"][nr];
	printlijst(document.getElementById("lijst2"),slider["lijst2"][nr]);

}

function printlijst(element,lijst) {
	element.innerHTML = "<ul>";
	for (i=0; i<lijst.length;i++) {
		element.innerHTML += "<li>" + lijst[i] + "</li>";
	}
	element.innerHTML += "</ul>";
}

var fadeTime = 100;
var fSlider;
function fade(imgelementOut,imgelementIn,imgIn, k1out, k1in, k1imgin, k2out,k2in, k2imgin) {

	imgelementIn.src = imgelementOut.src;
	k1in.src = k1out.src;
	k2in.src = k2out.src;
	imgelementOut.src = imgIn;
	k1out.src = k1imgin;
	k2out.src = k2imgin;

	
	// START FADING
	
	clearTimeout(tt);
	tempimgelementout = imgelementOut;
	tempk1out = k1out;
	tempk2out = k2out;
	tempvalue = 0;

	setOpacitySlider();
}
var tempvalue;
var tempimgelementout;
var tempk1out;
var tempk2out;
var fading = 0;
function setOpacitySlider() {
	fading = 1;
	
	tempimgelementout.style.opacity = tempvalue;
	tempimgelementout.style.filter = 'alpha(opacity=' + tempvalue*100 + ')';
	tempk1out.style.opacity = tempvalue;
	tempk1out.style.filter = 'alpha(opacity=' + tempvalue*100 + ')';
	tempk2out.style.opacity = tempvalue;
	tempk2out.style.filter = 'alpha(opacity=' + tempvalue*100 + ')';

	if (tempvalue < 1) {
		tempvalue = tempvalue + 0.1;
		fSlider = setTimeout(setOpacitySlider,fadeTime);
	}
	else {
		clearTimeout(fSlider);
		if (stoppen == 0 && fading == 1) 			
		tt = setTimeout(loop, tijd); 
		fading = 0;
	}
}


var stoppen = 0;
function wachtover() {
	if (stoppen == 0) {
	stoppen = 1;
	clearTimeout(tt);
	}
}

function wachtuit() {
	if (stoppen == 1) {
	stoppen = 0;
	if (fading==0)
	tt = setTimeout(loop, tijd);
	}
}