function contentSlidesInit()
{
	$$('div.contentSlides').each(function(contentSlides)
	{
		// let's make sure we're going to be navigating these contentSlides
		slidesNav = contentSlides.select('p.navDirection')[0];
		if(slidesNav)
		{
			inactiveClassName = "inactive";
			
			// save the unordered list
			slidesContainer = contentSlides.select('div.slides ul')[0];

			if(slidesContainer.select('li').size() > 0)
			{
				sampleSlide = slidesContainer.select('li')[0];
				slideWidth = sampleSlide.getWidth();
				slideHeight = slidesContainer.select('li')[0].getHeight()
				slideMarginRight = sampleSlide.getStyle('marginRight').replace('px', '') * 1
				
				// let's make sure these values are not zero. If they are, this will scroll infinitly.
				if(slidesContainer.getHeight() && slideHeight)
				{
					slidesContainer.rows = Math.floor(slidesContainer.getHeight() / slideHeight);
				}
				else
				{
					slidesContainer.rows = 1;
				}
				
				slidesContainer.cols = Math.ceil(slidesContainer.select('li').size() / slidesContainer.rows);
				slidesContainer.totalWidth = slidesContainer.cols * (slideWidth + slideMarginRight);
				slidesContainer.incrementDistance = contentSlides.getWidth() + slideMarginRight;
				
				// the increment will be different if any of the images are only partially showing
				if(((contentSlides.getWidth() + slideMarginRight) % (slideWidth + slideMarginRight)) != 0)
				{
					slidesContainer.incrementDistance = slidesContainer.incrementDistance - (contentSlides.getWidth() + slideMarginRight) % (slideWidth + slideMarginRight);
				}
			}
			
			if(slidesNav.select('strong.previous a').size() > 0)
			{
				btnPrevious = slidesNav.select('strong.previous a')[0];
				btnPrevious.slidesNav = slidesNav;
				btnPrevious.slidesContainer = slidesContainer;
				
				Event.observe(btnPrevious, 'click', function()
				{
					currXpos = (this.slidesContainer.getStyle('marginLeft').replace('px', '') * 1);
					NextMarginLeft = currXpos + this.slidesContainer.incrementDistance;
					
					if(NextMarginLeft <= 0)
					{
						this.slidesContainer.setStyle(
						{
							marginLeft: NextMarginLeft + "px"
						});
					}
					
					if(currXpos + this.slidesContainer.incrementDistance >= 0 && !this.slidesNav.select('strong.previous')[0].hasClassName(inactiveClassName))
					{
						this.slidesNav.select('strong.previous')[0].addClassName(inactiveClassName);
					}
					
					if((currXpos + this.slidesContainer.incrementDistance <= this.slidesContainer.totalWidth) && this.slidesNav.select('strong.next')[0].hasClassName(inactiveClassName))
					{
						this.slidesNav.select('strong.next')[0].removeClassName(inactiveClassName);
					}
				});
			}
			
			if(slidesNav.select('strong.next a').size() > 0)
			{
				btnNext = slidesNav.select('strong.next a')[0];
				btnNext.slidesNav = slidesNav;
				btnNext.slidesContainer = slidesContainer;
				
				Event.observe(btnNext, 'click', function()
				{
					currXpos = (this.slidesContainer.getStyle('marginLeft').replace('px', '') * 1);
					approachingMarginLeft = currXpos - this.slidesContainer.incrementDistance;
					
					if(approachingMarginLeft * -1 < this.slidesContainer.totalWidth)
					{
						this.slidesContainer.setStyle(
						{
							marginLeft: approachingMarginLeft + "px"
						});
					}
					
					if((currXpos - this.slidesContainer.incrementDistance) * -1 >= (this.slidesContainer.totalWidth - this.slidesContainer.incrementDistance) && !this.slidesNav.select('strong.next')[0].hasClassName(inactiveClassName))
					{
						this.slidesNav.select('strong.next')[0].addClassName(inactiveClassName);
					}

					if((currXpos - this.slidesContainer.incrementDistance < 0) && this.slidesNav.select('strong.previous')[0].hasClassName(inactiveClassName))
					{
						this.slidesNav.select('strong.previous')[0].removeClassName(inactiveClassName);
					}
				});

			}
		}
	});
}

Event.observe(window, 'load', function() { contentSlidesInit(); });