//DOM Core
function emptyElement(target) {
	while (target.hasChildNodes()) {
		target.removeChild(target.firstChild);
	} //end target.hasChildNodes() WHILE
} //end emptyElement

//Navigation
function swapImage(object,replacement) {
	if (object.nodeName.toLowerCase() == "a") {
		var target = object.getElementsByTagName("img")[0];
	} else {
		var target = object;
	} //end object.nodeName
	
	if (replacement) {
		target.setAttribute("oldsrc",target.src);
		target.src = replacement;
	} else {
		target.src = target.getAttribute("oldsrc");
	} //end replacement IF
} //end swapImage

//Portfolio
var currentSlide = 1;
var totalSlides = 0;
var currentScreenshot = 1;
var totalScreenshots = 0;

function countSlides() {
	var tds = document.getElementById("slider").getElementsByTagName("td");
	for (i = 0; i < tds.length; i++) {
		if (tds[i].getAttribute("class") == "slider_cell" || tds[i].getAttribute("className") == "slider_cell") {
			totalSlides++;
		} //end tds[i].getAttribute("class") == "slider_cell" || tds[i].getAttribute("className") == "slider_cell" IF
	} //end i = 0; i < tds.length; i++ FOR
} //end countSlides

function changeSlide(to) {
	currentSlide = to;
	var newLeft = ((to - 1) * -692) + "px";
	$("#slider").animate({
		left: newLeft
	}, 500);
} //end changeSlide
function previousSlide() {
	if (currentSlide > 1) {
		currentSlide--;
	
		changeSlide(currentSlide);
	} //end currentSlide > 1 IF
} //end previousSlide
function nextSlide() {
	if (currentSlide < totalSlides) {
		currentSlide++;
		
		changeSlide(currentSlide);
	} //end currentSlide < totalSlides IF
} //end nextSlide

function changeScreenshot(object) {
	var to = object.getAttribute("number");
	
	var newLeft = ((to - 1) * -700) + "px";
	$("#screenshots").animate({
		left: newLeft
	}, 500);	
	
	var controls = document.getElementById("screenshot_control").getElementsByTagName("img");
	for (i = 0; i < controls.length; i++) {
		if (controls[i].getAttribute("number") == to) 	{
			controls[i].setAttribute("src","/images/dot_filled.png")
		} else {
			controls[i].setAttribute("src","/images/dot.png")	
		} //end controls[i].getAttribute("number") == to IF
	} //end i = 0; i < controls.length; i++ FOR
} //end changeScreenshot

function changeScreenshotTo(to) {
	currentScreenshot = to;
	var newLeft = ((to - 1) * -700) + "px";
	$("#screenshots").animate({
		left: newLeft
	}, 500);
} //end changeScreenshotTo
function previousScreenshot() {
	if (currentScreenshot > 1) {
		currentScreenshot--;
	
		changeScreenshotTo(currentScreenshot);
	} //end currentScreenshot > 1 IF
} //end previousScreenshot
function nextScreenshot() {
	if (currentScreenshot < totalScreenshots) {
		currentScreenshot++;
		
		changeScreenshotTo(currentScreenshot);
	} //end currentScreenshot < totalScreenshot IF
} //end nextScreenshot

//Gesture events for touch devices
var startX = 0;
var endX = -1;
var direction = null;

function touchStart(e) {
	//e.preventDefault();

	//Store the starting X coordinate of this touch
	startX = parseInt(e.targetTouches[0].clientX);
	
	//console.log("touch started. startX = "+startX);
} //end touchStart
function touchMove(e) {
	endX = parseInt(e.targetTouches[0].clientX);
} //end touchMove
function touchEnd(e) {
	//console.log("touch ended. endX = "+endX);
	//Determine the transition direction
	if (endX != -1 && endX < (startX-30)) { //Eastbound swipe
		direction = "right";
	} else if (endX != -1 && endX > (startX+30)) { //Westbound swipe
		direction = "left";
	} //end (endX != -1 && endX < (startX-30)) || (endX != -1 && endX > (startX+30)) IFs
	
	//Determine the target element
	//console.log("target: "+e.target.getAttribute("rel"));
	//Perform the transition
	switch (e.target.getAttribute("rel")) {
		case "screenshot":
			if (direction == "right") {
				nextScreenshot();
			} else if (direction == "left") {
				previousScreenshot();
			} //end direction == "right" || direction == "left" IFs
		break;
		case "thumbnail":
			if (direction == "right") {
				nextSlide();
			} else if (direction == "left") {
				previousSlide();
			} //end direction == "right" || direction == "left" IFs
		break;
	} //end e.target.rel SWITCH
	
	//Set endX to a value that cannot be achieved by the user since there is no touchmove recorded for taps after a swipe
	endX = -1;
	direction = null;
} //end touchEnd

function loadProject(id) {
	var http = new HttpClient("GET",true,false,"text");
	http.callback = function(response) {
		var target = document.getElementById("left_content");
		emptyElement(target);
		
		//Parse JSON
		var data = eval("("+response+")");
		if (data.error) {
			var p = document.createElement("p");
			p.setAttribute("class","error");
			p.setAttribute("className","error");
			p.appendChild(document.createTextNode(data.error));
			target.appendChild(p);
		} else {
			//Display project details
			var h3 = document.createElement("h3");
			h3.appendChild(document.createTextNode(data.title));
			target.appendChild(h3);
			
			var p = document.createElement("p");
			p.appendChild(document.createTextNode(data.dates));
			target.appendChild(p);
			
			var div = document.createElement("div");
			div.innerHTML = data.details;
			target.appendChild(div);
			
			var p = document.createElement("p");
			var strong = document.createElement("strong");
			strong.appendChild(document.createTextNode("Technologies Used:"));
			p.appendChild(strong);
			p.appendChild(document.createElement("br"));
			p.appendChild(document.createTextNode(data.tech));
			target.appendChild(p);
			
			if (data.link) {
				var p = document.createElement("p");
				var a = document.createElement("a");
				a.setAttribute("href",data.link);
				a.setAttribute("target","_blank");
				a.appendChild(document.createTextNode(data.link));
				p.appendChild(a);
				target.appendChild(p);
			} //end data.link IF
			
			//Populate screenshots
			var screenshot_target = document.getElementById("screenshots").getElementsByTagName("tr")[0];
			emptyElement(screenshot_target);
			
			var screenshot_controller = document.getElementById("screenshot_control");
			emptyElement(screenshot_controller);
			
			totalScreenshots = data.screenshots.length;
			
			for (i = 1; i <= data.screenshots.length; i++) {
				var td = document.createElement("td");
				var img = document.createElement("img");
				img.setAttribute("src","/screenshots/" + data.screenshots[(i - 1)].file);
				img.setAttribute("border","0");
				img.setAttribute("rel","screenshot");
				td.appendChild(img);
				screenshot_target.appendChild(td);

				var dot = document.createElement("img");
				dot.setAttribute("number",i);
				dot.setAttribute("src","/images/dot" + (i == 1 ? "_filled" : "") + ".png");
				dot.setAttribute("class","pointer");
				dot.setAttribute("className","pointer");
				if (isIE) {
					dot.setAttribute("onmouseover",function(){swapImage(this,"/images/dot_over.png");});
					dot.setAttribute("onmouseout",function(){swapImage(this);});
					dot.setAttribute("onclick",function(){changeScreenshot(this);});
				} else {
					dot.setAttribute("onmouseover","swapImage(this,'/images/dot_over.png');");
					dot.setAttribute("onmouseout","swapImage(this);");
					dot.setAttribute("onclick","changeScreenshot(this);");
				} //end isIE IF
				screenshot_controller.appendChild(dot);
				screenshot_controller.appendChild(document.createTextNode(" "));
			} //end i = 0; i < data.screenshots.length; i++

			//Reset position
			$("#screenshots").animate({
				left: "0px"
			}, 500);
		} //end data.error IF
	}
	http.makeRequest("/ajax/project_details.php?id="+id,null);
} //end loadProject