$(document).ready(function(){
	loadMayaPhotoScript();
});


//----------------------- EDIT FOLLOWING VARIABLES ------------------

var imageWrapperId = 'content'; //div width large images
var thumbWrapperId = 'footer'; //div with thumbs
var fullImagesDir = 'img/fullimages'; // Map waar de volledige foto's in staan

//----------------------- DON'T EDIT AFTER HERE ------------------
 	var imageWrapper = 0;
 	var thumbWrapper = 0;
 	var distanceToLeft = 1200; //hoger dan breedte van de thumbs
 	var distanceToRight = 1200; //hoger dan breedte van de thumbs
 	var showid = 1; // current showing image;
 	var isClicked = 0; // Controle of er al is geklikt
 	var snelheid = 800; //tijdsduur in ms
 	
 	var isIE = document.all ? true : false;
 	// If NS -- that is, !IE -- then set up for mouse capture
	if (!isIE) document.captureEvents(Event.MOUSEMOVE)
 
 
function loadMayaPhotoScript()
{
	imageWrapper = document.getElementById(imageWrapperId); //div to show images
	thumbWrapper = document.getElementById(thumbWrapperId); //div with thumbs
	
	prepareWrapper();
	prepareThumbs();
	prepareImages();
}


function prepareWrapper()
{
	imageWrapper.style.position = 'relative';
	imageWrapper.style.overflow = 'hidden';
}



function prepareThumbs()
{
try{
	var thumbs = thumbWrapper.getElementsByTagName("img");
	var i=0;
	for(i=0; i<thumbs.length; i++)
	{
		thumbs[i].id= 'thumb____'+(i+1);
		thumbs[i].onclick = displayImage;
	}
	}catch(e){alert(e+'1');};
}

function prepareImages()
{
try{
	var img = imageWrapper.getElementsByTagName("img");
	var i=0;
	for(i=0; i<img.length; i++)
	{
		var image = new Image()
			image.src = img[i].src;
		
		img[i].id= 'img____'+(i+1);
		img[i].style.position = 'absolute';
		img[i].style.left = '-9999px';
		img[i].onclick = magnify;
	}

			//Set first image
			var firstImage = document.getElementById('img____'+showid);
				firstImage.style.left = (imageWrapper.offsetWidth /2) - (470)+'px';
			}catch(e){alert(e);};
}

function displayImage()
{
	var thumbid = this.id
	var thumbsIdParts = thumbid.split('____');
	var id = thumbsIdParts[1];
	var showIdNew = id;
	
	var image = document.getElementById('img____'+id);
	var imageObject = new Image();
		imageObject.src = image.src

	var otherImg = document.getElementById('img____'+showid);
	var otherImgObject = new Image();
		otherImgObject.src = otherImg.src
	
	
	
	//Current showing image hoger of lager
	if(parseInt(showid) < parseInt(showIdNew))
	{
		//Afbeelding komt van rechts
		image.style.left='';
		image.style.right = '-'+distanceToRight + 'px';
		var move = distanceToRight + (imageWrapper.offsetWidth /2) - (imageObject.width/2);
		$(image).animate({right: "+="+ move, opacity: '1'}, snelheid, false);
		
		//Vorige afbeelding ook naar rechts
		otherImg.style.left='';
		otherImg.style.right = (imageWrapper.offsetWidth /2) - (otherImgObject.width/2)+'px';
		var move2 = (imageWrapper.offsetWidth/2)+(otherImgObject.width/2);
		$(otherImg).animate({right: "+="+ move2, opacity: '0'}, snelheid, false);
	
	}
	
	else if(parseInt(showid) > parseInt(showIdNew))
	{
		//Afbeelding komt van links
		image.style.right='';
		image.style.left = '-'+distanceToLeft + 'px';
		var move = distanceToLeft + (imageWrapper.offsetWidth /2) - (imageObject.width/2);
		$(image).animate({left: "+="+ move, opacity: '1'}, snelheid, false);
		
		
		//Vorige afbeelding ook naar rechts
		otherImg.style.right='';
		otherImg.style.left = (imageWrapper.offsetWidth /2) - (otherImgObject.width/2)+'px';
		var move2 = (imageWrapper.offsetWidth/2)+(otherImgObject.width/2);
		$(otherImg).animate({left: "+="+ move2, opacity: '0'}, snelheid, false);
	}
	else
	{
		$(image).animate({opacity: '1'}, snelheid, false);
	}
	
	showid = showIdNew;
}


function magnify()
{
	var fullSrc = this.src;
	var fullSrcParts = fullSrc.split('/');
	
	var magImage = new Image();
		magImage.src = fullImagesDir + '/' + fullSrcParts[fullSrcParts.length-1];
		
	document.body.innerHTML = '<img id="magnifyImage" style="position:absolute; z-index:99;" src="'+magImage.src+'" alt="" onclick="closeMagnify(this)"/>' + document.body.innerHTML;
	//Recalculate image placement
	if(!document.addEventListener)
	{
		document.onmousemove = replaceMagnify;
	}else
	{
		document.addEventListener('mousemove', replaceMagnify, false);
	}
		
	replaceMagnify(event); //eerste plaatsing afbeelding
}

function closeMagnify(ele)
{
	$(ele).remove();
	
	if(!document.removeEventListener)
	{
		document.onmousemove = '';
	}else
	{
		document.removeEventListener('mousemove', replaceMagnify, false);
	}
	loadMayaPhotoScript();
}

function replaceMagnify(e)
{
	//body width en height
	var bodyWidth = '';
	var bodyHeight ='';
	
	  if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		bodyWidth = window.innerWidth;
		bodyHeight = window.innerHeight;
	  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		bodyWidth = document.documentElement.clientWidth;
		bodyHeight = document.documentElement.clientHeight;
	  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		bodyWidth = document.body.clientWidth;
		bodyHeight = document.body.clientHeight;
	  }
	

	//Mouse XY
		var _x;
		var _y;
		if (!isIE) {
			_x = e.pageX;
			_y = e.pageY;
		}
		if (isIE) {
			_x = event.clientX + document.body.scrollLeft;
			_y = event.clientY + document.body.scrollTop;
		}
	var posX = parseInt(_x);
	var posY = _y;
	
	//image width en height
	var magImg = document.getElementById('magnifyImage');
	var magImgObject = new Image();
		magImgObject.src = magImg.src;
	var magImgWidth = parseInt(magImgObject.width);
	var magImgHeight = magImgObject.height;
		
		
		//Percentage Muis t.o.v. body
		var mousePercWidth = ((100/bodyWidth)*posX)+50;
		var mousePercHeight = ((100/bodyHeight)*posY)+50;
		
		//Percentage van afbeelding instellen
		var pxFromTop = magImgHeight - ((magImgHeight/100) * mousePercHeight);
		var pxFromLeft = magImgWidth - ((magImgWidth/100) * mousePercWidth);
		
		//Bekijk of pixels marges overschrijdt
		if(pxFromTop > 0) { pxFromTop = 0;};
		if(pxFromLeft > 0) { pxFromLeft = 0;};
		if(pxFromTop < (((magImgHeight - bodyHeight)*-1)+20)) { pxFromTop = ((magImgHeight - bodyHeight)*-1)+20;};
		if(pxFromLeft < (((magImgWidth - bodyWidth)*-1)+20)) { pxFromLeft = ((magImgWidth - bodyWidth)*-1)+20;};
		
		//Stel afbeelding in
		magImg.style.top = pxFromTop+'px';
		magImg.style.left = pxFromLeft+'px';
}