var ajaxObj = false;


function showDemo(index) {	
	var params = "index=" + index;
	var strResults = "";
	var strResultsSplit = new Array();
	var strCaption;
	var strImageSrc;
	var divContents;
	var indexBack = 0;
	var indexNext = 0;
	var backLink;
	var nextLink;
	var flashCode;
	// the index will determine which level to show	 (it refers to the sort order in the database)			
	// submit an ajax call to the database and return the caption
	if(navigator.appName == "Microsoft Internet Explorer") {
		ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");

	} else {
		ajaxObj = new XMLHttpRequest();
	
	} 
	
	ajaxObj.open("POST", "_includes/demoCaption.aspx", true);
	ajaxObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	ajaxObj.setRequestHeader("Content-length", params.length);
	ajaxObj.setRequestHeader("Connection", "close");
  	// send the params
  	
	
	ajaxObj.onreadystatechange=function() {
    	if(ajaxObj.readyState == 4 && ajaxObj.status == 200) {
			if (index != 0) {
				// self guided
					strResults = ajaxObj.responseText;
				//alert(ajaxObj.responseText);
				// split the results
				strResultsSplit = strResults.split("|");
				
				// assign the data to their specific variables
				strItemTitle = strResultsSplit[0];
				strCaption = strResultsSplit[1];
				strImageSrc = strResultsSplit[2];
				
				// calculate the index links
				indexBack = index-1
				indexNext = index+1
				
				backLink = "<a href=\"javascript:showDemo(" + indexBack + ");\"><< Back</a>";
				nextLink = "<a href=\"javascript:showDemo(" + indexNext + ");\">Next >></a>";
				
				if (indexBack < 1) {
					indexBack = 1;
					backLink = "<< Back";
				}
				
				if (indexNext > 35) {
					indexNext = 35;
					nextLink = "Next >>";
				}
				
				// by now we have the data... lets display everything on the page
				document.getElementById("demoTitle").innerHTML = strItemTitle;
				document.getElementById("demoCaption").innerHTML = strCaption;
				document.getElementById("demoContents").innerHTML = "<img src=\"Demo/screenshots/" + strImageSrc + "\" border=\"0\" />";
				document.getElementById("demoNavigation").innerHTML = "<div style=\"position: absolute; right: 10px;\">" + backLink + " | " + nextLink + "</div>&nbsp;";
				
			} 
		}
    }
	
	ajaxObj.send(params);
	
	
}