var title = [];
var description = [];
var filename = [];
var slideLocation;
var currentSlide;
var lastSlide;
var playing = false;
var thumbSlider = 4;

function slideshow (xml) {
	importXML(xml);
}

function importXML(xml)
{
	if (document.implementation && document.implementation.createDocument) {
		xmlDoc = document.implementation.createDocument("", "", null);
		xmlDoc.onload = createSlideshow;
	}
	else if (window.ActiveXObject) {
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.onreadystatechange = function () {
			if (xmlDoc.readyState == 4) {createSlideshow();}
		};
 	}
	else {
		alert('Your browser is incompatible with this slideshow.');
		return;
	}
	xmlDoc.load(xml);
}

function createSlideshow()
{
	var x = xmlDoc.getElementsByTagName('location');
	slideLocation = x[0].firstChild.nodeValue;
	
	x = xmlDoc.getElementsByTagName('slide');

	for (j=0;j<x.length;j++) {
		title[j] = x[j].childNodes[0].firstChild.nodeValue;
		description[j] = traverse(x[j].childNodes[1]);
		filename[j] = x[j].childNodes[2].firstChild.nodeValue;
	}
	lastSlide = title.length - 1;
	currentSlide = 0;
	buildHTML();
	if (playing) {
		playSlides();
	}
}

function buildHTML () {
	var sldshow = document.createElement('div');
	sldshow.setAttribute('id','sld-slideshow');

	var tmp = document.createElement('div');
	tmp.setAttribute('id','sld-thumbnails');

	var tmpLI;
	var tmpP;
	var tmpIMG;
	var tmpChild = document.createElement('ol');
	tmpChild.setAttribute('id','thumbSlider');
	tmpChild.style.cssText = 'margin-top: '+thumbSlider+'px;';
	
	for (j=0;j<title.length;j++) {
		tmpLI = document.createElement('li');
		if (j==currentSlide) {
			tmpLI.setAttribute('class','selectedSlide');
			tmpLI.setAttribute('className','selectedSlide');
		}
		tmpP = document.createElement('p');
		tmpIMG = document.createElement('img');
		tmpIMG.setAttribute('src',slideLocation+'thumbnail/'+filename[j]);
		tmpIMG.setAttribute('alt','');
		tmpIMG.setAttribute('width','88');
		tmpIMG.setAttribute('height','76');
		tmpP.appendChild(tmpIMG);
		tmpLI.appendChild(tmpP);
		tmpLI.onclick = new Function("gotoSlide("+j+")");
		
		tmpP = document.createElement('p');
		tmpP.appendChild(document.createTextNode(title[j]));
		tmpLI.appendChild(tmpP);
		tmpChild.appendChild(tmpLI);
	}
	tmp.appendChild(tmpChild);
	sldshow.appendChild(tmp);

	var div1=document.createElement('div');
	div1.setAttribute('id','sld-current');
	var h31=document.createElement('h3');
	div1.appendChild(h31);
	var txt1=document.createTextNode(title[currentSlide]);
	h31.appendChild(txt1);
	var p1=document.createElement('p');
	p1.setAttribute('id','sld-image');
	div1.appendChild(p1);
	var img1=document.createElement('img');
	img1.setAttribute('width','350');
	img1.setAttribute('height','263');
	img1.setAttribute('src',slideLocation+'medium/'+filename[currentSlide]);
	p1.appendChild(img1);
	var p2=document.createElement('p');
	p2.setAttribute('id','sld-enlarge');
	div1.appendChild(p2);
	var a1=document.createElement('a');
	a1.setAttribute('href',slideLocation+filename[currentSlide]);
	a1.setAttribute('target','_blank');
	p2.appendChild(a1);
	var txt2=document.createTextNode('Enlarge Photo');
	a1.appendChild(txt2);
	var p3=document.createElement('p');
	p3.setAttribute('id','sld-description');
	div1.appendChild(p3);
	//var txt3=document.createTextNode();
	p3.appendChild(description[currentSlide]);
	sldshow.appendChild(div1);

	//Controls
	var div1=document.createElement('div');
	div1.setAttribute('id','sld-controls');

	var img1=document.createElement('img');
	img1.setAttribute('width','27');
	img1.setAttribute('height','55');
	img1.setAttribute('alt','First');
	img1.setAttribute('title','First');
	img1.setAttribute('src','/images/slideshow/bt-first.gif');
	img1.onclick = gotoFirstSlide;
	div1.appendChild(img1);
	
	var img2=document.createElement('img');
	img2.setAttribute('width','41');
	img2.setAttribute('height','55');
	img2.setAttribute('alt','Previous');
	img2.setAttribute('title','Previous');
	img2.setAttribute('src','/images/slideshow/bt-previous.gif');
	img2.onclick = gotoPreviousSlide;
	div1.appendChild(img2);
	
	var img3=document.createElement('img');
	img3.setAttribute('width','47');
	img3.setAttribute('height','55');
	img3.setAttribute('id','play-pause');
	if (playing) {
		img3.setAttribute('src','/images/slideshow/bt-stop.gif');
		img3.setAttribute('alt','Stop');
		img3.setAttribute('title','Stop');
		img3.onclick = stopSlides;
	}
	else {
		img3.setAttribute('src','/images/slideshow/bt-play.gif');
		img3.setAttribute('title','Play');
		img3.setAttribute('alt','Play');
		img3.onclick = playSlides;
	}
	div1.appendChild(img3);

	var img4=document.createElement('img');
	img4.setAttribute('width','30');
	img4.setAttribute('height','55');
	img4.setAttribute('alt','Next');
	img4.setAttribute('title','Next');
	img4.setAttribute('src','/images/slideshow/bt-next.gif');
	img4.onclick = gotoNextSlide;
	div1.appendChild(img4);


	var img5=document.createElement('img');
	img5.setAttribute('width','27');
	img5.setAttribute('height','55');
	img5.setAttribute('alt','Last');
	img5.setAttribute('title','Last');
	img5.setAttribute('src','/images/slideshow/bt-last.gif');
	img5.onclick = gotoLastSlide;
	div1.appendChild(img5);
	
	sldshow.appendChild(div1);

	var td = document.getElementById('sd');
	var tx = td.firstChild;
	td.replaceChild(sldshow,tx);
}

function gotoLastSlide () {
	if (currentSlide != lastSlide) {
		gotoSlide(lastSlide);
	}
}

function gotoFirstSlide () {
	if (currentSlide != 0) {
		gotoSlide(0);
	}
}

function gotoNextSlide () {
	nextSlide = currentSlide + 1;
	if (nextSlide > lastSlide) {
		nextSlide = 0;
	}
	gotoSlide(nextSlide);
}

function gotoPreviousSlide () {
	previousSlide = currentSlide - 1;
	if (previousSlide < 0) {
		previousSlide = lastSlide;
	}
	gotoSlide(previousSlide);
}

function gotoSlide(slide) {
	currentSlide = slide;
	slideThumbs(currentSlide);
	opacity('sld-image',100,0,500);
	setTimeout("fadeIn();",499);
}

function slideThumbs(slide) {
	var newMargin;
	if (slide < 3) {
		newMargin = 4;
	} else {
		newMargin = (slide-2) * -115;
	}
	
    var speed = Math.round(100 / 100);
    var timer = 0;
    //determine the direction for the blending, if start and end are the same nothing happens
    if(thumbSlider > newMargin) {
        for(i = thumbSlider; i >= newMargin; i--) {
			setTimeout("changeMarginTop(" + i + ",'thumbSlider')",(timer * speed));
            timer++;
        }
    } else if(thumbSlider < newMargin) {
        for(i = thumbSlider; i <= newMargin; i++) {
			setTimeout("changeMarginTop(" + i + ",'thumbSlider')",(timer * speed));
            timer++;
        }
    }
	
	thumbSlider = newMargin;
}

function fadeIn() {
	buildHTML();
	opacity('sld-image',0,100,500);
}

function playSlides() {
	playing = true;
	var btn = document.getElementById('play-pause');
	btn.setAttribute('src','/images/slideshow/bt-stop.gif');
	btn.setAttribute('title','Stop');
	btn.setAttribute('alt','Stop');
	btn.onclick = stopSlides;
	setTimeout("keepPlaying()",8000)
}
function keepPlaying() {
	if (playing) {
		gotoNextSlide();
		playSlides();
	}
}

function stopSlides() {
	playing = false;
	var btn = document.getElementById('play-pause');
	btn.setAttribute('src','/images/slideshow/bt-play.gif');
	btn.setAttribute('alt','Play');
	btn.setAttribute('title','Play');
	btn.onclick = playSlides;
}

function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
} 

function changeMarginTop(thisMargin, id) {
    var object = document.getElementById(id).style;
	object.cssText = 'margin-top: '+thisMargin+'px;';
}

function traverse(tree) {
	var returnTree = document.createElement(tree.tagName);
	if (tree.tagName == 'a') {
		returnTree.setAttribute('href', tree.getAttribute('href'));
		returnTree.setAttribute('title', tree.getAttribute('title'));
	}
	if(tree.hasChildNodes()) {
		for(var i=0; i<tree.childNodes.length; i++) {
			returnTree.appendChild(traverse(tree.childNodes[i]));
		}
	}
	else {
		returnTree.appendChild(document.createTextNode(tree.nodeValue));
	}
	return returnTree;
}