var App = App || {};

App.projectHover = function () {
	$(document).ready(function () {
		// Project description - vertical center
		(function () {
			var descriptions = $(".projects figcaption div");

			descriptions.each(function (i, v) {
				var description = $(v),
					inner = null,
					height = null;

				description.wrapInner("<div />");
				inner = description.find("div");
				description.show();
				height = inner.height();
				description.hide();

				inner.css({
					paddingTop: (220 - height) / 2
				});
			});
		}());

		// Animate project description
		(function () {
			var items = $(".projects li");

			items.hover(function () {
				var item = $(this),
					description = item.find("figcaption > div");

				description
					.stop()
					.css({
						"opacity": 0
					})
					.show()
					.animate({
						left: "-16px",
						top: "-16px",
						paddingTop: "16px",
						paddingBottom: "15px",
						paddingLeft: "75px",
						paddingRight: "55px",
						opacity: 1
					}, {
						duration: App.config.projectHover.showTime
					});
			}, function () {
				var item = $(this),
					description = item.find("figcaption > div");

				description
					.stop()
					.animate({
						left: 0,
						top: 0,
						height: "217px",
						paddingTop: 0,
						paddingBottom: 0,
						paddingLeft: "49px",
						paddingRight: "39px",
						opacity: 0
					}, {
						duration: App.config.projectHover.hideTime,
						complete: function () {
							description.hide();
						}
					});
			});
		}());

		// Make whole project description clickable
		(function () {
			var descriptions = $(".projects figcaption > div a");
			descriptions.click(function (ev) {
				ev.preventDefault();
			});
		}());

		// Projects navigation
		(function () {
			var links = $(".projects-menu .prev, .projects-menu .next"),
				navHover = null;

			links.hover(function () {
				var text = $(this).hasClass("prev") ? "NEXT" : "PREVIOUS";
				
				if (!navHover) {
					navHover = $("<div />", {
						"class": "projects-menu-hover",
						html: "<span>" + text + "</span>"
					});
					navHover.appendTo("body");
					navHover
						.css({
							top: ($(this).closest(".projects-menu").offset().top - 38),
							left: ($(this).offset().left + $(this).width() - navHover.outerWidth())
						});
				}
			}, function () {
				navHover.remove();
				navHover = null;
			});
		}());
	});
};

App.project = (function () {
	var projectsWrapper = $(".projects-details"),
		projects = projectsWrapper.find("section"),
		currentProject = null,
		current = null,
		isBusyScrolling = false,
		isBusyControls = false,
		isBusyFading = 0,

		isBusy = function () {
			return (isBusyScrolling || isBusyControls || isBusyFading) ?
				true : false;
		},
		scroll = (function () {
			var scrollable = $("html, body").scrollable();
			return function () {
				var scrollTop = (projectsWrapper.position().top - 80);

				isBusyScrolling = true;

				scrollable
					.animate({
						scrollTop: scrollTop + "px"
					}, {
						duration: App.config.project.scrollTime,
						complete: function () {
							isBusyScrolling = false;
						}
					});
			}
		}()),
		controls = (function () {
			var menu = $(".projects-menu"),
				links = menu.find("a"),
				close = menu.find(".close"),
				linksWithoutClose = menu.find("a[class!=close]"),
				show = function (callback, type) {
					isBusyControls = true;
					menu.show();

					if (type === "about") {
						linksWithoutClose.hide();
					} else {
						linksWithoutClose.show();
					}

					linksWithoutClose.animate({
						bottom: 0
					}, {
						duration: App.config.project.controlsInTime
					});
					close.animate({
						bottom: 0
					}, {
						duration: App.config.project.controlsInTime,
						complete: function () {
							isBusyControls = false;
							if ($.isFunction(callback)) {
								callback();
							}
						}
					});
				},
				hide = function (callback) {
					isBusyControls = true;
					
					linksWithoutClose.animate({
						bottom: "-32px"
					}, {
						duration: App.config.project.controlsOutTime
					});
					close.animate({
						bottom: "-32px"
					}, {
						duration: App.config.project.controlsOutTime,
						complete: function () {
							isBusyControls = false;
							menu.hide();
							if ($.isFunction(callback)) {
								callback();
							}
						}
					});
				};

			menu.hide();
			return {
				show: show,
				hide: hide
			};
		}()),
		show = function (config) {
			if (isBusy()) {
				return;
			}
			var nextProject = config.project;

			if (nextProject.hasClass("active")) {
				return;
			} 

			isBusyFading = 2;
			if (currentProject) {
				currentProject
					.removeClass("active")
					.fadeOut(App.config.project.fadeOutTime, function () {
						$(this).hide();
					});
			} else {
				projectsWrapper
					.show();
			}
			projectsWrapper
				.css({
					paddingTop: "50px",
					paddingBottom: "50px"
				});

			currentProject = nextProject;
			currentProject.addClass("active");

			App.lazyLoad.show(nextProject.find("img"));

			nextProject
				.delay(App.config.project.fadeDelay)
				.fadeIn(App.config.project.fadeInTime, function () {
					isBusyFading--;
				});

			projectsWrapper
				.css({
					paddingTop: "50px",
					paddingBottom: "50px"
				})
				.animate({
					height: nextProject.outerHeight()
				}, {
					duration: App.config.project.fadeInTime,
					complete: function () {
						isBusyFading--;
						controls.show($.noop, config.type);
					}
				});

			controls.hide(function () {
				scroll();
			});
		},
		hide = function () {
			if (isBusy()) {
				return;
			}

			if (!currentProject) {
				return;
			}

			isBusyFading = true;
			currentProject.fadeOut(App.config.project.fadeOutTime);
			controls.hide(function () {
				projectsWrapper
					.delay(App.config.project.fadeDelay)
					.animate({
						padding: 0,
						height: 0
					}, {
						duration: App.config.project.scrollTime,
						complete: function () {
							if (currentProject) {
								currentProject.removeClass("active");
							}
							current = currentProject = null;
							isBusyFading = false;
						}
					});
			});
		},
		navigation = function () {
			var projects = $(".projects li"),
				menu = $(".projects-menu"),
				prev = menu.find(".next"),
				next = menu.find(".prev"),
				close = menu.find(".close"),
				count = projects.length;

				prev.click(function (ev) {
					ev.preventDefault();
					if (isBusy()) {
						return;
					}
					var projectIndex = (current === 0) ? (count - 1) : (current - 1);
					projects.eq(projectIndex).find("a").trigger("click");
				});
				next.click(function (ev) {
					ev.preventDefault();
					if (isBusy()) {
						return;
					}
					var projectIndex = (current === count - 1) ? 0 : (current + 1);
					projects.eq(projectIndex).find("a").trigger("click");
				});
				close.click(function (ev) {
					ev.preventDefault();
					if (isBusy()) {
						return;
					}
					hide();
				});
				$(".about .more, .main-menu li:first-child a").click(function (ev) {
					ev.preventDefault();
					if (isBusy()) {
						return;
					}

					var project = -1,
						href = $(this).attr("href");

					if (project !== current) {
						current = -1;
						show({
							type: "about",
							project: $(href)
						});
					}
					
				});
				
				$(".projects figure").click(function (ev) {
					ev.preventDefault();

					if (isBusy()) {
						return;
					}

					var project = $(this).closest("li").index(),
						href = $(this).find("a").attr("href");

					if (project !== current) {
						current = project;
						show({
							project: $(href)
						});
					}
				});
			};

	return {
		show: show,
		hide: hide,
		navigation: navigation
	};
}());

App.lazyLoad = (function () {
	return {
		hide: function (set) {
			var i, length,
				img;

			for (i = 0, length = set.length; i < length; i++) {
				img = set.eq(i);
				img.data({
					"loaded": false,
					"src": img.attr("src")
				});
				img.attr("src", "images/placeholder.png");
			}
		},
		show: function (set) {
			var i, length,
				img;
				
			for (i = 0, length = set.length; i < length; i++) {
				img = set.eq(i);
				if (img.data("src")) {
					img.attr("src", img.data("src"));
					img.data("src", null);
				}
			}
		}
	};
}());

$(document).ready(function () {
	App.projectHover();
	App.project.navigation();

	var scrollTo = (function () {
		var scrollable = $("html, body").scrollable();
		return function (to) {
			scrollable
				.animate({
					scrollTop: to
				}, {
					duration: App.config.project.scrollTime
				});
		}
	})();

	$(".social .top").click(function (ev) {
		ev.preventDefault();
		scrollTo(0);
	});
	$(".main-menu li:last-child a").click(function (ev) {
		ev.preventDefault();
		scrollTo($(".social").position().top);
	})
	$(".main-menu li:nth-child(2n+2) a").click(function (ev) {
		ev.preventDefault();
		$(".projects > ul li:first-child a").trigger("click");
	});
});