/*
	Klasse om fotoSite te draaien
	Krijgt mee de categorie en de serie.
	Foto's worden met AJAX opgehaald. 

*/
var fotoSite = new Class({
	options: {
		categorie: '', // categorie id
		serie: '',     // serie id
		divCopyright: 'copyright',
		divCategorie: 'categorie',
		divSerie: 'serie',
		divProtect: 'protect',
		divFoto: 'foto',
		divThumbs: 'thumbs',
		divFototitel: 'fototitel',
		divPrevFoto: 'prevfoto',
		divNextFoto: 'nextfoto',
		thumbsArray: [],		
		divFotoHoogte: 502,
		divFotoBreedte: 502
	},
	
	initialize: function (options) {
		/*
			Inlezen opties
		*/
		this.setOptions(options);
		this.divCategorie = $(this.options.divCategorie);
		this.divSerie = $(this.options.divSerie);
		this.divFoto = $(this.options.divFoto);
		this.divThumbs = $(this.options.divThumbs);
		this.divProtect = $(this.options.divProtect);
		this.divCopyright = $(this.options.divCopyright);
		this.divFototitel = $(this.options.divFototitel);
		this.divPrevFoto = $(this.options.divPrevFoto);
		this.divNextFoto = $(this.options.divNextFoto);
		this.divFotoHoogte = this.options.divFotoHoogte;
		this.divFotoBreedte = this.options.divFotoBreedte;
		this.categorie = this.options.categorie;
		this.serie = this.options.serie;

		/* Index van getoonde foto */
		this.selectedFoto = '';
		
		/* Positioneer alle lagen goed */
		this.setLayers();		

		/* Haal de thumbnails op */
		this.thumbsArray = this.options.thumbsArray;
		this.loadThumbs(this.categorie, this.serie);		
		
		/* Als window geresized wordt, layers schalen */
		window.addEvent('resize', function(){
  			this.setLayers();
		}.bind(this));
	},
	
	loadThumbs: function(catid, serid) {
		new Ajax('read_images.php?cat='+catid+'&ser='+serid, {
			  evalScripts: true,
			  evalResponse: true,
			  onComplete: function() {
				  fotoSite.showThumbs();  
			  }
		  }).request();		
	},
	
	showThumbs: function() {
	
		this.divThumbs.setStyles({
				display: 'block'
			});
		this.divThumbs.empty();
		this.thumbsArray.each(function(thumbnail, index) {
		  var newOne = new Element('div', {
			  'class': 'thumbnail',
			  'events': {
			    'click': function()
			    {
				    this.showFoto(thumbnail.foto, thumbnail.title, thumbnail.height, thumbnail.width, index);
			    }.bind(this)	  
			  },
			  'styles': {
			    'background-image': 'url('+thumbnail.thumb+')',
			    'background-repeat': 'no-repeat',
			    'background-position': 'center'	  
			  }
		  });
		  newOne.setHTML(' ');
		  newOne.injectInside(this.divThumbs);
	  }.bind(this));

	},
	
	plaatsTitel: function (index)
	{
		var positionTitel = this.divFoto.getCoordinates();
		var newTop = (0.5*this.divFotoHoogte) + (0.5*this.thumbsArray[index].height) + positionTitel.top;
		var newWidth = this.thumbsArray[index].width;
		var newLeft = positionTitel.left + 0.5*(this.divFotoBreedte - this.thumbsArray[index].width);
		
		this.divFototitel.setStyles({
				top: newTop + 10,
				left: newLeft,
				width: newWidth
			});
	},

	showFoto: function (foto, title, height, width, index) {
		this.selectedFoto = index;
		
		this.divThumbs.setStyles({
				display: 'none'
			});	
		this.divProtect.setStyles({
				display: 'block'
			});	
		this.divCopyright.setStyles({
				display: 'block'
			});	
				
		this.divFoto.empty();
		this.divFoto.setStyles({
				display: 'block',
				background: 'url('+foto+') no-repeat center' 
			});		
			
		this.plaatsTitel(index);
		this.divFototitel.setText(title);
		this.divFototitel.setStyles({
				display: 'block'
			});	
		this.divNextFoto.setStyles({
				display: 'block'
			});	
		this.divNextFoto.removeEvents('click');
		this.divPrevFoto.removeEvents('click');

		this.divNextFoto.addEvent('click', function(){
				var nextIndex = this.selectedFoto + 1;
				if(nextIndex >= this.thumbsArray.length)
				{
					nextIndex = 0;
				}
				this.showFoto(this.thumbsArray[nextIndex].foto, this.thumbsArray[nextIndex].title, this.thumbsArray[nextIndex].height, this.thumbsArray[nextIndex].width, nextIndex); 
			}.bind(this));
			
		this.divPrevFoto.setStyles({
				display: 'block'
			});	
		this.divPrevFoto.addEvent('click', function(){
				var nextIndex = this.selectedFoto - 1;
				if(nextIndex < 0)
				{
					nextIndex = this.thumbsArray.length - 1;
				}
				this.showFoto(this.thumbsArray[nextIndex].foto, this.thumbsArray[nextIndex].title, this.thumbsArray[nextIndex].height, this.thumbsArray[nextIndex].width, nextIndex); 
			
			}.bind(this));

	},
	
	setLayers: function () {
		/*
			Bepaal waar de foto div moet komen te staan
			Bepaal de grootte van de viewport
			Bepaal de hoogte van divCategorie
			Bepaal de hoogte van divSerie
			Plaats divFoto in het midden van overgebleven ruimte, maar minimaal 25 pixels van onderkant divSerie
		*/	

		var bodyHeight = window.getHeight();
		var bodyWidth = window.getWidth();

		var positionCategorie = this.divCategorie.getCoordinates();
		var positionSerie = this.divSerie.getCoordinates();		

		var minHeight = positionCategorie.height + positionSerie.height + 25;
		var heightLeft = bodyHeight - minHeight;
		
		if(heightLeft < 500)
		{
			var newHeight = minHeight;				
		}
		else
		{
			var newHeight = 0.5 * (heightLeft - this.divFotoHoogte) + minHeight;				
		}
		
		var minWidth = this.divFotoBreedte + 150;
		
		if(minWidth > bodyWidth)
		{
			var newWidth = 75;	
			$E('body').setStyles({
					width: minWidth
				
				});
		}
		else
		{
			var newWidth = (0.5 * bodyWidth) - (0.5 * (this.divFotoBreedte));
			$E('body').setStyles({
					width: bodyWidth				
				});
				
		}
		
		this.divPrevFoto.setStyles({
			position: 'absolute',
			top: newHeight,	
			left: (newWidth - 50),
			width: 50,
			height: this.divFotoHoogte
		});
		this.divNextFoto.setStyles({
			position: 'absolute',
			top: newHeight,	
			left: (newWidth + this.divFotoBreedte),
			width: 50,
			height: this.divFotoHoogte			
		});
		
		this.divFoto.setStyles({
			position: 'absolute',
			top: newHeight,
			left: newWidth,
			width: this.divFotoBreedte,
			height: this.divFotoHoogte
		});	

		this.divProtect.setStyles({
			position: 'absolute',
			top: newHeight,
			left: newWidth,
			width: this.divFotoBreedte,
			height: this.divFotoHoogte
		});	

		this.divThumbs.setStyles({
			position: 'absolute',
			top: newHeight,
			left: newWidth,
			width: this.divFotoBreedte
		});	
				
		this.divCopyright.setStyles({
			position: 'absolute',
			top: newHeight + this.divFotoHoogte + 50,
			left: newWidth,
			width: this.divFotoBreedte			
		});				
		
		if(this.selectedFoto != '')
		{
			this.plaatsTitel(this.selectedFoto);	
		}
	}
  	
});
fotoSite.implement(new Options, new Events);