// Mark Cassar - CasaSoft -  2007-08-04


if (!com) var com = new Object();
if (!com.CS) com.CS = new Object();
if (!com.CS.Gallery) com.CS.Gallery = new Object();

/* For captions please include */

//Gallery object
/**
 * Creates a gallery class with AJAX functionality
 * @param {Image Element} imgMain The main image where to show the big image
 * @param {Element} mainCaption (Optional) The caption holder of the main image.  Must contain .innerHTML property
 * @param {String} captionTooltip (Optional) Tooltip to show on thumbnails with caption 
 * @param {Element} elemLoading (Optional) Loading element to display when loading
 * @param {Object} classNames (Optional) An object which contains all the class names for the styles.  It can contain: 
 *                                       CSSImageOver
 *                                       CSSImageUp
 *                                       CSSImageSelected
 *                                       CSSContainerOver
 *                                       CSSContainerUp
 *                                       CSSContainerSelected
 *                                       
 *                                       
 */


com.CS.Gallery = function(imgMain, mainCaption, captionTooltip, elemLoading, classNames) {
	
	this.currentImageIndex = -1;
	this.imgMain = imgMain;
	this.mainCaption = mainCaption;
	mainCaption.innerHTML = captionTooltip.innerHTML = "";
	this.captionTooltip = captionTooltip;
	this.listImages = new Array();
	this.classNames = classNames;
	this.elemLoading = elemLoading;
	var scope = this;

	this.init = function(imageIndex) {
		if (!imageIndex) imageIndex = 0;
		this.changeImage(this.listImages[imageIndex]);
	}
	/**
	 * 
	 * @param {Image Element} img Image element
	 * @param {String} largeURL Large image url of thumbnail to show in main image
	 * @param {String} caption Caption of image
	 */
	this.addImage = function(img, largeURL, caption) {
		var image = new com.CS.GalleryImage(img,largeURL,caption,scope,this.listImages.length);		
		this.listImages.push(image);		
	}
	/**
	 * Change the image to a new image
	 * @param {Object} image com.CS.GalleryImage item
	 */
	this.changeImage = function(image) {
		//this._imgMain = new Image();		
		this.select(image,this.listImages[this.currentImageIndex]);
		this.imgMain.style.display = "none"; //hide image
		this.imgMain.alt = image.caption;
		if (this.elemLoading) {
			this.elemLoading.style.display = "";
		}
		this.imgMain.src = image.largeURL;
		
		this.updateControls(image.index);
		if (this.mainCaption) {
			//show caption
			this.mainCaption.innerHTML = image.caption;
		}
		
		this.imgMain.onload = function() {
			//on load
			scope.imgMain.style.display = "";
			if (scope.elemLoading) {
				scope.elemLoading.style.display = "none";
			}
		}
	}
	this.showCaptionTooltip = function(caption) {
		
		if (this.captionTooltip) {
			this.captionTooltip.innerHTML = caption;
			com.CS.General.Align.alignToMouse(this.captionTooltip,10,10);
		}
		
	}
	this.hideCaption = function() {
		if (this.captionTooltip) {
			com.CS.General.Align.detachAlignToMouse(this.captionTooltip);
		}
	}
	// set prev next controls
	this.updateControls = function(imageIndex) {
		
		if (imageIndex == 0) {
			//hide prev button
			this.btnPrev.style.display = "none";
		}
		else {
			this.btnPrev.style.display = "";
		}
		if (imageIndex == (this.listImages.length-1)) {
			this.btnNext.style.display = "none";
		}
		else {
			this.btnNext.style.display = "";
		}
	}
	
	/**
	 * Set all the controls of the gallery
	 */
	this.setControls = function(btnFirst,btnPrev,btnNext,btnLast) {
		this.btnFirst = btnFirst;
		this.btnPrev = btnPrev;
		this.btnNext = btnNext;
		this.btnLast = btnLast;
		if (this.btnFirst) {
			this.btnFirst.onclick = function() {
				scope.changeImage(scope.listImages[0]);
			}
		}
		if (this.btnPrev) {
			this.btnPrev.onclick = function() {
				scope.changeImage(scope.listImages[(scope.currentImageIndex-1)]);
			}
		}
		if (this.btnNext) {
			this.btnNext.onclick = function() {
				scope.changeImage(scope.listImages[(scope.currentImageIndex+1)]);
			}
		}
		if (this.btnLast) {
			this.btnLast.onclick = function() {
				scope.changeImage(scope.listImages[scope.listImages[(scope.listImages.length-1)]]);
			}
		}
	}

	//Display select CSS
	this.select = function(galleryImage, prevImage) {
		var img = galleryImage.image;
		var container = img.parentNode;
		
		
		if (scope.classNames.CSSImageSelected) {
			img.className = scope.classNames.CSSImageSelected;
		}
		if (scope.classNames.CSSContainerSelected) {
			container.className = scope.classNames.CSSContainerSelected;
		}
		scope.currentImageIndex = galleryImage.index;
		galleryImage.selected = true;
		if (prevImage) {
			prevImage.selected = false;
			scope.rollOut(prevImage); // unselect previous one
		}
	}
	/**
	 * Set over classes
	 * @param {com.CS.GalleryImage} galleryImage
	 */
	this.rollOver = function(galleryImage) {
		if (!galleryImage.selected) {
			var img = galleryImage.image;
			var container = img.parentNode;
			
			
			if (scope.classNames.CSSImageOver) {
				img.className = scope.classNames.CSSImageOver;
			}
			if (scope.classNames.CSSContainerOver) {
				container.className = scope.classNames.CSSContainerOver;
			}
		}
	}
	
	this.rollOut = function(galleryImage) {
		if (!galleryImage.selected) {
			var img = galleryImage.image;
			var container = img.parentNode;	
			
			if (scope.classNames.CSSImageUp) {
				img.className = scope.classNames.CSSImageUp;
			}
			if (scope.classNames.CSSContainerUp) {
				container.className = scope.classNames.CSSContainerUp;
			}
		}
	}
	
	this.enableKeyboard = function() {
		var f = function(keyCode) {
			if (keyCode == 37 && scope.btnPrev.style.display != "none") {
				//left
				scope.btnPrev.onclick();
			}
			else if (keyCode == 39 && scope.btnNext.style.display != "none") {
				scope.btnNext.onclick();
			}
		}
		
		com.CS.General.Key.captureKey(f);
		
	}
	this.enableKeyboard();
}

/**
 * Creates a galler image object
 * @param {Image Element} img Image element
 * @param {String} largeURL Large image url 
 * @param {String} caption Caption of image
 * @param {com.CS.Gallery} gallery Gallery to which this image is linked
 * @param {Number} index The index of image in gallery
 */
com.CS.GalleryImage = function(img, largeURL, caption, gallery, index, CSSClasses) {
	this.index = index;
	this.gallery = gallery; // com.Life.Gallery;
	this.image = img;
	var scope = this;
	this.largeURL = largeURL;
	this.caption = caption;
	this.selected = false;
	this.image.onclick = function() {		
		scope.gallery.changeImage(scope);
	}
	this.image.onmouseover = function() {
		
		this.style.cursor = "pointer";
		
		if (scope.caption) {
			//show caption
			scope.gallery.showCaptionTooltip(caption);
		}
		scope.gallery.rollOver(scope);
		
	}
	this.image.onmouseout = function() {
		
		if (scope.caption) {
			scope.gallery.hideCaption();
		}
		scope.gallery.rollOut(scope);
		
	}
}