var DEBUG;(typeof(window.console) != "undefined")?DEBUG=1:DEBUG=0;//alert(DEBUG);

var zFade = new Class({
	Implements: Options,
	options: {
		oContainer: '',
		curid: ''
	},
	initialize: function(options){
		this.setOptions(options);
		
		options = this.options;
		imgAmount = 0;
		periodical = 0;
		
		imgCallComplete = this.imgCallComplete;
		animateFade = this.animateFade;
		
		curid = options.curid;
		
		pagen = $('pagenext');
		pagep = $('pageprev');
		
		i = 0;
			
		imageFade = this.imageFade;
		fadenext = this.fadenext;
		fadeprev = this.fadeprev;
		
		pagen.addEvent('click', fadenext);
		pagep.addEvent('click', fadeprev);
		
	},
	start: function(curid) {
		$clear(periodical);
		this.imageCall(curid);
	},
	imageCall: function(curid){
		var call = new Request.HTML({
			url: '/includes/contentCall.asp',
			method: 'get',
			update: 'currentimg',
			onComplete: function(){	
					imgCallComplete();
			}
		});
		if ($chk(curid)) call.send('script=ContentImages&page_id='+curid)
		else call.send('script=ContentImages')
	},
	imgCallComplete: function(){
		imgAmount = 0;
		$each($('currentimg').getElements('img'), function(image, index){
			imgAmount++;
			image.setStyle('z-index',index+1);											   
		});
		if(imgAmount > 1){ //ga alleen faden als er meer dan 1 plaatje is
			pagen.setStyle('display','block');
			pagep.setStyle('display','block');
			pagen.addEvent('click', naveventstop); //stop the nav arrow anchor links
			pagep.addEvent('click', naveventstop); //stop the nav arrow anchor links
			i = (imgAmount-1);
			animateFade(); //start automatic fading
		}
	},
	naveventstop: function(event){
		event.stop();
	},
	fadenext: function(event){
		imageFade("next");
		$clear(periodical); // deactivate the automatic fading
	},
	fadeprev: function(event){
		imageFade("prev");
		$clear(periodical); // deactivate the automatic fading
	},
	imageFade: function(modifier){
		pagen.removeEvent('click', fadenext);
		pagep.removeEvent('click', fadeprev);
		
		var fadeimage = function(modifier){
			if (modifier == "next") {
				
				var currentimgEl = $('currentimg').getElements('img')[i];
				
				currentimgEl.set('tween', {onComplete: nextfadeComplete,
											duration: 500,
											property: 'opacity',
											link: 'chain'
											});
				currentimgEl.tween(0.1)
				/*
				new Fx.Tween($('currentimg').getElements('img')[i], {
												onComplete: nextfadeComplete,
												duration: 500,
												property: 'opacity',
												link: 'chain'
												}).start(0.1);
				*/
			}
			else{
			prevfadeBegin(); //resort everything
			}
		}
		var nextfadeComplete = function(){
			
			//zet z-index allemaal 1 hoger
			$('currentimg').getElements('img').each(function(image){
				image.setStyle('z-index',image.getStyle('z-index').toInt()+1);
			});
			//if(DEBUG==1)console.log(i);
			//zet current op z-index: 1 en opacity: 1
			$('currentimg').getElements('img')[i].setStyles({
				'z-index': 1,
				'opacity': 1
			});

			pagen.addEvent('click', fadenext);
			pagep.addEvent('click', fadeprev);
			animateFade(); // after clicking reactivate the automatic fading
			
			if (i == 0) {
				i = (imgAmount-1);
			} else {
				i--
			}
		}
		var prevfadeBegin = function(){
			if (i == (imgAmount-1)) {
				i = 0;
			} else {
				i++
			}
			
			//zet z-index allemaal 1 lager
			$('currentimg').getElements('img').each(function(image){
				image.setStyle('z-index',image.getStyle('z-index').toInt()-1);
			});
			
			//if(DEBUG==1)console.log("imgAmount : "+imgAmount);
			//if(DEBUG==1)console.log("i : "+i);
			
			//zet de gene met z-index: 0 bovenop met opacity:0
			$('currentimg').getElements('img')[i].setStyles({
				'z-index': imgAmount,
				'opacity': 0
			});
			
			var currentimgEl = $('currentimg').getElements('img')[i];
			currentimgEl.set('tween', {
							onComplete: prevfadeComplete,
							duration: 500,
							property: 'opacity',
							link: 'chain'
							});
			currentimgEl.tween(0,1)
			/*
			new Fx.Tween($('currentimg').getElements('img')[i], {
								onComplete: prevfadeComplete,
								duration: 500,
								property: 'opacity',
								link: 'chain',
								}).start(0,1);
			*/
		}
		var prevfadeComplete = function(){

			pagen.addEvent('click', fadenext);
			pagep.addEvent('click', fadeprev);
			animateFade(); // after clicking reactivate the automatic fading
		}
		
		if (modifier == "next") {
			fadeimage("next");			
		}
		else{
			fadeimage("prev");	
		}		
	},
	animateFade: function(){

		periodical = fadenext.periodical(5000);
		
	}
});//end zPageCarousel class