$(document).ready(function(){
	/* --------------------------------
		top image slide settings
	-------------------------------- */
	
	$(".paging").show();
	$(".paging a:first").addClass("active");

	//Get size of the image, how many images there are, then determin the size of the image reel.
	var imageWidth = $(".window").width();
	var imageSum = $(".imageReel img").size();
	var imageReelWidth = imageWidth * imageSum;

	//Adjust the image reel to its new size
	$(".imageReel").css({'width' : imageReelWidth});

	//Paging and Slider Function
	rotate = function(){
    	var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    	var imageReelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    	$(".paging a").removeClass('active'); //Remove all active class
    	$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

    	//Slider Animation
    	$(".imageReel").animate({
        	left: -imageReelPosition
    	},
    	750 );
	};

	//Rotation  and Timing Event
	rotateSwitch = function(){
	    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
	        $active = $('.paging a.active').next(); //Move to the next paging
	        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 (7 seconds)
	};

	rotateSwitch(); //Run function on launch

	//On Hover
	$(".imageReel a").hover(function() {
	    clearInterval(play); //Stop the rotation
	},
	function() {
		rotateSwitch(); //Resume rotation timer
	});	

	//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 timer
		return false; //Prevent browser jump to link anchor
	});



	/* --------------------------------
		indexBlocks settings
	-------------------------------- */
	lastBlock1 = $("#a1");
	lastBlock2 = $("#a2");
	maxWidth = 375;
	minWidth = 182;
	/*
	$('#a4').hover(function(){
		$(this).animate({left: '100px'});
	});*/
	
	$('#accordion1 #a1').hover(function(){
		$(this).animate(
			{ width: maxWidth + 'px', left: '0' },
			{ queue:false, duration:200 }
		);
		$('#accordion1 #a2').animate(
			{ width:minWidth + 'px', left: '386px'},
			{ queue:false, duration:200 }
		);
		$('#accordion1 #a3').animate(
			{ width: minWidth + 'px', left: '579px'},
			{ queue:false, duration:200 }
		);
		$('#accordion1 #a4').animate(
			{ width: minWidth + 'px', left: '772px'},
			{ queue:false, duration:200 }
		);	
	});
	
	$('#accordion1 #a2').hover(function(){
		$('#accordion1 #a1').animate(
			{ width: minWidth + 'px', left:'0' },
			{ queue:false, duration:200 }
		);
		$(this).animate(
			{ width: maxWidth + 'px', left: '193px'},
			{ queue:false, duration:200 }
		);
		$('#accordion1 #a3').animate(
			{ width: minWidth + 'px', left: '579px'},
			{ queue:false, duration:200 }
		);
		$('#accordion1 #a4').animate(
			{ width: minWidth + 'px', left: '772px'},
			{ queue:false, duration:200 }
		);	
	});
	
	$('#accordion1 #a3').hover(function(){
		$('#accordion1 #a1').animate(
			{ width: minWidth + 'px', left:'0' },
			{ queue:false, duration:200 }
		);
		$('#accordion1 #a2').animate(
			{ width: minWidth + 'px', left: '193px'},
			{ queue:false, duration:200 }
		);
		$(this).animate(
			{ width: maxWidth + 'px', left: '386px'},
			{ queue:false, duration:200 }
		);
		$('#accordion1 #a4').animate(
			{ width: minWidth + 'px', left: '772px'},
			{ queue:false, duration:200 }
		);	
	});
	
	$('#accordion1 #a4').hover(function(){
		$('#accordion1 #a1').animate(
			{ width: minWidth + 'px', left:'0' },
			{ queue:false, duration:200 }
		);
		$('#accordion1 #a2').animate(
			{ width: minWidth + 'px', left: '193px'},
			{ queue:false, duration:200 }
		);
		$('#accordion1 #a3').animate(
			{ width: minWidth + 'px', left: '386px'},
			{ queue:false, duration:200 }
		);
		$(this).animate(
			{ width: maxWidth + 'px', left: '579px'},
			{ queue:false, duration:200 }
		);	
	});
	
	
	$('#accordion2 #b1').hover(function(){
		$(this).animate(
			{ width: maxWidth + 'px', left: '0' },
			{ queue:false, duration:200 }
		);
		$('#accordion2 #b2').animate(
			{ width:minWidth + 'px', left: '386px'},
			{ queue:false, duration:200 }
		);
		$('#accordion2 #b3').animate(
			{ width: minWidth + 'px', left: '579px'},
			{ queue:false, duration:200 }
		);
		$('#accordion2 #b4').animate(
			{ width: minWidth + 'px', left: '772px'},
			{ queue:false, duration:200 }
		);	
	});
	
	$('#accordion2 #b2').hover(function(){
		$('#accordion2 #b1').animate(
			{ width: minWidth + 'px', left:'0' },
			{ queue:false, duration:200 }
		);
		$(this).animate(
			{ width: maxWidth + 'px', left: '193px'},
			{ queue:false, duration:200 }
		);
		$('#accordion2 #b3').animate(
			{ width: minWidth + 'px', left: '579px'},
			{ queue:false, duration:200 }
		);
		$('#accordion2 #b4').animate(
			{ width: minWidth + 'px', left: '772px'},
			{ queue:false, duration:200 }
		);	
	});
	
	$('#accordion2 #b3').hover(function(){
		$('#accordion2 #b1').animate(
			{ width: minWidth + 'px', left:'0' },
			{ queue:false, duration:200 }
		);
		$('#accordion2 #b2').animate(
			{ width: minWidth + 'px', left: '193px'},
			{ queue:false, duration:200 }
		);
		$(this).animate(
			{ width: maxWidth + 'px', left: '386px'},
			{ queue:false, duration:200 }
		);
		$('#accordion2 #b4').animate(
			{ width: minWidth + 'px', left: '772px'},
			{ queue:false, duration:200 }
		);	
	});
	
	$('#accordion2 #b4').hover(function(){
		$('#accordion2 #b1').animate(
			{ width: minWidth + 'px', left:'0' },
			{ queue:false, duration:200 }
		);
		$('#accordion2 #b2').animate(
			{ width: minWidth + 'px', left: '193px'},
			{ queue:false, duration:200 }
		);
		$('#accordion2 #b3').animate(
			{ width: minWidth + 'px', left: '386px'},
			{ queue:false, duration:200 }
		);
		$(this).animate(
			{ width: maxWidth + 'px', left: '579px'},
			{ queue:false, duration:200 }
		);	
	});
});