document.addEventListener("DOMContentLoaded", init, false);
document.onkeydown = onKeyDown;
document.ontouchstart = onTouchStart;
document.ontouchend = onTouchEnd;
document.onmousedown = onMouseDown;
document.onmouseup = onMouseUp;

window.onpopstate = onPopState;

var sections = [];
var nav = [];
var centreSectionIndex = 0;
var start = 0;
var lastPosition = 0;

function init() {
	
	var sectionElements = document.getElementsByTagName("section");
	for (var section in sectionElements)
		if (sectionElements[section] instanceof HTMLElement)
			sections.push(sectionElements[section]);
	
	var navElements = document.getElementsByTagName("nav")[0];
	for (var i in navElements.childNodes) {
		if (navElements.childNodes[i] instanceof HTMLAnchorElement) {
			navElements.childNodes[i].addEventListener("click", navClick, false);
			nav.push(navElements.childNodes[i]);
		}
	}
	
	var parts = window.location.pathname.split("/");
	var page = "";
	for (var i = parts.length-1; i>=0; i--) {
		if ("" != parts[i]) {
			page = parts[i];
			break;
		}
	}
	var index = getSectionIndexByName(page);
	if (index > -1) {
		window.history.replaceState(sections[index].id, sections[index].id, sections[index].id);
		moveSections(index, false);
	} else {
		window.history.replaceState(sections[0].id, sections[0].id, ".");
	}
	
};

function getSectionIndexByName(name) {
	for (var section in sections)
		if (name === sections[section].id)
			return section;
	return -1;
}

function highlightNavItem(index) {
	if (nav.length > index) {
		for (var a in nav) {
			if (index == a) {
				nav[a].className = "selected";
			} else {
				nav[a].className = "";
			}
		}
	}
}

function navClick(e) {
	e.preventDefault();
	var sectionName = e.srcElement.innerText;
	var sectionIndex = getSectionIndexByName(sectionName);
	
	if (centreSectionIndex != sectionIndex)
		moveSections(sectionIndex, true);
}

function moveSections(sectionIndex, remember) {
	sectionIndex = parseInt(sectionIndex);
	if (sectionIndex < 0 || sectionIndex > sections.length-1) {
		return;
	}
	centreSectionIndex = sectionIndex;
	for (var section in sections) {
		var position = (section - centreSectionIndex) * 86;
		sections[section].style.left = position + "%";
		(section == centreSectionIndex) ?
			sections[section].style.opacity = "1"
				: sections[section].style.opacity = "0.2";
	}
	
	highlightNavItem(centreSectionIndex);
	
	if (remember && "home" === sections[centreSectionIndex].id) {
		window.history.pushState(sections[centreSectionIndex].id, sections[centreSectionIndex].id, ".");
	} else if (remember) {
		window.history.pushState(sections[centreSectionIndex].id, sections[centreSectionIndex].id, sections[centreSectionIndex].id);
	}
}

function onKeyDown(e) {
	switch(e.keyCode) {
		case 37: // left
			moveSections(centreSectionIndex-1, true);
			break;
		case 39: // right
			moveSections(centreSectionIndex+1, true);
			break;
	}
}

function onMouseDown(e) {
	start = e.offsetX;
}

function onMouseUp(e) {
	if (e.offsetX > (start + 20)) {
		moveSections(centreSectionIndex-1, true);
	} else if (e.offsetX < (start - 20)) {
		moveSections(centreSectionIndex+1, true);
	}
}

function onTouchStart(e) {
	start = e.touches[0].pageX;
	document.ontouchmove = onTouchMove;
}

function onTouchMove(e) {
	//e.preventDefault();
	lastPosition = e.touches[0].pageX;
}

function onTouchEnd(e) {
	if (lastPosition > (start + 100)) {
		moveSections(centreSectionIndex-1, true);
	} else if (lastPosition < (start - 20)) {
		moveSections(centreSectionIndex+1, true);
	}
}

function onPopState(e) {
	if (null !== e.state) {
		moveSections(getSectionIndexByName(e.state), false);
	}
}