/*SlideShow version 1.7
* by Scott Anderson
* climbers@weekendclimber.com
*
* This program fall under the jurisdiction
* of the GNU General Public Liscense, so
* basically USE IT AT YOUR OWN RISK. If you
* do decide to use it, please let us know.
* We all like to see our babies at work. -Scotty
* 
* If your having problems setting up this script
* check out our new tutorial page at:
* http://www.weekendclimber.com/tutorials/
*/
/**************************************
**  Setup variables for customizing  **
**************************************/
var direction 	= "horizontal";		//direction the thumbnails will scroll: horizontal or vertical
var thImgWdth	= "100";			//the width of individual thumbnail image
var thImgHght	= "75";			//the height of individual thumbnail image
var thExt	= "t.jpg";		//the extension added to thumbnail images
var thDir	= "/picst/";			//the directory of thumbnail images
var imgExt	= ".jpg";		//the extension add to large images
var imgDir	= "/pics/";			//the directory of large images
var thNum	= 6;			//number of thumbnail images to display
var thJump	= 0;			//how many thumbnails do you want to jump per mouseover? 0 is all
var scrSpd1	= .75;			//speed in which to scroll thumbnail images (set for the autoSlide, 2 is good for normal)
var sldrPos	= "relative";		//position style of thumbnail DIV
var sldrTop	= "0";			//top position of thumbnail DIV
var sldrLft	= "0";			//left position of thumbnail DIV
var oldHtml	= "";			//page to be loaded if IE4 or NS4
var autoSlide = 1;    //want an auto slider (slide with the cursor movement over thumbs)? 0=no else=yes
var noSlideZone = 2;    //# of thumbnails the no autoslide zone should be (this is a no mouseover section in the middle of the scroll bar)
/*********************
**	Broswer sniffer	**
*********************/
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;

/** If NS4 or IE4 then it's a no go **/
if (isNS4 || isIE4) { document.location = oldHtml }

/*****************************************
**	Preload thumbnail images for use.	**
*****************************************/
var imgs = new Array();
for (i = 0; i < pics.length; i++) {
	imgs[i]		= new Image();
	//alert( thDir + imgs[i] );
	imgs[i].src	= thDir + pics[i] + thExt;
	}

/*********************************************
**	Create the layer or div that will		**
**	be manipulated. Needs to be included	**
**	within a script block where the layer	**
**	or div will be displayed with thumbs.	**
*********************************************/
var intOn  = "";
var endPos;
var scrSpd = scrSpd1;
var prevS  = -1;
var prevXY = -1;
var curWay = "none";  //** what's my current direction?

if (thJump==0) {
  thJump=pics.length;
}

if ( direction == "vertical" ) {
	sldrWdth = thImgWdth;
	sldrHght = thImgHght * thNum;
	sldrMax  = sldrHght;
	sldrBump = thImgHght * thJump;
	sldrAll  = thImgHght * imgs.length;
	sldrOne  = thImgHght;
	sldrMaxO = thImgWdth;
} else {
	sldrWdth = thImgWdth * thNum;
	sldrMax  = sldrWdth;
	sldrHght = thImgHght;
	sldrBump = thImgWdth * thJump;
	sldrAll  = thImgWdth * imgs.length;
	sldrOne  = thImgWdth;
	sldrMaxO = thImgHght;
}
function makeLayer () {
	var thFrm = (document.getElementById) ?
			document.getElementById('thumbBar') : ((document.all) ?
					document.all.thumbBar : document.layers['thumbBar']);
	var sldrStyleTxt = 'position:' + sldrPos + ';';
	sldrStyleTxt += 'top:' + sldrTop + ';';
	sldrStyleTxt += 'left:' + sldrLft + ';';
	sldrStyleTxt += 'width:' + sldrWdth + ';';
	sldrStyleTxt += 'height:' + sldrHght + ';';
	sldrStyleTxt += 'overflow:visible;vertical-align:middle;padding:0;';
	/**	Create the working elements and clone those that need it later	**/
	var cloneImg = document.createElement('img');
	var sldr = document.createElement('div');
	var br = document.createElement('br');
	/**	Set the appropriate attributes on the new elements	**/
	sldr.setAttribute('id', 'slider');
	if (isNS6) {sldr.setAttribute('style', sldrStyleTxt);}
	if (isIE5) {sldr.style.cssText = sldrStyleTxt;}
	/**	Loop through and create the individual img's and span's	**/
	for (i = 0; i < imgs.length; i++) {
		var cldImg = cloneImg.cloneNode(false);
		cldImg.setAttribute('id', i);
		cldImg.setAttribute('border', '0');
		cldImg.setAttribute('width', thImgWdth);
		cldImg.setAttribute('height', thImgHght);
		cldImg.setAttribute('hspace', '0');
		cldImg.setAttribute('vspace', '0');
		cldImg.src = imgs[i].src;
		cldImg.onclick = showPic;
		cldImg.onmousemove = chgCursor;
//		cldImg.onmouseout = chgCursor;
		sldr.appendChild(cldImg);
		if (direction=="vertical"){sldr.appendChild(br)}
		}
	thFrm.appendChild(sldr);
	}
/*********************************************
**	Event handler for clicking on thumbnail	**
*********************************************/
function showPic (evt) {
//	intOn	= true;
  stopScroll();
	evt = (evt) ? evt : ((window.event) ? window.event : false);
	if (evt) {
		var elem = (evt.target) ? evt.target : evt.srcElement;
		if (elem) {
			var index = parseInt(elem.getAttribute("id"));
			document.getElementById('picBox').src = imgDir + pics[index] + imgExt;
//			document.getElementById('picDesc').innerHTML = picstxt[index];
		}
	}
//	intOn	= false;
}

function chgCursor (evt) {
  var xy="-1";
  var xy1="-1";
  var xyO="-1";
  var poss=0;
  var theWay="";
	evt = (evt) ? evt : ((window.event) ? window.event : false);
	if (evt) {
		var elem = (evt.target) ? evt.target : evt.srcElement;
		if (elem) {
			var index = parseInt(elem.getAttribute("id"));
			if (evt.type == "mouseout")
			{
  	  	elem.style.cursor = "default";
  	  	if (autoSlide) {stopScroll();}
  	  }
			else 
			if (evt.type == "mousemove") {
  			elem.style.cursor = "pointer";
  			if (autoSlide) {
    			var y = evt.y;
    			var x = evt.x;
    			
          if ( direction == "vertical" ) {
            xy1 = y;
            xyO = x;
      		} else {
        		xy1 = x;
            xyO = y;
          }
          
//          alert("Xy=" + xy + "  " + prevXY + "  " + sldrMax + "  " + getSldrPos() + "  " + (xy - getSldrPos()) + "  " + Math.abs(xy-prevXY));
          var myPos = getSldrPos();
          xy = xy1 + myPos;
//          if (xy1 < 3 || xy1+2 >= sldrAll || xy < 3 || xy+2 >= sldrMax || xyO < 3 || xyO+2 >= sldrMaxO) {
 //           stopScroll();
  //        }
   //       else 
          if (Math.abs(xy1-prevXY) > 2) {
            poss = (sldrMax/2);
//          alert("Xy=" + xy + "  prevXY=" + prevXY + "  sldrMax=" + sldrMax + "  getsldrpos()=" + getSldrPos() + "  evt.xy=" + evt.x );
            if ( xy < poss-((sldrOne/2)*noSlideZone) ) {
              if ( direction == "vertical" ) {
                theWay = "down";
          		} else {
                theWay = "right";
              }
              if (intOn == "") {
                slideIt(theWay);
              }
              else if (theWay != curWay) {
                stopScroll();
                slideIt(theWay);
              }
              curWay = theWay;
              scrSpd = ((Math.abs((poss-xy)-((sldrOne/2)*noSlideZone))/sldrOne)+1)*scrSpd1;  //** progressive scrolling speed
//              alert(scrSpd);
            }
            else if ( xy > poss+((sldrOne/2)*noSlideZone) ) {
              if ( direction == "vertical" ) {
                theWay = "up";
          		} else {
                theWay = "left";
              }
              if (intOn == "") {
                slideIt(theWay);
              }  
              else if (theWay != curWay) {
                stopScroll();
                slideIt(theWay);
              }
              curWay = theWay;
              scrSpd = ((Math.abs((xy - poss)-((sldrOne/2)*noSlideZone))/sldrOne)+1)*scrSpd1;  //** progressive scrolling speed
//              alert(scrSpd);
            }
            else {
              stopScroll();
            }
            prevXY = xy1;
          }
        }
  	  }
		}
	}
}

/*********************************
**	Set this as an interval to	**
**	scroll the thumbnail images	**
**	to the right within the DIV	**
*********************************/
function scrollRgt () {
	var curPos = getSldrPos();
	if ( curPos >= endPos) {
  	stopScroll();
//		clearInterval(intOn);
//		intOn = "";
//		slideIt("right");
		return;
		}	
	curPos += scrSpd;
	assignSldrPos(curPos);
//  intOn	= setInterval( "scrollRgt()", 1 );
	//assignText(curPos,'curPos');
	}
//function assignText ( val, id ) {
//	document.getElementById(id).value = val
//}
function scrollUp () {
	var curPos = getSldrPos();
	if ( curPos <= endPos ) {
  	stopScroll();
//		clearInterval(intOn);
//		intOn = "";
		return;
	}
	curPos -= scrSpd;
	assignSldrPos( curPos );
	//assignText(curPos,'curPos');
}
function scrollDwn () {
	var curPos = getSldrPos();
	if ( curPos >= endPos ) {
  	stopScroll();
//		clearInterval( intOn );
//		intOn = "";
		return;
	}
	curPos += scrSpd;
	assignSldrPos( curPos );
	//assignText(curPos,'curPos');
}
/*********************************
**	Set this as an interval to	**
**	scroll the thumbnail images	**
**	to the left within the DIV	**
*********************************/
function scrollLft () {
	var curPos = getSldrPos();
	if ( curPos <= endPos) {
  	stopScroll();
//		clearInterval(intOn);
//		intOn = "";
//		slideIt("left");
		return;
		}
	curPos -= scrSpd;
	assignSldrPos(curPos);
//  intOn	= setInterval( "scrollLft()", 1 );
	//assignText(curPos,'curPos');
	}
function getSldrPos () {
	var Pos;
	if (isNS6) {
		if ( direction == "vertical" ) {
			Pos = parseInt(document.getElementById('slider').style.top)
		} else { Pos = parseInt(document.getElementById('slider').style.left) }
	}
	else if (isIE5) {
		if ( direction == "vertical" ) {
			Pos = document.getElementById('slider').style.posTop;
		} else { Pos = document.getElementById('slider').style.posLeft }
	}
	return Pos;
	}
function assignSldrPos (Pos) {
	if (isNS6) {
		if ( direction == "vertical" ) {
			document.getElementById('slider').style.top = Pos + "px"
		} else { document.getElementById('slider').style.left = Pos + "px" }
	}
	else if (isIE5) {
		if ( direction == "vertical" ) {
			document.getElementById('slider').style.posTop = Pos
		} else { document.getElementById('slider').style.posLeft = Pos;} }
	}

/*********************************
**	stop the auto scrolling   	**
*********************************/
function stopScroll () {
  if (intOn) {
		clearInterval(intOn);
		intOn = "";
  }
  curWay = "none";
 }	
  
/*********************************
**	Link this function and pass	**
**	it either 'right' or 'left'	**
*********************************/
function slideIt (way) {
	if ( intOn ) { return; }
	if ( direction == "vertical" ) { veryEnd = -1*(imgs.length*thImgHght) }
	else { veryEnd = -1*(imgs.length*thImgWdth) }
	scrSpd = scrSpd1;  //** reset the scrolling speed
	var pos	= getSldrPos();
	if ( way == "left" ) {
//		var nextPos = pos - sldrWdth;
//		var nextEnd	= nextPos - sldrWdth;
		var nextPos = pos - sldrBump;
		var nextEnd	= nextPos - sldrWdth;

		if ( nextEnd > veryEnd ) {endPos = nextPos}
//		else {endPos = pos - (sldrWdth - (veryEnd - nextEnd))}
		else {endPos = pos - (sldrBump - (veryEnd - nextEnd))}
		//assignText(nextPos,'nextPos');
		intOn	= setInterval( "scrollLft()", 14 );
		}
	if ( way == "right" ) {
//		var nextPos = pos + sldrWdth;
		var nextPos = pos + sldrBump;
		if ( nextPos < 0 ) {endPos = nextPos}
//		else {endPos = pos + (sldrWdth - nextPos)}
		else {endPos = pos + (sldrBump - nextPos)}
		//assignText(nextPos,'nextPos');
		intOn = setInterval( "scrollRgt()", 14 );
		}
	if ( way == "down" ) {
		var nextPos = pos + sldrHght;
		if ( nextPos < 0 ) { endPos = nextPos}
		else { endPos = pos + ( sldrHght - nextPos )}
		//assignText(nextPos,'nextPos');
		intOn = setInterval( "scrollDwn()", 14 );
	}
	if ( way == "up" ) {
		var nextPos = pos - sldrHght;
		var nextEnd = nextPos - sldrHght;
		if ( nextPos > veryEnd ) { endPos = nextPos}
		else { endPos = pos - ( sldrHght - ( veryEnd - nextEnd ) )}
		//assignText(nextPos,'nextPos');
		intOn = setInterval( "scrollUp()", 14 );
	}
}