window.addEvent('domready', function() { //starten van het dom event hoort bij mootools
new Asset.images(['cms/upload_img/loading.jpg'], {
onComplete: function(){
	var addbutton = function(image, nr) { //functie voor het toevoegen van de 4kantjes
		var el     = new Element('a', {'id':'link','class':nr,'href':'#'}); //de link
		var img    = new Element('img', {'src': 'img/img.gif', 'title':image.description , 'id':'link'+nr }).injectInside(el); //in de link de afbeeldingen
		var space  = new Element('span').setHTML(' ').injectAfter(img); //daarna een spatie
		//el.injectInside($('footer_right'));
		$('link'+nr).addEvents({ //en dan een fucntionaliteit.
			'click': function() { //een onclick
				//var breed = Math.round($('img').getStyle('width').toInt());
				//console.log(images[nr].src);
				//$('band').setStyle('background','url(includes/'+images[nr].src+'&breed='+breed+') top right no-repeat');
				change_rest(image,nr); //veranderen van afbeeldingen
				kill(); //de rolatie stilleggen
				//change_but(nr); //blokje kleuren en de rest ontkleuren
			}
		});
	}
		
	var change_img = function(image,nr) { //functie voor het veranderen van de afbeeldigen
		
		if(window.gecko){ //fix voor firefox
			var high = $('band').getStyle('height'); //even een geforceerde hoogte
			$('band').setStyle('height',high);

			(function(){$('band').setStyle('height','');}).delay(1500); //en weer loslaten
		}	
		
	var fx = new Fx.Styles($('img'), {duration:900, wait:false}); //in 900 miliseconden de opicity terug laten lopen naar 0.
		fx.start({
		'opacity': 0
	});
	(function(){
		$('img').empty(); //de div img legen
		var breed = Math.round($('band').getStyle('width').toInt()*0.7);
		var el = new Element('img',{'src': 'includes/' + image.src + '&breed=' + breed, 'id':'img_content', 'class':'scaler','title':'next image'});
		el.injectInside($('img')); //en opnieuw vullen

		change_but(nr);
		
		if(images.indexOf(image)+1==images.length){var next = 0}else{var next = images.indexOf(image)+1} //preloaden??
		(function(){
			$('img_back').empty(); //de div img legen	  
			var el_2 = new Element('img',{'src': 'includes/' + images[next].src + '&breed=' + breed, 'class':'scaler'});
			el_2.injectInside($('img_back')); //en opnieuw vullen
		}).delay(1500);
		
		var fx = new Fx.Styles($('img'), {duration:900, wait:false}); //en in 900 miliseconden terug naar 100% zichtbaar.
			fx.start({
			'opacity': 1
		});
	}).delay(1000); //dit 1000 miliseconde uitstellen zodat het naar het uitfaden valt
		var temp_event = function(){
			if(images.indexOf(image)+1==images.length){var next_nr = 0}else{var next_nr = nr+1}
			kill(); //de rolatie stilleggen
			change_rest(images[next_nr],next_nr);
			$('img').removeEvent('click',temp_event);
		}
		$('img').addEvent('click',temp_event);
	}

	var change_rest = function(image,nr) { //functie voor het veranderen van de afbeeldigen
		if(window.gecko){ //fix voor firefox
			var high = $('band').getStyle('height'); //even een geforceerde hoogte
			$('band').setStyle('height',high);

			(function(){$('band').setStyle('height','');}).delay(1500); //en weer loslaten
		}	
		
		$('img_back').empty(); //de div img legen
		var breed = Math.round($('band').getStyle('width').toInt()*0.7);
		var el_2 = new Element('img',{'src': 'includes/' + image.src + '&breed=' + breed, 'id':'img_content_2', 'class':'scaler'});
		
		new Asset.images(['includes/' + image.src + '&breed=' + breed], {
			onComplete: function(){
			el_2.injectInside($('img_back')); //en opnieuw vullen
				(function(){ 
					change_but(nr);	  
						  
					var fx = new Fx.Styles($('img'), {duration:450, wait:false}); //en in 900 miliseconden terug naar 100% zichtbaar.
						fx.start({
						'opacity': 0
					});
				
					(function(){
						$('img').empty(); //de div img legen
						var breed = Math.round($('band').getStyle('width').toInt()*0.7);
						var el = new Element('img',{'src': 'includes/' + image.src + '&breed=' + breed, 'id':'img_content', 'class':'scaler','title':'next image'});
						el.injectInside($('img')); //en opnieuw vullen
					}).delay(250);
					(function(){
						var fx = new Fx.Styles($('img'), {duration:450, wait:false}); //en in 900 miliseconden terug naar 100% zichtbaar.
						fx.start({
						'opacity': 1
						});	  
					}).delay(500);
				}).delay(600); //dit 1000 miliseconde uitstellen zodat het naar het uitfaden valt
			}
		})
		var temp_event = function(){
			if(images.indexOf(image)+1==images.length){var next_nr = 0}else{var next_nr = nr+1}
			change_rest(images[next_nr],next_nr);
			$('img').removeEvent('click',temp_event);
		}
		$('img').addEvent('click',temp_event);
	}
	
	
	//de blokjes laten verschijnen
	var myChain = new Chain();
	images.each(function(element){
		myChain.chain(function(){ 
		addbutton(element, images.indexOf(element));
		}); 
	});
	var runChain = function() { 
		myChain.callChain();
		if (myChain.chains.length == 0) { runChain = $clear(timer); } 
	}
	var timer = runChain.periodical(200);
	
	//image rolatie afbeeldigen vermenigvuldigen	
	var images_mult = images.copy();
	for(q=0;q<10;q++){
		var images_mult = images_mult.extend(images);
	}
	
	//Afbeeldingen laten roeleren
	var chain_2 = new Chain();
	images_mult.each(function(el2){
		chain_2.chain(function(){
		change_img(el2, images_mult.indexOf(el2));
		});
	});
	var runChain2 = function(klik) {
		chain_2.callChain();
		if (chain_2.chains.length == 0) {runChain2 = $clear(timer2);}
		
	}

	var time=0 //eerste afbeelding starten met tijd 0

	var timer2 = runChain2.periodical(time); //start de timer
	$clear(timer2); //en zet hem uit.
	
	var time=7500 // 7500 miliseconden rolatie tijd instellen
	
	var timer2 = runChain2.periodical(time); //en start de timer maar weer....
	
	var kill = function(){
		$clear(timer2);
	}
	
	var change_but = function(nr){ //vakje van kleur laten veranderen 
		var list = $$('#footer_right a img'); //lijstje met de knopjes
		list.each(function(element){ //ren door het lijstje heen.
			if('link'+nr==element.getProperty('id')){ //als het de active is op vol zetten
				element.setProperty('src','img/img_act.gif');
			}else{ //anders op leeg
				element.setProperty('src','img/img.gif');
			}
		});
	}

}
})

});