/* 
Image Library Carousel
	Designed to scroll thru individual images
Dependencies:
	jquery-1.3.2.min.js or newer
	imageLibraryCarousel.css
	ImageLibraryCarousel.wsp
*/ 
(function($)
{
	$.fn.imageLibraryCarousel = function()
	{
		// browser information
		var browser;
		var navUA = navigator.userAgent;		
		
		if($.browser.mozilla) { browser = "Firefox"; }
		else if($.msie) { browser = "Internet Explorer"; }
		else if($.browser.opera) { browser = "Opera"; }
		else if($.browser.safari) { browser = "Safari"; }
		else { browser = "Unknown"; }
			
	    function repeat(str,num)
	    {
        	return new Array(num + 1).join(str);
	    }
	    
	    function setImageDescription(currentIdx)
	    {
			var $currentImg = $('li.imgLibThumb').eq(currentIdx);
			var currentImgId = $currentImg.attr('id').split('-')[1];
			var divId = 'div#imgLibThumbDesc-' + currentImgId;
			$(divId).show();
	    }
	    
	    function clearImageDescription()
	    {
	    	$('div.imgLibThumbDesc').hide();
	    }
	    
	    function setImageFocus(currentIdx)
	    {
		    var $currentImg = $('li.imgLibThumb').eq(currentIdx);
			var currentId = $currentImg.attr('id').split('-')[1];
	    	var imgId = 'img#imgLibThumbImg-' + currentId;
	    	var liId = 'li#imgLibThumb-' + currentId;
	    	$(liId).addClass('liShadow');
	    	$(imgId).addClass('imgShadow');
	    }
	    
	    function clearImageFocus()
	    {
			$('li.imgLibThumb').removeClass('liShadow');
			$('li.imgLibThumb img').removeClass('imgShadow');
	    }
	   
		return this.each(function()
		{
			$('div.imgLibThumbDesc').hide();
			var $wrapperDiv = $('div.imgLibWrapper',this).css('overflow','hidden');
			var	$thumbsUL = $('ul.imgLibThumbs');
			var	$items = $('li.imgLibThumb');
			var $desc = $('li.imgLibThumbDesc');
			var	$single = $items.filter('li:first');
			var	singleWidth = $single.outerWidth();
			// note: visibleImgCount doesn't include padding or border
			// current set to display only 3 images
			var	visibleImgCount = Math.ceil($wrapperDiv.innerWidth() / singleWidth); 
			var	currentPage = 1;
			var	pageCount = Math.ceil($items.length / visibleImgCount);
			var focusIdx = 1; // 0 index is the 1st li empty place holder

			//console.log('currentIdx=',currentIdx);
			//console.log('wrapper.innerWidth=',$wrapperDiv.innerWidth());
			//console.log('singleWidth=',singleWidth);
			//console.log('visibleImgCount=',visibleImgCount);
			//console.log('currentPage=',currentPage);
			//console.log('pageCount=',pageCount);
			//console.log('items.length=',$items.length);
			//console.log('$items.length % visibleImgCount=',$items.length % visibleImgCount);
			
			// pad beginning with empty item so first image has focus
			//$thumbsUL.prepend('<li class="imgLibThumb empty" />');
			$items = $('li.imgLibThumb');
			$thumbsUL.append('<li class="imgLibThumb empty" />');
			$items = $('li.imgLibThumb');
			if($items.length > 1) {
    			setImageDescription(focusIdx); // set for first image on page load
    			setImageFocus(focusIdx); // set for first image on page load
    			$wrapperDiv.filter(':not(:animated)').animate({ scrollLeft : '+=' + 0 },250);
    			// add the navigation buttons
    			$wrapperDiv.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');			
    			//$('a.back').hide();
    			if ($items.length < 4) { $('a.forward').hide(); }
    			// paging function
    			function gotoPage(page)
    			{
    				clearImageFocus();
    				clearImageDescription();
    				var dir = page < currentPage ? -1 : 1;
    				var	n = Math.abs(currentPage - page);
    				var	left = singleWidth * dir * n;
    				focusIdx += dir;
    				
    				setImageDescription(focusIdx);
    				setImageFocus(focusIdx);
    
                    //console.log('gotoPage-currentIdx=',currentIdx);
    				//console.log('gotoPage-dir=',dir);
    				//console.log('gotoPage-n=',n);
    				//console.log('gotoPage-left=',left);
    				//console.log('gotoPage-currentIdx=',currentIdx);
    				
    				if (focusIdx < $items.length - 2) { $('a.forward').show(); }
    				else { $('a.forward').hide(); }
    				
    				if(focusIdx > 1) { $('a.back').show(); }
    				else { $('a.back').hide(); }
    
    				$wrapperDiv.filter(':not(:animated)').animate({ scrollLeft : '+=' + left },250);
    				return false;
    			}
    			// bind to the forward and back buttons
    			$('a.back',this).click(function()
    			{
    				return gotoPage(currentPage - 1);                
    			});
    
    			$('a.forward',this).click(function()
    			{
    				return gotoPage(currentPage + 1);
    			});
    			// create a public interface to move to a specific page
    			$(this).bind('goto',function(event,page)
    			{
    				gotoPage(page);
    			});
    			
    			$('li.imgLibThumb').hover(
    			function()
    			{
    				clearImageFocus();
    				clearImageDescription();
    				var currentIdx = $('li.imgLibThumb').index(this);				
    				setImageDescription(currentIdx);
    				setImageFocus(currentIdx);
    			},
    			function()
    			{
    				clearImageFocus();
    				clearImageDescription();
    				setImageDescription(focusIdx);
    				setImageFocus(focusIdx);
    			});
			}
		});
		
	};	
	
})(jQuery);