$(document).ready(function() {

	//Set Default State of each portfolio piece
	//$(".paging").show();
	$(".paging a:first").addClass("active");
		
	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidth = $(".window").width();
	var imageHeight = $(".window").height();
	var imageSum = $(".image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	var imageReelHeight = imageHeight * imageSum;
	
	//Adjust the image reel to its new size
	$(".image_reel").css({'width' : imageReelWidth});
	
	//Paging + Slider Function
	rotate = function(){	
		var triggerID = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
		var image_reelPositionH = triggerID * imageHeight;

		$(".paging a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reel").animate({ 
//			left: -image_reelPosition
			top: -image_reelPositionH
		}, 500 );
		
	}; 
	
	//Rotation + Timing Event
	rotateSwitch = function(){		
		play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.paging a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:first'); //go back to first
			}
			rotate(); //Trigger the paging and slider function
		}, 7000); //Timer speed in milliseconds (3 seconds)
	};
	
	rotateSwitch(); //Run function on launch
	
	//On Hover
	$(".image_reel a").hover(function() {
		clearInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});	
	
	//On Click
	$(".paging a").click(function() {	
		$active = $(this); //Activate the clicked paging
		//Reset Timer
		clearInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		rotateSwitch(); // Resume rotation
		return false; //Prevent browser jump to link anchor
	});	
	
	$(".prevNext #slNext").click(function(){
		clearInterval(play);
		$active = $('.paging a.active').next();
		if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:first'); //go back to first
			}
		var triggerID = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
		var image_reelPositionH = triggerID * imageHeight;

		$(".paging a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reel").animate({ 
			//left: -image_reelPosition
			top: -image_reelPositionH
		}, 500 );
		rotateSwitch();
	});
	
	$(".prevNext #slPrev").click(function(){
		clearInterval(play);
		$active = $('.paging a.active').prev();
		if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:last'); //go back to first
			}
		var triggerID = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
		var image_reelPositionH = triggerID * imageHeight;
		
		$(".paging a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reel").animate({ 
			//left: -image_reelPosition
			top: -image_reelPositionH
		}, 500 );
		rotateSwitch();
	});
	
	
	
	
	
	
	
//////////////////////////////////Commercial Slider
	//Set Default State of each portfolio piece
	//$(".paging").show();
	$(".paging2 a:first").addClass("active");
		
	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidth2 = $(".window2").width();
	var imageHeight2 = $(".window2").height();
	var imageSum2 = $(".image_reel2 img").size();
	var imageReelWidth2 = imageWidth2 * imageSum2;
	var imageReelHeight2 = imageHeight2 * imageSum2;
	
	//Adjust the image reel to its new size
	$(".image_reel2").css({'width' : imageReelWidth2});
	
	//Paging + Slider Function
	rotate2 = function(){	
		var triggerID2 = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition2 = triggerID2 * imageWidth2; //Determines the distance the image reel needs to slide
		var image_reelPositionH2 = triggerID2 * imageHeight2;

		$(".paging2 a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reel2").animate({ 
//			left: -image_reelPosition
			top: -image_reelPositionH2
		}, 500 );
		
	}; 
	
	//Rotation + Timing Event
	rotateSwitch2 = function(){		
		play2 = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.paging2 a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging2 a:first'); //go back to first
			}
			rotate2(); //Trigger the paging and slider function
		}, 8000); //Timer speed in milliseconds (3 seconds)
	};
	
	rotateSwitch2(); //Run function on launch





//////////////////////////////////Residential Slider
	//Set Default State of each portfolio piece
	//$(".paging").show();
	$(".paging3 a:first").addClass("active");
		
	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidth3 = $(".window3").width();
	var imageHeight3 = $(".window3").height();
	var imageSum3 = $(".image_reel3 img").size();
	var imageReelWidth3 = imageWidth3 * imageSum3;
	var imageReelHeight3 = imageHeight3 * imageSum3;
	
	//Adjust the image reel to its new size
	$(".image_reel3").css({'width' : imageReelWidth3});
	
	//Paging + Slider Function
	rotate3 = function(){	
		var triggerID3 = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition3 = triggerID3 * imageWidth3; //Determines the distance the image reel needs to slide
		var image_reelPositionH3 = triggerID3 * imageHeight3;

		$(".paging3 a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reel3").animate({ 
			left: -image_reelPosition3
//			top: -image_reelPositionH3
		}, 500 );
		
	}; 
	
	//Rotation + Timing Event
	rotateSwitch3 = function(){		
		play3 = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.paging3 a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging3 a:first'); //go back to first
			}
			rotate3(); //Trigger the paging and slider function
		}, 5000); //Timer speed in milliseconds (3 seconds)
	};
	
	rotateSwitch3(); //Run function on launch
	
	
	
	
	
	
	
	
	
	
	

//////////////////////////////////Generators Slider
	//Set Default State of each portfolio piece
	//$(".paging").show();
	$(".paging4 a:last").addClass("active");
		
	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidth4 = $(".window4").width();
	var imageHeight4 = $(".window4").height();
	var imageSum4 = $(".image_reel4 img").size();
	var imageReelWidth4 = imageWidth4 * imageSum4;
	var imageReelHeight4 = imageHeight4 * imageSum4;
	
	//Adjust the image reel to its new size
	$(".image_reel4").css({'width' : imageReelWidth4});
	
	//Paging + Slider Function
	rotate4 = function(){	
		var triggerID4 = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition4 = triggerID4 * imageWidth4; //Determines the distance the image reel needs to slide
		var image_reelPositionH4 = triggerID4 * imageHeight4;

		$(".paging4 a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reel4").animate({ 
//			left: -image_reelPosition4
			top: -image_reelPositionH4
		}, 500 );
		
	}; 
	
	//Rotation + Timing Event
	rotateSwitch4 = function(){		
		play4 = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.paging4 a.active').prev();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging4 a:last'); //go back to first
			}
			rotate4(); //Trigger the paging and slider function
		}, 5500); //Timer speed in milliseconds (3 seconds)
	};
	
	rotateSwitch4(); //Run function on launch









	//Set Default State of each portfolio piece
	//$(".paging").show();
	$(".pagingC a:first").addClass("active");
		
	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidthC = $(".windowC").width();
	var imageHeightC = $(".windowC").height();
	var imageSumC = $(".image_reelC img").size();
	var imageReelWidthC = imageWidthC * imageSumC;
	var imageReelHeightC = imageHeightC * imageSumC;
	
	//Adjust the image reel to its new size
	$(".image_reelC").css({'width' : imageReelWidthC});
	
	//Paging + Slider Function
	rotateC = function(){	
		var triggerIDC = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPositionC = triggerIDC * imageWidthC; //Determines the distance the image reel needs to slide
		var image_reelPositionHC = triggerIDC * imageHeightC;

		$(".pagingC a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reelC").animate({ 
			left: -image_reelPositionC
			//top: -image_reelPositionHC
		}, 500 );
		
	}; 
	
	//Rotation + Timing Event
	rotateSwitchC = function(){		
		playC = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.pagingC a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.pagingC a:first'); //go back to first
			}
			rotateC(); //Trigger the paging and slider function
		}, 7000); //Timer speed in milliseconds (3 seconds)
	};
	
	rotateSwitchC(); //Run function on launch
	
	//On Hover
	$(".image_reelC a").hover(function() {
		clearInterval(playC); //Stop the rotation
	}, function() {
		rotateSwitchC(); //Resume rotation
	});	
	
	//On Click
	$(".pagingC a").click(function() {	
		$active = $(this); //Activate the clicked paging
		//Reset Timer
		clearInterval(playC); //Stop the rotation
		rotateC(); //Trigger rotation immediately
		rotateSwitchC(); // Resume rotation
		return false; //Prevent browser jump to link anchor
	});	
	
	$(".prevNextC #slNextC").click(function(){
		clearInterval(playC);
		$active = $('.pagingC a.active').next();
		if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.pagingC a:first'); //go back to first
			}
		var triggerIDC = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPositionC = triggerIDC * imageWidthC; //Determines the distance the image reel needs to slide
		var image_reelPositionHC = triggerIDC * imageHeightC;

		$(".pagingC a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reelC").animate({ 
			left: -image_reelPositionC
			//top: -image_reelPositionHC
		}, 500 );
		rotateSwitchC();
	});
	
	$(".prevNextC #slPrevC").click(function(){
		clearInterval(playC);
		$active = $('.pagingC a.active').prev();
		if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.pagingC a:last'); //go back to first
			}
		var triggerIDC = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPositionC = triggerIDC * imageWidthC; //Determines the distance the image reel needs to slide
		var image_reelPositionHC = triggerIDC * imageHeightC;
		
		$(".pagingC a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reelC").animate({ 
			left: -image_reelPositionC
			//top: -image_reelPositionHC
		}, 500 );
		rotateSwitchC();
	});
	
	
});