jQuery(function($) {
	var $my = $my || {};
	
	if($('#slideshow').length > 0) {

		$my.slideshow = $('#slideshow');
		$my.slideshowLength = $my.slideshow.find('.scrollable .items a').length;
		$my.slideshowViewport = 7; // hardcoded
		$my.slideshowLarge = $my.slideshow.find('.large');
		$my.slideshowCaption = $my.slideshow.find('.caption');
		$my.slideshowWidth = $my.slideshow.width();
		$my.scrollablePrev = $my.slideshow.find('.slideshow .prev');
		$my.scrollableNext = $my.slideshow.find('.slideshow .next');
		$my.slideshowLoading = false;
		
		$my.slideshow.find(".scrollable").scrollable({
			next : '.doesnotexist',
			prev : '.doesnotextist'
		});
		
		// grab instance of API
		$my.slideshowApi = $my.slideshow.find(".scrollable").data('scrollable');

		$my.scrollableNext.bind('click', function(e) {
			$my.slideshowApi.next();
			
			$my.slideshow.find('.items a.active').next().click();
		});

		$my.scrollablePrev.bind('click', function(e) {
			$my.slideshowApi.prev();
			
			$my.slideshow.find('.items a.active').prev().click();
		});
		
		// pass large image clicks on to the next button
		$my.slideshowLarge.bind('click', function(e) {
			$my.scrollableNext.click();
		});

		$my.slideshow.find(".items a").click(function(e) {
			
				e.preventDefault();
				
				var $ITEM = $(this);
				
				// disable prev?
				if($ITEM.prev().length > 0) {
					$my.scrollablePrev.removeClass('disabled');
				} else {
					$my.scrollablePrev.addClass('disabled');
				}
				
				// disable next?
				if($ITEM.next().length > 0) {
					$my.scrollableNext.removeClass('disabled');
				} else {
					$my.scrollableNext.addClass('disabled');
				}
				
				// see if same thumb is being clicked
				if ($ITEM.hasClass("active")) { return; }

				// see if we're still waiting for another image to load			
				if($my.slideshowLoading !== false) { return; }
				
				// set flag that we are working
				$my.slideshowLoading = true;
				
				// hide large next/prev
				$my.slideshowLarge.find('.browse').css({
					'opacity' : '0.0'
				});
				
				var previousImg = $my.slideshowLarge.find('img');
				
				previousImg.animate({'opacity' : '0.0'}, 300);
			
				// the large image from www.flickr.com
				var img = new Image();
				$(img)
					.attr('src', $ITEM.attr('href'))
					.one('load', function() {
						$my.slideshowCaption.html($ITEM.find('.detail').clone());

						/* ******** START OPTION 1: resize ******** */
/*
						var orientation = (img.width > img.height) ? 'landscape' : (img.height > img.width) ? 'portrait' : 'square'
							ratio = ($my.slideshowWidth / img.width),
							imgWidth = $my.slideshowWidth,
							imgHeight = ratio * img.height;
						/* ******** END OPTION 1: resize ******** */


						/* ******** START OPTION 2: fix to square ******** */
						var orientation = (img.width > img.height) ? 'landscape' : (img.height > img.width) ? 'portrait' : 'square'
							ratio = (orientation === 'landscape') ? $my.slideshowWidth / img.width : $my.slideshowWidth / img.height;
							
						switch(orientation) {
							case 'landscape' :
								var imgWidth = $my.slideshowWidth,
									imgHeight = ratio * img.height;
							break;
							
							case 'portrait' :
								var imgHeight = $my.slideshowWidth,
									imgWidth = ratio * img.width;
							break;
							
							case 'square' :
							default :
								var imgHeight = ratio * img.height,
									imgWidth = imgHeight;
							break;
						}
						/* ******** END OPTION 2: fix to square ******** */

						$(img)
							.width(imgWidth + 'px')
							.height(imgHeight + 'px')
							.css('opacity', '0.0')
							.addClass(orientation);

						$my.slideshowLarge.animate({
							'height' : imgHeight,
							'width' : imgWidth
							}, 300
						);
						$(img)
							.appendTo($my.slideshowLarge)
							.animate({'opacity' : '1.0'}, 300, function() {

								// show large next/prev
								$my.slideshowLarge.find('.browse').animate({
									'opacity' : '1.0'
								}, 300);
		
							});

						previousImg.remove();

						// unset our loading flag
						$my.slideshowLoading = false;

					})
					.each(function() {
						if(this.complete || ($.browser.msie && parseInt($.browser.version, 10) === 6)) {
							$(this).trigger('load');
						}
					});
			
				// activate item
				$(".items a").removeClass("active");
				$(this).addClass("active");
				
				
			// when page loads simulate a "click" on the first image
			}).filter(":first").click();
		
		$my.slideshowApi
			// do not scroll IFF total length minus current index is larger than viewport
			.onBeforeSeek(function(e, a) {
				
				// if we are going forward
				if(a > $my.slideshowApi.getIndex()) {
					return ($my.slideshowLength - $my.slideshowApi.getIndex() > $my.slideshowViewport) ? true : false;
				} else {
					return true;
				}
				
/*
			})
			// turn on/off arrows
			.onSeek(function(e) {
			
				// prev
				if($my.slideshowApi.getIndex() > 0) {
					$my.scrollablePrev.removeClass('disabled');
				} else {
					$my.scrollablePrev.addClass('disabled');
				}

				// next
				if($my.slideshowLength - $my.slideshowApi.getIndex() > $my.slideshowViewport) {
					$my.scrollableNext.removeClass('disabled');
				} else {
					$my.scrollableNext.addClass('disabled');
				}
*/

			});
		
/*
		// on first startup, we need to disable if necessary to disable next immediately
		if($my.slideshowLength - $my.slideshowApi.getIndex() > $my.slideshowViewport) {
			$my.scrollableNext.removeClass('disabled');
		} else {
			$my.scrollableNext.addClass('disabled');
		}
*/

		// on first startup, we need to disable prev immediately
		$my.scrollablePrev.addClass('disabled');

	}

});