// sliding Gallery Manager javascript ver 1.0
//	  author: Wendy Sheasgreen 

// set the following in each html file based on directory showing for this html file 
//var galleryName = "photos";
//var pics = new Array(
//			"achilles2.jpg",
//			...
//			"lastpic.jpg);

// slideTimer, slideWidth and slideHeight must be defined in .html file...!!!

// doesn't work for MAC IE...old browser...bummer! addEvent(window, "load", initSlider);
window.onload = function() { initSlider(); }

//slider's speed settings
var pixelInc=1;
var repixelInc=pixelInc;


function allocateSlider(){
	if (!slideWidth) alert("Must define slideWidth in html");
	if (!slideHeight) alert("Must define slideHeight in html");
	if (!slideTimer) alert("Must define slideTimer in html");
	document.write('<div style="position:relative;overflow:hidden;width:'+slideWidth+';height:'+slideHeight+';clip:rect(0 '+slideWidth+' '+slideHeight+' 0);">');
	<!-- if want something to appear behind: document.write('<div class=slsh style="position:absolute;width:'+slideWidth+';height:'+slideHeight+';">SLIDING SHOW</div>'); -->
	document.write('<div id="slider" style="position:relative;height:'+slideHeight+';" onMouseover="pixelInc=0;" onMouseout="pixelInc=repixelInc"></div></div>');
}

var galleryPath = null;;
var sliderLeftPos = 0;
var sliderDiv = null;
var sliderLength = 0;
var ie = false;
var arrowLeft;
var arrowRight;
var curBigPic = 0;

function initSlider() {
	galleryPath = galleryName + "\/";
	var thumbPath = this.galleryPath +  "thumbs\/";
	var slideImage;
	var allImages='';

	if (navigator.appName == "Microsoft Internet Explorer") {
			ie = true;
	}
	for (i=0; i<pics.length; i++) {
		imgLoad = new Image();
		imgLoad.src = thumbPath + pics[i];
		slideImage='<img alt="Gallery" onClick="javascript:showPic(' +i+ ')" style="border: 0px none"  src=' +imgLoad.src+ ' height=' + thumbHeight + '/>';
		slideImage += '<img src="spacer.gif" width="15px" height=' + slideHeight + '/>';
		allImages += slideImage;		
	}
	if(document.getElementById) {
		sliderDiv = document.getElementById('slider');
		sliderDiv.innerHTML=('<nobr>'+allImages+'</nobr>');
		sliderLeftPos = sliderDiv.offsetWidth;
		if (ie) sliderDiv.style.pixelLeft = slideWidth;
		else sliderDiv.style.left = slideWidth;
		sliderLength = sliderLeftPos + slideWidth;  // ??
		
		// find arrows
		arrows = document.getElementsByName("arrow");
		if (arrows != null) {
			arrowLeft = arrows[0];
			arrowLeft.onmousedown= function() {prevBigPic();}
			arrowRight = arrows[1];
			arrowRight.onmousedown= function() {nextBigPic();}
		}
	} else {
		alert("Error, no getElementByID");
	}

	// look through all those imgs in the slider and set up their mousedown event...hope this works!	
	if (infos) {
		this.infoDiv = document.getElementById("info");
	} else {
		this.infoDiv = null;
	}
	startSlide();
}

function startSlide(){
	sliderDiv = document.getElementById('slider');
	if (ie) {
		if (parseInt(sliderDiv.style.pixelLeft) >= sliderLeftPos*(-1) ){
			sliderDiv.style.pixelLeft = parseInt(sliderDiv.style.pixelLeft) - pixelInc;
			setTimeout("startSlide()",slideTimer);
		} else {
			sliderDiv.style.pixelLeft=slideWidth;
			startSlide();
		} 
	} else {
		if (parseInt(sliderDiv.style.left) >= sliderLeftPos*(-1) ){
			sliderDiv.style.left = parseInt(sliderDiv.style.left) - pixelInc;
			setTimeout("startSlide()",slideTimer);
		} else {
			sliderDiv.style.left=slideWidth;
			startSlide();
		} 
	}
}

function showPic(picNum) {
	document.bigPic.src = galleryPath + pics[picNum];
	curBigPic = picNum;
	if (infoDiv) {
		infoDiv.innerHTML = infos[picNum];
	}
}

function nextBigPic() {
	if (++curBigPic == pics.length) {
		curBigPic = 0;
	}
	document.bigPic.src = galleryPath + pics[curBigPic];
}

function prevBigPic() {
	if (--curBigPic < 0) {
		curBigPic = pics.length - 1;
	}
	document.bigPic.src = galleryPath + pics[curBigPic];
}

//==============================================================================
// utility functions below...
//==============================================================================


// add a style rule in ie or dom
function addStyleRule(stylesheet, selector, rule) {
	if (stylesheet.addRule) stylesheet.addRule(selector, rule);
	else {
		var index = stylesheet.cssRules.length;
		stylesheet.insertRule(selector + "{" + rule + "}", index);
	}
}