/*
multi row carousel and image loader written by Jennifer of Scriptygoddess.com
You are free to use and modify - however please leave credit in place.
*/

$(document).ready(function(){
/****************** EDIT THESE TO MATCH YOUR HTML/MARKUP ******************/
	var currentrow = "#row1"; //the first row
	var currenttarget = "#row1-image1"; //the id of the first image in the first row
	var currentnavblock = '#row1-nav'; //the first row nav block to be shown
	
	var wrappingphotodiv = '#photos'; //id of the div that all the photos are in
	var wrappingnavdiv = '#row_nav'; //id of the div that has all the row and image navigation
	
	var nextelementid = 'next'; //id of next link - without "#"
	var previouselementid = 'previous'; //id of previous link - without "#"
	var unloadedimageclass = 'loading'; //class of li elements that will have images loaded into it
	var nextpreviousgreyclass = 'grey'; //class of next/previous links when there is no "next" or "previous" element to scroll to
	var nextpreviousclass = 'nextpreviouslink';
	
	var leftedgeindent = 0; //distance from left edge to move the photos in from (to clear the fade...)
	var rightedgeindent = 0; //distance from left edge to move the photos in from (to clear the fade...)
	var topindent = 0; //nudge photos down in the frame from the top this distance
	
/******************* EDIT BELOW THIS LINE IF YOU KNOW WHAT YOU'RE DOING *********************/	
	var scrolling = false; 

	$(currentnavblock).fadeIn("fast");
	
	//ROW NAVIGATION - This will fire on any row nav click
	$(wrappingnavdiv+' a').click(function(){
	
		//check if scrolling currently (if scrolling don't do anything) don't want stacking of events...
		if(!scrolling) {
			
			//get the target from the "rel" of the link clicked. This should be the ID of PHOTO item in the block
			var target = $(this).attr("rel");
			//get position of target
			var loc = $(target).position();
			//set the global currenttarget to the current target (for use in other/future clicks and scrolling scripts)
			currenttarget = target;
			
			//if we have a location...
			//if not - we're not gonna scroll
			if (loc) {
				
				//set scrolling true so we stop any scrolling
				scrolling = true;
				
				var symbolleft = "";
				// if the location is at 0 we don't need to add a "-" in front of the location number (left)
				if (loc.left != "0") {
					var symbolleft = "-";
					//take away the indent from the location to move out of the way of the fade.
					loc.left = loc.left-leftedgeindent
				} else {
					//if location IS 0 then we just set the location to indent
					loc.left = leftedgeindent;	
				}
				//if the location is at 0 we don't need to add a - in front of the location number (top)
				var symboltop = "";
				if (loc.top != "0") {
					var symboltop = "-";
					//if top padding is needed here
					loc.top = loc.top - topindent;
				} else {
					loc.top = topindent;
				}
	
				
				//time to scroll the photos...
				$(wrappingphotodiv).animate({"left":symbolleft+(loc.left)+"px","top":symboltop+(loc.top)+"px"}, 900,function(){scrolling = false;});
			
			} //END LOCATION CHECK
			
			
			/** ROW IMAGE LOADER!!!!! **/
			//When we click on a new row - we want to load the images (just the first time)
			//so HTML is set for all itms to have a "loading" class which we remove after we've loaded the images.
			//if the loading class is not present - means we've already done this - so just skip past...
			
			//find the parent of the target.
			//target will be the LI element - so parent will be the UL
			var parentul = $(target).parent();
			//while we're here set the global currentrow variable to this parent ul
			currentrow = parentul;
			//get all the LI elements in the UL that have that loading class...
			$(parentul).find('li.'+unloadedimageclass).each(function() {
				//cycle through each LI item...
				//remove "loading" class so we don't do this again...
				$(this).removeClass(unloadedimageclass);
				//store reference to the LI element
				var lielement = this;
				//create a new image element in jquery
				var img = new Image();
				//we've stored the src url in the title attribute in each LI element - 
				var src = $(this).attr("title");
				//time to pull in the image...
				$(img).load(function () {
					//hide the image so we can fade it in
					$(this).hide();
					//APPEND (inside) the LI element with the image		
					$(lielement).append(img);
					//fade in the image
					$(this).fadeIn();
					}).error(function () {
					// not doing anything if it doesn't work - but we could put console.log here to see what's going on...
				}).attr('src', src);
				//for the src = use what we stored in src variable (which was the contents of the title tag in the LI)
			});
			
			
			/** NAV ROW LOADER!!!!! **/
			/* when a new row is loaded - we want to fade in the div with the 
			individual image links so you can skip to a specific image in the row */
			//get the current row - 
			var base = $(parentul).attr("id");
			//construct the text reference of the text block 
			//which will be in the format of the nav row's text name plus "-nav" at the end
			var newnavblock = "#"+base+"-nav";
			
			//if we've clicked the same project we are on currently, skip re-loading the nav block in...
			if (currentnavblock != newnavblock) {
				//hide current nav block
				$(currentnavblock).css('display','none');
				//fade in new nav block
				$(newnavblock).fadeIn("slow");
				//update the globbal variable currentnavblock with the nav block we're now seeing...
				currentnavblock = newnavblock;
			}//end if current navblock check...
			
			//ungrey - grey out next previous links...
			//if there is no next/previous element - add the "grey" class to the next previous buttons...
			if ($(currenttarget).prev().length) {
				$('#'+previouselementid).removeClass(nextpreviousgreyclass);
			} else {
				$('#'+previouselementid).addClass(nextpreviousgreyclass);	
			}

			if ($(currenttarget).next().length) {
				$('#'+nextelementid).removeClass(nextpreviousgreyclass);
			} else {
				$('#'+nextelementid).addClass(nextpreviousgreyclass);	
			}
		
		} //end check for currently scrolling (scrolling == true)

	}); // end row nav clicks




	/**** NEXT PREVIOUS slider **/
	//next previous link...
	$('.'+nextpreviousclass).click(function() {
		//first check if we're already scrolling from another script...
		if(!scrolling) {
			var nexttarget; //create variable out here so we can use it later...
			
			//is there an element next or previous to the one we're on?
			isThereAnElement = false;
			
			if ($(this).attr("id") == previouselementid) {
				if ($(currenttarget).prev().length) {
					isThereAnElement = true;
					// store reference to previous element in nexttarget variable
					var nexttarget = $(currenttarget).prev();
				}
			} else if ($(this).attr("id") == nextelementid) {
				if ($(currenttarget).next().length) {
					isThereAnElement = true;
					// store reference to next element in nexttarget variable
					var nexttarget = $(currenttarget).next();
				}
			}
			
			//if there is a next or previous element - lets go...
			if (isThereAnElement) {
							
				//get the location of that next/previous element
				var loc = nexttarget.position();
				// update global varable current target with the new element
				currenttarget = nexttarget;
				//if we have a location = lets get going.. (if no location - we can't scroll to it)			
				if (loc) {
					
					//set scrolling to true so no other script runs while we're doing this...
					scrolling = true;
					
					var symbolleft = "";
					if (loc.left != "0") {
						//0 doesn't need a - in front of it
						var symbolleft = "-";
						//shift over our indent so we've cleared the fade
						loc.left = loc.left-leftedgeindent
					} else {
						//if we're at 0 then we just need to move it over the indent to clear the fade
						loc.left = leftedgeindent;	
					}
					var symboltop = "";
					if (loc.top != "0") {
						var symboltop = "-";
						//if top padding is needed here
						loc.top = loc.top - topindent;
					} else {
						loc.top = topindent;
					}
					
					//ok - lets scroll!
					$(wrappingphotodiv).animate({"left":symbolleft+(loc.left)+"px","top":symboltop+(loc.top)+"px"}, 900,function(){scrolling = false;});
					
					//ungrey - grey out next previous links...
					if ($(currenttarget).prev().length) {
						$('#'+previouselementid).removeClass(nextpreviousgreyclass);
					} else {
						$('#'+previouselementid).addClass(nextpreviousgreyclass);	
					}

					if ($(currenttarget).next().length) {
						$('#'+nextelementid).removeClass(nextpreviousgreyclass);
					} else {
						$('#'+nextelementid).addClass(nextpreviousgreyclass);	
					}
					
				}//end location check
			}//end next/previous element check...
		} //end scrolling check
	}); //end previous slider link click


});