// Ethan Hackett 2011
/* The following passes the ID of the current "active" item in the gallery 
   then it targets that item in the carousel and adds the approriate classes
   before and after it.  It also uses that # as the X of X in the slide numbers. */



$(document).ready(function() {
		
	var mouseDown = false;
		
		// Assign the page URL as a  veriable starting after .com/...
		var currentPage = window.location.pathname;
		
		// Locate the parent of the anchor that matches the current URL in it.
		var currentPageParentLi = $('a[href$="' + currentPage + '"]').parent('li'); 
		
		// Get the index of the 
		var currentPageLi = $("#carousel_ul li").index(currentPageParentLi);

			// Hash Tags were setup but got replaced to use the Google URL instead 
			// DEPRICATED!!!Pass the hash tag at the end of a url to focus carousel on the active slide.
			// DEPRICATED!!!Example: ....com/design-portfolio.aspx#4
			// DEPRICATED!!! This uses the URL to find the number after the "#" then uses it as the variable for active slide
			
		// Instead of using a hash tag to pass the number through we use the URL and it's relation to the anchor.
			
		// Add 1 so that instead of starting at 0 it starts at 1. This effects the entire  # system.
		var hash = currentPageLi + 1;
		//alert(hash);
		 
		// This checks to see if there is a hash tag and if thta has tag is greater or equal to 1.
		if(hash >= 1) {
			var currentSlideId= hash;
		}
		else {
			// This is will also fire if there is no hash tag passed through
			var currentSlideId= 1;
		}
		
		// Get the number of li which determains the # slides on current page.
		var carouselNum=$('#carousel_ul > li').length;
		
		// This appends the two #s for X of X in the carousel. 
		// "Current Slide" of "Total Slides"
		$("#carousel-current").html(currentSlideId);
		$("#carousel-count").html(carouselNum);
		
		// Get List Item Width Via CSS used to move the carouse by width
		// Using CSS vs defining keeps it flexable and editable via CSS instead of just Javascript
		var itemWidth = $('#carousel_ul li').outerWidth() + 0;
		
		// Move the last list item before the first item. 
		// The purpose of this is if the user clicks to slide left he will be able to see the last item.
		$('#carousel_ul li:first').before($('#carousel_ul li:last')); 
		$('#carousel_ul li:first').before($('#carousel_ul li:last'));
		$('#carousel_ul li:first').before($('#carousel_ul li:last'));
		// This removes the first list item so you can scroll left
		$('#carousel_ul').css({'left' : '-136px'});
		
		// If the current slide is 2 or higher the if statement loops 
		//through moving the list items to the end until that item is centered. 
		if(currentSlideId > 1) {
			// -1 To correct the loop sycle starting on 2 but needing to run only once. 
			var currentSlideMini = currentSlideId -1;
			// List through each 
			$("#carousel_ul li:lt(" + currentSlideMini + ")").each(function() {
               // Move the first list item to the end
               $('#carousel_ul li:last').after($('#carousel_ul li:first')); 
               // Get the left indent to the default -136px
               $('#carousel_ul').css({'left' : '-136px'});  
			});
		}
		 
		
		// This is always the 4th list item after # of list items have been moved to the end.
		var currentSlideActive = 4;
		
		// Moving & Animating Active Class
		/* The gallery starts by targetting the nth-child which is the # of the current "active" piece
		   Then it ads the class to it and adds the previous and next classes to it's ajacent list item.
		   Once the classes are assigned it then animates each list item and the images within it */
		$("#carousel_ul li:nth-child(" + currentSlideActive + ")").addClass("carousel-current");
		// Assing next item to the > Next Gallery piece
		$("#carousel_ul").find("li.carousel-current").next("li").addClass("carousel-current-next").each(function() { 
				// Set the veriable previousLink to the URL of the previous link in carouse. 
				var nextLink = $(this).find('a').attr('href') + "#portfolioNav";
				
				// The navigation arrows <<o>> are loaded using ajax so the ajazComplete waits to fire until the the ajax has finished loading.
				$("#portfolio-controls").ajaxComplete(function() {
					// Set the Previous arrow to link to the previous portfolio piece.
					$('a#gallery-next').attr('href',nextLink);
				});
				
		});
		// Assing next item to the < Previous Gallery piece
		$("#carousel_ul").find("li.carousel-current").prev("li").addClass("carousel-current-prev").each(function() { 
				// Set the veriable previousLink to the URL of the previous link in carouse. 
				var previousLink = $(this).find('a').attr('href') + "#portfolio";
				
				$("#portfolio-controls").ajaxComplete(function() {
					// Set the Previous arrow to link to the previous portfolio piece.
					$('a#gallery-previous').attr('href',previousLink);
				});
				
		});
		
		$('a#gallery-previous').click(function() {
			  $(this).focus();
		});
		$('a#gallery-next').click(function() {
			  $(this).focus();
		});
		
		$("#carousel_ul li a img").animate({'width' : '100px', 'margin-top' : '50px'});
		$("li.carousel-current-next a img").animate({'width' : '145px', 'margin-top' : '20px'});
		$("li.carousel-current a img").animate({'width' : '190px', 'margin-top' : '0px'});
		$("li.carousel-current-prev a img").animate({'width' : '145px', 'margin-top' : '20px'});
		
		$("#carousel_ul li").animate({'width' : '100px', 'opacity' : '0.2', 'font-size' : '8px' });
		$("li.carousel-current-next").animate({'width' : '145px', 'opacity' : '0.6' , 'font-size' : '11px'});
		$("li.carousel-current").animate({'width' : '190px', 'opacity' : '1', 'font-size' : '15px'});
		$("li.carousel-current-prev").animate({'width' : '145px', 'opacity' : '0.6' , 'font-size' : '11px'}, function() {
			$("#carousel_ul").fadeToggle();
		});

		// Set wait to false. Later in the < and > arrows will delay until wait is false.
		var wait = false;
	
		
      
      //when user clicks the image for sliding right        
      $('#right_scroll img').bind('click', function(){
	  	      	
      	   /* Inicially Wait is False so the function fires as normal.
      	   	  Right after wait is set to true until the animation is completed farther down.
      	   	  Once the animation is completed Wait returns to false and the proccess continues.
      	   	  Porpigation and Bubbling up are now fixed. - Ethan */
      	   if(wait){
      	        return;
      	   }
      	   
      	   // Prevents clicking to quicly from bubblinb up animation and transition
      	   wait = true;
      	
      	  	
      	   //This snags the number of the current slide X of X.
      	   var currentNum = parseInt( $("#carousel-current").text() );
    	  
    	   // If the current number is less than the total slides then continute incremending
    	   if(currentNum < carouselNum) {
    	    	var currentNum = currentNum + 1;
    	    	$("#carousel-current").html(currentNum);
    	   }
    	   // If the current number is equal to or more than the total reset the current number to 1
    	   else {
    	   	    $("#carousel-current").html(1);
    	   }
    	  
          var item_width = $('#carousel_ul li').outerWidth() + 0;
          
          //calculae the new left indent of the unordered list
          var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
          
          //make the sliding effect using jquery's animate function '
         
          $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
              
              //get the first list item and put it after the last list item (that's how the infinite effects is made) '
              $('#carousel_ul li:last').after($('#carousel_ul li:first')); 
              
              //and get the left indent to the default -136px
              $('#carousel_ul').css({'left' : '-136px'});
              
              // Now animation is complete and the user can reclick the next and previous arrows.
              
              wait = false;
              
          }); 
          
			// Moving & Animating Active Class
    		$("#carousel_ul").find("li.carousel-current").next("li").addClass("carousel-current");
    		$("li.carousel-current:first").removeClass("carousel-current");
    		$("li.carousel-current a img").animate({'width' : '190px', 'margin-top' : '0px'}, 500);
    		$("li.carousel-current").animate({'width' : '190px', 'opacity' : '1', 'font-size' : '15px'}, 500);
    		
    		$("#carousel_ul").find("li.carousel-current-next").next("li").addClass("carousel-current-next");
    		$("li.carousel-current-next:first").removeClass("carousel-current-next");
    		$("li.carousel-current-next a img").animate({'width' : '150px', 'margin-top' : '20px'}, 500);
    		$("li.carousel-current-next").animate({'width' : '150px', 'opacity' : '0.6', 'font-size' : '11px'}, 500);
    		
    		$("#carousel_ul").find("li.carousel-current-prev").next("li").addClass("carousel-current-prev");
    		$("li.carousel-current-prev:first").removeClass("carousel-current-prev");
    		$("li.carousel-current-prev a img").animate({'width' : '150px', 'margin-top' : '20px'}, 500);
    		$("li.carousel-current-prev").animate({'width' : '150px', 'opacity' : '0.6', 'font-size' : '11px'}, 500);
    		 
    		 
    		$("#carousel_ul li a img").not("li.carousel-current a img, li.carousel-current-prev a img, li.carousel-current-next a img").animate({'width' : '100px', 'margin-top' : '50px'});
    		
    		$("#carousel_ul li").not("li.carousel-current, li.carousel-current-prev, li.carousel-current-next").animate({'width' : '100px', 'opacity' : '0.2', 'font-size' : '8px'});  
    	//}	
    });
      
      $('#right_scroll img').live('mousedown', function(){
	  	mouseDown = true; 		
	  });
	  
	  $('#right_scroll img').live('mouseup', function(){
	  	mouseDown = false; 		
	  });
	  
      
      //when user clicks the image for sliding left
      $('#left_scroll img').bind('click', function(){

		/* Inicially Wait is False so the function fires as normal.
			  Right after wait is set to true until the animation is completed farther down.
			  Once the animation is completed Wait returns to false and the proccess continues.
			  Porpigation and Bubbling up are now fixed. - Ethan */
		if(wait){
		     return;
		}
		
		// Prevents clicking to quicly from bubblinb up animation and transition
		wait = true;
		          
          var currentNum = parseInt( $("#carousel-current").text() );
          
           // If the current number is less than the total slides then continute incremending
          if(currentNum > 1) {
           	var currentNum = currentNum - 1;
           	$("#carousel-current").html(currentNum);
          }
          else {
          	$("#carousel-current").html(carouselNum);
          }
               
          var item_width = $('#carousel_ul li').outerWidth() + 0;
     
          
          /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
          var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
          
          $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
	          
	          /* when sliding to left we are moving the last item before the first list item */            
	          $('#carousel_ul li:first').before($('#carousel_ul li:last')); 
	          
	          /* and again, when we make that change we are setting the left indent of our unordered list to the default -136px */
	          $('#carousel_ul').css({'left' : '-136px'});
	          
	          // Now animation is complete and the user can reclick the next and previous arrows.
	          wait = false;
	          
          });
          
          
          // Moving & Animating Active Class
          $("#carousel_ul").find("li.carousel-current").prev("li").addClass("carousel-current");
          $("li.carousel-current:last").removeClass("carousel-current");
          $("li.carousel-current a img").animate({'width' : '190px', 'margin-top' : '0px'}, 500); 
           $("li.carousel-current").animate({'width' : '190px', 'opacity' : '1', 'font-size' : '15px'}, 500);  
          
          $("#carousel_ul").find("li.carousel-current-next").prev("li").addClass("carousel-current-next");
          $("li.carousel-current-next:last").removeClass("carousel-current-next");
          $("li.carousel-current-next a img").animate({'width' : '150px','margin-top' : '20px'}, 500);
          $("li.carousel-current-next").animate({'width' : '150px', 'opacity' : '0.6', 'font-size' : '11px'}, 500);
          
          $("#carousel_ul").find("li.carousel-current-prev").prev("li").addClass("carousel-current-prev");
          $("li.carousel-current-prev:last").removeClass("carousel-current-prev");
          $("li.carousel-current-prev a img").animate({'width' : '150px', 'margin-top' : '20px'}, 500);
          $("li.carousel-current-prev").animate({'width' : '150px', 'opacity' : '0.6', 'font-size' : '11px'}, 500);
          
          $("#carousel_ul li a img").not("li.carousel-current a img, li.carousel-current-prev a img, li.carousel-current-next a img").animate({'width' : '100px', 'margin-top' : '50px'});
          
          $("#carousel_ul li").not("li.carousel-current, li.carousel-current-prev, li.carousel-current-next").animate({'width' : '100px', 'opacity' : '0.2', 'font-size' : '8px'});
          
          
      });
	  
	  
	  
	   //Holding Mouse Down      
      $('#right_scroll img').mousehold(200, function(i){
	  	      	
      	   /* Inicially Wait is False so the function fires as normal.
      	   	  Right after wait is set to true until the animation is completed farther down.
      	   	  Once the animation is completed Wait returns to false and the proccess continues.
      	   	  Porpigation and Bubbling up are now fixed. - Ethan */
      	   if(wait){
      	        return;
      	   }
      	   
      	   // Prevents clicking to quicly from bubblinb up animation and transition
      	   wait = true;
      	
      	  	
      	   //This snags the number of the current slide X of X.
      	   var currentNum = parseInt( $("#carousel-current").text() );
    	  
    	   // If the current number is less than the total slides then continute incremending
    	   if(currentNum < carouselNum) {
    	    	var currentNum = currentNum + 1;
    	    	$("#carousel-current").html(currentNum);
    	   }
    	   // If the current number is equal to or more than the total reset the current number to 1
    	   else {
    	   	    $("#carousel-current").html(1);
    	   }
    	  
          var item_width = $('#carousel_ul li').outerWidth() + 0;
          
          //calculae the new left indent of the unordered list
          var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
          
          //make the sliding effect using jquery's animate function '
         
          $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
              
              //get the first list item and put it after the last list item (that's how the infinite effects is made) '
              $('#carousel_ul li:last').after($('#carousel_ul li:first')); 
              
              //and get the left indent to the default -136px
              $('#carousel_ul').css({'left' : '-136px'});
              
              // Now animation is complete and the user can reclick the next and previous arrows.
              
              wait = false;
              
          }); 
          
			// Moving & Animating Active Class
    		$("#carousel_ul").find("li.carousel-current").next("li").addClass("carousel-current");
    		$("li.carousel-current:first").removeClass("carousel-current");
    		$("li.carousel-current a img").animate({'width' : '190px', 'margin-top' : '0px'}, 500);
    		$("li.carousel-current").animate({'width' : '190px', 'opacity' : '1', 'font-size' : '15px'}, 500);
    		
    		$("#carousel_ul").find("li.carousel-current-next").next("li").addClass("carousel-current-next");
    		$("li.carousel-current-next:first").removeClass("carousel-current-next");
    		$("li.carousel-current-next a img").animate({'width' : '150px', 'margin-top' : '20px'}, 500);
    		$("li.carousel-current-next").animate({'width' : '150px', 'opacity' : '0.6', 'font-size' : '11px'}, 500);
    		
    		$("#carousel_ul").find("li.carousel-current-prev").next("li").addClass("carousel-current-prev");
    		$("li.carousel-current-prev:first").removeClass("carousel-current-prev");
    		$("li.carousel-current-prev a img").animate({'width' : '150px', 'margin-top' : '20px'}, 500);
    		$("li.carousel-current-prev").animate({'width' : '150px', 'opacity' : '0.6', 'font-size' : '11px'}, 500);
    		 
    		 
    		$("#carousel_ul li a img").not("li.carousel-current a img, li.carousel-current-prev a img, li.carousel-current-next a img").animate({'width' : '100px', 'margin-top' : '50px'});
    		
    		$("#carousel_ul li").not("li.carousel-current, li.carousel-current-prev, li.carousel-current-next").animate({'width' : '100px', 'opacity' : '0.2', 'font-size' : '8px'});  
    	
    });
	
	
	      //when user holds down the left arrow
      $('#left_scroll img').mousehold(200, function(i){

		/* Inicially Wait is False so the function fires as normal.
			  Right after wait is set to true until the animation is completed farther down.
			  Once the animation is completed Wait returns to false and the proccess continues.
			  Porpigation and Bubbling up are now fixed. - Ethan */
		if(wait){
		     return;
		}
		
		// Prevents clicking to quicly from bubblinb up animation and transition
		wait = true;
		          
          var currentNum = parseInt( $("#carousel-current").text() );
          
           // If the current number is less than the total slides then continute incremending
          if(currentNum > 1) {
           	var currentNum = currentNum - 1;
           	$("#carousel-current").html(currentNum);
          }
          else {
          	$("#carousel-current").html(carouselNum);
          }
               
          var item_width = $('#carousel_ul li').outerWidth() + 0;
     
          
          /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
          var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
          
          $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
	          
	          /* when sliding to left we are moving the last item before the first list item */            
	          $('#carousel_ul li:first').before($('#carousel_ul li:last')); 
	          
	          /* and again, when we make that change we are setting the left indent of our unordered list to the default -136px */
	          $('#carousel_ul').css({'left' : '-136px'});
	          
	          // Now animation is complete and the user can reclick the next and previous arrows.
	          wait = false;
	          
          });
          
          
          // Moving & Animating Active Class
          $("#carousel_ul").find("li.carousel-current").prev("li").addClass("carousel-current");
          $("li.carousel-current:last").removeClass("carousel-current");
          $("li.carousel-current a img").animate({'width' : '190px', 'margin-top' : '0px'}, 500); 
           $("li.carousel-current").animate({'width' : '190px', 'opacity' : '1', 'font-size' : '15px'}, 500);  
          
          $("#carousel_ul").find("li.carousel-current-next").prev("li").addClass("carousel-current-next");
          $("li.carousel-current-next:last").removeClass("carousel-current-next");
          $("li.carousel-current-next a img").animate({'width' : '150px','margin-top' : '20px'}, 500);
          $("li.carousel-current-next").animate({'width' : '150px', 'opacity' : '0.6', 'font-size' : '11px'}, 500);
          
          $("#carousel_ul").find("li.carousel-current-prev").prev("li").addClass("carousel-current-prev");
          $("li.carousel-current-prev:last").removeClass("carousel-current-prev");
          $("li.carousel-current-prev a img").animate({'width' : '150px', 'margin-top' : '20px'}, 500);
          $("li.carousel-current-prev").animate({'width' : '150px', 'opacity' : '0.6', 'font-size' : '11px'}, 500);
          
          $("#carousel_ul li a img").not("li.carousel-current a img, li.carousel-current-prev a img, li.carousel-current-next a img").animate({'width' : '100px', 'margin-top' : '50px'});
          
          $("#carousel_ul li").not("li.carousel-current, li.carousel-current-prev, li.carousel-current-next").animate({'width' : '100px', 'opacity' : '0.2', 'font-size' : '8px'});         
          
      });
	  
	
	
    
      
});