// #################################################################################################
// Only edit the following variable ################################################################
// #################################################################################################

// please indicate the path to the image_gallery.php file
// e.g. if your file is located at "http://www.yoursite.com/files/php/image_gallery.php" insert "/files/php"

   var path = "image_gallery/image_gallery.php";


// don't change anything below this point, unless you know what you're doing...

// ##############
// XMLHttpRequest
// ##############

// ajax request to php file that outputs xml
var req;
function getData(directory) {

	// relative path of images directory
	var url = path + "/image_gallery.php?dir=" + directory;
	
	// make sure everything is cleaned up
	emptyDiv("mainImg");
	emptyDiv("failure");
	
  	// request
 	req = false;
    // native XMLHttpRequest object
    if(window.XMLHttpRequest) {
        try {
        	req = new XMLHttpRequest();
        } catch(e) {
        	req = false;
        }
    // 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;
            	}
          }
    }
	
	req.onreadystatechange = processReqChange;
	req.open("GET", url);
	req.send(null);
}


// checking state of request
function processReqChange() {
    if (req.readyState == 4) {
        if (req.status == 200) {
        	getImages();       
        } else {
            document.getElementById("failure").innerHTML = "Connection error...";
        	}
		}
	}


// ###############
// parsing the xml
// ###############

function getImages() {
	var xml = req.responseXML;
	
    // parse the xml and get the right tag
	images = xml.documentElement.getElementsByTagName("image");
	
	// non-existent or empty directory
	if(images.length == 0) {
		emptyDiv("mainImg");
		document.getElementById("controls").style.display = "none";
		document.getElementById("failure").innerHTML = "Directory not found or it has no images! Please check the path of your directory.";
		} else {
			document.getElementById("controls").style.display = "block";
			insertImages("mainImg", images[0].firstChild.nodeValue, images[0].getAttribute("h"), images[imgLoaded].getAttribute("w"));
		}
	}


// ######################
// some general functions
// ######################

var imgLoaded = 0;

// next and previous buttons
function changeImg(direction){
	imgLoaded += direction;
	if (imgLoaded < 0) {
		imgLoaded = images.length - 1;
	} else if (imgLoaded > images.length - 1) {
		imgLoaded = 0;
	}
	insertImages("mainImg", images[imgLoaded].firstChild.nodeValue, images[imgLoaded].getAttribute("h"), images[imgLoaded].getAttribute("w"));
}

// empty everything when a request has been reset
function emptyDiv(id)
{
    var node = document.getElementById(id);
	while (node.hasChildNodes())
	{ 
	  node.removeChild(node.firstChild);
	}  
}


// #################################################
// insert functions to display parsed content (html)
// #################################################

function insertImages(id, url, h, w) {
	emptyDiv("mainImg");
    var div = document.getElementById(id);
    var img = document.createElement("img");
    img.setAttribute("src", url);
    img.setAttribute("height", h);
    img.setAttribute("width", w);
    div.appendChild(img); 
}