window.onload = function() {
	centre();
	if (document.getElementById('work').firstChild.className == 'active') {
		loadXMLDoc('xml/content.xml');
	}
}

window.onresize = function() {
	centre();
}

function centre() {
	db = document.getElementsByTagName('body')[0];
	if (!document.all) {
		marginValue = (window.innerHeight - document.getElementById('container').offsetHeight) /2;
	}
	else {
		marginValue = (document.documentElement.clientHeight - document.getElementById('container').offsetHeight) /2;
	}
	db.style.paddingTop = marginValue +'px';
	document.getElementById('container').style.visibility = 'visible';
}

var req;

function loadXMLDoc(url) {
	req = false;
    // branch for native XMLHttpRequest object
    if(window.XMLHttpRequest && !(window.ActiveXObject)) {
    	try {
			req = new XMLHttpRequest();
        } catch(e) {
			req = false;
        }
    // branch for IE/Windows ActiveX version
    } else if(window.ActiveXObject) {
       	try {
        	req = new ActiveXObject("Msxml2.XMLHTTP");
      	} catch(e) {
        	try {
          		req = new ActiveXObject("Microsoft.XMLHTTP");
        	} catch(e) {
          		req = false;
        	}
		}
    }
	if(req) {
		req.onreadystatechange = processReqChange;
		req.open("GET", url, true);
		req.send("");
	}
}

var x = new Array();
var curr = 0;

function processReqChange() {
    // only if req shows "loaded"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
			parseContent(req.responseXML);
        } else {
            alert("There was a problem retrieving the XML data:\n" +
                req.statusText);
        }
    }
}

function parseContent(xml) {
	projects = xml.getElementsByTagName('project');
	for (i=0;i<projects.length;i++) {
		x[i] = new Array();
		x[i]['name'] = projects[i].getElementsByTagName('name')[0].firstChild.nodeValue;
		x[i]['image'] = new Image();
		x[i]['image'].src = projects[i].getElementsByTagName('image')[0].firstChild.nodeValue;
		x[i]['w'] = projects[i].getElementsByTagName('image')[0].attributes.getNamedItem('width').value;
		x[i]['h'] = projects[i].getElementsByTagName('image')[0].attributes.getNamedItem('height').value;
		x[i]['info'] = projects[i].getElementsByTagName('info')[0].firstChild.nodeValue;
	}
	navigate(0);
}

function navigate(currentIndex) {
	if ((currentIndex+1) == x.length) {
		document.getElementById('arrowright').className = 'arrow inactive';
	}
	else {
		document.getElementById('arrowright').className = 'arrow';
	}
	if (currentIndex == 0) {
		document.getElementById('arrowleft').className = 'arrow inactive';
	}
	else {
		document.getElementById('arrowleft').className = 'arrow';
	}
	document.getElementById('projectimage').style.visibility = 'hidden';
	document.getElementById('projectimage').style.width = parseInt(x[currentIndex]['w']) +'px';
	document.getElementById('projectimage').style.height = parseInt(x[currentIndex]['h']) +'px';
	document.getElementById('projecttitle').innerHTML = x[currentIndex]['info'];
	document.getElementById('projectimage').setAttribute('alt',x[currentIndex]['name']);
	document.getElementById('projectcontainer').style.width = parseInt(x[currentIndex]['w']) +'px';
	document.getElementById('projectcontainer').style.height = (parseInt(x[currentIndex]['h']) + 20) +'px';
//	alert(Math.round(212 - (parseInt(x[currentIndex]['w']) /2)));
	document.getElementById('projectcontainer').style.marginLeft = Math.round(212 - (parseInt(x[currentIndex]['w']) /2)) +'px';
	document.getElementById('projectcontainer').style.marginRight = Math.round(212 - (parseInt(x[currentIndex]['w']) /2)) +'px';
	document.getElementById('projectimage').src = x[currentIndex]['image'].src;
	document.getElementById('projectcontainer').style.marginTop = Math.round((220 - ((parseInt(x[currentIndex]['h']) + 20) / 2) -10)) + 'px';
	document.getElementById('projectimage').style.visibility = 'visible';
	return false;
}

function navBack() {
	document.getElementById('arrowleft').blur();
	if (curr == 0) {
		return false;
	}
	else {
		curr--;
		return navigate(curr);
	}
}

function navFwd() {
	document.getElementById('arrowright').blur();
	if ((curr+1) == x.length) {
		return false;
	}
	else {
		curr++;
		return navigate(curr);
	}
}

function validateForm(formObj) { // Hello, I'll be your form validating script today.
var formElements = formObj.elements;

// Now I'll set a bunch of boolean variables that will help us validate your form.
var canSubmit = true; // This will ultimately decide if the form gets submitted or not, and is dependant on the other vars to do so.
var emailValid = true; // This checks if the user's email address is valid (string@string.string).
var fieldsComplete = true; // This checks that all the required text fields are not blank.
var anyChecked = true; // This makes sure all required checkbox/radio box arrays are valid.

// These arrays are used to validate the check/radio boxes.
var rcBoxes = new Array();
rcBoxes[0] = new Array();
rcBoxes[1] = new Array();
var rcArrays = new Array();
rcArrays[0] = new Array;
rcArrays[1] = new Array;

// Getting down to business now, we'll loop through all the elements of your form
for (i=0;i<formElements.length;i++) {
// We'll start with the text fields - making sure all the required ones are not blank.
	if (formElements[i].type == 'text' ||  formElements[i].type == 'textarea') {
		if (formElements[i].name.substring((formElements[i].name.length -4),(formElements[i].name.length)) == '_req' && (formElements[i].value == '' || formElements[i].value == 'undefined')) {
		formElements[i].className += ' highlight'; // Highlights a required field left blank.
		fieldsComplete = false;
			}
// Now we'll check if the user has provided you with a valid email address...
		if (formElements[i].name == 'email_req') {
			if (formElements[i].value.search('.+@.+\\.[A-Za-z]+') < 0) {
				formElements[i].className += ' highlight'; // Highlights the email field if blank or invalid.
				emailValid = false;
				}
			else { // Removes the highlight if email is valid.
				formElements[i].className = formElements[i].className.replace(' highlight','');
				}
			}
		else if (formElements[i].name.substring((formElements[i].name.length -4),(formElements[i].name.length)) == '_req' && formElements[i].value != '') {
			// Removes the highlight if fields are properly filled.
			formElements[i].className = formElements[i].className.replace(' highlight','');
			}
		}

// Finally, we go through the checkboxes and radio boxes, making sure each array of required check/radio boxes has at least one element checked.
	else if (formElements[i].type == 'radio' || formElements[i].type == 'checkbox') {
		if (formElements[i].name.substring((formElements[i].name.length -4),(formElements[i].name.length)) == '_req') {
			// Adds all checkboxes to an array which we'll be looping through later.
			rcBoxes[0].push(formElements[i].name);
			rcBoxes[1].push(formElements[i].checked);
			}
		}
	}

// After loading all the check/radio boxes into a separate array, we go through them again.
if (rcBoxes[0].length > 0) {
	for (i=0;i<rcBoxes[0].length;i++) {
		// The first thing we'll do is separate them into little arrays where they have a common name attribute.
		targetCheck = formObj[rcBoxes[0][i]];
		i += targetCheck.length;
		// Then we'll loop through that array.
		for (j=0;j<targetCheck.length;j++) {
			if (targetCheck[j].checked) {
				// If we find a checked box within a required array, add the element's name to rcArrays[0] and add true to rcArrays[1].
				rcArrays[1].push(true);
				rcArrays[0].push(targetCheck[j].name);
				// That's all we need, so we can break out of the loop.
				break;
				}
			else if (j == (targetCheck.length -1)) {
				// If nothing is checked, we only add the name of the element to rcArrays[0].
				rcArrays[0].push(targetCheck[j].name);
				}
			}
		}
	// So, with all the info we gathered up there, we'll check the length of rcArrays[0] against rcArrays[1].
	// If all the required check/radio arrays have at least one box checked, they're valid and the lengths should match.
	if (rcArrays[0].length != rcArrays[1].length) {
		// If the lengths of rcArrays[0] and rcArrays[1] don't match, it means something that should've been checked was left unchecked.
		anyChecked = false;
		}
	}

// Remember our boolean vars? This is where we check them and give the user an appropriate response.
if (!fieldsComplete || !anyChecked) {
	// This message will display if a required textfield was left blank or a checkbox was left un-checked.
	alert('Please fill out all required fields before submitting this form!');
	canSubmit = false; // Don't let the form submit.
	}
else if (!emailValid) {
	// This message will display if the user didn't enter a valid email address.
	alert('Please enter a valid email address in the highlighted field!');
	canSubmit = false; // Don't let the form submit.
	}
if (fieldsComplete && emailValid && anyChecked) {
	// If everything has been properly filled and a valid email address has been entered, the form can submit!
	canSubmit = true;
	}
return canSubmit;
}