$(document).ready(function() {
	
	//Activate all links
	$(".graphicButton a").addClass("active");
	$(".immButton a").addClass("active");
	$(".creativeButton a").addClass("active");
	$(".left a").addClass("active");
	$(".right a").addClass("active");
	
	//Set basic variables and assign them to GRAPHIC
	var imageWidth = 910;
	var imageHeight = $(".window").height();
	var imageSum = $(".image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	
	var sizeArray= [$(".graphic > img").size(),$(".imm > img").size(),$(".creative > img").size()];
	var spacingArray= [0,-370,-740];
	var categoryArray=["Graphic Design", "Interactive Multimedia", "Creative Process"];
	var opacityLevel = 0.3;

	var currentGallery=1;
	var maxWords = sizeArray[currentGallery];
	var additionalTextHeight = 0;
	var positionHorizontal = 0;
	var positionVertical = spacingArray[currentGallery];
	var wordPosition=0;
	var moveShift=true;
	
	document.getElementById('currentNumber').innerHTML = "1/"+maxWords+" in "+categoryArray[currentGallery];
	
	$(".image_reel").css({ top: positionVertical });
	rotateGalleryWords();
	/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	$(".project, .year, .role").css({ top: -1*additionalTextHeight });
	$(".project, .role, .year, .image_reel").show();
	
	switchLinks(currentGallery);
	
	//Adjust the image reel to its new size
	$(".image_reel").css({'width' : imageReelWidth});
	
	$("#graphicButton a").click(function(){
		currentGallery=0;
		positionHorizontal = 0;
		image_reelPosition = 0;
		galleryButtonClicked()
	});
	
	$("#immButton a").click(function(){
		currentGallery=1;
		positionHorizontal = 0;
		image_reelPosition = 0;
		galleryButtonClicked();
	});
	
	$("#creativeButton a").click(function(){
		currentGallery=2;
		positionHorizontal = 0;
		image_reelPosition = 0;
		galleryButtonClicked();
	});
	
	
	// When the left arrow is clicked
	$("#left a").click(function(){
		if(positionHorizontal == 0){
			if(currentGallery==0){
				currentGallery=2;
			}else{
				currentGallery-=1;
			}
			positionVertical = spacingArray[currentGallery];
			maxWords = sizeArray[currentGallery];
			positionHorizontal = maxWords-1;
			
			wordPosition = (maxWords-1)*40 + additionalTextHeight;
			moveShift=false;
		}else{
			positionHorizontal --;
			wordPosition -= 40;
			moveShift=true;
		}
		
		image_reelPosition = positionHorizontal * imageWidth;
		document.getElementById('currentNumber').innerHTML = (positionHorizontal+1)+"/"+maxWords+" in "+categoryArray[currentGallery];
		
		//animateEverything(1);
		//galleryButtonClicked();
		if(moveShift==true){
			animateEverything(1);
		}else{
			galleryButtonClicked(0);
		}
	});
	
	//When the right arrow is clicked
	$("#right a").click(function(){
		//if the viewer is at the end of the images
		if(positionHorizontal == maxWords-1){
			if(currentGallery==2){
				currentGallery=0;
			}else{
				currentGallery+=1;
			}
			positionVertical = spacingArray[currentGallery];
			maxWords = sizeArray[currentGallery];
			positionHorizontal = maxWords-1;
			
			positionHorizontal = 0;
			wordPosition =  0 + additionalTextHeight;
			moveShift=false;
		}else{//if not, continue shifting the images left
			positionHorizontal ++;
			wordPosition += 40;
			moveShift=true;
		}
		
		image_reelPosition = positionHorizontal * imageWidth;
		document.getElementById('currentNumber').innerHTML = (positionHorizontal+1)+"/"+maxWords+" in "+categoryArray[currentGallery];
		if(moveShift==true){
			animateEverything(1);
		}else{
			galleryButtonClicked(1);
		}
		
		
	});
	
	function galleryButtonClicked(a){
		positionVertical = spacingArray[currentGallery];
		maxWords = sizeArray[currentGallery];
		rotateGalleryWords(a);
		
		document.getElementById('currentNumber').innerHTML = (positionHorizontal+1)+"/"+maxWords+" in "+categoryArray[currentGallery];
		
		switchLinks(currentGallery);
		animateEverything(0);
	}
	
	function rotateGalleryWords(a){
		if(a==0){
			wordPosition = sizeArray[currentGallery];
			for(i=0;i<currentGallery;i++){
				wordPosition += sizeArray[i];
			}
			wordPosition = (wordPosition-1) *40;
			additionalTextHeight = wordPosition;
		}else{
			wordPosition=0;
			for(i=0;i<currentGallery;i++){
				wordPosition += sizeArray[i];
			}
			wordPosition = wordPosition *40;
			additionalTextHeight = wordPosition;
		}
		
	}
	
	function switchLinks(a){
		if(a==0){
			$("#graphicButton").css({ opacity: 1 });
			$("#immButton").css({ opacity: opacityLevel });
			$("#creativeButton").css({ opacity: opacityLevel });
		}else if(a==1){
			$("#graphicButton").css({ opacity: opacityLevel });
			$("#immButton").css({ opacity: 1 });
			$("#creativeButton").css({ opacity: opacityLevel });
		}else if(a==2){
			$("#graphicButton").css({ opacity: opacityLevel });
			$("#immButton").css({ opacity: opacityLevel });
			$("#creativeButton").css({ opacity: 1 });
		}
	}
	/// ANIMATE THE IMAGES AND TEXT - 'a' dictates if you're animating to a different gallery or not
	function animateEverything(a){
		if(a==0){
			$(".image_reel").animate({
				top: positionVertical,
				left: -image_reelPosition
			}, 500 );
		}else{
			$(".image_reel").animate({
				left: -image_reelPosition
			}, 500 );
		}
		$(".project, .role, .year").animate({
			top: -wordPosition
		}, 500 );
	}
});