/*
Replace an element with a slide show
*/

window.onload = function () {
	// getElement("dbg1").value = "";
	
	slideshow([ "slide/1.jpg", "slide/2.jpg", "slide/3.jpg", "slide/4.jpg", "slide/5.jpg", "slide/6.jpg", "slide/7.jpg", "slide/8.jpg", "slide/9.jpg", "slide/10.jpg", "slide/11.jpg", "slide/12.jpg" ], 5, 50, "idslides", "idoverlay", "arrows.png", 15);
	
	pltimer = window.setTimeout(preload2, 5);
};

function preload2() {

	var pics = [ "slide/1.jpg", "slide/2.jpg", "slide/3.jpg", "slide/4.jpg", "slide/5.jpg", "slide/6.jpg", "slide/7.jpg", "slide/8.jpg", "slide/9.jpg", "slide/10.jpg", "slide/11.jpg", "slide/12.jpg" ];

	set_bg(pics[1], 497, "idbottom");
	
	for (i=2; i < pics.length; i++) {
		set_bg(pics[i], 497, "idpl"+i);
	}
}

function slideshow(pics, stepSize, interval, targetId, overlayId, arrowImg, arrowWidth) {
	init_frame(targetId, pics);
	init_controls(overlayId, arrowImg, arrowWidth);
	init_slide_show(pics, stepSize, interval);
}

function init_frame(targetId, pics) {
	
	var container = img_to_div(targetId);
	
	var pldiv;
	var i;
	for (i=2; i < pics.length; i++) {
		pldiv = add_div("cslidebox", container);
		pldiv.id = "idpl"+i;
		container = pldiv;
	}
	
	var bottomSlide = add_div("cslidebox", container);
	bottomSlide.id = "idbottom";

	var topSlide = add_div("cslidebox", bottomSlide);
	topSlide.id = "idtop";
	
	set_bg(pics[0], 0, "idtop");
}

function init_controls(overlayId, arrowImg, arrowWidth) {
	
	var rightArrow = add_button(arrowImg, arrowWidth, 3, overlayId);
	rightArrow.id = "idright";
	set_bg(arrowImg, 3*arrowWidth, "idright");
	
	var leftArrow = add_button(arrowImg, arrowWidth, 0, overlayId);
	leftArrow.id = "idleft";
	set_bg(arrowImg, 0, "idleft");
}

function init_slide_show(pics, stepSize, interval) {
	var currentImg = 0;
	var prevImg = 0;
	var nextImg = 0;
	var counter = -1;

	function prev(e) {
		onetime(e);

		nextImg--;
		if (nextImg<0) {
			nextImg = pics.length-1;
		}
	
		change();
	}

	function next(e) {
		onetime(e);

		nextImg++;
		if (nextImg>pics.length-1) {
			nextImg = 0;
		}

		change();
	}
	
	function change() {

		/* CSS-less version */
		/* plainSlide.src = pics[nextImg]; */

		/*
		if counter > -1, a slide transition is currently taking place,
		and change() will be called again when the transition is finished.
		*/
		if (counter > -1) return;

		prevImg = currentImg;
		currentImg = nextImg;
		counter = 100 / stepSize;
		
		set_bg(pics[prevImg], 0, "idtop");
		set_opac(1, "idtop");
		set_bg(pics[currentImg], 0, "idbottom");

		transition();
	}

	function transition() {

		if (counter > 0) {
			counter--;
			set_opac(counter*stepSize/100, "idtop");
			
			/*
			In case the opacity of the overlay changes along
			with the slide:
			*/
			set_opac(.99, "idoverlay");
			
			timer = window.setTimeout(transition, interval);
		} else {
			counter = -1;
			
			/*
			If change() was called during a slide transition,
			it needs to be called again.
			*/
			if (currentImg != nextImg) {
				change();
			}
		}
	}
	
	getElement("idtop").onclick = next;
	getElement("idleft").onclick = prev;
	getElement("idright").onclick = next;
}

function set_opac(opacity, elementId) {

	var obj = getElement(elementId);
	if (!obj.style) return;
	
	/* Opacity properties for different browsers */
	obj.style.opacity = opacity;
	obj.style.MozOpacity = opacity;
	obj.style.KhtmlOpacity = opacity;
	obj.style.filter = "alpha(opacity=" + opacity*100 + ")";
}

function img_to_div(imgId) {

	var original = getElement(imgId);

	if (!original.parentNode) return;

	var imgparent = original.parentNode;
	
	if (!document.createElement) return;

	var div = document.createElement("div");

	if (!imgparent.replaceChild) return;

	imgparent.replaceChild(div, original);
	
	div.className = "cslidebox";
	
	return div;
}

function add_div(className, container) {
	if (!document.createElement) return;
	
	var div = document.createElement("div");
	
	if (!container) return;
	if (!container.appendChild) return;

	container.appendChild(div);
	
	div.className = className;
	
	return div;
}

function add_button(buttonImg, spriteWidth, spriteNum, containerId) {

	var container = getElement(containerId);
	var button = add_div("carrow", container);
	
	if (!button) return;
	button.onmouseover = make_swap_img(buttonImg, (spriteNum+1)*spriteWidth);
	button.onmouseout = make_swap_img(buttonImg, spriteNum*spriteWidth);
	button.onmousedown = make_swap_img(buttonImg, spriteNum*spriteWidth);
	button.onmouseup = make_swap_img(buttonImg, (spriteNum+1)*spriteWidth);
	
	return button;
}

/* Stop events from propagating to parent elements */
function onetime(e) {
	if (!e) var e = window.event;
	e.cancelBubble = true;
	if (e.stopPropagation) e.stopPropagation();
}

function getElement(id) {
	if (!document.getElementById) return;
	if (!document.getElementById(id)) return;
	
	return document.getElementById(id);
}

function set_bg(src, offset, id) {
	var obj = getElement(id);
	if (obj.style) {
		obj.style.background = "url('" + src + "') -" + offset + "px 0px no-repeat";
	}
}

function make_swap_img (src, offset) {
	return function () {
		if (this.style) {
		this.style.background = "url('" + src + "') -" + offset + "px 0px";
		}
	}
}

function dbg(val) {
	var oldval = document.getElementById("dbg1").value;
	document.getElementById("dbg1").value = val + "\n" + oldval;
}