//<div id="pic"><a><img /></a></div>
//<div id="hidden"><img /></div>
//<div id="desc"></div>

function slideShow(div1, div2, div3, div4) {
	this.imageDiv 		= div1;
	this.descriptionDiv = div2
	this.hiddenDiv 		= div3;
	this.counterDiv		= div4;
	
	this.rSmallLoc 	= new Array();
	this.rMedLoc	= new Array();
	this.rLargeLoc	= new Array();
	this.rDesc		= new Array();
	
	this.currIndex = 0;
	this.viewTime = 5000;		//msec
	
	this.opacity = 100;			//%
	this.fadeSpeed = 100;		//msec
	this.playTimer;
	
	
	this.setCurrIndex = function (indexNum) {
		this.currIndex = indexNum;
	}
	
	this.setViewTime = function (timeNum) {
		viewTime = timeNum;
	}
	
	this.setFadeSpeed = function (speedNum) {			// this i just don't understand this.fadeSpeed =? fadeSpeed ????
		fadeSpeed = speedNum;
	}
	
	this.getCurrIndex = function() {
		return this.currIndex;
	}
	
	this.getNumImages = function () {
		return this.rDesc.length;
	}
	
	this.addImage = function (smallLoc, medLoc, largeLoc, desc) {
		this.rSmallLoc[this.rSmallLoc.length]	= smallLoc;
		this.rMedLoc[this.rMedLoc.length]		= medLoc;
		this.rLargeLoc[this.rLargeLoc.length]	= largeLoc;
		this.rDesc[this.rDesc.length]			= desc;
	}
	
	this.back = function() {
		if (this.currIndex == 0) {
			this.currIndex = this.rDesc.length - 1;
			changeImage(this.currIndex, this.imageDiv, this.descriptionDiv, this.hiddenDiv, this.counterDiv, this.rLargeLoc, this.rMedLoc, this.rDesc);
		} else {
			this.currIndex--;
			changeImage(this.currIndex, this.imageDiv, this.descriptionDiv, this.hiddenDiv, this.counterDiv, this.rLargeLoc, this.rMedLoc, this.rDesc);
		}
	}
	
	this.next = function() {
		if (this.currIndex == this.rDesc.length - 1) {
			this.currIndex = 0
			changeImage(this.currIndex, this.imageDiv, this.descriptionDiv, this.hiddenDiv, this.counterDiv, this.rLargeLoc, this.rMedLoc, this.rDesc);
		} else {
			this.currIndex++;
			changeImage(this.currIndex, this.imageDiv, this.descriptionDiv, this.hiddenDiv, this.counterDiv, this.rLargeLoc, this.rMedLoc, this.rDesc);
		}
	}
	
	this.recycle = function() {
		this.currIndex = 0;
		changeImage(this.currIndex, this.imageDiv, this.descriptionDiv, this.hiddenDiv, this.counterDiv, this.rLargeLoc, this.rMedLoc, this.rDesc);
	}
	
	function changeImage(_currIndex, _imageDiv, _descriptionDiv, _hiddenDiv, _counterDiv, _rLargeLoc, _rMedLoc, _rDesc) {
		var oAnchor = document.getElementById(_imageDiv).getElementsByTagName('a')[0];
		var oImage 	= oAnchor.getElementsByTagName('img')[0];
		var oDescr	= document.getElementById(_descriptionDiv);
		var oHidden = document.getElementById(_hiddenDiv).getElementsByTagName('img')[0];
		var oCounter= document.getElementById(_counterDiv);
		
		oAnchor.href		= _rLargeLoc[_currIndex];
		oImage.src			= _rMedLoc[_currIndex];
		oDescr.innerHTML	= _rDesc[_currIndex];
		if (_currIndex != _rDesc.length) {
			oHidden.src		= _rMedLoc[_currIndex + 1];
		}
		oCounter.innerHTML	= (_currIndex + 1) + "/" + _rDesc.length;
		setOpacity(oImage, 0);
		fadeIn();
	}
	
	function setOpacity(obj, opacity) {
		this.opacity = (opacity == 100)? 99.999 : opacity;

		// IE/Win
		obj.style.filter = "alpha(opacity:" + this.opacity + ")";

		// Safari<1.2, Konqueror
		obj.style.KHTMLOpacity = this.opacity/100;

		// Older Mozilla and Firefox
		obj.style.MozOpacity = this.opacity/100;

		// Safari 1.2, newer Firefox and Mozilla, CSS3
		obj.style.opacity = this.opacity/100;
	};
	
	fadeIn = function() {
		if (document.getElementById) {
			oImage = document.getElementById('imageDiv').getElementsByTagName('a')[0].getElementsByTagName('img')[0];
			if (this.opacity <= 100) {
				setOpacity(oImage, this.opacity);
				this.opacity += 10;
				fadeTimer = window.setTimeout(fadeIn, this.fadeSpeed);
			}
		}
	}
		
			
	
}