/* -------------------------- */
/* Gallery Functions */
/* -------------------------- */
//create an array containing the values of the returned XML
var imageToShow = 0;
var colour = 1;
var prodId = 1;
var imagesArr = [];

//event listeners
function setUpEvents() {
	var nextBtn = document.getElementById('nextbtn');
	nextBtn.addEventListener('click', nextImage, false);
	var prevBtn = document.getElementById('prevbtn');
	prevBtn.addEventListener('click', prevImage, false);
}

window.onload = setUpEvents;

function getImages(prodId, colour) {
	var url = 'send.php?';
	nocache = Math.random();
	var query = 'action=images&product='+prodId+'&colour='+colour+'&nocache='+nocache;
	//alert(query);
	getImg.open("POST", url, true);
	getImg.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	getImg.setRequestHeader("Content-length", query.length);
	getImg.setRequestHeader("Connection", "close");
	getImg.onreadystatechange = loadImages;
	getImg.send(query);
	//document.getElementById('contactresponse').innerHTML = 'Loading, please wait...<br /><img src=\"images/loading.gif\" alt=\"Loading...\" />';
}
	
function loadImages() {
	var state = getImg.readyState;
	if(state == 4){
		var response = getImg.responseXML;
		var respTxt = getImg.responseText;
		//create array containing xml
		var items = response.getElementsByTagName('item');
		//clear previous array
		imagesArr = [];
		//loop through adding values
		for(i = 0; i < items.length; i++) {
			//create array containing thumb and image
			var thumb = getNodeValue(items[i], "thumb");
			var image = getNodeValue(items[i], "image")
			var imageArr = [];
			imageArr[0] = [thumb];
			imageArr[1] = [image];
			//insert array into main array
			imagesArr[i] = imageArr;
		}
		//run showImage function
		showImage();
		showThumbs();
	}else{
		//document.getElementById('contactresponse').innerHTML = 'Sending...<img src=\"images/loading.gif\" alt=\"Loading...\" />';
	}
}
function showImage(){
	//do some stuff
	//alert(imagesArr.length);
	document.getElementById('bigimg').src = imagesArr[imageToShow][1];
	var showing = imageToShow+1;
	document.getElementById('imagecount').innerHTML = 'Showing Image '+showing+' of '+imagesArr.length ;
}

function showThumbs () {
	var thumbCont = document.getElementById('thumbs');
	thumbCont.innerHTML = '';
	for(i = 0; i < imagesArr.length; i++) {
		thumbCont.innerHTML += '<img src="'+imagesArr[i][0]+'" alt="ChargeBox&reg;" onclick="javascript: imageToShow = '+i+'; showImage();" /> ';
	}
}

function nextImage() {
	if(imageToShow < imagesArr.length-1){ 
		//document.getElementById('bigimg').src = 'images/loading.gif';
		imageToShow++;
		//alert(imageToShow + '    ' +imagesArr.length);
		showImage();
	}
}

function prevImage() {
	if(imageToShow > 0){ 
		//document.getElementById('bigimg').src = 'images/loading.gif';
		imageToShow--;
		//alert(imageToShow + '    ' +imagesArr.length);
		showImage();
	}
}