// Image Gallery Scroll (21-May-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Image Thumb Nails are displayed horizontally
// in a <DIV> of a specified width.
// Thumbnails which overflow this width are hidden.
// MouseOver of a Scroll Bar to the left or right of center
// will scroll the Thumbnails left or right respectively.
// The scroll speed is controlled by moving the mouse position.
//
// The Scroll Bar may defined in the HTML Code or generated by the Script.
//
// Options
// Clicking a specific Thumb Nail will display the Thumb Nail src as the src of a specified <IMG> element.
// Any set of characters of the src may be swapped with a specified set of characters,
// allowing the specified <IMG> element to display a larger image from a different directory.

// There may be as many applications on a page as required.

// ***** Application Notes
//

// ***** The HTML Code
//
// e.g
// <div id="motioncontainer" style="position:relative;margin-left:4%;margin-right:4%;left:0;top:500px;width:740px;height:100px;overflow:hidden;">
//  <div style="position:absolute;left:0;top:0;white-space: nowrap;">
//    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
//    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
//    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
//    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
//    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg" title="Image Title 5" >
//    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
//    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
//    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
//    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
//    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
//    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
//    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
//    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg">
//    <img src="http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r2(t).jpg">
//   </div>
//  </div>
//
// The 'Display Area' is a <DIV>  and must be assigned a unique ID name.
// The style position of the 'Display Area' must be 'position:absolute;' or 'position:relative;'
// and the overflow 'overflow:hidden;'.
// The first nested <DIV> of the 'Display Area' contains the images
// and must have a style position of 'position:absolute;'

// ***** The Scroll Bar
//
// *** The Scroll Bar may be specified in the HTML Code
// e.g.
// <div id="Bar2" class="bar1" style="position:relative;overflow:hidden;width:400px;height:15px;cursor:e-resize;" >Scroll Bar</div>
// This element must have a unique ID name.
// The 'Dispay Area' may be specified as the Scroll Bar.
//
// *** The Scroll Bar generated by the application initialisation.
//
// The Scroll Bar may produced when the application is intialised.
// Other attributes are defined in the initialisation function
// These attributes are:
// The width,
// the height,
// horizontal and vertical offset from the 'Display Area',
// any text to be displayed in the scroll bar,
// class name (to define appearance attributes),
// e.g.
//  .bar {
//   background-Color:#FFFFCC;
//   background-image:url(http://beard.dialnsa.edu/~lain/motiongallery/images/ring/r1(t).jpg);
//   border:solid black 0px;
//   text-align:center;
//  }
// and optional opacity value (.1 to 99)
//
// The bar MUST have a background color or image.
// the minimum requirement is a blank.gif as a background image.


// ***** Displaying a Larger Image
//
// The 'Larger' image element must be defined in the HTML Code
//  and must be assigned a unique ID name.
// e.g.
//  <img id="MainImg" src="Blank.gif" width="200" height="200" />
//


// ***** Displaying Messages
//
// The element to display messages must be defined in the HTML Code
//  and must be assigned a unique ID name.
// e.g.
//  <div id="MessPanel" style="width:200px;height:100px;background-color:#FFFFCC;text-align:center;" ></div>
//
// ** The Message Array
//
// An array must be assigned to define the messages
// e.g.
//  var MessAry=[];
//  MessAry[0]=['MessPanel'];
//  MessAry[1]='Image One';
//  MessAry[2]='Image Two';
//  MessAry[3]='Image Three';
//  MessAry[4]='Image Four';
//
// The first field is an array
//   first field field 0 = the unique ID name of the message panel (string)
//   first field field 1 = scr text to swap.     (string) (see ***** Directory Swapping)
//   first field field 2 = the replacement text. (string) (see ***** Directory Swapping)
//
// subsequent fields define the message for each image (from 1 to max number of images)
//
// Note:
// If the message array field matching the Thumb Nail Image is is null the display will be ''
// or if available the  Thumb Nail Image title.
//
// This array is specified in the application initalisation call.
//

//
// ***** Directory Swapping
//
// By default the 'Large' image will display the same image as the Clicked Thumb Nail.
// Larger images of the same name may be available in a different directory.
// Fields 1 and 2 of the Message Array field 0 may specify the directory names if the Thumb Nail and Large Images.
// The if the directory specified in the src passed to the Click function matches field 1
// it will be replaced with field 2 when displaying the main image.
//

// ***** Initialising the Application
//
// Each application would normally be initialised by a <BODY> or window onload event.
// e.g.
// <body onload="zxcGalleryScroll('Gallery1',100,20,0,-30,'Scroll Bar','bar',50,'MainImg',MessAry);">
// where function 'zxcGalleryScroll('
// parameter 0  = the unique ID name of the 'Display Area' element.            (string)
// parameter 1  = (optional) the unique ID name of the 'Large Image' element.  (string)
// parameter 2  = (optional) the message array.                                (a global array variable)
// parameter 3  = (optional) the unique ID name of the 'Bar' element.          (string)
// ** if the bar is to be generated by the code use null and complete parameters 4 to 10
// parameter 4  = the width of the scroll bar.                                 (digits);
// parameter 5  = the height of the scroll bar.                                (digits);
// parameter 6  = the scroll bar horizontal offset from the 'Display Area'.    (digits)
// parameter 7  = the scroll bar vertical   offset from the 'Display Area'.    (digits)
// parameter 8  = any text to be displayed in the scroll bar.                  (string)
// parameter 9  = the scroll bar class name (to define appearance attributes). (string)
// parameter 10 = (optional) the scroll bar opacity value.                     (digits - 0.1 to 99)


// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// These character are easily changed to characters of choice using global find and replace.
//
// The Functional Code(about (5.25K) is best as an External JavaScript
//
// Tested with IE6 and Mozilla FireFox
//

// ***** Example Message Array

var MessAry=[];
MessAry[0]=['MessPanel','Thumbs','Main'];
MessAry[1]='Array Image Message One';
MessAry[2]='Array Image Message Two';
MessAry[3]='Array Image Message Three';
MessAry[4]='Array Image Message Four';
MessAry[8]='Array Image Message Eight';


// **** Functional Code - NO NEED to Change

var zxcEvt=0;
var zxcOOPCnt=0;
var zxcCursor=document.all?'hand':'pointer';

function zxcGalleryScroll(){
 var zxcargs=zxcGalleryScroll.arguments;
 var zxcp=document.getElementById(zxcargs[0]);
 zxcp.gal=zxcp.getElementsByTagName('DIV')[0];
 zxcp.galml=zxcp.offsetWidth-zxcp.gal.offsetWidth;
 zxcp.cen=zxcp.offsetWidth/2;
 zxcp.top=zxcargs[5]||zxcp.gal.offsetHeight;
 zxcp.oop=new zxcOOPGal(zxcp);
 zxcp.bar=document.getElementById(zxcargs[3]);
 if (!zxcp.bar){
  zxcp.bar=zxcStyle('DIV',{position:'absolute',overflow:'hidden',cursor:'e-resize',left:(zxcPos(zxcp)[0]+zxcargs[6]||0)+'px',top:(zxcPos(zxcp)[1]+zxcargs[7]||0)+'px',width:(zxcargs[4]||zxcp.offsetWidth)+'px',height:(zxcargs[5]||0)+'px'},zxcargs[8]);
  zxcp.bar.className=zxcargs[9];
  document.getElementsByTagName('BODY')[0].appendChild(zxcp.bar);
 }
 zxcp.bar.p=zxcp;
 zxcOpacity(zxcp.bar,zxcargs[10]||100);
 zxcAddEvt(zxcp.bar,'zxcMove','mousemove');
 zxcAddEvt(zxcp.bar,'zxcMoveStop','mouseout');
 zxcp.main=document.getElementById(zxcargs[1]);
 if (zxcp.main){ zxcAddEvt(zxcp,'zxcClick','click'); zxcStyle(zxcp,{cursor:zxcCursor}); }
 if (zxcargs[2]){
  zxcp.mp=document.getElementById(zxcargs[2][0][0]);
  zxcp.mpary=zxcargs[2];
  zxcargs[2][0][1]=zxcargs[2][0][1]||'';
  zxcargs[2][0][2]=zxcargs[2][0][2]||'';
 }
}

function zxcClick(zxce){
 var zxcimgobj=zxcEventObj(zxce);
 if (this.mp){
 this.main.src=zxcimgobj.src.replace(this.mpary[0][1],this.mpary[0][2]);
  var zxcimgs=this.getElementsByTagName('IMG');
  for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){
   if (zxcimgs[zxc0]==zxcimgobj){
    this.mp.innerHTML=this.mpary[zxc0+1]||zxcimgobj.title||'';
    break;
   }
  }
 }
 else { this.main.src=zxcimgobj.src; }
}

function zxcEventObj(zxce){
 if (!zxce) var zxce=window.event;
 zxce.cancelBubble=true;
 if (zxce.stopPropagation) zxce.stopPropagation();
 if (zxce.target) zxceobj=zxce.target;
 else if (zxce.srcElement) zxceobj=zxce.srcElement;
 if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
 return zxceobj;
}


function zxcMove(zxce){
 var zxcposx=zxcMse(zxce)[0]-zxcPos(this.p)[0];
 var zxcposy=zxcMse(zxce)[1]-zxcPos(this.p)[1];
 if (this.p.rp){ this.p.oop.dir=(2+Math.min(Math.abs(zxcposx-this.p.rp)/10,5)); } //edit the number before '+Math.min' to set the speed of scrolling (Original setting was 1)
 if (this.p.lp){ this.p.oop.dir=-(2+Math.min(Math.abs(zxcposx-this.p.lp)/10,5)); }
 if (zxcposx<this.p.cen&&this.p.oop.pos<0&&(this.p.oop.dir<=0)){
  this.p.rp=zxcposx;
  this.p.lp=null;
  clearTimeout(this.p.oop.to);
  this.p.oop.dir=1;
  this.p.oop.move();
 }
 else if (zxcposx>this.p.cen&&this.p.oop.pos>this.p.galml&&(this.p.oop.dir>=0)){
  this.p.rp=null;
  this.p.lp=zxcposx;
  clearTimeout(this.p.oop.to);
  this.p.oop.dir=-1;
  this.p.oop.move();
 }
}

function zxcMoveStop(){
 clearTimeout(this.p.oop.to);
 this.p.lp=null; this.p.rp=null; this.p.oop.dir=0;
}

function zxcOOPGal(zxcobj){
 this.obj=zxcobj;
 this.ref='zxcgal'+zxcOOPCnt++;
 window[this.ref]=this;
 this.dir=0;
 this.pos=zxcobj.gal.offsetLeft;
 this.to=null;
}

zxcOOPGal.prototype.move=function(){
 if ((this.dir<0&&this.pos>this.obj.galml)||(this.dir>0&&this.pos<0)){
  this.obj.gal.style.left=(this.pos+=this.dir)+'px';
  this.setTimeOut('move();',20);
 }
 else {
  if (this.dir<0){ this.obj.gal.style.left=this.obj.galml+'px'; }
  else { this.obj.gal.style.left='0px'; }
 }
}

zxcOOPGal.prototype.setTimeOut=function(zxcf,zxcd){
 this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

function zxcMse(event){
 if(!event) var event=window.event;
 if (document.all){ return [event.clientX+zxcDocS()[0],event.clientY+zxcDocS()[1]]; }
 else { return[event.pageX,zxcMseY=event.pageY]; }
}

function zxcDocS(){
 var zxcsx,zxcsy;
 if (!document.body.scrollTop){ zxcsx=document.documentElement.scrollLeft; zxcsy=document.documentElement.scrollTop; }
 else { zxcsx=document.body.scrollLeft; zxcsy=document.body.scrollTop; }
 return [zxcsx,zxcsy];
}

function zxcPos(zxcobj){
 zxclft=zxcobj.offsetLeft;
 zxctop=zxcobj.offsetTop;
 while(zxcobj.offsetParent!=null){
  zxcpar=zxcobj.offsetParent;
  zxclft+=zxcpar.offsetLeft;
  zxctop+=zxcpar.offsetTop;
  zxcobj=zxcpar;
 }
 return [zxclft,zxctop];
}

function zxcStyle(zxcele,zxcstyle,zxctxt){
 if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
 for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
 if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
 return zxcele;
}

function zxcOpacity(zxcobj,zxcopc){
 if (zxcopc<0||zxcopc>100){ return; }
 if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
 else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
 else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')';	}
 else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
}

function zxcEventAdd(zxco,zxct,zxcf) {
 if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
 else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
 else {
  var zxcPrev=zxco["on" + zxct];
  if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
  else { zxco['on'+zxct]=zxco[zxcf]; }
 }
}

function zxcAddEvt(zxc,zxcfun,zxcevt){
 zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
 zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
 zxcEvt++;
}