var currElem;

// Initialize
$(function () {
	init();
});

// Previous/Next Buttons, Start the Case
function init() {
	$(".prevBtn").click(function() {
		currElem = $(".current");
		if (currElem.children().is(':animated')) {
			var y = $(currElem).children(".before").height();
			var topPosition = (y*.5) + 10;
			currElem
				.children()
				.clearQueue()
				.stop(true,false)
				.hide()
				.css({
					display: "none",
					left: "110px",
					top: topPosition,
					opacity: 1
				});
			$(".before span").remove();
			$(".after span").remove();
		}
		endCase(currElem,function() {
			startCase($(currElem).prev());
		});
		return false;
	});
	$(".nextBtn").click(function() {
		currElem = $(".current");
		if (currElem.children().is(':animated')) {
			var y = $(currElem).children(".before").height();
			var topPosition = (y*.5) + 10;
			currElem
				.children()
				.clearQueue()
				.stop(true,false)
				.hide()
				.css({
					display: "none",
					left: "110px",
					top: topPosition,
					opacity: 1
				});
			$(".before span").remove();
			$(".after span").remove();
		}
		endCase(currElem,function() {
			startCase($(currElem).next());
		});
		return false;
	});
	startCase();
}

function startCase(elem) {
	if(!elem) {
		elem = $(".gallery:first");
	}
	if($(elem).hasClass("last")){
		elem = $(".gallery:first");		
	}
	
	$(elem)
		.addClass("current")
		.show();
	
	var pictureCount = $(elem).children("li").size();


	// Check to see if it's the first or last case	
	var nextElem = $(elem).next().attr("class");
	
	if ($(elem).next().hasClass("gallery")) {
		$(".nextBtn").show();
	} else {
		$(".nextBtn").hide();
	}
	var prevElem = $(elem).prev().attr("class");
	if ($(elem).prev().hasClass("gallery")) {
		$(".prevBtn").show();
	} else {
		$(".prevBtn").hide();
	}

	var before=$(elem).children('.before');
	var after=$(elem).children('.after');
	var faceBefore=$(elem).children('.face-before');
	var faceAfter=$(elem).children('.face-after');
	
	// Add Before/After text
	if (!($(elem).hasClass("no-case"))) { 
		$(before).append('<span>Before</span>');
		$(after).append('<span>After</span>');
		$(faceBefore).append('<span>Before</span>');
		$(faceAfter).append('<span>After</span>');
	}
	
	var description = $(before).children("img").attr("title");
	$(".current").after('<p class="description">' + description + '</p>');
	
	var caseTitle = $(before).children("img").attr("alt");
	$(".current").before('<h2 class="case-title">' + caseTitle + '</h2>');
	
	// Measure image height to determine total gallery height and positioning
	var ulHeight;
	before.addClass("offScreen");
	faceAfter.addClass("offScreen");
	var y = before.children("img").attr("height");
	before.removeClass("offScreen");
	faceAfter.removeClass("offScreen");
	if(before.children("img").attr("height") > y) {
		y = before.children("img").attr("height");
	}
	
	if (pictureCount == 2) {
		ulHeight = (y*2) + 20;
	} else if (pictureCount == 3) {
		var faceHeight = $(elem).children(".face-after").children("img").attr("height");
		var closeupsHeight = (y * 2) + 20;
		if (faceHeight > closeupsHeight) {
			ulHeight = faceHeight + 20;
		} else {
			ulHeight = closeupsHeight + 30;
		}
	} else if (pictureCount == 4) {
		var faceHeight = $(elem).children(".face-after").find("img").attr("height");
		var closeupsHeight = (y * 2) + 20;
		ulHeight = (faceHeight * 1.25) + closeupsHeight;
	}
	var topPosition;
	if (pictureCount < 4 ) {
		topPosition = (ulHeight - y)/2;
	} else {
		topPosition = (((y * 2) + 20) - y)/2;
		var topFacePosition = (((y * 1.4) + 80) - y)/2;
	}
	var sectionWidth = $(".current").parent().width();
	var beforeWidth = before.children("img").attr("width");
	var leftPosition = (sectionWidth - beforeWidth)/2;
	
	$(".current").css({
		height: ulHeight+'px'
	});
	$(".before").css({
		top: topPosition+'px',
		left: leftPosition+'px'
	});
	$(".after").css({
		top: topPosition+'px',
		left: leftPosition+'px'
	});
	$(".face-before").css({
		top: topFacePosition+'px',
		left: leftPosition+'px'
	});
	$(".face-after").css({
		top: topFacePosition+'px',
		left: leftPosition+'px'
	});
	
	// Begin Animation
	before.fadeIn(500, function() {
		after.delay(1200).fadeIn(500, function() {
			if (pictureCount < 4) {
				startMove(elem);
			} else {
				before.fadeOut(500);
				after.delay(1350).fadeOut(500, function() {
				faceBefore.fadeIn(500, function() {
					faceAfter.delay(1200).fadeIn(500, function () {
						startMove(elem);
						
					});
				});
				});
				
			}
		});
	});
}
function endCase(elem,callback) {
	$(elem)
		.removeClass("current")
		.hide()
		.children()
			.clearQueue()
			.stop(true,false)
			.hide()
			.css({
				height: "auto",
				display: "none",
				left: "110px",
				top: "0"
			});
	$(".description").remove();
	$(".case-title").remove();
	$(".gallery li span").remove();
	$(".gallery li span").remove();
	var initCallback = callback();
}
function startMove(elem) {
	// Dynamically calculate final positions
	var pictureCount = $(elem).children("li").size();
	var y = $(elem).children().find("img").attr("height");
	var x = $(elem).children(".before").find("img").attr("width");
	var sectionWidth = $(elem).parent().width();
	if (pictureCount == 2) {
		/*y = 0;*/y = y * .25;
		/*x = x * .6;*/x = x * .4;
	} else if (pictureCount == 3) {
		var faceWidth = $(".face-after").children("img").attr("width");
		var caseWidth = faceWidth + x + 20;
		var caseFinalLeftPosition = (sectionWidth - caseWidth)/2;
		var beforeWidth = $(".before").children("img").attr("width");
		var currentLeftPosition = (sectionWidth - beforeWidth)/2;
		var finalCloseupX = (caseFinalLeftPosition + faceWidth + 20) - currentLeftPosition;
		y = (y/2) + 10;
		x = finalCloseupX;
		ulHeight = $(elem).height();
		faceHeight = $(".face-after").children("img").attr("height");
		faceTopPosition = (ulHeight - faceHeight)/2;
		$(elem).children(".face-after").css({
			top: faceTopPosition+"px",
			left: caseFinalLeftPosition+"px"
		});
	} else if (pictureCount == 4) {
		var faceHeight = $(elem).children(".face-before").find("img").attr("height");
		var closeupHeight = $(elem).children(".before").find("img").attr("height");
		var yF = faceHeight * .167;
		topPosition = (((y * 2) + 20) - y)/2;
		y = y * .25;
		var offset = ((closeupHeight * 1.1)/2) + (faceHeight * 1.34) + 20;
		beforeCloseupY = offset - y;
		afterCloseupY = offset + y;
		x = x * .4;
		$(elem).children('.before').animate({ top: '0px' });
		$(elem).children('.after').animate({ top: '0px' });
		$(elem).children('.before').animate({
			top: "+="+offset
		}, function() {
			$(elem).children('.before').removeClass("offScreen");
			});
		$(elem).children('.after').animate({
			top: "+="+offset
		}, function() {
			$(elem).children('.after').removeClass("offScreen");
			});
	}
	var yBefore;
	var yAfter;
	var xBefore;
	if (pictureCount == 2) {
		yBefore = "-="+y;
		yAfter = "+="+y;
		xBefore = "-="+x;
	} else if (pictureCount == 3) {
		yBefore = "-="+y;
		yAfter = "+="+y;
		xBefore = "+="+x;	
	} else if (pictureCount == 4) {
		yBefore = "-="+y;
		yAfter = "+="+y;
		xBefore = "-="+x;
		var yFaceBefore = "-="+yF;
		var yFaceAfter = "+="+yF;
	}
	var xAfter = "+="+x;

	
	moveElemTo($(".current").children('.before'), xBefore, yBefore);
	moveElemTo($(".current").children('.after'), xAfter, yAfter);
	if (pictureCount == 3) {
		$(elem).children(".face-after").delay(2000).fadeIn(500);
	}
	if (pictureCount == 4) {
		moveElemTo($(".current").children('.face-before'), xBefore, yFaceBefore);
		moveElemTo($(".current").children('.face-after'), xAfter, yFaceAfter);
	}
}
function moveElemTo(elem, x, y) {
	$(elem)
		.delay(1200)
		.fadeIn("slow")
		.animate({
			top: y,
			left: x
	}, 1200, function() {
		var beforeAfterText=$(elem).children('li span');
		beforeAfterText.fadeIn(500);
	});
}