//globals voor de projecten scroller
var currentProject;
var maxId;
var minId;

function xmlhttpObjectMaken(){
	var xmlhttp;
	if (window.XMLHttpRequest){
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}
	else{
		// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xmlhttp;
}

function setFieldValue(iId, iValue){
	if(document.getElementById(iId).value === ''){
		document.getElementById(iId).value = iValue;
	}
	else if(document.getElementById(iId).value === 'type bovenstaande code over'){
		document.getElementById(iId).value = '';
	}
}
function scrollProjects(direction, step){
	//document.getElementById('portfolio').innerHTML = "<img id='loadingIcon' src='images/loading.gif' alt='loading BB Webdevelopmentprojects' />";
	//kijken waar we nu staan (global variable currentProject => eerste project uit huidige lijst)
	//richting bepalen (direction = input variable)
	//afstand bepalen (step = input variable)

	//ajax bestand aanroepen en vragen om de 3 projecten die geladen moeten worden
	var oVars = "currentId=" + currentProject + "&direction=" + direction + "&step=" + step;
	xmlhttp = xmlhttpObjectMaken();
	reqUrl = "ajax/getProjects.php" + "?" + Math.random() + "=0&" + oVars;

	xmlhttp.open("GET", reqUrl, false);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlhttp.send();
	response = xmlhttp.responseXML;

	//hier de gegevens ophalen uit response (XML)
	var projecten = response.getElementsByTagName('projecten')[0].getElementsByTagName('project');
	var output = '';
	
	for(var i = 0; i < 3; i++){
		var projectId = projecten[i].getAttribute('id');

		if(i === 0){
			//global currentProject instellen op huidige eerste project
			currentProject = projectId;
		}

		var projectImage = projecten[i].getElementsByTagName('image')[0].childNodes[0].nodeValue;
		var projectExcerpt = projecten[i].getElementsByTagName('excerpt')[0].childNodes[0].nodeValue;
		var projectUrl = projecten[i].getElementsByTagName('url')[0].childNodes[0].nodeValue;
		//alert(projectId + "\n" + projectExcerpt + "\n" + projectImage + "\n" + projectUrl);

		output = output + "<li class=\"project\">\n";
			output = output + "\t<span class=\"projectImage\" style=\"background-image: url('projects/thumb/" + projectImage + "');\"";
			output = output + " onclick=\"openProject(" + projectId + ")\">&nbsp;</span>\n";
			output = output + "\t<span class=\"projectExcerpt\" onclick=\"openProject(" + projectId + ")\">" + projectExcerpt + "</span>\n";
			output = output + "\t<span class=\"projectLink\">";
				output = output + "\t\t<a href=\"http://" + projectUrl + "\" class=\"link\"><img src=\"images/link.png\" alt=\"BB Webdevelopment Link Icon\" /></a>\n";
				output = output + "\t\t<a href=\"http://" + projectUrl + "\" class=\"link\">" + projectUrl + "</a>\n";
			output = output + "\t</span>\n";
		output = output + "</li>";
	}
	
	//UL #portfolio vullen met de output
	document.getElementById('portfolio').innerHTML = output;
	
	//checken of er knoppen gedisabled moeten worden
	if(currentProject == maxId){
		document.getElementById('previous').src = "images/previous.png";
		document.getElementById('previous').className = "button inactive";
		document.getElementById('previous').onclick = '';


		document.getElementById('next').src = "images/nextOver.png";
		document.getElementById('next').className = "button active";
 		document.getElementById('next').onclick = function(){scrollProjects('next',3);};

	}
	else if(currentProject == minId){
		document.getElementById('next').src = "images/next.png";
		document.getElementById('next').className = "button inactive";
		document.getElementById('next').onclick = '';
		
		document.getElementById('previous').src = "images/previousOver.png";
		document.getElementById('previous').className = "button active";
 		document.getElementById('previous').onclick = function(){scrollProjects('previous',3);};
	}
	else{
		document.getElementById('next').src = "images/nextOver.png";
		document.getElementById('next').className = "button active";
 		document.getElementById('next').onclick = function(){scrollProjects('next',3);};

		document.getElementById('previous').src = "images/previousOver.png";
		document.getElementById('previous').className = "button active";
 		document.getElementById('previous').onclick = function(){scrollProjects('previous',3);};
	}
	
}