/*
 * 	Thumb Viewer - jQuery plugin
 *	Author: Don Vaughn
 *
 *	Copyright (c) 2011 Don Vaughn
 *	Dual licensed under the MIT (MIT-LICENSE.txt)
 *	and GPL (GPL-LICENSE.txt) licenses.
 *
 *	Built for jQuery library
 *	http://jquery.com
 *
 */

(function($) {
	$.fn.thumbViewer = function(opts){
		// default configuration properties
		var defaults = {			
			autoAnimate:			true,
			mouseOverControl:		true,
			reverseAnimation:		true,
			speedImage: 			400,
			speedThumb: 			400,
			speedAutoAnimate: 		2000,
			speedRestartAnimation:	1000,
			startThumb:				0,
			thumbClass:				"thumb-wrapper",
			thumbTransitionIn: 		"floatUp"
		}; 
		
		var opts = $.extend(defaults, opts);
		
		//this = a list of thumb containers
		this.each(function(i) { 
			var	thumbs = $("." + opts.thumbClass, $(this)),
				curThumbIndex = opts.startThumb,
				autoAnimateId,
				autoAnimationRestartId; 
				
			
			function transitionThumbIn(thumb, speed) {
				var speed = (typeof speed=="undefined") ? opts.speedThumb : speed;
				
				thumb.data("transitioned", true)
				
				if(typeof opts.thumbTransitionIn=="function") {
					return opts.thumbTransitionIn(thumb, speed);
					
				} else {
					switch(opts.thumbTransitionIn) {
						case "floatUp": return function() {
												$(thumb).animate({top:"-=2em"}, speed);
											}();
					}
				}
			}
			
			function transitionThumbOut(thumb, speed) {
				var speed = (typeof speed=="undefined") ? opts.speedThumb : speed,
					transition = opts.thumbTransitionOut || opts.thumbTransitionIn;
					
				thumb.data("transitioned", false);
				
				thumb.clearQueue();
				if(typeof transition=="function") {
					return transition(thumb, speed);
					
				} else {
					switch(transition) {
						case "floatUp": return function() {
												$(thumb).animate({top:"+=2em"}, speed);
											}();
					}
				}
			}
				
			function startAnimation() {
				if(!autoAnimateId)
					autoAnimateId = setInterval(function(){ cycleThumb(getNextThumb()) }, opts.speedAutoAnimate)
			}
				
			function restartAnimation() {
				autoAnimationRestartId = setTimeout(function() {
					cycleThumb(getNextThumb());
					autoAnimateId = setInterval(function(){ cycleThumb(getNextThumb()) }, opts.speedAutoAnimate);
				}, opts.speedRestartAnimation);
			}
				
			function stopAnimation() { 
				if(autoAnimationRestartId) {
					clearTimeout(autoAnimationRestartId);
					autoAnimationRestartId = null;
				}
				if(autoAnimateId) {
					clearInterval(autoAnimateId);
					autoAnimateId = null;
				}
			}
				
			function getNextThumb() {
				if(opts.reverseAnimation) {
					return (curThumbIndex==0) ? thumbs.length-1 : curThumbIndex - 1;
					
				} else {
					return (curThumbIndex==thumbs.length-1) ? 0 : curThumbIndex + 1;
				}
			}
				
			function cycleThumb(newThumbIndex, fade, init) {
				var fade = (typeof fade=="undefined") ? true : fade,
					curThumb = $(thumbs.get(curThumbIndex)),
					curImg = $("#" + curThumb.attr("data-img")),
					newThumb = $(thumbs.get(newThumbIndex)),
					newImg = $("#" + newThumb.attr("data-img")),
					transitionSpeed = (init) ? 1 : opts.speedThumb;
				
				if(newThumb.find(".thumb").queue("fx").length)
					return;
					
				//if initializing or showing a different images than the current one
				if(init || curThumbIndex!=newThumbIndex) {
					newImg.css("opacity", 1).hide();
					newImg.parent().append(newImg.remove());
					
					if(fade) {
						newImg.fadeIn(opts.speedImage);
						
					} else {
						newImg.show();
					}
					
					if(curThumb.data("transitioned")) {
						transitionThumbOut(curThumb);
					}
					transitionThumbIn(newThumb, transitionSpeed);
					
					curThumbIndex = newThumbIndex;
					
				} else if(!curThumb.data("transitioned")) {
					transitionThumbIn(curThumb);
				}
			}
			
			//init each thumb in the container
			thumbs.each(function(i) {
				var thumb = $(this),
					imgId = $(this).attr("data-img");
					
				thumb.data("transitioned", false);
				thumb.data("mouseover", false);
				
				//if mouseOverControl is allowed, stop autoAnimate and show this thumb on mouseover 
				if(opts.mouseOverControl) {
					thumb.mouseenter(function() { 
						thumb.data("mouseover", true);
						if(opts.autoAnimate) {
							stopAnimation();
						}
						cycleThumb(i);
					});
					
					//transition animation out when users moves mouse away from thumb
					thumb.mouseleave(function() {
						thumb.data("mouseover", false);
						transitionThumbOut(thumb);
					});
				}
			});
			
			//if both auto animate and restart animate is set, then restart animation when mouse leaves the thumbs wrapper
			if(opts.autoAnimate && opts.speedRestartAnimation>=0) {
				$(this).mouseleave(restartAnimation);
			}
			
			//show the first thumb
			cycleThumb(curThumbIndex, false, true);
				
			//start animation if necessary
			if(opts.autoAnimate) {
				startAnimation();
				$(window).focus(startAnimation);
				$(window).blur(stopAnimation);
			}
		});
	};
})(jQuery);

$(function(){
	$(".thumbs").children().each(function(i, thumbWrapper) {
		var 
			thumb = $(".thumb", thumbWrapper),
			frame = $(".frame", thumbWrapper),
			shadow =  $(".shadow", thumbWrapper);
			slideDist = 30,
			thumbStart = thumb.css("top"),
			frameStart = frame.css("top"),
			shadowStart = shadow.css("top");
		
		thumb.data("topOut", thumbStart).data("topIn", (parseFloat(thumbStart, 10)-slideDist) + "px");
		frame.data("topOut", frameStart).data("topIn", (parseFloat(frameStart, 10)-slideDist) + "px");
		shadow.data("topOut", shadowStart).data("topIn", (parseFloat(shadowStart, 10)-slideDist/4) + "px");
	});
	
	$(".thumbs").thumbViewer({
		topIsFirst: false,
		reverseAuto: true,
		thumbTransitionIn: function(thumbWrapper, speed) {
			var thumb = $(".thumb", thumbWrapper),
				frame = $(".frame", thumbWrapper),
				shadow =  $(".shadow", thumbWrapper);
			
			//thumb.animate({top: thumb.data("topIn")}, speed);
			//frame.animate({top: frame.data("topIn")}, speed);
			//shadow.animate({top: shadow.data("topIn"), opacity:".25"}, speed);
		},
		thumbTransitionOut: function(thumbWrapper, speed) {
			var thumb = $(".thumb", thumbWrapper),
				frame = $(".frame", thumbWrapper),
				shadow =  $(".shadow", thumbWrapper);
				
			//thumb.animate({top: thumb.data("topOut")}, speed);
			//frame.animate({top: frame.data("topOut")}, speed);
				//shadow.animate({top: shadow.data("topOut"), opacity:"1"}, speed);
		}
	});
});