window.onload=changename;

function changename()
 {
 var xmlhttp;

 if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }
 else
   {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
	   updatehead(xmlhttp.responseText);
     }
   }
 xmlhttp.open("POST","ajax/photos",true);
 xmlhttp.send();
 }

function updatehead(n) {
	var slideshow=document.getElementById('slideshow');
	var image=document.getElementById('loader');
	var message=document.getElementById('loadmessage');
	var row=n.split('*/&');

	//load new images into the DOM
	for (i=0; i<row.length; i++) {
		var rowVars=row[i].split('*,&');
		var imageFile=rowVars[0];
		var imageHeight=rowVars[1];
		var imageWidth=rowVars[2];

		newImage=document.createElement('img');
		newImage.setAttribute('src', 'public/images/'+imageFile);
		newImage.setAttribute('height', imageHeight);
		newImage.setAttribute('width', imageWidth);
		newImage.setAttribute('style', 'visibility:visibile');
		//newImage.style.marginLeft=leftMargin+'';
		imgappend = slideshow.appendChild(newImage);
	}

	for (i=0; i<row.length; i++) {
		//set variables to create all the caption properties
		var rowVars=row[i].split('*,&');
		var titleText=rowVars[3];
		var capText=rowVars[4];
		var caption=document.getElementById('caption');

		//create new div, caption title, and caption description in DOM
		newDiv=document.createElement('div');
		newCapTitle=document.createElement('h3');
		newCapDesc=document.createElement('p');

		//add retreived title and description to newly created h3 and p
		newCapTitle.innerHTML=titleText;
		newCapDesc.innerHTML=capText;
		
		//newCapTitle.setAttribute('visibility', 'hidden');

		//place the newly created div in the photo_box div and set class to caption
		placedDiv = document.getElementById('photo_box').appendChild(newDiv);
		placedDiv.setAttribute('class','caption hidden');

		//place the newly created caption title and description in the new div
		placedDiv.appendChild(newCapTitle);
		placedDiv.appendChild(newCapDesc);
    }

    //remove the loader gif and loading message after images and captions are retreived
	slideshow.removeChild(image);
	slideshow.removeChild(message);

	//set class of first image to active and first caption to visible
	slideshow.getElementsByTagName('img')[0].setAttribute('class', 'active');
	//caption.getElementsByTagName('h3')[0].setAttribute('class', 'visible');

	//change slideshow div background color from white to black
	slideshow.setAttribute('background-color', 'white');

	slideShow();

}

function slideShow() {
	//set the opacity of all images to 0
	$('#slideshow IMG').css({opacity:0.0, visibility:'visible'});

	$('.caption:first').removeClass('hidden').addClass('visible');

	

	//$('#caption H3').css({visibility:'visible', opacity:0.7});
	//$('#caption P').css({visibility:'visible', opacity:0.7});

	//set the left margin of all images to half their width
	$('#slideshow IMG').each(function() {
		$(this).css({
			marginLeft : function(index,value) {
				var imgWidth = $(this).width();
				var imgMargin = 0 - (imgWidth / 2);
				return imgMargin;
			},

			marginTop : function() {
				var imgHeight = $(this).height();
				var imgTopMargin = 180 - (imgHeight / 2);
				return imgTopMargin + 'px';
			}
		});
	});

	//get the first image and set the opacity to 1
	$('#slideshow IMG:first').css({opacity:1.0}, 1000);

    setInterval( "slideSwitch()", 5000);
}

	function slideSwitch() {
	    var currentImage = ($('#slideshow img.active') ? $('#slideshow img.active') : $('#slideshow img:first'));
		var nextImage = (currentImage.next('img').length ? currentImage.next('img') : $('#slideshow img:first'));

		var currentCaption = $('.visible');
		var nextCaption = (currentCaption.next('div').length ? currentCaption.next('div') : $('.caption:first'));

		//Fade in the next image and add class active
		nextImage.animate({opacity:1.0}, 1000).addClass('active');

		//Lower current caption and remove class visible
		currentCaption.removeClass('visible').addClass('hidden');//.animate({height:0}, 300);

		//Fade out the current image and remove class active
		currentImage.animate({opacity:0.0}, 1000, function() {

			currentImage.removeClass('active');
		});

nextCaption.removeClass('hidden').addClass('visible');

	}