/* The following function creates an XMLHttpRequest object... */

function createRequestObject(){
	var request_o; //declare the variable to hold the object.
	var browser = navigator.appName; //find the browser name
	if(browser == "Microsoft Internet Explorer"){
		/* Create the object using MSIE's method */
		request_o = new ActiveXObject("Microsoft.XMLHTTP");
	}else{
		/* Create the object using other browser's method */
		request_o = new XMLHttpRequest();
	}
	return request_o; //return the object
}

/* You can get more specific with version information by using 
	parseInt(navigator.appVersion)
	Which will extract an integer value containing the version 
	of the browser being used.
*/
/* The variable http will hold our new XMLHttpRequest object. */
var http = createRequestObject(); 

/* Function called to get the pics div */
function getPics(){
	/* Create the request. The first argument to the open function is the method (POST/GET),
		and the second argument is the url... 
		document contains references to all items on the page
		We can reference document.form_category_select.select_category_select and we will
		be referencing the dropdown list. The selectedIndex property will give us the 
		index of the selected item. 
	*/
	http.open('get', 'getpics.php');
	/* Define a function to call once a response has been received. This will be our
		handleProductCategories function that we define below. */
	http.onreadystatechange = loadPics; 
	/* Send the data. We use something other than null when we are sending using the POST
		method. */
	http.send(null);
}

/* Function called to get the pics div */
function getInfo(){
	/* Create the request. The first argument to the open function is the method (POST/GET),
		and the second argument is the url... 
		document contains references to all items on the page
		We can reference document.form_category_select.select_category_select and we will
		be referencing the dropdown list. The selectedIndex property will give us the 
		index of the selected item. 
	*/
	http.open('get', 'info_div.php');
	/* Define a function to call once a response has been received. This will be our
		handleProductCategories function that we define below. */
	http.onreadystatechange = insertInfo; 
	/* Send the data. We use something other than null when we are sending using the POST
		method. */
	http.send(null);
}

/* Function called to handle the list that was returned from the pics_div.php file.. */
function loadPics(){
	/* Make sure that the transaction has finished. The XMLHttpRequest object 
		has a property called readyState with several states:
		0: Uninitialized
		1: Loading
		2: Loaded
		3: Interactive
		4: Finished */
	if(http.readyState == 4){ //Finished loading the response
		/* We have got the response from the server-side script,
			let's see just what it was. using the responseText property of 
			the XMLHttpRequest object. */
		var response = http.responseText;
		/* And now we want to change the product_categories <div> content.
			we do this using an ability to get/change the content of a page element 
			that we can find: innerHTML. */
		document.getElementById('content_right').innerHTML = response;
		getInfo();
		/*JQuery slides the last image in content_left_slider to the front and then offsets the entire div by -600px */
		 $('#content_right_slider div:last').insertBefore($('#content_right_slider div:first'));
		 $('#content_right_slider').css('left', '-600px');
		 /*JQuery sets up a listener for the left arrow */
		 $("#leftarrow").click(function() {
  			$("#content_right_slider").animate({left: '-=600px'}, 300,function() { 
	 			$('#content_right_slider').css('left', '-600px');
  				$('#content_right_slider div:first').insertAfter($('#content_right_slider div:last'));
			});
			$("#content_left_slider").animate({top: '-=316px'}, 300,function() {
				$('#content_left_slider div:first').insertAfter($('#content_left_slider div:last'));
				$('#content_left_slider').css('top', '-316px');
			});
  		});
		$("#rightarrow").click(function() {
  			$("#content_right_slider").animate({left: '+=600px'}, 300,function() {
				$('#content_right_slider div:last').insertBefore($('#content_right_slider div:first')); 
				$('#content_right_slider').css('left', '-600px');
			});
			$("#content_left_slider").animate({top: '+=316px'}, 300,function() {
				$('#content_left_slider div:last').insertBefore($('#content_left_slider div:first'));
				$('#content_left_slider').css('top', '-316px');
			});
  		});
		
		function movePic() {
			$("#content_right_slider").animate({left: '-=600px'}, 1000,function() { 
	 			$('#content_right_slider').css('left', '-600px');
  				$('#content_right_slider div:first').insertAfter($('#content_right_slider div:last'));
			});
			$("#content_left_slider").animate({top: '-=316px'}, 1000,function() {
				$('#content_left_slider div:first').insertAfter($('#content_left_slider div:last'));
				$('#content_left_slider').css('top', '-316px');
			});
		
	}
	
	var intervalID = window.setInterval(movePic, 10000);

		
		 
	}
}

function insertInfo(){
	/* Make sure that the transaction has finished. The XMLHttpRequest object 
		has a property called readyState with several states:
		0: Uninitialized
		1: Loading
		2: Loaded
		3: Interactive
		4: Finished */
	if(http.readyState == 4){ //Finished loading the response
		/* We have got the response from the server-side script,
			let's see just what it was. using the responseText property of 
			the XMLHttpRequest object. */
		var response = http.responseText;
		/* And now we want to change the product_categories <div> content.
			we do this using an ability to get/change the content of a page element 
			that we can find: innerHTML. */
		document.getElementById('content_left').innerHTML = response;
		$('#content_left_slider div:last').insertBefore($('#content_left_slider div:first'));
		$('#content_left_slider').css('top', '-316px');
	}
}

// JavaScript Document