/*

	WGBH interactive

	tacita_morway@wgbh.org

 */



function setClassNames(eltList, className) {

	for (var i = 0; i < eltList.length; i++) {

		eltList[i].className = className;

	}

}



function displayImage(link) {

	// a thumbnail was clicked so re-hide all captions

	var captions = $ES('li', 'image_container');

	setClassNames(captions, "");



	// extract the image number from the href passed into this function	

	var source = link.href.split('gallery_');

	var currNum = source[1].replace(/\D/g,'');

	var currId = "i_" + currNum;

	

	// find the element with an id that matches the extracted image number and un-hide it

	var selectedImage =  $(currId);

	selectedImage.className = 'show';  

	

	// set the source on the image element base on clicked thumb

	var imgId = currNum + 'img';

	$('currImg').src = 'images/gallery_' + currNum + '_lg.jpg';



	// update ticker at top of thumbail list with current image number - remove leading zeros

	$('currNum').firstChild.nodeValue = parseFloat(currNum);

	

	return false;

}





function updateGalleryContent() {



	// limit container height with javascript so if javascript is off user will still see all thumbs

	$('thumbs_container').className = 'wrapped';



	// initalize all captions as hidden except for first image

	// when a thumb is clicked: update which image is shown, unhighlight all other thumbs, and highlight current thumb

	var links = $ES('a', 'thumbs');



	for (var i = 0; i < links.length; i++) {

		links[i].onclick = function() {

			displayImage(this),

			setClassNames(links, ""),

			this.className = 'here';				

			return false;

		}

	}

}





function scrollThumbs() {

	var newScroll = new Fx.Scroll($('thumbs_container'), {

		duration: 400

	});



	var scrollDist = 0;		// will be used to track where to container for the thumbnail list is for scrolling

	var offSet = parseInt($E('ul#thumbs li').getStyle('height'));	// the distance to scroll the list for each click

	

	var counter = 5;  		// the first 5 thumbs are displayed when user first visits the page

	

	// find out how many thumbnails there are

	var numThumbs = $ES("li", "thumbs").length;



	// get the arrow elements so we can manipulate the image being shown

	var upArrow = $($('up').firstChild);

	var downArrow = $($('down').firstChild);



	$('up').addEvent('click', function(e) {



		// CASE:  user is not viewing the first five thumbs

		if (counter > 5) { 

			counter--;



			// scroll the list of thumbs down the height of one thumbnail

			scrollDist -= offSet;

			newScroll.scrollTo(0, scrollDist);



			// (re)set the default behavior for the mouse events for the down arrow			

			downArrow.src = 'images/down.gif';

			downArrow.className = 'clickable';

			downArrow.addEvent('mouseenter', function() {

				downArrow.src = 'images/down_over.gif';	

			});

			downArrow.addEvent('mouseleave', function() {

				downArrow.src = 'images/down.gif';			

			});

		} 

		

		// CASE:  the first 5 thumbs are displayed so the user can't click up anymore

		if (counter == 5) {

			upArrow.src = 'images/up_off.gif';

			upArrow.cursor = 'default';

			upArrow.className = '';

			upArrow.removeEvents();

		}



	});





	$('down').addEvent('click', function(e) {



		// CASE:  user is not viewing the last 5 thumbs

		if (counter < numThumbs) {

			counter++;



			// scroll the list of thumbs up the height of one thumbnail

			scrollDist += offSet;

			newScroll.scrollTo(0, scrollDist);



			// (re)set the default behavior for the mouse events for the up arrow			

			upArrow.src = 'images/up.gif';

			upArrow.className = 'clickable';

			upArrow.addEvent('mouseenter', function() {

				upArrow.src = 'images/up_over.gif';			

			});

			upArrow.addEvent('mouseleave', function() {

				upArrow.src = 'images/up.gif';			

			});

		} 

		

		// CASE:  the last 5 thumbs are displayed so the user can't click down anymore

		if (counter == numThumbs) {

		

			// last five thumbs are showing so we cant go any lower

			downArrow.src = 'images/down_off.gif';

			downArrow.cursor = 'default';

			downArrow.className = '';

			downArrow.removeEvents();

		}

			

	});



};





window.addEvent('domready', updateGalleryContent);

window.addEvent('domready', scrollThumbs);