/*
	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(categoryObj, boxWidth, scrollPixels, displayImages, backImg, backHoverImg, backDisabledImg,
	forwardImg, forwardHoverImg, forwardDisabledImg, pageColor, pageCurrentColor, imageClickEvt, 
	imageMouseOverEvt, imageMouseOutEvt, nameClickEvt, nameMouseOverEvt, nameMouseOutEvt) {
		var self = this;
		this.category = categoryObj;
		this.slideDone = false;
		this.autoSlidePaused = false;
		this.totalFrames = 0;
		this.framesPerUnit = 0;
		this.numTotalItems = categoryObj.item.length;
		this.slidePositionsRequested = 0;
		this.autoSlideRunning = false;
		this.autoSlideDirection = -1;
		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 eDivLeft = $("galleryScrollPrevious");
		this.prevImage = document.createElement("img");
		this.prevImage.src = this.backImg;
		this.prevImage.style.border = "none";
		this.prevImage.onmouseover = function()
		{
		 	self.adjustArrowsAndPager( self.category, true, false );
		};
		this.prevImage.onmouseout = function()
		{
			self.adjustArrowsAndPager( self.category, false, false );
		};	
		var a = document.createElement("a");	
		a.style.cursor = "pointer";		
		a.appendChild(this.prevImage);
		eDivLeft.appendChild(a);		
						
		// var eDivRight = $("galleryScrollNext");
		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() {
			self.adjustArrowsAndPager( self.category, false, true ); 
		};
		
		this.nextImage.onmouseout = function() { 
			self.adjustArrowsAndPager( self.category, false, false ); 
		};		
		a.style.cursor = "pointer";		
		a.appendChild(this.nextImage);
		eDivRight.appendChild(a);
		
		$("galleryOuterBox").style.width = boxWidth + "px";
		this.render( this.category );
	},
	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 divBox = document.createElement("div");		
			divBox.className = "gsPropertyListBox";
			
			var divBoxImage = document.createElement("div");		
			divBoxImage.className = "gsPropertyListBoxImage";
			
			
			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;
			
			if( catalog.item[i].backImg.length )
			{
				image.style.backgroundImage = "url('" + catalog.item[i].backImg + "')";
				image.style.backgroundRepeat = "no-repeat";
			}
			
			image.className = "imageLink";											
			image.alt = catalog.item[i].imgTitle;					
			image.title = catalog.item[i].imgTitle;
			// image.onmouseover = self.imageMouseOverEvt;		
			image.onmouseover = function()
			{
				if( self.autoSlideRunning )
					self.autoSlidePaused = true;		
			};				
			image.onmouseout = function()
			{
				if( self.autoSlideRunning )
				{
					// resume slide
					// if( self.autoSlidePaused == true )
					if( 0 )
					{
						self.autoSlidePaused = false;
						self.slide( catalog, self, self.autoSlideDirection * ( catalog.item.length - self.startDisplayIndex - self.displayImages ), 5, true );
					}
				}
			};				

			a.href = catalog.item[i].href;
			a.title = catalog.item[i].name;
			a.className = "imageLink";
			a.appendChild(image);
			divBoxImage.appendChild(a);
			divBox.appendChild( divBoxImage );
			
			if( catalog.item[i].name.length )
			{
				var divCaption = document.createElement("div");
				divCaption.className = "gsPropertyListBoxInfo";
				divCaption.align = "left";
				
				var aCaption = document.createElement("a");
				aCaption.appendChild(document.createTextNode(catalog.item[i].name));
				aCaption.href = catalog.item[i].href;
				aCaption.style.fontWeight = "bold";

				divCaption.appendChild(aCaption);
				divBox.appendChild(divCaption);
				var br = document.createElement("br");
				divCaption.appendChild(br);
			}
			
			if( catalog.item[i].detail.length )
			{
				var strPrice = "Prijs: ";
				if( catalog.item[i].detail.indexOf( "Op aanvraag" ) >= 0  )
				{	
					strPrice += " " + catalog.item[i].detail;
				}
				else
					strPrice += String.fromCharCode(8364) + " " + catalog.item[i].detail;
				var price = document.createTextNode( strPrice );
				
				divBox.appendChild(divCaption);	
			}
			li.appendChild(divBox);		
			ul.appendChild(li);						
			
			// self.adjustArrowsAndPager(catalog,false,false);
		});
		
		eDivIEHack.appendChild(ul);
		
		this.prevImage.onclick = function()
		{			
			if( self.autoSlideRunning == false )
			{
				if( self.startDisplayIndex < ( catalog.item.length - self.displayImages + 1 ) )
				{				
					self.slide(catalog, self, -1, 2, false );
					self.startDisplayIndex++;
				}
			}					
		}
		
		this.nextImage.onclick = function()
		{			
			if( self.autoSlideRunning == false )
			{
				if( self.startDisplayIndex > 0 )
				{				
					self.slide(catalog, self, 1, 2, false );
					self.startDisplayIndex--;				
				}
			}			
		}				
		
		Element.removeAllChildren("galleryPager");
		$("galleryPager").appendChild(document.createTextNode("\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() {
				var units = self.startDisplayIndex - i * self.displayImages;				
				self.slide(catalog, self, units);
				self.startDisplayIndex -= units;				
			}
			$("galleryPager").appendChild(a);			
		});
		
		this.activePage = 0;
		// $(this.PAGE_ID_PREFIX + this.activePage).style.color = this.pageCurrentColor;														
		$(this.PAGE_ID_PREFIX + this.activePage).style.fontWeight = "bold";
	},
	slide : function( catalog, obj, units, selectedDuration, doAutoSlide )	{
		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);
				}
			}
		}											

		var slideDuration = Math.abs( units ) * selectedDuration;
		var framespersecond = 20;
		
		self.slideDone = false;
		self.slidePositionsRequested = units;
		self.totalFrames = slideDuration * framespersecond;
		self.framesPerUnit = self.totalFrames/Math.abs( units );
		
		if( doAutoSlide )
		{
			self.autoSlideRunning = true;
		}
		else
		{
			self.autoSlideRunning = false;
		}
		var countItems = 0;

		self.adjustArrowsAndPager(catalog, false, false);
		
				new Effect.MoveBy( $("galleryInnerBox"), 0, xDist, {
				    duration: slideDuration,
				    fps: framespersecond,
					afterFinish: function()
					{									
						if( self.autoSlideRunning )
						{
							self.slideDone = true;
							if( self.slideDone )
							{
								// all done
								self.startDisplayIndex = self.startDisplayIndex + -1*(self.slidePositionsRequested);
								
								// reset autoslide settings
								self.autoSlideRunning = false;
								self.autoSlideDirection = -1*self.autoSlideDirection;
								
								// restart reverse
								self.startAutoSlide( self.category );
							}
						}
						self.adjustArrowsAndPager(catalog, false, false);
						
					},
					afterUpdate: function( effect )
					{									
						//if( !(effect.currentFrame%self.framesPerUnit) )
						{
							if( self.autoSlidePaused && ( 1 ) )
							{
								if( self.autoSlideRunning )
								{
									var theCurrentFrame = effect.currentFrame;
									
									self.slideDone = true;
									if( self.slideDone )
									{
										var stepsDone = Math.abs( Math.round ( ( theCurrentFrame/self.framesPerUnit ) ) );
										self.startDisplayIndex = self.startDisplayIndex + (-1*self.autoSlideDirection)*stepsDone;
										
										if( theCurrentFrame == self.totalFrames )
										{
											
											// reset autoslide settings
											self.autoSlideRunning = false;
											self.autoSlideDirection = -1*self.autoSlideDirection;
											
											/*
											// restart reverse
											self.startAutoSlide( self.category );
											*/
										}
										else
										{
											self.autoSlideRunning = false;
										}
										self.adjustArrowsAndPager(catalog, false, false);
										effect.cancel();
									}
								}
							}
						}
					}
				});
	},
	startAutoSlide : function( catalog )
	{
		var self = this;	
		if( self.autoSlideRunning == false )
		{
			self.autoSlidePaused = false;
			self.autoSlideRunning = true;
			self.slide( catalog, self, self.autoSlideDirection * ( catalog.item.length - self.displayImages ), 5, true );
		}
	},
	
	adjustArrowsAndPager : function( catalog, hoverPrev, hoverNext )
	{
		var self = this;
		if( self.autoSlideRunning )
		{
			this.prevImage.src = this.backDisabledImg;
			this.nextImage.src = this.forwardDisabledImg;
		}
		else
		{
			if( catalog.item.length <= this.displayImages )
			{
				this.prevImage.src = this.backDisabledImg;
				this.nextImage.src = this.forwardDisabledImg;
			}
			else if (this.startDisplayIndex == 0)
			{
				this.nextImage.src = this.forwardDisabledImg;
				
				if( hoverPrev )
					this.prevImage.src = this.backHoverImg;
				else
					this.prevImage.src = this.backImg;
			}
			else if (this.startDisplayIndex >= ( catalog.item.length - this.displayImages + 1 ) )
			{
				this.prevImage.src = this.backDisabledImg;
				
				if( hoverNext )
					this.nextImage.src = this.forwardHoverImg;
				else
					this.nextImage.src = this.forwardImg;
			}
			else
			{
				if( hoverNext )
					this.nextImage.src = this.forwardHoverImg;
				else
					this.nextImage.src = this.forwardImg;
				
				if( hoverPrev )
					this.prevImage.src = this.backHoverImg;
				else
					this.prevImage.src = this.backImg;
			}
		}
		
		var quotient = this.startDisplayIndex / this.displayImages;
		var quotientFloor = Math.floor(quotient);						
		
		
		// last item is in range!
		if( ( this.startDisplayIndex + this.displayImages ) >= catalog.item.length )
		{
			// force pager to last page
			var newQuotient = quotient + 0.99;
			quotientFloor = Math.floor( newQuotient );
		}

		if( quotientFloor != this.activePage )
		{
			var activePagePrefixObj = $(this.PAGE_ID_PREFIX + this.activePage);
			if( activePagePrefixObj )
			{
				activePagePrefixObj.style.color = this.pageColor;
				activePagePrefixObj.style.fontWeight = "normal";
				this.activePage = quotientFloor;			
				activePagePrefixObj.style.fontWeight = "bold";
				activePagePrefixObj.style.color = this.pageCurrentColor;
			}
		}
	}
}

Element.Ex = {
  removeAllChildren: function(element) {
    while ($(element).firstChild)
		$(element).removeChild($(element).firstChild);
  }
}

Object.extend(Element, Element.Ex);