/*!
##
##	swooshGallery
##	
##  Author: Liam Potter
##
##	Version:		0.9
##	Created:		27/05/09
##	Updated:		12/08/09
##
##
##	Change List:
##	0.1 - First Version (rewrite of old gallery script)
##	0.2 - Fixed pause to pause as soon as clicked
##	0.3 - Automatically insert fist large image, no need for markup
##	0.4 - Fixed auto-scroll to scroll when the last thumbnail had finished it's time
##		  Removed some useless code which put the thumbnails into groups using classes
##	0.5 - Fixed problem with finding correct offset for the hover image to appear
##	0.6 - Remembered about nth-child, got rid of now useless code
##	0.7 - a few fixes, scrolling the thumbnails now pauses
##		  Clicking a thumbnail honors the current state, if paused, it will be paused, if playing, it will play through
##	0.8 - fixed math for finding needed pages
##	0.9 - Fixed grabbing of the index of the thumbnail when clicked
##	
##	TODO:
##	Use setInterval to loop play function rather then call itself inside itself...possibly rewrite play function
##	
##	Copyright © 2009 Liam Potter
##	
##	This file is part of swooshGallery.
##
##  swooshGallery is free software: you can redistribute it and/or modify
##  it under the terms of the GNU General Public License as published by
##  the Free Software Foundation, either version 3 of the License, or
##  (at your option) any later version.
##
##  swooshGallery is distributed in the hope that it will be useful,
##  but WITHOUT ANY WARRANTY; without even the implied warranty of
##  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
##  GNU General Public License for more details.
##
##  You should have received a copy of the GNU General Public License
##  along with swooshGallery.  If not, see <http://www.gnu.org/licenses/>.
##	
*/

(function($) {

	$.fn.swoosh = function(options) {
		var defaults = {
			delay: 5000,
			autoPlay: true,
			hover: true,
			arrow: '/assets/images/swoosh/arrow.gif',
			thumbs: '/assets/images/content/thumbs/',
			thumbsHover: '/assets/images/content/thumbs/hover/',
			largeImg: '/assets/images/content/',
			noimages: false
		};
		var settings = $.extend(defaults, options);
		
		var autoPlay = settings.autoPlay;
		
		this.each(function() {
						   
			/**********************************************************
			* Setup, wrap images in container						  *
			**********************************************************/
			var thumbs = $(this).find("div.slider")		    
			var thumbCount = thumbs.children("img").size();
			var thumbWidth = thumbs.children("img").width();
			
			var sliderWidth = $(this).find("div.slider").width();
			var thumbsShown = (Math.round(sliderWidth/thumbWidth)-1);
			
			if ($.browser.msie && $.browser.version.substr(0,1)<7) {
				var containerWidth = ((thumbWidth+8) * thumbCount);	
			} else {
				var containerWidth = ((thumbWidth+6) * thumbCount);
			}
			
			var widthOfThumbs = ((thumbWidth+6) * thumbsShown)
			var pages = ((thumbWidth * thumbCount)/(thumbWidth * thumbsShown));
			var pages = Math.ceil(pages);
			
			thumbs.children("img").wrapAll('<div class="container" style="position:absolute;width:'+containerWidth+'px"></div>');
			
			var imgIndex = $(this).index(this)	
			thumbs.find("img:nth-child("+thumbsShown+"n)").next().addClass('multiple');
			
			thumbs.find("img:last").addClass("lastImage");
			
			//counter
			countIndex = 0
			$(this).find("div#count").html('<span id="updateThisCount">1</span>/'+thumbCount);
			
			var largeImage = $("div#thumbnails").find("img:first").attr("src");
			var newLargeImage = largeImage;
			var newLargeImage =  $("div#thumbnails").find("img:first").attr("rel")//newLargeImage.replace (settings.thumbs, settings.largeImg);
			var newHeight = $("div#thumbnails").find("img:first").attr("title")/2;
			var newWidth = $("div#thumbnails").find("img:first").attr("id")/2;
			if (settings.noimages == true ){
				$(this).prepend('<div id="viewport" class="noimages" ></div>');
			} else {
				$(this).prepend('<div id="viewport"><img src="'+newLargeImage+'" alt="" style="z-index:2; position:absolute;top:50%;left:50%;margin-top:-'+newHeight+'px;margin-left:-'+newWidth+'px;" /></div>');
			}
			
			
			/**********************************************************
			* play/pause & controls                                   *
			**********************************************************/
			
			
			play();
			
			
			function play(){
				if ( autoPlay == true ){
					$("div#controls a#play").addClass("active");
					thumbs.find("img").eq(countIndex).css({opacity:.5}).animate({opacity:.5},settings.delay,function(){
						$(this).animate({opacity:1},500).next().animate({opacity:.5},500, function(){
							countIndex++
							$(this).parents("div#controls").find("span#updateThisCount").html(countIndex+1);
							
							var largeImage = $(this).attr("src");
							var newLargeImage = largeImage;
							var newLargeImage = $(this).attr("rel");//newLargeImage.replace (settings.thumbs, settings.largeImg);
							var newHeight = $(this).attr("title")/2;
							//alert(newHeight);
							var newWidth = $(this).attr("id")/2;
							//alert(newWidth);
							
							$(this).parents("div#controls").prev("div#viewport")
								.append('<img src="'+newLargeImage+'" alt="" style="display:none;position:absolute;z-index:1;top:50%;left:50%;margin-top:-'+newHeight+'px;margin-left:-'+newWidth+'px;">')
								.find("img:eq(0)")
								.animate({opacity:0},500,function(){ 
									 $(this).remove()
								});
								
											
								
								
								
							$(this).parents("div#controls").prev("div#viewport")
							.children("img").css({zIndex: 2,display: 'block',opacity: 0})
							.animate({opacity:1},500);
								
							if ( $(this).hasClass("multiple") ) {	
								if ( !$(this).hasClass("lastImage") ) {
									scrollRight();
									
								} else { // incase last image falls under the multiple
									$(this).animate({opacity:.5},settings.delay).animate({opacity:1},500,function(){
										scrollStart();
										countIndex = 0;	
										scrollCount = 1;
										play();
									});
								}
							}
							if ( $(this).hasClass("lastImage") ) {
								$(this).animate({opacity:.5},settings.delay).animate({opacity:1},500,function(){
									scrollStart();
									countIndex = 0;	
									scrollCount = 1;
									play();
								});
							}
							play();
							
							
						});
						
					});
				} //if
			}//function
			
			function pause(){
				if ( autoPlay == false ){
					
						thumbs.find("img").eq(countIndex).stop();				
					
				}
			}
			
			var scrollCount = 1;
			function scrollRight() {
				if ( scrollCount < pages ) {				
					thumbs.find("div.container").animate({left:'-='+(widthOfThumbs)+'px'},800);
					scrollCount++
				}
			}
			
			function scrollLeft() {
				if ( scrollCount > 1 ) {
					thumbs.find("div.container").animate({left:'+='+(widthOfThumbs)+'px'},800);
					scrollCount--
				}
			}
			
			function scrollStart() {
				thumbs.find("div.container").animate({left:'0px'},800);
				$("div#count").html('<span id="updateThisCount">1</span>/'+thumbCount);
				scrollCount = 1
				
			}
			
			$("div#controls a").click(function(){
				return false;
			});
			
			
			$("div#controls a#pause").click(function(){
				autoPlay = false;
				pause();
				$(this).addClass("active");
				$("div#controls a#play").removeClass("active")
			});
			
			$("div#controls a#play").click(function(){
				autoPlay = true;
				play();
				$(this).addClass("active");
				$("div#controls a#pause").removeClass("active")
			});
			
			$("div#controls div#thumbnails a.left").click(function(){
				scrollLeft();
				//autoPlay = false;
				//pause();
				$("div#controls a#pause").addClass("active");
				$("div#controls a#play").removeClass("active")
			});
			$("div#controls div#thumbnails a.right").click(function(){
				scrollRight();
				//autoPlay = false;
				//pause();
				$("div#controls a#pause").addClass("active");
				$("div#controls a#play").removeClass("active")
			});
			
			/**********************************************************
			* hover thumbnail                                         *
			**********************************************************/
			if ( settings.hover == true ) {
				
				$("div#controls div#thumbnails div.slider div.container").find("img").each(function(){
					$(this).attr("id",countIndex++);
					
					$(this).hover(
								  function()
								  {
									  								  
									  var offsetSwoosh = $(this).parents("div#swoosh").offset().left;
									  var offset = (($(this).offset().left - offsetSwoosh)-47);
	
									  var hoverThumb = $(this).attr("src");
									  var newHoverThumb = hoverThumb;
									  var newHoverThumb = newHoverThumb.replace (settings.thumbs, settings.thumbsHover);
	
	
									  
									  $(this).parents("div#swoosh").append('<div class="hover" style="left:'+offset+'px"><img src="'+newHoverThumb+'" width="158" height="76" alt="" class="hoverImg"><img src="'+settings.arrow+'" class="arrow" width="29" height="15" alt="" /></div>');
								  }
								  ,
								  function()
								  {
									  $("div.hover").fadeOut(200,function(){$(this).remove();});
								  });
				});
			}
			
			/**********************************************************
			* click thumbnail                                         *
			**********************************************************/
			
			$("div#controls div#thumbnails div.slider div.container").find("img").click(function(){
					var newIndex = $(this).parents("div.container").children("img").index(this);
					var newIndex = parseFloat(newIndex);
					countIndex = newIndex

					$(this).parents("div.container").find("img").each(function(){
						$(this).stop().css({opacity:1});
					});
				
					$(this).css({opacity:.5});
			
					var largeImage = $(this).attr("src");
					var newLargeImage = largeImage;
					var newLargeImage = $(this).attr("rel")//newLargeImage.replace (settings.thumbs, settings.largeImg);
					var newHeight = $(this).attr("title")/2;
					var newWidth = $(this).attr("id")/2;
						
					$(this).parents("div#controls").prev("div#viewport").append('<img src="'+newLargeImage+'" alt="" style="display:none;position:absolute;;z-index:1;top:50%;left:50%;margin-top:-'+newHeight+'px;margin-left:-'+newWidth+'px;">')
					.find("img:eq(0)")
					.animate({opacity:0},500,function(){ 
						 $(this).remove()
					});
							
					$(this).parents("div#controls").prev("div#viewport").children("img")
					.css({zIndex: 2,display: 'block',opacity: 0}).animate({opacity:1},500);
					
					$(this).parents("div#controls").find("span#updateThisCount").html(countIndex+1);
					
					play();
				});
			countIndex = 0;
			
		});
		
		
		return this; //keep chain ability
	}//close jquery function
	
})(jQuery || _jQuery);