$(document).ready(function(){
	  	var currentPosition = 0;
	  	var img1 = $('#slide1');
		var img2 = $('#slide2');
		var img3 = $('#slide3');
		var show = $('img.show');
		var url = $('.show').parent('a').attr('href');
	  
	  	//Set the opacity of all images to 0
		$('img.slide').css({opacity: 0.0});
		//Get the first image and display it (gets set to full opacity)
		$('img.show').css({opacity: 1.0});
		// Set first button state to active
		$("#one").css("background-position","0 -20px");
	  
		// Create event listeners for .button clicks
			//Add extra animations for MORE IMAGES
		$('.button')
			.bind('click', function(){
			  if ($(this).attr('id')=='one')
				{currentPosition = 0;
				buttonState(currentPosition);
				img1.css({opactiy: 0.0})
				.addClass('show')
				.animate({opacity: 1.0}, 1000);
				img2.animate({opacity: 0.0}, 1000)
				.removeClass('show');
				img3.animate({opacity: 0.0}, 1000)
				.removeClass('show');
				url = $('.show').parent('a').attr('href');
				$('#mask').parent('a').attr('href', url);
				}
			  else if ($(this).attr('id')=='two')
				{currentPosition = 1;
				buttonState(currentPosition);
				img2.css({opactiy: 0.0})
				.addClass('show')
				.animate({opacity: 1.0}, 1000);
				img1.animate({opacity: 0.0}, 1000)
				.removeClass('show');
				img3.animate({opacity: 0.0}, 1000)
				.removeClass('show');
				url = $('.show').parent('a').attr('href');
				$('#mask').parent('a').attr('href', url);
				}
			  else if ($(this).attr('id')=='three')
				{currentPosition = 2;
				buttonState(currentPosition);
				img3.css({opactiy: 0.0})
				.addClass('show')
				.animate({opacity: 1.0}, 1000);
				img1.animate({opacity: 0.0}, 1000)
				.removeClass('show');
				img2.animate({opacity: 0.0}, 1000)
				.removeClass('show');
				url = $('.show').parent('a').attr('href');
				$('#mask').parent('a').attr('href', url);
				}
			});
			
			//Automatically rotate the images and navigation
			setInterval(function(){
				currentPosition++;
				if(currentPosition>2){currentPosition=0;} //Change ># for MORE IMAGES
				rotate();
				buttonState(currentPosition);
			}, 6000);

		// Animate
		function rotate(){    
			var currentImg = $('img.show');
			var nextImg = currentImg.parent('a').next('a').children();
			if (currentImg.attr('id') == 'slide3') {nextImg = $('#slide1');}
			nextImg.css({opacity: 0.0})
			.addClass('show')
			.animate({opacity: 1.0}, 1000);
			
			//Hide the current image
			currentImg.animate({opacity: 0.0}, 1000)
			.removeClass('show');
			url = $('.show').parent('a').attr('href');
			$('#mask').parent('a').attr('href', url);
		  }
		
		// Determine new position of button bg position
		function buttonState(x){
			switch(x){
			  case 0:
				$("#one").css("background-position","0 -20px");
				$("#two, #three, #four").css("background-position","0 0");
				break;
			  case 1:
				$("#two").css("background-position","0 -20px");
				$("#one, #three, #four").css("background-position","0 0");
				break;
			  case 2:
				$("#three").css("background-position","0 -20px");
				$("#one, #two, #four").css("background-position","0 0");
				break;
			  // Add new case here for MORE IMAGES
			}
		}	

	});