function fix_absolute(){			
	var offsetX = 0;
	var offsetY = 0;

	//IE
	if(!window.pageYOffset)
	{
		//strict mode
		if(!(document.documentElement.scrollTop == 0))
		{
			offsetY = document.documentElement.scrollTop;
			offsetX = document.documentElement.scrollLeft;
		}
		//quirks mode
		else
		{
			offsetY = document.body.scrollTop;
			offsetX = document.body.scrollLeft;
		}
	}
	//w3c
	else
	{
		offsetX = window.pageXOffset;
		offsetY = window.pageYOffset;
	}

return{x:offsetX,y:offsetY};
	
}

function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }
  
   function findPosY(obj)
  {
    var curtop = 0;
	if(obj){
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
	}
  }



document.addEvent('keydown', function(event){
    		event = new Event(event);
   			//alert(event.key);
			 if (event.key == 'left' || event.key == 'up'){
			
			if(window.varupper != 'none_next'){
			  vorige_foto( window.varupper );
			 }
			
			
			
			 }
			 if (event.key == 'right' || event.key == 'down' ){
			 
			 	if(window.varupper != 'none_previeus'){
			 volgende_foto( window.varupper );
			 }
			 
			 }
			
			 
				});	

//volgende foto
function volgende_foto(foto){
var fotoalbum = new Array(); 

//Zet img tags in array
var fotoalbum=document.getElementsByTagName("*");

//loop alle afbeeldingen na en controleer op class
for (i=0; i<fotoalbum.length; i++) 

		{



//pak de juiste class
if (fotoalbum[i].className=='fotoalbum_thumb' )

			 {
//document.write(fotoalbum[i].src)




var longstring=fotoalbum[i].src;

brokenstring=longstring.split("/");
var aantal = brokenstring.length;
var aantal = aantal -1;
foto = foto.replace(' ','%20');
if(foto == brokenstring[aantal] ){

var n = i + 1;

if(fotoalbum[n].className == 'fotoalbum_thumb'){


var volgende_longstring=fotoalbum[n].src;

volgende_brokenstring=volgende_longstring.split("/");
var volgende_aantal = volgende_brokenstring.length;
var volgende_aantal = volgende_aantal -1;

if (document.getElementById(volgende_brokenstring[aantal])){
open_foto(brokenstring[aantal]);
window.varupper = volgende_brokenstring[aantal];
}else{

open_foto(brokenstring[aantal]);
open_foto(volgende_brokenstring[aantal]);
}
}else{
open_foto(brokenstring[aantal]);
window.varupper = 'none_previeus';
//document.getElementById(brokenstring[aantal]).style.display = "block";
}
}
}

			}
		
}

function vorige_foto(foto){
var fotoalbum = new Array(); 

//Zet img tags in array
var fotoalbum=document.getElementsByTagName("*");

//loop alle afbeeldingen na en controleer op class
for (i=0; i<fotoalbum.length; i++) 
		{
//pak de juiste class
if (fotoalbum[i].className=='fotoalbum_thumb')
			 {
//document.write(fotoalbum[i].src)


var longstring=fotoalbum[i].src;

brokenstring=longstring.split("/");
var aantal = brokenstring.length;
var aantal = aantal -1;
foto = foto.replace(' ','%20');
if(foto == brokenstring[aantal] ){


var n = i - 1;

if(fotoalbum[n].className == 'fotoalbum_thumb' ){


var volgende_longstring=fotoalbum[n].src;

volgende_brokenstring=volgende_longstring.split("/");
var volgende_aantal = volgende_brokenstring.length;
var volgende_aantal = volgende_aantal -1;

if (document.getElementById(volgende_brokenstring[aantal])){
open_foto(brokenstring[aantal]);
window.varupper = volgende_brokenstring[aantal];

}else{

open_foto(brokenstring[aantal]);
open_foto(volgende_brokenstring[aantal]);
}

}else{
open_foto(brokenstring[aantal]);
window.varupper = 'none_next';
//document.getElementById(brokenstring[aantal]).style.display = "block";

}

}

			}
		}
}



//openen
function open_foto(foto){



var fotoalbum_proto = new Array(); 

//Zet img tags in array
var fotoalbum_proto=document.getElementsByTagName("*");

//loop alle afbeeldingen na en controleer op class
for (q=0; q<fotoalbum_proto.length; q++) 
		{
		
//pak de juiste class
if (fotoalbum_proto[q].className=='fotoalbum_thumb')
			 {

var zet_div1=fotoalbum_proto[q].src;

zet_div2=zet_div1.split("/");
var aantal_fotos = zet_div2.length;


var locatie = zet_div2[aantal_fotos -5 ] + '/' + zet_div2[aantal_fotos -4 ] + '/' + zet_div2[aantal_fotos -3];
var bestandsnaam = zet_div2[aantal_fotos - 1];
//alert(bestandsnaam);
titel = fotoalbum_proto[q].title;
foto = foto.replace(' ','%20');
//alert(foto + ' | ' + bestandsnaam);



if(bestandsnaam == foto){



 if (document.getElementById(foto)){
 //alert('esc pressed' )
 /*hier sluit animatie plaatsen */
 //alert('sluiten');
 //SLUITEN

var afbeelding = new Asset.images(['' + locatie + '/' + bestandsnaam + ''], {
     
	onComplete: function(){
 var pic_width = afbeelding[0].width; 
 var pic_height =  afbeelding[0].height;

var fotoalbum_proto = new Array(); 

//Zet img tags in array
var fotoalbum_proto=document.getElementsByTagName("*");

//loop alle afbeeldingen na en controleer op class
for (q=0; q<fotoalbum_proto.length; q++) 
		{
	// alert('esc pressed 3' )	
//pak de juiste class
if (fotoalbum_proto[q].className=='fotoalbum_thumb')
			 {
//alert('esc pressed 4' )
var zet_div1=fotoalbum_proto[q].src;

zet_div2=zet_div1.split("/");
var aantal_fotos = zet_div2.length;
var locatie = zet_div2[aantal_fotos -5 ] + '/' + zet_div2[aantal_fotos -4 ] + '/' + zet_div2[aantal_fotos -3];
var bestandsnaam = zet_div2[aantal_fotos - 1];
//alert(bestandsnaam);
titel = fotoalbum_proto[q].title;
foto = foto.replace(' ','%20');
//alert(foto + ' | ' + bestandsnaam);



if(bestandsnaam == foto){
/*locatie om te plaatsen */

var theWidth, theHeight;
// Window dimensions:
if (window.innerWidth) {
theWidth=window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth) {
theWidth=document.documentElement.clientWidth;
}
else if (document.body) {
theWidth=document.body.clientWidth;
}
if (window.innerHeight) {
theHeight=window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
theHeight=document.documentElement.clientHeight;
}
else if (document.body) {
theHeight=document.body.clientHeight;
}

//alert(theWidth + ' x ' + theHeight);

var winW = theWidth;
var winH = theHeight;


if(window.expand != 'done'){

if(pic_width > (0.8 * winW)){
var pic_width_new = (0.8 * winW);
var pic_height_math = (pic_width_new / pic_width );
//alert(pic_height_math); 

pic_height = (pic_height_math * pic_height);
pic_width = pic_width_new; 

//alert(pic_width + '*' + pic_height);

}

if(pic_height > (0.9 * winH)){
var pic_height_new = (0.9 * winH);
var pic_width_math = (pic_height_new / pic_height );
//alert(pic_height_math); 

pic_width = (pic_width_math * pic_width);
pic_height = pic_height_new; 

//alert(pic_width + '*' + pic_height);

}
}
//alert(winW + ' x ' + winH);
var element = document.getElementById(foto);

var loc_imgY = findPosY(element)
var loc_imgX = findPosX(element) 

var tekstboxY = pic_height - 19;
var tekstboxX = loc_imgX + 3;


/*animatie */



 var mijntextboxoud = document.getElementById('textbox_afbeelding_' + foto);
 document.getElementById('bediening_' + foto).style.display = 'none';
mijntextboxoud.style.display = 'none';

if(document.getElementById('expand' + foto)){
document.getElementById('expand' + foto).style.display = 'none';
}
				 
var element = $( foto );
 var effects = new Fx.Morph (element, {
 duration:400,
 transition: Fx.Transitions.Cubic.easeInOut,
 onComplete: function(){
  var oudediv = document.getElementById( foto );
  if(oudediv){
  //document.getElementById('fotoalbum').removeChild(nieuwediv);
  
  var oudetextbox = document.getElementById('textbox_afbeelding_' + foto ); 
  var oudefoto = document.getElementById('foto' + foto);
  
  oudediv.removeChild(oudetextbox);
oudediv.removeChild(oudefoto);
document.getElementById('fotoalbum').removeChild(oudediv);
	 }
	 
	 }
 
 });
    effects.start({
      
	
        'left': [ loc_imgX + 'px',findPosX(fotoalbum_proto[q]) + 'px'],
		 'top': [ loc_imgY + 'px',findPosY(fotoalbum_proto[q]) + 'px'],
 		'padding': ['3px','0px'],
        'width': [(pic_width + 2) + 'px',fotoalbum_proto[q].width + 'px' ],
		'height': [pic_height+ 'px',fotoalbum_proto[q].height + 'px']
		
      
    });
 
  var mijnfoto = $('foto' + bestandsnaam);
  var effectsz = new Fx.Morph (mijnfoto, {
 duration:400,
 transition: Fx.Transitions.Cubic.easeInOut
 
 
 });
 
 
 
    effectsz.start({
        'width': [pic_width+ 'px',fotoalbum_proto[q].width + 'px'],
		'height': [pic_height+ 'px',fotoalbum_proto[q].height + 'px']
		
      
    });
	
	
	} 
						}
						
			 }
			 
     }    
  

	
});
	
 
 } else {
//laden weergeven

//OPENEN
window.expand = 'nee';

fotoalbum_proto[q].alt = titel;

  nieuw_loadDiv = document.createElement("div");
   nieuw_loadDiv.setAttribute('id','load_' + bestandsnaam +'');
 	nieuw_loadDiv.innerHTML = '<img src="system/fotoalbum/loader.white.gif" alt="load" /> laden...';
   nieuw_loadDiv.style.position = 'absolute';
    nieuw_loadDiv.style.left = findPosX(fotoalbum_proto[q]) + 'px';	
    var load_height =  findPosY(fotoalbum_proto[q]) + (fotoalbum_proto[q].height / 2) - 10  ;
	nieuw_loadDiv.style.top = load_height + 'px';	
  	 nieuw_loadDiv.style.padding = '3px';
	  nieuw_loadDiv.style.height =  '20px';
 nieuw_loadDiv.style.zIndex = '0';
	   nieuw_loadDiv.style.width = (fotoalbum_proto[q].width -2) + 'px';
	 nieuw_loadDiv.className = 'fotoalbum_laden';

	document.getElementById('fotoalbum').appendChild(nieuw_loadDiv);


 //alert('' + locatie + '/' + bestandsnaam + '');
//afbeeldingin laden

var afbeelding = new Asset.images(['' + locatie + '/' + bestandsnaam + ''], {
     
	onComplete: function(){
	
 var pic_width = afbeelding[0].width; 
 var pic_height =  afbeelding[0].height;
  
   
   
		//verwijder loaddiv
   document.getElementById('fotoalbum').removeChild(nieuw_loadDiv);
      
	  

var fotoalbum_proto = new Array(); 

//Zet img tags in array
var fotoalbum_proto=document.getElementsByTagName("*");

//loop alle afbeeldingen na en controleer op class
for (q=0; q<fotoalbum_proto.length; q++) 
		{
		
//pak de juiste class
if (fotoalbum_proto[q].className=='fotoalbum_thumb')
			 {

var zet_div1=fotoalbum_proto[q].src;

zet_div2=zet_div1.split("/");
var aantal_fotos = zet_div2.length;
var locatie = zet_div2[aantal_fotos -5 ] + '/' + zet_div2[aantal_fotos -4 ] + '/' + zet_div2[aantal_fotos -3];
var bestandsnaam = zet_div2[aantal_fotos - 1];
//alert(bestandsnaam);
titel = fotoalbum_proto[q].title;
foto = foto.replace(' ','%20');
//alert(foto + ' | ' + bestandsnaam);



if(bestandsnaam == foto){
/*locatie om te plaatsen */



var theWidth, theHeight;
// Window dimensions:
if (window.innerWidth) {
theWidth=window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth) {
theWidth=document.documentElement.clientWidth;
}
else if (document.body) {
theWidth=document.body.clientWidth;
}
if (window.innerHeight) {
theHeight=window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
theHeight=document.documentElement.clientHeight;
}
else if (document.body) {
theHeight=document.body.clientHeight;
}

//alert(theWidth + ' x ' + theHeight);

var winW = theWidth;
var winH = theHeight;

var pic_height_org = pic_height;
var pic_width_org = pic_width ;


if(pic_width > (0.8 * winW)){
var pic_width_new = (0.8 * winW);
var pic_height_math = (pic_width_new / pic_width );
//alert(pic_height_math); 
var aanpassing = 'ja';


pic_height = (pic_height_math * pic_height);
pic_width = pic_width_new; 

//alert(pic_width + '*' + pic_height);

}

if(pic_height > (0.9 * winH)){
var pic_height_new = (0.9 * winH);
var pic_width_math = (pic_height_new / pic_height );
//alert(pic_height_math); 

var aanpassing = 'ja';

pic_width = (pic_width_math * pic_width);
pic_height = pic_height_new; 

//alert(pic_width + '*' + pic_height);

}


//alert(winW + ' x ' + winH);
var loc_imgY = (winH / 2) -  (pic_height / 2); 
var loc_imgX =  (winW / 2) -  (pic_width / 2); 

var tekstboxY = pic_height - 19;
var tekstboxX = loc_imgX + 3;


/*hier open animatie plaatsen */
  nieuwDiv = document.createElement("div");
   nieuwDiv.setAttribute('id','' + bestandsnaam +'');
 //nieuwDiv.innerHTML = '<img src="' + locatie + '/' + bestandsnaam + '" id="foto' + bestandsnaam + '" border="0" width="' + fotoalbum_proto[q].width + '"  alt="' + titel + '"  margin: 0px; "  >';

  
  
  // in het midden zetten
   nieuwDiv.style.left = findPosX(fotoalbum_proto[q])  + 'px';	
  nieuwDiv.style.top = findPosY(fotoalbum_proto[q]) + 'px';
  nieuwDiv.style.width = fotoalbum_proto[q].width;	
   nieuwDiv.style.height = fotoalbum_proto[q].height;	
  
  
  //bug voorkomen
   var titel_final = titel; 
  var bestandsnaam_final = bestandsnaam;
  
	window.varupper = foto;
  
  nieuwDiv.className = 'fotoalbum_imggroot';

	document.getElementById('fotoalbum').appendChild(nieuwDiv);

//creer tekstvlak
//<div align="left" class="textbox_afbeelding" id="textbox_afbeelding_' + foto + '"  ></div>
  nieuwDiv_tekstvlak = document.createElement("div");
   nieuwDiv_tekstvlak.setAttribute('id','textbox_afbeelding_' + foto);
  nieuwDiv_tekstvlak.align ='left';
    nieuwDiv_tekstvlak.className = 'textbox_afbeelding';
	nieuwDiv_tekstvlak.style.width = (pic_width - 3) + 'px';
	nieuwDiv.appendChild(nieuwDiv_tekstvlak);

//creer bediening
//<div align="left" class="textbox_afbeelding" id="textbox_afbeelding_' + foto + '"  ></div>
  nieuwDiv_bediening = document.createElement("div");
   nieuwDiv_bediening.setAttribute('id','bediening_' + foto);
   nieuwDiv_bediening.innerHTML = '<img src="system/fotoalbum/arrow_left.gif" title="vorige afbeelding" border="0"  onclick="vorige_foto(\'' + bestandsnaam_final + '\');" />&nbsp;&nbsp;<img src="system/fotoalbum/arrow_right.gif" title="volgende afbeelding" border="0" onclick="volgende_foto(\'' + bestandsnaam_final + '\');"  />&nbsp;&nbsp;<img src="system/fotoalbum/close.gif" title="sluit deze afbeelding" border="0" onclick="open_foto(\'' + bestandsnaam_final + '\');" />&nbsp;';
    nieuwDiv_bediening.className = 'bediening_afbeelding';
nieuwDiv_bediening.align ='right';
	nieuwDiv.appendChild(nieuwDiv_bediening);


//creer foto //zet_div2[aantal_fotos -5 ] + '/' + zet_div2[aantal_fotos -4 ] + '/' + zet_div2[aantal_fotos -3];
//alert(locatie + '/' + bestandsnaam);
nieuwFOTO = document.createElement("img");
   nieuwFOTO.setAttribute('id','foto' + bestandsnaam_final);
  nieuwFOTO.src = locatie + '/' + bestandsnaam;
    nieuwFOTO.width=fotoalbum_proto[q].width;
	 nieuwFOTO.title="klik om afbeelding te sluiten";
	nieuwDiv.appendChild(nieuwFOTO);
	
if(aanpassing == 'ja'){
nieuwEXPEND = document.createElement("div");
   nieuwEXPEND.setAttribute('id','expand' + bestandsnaam_final);
  nieuwEXPEND.innerHTML = '<img src="system/fotoalbum/fullexpand.gif" title="bekijk de afbeelding op ware grootte" width="34" height="34" >';
    nieuwEXPEND.style.width='34';
	nieuwEXPEND.style.height='34';
	 nieuwEXPEND.className = "fotoalbum_expand";
	nieuwDiv.appendChild(nieuwEXPEND);

}
/*animatie */


 var effects = new Fx.Morph (nieuwDiv, {
 duration:400,
 transition: Fx.Transitions.Cubic.easeInOut,
  onComplete: function(){
						
				
					//bediening knoppen!!
					//alert(nieuwDiv.id)
				$(nieuwDiv.id).addEvents({
		'mouseenter': function(){
			// laat knoppen zien, 		
					
					if($('bediening_' + foto).getStyle('opacity') != '0.60'){
					var mijnbediening = $('bediening_' + foto); 
 					 var  effectsbediening_openen = new Fx.Morph (mijnbediening, {
					 duration:500,
					 transition: Fx.Transitions.Cubic.easeInOut
					 					 			 
					  }); 
					  effectsbediening_openen.start({
      
		'opacity': ['0','0.60']
		     
    			}); 
			
					}
		},
		'mouseleave': function(){
			// haal Knoppen weg
			 var mijnbediening = $('bediening_' + foto); 
 					 var  effectsbediening_openen = new Fx.Morph (mijnbediening, {
					 duration:500,
					 transition: Fx.Transitions.Cubic.easeInOut
					 					 			 
					  }); 
					  effectsbediening_openen.start({
      
		'opacity': ['0.60','0']
		     
    			}); 
		}
	});
	
					
					 var mijnbediening = nieuwDiv_bediening; 
 					 var  effectsbediening_openen = new Fx.Morph (mijnbediening, {
					 duration:400,
					 transition: Fx.Transitions.Cubic.easeInOut
					 					 			 
					  }); 
					  effectsbediening_openen.start({
      
		'opacity': ['0','0.60']
		     
    			}); 
						
						
						
						//EXPAND
						if(aanpassing == 'ja'){
						var elem = $('expand' + bestandsnaam_final);
						
						 var mijnexpand = elem; 
 					 var  effectexpand_openen = new Fx.Morph (mijnexpand, {
					 duration:400,
					 transition: Fx.Transitions.Cubic.easeInOut
					 					 			 
					  }); 
					  effectexpand_openen.start({
      
		'opacity': ['0','0.60']
		     
    			}); 
						
						
						elem.addEvent('mousedown', function() {
					
		
			window.expand = 'ja';
			
 					 var effectstext = new Fx.Morph (nieuwDiv, {
					 duration:300,
					 transition: Fx.Transitions.Cubic.easeInOut
									 
					  }); 
					  effectstext.start({
      
		  'width': [(pic_width)+ 'px' + 'px' ,(pic_width_org)+ 'px'],
		'height': [pic_height + 'px',pic_height_org+ 'px']
		
      
    			}); 
					 var mijnfoto = nieuwFOTO; 
 					 var effectsfoto = new Fx.Morph (mijnfoto, {
					 duration:300,
					 transition: Fx.Transitions.Cubic.easeInOut,
					 	onStart: function(){
							nieuwDiv_tekstvlak.style.display = 'none';
						},
					 
						onComplete: function() {
							window.expand = 'done';
							nieuwDiv_tekstvlak.style.display = 'block';
							nieuwDiv_tekstvlak.style.width = (pic_width_org - 3) + 'px';
						}
					  }); 
					  effectsfoto.start({
      
		  'width': [(pic_width)+ 'px' + 'px' ,(pic_width_org)+ 'px'],
		'height': [pic_height + 'px',pic_height_org+ 'px']
		
      
    			});  
					  
					  var elem = $('expand' + bestandsnaam_final);
						
						 var mijnexpand2 = elem; 
 					 var  effectexpand_openen2 = new Fx.Morph (mijnexpand2, {
					 duration:400,
					 transition: Fx.Transitions.Cubic.easeInOut
					 					 			 
					  }); 
					  effectexpand_openen2.start({
      
		'opacity': ['0.6','0.0']
		     
    			}); 
					  
		
					 
							
															   });
						}
						
						//expand
					nieuwFOTO.addEvent('mousedown', function(){	
	window.leftx = findPosX(nieuwDiv);
	window.topy =  findPosY(nieuwDiv);
	});	
		
		nieuwFOTO.addEvent('mouseup', function(){
			
		var left_old = window.leftx.toInt(); 
        var top_old = window.topy.toInt();
		var left_new = findPosX(nieuwDiv).toInt();
		var top_new = findPosY(nieuwDiv).toInt();
		
		
		
	if(left_new == left_old && top_new == top_old){

	if(window.expand != 'ja' || window.expand == 'done' ){
	open_foto( bestandsnaam_final )
	} 
	}
		
		});			
		
		
					nieuwDiv.makeDraggable(); 
						
															   
								
					if(titel_final != ""){
						var mijntextbox = nieuwDiv_tekstvlak; 
 					 var effectstext = new Fx.Morph (mijntextbox, {
					 duration:300,
					 transition: Fx.Transitions.Cubic.easeInOut,
					 onComplete: function(){
					 mijntextbox.innerHTML = '&nbsp;&nbsp;<b>' + titel_final + '</b>';
				

					 } 
					 
					  }); 
					  effectstext.start({
      
		'height': [0 + 'px',20 + 'px']
		
      
    			}); 
					}

 }
 
 });
    effects.start({
      
		
        'left': [findPosX(fotoalbum_proto[q]) + 'px', loc_imgX + 'px'],
		 'top': [findPosY(fotoalbum_proto[q]) + 'px', (fix_absolute().y + loc_imgY) + 'px'],

        'width': [fotoalbum_proto[q].width + 'px' ,(pic_width)+ 'px'],
		'height': [fotoalbum_proto[q].height + 'px',pic_height+ 'px']
		
      
    });
	
	
 var mijnfoto = nieuwFOTO;
  var effectsz = new Fx.Morph (mijnfoto, {
 duration:400,
 transition: Fx.Transitions.Cubic.easeInOut


 
 
 });
    effectsz.start({
        'width': [fotoalbum_proto[q].width + 'px' ,pic_width+ 'px'],
		'height': [fotoalbum_proto[q].height + 'px',pic_height+ 'px'],
		'padding': ['3px','0px']
      
    }) ; 

 
						}
						
			 }
			 
     }    
  
	
	}
});


}
	
}	
			 }
		}
		
		
		

}