/*
	An Ajax-ready Sliding Gallery
	Licenses:
	(c) Creative Commons 2006
	http://creativecommons.org/licenses/by-sa/2.5/		
	
	Free to use with my prior permission
	Author: Kevin Hoang Le | http://pragmaticobjects.org
	Date: 2006-06-30
*/

var gallerySlide = Class.create();
gallerySlide.prototype = {
	catalog : 0,
	prevImage : 0,
	nextImage : 0,
	scrollBy : 0,
	startDisplayIndex : 0,
	displayImages : 0,
	activePage : 0,
	PAGE_ID_PREFIX : "page",
	PADDING : 16, //galleryInnerBox's padding-right + padding-left + 2 
	backImg : 0,
	backHoverImg : 0,
	backDisabledImg : 0,
	forwardImg : 0,
	forwardHoverImg : 0,
	forwardDisabledImg : 0,
	pageColor : 0,
	pageCurrentColor : 0,
	imageClickEvt : 0,
	imageMouseOverEvt : 0,
	imageMouseOutEvt : 0,	
	nameClickEvt : 0,
	nameMouseOverEvt : 0,
	nameMouseOutEvt : 0,
	
	initialize : function(boxWidth, scrollPixels, displayImages, backImg, backHoverImg, backDisabledImg,
	forwardImg, forwardHoverImg, forwardDisabledImg, pageColor, pageCurrentColor, imageClickEvt, 
	imageMouseOverEvt, imageMouseOutEvt, nameClickEvt, nameMouseOverEvt, nameMouseOutEvt) {
		var self = this;
		this.scrollBy = scrollPixels + this.PADDING;
		this.displayImages = displayImages;
		this.backImg = backImg; 
		this.backHoverImg = backHoverImg;
		this.backDisabledImg = backDisabledImg;
		this.forwardImg = forwardImg;
		this.forwardHoverImg = forwardHoverImg;
		this.forwardDisabledImg = forwardDisabledImg;
		this.pageColor = pageColor;
		this.pageCurrentColor = pageCurrentColor;		
		this.imageClickEvt = imageClickEvt;
		this.imageMouseOverEvt = imageMouseOverEvt;
		this.imageMouseOutEvt = imageMouseOutEvt;
		this.nameClickEvt = nameClickEvt;
		this.nameMouseOverEvt = nameMouseOverEvt;
		this.nameMouseOutEvt = nameMouseOutEvt;
			
		this.constructDivs();
				
		var eDivLeft = $("galleryScrollNext");
		var a = document.createElement("a");
		this.prevImage = document.createElement("img");
		this.prevImage.src = this.backImg;
		this.prevImage.style.border = "none";
		this.prevImage.onmouseover = function() { this.src = self.backHoverImg;  };
		this.prevImage.onmouseout = function() { this.src = self.backImg; };		
		a.style.cursor = "pointer";		
		a.appendChild(this.prevImage);
		eDivLeft.appendChild(a);											
		
		var isMoving=false;				
		var eDivRight = $("galleryScrollPrevious");
		var a = document.createElement("a");
		this.nextImage = document.createElement("img");
		this.nextImage.src = this.forwardDisabledImg;
		this.nextImage.style.border = "none";
		this.nextImage.onmouseover = function() {
			if (self.startDisplayIndex > 0) 
				this.src = self.forwardHoverImg;			
		};
		this.nextImage.onmouseout = function() { 
			if (self.startDisplayIndex > 0)
				this.src = self.forwardImg; 
		};		
		a.style.cursor = "pointer";		
		a.appendChild(this.nextImage);
		eDivRight.appendChild(a);
		
		$("galleryOuterBox").style.width = boxWidth + "px";		
	},
	constructDivs : function() {
		Element.removeAllChildren("gallerySlide");
		var eDivGalleryScrollPrevious = document.createElement("div");
		eDivGalleryScrollPrevious.setAttribute("id", "galleryScrollPrevious");
		$("gallerySlide").appendChild(eDivGalleryScrollPrevious);
		
		var eDiv = document.createElement("div");
		var eDivGalleryOuterBox = document.createElement("div");
		eDivGalleryOuterBox.setAttribute("id", "galleryOuterBox");
		var eDivGalleryInnerBox = document.createElement("div");
		eDivGalleryInnerBox.setAttribute("id", "galleryInnerBox");
		var eDivGalleryIEHack = document.createElement("div");
		eDivGalleryIEHack.setAttribute("id", "galleryIEHack");
		eDivGalleryInnerBox.appendChild(eDivGalleryIEHack);
		eDivGalleryOuterBox.appendChild(eDivGalleryInnerBox);
		eDiv.appendChild(eDivGalleryOuterBox);
		$("gallerySlide").appendChild(eDiv);
		
		var eDivGalleryScrollNext = document.createElement("div");
		eDivGalleryScrollNext.setAttribute("id", "galleryScrollNext");
		$("gallerySlide").appendChild(eDivGalleryScrollNext); 	
	},	
	render : function(catalog) {
		var self = this;								
					
		Element.removeAllChildren("galleryIEHack");
		var eDivIEHack = $("galleryIEHack");
			
		var ul = document.createElement("ul");	
		catalog.item.each(function(item, i) {
			var li = document.createElement("li");			
			var a = document.createElement("a");
			li.setAttribute("id", catalog.item[i].id);			
			var image = document.createElement("img");
			image.src = catalog.item[i].img;					
			image.onmouseover = function() {
				if (self.imageMouseOverEvt != null) {
					self.imageMouseOverEvt(item, i, this);
				} else {
					this.style.border = "1px solid #ffffff";
				}	 				 
			};
			image.onmouseout = function() { 
				if (self.imageMouseOutEvt != null) {
					self.imageMouseOutEvt(item, i, this);
				} else {
					this.style.border = "1px solid #ffffff"; };
				}
			image.onclick = function() {
				if (self.imageClickEvt != null) {
					self.imageClickEvt(item, i, this);
					
				}
			}
			a.style.cursor = "pointer";						
			a.appendChild(image);
			li.appendChild(a);
			
			if (catalog.item[i].name != null) {
				var divCaption = document.createElement("div");
				var aCaption = document.createElement("a");
				aCaption.style.cursor = "pointer";
				aCaption.appendChild(document.createTextNode(catalog.item[i].name));
				aCaption.onmouseover = function() {
					if (self.nameMouseOverEvt != null) {
						self.nameMouseOverEvt(item, i, this);
					} else { 
						this.style.textDecoration = "underline"; 
					}
				};
				aCaption.onmouseout = function() {
					if (self.nameMouseOutEvt != null) {
						self.nameMouseOutEvt(item, i, this);
					} else { 
						this.style.textDecoration = "none"; 
					}
				};
				aCaption.onclick = function() {
					if (self.nameClickEvt != null) {
						self.nameClickEvt(item, i, this);
							
					}
				}
				divCaption.appendChild(aCaption);
				li.appendChild(divCaption);
				
			}
			
			if (catalog.item[i].detail != null) {
				var price = document.createTextNode(catalog.item[i].detail);			
				li.appendChild(price);
			}
			ul.appendChild(li);						
		});
		
		eDivIEHack.appendChild(ul);
										
		this.prevImage.onclick = function() {			
						
			if (self.isMoving) return;
			self.isMoving=true;
			if (self.startDisplayIndex < catalog.item.length - self.displayImages) {				
				var units = self.startDisplayIndex - i * self.displayImages;
				self.slide(catalog, self, -self.displayImages);
				self.startDisplayIndex=self.startDisplayIndex+self.displayImages;
				self.adjustArrowsAndPager(catalog);				
				self.prevImage.onmouseover = function() {
					if (self.startDisplayIndex < catalog.item.length - self.displayImages) 
						this.src = self.backHoverImg; 
				};
				self.prevImage.onmouseout = function() { 
					if (self.startDisplayIndex < catalog.item.length - self.displayImages)
						this.src = self.backImg; 
				};		
					
			}
			//isMoving=false;					
		}
		
		this.nextImage.onclick = function() {			
			if (self.isMoving) return;
			self.isMoving=true;
			if (self.startDisplayIndex > 0) {				
				var units = self.startDisplayIndex - i * self.displayImages;
				self.slide(catalog, self, self.displayImages);
				self.startDisplayIndex=self.startDisplayIndex-self.displayImages;				
				self.adjustArrowsAndPager(catalog);
				
			}	
			//isMoving=false;			
		}				
		
		Element.removeAllChildren("galleryPager");
		$("galleryPager").appendChild(document.createTextNode("page:\u00a0\u00a0"));
		var totalPages = Math.ceil(catalog.item.length / this.displayImages);
		var pages = new Array(totalPages);
		for (i = 0; i < totalPages; i++) {
			pages[i] = i + 1;
		}
		
		
		pages.each(function(item, i) {
			
			var a = document.createElement("a");
			a.setAttribute("id", self.PAGE_ID_PREFIX + i);
			a.style.cursor = "pointer";
			a.style.paddingRight = "1em";
			a.style.color = self.pageColor;
			a.appendChild(document.createTextNode(pages[i]));			
			a.onmouseover = function() { this.style.textDecoration = "none"; };
			a.onmouseout = function() { this.style.textDecoration = "underline"; };
			a.onclick = function() {
				
				if (self.isMoving) return;
				self.isMoving=true;
				var units = self.startDisplayIndex - i * self.displayImages;				
				self.slide(catalog, self, units);
				self.startDisplayIndex -= units;				
				self.adjustArrowsAndPager(catalog);
				
											
			}
			$("galleryPager").appendChild(a);			
		});
		
		this.activePage = 0;
		$(this.PAGE_ID_PREFIX + this.activePage).style.color = this.pageCurrentColor;														
	},
	slide : function(catalog, obj, units) {
		var self = this;		
		var xDist = units * obj.scrollBy;						
		//check if images are of different sizes
		if (obj.scrollBy == self.PADDING) {
			xDist = 0;
			if (units > 0) {
				for (index = self.startDisplayIndex - 1; 
					index >= self.startDisplayIndex - units; index--) {					
					xDist += (eval(catalog.item[index].imgWidth) + this.PADDING);					
				}				
			} else {
				units = Math.abs(units);
				for (index = self.startDisplayIndex; 
					index < self.startDisplayIndex + units; index++) {					
					xDist -= (eval(catalog.item[index].imgWidth) + this.PADDING);
				}
			}
		}											
				
		catalog.item.each(function(item, i) {			 										
			new Effect.MoveBy($(catalog.item[i].id), 0, xDist, {
			    duration: 1,
				afterFinish: function() {  self.isMoving=false;									
				}
			});					
		});							
	},
	adjustArrowsAndPager : function(catalog) {
		if (this.startDisplayIndex == 0) {
			this.nextImage.src = this.forwardDisabledImg;
		} else if (this.startDisplayIndex >= catalog.item.length - this.displayImages) {
			this.prevImage.src = this.backDisabledImg;
		} else {
			this.nextImage.src = this.forwardImg;
			this.prevImage.src = this.backImg;
		}
		
		var quotient = this.startDisplayIndex / this.displayImages;
		var quotientFloor = Math.floor(quotient);						
		
		if (quotientFloor != this.activePage) {
			$(this.PAGE_ID_PREFIX + this.activePage).style.color = this.pageColor;
			this.activePage = quotientFloor;			
			$(this.PAGE_ID_PREFIX + this.activePage).style.color = this.pageCurrentColor;
		}
	}
}