/***********************************
* PHOTO GALLERY
************************************/

var SquarePhotoGallery = new Class({
	Implements: [Options, Events],
	
	options: {
		//default options
		picturesList: [],
		thumbnailsList: [],
		startIndex: 0,
		pictureSize: 250,
		thumbnailSize: 250
	},
	
	initialize: function(options){
		
		this.setOptions(options);
		this.built();
		
		//retreive image url for the start index
		var aLinks = this.options.container.getElements('a');
		
		this.showImage(null, aLinks[this.options.startIndex].href);

	},
	
	built: function(){
		
		var aLinks; //list of images links
		
		//retreive all links in the gallery container
		aLinks = $$('#'+this.options.container.id+' a');
		
		for (var i=0; i < aLinks.length; i++){
			
			//configure tween on the object
			aLinks[i].getElement('img').set('tween', {
				duration: 300
			});
			
			//listen click on links
			aLinks[i].addEvent('click', this.showImage.bindWithEvent(this, aLinks[i].href));
			aLinks[i].addEvent('mouseover',function(){
				
				this.getElement('img').tween('opacity', 0.7);

			});
			aLinks[i].addEvent('mouseout',function(){
				
				this.getElement('img').tween('opacity', 1);

			});
		}

	},
	
	showImage: function(event, imageURL){
		if ($chk(event)){
			event.stop();
		}
		
		var bigPhotoContainer = this.options.container.getElementById("gallery_big_photo");
		
		if(this.bigPhotoFx == undefined){
			this.bigPhotoFx = new Fx.Tween(bigPhotoContainer, {
				property: 'opacity',
				duration : 300
			});
		}
		
		this.bigPhotoFx.start(0).chain(function(){ //put opacity to 0, then load image

			bigPhotoContainer.set('html','loading'); //display loading message
			this.bigPhotoFx.start(1)
			
			var imgElem = new Element('img', {src: imageURL}); //create image element
			
			imgElem.addEvent('load', function(event){ //show image when it's loaded
				
				bigPhotoContainer.empty(); //erase content
				bigPhotoContainer.setStyle('opacity',0);
				bigPhotoContainer.adopt(imgElem); //append image
				this.bigPhotoFx.start(1); //put opacity to 1
				
			}.bind(this))
			
		}.bind(this));
	}
});