// Author: Based on the excellent jQuery TOOLS plug-in (http://flowplayer.org/tools/index.html).
//			Modified by Glenn Pittman
// Last Modified: 17 Sept. 2011
// Description: jQuery script that runs a gallery functionality. Features a scrollable list of thumbnails. When a user clicks on a thumbnail,
// 		it opens the large version of that image in an area adjacent to the thumbnails. Highly customizable.


/////////////////////////////////////////////////////////
// 						function
/////////////////////////////////////////////////////////
// WHAT IT DOES: 
//		1. Sets a rollover opacity for the thumbnails.
//		2. Sets any optional settings for the jQuery TOOLS Scrollable plug-in.
//		3. Autoscrolls the thumbnail list and updates the main image to match the
//			thumbnail that is currently "selected" (at the top).
//		3. Adds a click handler for the scrollabe items (thumbnails) which loads
//			a larger version of the thumbnail.
//		4. Sets the attribute values for the links that wrap each larger image.
//
// PARAMETERS ACCEPTED: none
//
// RETURN VALUE: none

$(function() {

	$(".items img").hover(
		function () {
    		$(this).fadeTo(0, 0.65);
  		},
  		function () {
    		$(this).fadeTo(0, 1);
  		}
	);
	
	$(".scrollable").scrollable({ 
	
		vertical: true, 
		mousewheel: true, 
		circular: true,
		
		// Each time the thumbnails scroll, the current thumbnail is sent to the click handler
		// so that the main image can rotate along with the scrolling thumbnails.
		onSeek: function(event, i) {

			$(".items img").eq(i+1).click();

		}
		
	}).autoscroll(6000);
	
	$(".items img").click(function() {
		
		if ($(this).hasClass("active")) { return; }
		
		// get the values to be used for the links that wrap
		// the main image. These are passed from the thumbnails
		// that are clicked.
		var title_text = $(this).attr("title");
		var link = $(this).attr("rel");  // this is the url to which the use is sent when they click on the main image.
		var target_text = "";  // will set whether the link opens in a new window or not.
		if ( $(this).hasClass("external") ) {
			target_text = "_blank";
		} else {
			target_text = "";
		};
		
		var url = $(this).attr("src").replace("_t", "");  // determines the src path for the main image by simply removing the "_t_over" at the end of the thumbnail's hover img path.
		var alt_text = $(this).attr("alt");  // grabs the thumbnail's alt attribute to be passed to the main image's alt attribute.
		
		var wrap = $("#image_wrap");//.fadeTo("fast", 0.5);
	
		var img = new Image();
	
		img.onload = function() {
	
			// wrap.fadeTo("fast", 1);  // fades image wrapper's opacity back to 100%.
	
			// sets the main image's src path and alt attribute.
			wrap.find("img").attr({
				src: url,
				alt: alt_text,
			});
			
			// sets href, title and target attributes for the link that wraps the main image.
			wrap.find("a").attr({
				href: link, 
				title: title_text,
				target: target_text,
			});
	
		};
	
		img.src = url;  // sets the main image's src path.
	
		$(".items img").removeClass("active");
		$(this).addClass("active");
	
	}).eq(1).click();

});