/************************************

Programmed by Matt Duffy 
www.mattduffydesign.com
for Nicole DiGiambattista @
www.nicoledeesigns.com

created: 7.23.2009
update: 10.14.2009 by Matt Duffy

** anyone interesting in using this code or any part of the code is free to do so as long as 
this comment remains at the top or credit given to the parts you used. 

oh, and let me know if you use it or just think its awesome! :)

************************************/



$(document).ready(function(){	//waits until html document loads before running script
		

		var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
		
		if (IE6) {
		
			$('#thumbnails ul#catagories li').css({'margin' : '12px 0 12px -15px'});
			var tnDivHeight = 480; //height thumbnails move on arrow clicks
			
		} else {
			var tnDivHeight = 465; //height thumbnails move on arrow clicks
			
		}
		
		//--START OF INTIAL STATE SET--------------------------------------------------
		//this code finds the class of the first link in the sideNav, then searches images, descriptions and thumbnails
		//for the first item that has that class. the image and description are made visible, the thumbnail is made active along with the first link in the side nav
		
		var catagoryLinks = $("div#sideNav ul li a");
		var firstCatsClass = $(catagoryLinks[0]).attr("class");

		var firstCatsPics = $("#contentDisplay #bigPicture ." + firstCatsClass);
		var firstCatsInfo = $('#contentDisplay #pictureInfo p.' + firstCatsClass);
		var firstCatsInfoTitle = $('#contentDisplay #pictureInfo h3.' + firstCatsClass);
		var firstCatsThumb = $('#content #thumbnails ul.' + firstCatsClass + ' li a img');
		
		$(firstCatsPics[0]).removeClass('hidden');
		$(firstCatsInfo[0]).removeClass('hidden');
		$(firstCatsInfoTitle[0]).removeClass('hidden');
		$(firstCatsThumb[0]).addClass('active');
		$(catagoryLinks[0]).addClass('active');
		
		//--END OF INTIAL STATE SET-----------------------------------------------------
		
		
		//--START OF DETERMINING HOW MANY SETS OF 4 IMAGE THE INTIAL CATEGORY HAS-----------------------------------------------------
		function determineImgSets () {
			
			var activeList = $('#content #thumbnails ul li a img.active').parent().parent().parent();
			var activeListClass = $(activeList[0]).attr('class');
			var itemsInList = $('#content #thumbnails ul.' + activeListClass + ' li')
			var numItemsInList = itemsInList.length;
			
			var setsOfImgs = Math.floor(numItemsInList / 4.0); 
			var leftOver = numItemsInList % 4;
			
			if (leftOver != 0) {
				
				setsOfImgs++;
				
			}	
			
			return setsOfImgs;
			
		}
		//--END OF DETERMINE IMAGE SETS FUNCTION-----------------------------------------------------
		
		//FUNCTION CALL and intialize variables
		var imgSets = determineImgSets(); 
		var clickHits = 0; //used to regulate arrow functions
		//var tnDivHeight = 465; //height thumbnails move on arrow clicks
		
		
		//this disables the arrows if clickin them would result in no action
		function disableArrows () {
		
		if (clickHits == 0) {
			
			
				var disableUp = $('#content a.upArrow');
				
				if (!$(disableUp).hasClass('disableArrow')) {
					
					$(disableUp).addClass('disabledArrow');
					
				}
				
			} else {
				
				var disableUp = $('#content a.upArrow');
				
				if ($(disableUp).hasClass('disabledArrow')) {
					$(disableUp).removeClass('disabledArrow');
				}
				
			}
			
			
			if (clickHits == (imgSets - 1)) {
				
				var disableDown = $('#content a.downArrow');
				if (!$(disableDown).hasClass('disabledArrow')) {
					$(disableDown).addClass('disabledArrow');
				}
				
			} else {
			
				var disableDown = $('#content a.downArrow');
				if ($(disableDown).hasClass('disabledArrow')) {
					$(disableDown).removeClass('disabledArrow');
				}
			
			}
		
		}
		
		disableArrows();
		
		//--START OF CATAGORY LINKS FUNCTION ----------------------------------------------------------------------------
		
		$(catagoryLinks).click( function() {
			
			var clickedLink = $(this).attr('class');
			
			
			var clickedPics = $("#contentDisplay #bigPicture ." + clickedLink);
			
			for (var a = 0; a < catagoryLinks.length; a++) {
				
				//-----------------------------
				//when a link in the side nav is clicked, this checks each link in the sideNav's classes
	
			
				 if ($(catagoryLinks[a]).hasClass('active') && $(catagoryLinks[a]).attr('class') == clickedLink) {
																								   
				//when it finds that the link that was clicked is already the active link
				//it  resets to the first picture of the section
				
				
					$(catagoryLinks[a]).removeClass('active');
					var currentClass = $(catagoryLinks[a]).attr('class');
					$(catagoryLinks[a]).addClass('active');
				
					var classPics = $('#contentDisplay #bigPicture .' + currentClass);
					var classInfo = $('#contentDisplay #pictureInfo p.' + currentClass);
					var classInfoTitle = $('#contentDisplay #pictureInfo h3.' + currentClass);
					var classThumbs = $('#content #thumbnails ul.' + currentClass + ' li a img')
					
					for (var d = 1; d < classPics.length; d++) {
						if (!$(classPics[d]).hasClass('hidden')) {
						
							$(classPics[d]).addClass('hidden');
						
						}
					}
					
					if ($(classPics[0]).hasClass('hidden')) {
					
						$(classPics[0]).removeClass('hidden');
					
					}
					
					for (var e = 1; e < classInfo.length; e++) {
						if (!$(classInfo[e]).hasClass('hidden')) {
						
							$(classInfo[e]).addClass('hidden');
						
						}
					}
					
					if ($(classInfo[0]).hasClass('hidden')) {
					
						$(classInfo[0]).removeClass('hidden');
					
					}
					
					for (var k = 1; k < classInfoTitle.length; k++) {
						if (!$(classInfoTitle[k]).hasClass('hidden')) {
						
							$(classInfoTitle[k]).addClass('hidden');
						
						}
					}
					
					if ($(classInfoTitle[0]).hasClass('hidden')) {
					
						$(classInfoTitle[0]).removeClass('hidden');
					
					}
					
					for (var f = 1; f < classThumbs.length; f++) {
						if ($(classThumbs[f]).hasClass('active')) {
						
							$(classThumbs[f]).removeClass('active');
						
						}
					}
					
					if (!$(classThumbs[0]).hasClass('active')) {
					$(classThumbs[0]).addClass('active');
					
					}
					
					clickHits = 0;
					$('#content #thumbnails').animate({top: 0}, 500);
					disableArrows();
					
					
				
				//------------------------------end of second condition, finds an that the clicked link was already active
				
				} else if ($(catagoryLinks[a]).attr('class') != clickedLink && $(catagoryLinks[a]).hasClass('active')) {
					
				//if it finds an active link that isnt the link that was clicked,
				//it removes the active class, and then hides any picture on display, its description, and the thumbnails of the sections
												  
					$(catagoryLinks[a]).removeClass('active');
					var currentClass = $(catagoryLinks[a]).attr('class');
					var classPics = $('#contentDisplay #bigPicture .' + currentClass);
					var classInfo = $('#contentDisplay #pictureInfo p.' + currentClass);
					var classInfoTitle = $('#contentDisplay #pictureInfo h3.' + currentClass);
					var classThumbs = $('#content #thumbnails ul.' + currentClass);
					var classActiveThumb = $('#content #thumbnails ul.' + currentClass + ' li a img')
					
					for (var b = 0; b < classPics.length; b++) {
						if (!$(classPics[b]).hasClass('hidden')) {
						
							$(classPics[b]).addClass('hidden');
						
						}
					}
					
					for (var c = 0; c < classInfo.length; c++) {
						if (!$(classInfo[c]).hasClass('hidden')) {
						
							$(classInfo[c]).addClass('hidden');
						
						}
					}
					
						for (var l = 0; l < classInfoTitle.length; l++) {
						if (!$(classInfoTitle[l]).hasClass('hidden')) {
						
							$(classInfoTitle[l]).addClass('hidden');
						
						}
					}
					
					
					
					for (var n = 0; n < classActiveThumb.length; n++) {
					
						if ($(classActiveThumb[n]).hasClass('active')) {
							
							$(classActiveThumb[n]).removeClass('active');
						
						}
					}

					$(classThumbs[0]).addClass('hidden');
				
				//----------------------------- end of the second condition, finding a nonclicked link that is active
				
				} else if (!$(catagoryLinks[a]).hasClass('active') && $(catagoryLinks[a]).hasClass(clickedLink)) {
				
				//when if finds the link that was clicked and it wasnt already active, it finds the first picture and description
				//displays both along with the set of corresponding thumbnails of the section and makes the first active.
					
					
					var currentClass = $(catagoryLinks[a]).attr('class');
					var classPics = $('#contentDisplay #bigPicture .' + currentClass);
					var classInfo = $('#contentDisplay #pictureInfo p.' + currentClass);
					var classInfoTitle = $('#contentDisplay #pictureInfo h3.' + currentClass);
					var classThumbs = $('#content #thumbnails ul.' + currentClass)
					var classFirstThumb = $('#content #thumbnails ul.' + currentClass + ' li a img')
					
		
					$(catagoryLinks[a]).addClass('active');
					
					$(classPics[0]).removeClass('hidden');
					
					$(classInfo[0]).removeClass('hidden');
					
					$(classInfoTitle[0]).removeClass('hidden');
					
					$(classThumbs[0]).removeClass('hidden');
					
					$(classFirstThumb[0]).addClass('active');
					
					$('#content #thumbnails').animate({top: 0}, 500);
					
					imgSets = determineImgSets();
					clickHits = 0;
					disableArrows();
					

					
				
				
				
				} //---end of third condition, sets up catagory of link that was clicked ---------------------------
					
			} //--END OF FOR LOOP 
			
		
			
			
		});
		
		//--END OF CATAGORY CLICK FUNCTION ---------------------------------------------------------------------
		
		
		//--START OF THUMBNAILS CLICK FUNCTION------------------------------------------------------------------
		
		
		var allThumbnails = $('#content #thumbnails ul li a');
		var arrayNumber = 0;
		
		
		
		$(allThumbnails).click(function () {
			
			var clickedThumbUL = $(this).parent().parent();
			var thumbULclass = $(clickedThumbUL).attr('class');
			var clickedThumbSRC = $(this).children().attr('src');
			var ulClass = $(clickedThumbUL).attr('class');
			var catThumbs = $('#content #thumbnails ul.' + ulClass + ' li a img')
			
			
			for (var g = 0; g < catThumbs.length; g++) {
				
				if ($(catThumbs[g]).attr('src') == clickedThumbSRC) {
					
					arrayNumber = g;
					$(catThumbs[g]).addClass('active');
				
				} else if ($(catThumbs[g]).hasClass('active')) {
				
					$(catThumbs[g]).removeClass('active');
				
				}
				
			}
			
			var bigPics = $('#contentDisplay #bigPicture .' + thumbULclass);
			
			for (var h = 0; h < bigPics.length; h++) {
				
				if (h != arrayNumber && !$(bigPics[h]).hasClass('hidden')) {
				
					$(bigPics[h]).addClass('hidden');
				
				} 											
			
			}
			
			
			$(bigPics[arrayNumber]).removeClass('hidden');
		
			
			var picInfo = $('#contentDisplay #pictureInfo p.' + thumbULclass);
			
			for (var j = 0; j < picInfo.length; j++) {
				
				if (j != arrayNumber && !$(picInfo[j]).hasClass('hidden')) {
				
					$(picInfo[j]).addClass('hidden');
				
				} 											
			
			}
			
			
			$(picInfo[arrayNumber]).removeClass('hidden');
		
		
			var picInfoTitle = $('#contentDisplay #pictureInfo h3.' + thumbULclass);
			
			for (var m = 0; m < picInfoTitle.length; m++) {
				
				if (m != arrayNumber && !$(picInfoTitle[m]).hasClass('hidden')) {
				
					$(picInfoTitle[m]).addClass('hidden');
				
				} 											
			
			}
			
			
			$(picInfoTitle[arrayNumber]).removeClass('hidden');
			
		
		
		});
		//--ENF OF THUMBNAIL CLICK FUNCTION --------------------------------------------------------------------

		//--START OF ARROW CLICK FUNCTIONS ---------------------------------------------------------------------
		
	
		
		$('#content a.upArrow').click(function () {
												
				if (clickHits > 0) {
					
					clickHits--;
					
					var moveUp = tnDivHeight - (clickHits + 1) * tnDivHeight  + "px";
						
					$('#content #thumbnails').animate({top: moveUp}, 1500, function () {
					
						disableArrows();
					
				});
					
				}
	
				
		});
		//--END OF UP ARROW CLICK FUNCTION ---------------------------------------------------------------------
		
		
		$('#content a.downArrow').click(function () {
				
				if (clickHits < (imgSets - 1)) {
					
					clickHits++;
					
					var moveDown = (-1 * tnDivHeight) - (clickHits - 1) * tnDivHeight + "px";
		
						$('#content #thumbnails').animate({top: moveDown}, 1500, function () {
						
							disableArrows();
						
						});
				
				}
				
				
		});
						  				 
}); //end of document ready function