/*
	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.slideDone = false;
		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() { this.src = self.backHoverImg;  };
		this.prevImage.onmouseout = function() { this.src = self.backImg; };	
		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() {
			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 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;											

			// a.href = catalog.item[i].href;
			// a.title = catalog.item[i].name;
			// a.className = "imageLink";
			// a.appendChild(image);
			// divBoxImage.appendChild(a);
			divBoxImage.appendChild(image);
			divBox.appendChild( divBoxImage );
			
			if (catalog.item[i].name != null) {
				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].opp != null && ( catalog.item[i].opp != "0" ) ) {
				var strOpp = "Opp. grond: " + catalog.item[i].opp + " m";
			
				var opp = document.createTextNode( strOpp );
				
				var superOpp = document.createElement("sup");
				superOpp.appendChild( document.createTextNode("2") );
				divCaption.appendChild( opp );
				divCaption.appendChild( superOpp );
				var br = document.createElement("br");
				divCaption.appendChild(br);
			}
			
			if (catalog.item[i].detail != null) {
				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 );
				
				divCaption.appendChild( price );
				var br = document.createElement("br");
				divCaption.appendChild(br);
			}
			
			if (catalog.item[i].propertyType != null) {
				var strType = "Type: " + catalog.item[i].propertyType;
				var propType = document.createTextNode( strType );

				divCaption.appendChild( propType );
			}
			*/
			divBox.appendChild(divCaption);	
			li.appendChild(divBox);		
			ul.appendChild(li);						
			
			self.adjustArrowsAndPager(catalog);
			self.slideDone = true;
		});
		
		eDivIEHack.appendChild(ul);
										
		this.prevImage.onclick = function()
		{			
			if( self.slideDone )
			{
				if( self.startDisplayIndex < catalog.item.length - self.displayImages)
				{				
					self.slide(catalog, self, -1);
					self.startDisplayIndex++;
					self.adjustArrowsAndPager(catalog);				
				}
			}					
		}
		
		this.nextImage.onclick = function()
		{			
			if( self.slideDone )
			{
				if( self.startDisplayIndex > 0 )
				{				
					self.slide(catalog, self, 1);
					self.startDisplayIndex--;				
					self.adjustArrowsAndPager(catalog);
				}
			}			
		}				
		
		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;				
				self.adjustArrowsAndPager(catalog);								
			}
			$("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)	{
		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);
				}
			}
		}											

		self.slideDone =  false;	
		var countItems = 0;
		// catalog.item.each( function( item, i )
		for( countItems = 0;countItems < catalog.item.length; countItems++ )
		{			 										
			
			// new Effect.MoveBy( $( catalog.item[i].id ), 0, xDist, {
			new Effect.MoveBy( $( catalog.item[countItems].id ), 0, xDist, {
			    duration: 1,
				afterFinish: function()
				{									
					self.slideDone = true;
				}
			});					
		}
		//);							
	},
	adjustArrowsAndPager : function(catalog) {
		
		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;
			this.prevImage.src = this.backImg;
		}
		else if (this.startDisplayIndex >= ( catalog.item.length - this.displayImages ) )
		{
			this.prevImage.src = this.backDisabledImg;
			this.nextImage.src = this.forwardImg;
		}
		else {
			this.nextImage.src = this.forwardImg;
			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 )
		{
			$(this.PAGE_ID_PREFIX + this.activePage).style.color = this.pageColor;
			$(this.PAGE_ID_PREFIX + this.activePage).style.fontWeight = "normal";
			this.activePage = quotientFloor;			
			$(this.PAGE_ID_PREFIX + this.activePage).style.fontWeight = "bold";
			$(this.PAGE_ID_PREFIX + this.activePage).style.color = this.pageCurrentColor;
		}
	}
}