$(document).ready(function(){

	//global variables = set to defaults...
	/*var currentrow = "#steps";
	var currenttarget = "#steps-image1";*/
	var scrolling = false;

	/**** NEXT PREVIOUS slider **/
	//next previous link...
	$('.nextpreviouslink').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") == "previous") {
				if ($(currenttarget).prev().length) {
					isThereAnElement = true;
					// store reference to previous element in nexttarget variable
					var nexttarget = $(currenttarget).prev();
				}
			} else if ($(this).attr("id") == "next") {
				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 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) {
					
					//console.info(loc.left);
					
					//set scrolling to true so no other script runs while we're doing this...
					scrolling = true;
					
					var symbolleft = "";
					if (loc.left < 330 && loc.left > 0) {
						loc.left = 80;
					} else if (loc.left != "0") {
						//0 doesn't need a - in front of it
						var symbolleft = "-";
						//shift over 200 pixels so we've cleared the fade
						loc.left = loc.left-330
					} else {
						//if we're at 0 then we just need to move it over 200 pixels to clear the fade
						loc.left = 330;	
					}
					//console.info(loc.left);
	
						//same as before: don't do -0px
						//if reusing = might need to also check that loc.top is GREATER than 20...
										
					//ok - lets scroll!
					$('#step_images').animate({"left":symbolleft+(loc.left)+"px","top":"0"}, 900,function(){scrolling = false;});
					
					//ungrey - grey out next previous links...
					if ($(currenttarget).prev().length) {
						$('#previous').removeClass('grey');
					} else {
						$('#previous').addClass('grey');	
					}

					if ($(currenttarget).next().length) {
						$('#next').removeClass('grey');
					} else {
						$('#next').addClass('grey');	
					}

					
					
				}//end location check
			}//end next/previous element check...
		} //end scrolling check
	}); //end previous slider link click


});