var ImageGallery = new Class(
{
	imgCounter : 0,
	pause: false,
	slimBoxImageArray : new Array(),
	firsttime: true,
	
	options:
	{
		'baseElement' : null,
		'thumbList' : null,
		'bigImgList' : null,
		'captionList' : null,
		'linkList' : null,
		'optionList' : null,
		'displayMode' : '0',
		'pauseButton' : null,
		'playButton' : null,
		'overLayImg' : null,
		'getImagesUrl': null,
		'rootUrl' : null
	},	
	
	initialize:	function(options)
	{	
		this.setOptions(options);

		this.options.thumbList		= this.options.json_images.thumbs;
		this.options.bigImgList		= this.options.json_images.fullsized;			
		this.options.linkList		= this.options.json_images.links;
		this.options.captionList	= this.options.json_images.captions;
		this.options.optionList		= this.options.json_images.settings;
		this.build();
		switch(this.options.displayMode) // welke weergave moet uitgevoerd worden??
		{
			case "0" :
				this.loadNextImage_variant0(); // Banner laten lopen!
			break;
			case "2" :
				this.loadNextImage_variant2(); // Banner laten lopen!
			break;
		}		
		
	},
	
	build: function()
	{
		switch(this.options.displayMode) // welke weergave moet uitgevoerd worden??
		{
			case "0" : // weergave optie 1: simpele diavoorstelling met pauzeknop, links en bijschriften
				this.options.baseElement.empty();
				this.divTop = new Element("div");
				this.divPicBorder = new Element("div", {'class': 'imagegallery_border_simple'});		
				this.divPicture = new Element("div", {'class': 'imagegallery_picture_simple'});
				
				this.divPicture.setStyle('height', this.options.galleryHeight + 'px');
				
				this.divOverlay = new Element("div", {'class': 'imagegallery_overlay_simple'});
				this.divBottom = new Element("div", {'class': 'imagegallery_bottom_simple'});
				this.divButton = new Element("div", {'class': 'imagegallery_button_simple'});
				this.divCaptionArea = new Element("div", {'class': 'imagegallery_caption_area'});
				this.divCaption = new Element("div", {'class': 'imagegallery_caption_simple'});
				this.divLink = new Element("a", {'class': 'imagegallery_link_simple'});
				
				this.divCaptionArea.appendChild(this.divCaption);
				this.divCaptionArea.appendChild(this.divLink);
				
				this.divBottom.appendChild(this.divButton);
				this.divBottom.appendChild(this.divCaptionArea);

				this.divPicture.appendChild(this.divOverlay);
				
				this.divPicBorder.appendChild(this.divPicture);
				this.divTop.appendChild(this.divPicBorder);
				this.divTop.appendChild(this.divBottom);

				var top = new Element('div', {'class': 'parent'});
				top.appendChild(this.divTop);
				this.options.baseElement.appendChild(top);
				
				
				this.divButton.addEvent('click', function()
				{
					this.pauseOrResume();
				}.bind(this));
				
			break;

			case "1" :	// weergave optie 2: thumbnails en slimbox
				this.buildImageArray();	
				this.options.baseElement.empty();
				var divThumbNails = new Element("div", {'class': 'imagegallery_thumbarea'});
				for (i = 0; i < this.options.thumbList.length; i++)
				{
					// Nieuwe thumbnail container maken, zodat de link, bijschrift en afbeelding netjes weergegeven worden:
					
					var thumbContainer = new Element('div', {'class' : 'imagegallery_thumbcontainer'});
					
					var thumbHolder = new Element('div', {'class' : 'thumbnail_thumbcontainer'});
					thumbHolder.id = i;
					thumbHolder.setStyle('backgroundImage', 'url("' + this.options.thumbList[i] + '")');
					thumbHolder.setStyle('background-repeat', 'no-repeat');
					thumbHolder.setStyle('background-position', 'center center');

					// De bijschriften instellen

					var thumbCaption = new Element('span', {'class' : 'thumbnail_caption'});
					if ((this.options.captionList[i] != "") && (this.options.captionList[i] != "bijschrift"))
					{
						thumbCaption.setText(this.options.captionList[i]);
					}

					var thumbLink = new Element('a', {'rel' : 'slimbox_picture_' + this.options.baseElement.id});
					thumbLink.setStyle('border', 'none');
					thumbLink.setProperty('href', this.options.bigImgList[i]);	
					
					thumbLink.appendChild(thumbHolder);
					thumbContainer.appendChild(thumbLink);
					thumbContainer.appendChild(thumbCaption);
					divThumbNails.appendChild(thumbContainer);
					
				//	var image = new Image();
				//	image.src = this.options.bigImgList[i];
				//	thumbLink.addEvent('click', function()
				//	{	
				//		Slimbox.open(image.src);
				//	}.bind(this));					
				}
				
				// Thumbnails ophalen en events koppelen:
				
				var thumbnails = divThumbNails.getElements('.thumbnail_thumbcontainer');
				thumbnails.each(function(thumb)
				{
					thumb.addEvent('mouseenter', function()
					{
						thumb.setStyle('opacity', '1');
					}.bind(this));
					thumb.addEvent('mouseleave', function()
					{
						thumb.setStyle('opacity', '0.8');
					}.bind(this));	
				}.bind(this));
				this.options.baseElement.appendChild(divThumbNails); 
				window.fireEvent('resize');
			break;
			
			case "2" :
				this.options.baseElement.empty();
				this.divTop = new Element("div");
				this.divPicBorder = new Element("div", {'class': 'imagegallery_border_simple'});		
				this.divPicture = new Element("div", {'class': 'imagegallery_picture_simple'});
				this.divOverlay = new Element("img", {'src':  this.options.overLayImg});
				this.divBottom = new Element("div", {'class': 'imagegallery_bottom_simple'});
				
				// De display op none zetten van de onderste div-balk, anders gaat de functie 'loadNextImage()' over zn nek, omdat die gebruik maakt van divCaption en Button!
				// daarom zijn deze elementen niet in deze variant eruit gehaald, alleen maar onzichtbaar gezet!

				this.divBottom.setStyle('display', 'none');
								
				this.divButton = new Element("div", {'class': 'imagegallery_button_simple'});
				this.divCaptionArea = new Element("div");
				this.divCaption = new Element("div", {'class': 'imagegallery_caption_simple'});
				this.divLink = new Element("a", {'class': 'imagegallery_link_simple'});
				
				this.divCaptionArea.appendChild(this.divCaption);
				this.divCaptionArea.appendChild(this.divLink);
				
				this.divBottom.appendChild(this.divButton);
				this.divBottom.appendChild(this.divCaptionArea);

				//this.divPicture.appendChild(this.divOverlay);
				
				this.divPicBorder.appendChild(this.divPicture);
				this.divTop.appendChild(this.divPicBorder);
				this.divTop.appendChild(this.divBottom);

				this.options.baseElement.appendChild(this.divTop);
				this.divPicture.setStyle('height', this.options.optionList[0] + 'px');
				
				this.divButton.addEvent('click', function()
				{
					this.pauseOrResume();
				}.bind(this));
			break;
 
		}
	},
	
	buildImageArray: function()
	{
		//lijst opbouwen voor de slimbox, zodat er door de fotos heen gebladerd kan worden:
		for (i = 0; i < this.options.bigImgList.length; i++)
		{
			var list = new Array();
			list[0] = this.options.bigImgList[i];
			list[1] = "";
			if ((this.options.linkList[i] != "link") && (this.options.linkList[i] != "undefined") && (this.options.linkList[i] != ""))
			{
				if ((this.options.captionList[i] != "") && (this.options.captionList[i] != "bijschrift"))
				{
					if (this.options.linkList[i].indexOf("http://") == -1)
					{
						list[1] = "<a href='" + this.options.linkList[i] + "' target='_self'>" + this.options.captionList[i] + "</a>";
					}
					else
					{
						list[1] = "<a href='" + this.options.linkList[i] + "' target='_blank'>" + this.options.captionList[i] + "</a>";
					}
				}
				else
				{
					list[1] = "<a href='" + this.options.linkList[i] + "' target='_blank'>" + this.options.rootUrl + this.options.linkList[i] + "</a>";
				}
			}
			else if ((this.options.captionList[i] != "") && (this.options.captionList[i] != "bijschrift"))
			{
				list[1] = this.options.captionList[i];
			}
			this.slimBoxImageArray[i] = list;
		}
	},	
	
	pauseOrResume: function()
	{
		$clear(this.playtimer);
		this.fx.stop();
		this.fx2.stop();
		
		if (this.pause == false)
		{
			this.divButton.setStyle('backgroundImage', 'url("' + this.options.playButton + '")');
			this.pause = true;
			this.playtimer = null;
		}
		else
		{
			this.divButton.setStyle('backgroundImage', 'url("' + this.options.pauseButton + '")');
			this.pause = false;
			this.playtimer = null;
			this.loadNextImage_variant0();
		} 
	},
	
	loadNextImage_variant0: function()
	{
		if(!this.playtimer && !this.firsttime)
		{
			this.playtimer = this.loadNextImage_variant0.periodical(5000,this);
		}

		if(this.pause)
		{
			return false;
		}
		
		this.fx = this.divPicture.effect('opacity', 
		{
			duration: 500, 
			transition: Fx.Transitions.Quint.easeIn,
			onComplete : function()
			{				
				if(this.imgCounter == (this.options.thumbList.length))
				{
					this.imgCounter = 0;
				}

				this.divPicture.setStyle("background-image", "url('" + this.options.thumbList[this.imgCounter] + "')");
				this.divCaption.setHTML(this.options.captionList[this.imgCounter]);

				// controleren of het een externe link is of een interne:
				
				this.divLink.setProperty('href', this.options.linkList[this.imgCounter]);
				if ((this.options.linkList[this.imgCounter] != "link") && (this.options.linkList[this.imgCounter] != "undefined"))
				{
					this.divLink.setHTML('Lees meer...');
				}else
				{
					this.divLink.setHTML('');
				}

				// Als er een bijschrift is weergeven, anders leeglaten:

				if ((this.options.captionList[this.imgCounter] != "bijschrift") && (this.options.captionList[this.imgCounter] != ""))
				{
					this.divCaption.setHTML(this.options.captionList[this.imgCounter]);
				}
				else
				{
					this.divCaption.setHTML('');
				}				
				
				this.imgCounter = this.imgCounter + 1;
			
				this.fx2 = this.divPicture.effect('opacity',
				{
					duration: 500
				}).start(0,1)
			}.bind(this)
		}).start(1, 0);
		
		if(this.firsttime)
		{
			this.firsttime = false;
			this.playtimer = this.loadNextImage_variant0.periodical(5000,this);
		}
	},
	
	loadNextImage_variant2 : function()
	{
		if(!this.playtimer)
		{
			this.playtimer = this.loadNextImage_variant2.periodical(4000,this);
		}		
		
		this.divPicture.addEvent('click', function()
		{
			Slimbox.open(this.slimBoxImageArray, parseInt(this.imgCounter - 1));
		}.bind(this));
		
		this.fx = this.divPicture.effect('opacity', 
		{
			duration: 500, 
			transition: Fx.Transitions.Quint.easeIn,
			onComplete : function()
			{				
				if (this.imgCounter == (this.options.thumbList.length))
				{
					this.imgCounter = 0;
				}
				this.divPicture.setStyle("background-image", "url('" + this.options.thumbList[this.imgCounter] + "')");
				this.divPicture.setStyle('cursor', 'pointer');
				this.imgCounter = this.imgCounter + 1;
			
				this.fx2 = this.divPicture.effect('opacity',
				{
					duration: 500
				}).start(0,1)
			}.bind(this)
		}).start(1, 0);		
	}
		
});
ImageGallery.implement(new Options, new Events);