// JavaScript Document Image / Gallery

var active_gallery 	= 0;
var thumb_count 	= 0;
var active_thumb 	= 0;
var active_image 	= 0;
var gallery_opened	= false;
var gallery_open	= false;
var thumb_list;

var imageContainer;
var imageContainerBorder;
var imageContainerBackground;
var imageNxt;
var imagePrv;
var imageClose;
var imageCorner;
var imageInfoBG;
var imageInfo;
var imageTitle;
var max_breedte_image  	= 0;
var max_hoogte_image  	= 0;
var xPos_image  		= 0;
var yPos_image  		= 0;
var windowwidth			= 0;

var this_breedte_image  = 0;
var this_hoogte_image	= 0;

var fx_mouseGalleryAnim;
var fx_mouseGalleryAnimBorder;
var fx_mouseNxt;
var fx_mousePrv;
var fx_closeAll;

var mouseGallery		= 0;
var mouseGallery_Prev	= 0;

var currentImageIndex	= 0;
var currentFolder		= '';
var aantal_images		= 0;
var imageURLS;
var imageTitles;

var scrollback;
var scrollforward;



function closeBigImage(){
	
	imagePrv.setStyle('display' , 'none');
	imageNxt.setStyle('display' , 'none');
	imageClose.setStyle('display' , 'none');
	imageCorner.setStyle('display' , 'none');
	imageInfoBG.setStyle('display' , 'none');
	imageInfo.setStyle('display' , 'none');
	//imageContainerBackground.setStyle('display' , 'none');
	ChangeAnim('opacity', imageContainerBackground, 0, 500, Fx.Transitions.Cubic.easeOut)
	imageContainerBorder.setStyle('display' , 'none');
	imageContainer.setStyle('display' , 'none');
	imageCorner.setStyle('display' , 'none');
	gallery_open 	= false;
	gallery_opened	= false;
	
	if(with_zoom){
		isZoom				= false;
		isZoomed 			= false;
		$('zoomer').setStyles({'display':'none','left':0, 'top': 0})		
	}
}

//instellen!
var quick_navigation_included	= false

function openBigImage(folder,value,index,title,album){

        
        title                           = title.replace('\\','');

	//var detail_link 		= '<a href="../../js/'+$('js_link_'+album).value+'" target="_blank" class="visit_site">'+$('js_link_name_'+album).value+'</a>';			
	
//	alert(value);
	
	if(!gallery_opened){
		
		aantal_images				= $('aantal_thumbs_'+album).value;
		
		gallery_opened				= true;
		imageContainer 				= $('imageContainer');
		imageContainerBackground 	= $('imageContainerBackground');
		imageContainerBorder 		= $('imageContainerBorder');

		imageURLS			 		= new Array();
		imageURLS			 		= ($('valuesURL_'+album).value).split('#');
		imageTTLS			 		= new Array();
		imageTTLS			 		= ($('valuesTitles_'+album).value).split('#');
		
		imageClose 			= $('imageClose');
		imageCorner			= $('imageCorner');
		imageInfoBG			= $('imageInfoBG');
		imageInfo 			= $('imageInfo');
		
		imagePrv 			= $('imagePrev');
		imageNxt			= $('imageNext');
		scrollback 			= $('scroll_left');
		scrollforward		= $('scroll_right');
		
		fx_mouseGalleryAnim			= MorpheItems('imageContainer', 300, Fx.Transitions.Cubic.easeOut);
		fx_mouseGalleryAnimBorder	= MorpheItems('imageContainerBorder', 500, Fx.Transitions.Cubic.easeOut);
		fx_mouseNxt					= MorpheItems('imageNext', 500, Fx.Transitions.Cubic.easeOut);
		fx_mousePrv					= MorpheItems('imagePrev', 500, Fx.Transitions.Cubic.easeOut);
		fx_closeAll					= MorpheItems('imageClose', 300, Fx.Transitions.Cubic.easeOut);
		
		imageClose.addEvent('click', function(event){
			if (!busyBig) {
				
				closeBigImage();
				
			}
		});
		
	imagePrv.addEvent('click', function(event){
		if (!busyBig) {
			//alert(currentImageIndex);
			
			if(with_zoom){
				isZoom				= false;
				isZoomed 			= false;
			}
			
			openBigImage(currentFolder,imageURLS[currentImageIndex-2],currentImageIndex-1,imageTTLS[currentImageIndex-2],currentAlbum)
			//moveBar(-1)
		}
	});
	
	imageNxt.addEvent('click', function(event){
		if (!busyBig) {
			/*alert(currentFolder);
			alert(currentImageIndex);
			alert(currentImageIndex);
			*///moveBar(1)

			if(with_zoom){
				isZoom				= false;
				isZoomed 			= false;
			}
			
			openBigImage(currentFolder,imageURLS[currentImageIndex],currentImageIndex+1,imageTTLS[currentImageIndex],currentAlbum)
			
		}
	});
	}
	
	if(!gallery_open){
		
		
		
		//$('imageNavigator').setStyle('display','block');
		//scrollback.setStyle('display','none');
		//scrollforward.setStyle('display','none');
		//$('page_navigation_click').setStyle('display','none');
		
		//minHeight	= 560;
		//resizing();

		//$('thumb_container').setStyle('display', 'none')
		
		gallery_open				= true;
		var breedte_hoogte			= ($('breedte_hoogte_'+album).value).split(',');
		max_breedte_image  			= parseInt(breedte_hoogte[0]);
		max_hoogte_image  			= parseInt(breedte_hoogte[1]);
		/*
		if(max_hoogte_image > (innerHeight - 50 - 50)){
			max_hoogte_image = innerHeight - 100;
		}
		
		if(max_breedte_image > (innerWidth - 50 - 50)){
			max_breedte_image = innerWidth - 100;
		}
		*/
		this_breedte_image  		= max_breedte_image;
		this_hoogte_image  			= max_hoogte_image;
				
		xPos_image  				= middleX - max_breedte_image / 2;
		yPos_image  				= 65;

		
		imageContainerBackground.setStyles({
					'width': innerWidth,
					'height': innerHeight,
					'top': 0,
					'opacity': 0,
					'display': 'block'
				});
		
		imageContainerBorder.setStyles({
					'width': max_breedte_image + 2,
					'height': max_hoogte_image + 2,
					'left': xPos_image - 2,
					'top': yPos_image - 2,
					'opacity': 1,
					'display': 'block'
				});
		imageClose.setStyles({
					'left': middleX + this_breedte_image/2 + 6 ,
					'top': yPos_image - 60,			
					'display': 'none'
				});
		
		imageContainer.setStyles({
					'width': max_breedte_image,
					'height': max_hoogte_image,
					'left': xPos_image,
					'top': yPos_image,
					'opacity': 1,
					'display': 'block'
				});
		
		imagePrv.setStyles({
					'left': middleX - this_breedte_image/2 - 60,
					'top': yPos_image + this_hoogte_image / 2  - 27,
					'opacity': 1,
					'display': 'block'
				});
		
		
		imageNxt.setStyles({
					'left': middleX + this_breedte_image/2 + 6,
					'top': yPos_image + this_hoogte_image / 2  - 27,
					'opacity': 1,
					'display': 'block'
				});
		
		imageCorner.setStyles({
					'left': middleX + (475-90),
					'top': yPos_image + 570 - 90,
					'display': 'none'
				});
		imageInfoBG.setStyles({
					'left': middleX,
					'width': 450,
					'top': yPos_image - 25,
					'opacity': 1,
					'display': 'block'
				});
		imageInfo.setStyles({
					'left': xPos_image,
					'width': max_breedte_image - 5,
					'top': yPos_image - 47,
					'display': 'block'
				});
		
		if(quick_navigation_included){
			$('page_navigation_click').setStyles({
						'left': middleX - max_breedte_image / 2 + 30,
						'width': max_breedte_image - 60,
						'top': max_hoogte_image + 55
					});
		}
		
		
		ChangeAnim('opacity', imageContainerBackground, 0.95, 500, Fx.Transitions.Cubic.easeOut);
		//ChangeAnim('top', imageContainer, yPos_image, 800, Fx.Transitions.Cubic.easeOut);
	
		var alphaContainer = function() {
			ChangeAnim('opacity', imageContainer, 1, 500, Fx.Transitions.Cubic.easeOut);
		}.delay(600);
	
	
	}
	
	currentFolder				= folder;
		
	imageClose.setStyle('display' , 'block');
	imageInfoBG.setStyle('display' , 'block');
	imageInfo.setStyle('display' , 'block');

	imageInfo.innerHTML 		= title;
	
	aantal_images				= $('aantal_thumbs_'+album).value;
		
	imageURLS			 		= new Array();
	imageURLS			 		= ($('valuesURL_'+album).value).split('#');
	imageTTLS			 		= new Array();
	imageTTLS			 		= ($('valuesTitles_'+album).value).split('#');
	
	currentImageIndex			= index;
	currentAlbum				= album;		
					

	
		
	
	
	//alert(aantal_images);
	
	if(index==1){
		imagePrv.setStyle('display' , 'none');
		if(aantal_images==index){
			imageNxt.setStyle('display' , 'none');
		}else{
			imageNxt.setStyle('display' , 'block');
		}
	}else if(aantal_images==index){
		imageNxt.setStyle('display' , 'none');
	}else{
		imageNxt.setStyle('display' , 'block');
		imagePrv.setStyle('display' , 'block');
	}
	setBigImage(folder,value)
}


var imageB 		= new Array();
var loadedBig 	= new Array();
var busyBig		= false;

function setBigImage(folder,value){
	imageB = [
		folder + value
	];
	
	if (!busyBig) {
		var imageContainerImgs = $$('#imageContainer img');
		if (imageContainerImgs.length > 0){
			imageContainerImgs.each(function(image) {
				var RemoveImage = new Fx.Tween(image, {duration:400, 
					onComplete: function(){
					image.destroy();	
					loadNewImage();
				},
				transition: Fx.Transitions.linear});
				RemoveImage.start('opacity', 0);															
			});
			busyBig = true;
		}else{
			imageContainer.setStyle('display', 'block');
			loadNewImage();	
		}
	}
}


var or_width;
var or_height;
var with_zoom = false;
var measureX		= 0;
var measureY		= 0;
var relativeX		= 0;
var bigWidth		= 0;
var bigHeight		= 0;
var smallWidth		= 0;
var smallHeight		= 0;

var this_image;
var fxImageBig;	
var isZoom				= false;
var isZoomed 			= false;

function loadNewImage(){
	new Asset.images(imageB, {
		onProgress: function(i) {
			this.setStyles({
				'opacity': 0
			});
			loadedBig[i] = this;
			this_breedte_image = this.width;
			this_hoogte_image = this.height;
			
			if(with_zoom){
				
				or_width	= this_breedte_image;
				or_height	= this_hoogte_image;
				
				if(this_hoogte_image > max_hoogte_image){
					var temp_hoogte_image 	= max_hoogte_image;
					var scaling 			= max_hoogte_image;
					this_breedte_image		= temp_hoogte_image / this_hoogte_image * this_breedte_image
					this_hoogte_image		= temp_hoogte_image;
					this.height				= this_hoogte_image;
					this.width				= this_breedte_image;
				}
				
				this_breedte_image = this.width;
				this_hoogte_image = this.height;
				
				if(this_breedte_image > max_breedte_image){
					var temp_breedte_image 	= max_breedte_image;
					this_hoogte_image		= temp_breedte_image / this_breedte_image * this_hoogte_image
					this_breedte_image		= temp_breedte_image;
					this.width				= this_breedte_image;
					this.height				= this_hoogte_image;
				}
				
				isZoom						= false;
					
				this.addEvent('mouseenter', function(event){
					if(!isZoom){
						$('zoomer').setStyles({'display':'block','left':event.page.x - 30, 'top': event.page.y-30})
					}
				});
				this.addEvent('mousemove', function(event){
					if(!isZoom){
						$('zoomer').setStyles({'left':event.page.x - 30, 'top': event.page.y-30})
					}
				});
				this.addEvent('mouseleave', function(event){
					if(!isZoom){
						$('zoomer').setStyles({'display':'none','left':event.page.x - 30, 'top': event.page.y-30})
					}
				});
				
				this.setStyle('position', 'absolute');
				this_image				= this;
				fxImageBig 				= new Fx.Morph(this_image, {duration:300, transition: Fx.Transitions.Cubic.easeOut,onComplete: function() {
					if(isZoom){
						isZoomed 			= true;
					}
				}});
				
				this.addEvent('click', function(event){
					var zoomElement 		= $('imageContainer');
							
					if(isZoom == true){
						fxImageBig.cancel();
						isZoom 		= false;
						isZoomed	= false;
						$('imageContainer').setStyle('cursor', 'pointer');
						zoomElement.removeEvents();
						//this_image.setStyles({'left':0, 'top':0, 'width':this_breedte_image, 'height':this_hoogte_image});
						fxImageBig.cancel();
						fxImageBig.start({'left':(max_breedte_image-this_breedte_image)/2, 'top':0, 'width':this_breedte_image, 'height':this_hoogte_image});

						$('zoomer').setStyles({'display':'block','left':event.page.x - 30, 'top': event.page.y-30});
					}else{
						$('zoomer').setStyle('display','none')
						isZoom 			= true;
						//var current = parseInt(element.getProperty('id').substring(5));
						zoomElement.setStyle('cursor', 'move');
						measureX		= middleX - 400;
						measureY		= middleY - 280;
						
						relativeX	= event.page.x - measureX;
						
						
						if(relativeX<0){ relativeX = 0 };
						if(relativeX>max_breedte_image){ relativeX = max_breedte_image };
						
						relativeY	= event.page.y - measureY;
						
						if(relativeY<0){ relativeY = 0 };
						if(relativeY>this_hoogte_image){ relativeY = this_hoogte_image };
						var newX	= relativeX/max_breedte_image * (or_width - max_breedte_image) * -1
						var newY	= relativeY/this_hoogte_image * (or_height - this_hoogte_image) * -1
						
						fxImageBig.cancel();
						fxImageBig.start({'left':newX, 'top':newY, 'width':or_width, 'height':or_height});
						
						//Fx.Morph(this_image, {duration: 500, transition: trans});
						
						
						zoomElement.addEvent('mouseenter', function(event){
							if(isZoomed){
								relativeX	= event.page.x - measureX;
								if(relativeX<0){ relativeX = 0 };
								if(relativeX>max_breedte_image){ relativeX = max_breedte_image };
								
								relativeY	= event.page.y - measureY;
								
								if(relativeY<0){ relativeY = 0 };
								if(relativeY>this_hoogte_image){ relativeY = this_hoogte_image };
								var newX	= relativeX/max_breedte_image * (or_width - max_breedte_image) * -1
								var newY	= relativeY/this_hoogte_image * (or_height - this_hoogte_image) * -1
								
								this_image.setStyle('left', newX);
								this_image.setStyle('top', newY);
								//fxImageBig.cancel();
								//fxImageBig.start({'left': newX , 'top': newY});
							}
						});
					
						zoomElement.addEvent('mousemove', function(event){
							if(isZoomed){
								relativeX	= event.page.x - measureX;
							
								if(relativeX<0){ relativeX = 0 };
								if(relativeX>max_breedte_image){ relativeX = max_breedte_image };
								
								relativeY	= event.page.y - measureY;
								
								if(relativeY<0){ relativeY = 0 };
								if(relativeY>this_hoogte_image){ relativeY = this_hoogte_image };
								var newX	= relativeX/max_breedte_image * (or_width - max_breedte_image) * -1
								var newY	= relativeY/this_hoogte_image * (or_height - this_hoogte_image) * -1
								//alert(newX)
								
								this_image.setStyle('left', newX);
								this_image.setStyle('top', newY);
								
						
								//fxImageBig.cancel();
								//fxImageBig.start({'left': newX , 'top': newY});
							}
						});	
					}
				});
				
												
				
				//alert(this_breedte_image + '-----' + this_hoogte_image);
			}
			
		},
		onComplete: function() {
			fx_mouseGalleryAnim.start({
				'left': middleX - (this_breedte_image)/2,
				'top': yPos_image,
				'width': this_breedte_image,
				'height': this_hoogte_image
			});
			//fx_mousePrv.start({'left': middleX - this_breedte_image/2 });
			//fx_mouseNxt.start({'left': middleX + this_breedte_image/2 - 25});
			
			var close_top	= yPos_image - 60;
			var new_top		= yPos_image + this_hoogte_image / 2  - 27;
			
			fx_mousePrv.start({'left': middleX - this_breedte_image/2 - 60, 'top': new_top });
			fx_mouseNxt.start({'left': middleX + this_breedte_image/2 + 6, 'top': new_top });
			fx_closeAll.start({'left': middleX + this_breedte_image/2 + 6, 'top': close_top });
			
			//ChangeAnim('top', imageInfo, yPos_image + (max_hoogte_image-this_hoogte_image)/2 - 34, 500, Fx.Transitions.Cubic.easeOut);
			
			loadedBig[0].inject(imageContainer);
			var fxBG = new Fx.Morph(imageContainerBorder, {duration: 600, transition: Fx.Transitions.Cubic.easeOut,onComplete: function() {
				var showImage = new Fx.Tween(loadedBig[0], {duration:500, 
					onComplete: function(){
						busyBig  = false;
					},
					transition: Fx.Transitions.Cubic.easeOut});
				showImage.set('scaleX',0.5);
				showImage.start('opacity', 1);
			}});
			//alert(xPos_image + (max_breedte_image-this_breedte_image)/2);
			
			
			fxBG.start({
				'left': middleX - (this_breedte_image)/2 - 2,
				'top': yPos_image - 2,
				'width': this_breedte_image + 2,
				'height': this_hoogte_image + 2
			});
						
		}
	});
}