/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Gallery
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var GALLERY_WIDTH = 626;  
var GALLERY_HEIGHT = 490;
var IMAGE_WINDOW_WIDTH = 626;
var IMAGE_WINDOW_HEIGHT = 333;
var IMAGES_PER_PAGE = 17;
var THUMBS_APPEAR_ON_SIDE = false;  // Not implemented yet but should be, options are right or bottom.

var currentGalleryImageIndex = 0;
var currentGallerySlide = 0;
var galleryDetailsExpanded = false;

//
// Init function, should be called after the HTML is added to the page (ideally onload)
//
function InitGallery(){
	if($('galley-wrapper')){
	  //
	  // Dynamically set gallery size
	  //
	  $('galley-wrapper').style.width = GALLERY_WIDTH + 'px';
	  $('galley-wrapper').style.height = GALLERY_HEIGHT + 'px';
	  $('gallery-image').style.width = IMAGE_WINDOW_WIDTH + 'px';
	  $('gallery-image').style.height = IMAGE_WINDOW_HEIGHT + 'px';
	  $('gallery-menu').style.width = IMAGE_WINDOW_WIDTH + 'px';
	  $('gallery-menu').style.height = IMAGE_WINDOW_HEIGHT + 'px';
	  //$('image-groups').style.width = IMAGE_WINDOW_WIDTH + 'px';
	  //$('image-group').style.width = IMAGE_WINDOW_WIDTH + 'px';
	  $('gallery-image-description').style.width = (IMAGE_WINDOW_WIDTH - 111) + 'px';
	  
		LoadImage(0);

		$('gallery-image-details').setStyle('opacity', 0.8);	
		var nextButtons = $$('div.gallery-image-button-next');
		
		nextButtons.each(function(item){
			item.onclick = SlideRight;
		});
		
		var previousButtons = $$('div.gallery-image-button-previous');
		
		previousButtons.each(function(item){
			item.onclick = SlideLeft;
		});
		
		var previousButton = $('gallery-previous-image');
		previousButton.onclick = LoadPreviousImage;
		previousButton.style.display = 'none';
		previousButton.style.cursor = 'pointer';
		
		var nextButton = $('gallery-next-image');
		nextButton.onclick = LoadNextImage;
		nextButton.style.cursor = 'pointer';

		if(imageArray.length > 1){
			nextButton.style.display = 'block';
		} else {
			nextButton.style.display = 'none';
		}
	}
}

//
// Slide right
//
function SlideRight(){
	Slide('right');
}

//
// Slide left
//
function SlideLeft(){
	Slide('left');
}

//
// Slide
//
function Slide(direction){
	var slideLenght = 0;

	if(direction == "left"){
		currentGallerySlide--;
		slideLenght = IMAGE_WINDOW_WIDTH;
	} else {
		currentGallerySlide++;
		slideLenght = -IMAGE_WINDOW_WIDTH;
	}
	
	if((currentGallerySlide == 0 && imageArray.length > IMAGES_PER_PAGE) || (currentGallerySlide != GetSlideIndex(imageArray.length - 1))){
		$('current-image-text').innerHTML = "Showing " + IMAGES_PER_PAGE + " of " + imageArray.length + " images";
	} else if(currentGallerySlide == 0){
		$('current-image-text').innerHTML = "Showing " + imageArray.length + " of " + imageArray.length + " images";
	} else {
		$('current-image-text').innerHTML = "Showing " + parseInt(imageArray.length - (((IMAGES_PER_PAGE - 1) * currentGallerySlide) + 1)) + " of " + imageArray.length + " images";
	}

	var node = $('image-groups');
	var currentX = parseInt(node.style.left);
		
	if(isNaN(currentX)){
		currentX = 0;
	}
		
	var leftChange = new Fx.Style(node, 'left', {duration:500, transition: Fx.Transitions.Quad.easeInOut});
	leftChange.start(currentX, (currentX + slideLenght));
}

//
// Load Next Image
//
function LoadNextImage(){
	LoadImage(currentGalleryImageIndex + 1);
	return false;
}

//
// Load Previous Image
//
function LoadPreviousImage(){
	LoadImage(currentGalleryImageIndex - 1);
	return false;
}

//
// Load Image
//
function LoadImage(id){
	if(id < 0){
		id = 0;
	} else if(id > imageArray.length - 1){
		id = imageArray.length - 1;
	}
	
	var imageMetaData = imageArray[id];
	new Asset.image(imageMetaData[0], {title: imageMetaData[1], description: imageMetaData[2], alt: imageMetaData[3], link: imageMetaData[4], index: id, onload: ImageLoaded});
	
	return false;
}

//
// Image Loaded
//
function ImageLoaded(){
	var image = $('gallery-image-main');
	var clone = image.clone().injectAfter(image);
	clone.id = 'gallery-image-main-clone';
	
	image.setStyle('opacity', 0);

	if(image.height != this.height || image.width != this.width){
		var borderWidthTopBottom = parseInt((IMAGE_WINDOW_HEIGHT - this.height) / 2);
		
		if(borderWidthTopBottom < 0){
			borderWidthTopBottom = 0;
		}
		
		var borderWidthLeftRight = parseInt((IMAGE_WINDOW_WIDTH - this.width) / 2);
		
		if(borderWidthLeftRight < 0){
			borderWidthLeftRight = 0;
		}
		
		image.setStyle('borderStyle','solid');
		image.setStyle('borderColor','#999999');
		image.setStyle('borderTopWidth', borderWidthTopBottom);
		image.setStyle('borderBottomWidth', borderWidthTopBottom);
		image.setStyle('borderLeftWidth', borderWidthLeftRight);
		image.setStyle('borderRightWidth', borderWidthLeftRight);
	}	
	
	image.src = this.src;
	image.title = this.title;
	image.alt = this.alt;
	
	var newGalleryImageIndex = parseInt(this.getProperty('index'));
	var newGallerySlide = GetSlideIndex(newGalleryImageIndex);
	
	if(newGallerySlide - currentGallerySlide > 0){
		SlideRight();
	} else if(newGallerySlide - currentGallerySlide < 0){
		SlideLeft();
	}
	
	currentGalleryImageIndex = newGalleryImageIndex;
	currentGallerySlide = newGallerySlide;
	
	var slideChange = new Fx.Style(image, 'opacity', {duration:500, transition: Fx.Transitions.Quad.easeInOut, onComplete: CleanUpTransition});
	slideChange.start(0, 1);
	
	var title =  this.getProperty('title');
	var description =  this.getProperty('description');
	var link =  this.getProperty('link');
	
	var titleNode = $('gallery-image-title');
	var descriptionNode = $('gallery-image-description');
	var downloadLinkNode = $('gallery-image-download-link');
	
	titleNode.setHTML(title);
	descriptionNode.setHTML(description);
	downloadLinkNode.href = link;

	if(galleryDetailsExpanded){
		SlideDescription(GetDescriptionHeight() + 25);
	}

	var previousButton = $('gallery-previous-image');

	if(currentGalleryImageIndex > 0){
		previousButton.style.display = 'block';
	} else {
		previousButton.style.display = 'none';
	}
		
	var nextButton = $('gallery-next-image');

	if(currentGalleryImageIndex < (imageArray.length - 1)){
		nextButton.style.display = 'block';
	} else {
		nextButton.style.display = 'none';
	}
}

//
// Get Slide Index
//
function GetSlideIndex(galleryImageIndex){
	var newGallerySlide = parseInt((galleryImageIndex - 1) / (IMAGES_PER_PAGE - 1))
	
	if(newGallerySlide < 0){
		newGallerySlide = 0;
	}
	
	return newGallerySlide;
}

//
// Clean Up Transition
//
function CleanUpTransition(){
	var image = $('gallery-image-main-clone');
	
	if(image){
		image.remove();
	}
}

//
// Toggle Description
//
function ToggleDescription(){
	var details = $('gallery-image-details');

	if(details){
		var endValue = 0;
	
		if(galleryDetailsExpanded){
			endValue = 20;
			galleryDetailsExpanded = false;
			$('gallery-info').src = $('gallery-info').src.replace('gallery-close-info.gif', 'gallery-open-info.gif');
		} else {
			endValue = GetDescriptionHeight() + 25;
			galleryDetailsExpanded = true;
			$('gallery-info').src = $('gallery-info').src.replace('gallery-open-info.gif', 'gallery-close-info.gif');
		}
	
		SlideDescription(endValue);
	}
}

//
// Get Description Height
//
function GetDescriptionHeight(){
	var text = $('gallery-image-description');
	if(text){
		return text.getSize().y;
	} else {
		return 0;
	}
}

//
// Slide description
//
function SlideDescription(endValue){
		var details = $('gallery-image-details');
		var slideChange = new Fx.Style(details, 'height', {duration:500, transition: Fx.Transitions.Quad.easeInOut});
		slideChange.start(endValue);
}

//
// Hide Border
//
function HideBorder(node){
	ChangeBorder(node, false);
}

//
// Show border
//
function ShowBorder(node){
	ChangeBorder(node, true);
}

//
// Change border
//
function ChangeBorder(node, displayBorder){
	$(node).getChildren().each(function(item){
		if(item.className == 'gallery-image-border'){
			if(displayBorder){
				item.setStyle('display', 'block');
			} else {
				item.setStyle('display', 'none');
			}
		}
	});
}