// JavaScript Document
function AnchorShow(id) {
	try {
		var _this = this;									// setTimeOut uses it
		
		this.id = id;										// (String) the id of the element where the slideshow appears
		this.elapse = 5000;									// (Number) time between picture changes in milliseconds
		this.slideShowElements = new Array();				// (Array) each anchor-image stored here
		this.pictureCounter = 0;							// (int) the element counter
		
		this.element = document.getElementById(id);			// (ObjectElement) the div element where the slideshow appears
		this.element.style.position = "relative";			// sets the element position to relative;
		this.element.style.overflow = "hidden";				// sets the element overflow to hidden
		
		this.anchorElement;									// the anchor element
		this.imgElement;									// the image element
	
		this.timeOut = setTimeout(function() {_this.changePicture()}, this.elapse);	// starts the picture change time count
	} catch(e) {
		alert(e);
	}
	
	/*	Sets the size of the slideshow in pixels	*/
	
	this.setSize = function(width, height) {
		try {
			this.element.style.width = width+'px';
			this.element.style.height = height+'px';
		} catch (e) {
			alert(e);
		}
	}
	
	/*	Sets the time between each image change in seconds	*/

	this.setElapseTime = function(seconds) {
		try {
			this.elapse = seconds*1000;
			clearTimeout(this.timeOut);
			this.timeOut = setTimeout(function() {_this.changePicture()}, this.elapse);
		} catch(e) {
			alert(e);
		}
	}
	
	/*	Adds an anchor-image element defining the a->href, img->src, img->alt
		Creates this.anchorElement and this.imgElement when the first the object receives the first anchor-image element	*/
	
	this.addElement = function(href, src, alt) {
		try {
			var subElement = new Array();
			subElement['href'] = href;
			subElement['title'] = alt;
			subElement['image'] = new Image();
			subElement['image'].src = src;
			subElement['image'].alt = alt;
			this.slideShowElements.push(subElement);
			if (this.slideShowElements.length == 1) {
				this.anchorElement = getAnchorElement(subElement);
				this.imgElement = getImgElement(subElement);
				this.anchorElement.appendChild(this.imgElement);
				this.element.appendChild(this.anchorElement);
			}
		} catch(e) {
			alert(e);
		}
	}
	
	/*	Removes	all anchor-image elements	*/
	
	this.removeElement = function() {
		try {
			this.slideShowElements = new Array();
			this.element.innerHTML = '';
		} catch(e) {
			alert(e);
		}
	}
	
	/*	Called whenever the picture changes	*/
	
	this.changePicture = function() {
		try {
			this.pictureCounter++;
			var subElement = this.slideShowElements[this.pictureCounter%this.slideShowElements.length];
			
			this.anchorElement.href = subElement['href'];
			this.anchorElement.title = subElement['title'];
			
			this.imgElement.src = subElement['image'].src;
			this.imgElement.alt = subElement['image'].alt;
			
			var _this = this;
			this.timeOut = setTimeout(function() {_this.changePicture()}, this.elapse);
		} catch(e) {
			alert(e);
		}
	}
	
	/*	PRIVATE: returns an anchor element according to the passed anchor-image element as argument	*/
	
	function getAnchorElement(subElement) {
		try {
			var anch = document.createElement('a');
			anch.href = subElement['href'];
			anch.title = subElement['title'];
			return anch;
		} catch(e) {
			alert(e);
		}
	}
	
	/*	PRIVATE: returns an image element according to the passed anchor-image element as argument	*/
	
	function getImgElement(subElement) {
		try {
			var img = document.createElement('img');
			img.src = subElement['image'].src;
			img.alt = subElement['image'].alt;
			return img;
		} catch(e) {
			alert(e);
		}
	}
}

/* EXAMPLE
function body_onload {
	var slideShow = new AnchorShow('slideshow');
	slideShow.setSize(400, 400);
	slideShow.setElapseTime(5);
	slideShow.addElement('http://www.officiallondontheatre.co.uk/', 'pictures/elephant_1.jpg', 'This is OLT...');
	slideShow.addElement('http://www.getintolondontheatre.co.uk/', 'pictures/elephant_2.jpg', 'This is GILT...');
}
*/