$(document).ready(function(){
	
//event handlers

$('.knop').mouseenter(function(){
	this.childNodes[0].src='bol2.png';
});

$('.knop').mouseleave(function(){
	this.childNodes[0].src='bol.png';
});

$('.intext').click(function(){
	$('#exithf'+$(this).html()).fadeIn(800);
	$('#bovenbalk,#page').css('opacity','0.2');
		$('#hf'+$(this).html()).fadeIn(800);
		$('.hf'+$(this).html()).fadeIn(800);
		$('.hf'+$(this).html()).first().click();
		$('#idhf'+$(this).html()).fadeIn(100);
		$('body').css('overflow-y','hidden');
		window.scrollTo(0,0);
		});

$('#exit').click(function(){
	$('#exit, #volgende, #vorige, #fullimg').hide();
	$('footer').css('opacity','1');
	$('#bovenbalk').css('opacity','1');
	$('#page').css('opacity','1');
	$('body').css('overflow-y','scroll');
});
//startup code
var i=1;
setTimeout(function(){ slide(); },2000);
function slide(){
i++;
switch(i){
case 2:
old=1;
break;
case 3:
old=2;
break;
case 4:
i=1;
old=3;
}
$('#img'+(i+10)).fadeIn(2000);
$('#img'+(old+10)).fadeOut(2000);
setTimeout(function(){
	$('#img'+(i+5)).fadeIn(2000);
	$('#img'+(old+5)).fadeOut(2000);
},4000);
setTimeout(function(){
	$('#img'+i).fadeIn(2000);
	$('#img'+old).fadeOut(2000);
},8000);
setTimeout(function(){ slide(); },12000);
}
});

function e(id){
	return document.getElementById(id);
}
function vergroot(a){
	$('.picture').css('height',a);
}
function rs(){
	if(window.location.hash){
	size(window.location.hash.substring(1));
	}
}
function fullscreen(n,i,a,amount){			//called when user clicks image
	//some PHP code to detect mobile browser
		//scroll to top, for page scrolling will be disabled
	window.scrollTo(0,0);
	//disable scrolling
	$('body').css('overflow-y','hidden');
	//nearly fade out page's main elements
	$('footer').css('opacity','0.2');
	$('#bovenbalk').css('opacity','0.2');
	$('#page').css('opacity','0.2');
	//get, source and render image
	var img = document.getElementById('fullimg');
	img.src='fotos/'+n+'/'+i;
	size(a);
	//set page hash
	if(history.pushState){history.pushState(null, null, '#'+i);}else{location.hash = '#'+i;}
	//show control buttons
	$('#exit, #fullimg, #volgende, #vorige').show();
	//next button clickevent
	$('#volgende').click(function(){
	var oud=a;
	if(a<amount)
	a++;
	while(!document.getElementById('foto'+a)&&a<51){	//in case of image absence, keep increasing i 'til 51
		i++;
	}
	if(a!=51){
		//source and render
		img.src = document.getElementById('foto'+a).src;
		size(a);
		//reset hash
		if(history.pushState){history.pushState(null, null, '#'+a);}else{location.hash = '#'+a;}
	}else{
		a=oud;
	}
	});
	//same for the previous button
	$('#vorige').click(function(){
	if(a>1){
	a--;
	while(!document.getElementById('foto'+a)&&a>0){
		a--;
	}
	if(a!=0){
		//source and render
		img.src = document.getElementById('foto'+a).src;
		size(a);
		//reset hash
		if(history.pushState){history.pushState(null, null, '#'+a);}else{location.hash = '#'+a;}
	}
	}
	});
}
function size(i){
	//get image(data)
	console.log('foto'+i);
	var img = document.getElementById('fullimg');
	var x = document.getElementById('foto'+i).dataset.x;
	var y = document.getElementById('foto'+i).dataset.y;
	//check screen ratio and adjust image layout parameters
		$('#fullimg').css('top','50%');
		$('#fullimg').css('left','50%');
		$('#fullimg').css('transform','translate(-50%,-50%)');
	if((window.innerWidth)/(window.innerHeight)>x/y){	//breed scherm
		$('#fullimg').css('height','90%');
		$('#fullimg').css('width',window.innerHeight*(x/y)+'px');
	}else{														//hoog scherm
		$('#fullimg').css('width','90%');
		$('#fullimg').css('height',window.innerWidth*(y/x)+'px');
	}
}
function setInHF(name,n){
	//get image data
	var x = document.getElementsByClassName('hf'+name)[n-1].dataset.x;
	var y = document.getElementsByClassName('hf'+name)[n-1].dataset.y;
	var pic = document.getElementsByClassName('hf'+name)[n-1].src;
	//margin of minipictures array
	var wor = document.getElementById('hfcontainer'+name).dataset.wor;
	var ml = (parseInt(window.innerWidth)-wor)/2;
	$('.hf'+name).css('transform','translate('+ml+'px,0)');
	//set page hash
	if(history.pushState){history.pushState(null, null, '#'+name+'/'+n);}else{location.hash = '#'+name+'/'+n;}
	//change image source
	document.getElementById('idhf'+name).src=pic;
	//check screen ratio
	if((window.innerWidth-100)/(window.innerHeight-154)>x/y){	//breed scherm
		$('#idhf'+name).css('height',window.innerHeight-154+'px');
		$('#idhf'+name).css('top','50px');
		$('#idhf'+name).css('transform','translate(-50%,0)');
		var w = (window.innerHeight-154)*x;
		console.log('width: '+w/y)
		$('#idhf'+name).css('width',w/y+'px');
	}else{														//hoog scherm
		$('#idhf'+name).css('width',window.innerWidth-100+'px');
		var h = (window.innerWidth-100)*y;
		$('#idhf'+name).css('height',h/x+'px');
		$('#idhf'+name).css('top','50%');
		$('#idhf'+name).css('transform','translate(-50%,-50%)');
	}
}
function exitHF(name){
	//reset some things
	$('#exithf'+name).fadeOut(800);
		$('#idhf'+name).fadeOut(800);
		$('#hf'+name).fadeOut(800);
		$('.hf'+name).fadeOut(800);
		$('body').css('overflow-y','scroll');
		$('#bovenbalk,#page').css('opacity','1');
}
//$(window).resize(function(){
//	if ($('#realpage').width() < 250) {
//
    //$('#pictures').css('width','0px');
	//$('#pictures').hide();
	//$('#realpage').css('width','calc(100% - 90px)');
//
//  } else {
//
    //$('#pictures').css('width','160px');
	//$('#pictures').show();
	//$('#realpage').css('width','calc(100% - 250px)');
    //}
//});*/