//thumbnails are 60px wide, plus 3 px border all around, plus 4 px margin to the left of each image (70px wide each total)

var allowScroll = false, scrollDir;
var totalScroll = 0; //the max amount to allow scrolling

function scrollCarousel() {
	if(allowScroll) { //hasnt moused out yet?
		if(scrollDir == 'right') {
			if(totalScroll > Math.abs(parseInt(jQuery('ul#carousel-ul').css('marginLeft')))) {
				jQuery('ul#carousel-ul').css('marginLeft', parseInt(jQuery('ul#carousel-ul').css('marginLeft')) - 5);
			}
		}else{
			if(parseInt(jQuery('ul#carousel-ul').css('marginLeft')) < 0) {
				jQuery('ul#carousel-ul').css('marginLeft', parseInt(jQuery('ul#carousel-ul').css('marginLeft')) + 5);
			}
		}
		setTimeout(scrollCarousel, 20); //call again in a 20/1000 of a second
	}	
}

function getXOffset(p_elm) {
	var elm;
	if(typeof(p_elm) == 'object'){
		elm = p_elm;
	} else {
		elm = document.getElementById(p_elm);
	}
	var xOff = 0;
	while (elm != null) {
		xOff += elm.offsetLeft;
		elm = elm.offsetParent;
	}
	return parseInt(xOff);
}
function getYOffset(p_elm) {
	var elm;
	if(typeof(p_elm) == 'object'){
		elm = p_elm;
	} else {
		elm = document.getElementById(p_elm);
	}
	var yOff = elm.offsetHeight;
	
	while (elm != null) {
		yOff += elm.offsetTop;
		elm = elm.offsetParent;
	}
	return parseInt(yOff);
}

jQuery(function() {
		jQuery('#contain-carousel').css('display', 'block');
		var imageWidth = 70;
		var num_images = parseInt(jQuery('ul#carousel-ul').children().length);
		totalScroll = (num_images - 7) * imageWidth; //7 images can show 
		
		jQuery('ul#carousel-ul').css('width', (num_images * imageWidth));
		
		//next button
		jQuery('#carousel-next').click(function(e) {
				e.preventDefault();
				return false;
		});
		jQuery('#carousel-next').mouseover(function() {
				allowScroll = true;
				scrollDir = 'right';
				scrollCarousel();
		});
		jQuery('#carousel-next').mouseout(function() {
				allowScroll = false;
		});
		
		//prev button
		jQuery('#carousel-prev').click(function(e) {
				e.preventDefault();
				return false;
		});
		jQuery('#carousel-prev').mouseover(function() {
				allowScroll = true;
				scrollDir = 'left';
				scrollCarousel();
		});
		jQuery('#carousel-prev').mouseout(function() {
				allowScroll = false;
		});
		
		//thumbnail
		jQuery('.carouselImage').click(function(e) {
				var docId = this.id.substr(14);
				
				jQuery('#main-gallery-image').css('opacity', 0.5);
				
				var mainImageLeft, mainImageBottom;
				var loaderW = 220;
				var loaderH = 20;

				if(!document.getElementById('main-gallery-loader')) { //create the loading image if we havnt yet
					//create the loading gif el
					var loaderImg = document.createElement('img');
					loaderImg.setAttribute('id', 'main-gallery-loader');
					loaderImg.setAttribute('src', '/images/ajax-loader.gif');
					
					//append to the end of the body
					var body = document.getElementsByTagName('body');
					body[0].appendChild(loaderImg);
					
					//set some styles so it displays over everything
					jQuery('#main-gallery-loader').css('position', 'absolute');
					jQuery('#main-gallery-loader').css('z-index', '9999');
				}
				
				//show the loading image over the image
				mainImageLeft = parseInt(getXOffset('main-gallery-image'));
				mainImageBottom = parseInt(getYOffset('main-gallery-image'));
				
				//calculate the middle of the main image, and move our loading gif there
				jQuery('#main-gallery-loader').css('left', mainImageLeft + (parseInt(jQuery('#main-gallery-image').css('width')) / 2) - (loaderW / 2));
				jQuery('#main-gallery-loader').css('top', mainImageBottom - (parseInt(jQuery('#main-gallery-image').css('height')) / 2) - (loaderH / 2));
				jQuery('#main-gallery-loader').css('display', 'block');
				
				//get the image
				var imgObj = new Image();
				
				imgObj.onload = function(){
					document.getElementById('main-gallery-image').src = this.src;
					jQuery('#main-gallery-loader').css('display', 'none');
					jQuery('#main-gallery-image').css('opacity', 1);
				}
				
				jQuery.ajax({
						url: '/ajax_requests.htm?action=get-gallery-image&docid='+docId,
						method: 'get',
						error: function (XMLHttpRequest, textStatus, errorThrown) {
							alert('There seems to have been an error loading the image, please refresh the page and try again.');
							jQuery('#main-gallery-loader').css('display', 'none');
							jQuery('#main-gallery-image').css('opacity', 1);
						},
						success: function (data, textStatus) {
							var docArray = data.split('-|-');
							
							imgObj.src = docArray[0];
							document.getElementById('gallery-image-title').innerHTML = docArray[1].replace(/\\/g);
							document.getElementById('gallery-image-description').innerHTML = docArray[2].replace(/\\/g);
						}
				});
				
				e.preventDefault();
				return false;
		});
});