///////////////////////////////////////////////////////////
/*

Javascript Slideshow Class

Takes the id of a div with images, and replaces the div 
with a slideshow of the images. If javascript is disabled
the page appears as normal. 

uses slideshow.css for style and positioning, but
overrides the target div's width with a value supplied 
to the constructor, thus allowing multiple slideshows 
of different sizes.

written by Ted Koterwas 22 November 2007


/                                                        */
///////////////////////////////////////////////////////////
function findPos(obj) {
	var curleft = 0;
	var curtop = 0;
	if (obj.offsetParent) {
		do {
			if (obj.offsetLeft)
			{
				curleft += obj.offsetLeft;
			}
			if (obj.offsetTop)
			{
				curtop += obj.offsetTop;
			}
		} while (obj = obj.offsetParent);
	}
	return [curleft,curtop];
}

function Slideshow(target, width, height, imgArray){
	this.index = 0;
	if (document.getElementById){
		this.container = document.getElementById(target);
		this.height = height;
		this.width = width;
		this.top = 	findPos(this.container)[1];
		this.images = (imgArray)?imgArray:this.buildImageList();
		this.createSlideshow();
		this.showSlide();
	}
		
}

function addEventHandler(obj, handlerMethod){
    return (function(e){
        e = e||window.event;
        return obj[handlerMethod](e, this);
    });
}

function createSlideshow(){
	with(this){
		while( container.hasChildNodes() ) { 
			container.removeChild( container.lastChild ); 
		};
		container.setAttribute("class", "slideshow");
		//container.setAttribute("style", "width:"+width+"px");
		//container.setAttribute("style", "height:"+height+"px");
		//IE:
		container.setAttribute("className", "slideshow");
		container.style.cssText = "width:"+width+"px;}";
		//create a named anchor so that clicking next and previous
		//realigns the slide with the top of the window
		var namedAnchor = document.createElement("a");
		namedAnchor.setAttribute("name", "images");
		container.appendChild(namedAnchor);
		// create image container div
		var slideDiv = document.createElement("div");
		slideDiv.setAttribute("class", "slide_image");
		slideDiv.setAttribute("className", "slide_image");
		//slideDiv.setAttribute("style", "height:"+height+"px;}");

		container.appendChild(slideDiv);
		//create image element
		image=document.createElement("img");
		image.setAttribute("src", images[0]);
		slideDiv.appendChild(image);
		//create image caption
		caption=document.createElement("div");
		caption.setAttribute("class", "slide_caption");
		caption.setAttribute("className", "slide_caption");
		slideDiv.appendChild(caption);
		//create controller
		controller=document.createElement("div");
		controller.setAttribute("class", "slideshow_controller");
		controller.setAttribute("className", "slideshow_controller");
		container.appendChild(controller);
		//create button container
		var buttonContainer1 = document.createElement("span");
		buttonContainer1.setAttribute("class", "button_container");
		buttonContainer1.setAttribute("className", "button_container");
		//create next button
		next=document.createElement("a");
		next.setAttribute("href", "#images");
		next.setAttribute("id", "next");
		next.onclick= addEventHandler(this, "doButton");
		nextText = document.createTextNode("next");
		next.appendChild(nextText);
		buttonContainer1.appendChild(next);
		controller.appendChild(buttonContainer1);

		//create button divider
		var buttonDivider = document.createElement("span");
		buttonDivider.setAttribute("class", "button_divider");
		buttonDivider.setAttribute("className", "button_divider");

		divider=document.createElement("span");
		var dividerText = document.createTextNode(" | ");
		divider.appendChild(dividerText);
		buttonDivider.appendChild(divider);
		controller.appendChild(buttonDivider);
		//create button container
		var buttonContainer2 = document.createElement("span");
		buttonContainer2.setAttribute("class", "button_container");
		buttonContainer2.setAttribute("className", "button_container");
		//create previous button
		previous=document.createElement("a");
		previous.setAttribute("href", "#images");
		previous.setAttribute("id", "previous");
		previous.onclick= addEventHandler(this, "doButton");
		previousText = document.createTextNode("prev");
		previous.appendChild(previousText);
		buttonContainer2.appendChild(previous);
		controller.appendChild(buttonContainer2);

		//create slidecounter
		counter=document.createElement("span");
		counter.setAttribute("class", "slide_counter");
		counter.setAttribute("className", "slide_counter");
		var counterText = document.createTextNode("Image 1 of "+images.length);
		counter.appendChild(counterText);
		controller.appendChild(counter);
		
	}
}

function buildImageList(){
	with (this){
		var imageElements = container.getElementsByTagName("img");
	
		for (var i = 0; i < imageElements.length;i++){
			images.push({src:imageElements[i].src, caption:""});
		}
	}
}

function doButton(event, element){
	with (this){
		
		var no_jump = true;
		if(window.pageYOffset>top)
		{
			no_jump = false;
		}
	
		switch(element.id){
			case "next": 
				index++;
				break;			
			case "previous": 
				index--;
				break;
		}
		if (index < 0){
			index = 0;
		}
		if (index > images.length-1){
			index = images.length-1;
		}
		showSlide();	
	}
	//check if the top of the image is in view. if so return false
	//so that it doesn't jump tot the named anchor at the top of the image
	if (no_jump)
	{
	  return false;
	}
}
	

	
function showSlide(){
	with (this){	

		image.setAttribute("src", images[index].src);
		counter.innerHTML = "Image "+(index+1)+" of "+images.length
		caption.innerHTML = images[index].caption;
		next.setAttribute("class", "visible");
		next.setAttribute("className", "visible");
		previous.setAttribute("class", "visible");
		previous.setAttribute("className", "visible");
		divider.setAttribute("class", "visible");
		divider.setAttribute("className", "visible");
		if (index == images.length - 1){
			next.setAttribute("class", "hidden");
			next.setAttribute("className", "hidden");
			divider.setAttribute("class", "hidden");
			divider.setAttribute("className", "hidden");
		}
		if (index == 0){
			previous.setAttribute("class", "hidden");
			previous.setAttribute("className", "hidden");
			divider.setAttribute("class", "hidden");
			divider.setAttribute("className", "hidden");
		}
	}
}

Slideshow.prototype.addEventHandler = addEventHandler;

Slideshow.prototype.createSlideshow = createSlideshow;

Slideshow.prototype.buildImageList= buildImageList;

Slideshow.prototype.doButton = doButton;
	
Slideshow.prototype.showSlide= showSlide;

function debug(string){
	if (!document.getElementById("debug")){
		debug=document.createElement("div");
		debug.setAttribute("id", "previous");
		document.appendChild(debug);
		debug.innerHTML=string;
	}else{
	  	document.getElementById("debug").innerHTML+=string;
	}
}

var slideshow;

function showSlideshow(target, width, height, imgArray){
	if (slideshow == null){
		slideshow = new Slideshow(target, width, height, imgArray);
	}
}