// 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;


function setAlbumInterface(){
	
	var cat_list	= $$('#inner_content_menu .category_list');
	cat_list.each(function(element) {
		var current = parseInt(element.getProperty('id').substring(4));
			
		element.addEvent('mouseenter', function(){
			var current = parseInt(element.getProperty('id').substring(4));
			if(current!=active_category){
				element.addClass('overAlbum');
			}
		});
		element.addEvent('mouseleave', function(){
			var current = parseInt(element.getProperty('id').substring(4));
			if(current!=active_category){
				element.removeClass('overAlbum');
			}
		});
		element.addEvent('click', function(){
			var current = parseInt(element.getProperty('id').substring(4));
			if(current!=active_category){
				if(active_category!=0){
					$('cat_' + active_category).removeClass('clickedAlbum');
				}
				active_category	= current;
				active_option	= 0;
				element.removeClass('overAlbum');
				element.addClass('clickedAlbum');
				openAlbumsIn(active_category, true);
			}
		});
   	});
	
	if(active_category != 0 || active_gallery != 0){
		if(active_gallery != 0 && active_category == 0){
			active_category	= $('active_category').value;
		}
		
		openAlbumsIn(active_category, false);
		
		if(active_gallery != 0){
			loadGallery(active_gallery, false, 'flow_photo_item.php?include_header=1&gallery='+active_gallery)
		}
		
	}
}


function openAlbumsIn(the_category, loadData){
	if(loadData){
		$('albumsIn').innerHTML = '';
		$('albumsIn').addClass('loading');
		var req = new Request({url:'flow_get_albumsInCat.php?include_header=1&categories='+active_category+'&gallery='+active_gallery,
			method: 'get',
			onSuccess: function(responseText) {
				var output 	= req.response.text;
				$('albumsIn').removeClass('loading');
				$('albumsIn').innerHTML	= output;
				loadDropDownActions('search_optionGallery');
			},
			onFailure: function() {
				$('albumsIn').set('innerHTML', 'The request failed.');
			}
		});
		req.send();
	}else{
		loadDropDownActions('search_optionGallery');	
	}
}


function loadGalleryDirect(category, gallery){
	active_category = category;
	active_gallery 	= gallery;
	var target_album	= $('inner_content_menu');target_album
	
	
	if(active_current!=5){
		active_current = 5;
		fx_mouse_overs[5].cancel();
		fx_mouse_overs[5].start({'top': 20});
	}
	
	
	var url = 'flow_photo.php?include_header=1&categories='+active_category+'&gallery='+active_gallery ;
	var req = new Request({url:url,
		method: 'get',
		onSuccess: function(responseText) {
			
			var output 		= req.response.text;
			var counter_t	= 0
			
			target_album.setStyle('display','none');
			target_album.innerHTML	= output;
			
			setAlbumInterface()
			
			target_album.setStyle('display','block');

		},
		onFailure: function() {
			target_album.set('innerHTML', 'The request failed.');
		}
	});
	req.send();
}


function loadGallery(active_gallery, loadData, url){
	if(loadData){
		$('thumb_container').addClass('loading');
		
		var url = url;

		var req = new Request({url:url,
			method: 'get',
			onSuccess: function(responseText) {
				
				var output 		= req.response.text;
				var counter_t	= 0
				
				$('thumb_container').removeClass('loading');
				$('thumb_container').setStyle('display','none');

				
				$('thumb_container').innerHTML	= output;
			
			//dit gedeelte uitzetten!
			
				thumb_count	= $('aantal_thumbs').value;
				
				thumb_list = $$('#thumb_container .thumbnail');
				thumb_list.each(function(element) {
					counter_t++;
					element.setStyle('opacity',0);
					ChangeAnim('opacity', element, 0.9, counter_t * 200, Fx.Transitions.Cubic.easeOut)
					
					element.addEvent('mouseenter', function(){
						element.setStyle('opacity',1);
						element.addClass('overThumb');
					});
	
					element.addEvent('mouseleave', function(){
						element.setStyle('opacity',0.9);
						element.removeClass('overThumb');
					});
				});
				aantal_images	= counter_t;
				
			//einde gedeelte uit!
			
				$('thumb_container').setStyle('display','block');

				//var TipsInBasket = new Tips($$('.the_thumb'),{ fixed: false, className:'galleryInfo', showDelay: 0, hideDelay: 0, offsets: {'x': 55, 'y': -40} });
				
			},
			onFailure: function() {
				$('thumb_container').set('innerHTML', 'The request failed.');
			}
		});
		req.send();
	}else{
		var counter_t	= 0
				
		thumb_count	= $('aantal_thumbs').value;
		
		thumb_list = $$('#thumb_container .thumbnail');
		thumb_list.each(function(element) {
			counter_t++;
			element.setStyle('opacity',0);
			ChangeAnim('opacity', element, 0.9, counter_t * 50, Fx.Transitions.Cubic.easeOut)
			
			element.addEvent('mouseenter', function(){
				element.setStyle('opacity',1);
				element.addClass('overThumb');
			});

			element.addEvent('mouseleave', function(){
				element.setStyle('opacity',0.9);
				element.removeClass('overThumb');
			});
		});
		aantal_images	= counter_t;
	}
}

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 windowheight		= 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 mouseGallery		= 0;
var mouseGallery_Prev	= 0;

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

function closeBigImage(){
	//$('thumb_container').setStyle('display', 'block');
	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');
	imageContainerBorder.setStyle('display' , 'none');
	imageContainer.setStyle('display' , 'none');
	imageCorner.setStyle('display' , 'none');
	imageTitle.setStyle('display' , 'none');
	gallery_open 	= false;
	gallery_opened	= false;
}
		
function openBigImage(folder,value,index,description){
	if(!gallery_opened){
		
		if(!browserSAF){
			var windowDim 	= window.getScrollSize();
			windowheight	= windowDim.y;
			windowwidth		= windowDim.x;
		}else{
			windowheight 	= document.body.scrollHeight;
			windowwidth 	= document.body.scrollWidth;
		}
		
		aantal_images				= $('aantal_thumbs').value;
		
		gallery_opened				= true;
		imageContainer 				= $('imageContainer');
		imageContainerBackground 	= $('imageContainerBackground');
		imageContainerBorder 		= $('imageContainerBorder');

		imageURLS			 		= new Array();
		imageURLS			 		= ($('valuesURL').value).split(',');
		imageTitles			 		= new Array();
		
		imageClose 		= $('imageClose');
		imageCorner		= $('imageCorner');
		imageInfoBG		= $('imageInfoBG');
		imageInfo 		= $('imageInfo');
		imageTitle		= $('imageTitle');
		
		imagePrv 		= $('imagePrev');
		imageNxt		= $('imageNext');
		
		fx_mouseGalleryAnim			= MorpheItems('imageContainer', 500, 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);
		
		imageClose.addEvent('click', function(event){
			if (!busyBig) {
				
				closeBigImage();
				
			}
		});
		
		imagePrv.addEvent('click', function(event){
			if (!busyBig) {
				
				openBigImage(currentFolder,imageURLS[currentImageIndex-2],currentImageIndex-1,imageTitles[currentImageIndex-2])
				
			}
		});
		
		imageNxt.addEvent('click', function(event){
			if (!busyBig) {
				
				openBigImage(currentFolder,imageURLS[currentImageIndex],currentImageIndex+1,imageTitles[currentImageIndex])
				
			}
		});
	}
	
	if(!gallery_open){
		
		imageTitles			 		= ($('valuesTitles').value).split(',');
		
		var myElement = $(document.body);
		var myFx = new Fx.Scroll(myElement).start(0, 0);
	
		//$('thumb_container').setStyle('display', 'none')
		
		currentFolder				= folder;
		
		gallery_open				= true;
		var breedte_hoogte			= ($('breedte_hoogte').value).split(',');
		max_breedte_image  			= parseInt(breedte_hoogte[0]);
		max_hoogte_image  			= parseInt(breedte_hoogte[1]);
		this_breedte_image  		= max_breedte_image;
		this_hoogte_image  			= max_hoogte_image;
		
		
		xPos_image  				= (innerWidth - max_breedte_image)/2;
		//alert(xPos_image);
		yPos_image  				= (innerHeight - max_hoogte_image)/2;

		
		imageContainerBackground.setStyles({
					'width': innerWidth,
					'height': windowheight,
					'top': -1 * windowheight,
					'opacity': 0.8,
					'display': 'block'
				});
		
		imageContainerBorder.setStyles({
					'width': max_breedte_image + 40,
					'height': max_hoogte_image + 40,
					'left': xPos_image - 20,
					'top': yPos_image - 20,
					'opacity': 0.4,
					'display': 'none'
				});
		
		imageContainer.setStyles({
					'width': max_breedte_image,
					'height': max_hoogte_image,
					'left': xPos_image,
					'top': yPos_image,
					'opacity': 0,
					'display': 'block'
				});
		
		imagePrv.setStyles({
					'left': xPos_image - 100,
					'top': yPos_image + max_hoogte_image/2 - 50,
					'opacity': 0.5,
					'display': 'block'
				});
		
		imageNxt.setStyles({
					'left': xPos_image + max_breedte_image + 60,
					'top': yPos_image + max_hoogte_image/2 - 50,
					'opacity': 0.5,
					'display': 'block'
				});
		
		imageCorner.setStyles({
					'left': middleX + (475-90),
					'top': yPos_image + 570 - 90,
					'display': 'block'
				});
		imageInfoBG.setStyles({
					'left': middleX + (475-200),
					'top': yPos_image + 570 - 220,
					'opacity': 0.4,
					'display': 'block'
				});
		imageInfo.setStyles({
					'left': middleX + (475-195),
					'top': yPos_image + 570 - 210,
					'display': 'block'
				});
		imageTitle.setStyles({
					'left': middleX + -200,
					'top': yPos_image - 50,
					'display': 'block'
				});
		
		
		
		ChangeAnim('top', imageContainerBackground, 0, 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);
	
	}
	
	imageClose.setStyle('display' , 'block');
	imageInfoBG.setStyle('display' , 'block');
	imageInfo.setStyle('display' , 'block');
	imageTitle.setStyle('display' , 'block');
	
	imageTitle.innerHTML = description;
	
	if(index==1){
		imagePrv.setStyle('display' , 'none');
		if(aantal_images==index){
			imageNxt.setStyle('display' , 'none');
		}
	}else if(aantal_images==index){
		imageNxt.setStyle('display' , 'none');
	}else{
		imageNxt.setStyle('display' , 'block');
		imagePrv.setStyle('display' , 'block');
	}
	
	//imageNxt.setStyle('display' , 'none');
	//imagePrv.setStyle('display' , 'none');
	
	currentImageIndex			= index;
	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();	
		}
	}
}

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;
		},
		onComplete: function() {
			fx_mouseGalleryAnim.start({
				'left': xPos_image + (max_breedte_image-this_breedte_image)/2,
				'top': yPos_image + (max_hoogte_image-this_hoogte_image)/2,
				'width': this_breedte_image,
				'height': this_hoogte_image
			});
			
//			ChangeAnim('opacity', 'imageContainer', 1, 500, Fx.Transitions.Cubic.easeOut);
			
			ChangeAnim('top', imageTitle, yPos_image + (max_hoogte_image-this_hoogte_image)/2 - 50, 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.start('opacity', 1);
			}});
			//alert(xPos_image + (max_breedte_image-this_breedte_image)/2);
		
			fxBG.start({
				'left': xPos_image + (max_breedte_image-this_breedte_image)/2,
				'top': yPos_image + (max_hoogte_image-this_hoogte_image)/2,
				'width': this_breedte_image + 2,
				'height': this_hoogte_image + 2
			});
						
		}
	});
}