var _dropinslideshowcount = 0;

/*
	imgarray
		Array of images containing name and width elements
	w
		Width of scrolling window
	h
		Height of scrolling window
	delay
		Delay as each slide reaches the left side
	border
		Optional border width between each slide using the background color for the __slideshow class
*/
function dropinslideshow(imgarray, w, h, delay, border) {
	imgarray.sort(function() {return 0.5 - Math.random();});
	this.id = "_dropslide"+(++_dropinslideshowcount); //Generate unique ID for this slideshow instance (automated)
	this.width = parseInt(w);
	this.createcontainer(imgarray, parseInt(h), border);
	if (typeof delay == "undefined") {
		delay = 0
	}
	this.delay = delay;
	this.slidedegree = 25; //Slide degree (> is faster);
	this.slidedelay = 75; //Delay between slide animation (< is faster);
	this.nextcanvasindex = 0;
	this.isMouseover = 0;
	this.init();
}

dropinslideshow.prototype.createcontainer=function(imgarray, h, border) {
	if (typeof border == "undefined") {
		border = 0;
	}
	document.write('<div id="'+this.id+'" style="position:relative; width:'+this.width+'px;height:'+h+'px;overflow:hidden;">');
	for (var i = 0; i < imgarray.length; i++) {
		document.write('<div class="__slideshow" style="position:absolute;width:'+(parseInt(imgarray[i][1]) + border)+'px;height:'+h+'px;left:'+(this.width + 1)+'px;"><img src="'+imgarray[i][0]+'" style="border:0"/></div>');
	}
	document.write('</div>');
	this.slideshowref = document.getElementById(this.id);
	this.canvases = [];
	for (var i = 0; i < imgarray.length; i++){
		this.canvases[i] = this.slideshowref.childNodes[i];
	}
}

dropinslideshow.prototype.animateslide=function() {
	//Slide all active canvases
	for (var i = 0; i < this.canvases.length; i++) {
		var canvas = this.canvases[i];
		//Is active
		if (parseInt(canvas.style.left) <= this.width) {
			//Is still visible
			if (parseInt(canvas.style.left) > -parseInt(canvas.style.width)) {
				canvas.style.left = (parseInt(canvas.style.left) - this.slidedegree) + 'px';
				//Pause at the left and/or check for mouse over
				if ((parseInt(canvas.style.left) <= 0) && (parseInt(canvas.style.left) + this.slidedegree > 0)) {
					clearInterval(this.animatetimer);
					var slideshow = this;
					setTimeout(function(){slideshow.rotateslide()}, this.delay);
				}
			} else {
				//Free the canvas
				canvas.style.left = (this.width + 1) + 'px';
			}
		}
	}
	this.setupnextslide()
}

dropinslideshow.prototype.setupnextslide=function() {
	var nextcanvas = this.canvases[this.nextcanvasindex];
	//Check for a free canvas
	if (parseInt(nextcanvas.style.left) > this.width) {
		var lastcanvasindex = (this.nextcanvasindex ? this.nextcanvasindex : this.canvases.length) - 1;
		lastcanvas = this.canvases[lastcanvasindex];
		//Is the next canvas needed
		var left;
		if (parseInt(lastcanvas.style.left) > this.width) {
			left = this.width;
		} else if (parseInt(lastcanvas.style.left) + parseInt(lastcanvas.style.width) <= this.width) {
			left = parseInt(lastcanvas.style.left) + parseInt(lastcanvas.style.width);
		} else {
			left = this.width + 1;
		}
		if (left <= this.width) {
			this.nextcanvasindex++;
			if (this.nextcanvasindex >= this.canvases.length) {
				this.nextcanvasindex = 0;
			}
			nextcanvas.style.left = left + 'px';
		}
	}
}

dropinslideshow.prototype.rotateslide=function() {
	var slideshow = this;
	if (this.isMouseover) {
		setTimeout(function(){slideshow.rotateslide()}, 50);
	} else {
		this.animatetimer = setInterval(function(){slideshow.animateslide()}, this.slidedelay);
	}
}

dropinslideshow.prototype.init=function(){
	var slideshow = this;
	this.slideshowref.onmouseover = function(){slideshow.isMouseover=1};
	this.slideshowref.onmouseout = function(){slideshow.isMouseover=0};
	this.setupnextslide();
	this.rotateslide();
}