var arrGalleries = [];
var arrGalleryImages = [];
var arrGalleryCaptions = [];
var imageWidth = 555;
var imageHeight = 370;
var navigateWidth = imageWidth;
var navigateHeight = 20;
var spacer = 10; // space for holder
var minSpacing= 200; //space between the image lightbox and the screen
var holderWidth = imageWidth;
var holderHeight = imageHeight+navigateHeight+spacer;
var count = 0;
var linkColorActive = "#000000";

function generateGallery(){
// extract all galleries from the html and add the images to an url
	$$('div[class^=gallery]').each(function(item, index) {											
		// save gallery
		arrGalleries.include('gallery_holder_'+index);		
		// add holder
		var divGalleryHolder = new Element('div', {		
    		'id': 'gallery_holder_'+index,
    		'style': 'width:'+holderWidth+'px;height:'+holderHeight+'px;background-color:#FFF;margin-top:8px;'
		});
		//add holder to html
		divGalleryHolder.inject(item, 'before');
		var _arrImages = item.getElements('a');
		var _arrImagesSrc = [];
		var _arrImagesCaption =[];	
		_arrImages.each(function(item2, index2) {
			_arrImagesSrc.include(item2.getProperty('href'));			
			var tmpImage = item2.getElements('img');
			_arrImagesCaption.include(tmpImage.getProperty('alt'));
		});		
		arrGalleryImages.include(_arrImagesSrc);
		arrGalleryCaptions.include(_arrImagesCaption);	
		// remove wp holder
		item.destroy();		
	});	
	// generate gallery holders
	arrGalleries.each(function(item, index) {								 
		//create navigation holder
		var divGalleryNavigation = new Element('div', {
    		'id': 'gallery_navigation_'+index,
    		'style': 'margin-bottom:'+spacer+'px;width:'+navigateWidth+'px;'
		});	
		//inject divNavigation to divHolder		
		divGalleryNavigation.inject('gallery_holder_'+index);	
		$('gallery_navigation_'+index).innerHTML="Afbeelding: ";
	
		//create image object
		var divGalleryImg = new Element('div', {
    		'id': 'gallery_img_'+index,
    		'style': 'width:'+imageWidth+'px;height:'+imageHeight+'px;'
		});
		// inject divImg to divHolder
		divGalleryImg.inject('gallery_holder_'+index);	
	});		
	// create navigation items
	arrGalleries.each(function(item, index) {		
		arrGalleryImages[index].each(function(item2, index2) {		
			var imageNumber = index2+1;			
			//create image object
			var aLink = new Element('a', {
				'id': 'gallery_nav_'+index+'_link_'+index2,
    			'style': 'padding:2px;text-decoration:underline',
    			'href': 'javascript:void(0);',
				'events': {
      			'click': function(){
            		loadGalleryImage(index, index2);
       			}				
    		}
			});
			if(imageNumber<25){
				aLink.innerHTML = imageNumber;	
			}
			if(imageNumber==25){
				aLink.innerHTML = "<br/>25";	
			}
			else{
				aLink.innerHTML = imageNumber;	
			}
			// inject divImg to divHolder
			aLink.inject('gallery_navigation_'+index);			
			// save default color
			linkColorActive = aLink.getStyle('color');			
		});
	});			
	// add first image to holder
	arrGalleries.each(function(item, index) {
		loadGalleryImage(index, 0);		
	});	
}
function loadGalleryImage(intGallery, intImage){
	//this function load img to hoder when click on page number	
	// make all link 'black'
	arrGalleryImages[intGallery].each(function(item, index) {
		$('gallery_nav_'+intGallery+'_link_'+index).setStyle('color', '#333333');
	});	
	// make current link 'pink'
	$('gallery_nav_'+intGallery+'_link_'+intImage).setStyle('color', linkColorActive);
 	var strImage = '<img class="gallery_inside" src="'+arrGalleryImages[intGallery][intImage]+'" alt="'+arrGalleryCaptions[intGallery][intImage]+'" style="cursor:pointer;" onclick="enterFullscreenMode('+intGallery+','+intImage+');" />' ;
	$('gallery_img_'+intGallery).innerHTML = strImage;	
}

function deactivate(){
//alert('inside deactivate, '+scroll_y);
//function to close the lightbox
	if($('black')){
		$('black').destroy();
	}
	if($('white')){
		$('white').destroy();
	}
	if($('arrow_left')){
		$('arrow_left').destroy();
	}
	if($('arrow_right')){
		$('arrow_right').destroy();
	}
	if($('close_img')){
		$('close_img').destroy();
	}
	if($('name_img')){
		$('name_img').destroy(); //this is caption	
	}

	$('html').setStyle('overflow', 'scroll');
	

//	$('body').setStyle('overflow', 'scroll'); 
//	if(Browser.Engine.gecko){
//		$('body').setStyle('overflow', 'scroll'); 
//	}
}

function enterFullscreenMode(intGallery,intImage){	//open lightbox	
	//alert('enterFullscreenMode');
	// hidden the scrollbars
	$('html').setStyle('overflow', 'hidden');
	if(Browser.Engine.gecko){
		$('body').setStyle('overflow', 'hidden'); 	
	}
		
	// create the black overlay, make it visible
	$add_black ='<div id ="black" onclick="deactivate();" class="black_overlay" style="display:block;top:'+getScroll().y+'px"></div> ';	
	$('for_black').innerHTML = $add_black;
	
	//get the image_location
	var url = $('image_location').getProperty('src');	
	var imgArrowLeft = url+'/images/images_backend/arrow_left.png';
	var imgArrowRight = url+'/images/images_backend/arrow_right.png';	
	var imgClose = url+'/images/images_backend/close.jpg';		

	//preload images
	var intNextImage = intImage+1;
	var intPrevImage = intImage-1;
	var totalImage = arrGalleryImages[intGallery].length;
	if (intImage+1==totalImage){
		intNextImage =0;	
	}
	else if (intImage==0){
		intPrevImage = totalImage;	
	}
	
	var preloadNextImg = '<img id="preload_next_img" src="'+arrGalleryImages[intGallery][intNextImage]+'" />';
	var preloadPrevImg = '<img id="preload_prev_img" src="'+arrGalleryImages[intGallery][intPrevImage]+'" />';

	$('next_img').innerHTML=preloadNextImg;
	$('prev_img').innerHTML=preloadPrevImg;

	var newImg = new Image();
	newImg.src = arrGalleryImages[intGallery][intImage];
	
	var realwidth = newImg.width;	
	var realheight = newImg.height;
	var finalwidth = realwidth;
	var finalheight = realheight;	
	var windowwidth = window.getSize().x;
	var windowheight = window.getSize().y;

//this to make sure image always smaller than window	
	if(realwidth!=0&&realheight!=0){	
		if(realwidth + minSpacing > windowwidth || 
		   realheight + minSpacing > windowheight || 
		   realwidth + minSpacing == windowwidth || 
		   realheight + minSpacing == windowheight){ //if img bigger or equal than window
			 if(realwidth/windowwidth > realheight/windowheight){ // and width bigger than height
				 finalwidth = windowwidth - minSpacing;
				// finalheight = (realheight/realwidth)*finalwidth;
				finalheight = (finalwidth*realheight)/realwidth;
			 }
			 else{ // height bigger than width
				finalheight = windowheight - minSpacing; 
				//finalwidth = (realwidth/realheight)*finalheight;
				finalwidth = (finalheight*realwidth)/realheight;
			 }
		}
	}
	else{ //cheat: to prevent width=0
		if (windowwidth>windowheight){
			finalheight=windowheight-minSpacing;	
			finalwidth=finalheight*3/2;
		}
		else{
			finalwidth = windowwidth-minSpacing;
			finalheight=finalwidth*2/3;
		}		
	}
	//set the margin 
	var marginleft = -1*(finalwidth/2)+getScroll().x-12;
	var margintop = -1*(finalheight/2)+getScroll().y-20;
	var margintopArrowLeft = margintop +finalheight/2-12;
	//in case the image is too small, the narrow goes outside the image
	if(finalwidth<200||finalheight<100)	{
		var marginleftArrowLeft = marginleft-68;
		var marginleftArrowRight = marginleft+finalwidth+25;
	}
	else{
		var marginleftArrowLeft = marginleft+12;
		var marginleftArrowRight = marginleft+finalwidth-56;
	}
	var imgLightbox = new Element('img', {
		'id':'white',
		'class':'white_content',
		'src':arrGalleryImages[intGallery][intImage],
		'alt':arrGalleryCaptions[intGallery][intImage],
		'style':'top:50%;left:50%;position:absolute;margin-top:'+margintop+'px;margin-left:'+marginleft+'px;display:block;',
		'width': finalwidth,
		'height': finalheight	
	});
	imgLightbox.inject('body');	
	
	var imgArrowLeft = new Element('img',{			   
		'id':'arrow_left',			
		'style':'cursor:pointer;display:none;top:50%;left:50%;position:absolute;z-index:6000;margin-top:'+margintopArrowLeft+'px;margin-left:'+marginleftArrowLeft+'px;',
		'src':imgArrowLeft,
		'events': {
			'click': function(){
				showArrowLeft(intGallery,intImage);
			}
		}
		});
	
	var imgArrowRight = new Element('img',{
		'id':'arrow_right',			
		'style':'cursor:pointer;display:none;top:50%;left:50%;position:absolute;z-index:6001;margin-top:'+margintopArrowLeft+'px;margin-left:'+marginleftArrowRight+'px;',
		'src':imgArrowRight	,		
		'events': {
			'click': function(){
				showArrowRight(intGallery,intImage);
			}
		}
		});	
	var margin_top_close=margintop+1*finalheight+19;
	var margin_left_close=marginleft+1*finalwidth-4;
	
	//get the caption name of the image		
	var margin_left_name= marginleft+12;
	var captionW = finalwidth-30;
	var caption_name = arrGalleryCaptions[intGallery][intImage];
	var imgName = new Element('div', {
		'id':'name_img',
		'class':'white_content_name',	
		'style':'top:50%;left:50%;margin-top:'+margin_top_close+'px;margin-left:'+margin_left_name+'px;display:block;width:'+captionW+'px;'			
	});
	imgName.innerHTML = caption_name;
	
	var imgClose = new Element('img', {
		'id':'close_img',
		'class':'white_content_close',
		'src':imgClose,
		'style':'cursor:pointer;top:50%;left:50%;margin-top:'+margin_top_close+'px;margin-left:'+margin_left_close+'px;display:block;',		
		'height':15,
		'width':15,
		'events': {
			'click': function(){			
				deactivate();
			}
		}
	});
	imgArrowLeft.inject('body');
	imgArrowRight.inject('body');	
	imgClose.inject('body');
	imgName.inject('body');

	//detect the mouse position     
	document.addEvent("mousemove", onMouseMove);
}

function onMouseMove(e){		
	var intMouseX = e.client.x;
	var intMouseY = e.client.y;
	var winW = window.getSize().x;
	var winH = window.getSize().y;	

		var imgW = $('white').getProperty('width');
		var imgH =$('white').getProperty('height');

	//find coordinator, 66x66 is the size of left_arrow
	var x_left_min = (winW-imgW)/2;
	var x_left_max = x_left_min+120;
	var x_right_max = winW/2+imgW/2;
	var x_right_min = x_right_max-120;
	var y_min = winH/2-120;
	var y_max = winH/2+120;
	
	// create an hit area for y coordinator
	if(intMouseY>y_min&&intMouseY<y_max){
		if(intMouseX>x_left_min&&intMouseX<x_left_max){
			left();
		}
	
		if(intMouseX>x_right_min&&intMouseX<x_right_max){
			right();
		}
	}
	else{
		if($('arrow_right')){
			$('arrow_right').setStyle('display','none');
		}
		if($('arrow_left')){
			$('arrow_left').setStyle('display','none');
		}
	}
}
function left(){
	if($('arrow_right')){
		$('arrow_right').setStyle('display','none');
	}
	if($('arrow_left')){
		$('arrow_left').setStyle('display','block');
	}
}
function right(){
	if($('arrow_right')){
		$('arrow_right').setStyle('display','block');
	}
	if($('arrow_left')){
		$('arrow_left').setStyle('display','none');
	}
}
function showArrowLeft(intGallery,intImage){
	if($('white')){
		$('white').destroy();
	}
	if($('arrow_right')){
		$('arrow_right').destroy();
	}
	if($('arrow_left')){
		$('arrow_left').destroy();
	}
	if($('name_img')){
		$('name_img').destroy();
	}
	if($('close_img')){
		$('close_img').destroy();
	}
	var totalImage = arrGalleryImages[intGallery].length;
	if (intImage==0){
		intImage = arrGalleryImages[intGallery].length;	
	}	
	enterFullscreenMode(intGallery,intImage-1);
}

function showArrowRight(intGallery,intImage){	
	if($('white')){
		$('white').destroy();
	}
	if($('arrow_right')){
		$('arrow_right').destroy();
	}
	if($('arrow_left')){
		$('arrow_left').destroy();
	}
	if($('name_img')){
		$('name_img').destroy();
	}
    if($('close_img')){
		$('close_img').destroy();
    }
	var totalImage = arrGalleryImages[intGallery].length;
	if (intImage+1==totalImage){
		intImage =-1;	
	}	
	//open lightbox	
	enterFullscreenMode(intGallery,intImage+1);
}

function onDomReady(){	
	generateGallery();
}

function onLoad(){
}
window.addEvent("domready", onDomReady);
window.addEvent("load", onLoad);