/*script to process image gallery into interactive slideshow
**originallly created February 2009*/

var ImageGallery = 
{
	thumbsArray: '',		//contains all div.thumb elements
	imageCount: '',		//counts total images in slideshow
	currentImage: 0,	//keeps track of currently showing image
	moveComplete: 1,	//keeps track of when slide movement is complete

	init: function()
	{
		if ($('beforeAfterThumbs'))
		{
			ImageGallery.thumbsArray = $('beforeAfterThumbs').select('div.thumb'); //put all div.thumb elements in array
			ImageGallery.imageCount = ImageGallery.thumbsArray.length; //set object propert to track # of images
			
			ImageGallery.setFeature(0); //call method to set feature image to first thumbnail
			
			//set event listeners on each thumbnail image (div.thumb)
			for (var i = 0; i < ImageGallery.imageCount; i++)
			{
				Event.observe(ImageGallery.thumbsArray[i], 'click', ImageGallery.selectThumb.bindAsEventListener(ImageGallery.thumbsArray[i], i));
			}
			
			Event.observe($('leftArrow'), 'click', ImageGallery.scrollLeft, false); //set event listener on left scroll arrow
			Event.observe($('rightArrow'), 'click', ImageGallery.scrollRight, false); //set event listener on right scroll arrow
		}
	},
	
	selectThumb: function(e, index) //'this'=thumb div, 'e'=mouse click, 'index'=array position 
	{
		ImageGallery.setFeature(index); //update feature area
		ImageGallery.moveThumbTracker(index); //move thumbnail marker
		ImageGallery.currentImage = index;
	},
	
	scrollLeft: function(e)
	{
		if (ImageGallery.currentImage >= 1) //if not first image, go left
		{
			ImageGallery.currentImage--;
		}
		else
		{
			ImageGallery.currentImage = ImageGallery.imageCount - 1; //else go to last image
		}
		ImageGallery.setFeature(ImageGallery.currentImage);
		ImageGallery.moveThumbTracker(ImageGallery.currentImage);
		Event.stop(e);
	},
	
	scrollRight: function(e)
	{
		if (ImageGallery.currentImage <= (ImageGallery.imageCount -2)) //if not last image, go right
		{
			ImageGallery.currentImage++;
		}
		else
		{
			ImageGallery.currentImage = 0;	//go to first image
		}
		ImageGallery.setFeature(ImageGallery.currentImage);
		ImageGallery.moveThumbTracker(ImageGallery.currentImage);
		Event.stop(e);
		
	},
	
	setFeature: function(index)  //set feature area (image, caption, link) from selected thumb's attributes
	{
		var selectedThumb = ImageGallery.thumbsArray[index]; //get selected thumb
		$('browserImage').select('img')[0].setAttribute('src', selectedThumb.select('img')[0].getAttribute('title')); //set image
		$('browserText').select('span')[0].innerHTML = selectedThumb.select('div.thumbText')[0].innerHTML;	//set caption
		$('browserText').select('a')[0].setAttribute('href', selectedThumb.select('img')[0].getAttribute('alt'));  //set link
	},
	
	moveThumbTracker: function(index) //move thumbnail marker
	{
		var thumbLocation = ImageGallery.thumbsArray[index].positionedOffset(); //get location of clicked thumb
		var newTopPosition = thumbLocation[1] - 4;  //calculate new top position
		var newLeftPosition = thumbLocation[0] - 4; //calculate new left position
		new Effect.Move($('thumbTracker'), {  
			x: newLeftPosition,
			y: newTopPosition,
			mode: 'absolute'
		});
	}
};

Event.observe(window, 'load', ImageGallery.init);