var width='100px'
var height='106px'
var bgcolor='white'
//3000 miliseconds=3 seconds
var pause=3000


//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='<a href="http://www.cnn.com"><img src="PE01805A.gif" border=0"></a>'
slideimages[1]='<img src="PE01803A.gif">'
slideimages[2]='<img src="TN00411A.gif">'
slideimages[3]='<img src="PE02054A.gif">'
slideimages[4]='<img src="cake.gif">'
//extend this list

///////Do not edit pass this line///////////////////////

function SlideShow(containerObj, width, height, bgcolor, pause) {
	// defaults
	width = (width ? width : 100);
	height = (height ? height : 106);
	bgcolor = (bgcolor ? bgcolor : 'white');
	pause = (pause ? pause : 3000);
	
	var d = document;
	
	this._slideimages = [];
	this._maindiv = null;
	this._secdiv = null;
	this._diva = null;
	this._divb = null;
	this._i = 0;
	
	this.addImage = function (img) {
		// add image & link to the slideshow
		this._slideimages[this._slideimages.length] = img;
	}
	
	this._place = function () {
		// place to the display location, draw the required divs
		this._maindiv = d.createElement("div");
		with (this._maindiv) {
			style.position = "relative";
			style.width = width + "px";
			style.height = height + "px";
			style.backgroundColor = bgcolor;
			style.overflow = "hidden";
		}
		this._secdiv = d.createElement("div");
		with (this._secdiv) {
			style.position = "absolute";
			style.left = 0;
			style.top = 0;
			style.clip = "rect(0 " + width + " " + height + " 0)";
			style.width = width + "px";
			style.height = height + "px";
		}
		this._diva = d.createElement("div");
		with (this._diva) {
			style.position = "absolute";
			style.left = "1px";
			style.top = 0;
			style.width = width + "px";
		}
		this._divb = d.createElement("div");
		with (this._divb) {
			style.position = "absolute";
			style.left = "1px";
			style.top = 0;
			style.width = width + "px";
		}
		containerObj.appendChild(this._maindiv);
		this._maindiv.appendChild(this._secdiv);
		this._secdiv.appendChild(this._diva);
		this._secdiv.appendChild(this._divb);
		this._diva.innerHTML = this._slideimages[0];
		this._divb.innerHTML = (this._slideimages.length > 1 ? this._slideimages[1] : this._slideimages[0]);
	}
	
	this.start = function () {
		// start the slide show, call this in window.onload
		if (this._slideimages.length == 0)
			throw new Exception("no slide image");
		
		if (! this._maindiv)
			this._place();
		
		if (this._slideimages.length>1)
			this._i=2;
		else
			this._i=0;
		this._move3(this._diva);
		this._divb.style.left=width;
	}

	var self = this;
	this._move3 = function (tdiv){
		if (parseInt(tdiv.style.left)>0&&parseInt(tdiv.style.left)<=5){
			tdiv.style.left=0+"px"
			setTimeout(function () {
				self._move3(tdiv);
				self._move4(self._divb);
			}, pause);
			return
		}
		if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
			tdiv.style.left=parseInt(tdiv.style.left)-5+"px"
			setTimeout(function () {
				self._move3(tdiv);
			},50);
		}else{
			tdiv.style.left=width;
			tdiv.innerHTML=this._slideimages[this._i];
			if (this._i==this._slideimages.length-1)
				this._i=0;
			else
				this._i++;
		}
	}

	this._move4 = function (tdiv2){
		if (parseInt(tdiv2.style.left)>0&&parseInt(tdiv2.style.left)<=5){
			tdiv2.style.left=0+"px"
			setTimeout(function () {
				self._move4(tdiv2);
				self._move3(self._diva);
			}, pause);
			return
		}
		if (parseInt(tdiv2.style.left)>=tdiv2.offsetWidth*-1){
			tdiv2.style.left=parseInt(tdiv2.style.left)-5+"px"
			setTimeout(function () {
				self._move4(self._divb);
			},50);
		}
		else{
			tdiv2.style.left=width;
			tdiv2.innerHTML= this._slideimages[this._i];
			if (this._i==this._slideimages.length-1)
				this._i=0;
			else
				this._i++;
		}
	}
	
	return this;
}