/*
Dependencies:

scripts
	/Style Library/imageLibrary.css
	/Style Library/scripts/imageLibrarySearchDetail.js
	/Style Library/scripts/imageLibrarySearchResult.js

layout
	/_catalogs/masterpage/ASSH_content_members_1column.aspx
		<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
	        <link rel='stylesheet' type='text/css' href='/Style%20Library/imageLibrary.css' />
	        <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.min.js'></script>
	  	    <script type='text/javascript' src='/Style%20Library/scripts/imageLibrarySearchResult.js'></script>
	        <script type='text/javascript' src='/Style%20Library/scripts/imageLibrarySearchDetail.js'></script>
	        <script type='text/javascript'>$(document).ready( function() { $('div.imgLibSearchResult').imageLibrarySearchResult(); } );</script>
		</asp:Content>
		
webparts
	ASSHImageUpload.webpart
	ASSHImageSearch.webpart

*/

(function($)
{
	$.fn.imageLibrarySearchDetail = function(divDetailDesc)
	{
		// 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 setImageFocus(currentIdx)
	    {
		    var $currentImg = $('li.imgLibDetailThumb').eq(currentIdx);
			var currentId = $currentImg.attr('id').split('-')[1];
	    	var imgId = 'img#imgLibDetailThumbImg-' + currentId;
	    	var liId = 'li#imgLibDetailThumb-' + currentId;
	    	$(liId).addClass('liShadow');
	    	$(imgId).addClass('imgShadow');
	    }
	    
	    function clearImageFocus()
	    {
			$('li.imgLibDetailThumb').removeClass('liShadow');
			$('li.imgLibDetailThumb img').removeClass('imgShadow');
	    }
	   
		return this.each(function()
		{
			$('div#imgLibDetailDesc').html(divDetailDesc);
			var $wrapperDiv = $('div.imgLibDetailWrapper').css('overflow','hidden');
			
			var thumbStartShowIndex = 0;			
			$items = $('li.imgLibDetailThumb');

			$wrapperDiv.filter(':not(:animated)').animate({ scrollLeft : '+=' + 0 },250);			
			
			$('div.forward-detail').text("");
			$('div.back-detail').text("");
			$('div.back-detail').css("background-position","0px -88px");
			
			// show forward arrow?			
			if ($items.length < 7) { 
				$('div.forward-detail').css("background-position","-20px -88px");
			}
			else {
				$('div.forward-detail').css("background-position","-20px 2px");								
			}
			
			// paging function
			function gotoPage()
			{
			
				var thumbVisibleCount = 7;
				var thumbStopShowIndex = thumbStartShowIndex + thumbVisibleCount - 1;
				var thumbImageCount = $items.length;

				// dont go out of range
				if(thumbStartShowIndex <= 0) {
					// roll back the indexes
					thumbStartShowIndex= 0;
					thumbStopShowIndex = thumbStartShowIndex + thumbVisibleCount - 1;
					$('div.back-detail').css("background-position","0px -90px");
				}
				else {
					$('div.back-detail').css("background-position","0px 2px");
				}
				
				if(thumbStopShowIndex >= thumbImageCount -1) {				
					$('div.forward-detail').css("background-position","-20px -90px");
				}
				else {
					$('div.forward-detail').css("background-position","-20px 2px");
				}

				if(thumbStopShowIndex >= thumbImageCount ) {
					// roll back indexes					
					thumbStartShowIndex = thumbStopShowIndex - thumbVisibleCount ;
					thumbStopShowIndex = thumbImageCount ;					
				}

				$(".imgLibDetailThumb").each(function(index) {
					// move the images
					if(index < thumbStartShowIndex || index > thumbStopShowIndex) {
						$(this).hide(300);
					}
					else {
						$(this).show(300);
					}    															
				});											    			
													
				//console.log("thumbStartShowIndex ="+thumbStartShowIndex +", thumbStopShowIndex="+thumbStopShowIndex+", thumbImageCount ="+thumbImageCount );

/*
				if (stopShowIndex < imageCount-1 &&
					currentImage >= 1) { 										
    				$(".imgLibDetailThumb").each(function(index) {
    					// move the images
    					if(index < startShowIndex+1 || index > stopShowIndex+1) {
    						$(this).hide(300);
    					}
    					else {
    						$(this).show(300);
    					}    															
    				});											
				}									
				
				// show forward arrow?
				if (stopShowIndex >= imageCount-2) { 
					$('div.forward-detail').css("background-position","-20px -90px");
					focusIdx--;					
					currentImage--;
				}
				else {
					$('div.forward-detail').css("background-position","-20px 2px");
									
				}
								
				// show backward arrow?								
				if(currentImage <= 1) { 
					$('div.back-detail').css("background-position","0px -90px");
					focusIdx++;
					currentImage++;					
				}
				else { 
					$('div.back-detail').css("background-position","0px 2px");
				}
*/				

				return false;
			}
			// bind to the forward and back buttons
			$('div.back-detail',this).click(function()
			{
				thumbStartShowIndex = thumbStartShowIndex - 1;
				return gotoPage();                
			});

			$('div.forward-detail',this).click(function()
			{
				thumbStartShowIndex = thumbStartShowIndex + 1;			
				return gotoPage();
			});
			
			// create a public interface to move to a specific page
			$(this).bind('goto',function(event,page)
			{
				gotoPage(page);
			});
			
		});
	};
})(jQuery);