//-----------------------FOTO'S(JPG), TEKST EN LINK TOEVOEGEN--------------------------------------------------
var imageAndText= new Array();
	imageAndText = [ 
		['contentfoto01','Vergroot uw wooncomfort','Wij bieden u aanpassingen gericht op uw situatie','diensten.asp?id=7',null],
		['contentfoto02','Verlies geen warmte meer via het dak','TKE dakisolatie zorgt voor een aangenaam woonklimaat','diensten.asp?id=1',null],
		['contentfoto03','Wij denken na over uw situatie','Na gedegen onderzoek geven wij u advies op maat','diensten.asp?id=6',null],
		['contentfoto04','Energie besparen?','Met muurisolatie verlaagt u het energieverbruik in uw woning','diensten.asp?id=5',null],
		['contentfoto05','Voorkom koude lucht bij uw kozijnen','Met nieuwe kozijnen en isolerende beglazing houdt u warmte binnen','diensten.asp?id=2',null]
	];

//---------------------INTERVAL TIJD AANPASSEN----------------------------------------------	
var displayTime = 3000;	
	
//initialisatie
var imageAndTextSrc = "images/";
var imageAndTextEnd = ".jpg";

//preloader
var p = imageAndText.length;
for (i = 0; i < p; i++){
   imageAndText[i][4] = new Image();
   imageAndText[i][4].src = imageAndTextSrc+ imageAndText[i][0]+ imageAndTextEnd;
}

var imageNumber = 0;
var pageNumber = 1;
var arrayNumber = 0;
var autoImageChange = setInterval("changeImage()",displayTime);

function init(){
	writeImageAndText();
	writeNumber();
	currentImage();
}		

// vorige pijltje
function prev(){
	if(imageNumber<1){
  		arrayNumber = imageNumber
  	}else{
   		arrayNumber = imageNumber-=1;
  	}
	writeImageAndText();
  	if(imageNumber>1 && imageNumber<(imageAndText.length-2)){
 		pageNumber = imageNumber - 1;
 		writeNumber();
  	} 
   	currentImage();
	clearImageChange();
}

// volgende pijltje
function nextArrow(){
	next();
	clearImageChange();
}

//navigatie nummers veranderen
function numberChange(aElement){
	imageNumber = aElement.innerHTML - 1;
	arrayNumber = imageNumber;
	writeImageAndText();
	centerCurrentNumber();
	clearImageChange();
}

//controleren wat de huidige afbeelding is
function currentImage(){
	var currentNav = document.getElementById('nav1');
	var navId = currentNav.innerHTML;
	if(navId==(imageNumber+1)){
		document.getElementById('nav1').className = 'current';
	}else{
		document.getElementById('nav1').className = '';
	}
	var currentNav = document.getElementById('nav2');
	var navId = currentNav.innerHTML;
	if(navId==(imageNumber+1)){
		document.getElementById('nav2').className = 'current';
	}else{
		document.getElementById('nav2').className = '';
	}
	var currentNav = document.getElementById('nav3');
	var navId = currentNav.innerHTML;
	if(navId==(imageNumber+1)){
		document.getElementById('nav3').className = 'current';
	}else{
		document.getElementById('nav3').className = '';
	}
	var currentNav = document.getElementById('nav4');
	var navId = currentNav.innerHTML;
	if(navId==(imageNumber+1)){
		document.getElementById('nav4').className = 'current';
	}else{
		document.getElementById('nav4').className = '';
	}
	var currentNav = document.getElementById('nav5');
	var navId = currentNav.innerHTML;
	if(navId==(imageNumber+1)){
		document.getElementById('nav5').className = 'current';
	}else{
	document.getElementById('nav5').className = '';
	}
}

//zorgen dat het actieve nummer altijd in het midden staat, behalve bij laatste en eerste twee pagina's
function centerCurrentNumber(){
	var currentId = document.getElementById('nav3');
	var currentNumber = currentId.innerHTML;
	//volgende
	if((imageNumber +1) > currentNumber   &&   imageNumber > 2   &&   imageNumber<(imageAndText.length-2)){
		pageNumber = imageNumber - 1;
		writeNumber();
	}
	// volgende aan het eind
	if(currentNumber==(imageAndText.length-3)   &&   imageNumber==(imageAndText.length-2)){
		pageNumber = imageNumber -2 ;
		writeNumber();
		currentImage();
		clearImageChange();
	}
	// vorige
	if((imageNumber +1) < currentNumber   &&   imageNumber>1   &&    imageNumber<(imageAndText.length-2)){
		pageNumber = imageNumber - 1;
		writeNumber();
		currentImage();
	} 
	//vorige aan het eind
	if(currentNumber==(imageNumber + 3)   &&   imageNumber==1){
		pageNumber = imageNumber;
		writeNumber();
		currentImage();
	}else{
		currentImage();
	}
}

//automatisch volgende foto weergeven en teruggaan naar het begin als de laatste foto bereikt is
function changeImage(){
	if(imageNumber==(imageAndText.length-1)){
		imageNumber=-1;
	}
	next();
}

//interval verwijderen zodra gebruiker door de foto's gaat navigeren
function clearImageChange(){
	clearInterval(autoImageChange);
}

//opacity instellen voor elke browser
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

//plaatje en tekst plaatsen en faden
function writeImageAndText(){
	//faden
	var divid = 'content-foto';
	var imageid = 'imgSrc';
	var imagefile = imageAndText[arrayNumber][4].src;
	var millisec = 800;
	var speed = Math.round(millisec / 100);
    var timer = 0;
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
    changeOpac(0, imageid);
    document.getElementById(imageid).src = imagefile;
	for(x = 0; x <= 100; x++) {
        setTimeout("changeOpac(" + x + ",'" + imageid + "')",(timer * speed));
        timer++;
    }
	var blok = document.getElementById('upper'); 
	blok.innerHTML = imageAndText[arrayNumber][1]; 
	var blok = document.getElementById('lower'); 
    blok.innerHTML = imageAndText[arrayNumber][2];
	//link
	document.getElementById('imageLink').href= imageAndText[arrayNumber][3];
}

//nummmer van de pagina in de navigatiebalk plaatsen
function writeNumber(){
	var navNumbers1 = document.getElementById('nav1'); 
   	navNumbers1.innerHTML = pageNumber;
   	var navNumbers2 = document.getElementById('nav2'); 
   	navNumbers2.innerHTML = pageNumber + 1;
  	var navNumbers3 = document.getElementById('nav3'); 
   	navNumbers3.innerHTML = pageNumber + 2;
  	var navNumbers4 = document.getElementById('nav4'); 
   	navNumbers4.innerHTML = pageNumber + 3;
  	var navNumbers5 = document.getElementById('nav5'); 
   	navNumbers5.innerHTML = pageNumber + 4;
}

//volgende foto + tekst
function next(){
	if(imageNumber>(imageAndText.length-2)){
    	arrayNumber = imageNumber
  	}else{
    	arrayNumber = imageNumber+=1;
  	}
	writeImageAndText();
  	if(imageNumber>2 && imageNumber<(imageAndText.length-2)){
 		pageNumber = imageNumber - 1;
  		writeNumber();
 	} 
 	currentImage();
}

//als scherm laad initialisatie functie uitvoeren
window.onload=init;