// JavaScript Document


var Gallery = {
	allImg: null,
	currentImg: null,
	tweenComplete: true,
	playState: null,
	
	setUp: function(){
		// set up environment. First hide all big images and set margin
		this.allImg = $$('.imgBig');
		this.currentImg = 0;
		
		this.allImg.each(function(el){
			
			//alert(el.id);
			var marginTop = (400 - el.id)/2;
			marginTop = marginTop - 10;
			el.setStyle('margin-top', marginTop);
			
			//alert(marginTop);
			
			el.set('opacity', '0');
			el.setStyle('display', 'none');
		});
		
		this.allImg[0].setStyle('display', 'block');
		this.allImg[0].set('opacity', '1');
		
		// controls
		$('next').addEvent('click', function(){
			Gallery.nextBtn(true);
		});
		
		$('play').addEvent('click', function(){
			Gallery.playBtn();
		});
		
		$('stop').addEvent('click', function(){
			Gallery.stopBtn();
		});
		
		$('prev').addEvent('click', function(){
			Gallery.prevBtn();
		});
		
		$('showImgArray').addEvent('click', function(){
			Gallery.showImgArray();
		});
		
		// img array for easy access to the image you want to see
		var children = $('imgArray').getElements('img');
		children.each(function(img){
			img.addEvent('click', function(event){
				
				if(Gallery.tweenComplete){
					Gallery.stopBtn();
					Gallery.allImg[Gallery.currentImg].setStyle('display', 'none');
					Gallery.allImg[Gallery.currentImg].set('opacity', '0');
					
					Gallery.currentImg = parseInt(img.id);
					
					Gallery.allImg[Gallery.currentImg].setStyle('display', 'block');
					Gallery.allImg[Gallery.currentImg].set('opacity', '1');
					
					
				}
			});	
		});
	},
	
	nextBtn: function(from){
		if(from){
			clearInterval(this.playState);
			Gallery.playState = null;
		}
		
		if(this.tweenComplete){
			this.tweenComplete = false;
			new Fx.Tween($(this.allImg[this.currentImg])).start('opacity', '0').addEvent('onComplete', function(){
				
				Gallery.allImg[Gallery.currentImg].setStyle('display', 'none');	
				
				if(Gallery.currentImg == Gallery.allImg.length - 1){
					Gallery.currentImg = 0;
				}else{
					Gallery.currentImg = Gallery.currentImg + 1;
				}
				
				
				Gallery.allImg[Gallery.currentImg].setStyle('display', 'block');				
				new Fx.Tween($(Gallery.allImg[Gallery.currentImg])).start('opacity', '1').addEvent('onComplete', function(){
					Gallery.tweenComplete = true;
				});
				
			});
		}		
	},
	
	playBtn: function(){
		if(!Gallery.playState){
			Gallery.nextBtn(false);
			this.playState = setInterval("Gallery.nextBtn(false);", 3500);
		}
	},
	
	stopBtn: function(){
		clearInterval(this.playState);
		Gallery.playState = null;
	},
	
	prevBtn: function(){
		
		clearInterval(this.playState);
		Gallery.playState = null;
		
		if(this.tweenComplete){
			this.tweenComplete = false;
			new Fx.Tween($(this.allImg[this.currentImg])).start('opacity', '0').addEvent('onComplete', function(){
				
				Gallery.allImg[Gallery.currentImg].setStyle('display', 'none');	
				if(Gallery.currentImg == 0){
					Gallery.currentImg = Gallery.allImg.length - 1;
				}else{
					Gallery.currentImg = Gallery.currentImg - 1;
				}
				
				
				Gallery.allImg[Gallery.currentImg].setStyle('display', 'block');
				new Fx.Tween($(Gallery.allImg[Gallery.currentImg])).start('opacity', '1').addEvent('onComplete', function(){
					Gallery.tweenComplete = true;
				});
			});
		}		
	},
	
	showImgArray: function(){
		if($('imgArray').getStyle('display') == 'none'){
			$('showImgArray').innerHTML = "<a href='javascript:void(0);'>Hide all images</a>";
			$('imgArray').setStyle('display', 'block');
		}else{
			$('showImgArray').innerHTML = "<a href='javascript:void(0);'>Show all images</a>";
			$('imgArray').setStyle('display', 'none');
		}
		
	}
}