// configuration
var strThumbnailPrefix = 'tn_'
var strImageDirectory = 'upload/'
var strLoadingImage = 'images/image-loader.gif';
var arrImages;
var intImageTotal;
var intCurrentImage;

// initiating the image gallery 
function initImageGallery() {

	var ulThumbnails = document.getElementById('thumbnails');
	var divGalleryImage = document.getElementById('gallery-image');
	
	if (ulThumbnails && divGalleryImage) {
	
		// get array of images
		arrImages = ulThumbnails.getElementsByTagName('img');
		
		// assign events to thumbnail links
		var arrThumbLinks = ulThumbnails.getElementsByTagName('a');
		for (i=0;i<arrThumbLinks.length;i++) {
			var lnkAnchor = arrThumbLinks[i];
			lnkAnchor.setAttribute('href','#gallery-image');
			lnkAnchor.onclick = function() {thumbnailClick(this); return false;}
		}
		
		// set the image total and current image
		intImageTotal = arrThumbLinks.length-1;
		intCurrentImage = 0;
		
		// add previous and next links
		var divImageNavigation = document.createElement('div');
		divImageNavigation.setAttribute('id','image-navigation');
		document.getElementById('main').insertBefore(divImageNavigation, divGalleryImage.nextSibling);
		
		var lnkNextLink  = document.createElement('a');
		lnkNextLink.setAttribute('href','#gallery-image');
		lnkNextLink.setAttribute('id','next-image');
		lnkNextLink.innerHTML = 'Next image';
		divImageNavigation.appendChild(lnkNextLink);
		
		var lnkPreviousLink  = document.createElement('a');
		lnkPreviousLink.setAttribute('href','#gallery-image');
		lnkPreviousLink.setAttribute('id','previous-image');
		lnkPreviousLink.innerHTML = 'Previous image';
		divImageNavigation.appendChild(lnkPreviousLink);
		
		// add loading image
		var objLoadingImage = new Image();
		objLoadingImage.onload = function() {
		
			// add the preloader image
			var imgLoadingImage = document.createElement('img');
			imgLoadingImage.src = strLoadingImage;
			imgLoadingImage.setAttribute('title','Loading...');
			imgLoadingImage.setAttribute('alt','Loading...');
			imgLoadingImage.style.marginTop = (divGalleryImage.offsetHeight/2)-(objLoadingImage.height/2) + 'px';
			imgLoadingImage.style.marginLeft = (divGalleryImage.offsetWidth/2)-(objLoadingImage.width/2) + 'px';
			imgLoadingImage.setAttribute('id', 'loading-image');
			divGalleryImage.appendChild(imgLoadingImage);
			
			// show the previous image
			showImage();
			
			objLoadingImage.onload = function() {};
		}
		objLoadingImage.src = strLoadingImage;
	
	}
	
}

function setCurrentThumbnail() {
	for(i=0;i<arrImages.length;i++) {
		var lnkThumbnail = arrImages[i].parentNode;
		if (i==intCurrentImage) {
			lnkThumbnail.className = 'current';
		} else {
			lnkThumbnail.className = '';
		}
	}
}

function setPreviousNext() {

	// set the buttons
	if (intCurrentImage==0) {
		document.getElementById('next-image').onclick = function(){nextClick(); return false;}
		document.getElementById('next-image').setAttribute('href','#gallery-image');
		document.getElementById('next-image').className = 'enabled';
		document.getElementById('previous-image').onclick = function(){return false;};
		document.getElementById('previous-image').removeAttribute('href');
		document.getElementById('previous-image').className = 'disabled';
	} else if (intCurrentImage==intImageTotal) {
		document.getElementById('next-image').onclick = function(){return false;}
		document.getElementById('next-image').removeAttribute('href');
		document.getElementById('next-image').className = 'disabled';
		document.getElementById('previous-image').onclick = function(){previousClick(); return false;};
		document.getElementById('previous-image').setAttribute('href','#gallery-image');
		document.getElementById('previous-image').className = 'enabled';
	} else {
		document.getElementById('next-image').onclick = function(){nextClick(); return false;}
		document.getElementById('next-image').setAttribute('href','#gallery-image');
		document.getElementById('next-image').className = 'enabled';
		document.getElementById('previous-image').onclick = function(){previousClick(); return false;};
		document.getElementById('previous-image').setAttribute('href','#gallery-image');
		document.getElementById('previous-image').className = 'enabled';
	}
}

function showImage() {

	// get the image path and the title
	strImage = arrImages[intCurrentImage].src
	strImage = strImage.substring(strImage.lastIndexOf('/'+strThumbnailPrefix)+1+strThumbnailPrefix.length, strImage.length);
	strTitle = arrImages[intCurrentImage].getAttribute('title');
	
	// get the current image
	var imgCurrentImage = document.getElementById('current-image')

	// if there is an image already in there, remove it
	if (imgCurrentImage) {document.getElementById('gallery-image').removeChild(imgCurrentImage);}
	
	// show the image loader
	var imgLoadingImage = document.getElementById('loading-image');
	if (imgLoadingImage) {
		imgLoadingImage.style.display = 'block'; 
	}
	
	setPreviousNext();
	setCurrentThumbnail();
	
	// set up the new image
	var objNewImage = new Image();
	objNewImage.onload = function() {
		var imgNewImage = document.createElement('img');
		imgNewImage.src = strImageDirectory + strImage;
		imgNewImage.setAttribute('title',strTitle);
		imgNewImage.setAttribute('alt',strTitle);
		imgNewImage.setAttribute('id','current-image');
		imgLoadingImage.style.display = 'none';
		// imgNewImage.style.marginTop = (document.getElementById('gallery-image').offsetHeight/2)-(objNewImage.height/2) + 'px';
		imgNewImage.style.marginLeft = (document.getElementById('gallery-image').offsetWidth/2)-(objNewImage.width/2) + 'px';
		document.getElementById('loading-image').style.display='none';
		document.getElementById('gallery-image').insertBefore(imgNewImage, document.getElementById('loading-image'));
	}
	objNewImage.src = strImageDirectory + strImage;

}

// PreviousLink
function previousClick() {
		
	// get the current image name
	var strCurrentImage = document.getElementById('gallery-image').getElementsByTagName('img')[0].src;
	strCurrentImage = strCurrentImage.substring(strCurrentImage.lastIndexOf('/')+1, strCurrentImage.length);
	
	for(i=0;i<arrImages.length;i++) {
	
		// get the name of the thumbnail
		var strImage = arrImages[i].src.substring(arrImages[i].src.lastIndexOf('/')+1,arrImages[i].src.length);
	
		// if the thumbnail is the image we are currently viewing
		if (strImage == strThumbnailPrefix + strCurrentImage) {
		
			// set the current image count
			intCurrentImage = i-1;
			
			// show the previous image
			// strPreviousImage = strPreviousImage.substring(strPreviousImage.lastIndexOf('/'+strThumbnailPrefix)+1+strThumbnailPrefix.length, strPreviousImage.length);
			showImage()
			
		}
	
	}
	
}


// NextLink
function nextClick() {
		
	// get the current image name
	var strCurrentImage = document.getElementById('gallery-image').getElementsByTagName('img')[0].src;
	strCurrentImage = strCurrentImage.substring(strCurrentImage.lastIndexOf('/')+1, strCurrentImage.length);
	
	for(i=0;i<arrImages.length;i++) {
	
		// get the name of the thumbnail
		var strImage = arrImages[i].src.substring(arrImages[i].src.lastIndexOf('/')+1,arrImages[i].src.length);
	
		// if the thumbnail is the image we are currently viewing
		if (strImage == strThumbnailPrefix + strCurrentImage) {
		
			// set the current image count
			intCurrentImage = i+1;
			
			// show the previous image
			showImage()
			
		}
	
	}
	
}

// ThumbnailLink
function thumbnailClick(lnkThumbnail) {

	// get the current image name
	var strCurrentImage = document.getElementById('gallery-image').getElementsByTagName('img')[0].src;
	strCurrentImage = strCurrentImage.substring(strCurrentImage.lastIndexOf('/')+1, strCurrentImage.length);

	var strTargetImage = lnkThumbnail.getElementsByTagName('img')[0].src;
	strTargetImage = strTargetImage.substring(strTargetImage.lastIndexOf('/'+strThumbnailPrefix)+1+strThumbnailPrefix.length, strTargetImage.length);

	for(i=0;i<arrImages.length;i++) {
	
		// get the name of the thumbnail
		var strImage = arrImages[i].src.substring(arrImages[i].src.lastIndexOf('/')+1,arrImages[i].src.length);
	
		// if the thumbnail is the image we are currently viewing
		if (strImage == strThumbnailPrefix + strTargetImage) {
		
			// set the current image count
			intCurrentImage = i;
			
		}
	
	}
		
	showImage();
}

addLoadEvent(initImageGallery);