var SlideShow =                // This is the PageBanner object consructor
{
SlideDelay: 5000,
SlideTrans: 100,
TransCnt: 0,
Images: null,
ImageCount: 0,

_cmd: "",
_shortIndex: 0,
_longIndex: 0,
_preIndex: 0,
_preLoaded: 0,
_imagePath: "",
_curSrc: "",
_curHi: 0,
_curWid: 0,
_curName: "",
NumPics: 0,
SSHeight: 240,
SSWidth: 320,
PlayBack: false,
HoverPause: false,
BannerFont: "Trebuchet Arial",        // Default font for captions is Arial. Change by "PageBanner.BannerFont = 'font';"

_preLoadBuf: null,
_imgList: null,
ssdiv: null,
hvdiv: null,
htdiv: null,
WaitLoop: 0,

_onImage: 0,


ParseCommand: function(qrStr) {
    var spQrStr = qrStr.substring(1);
    var arr = spQrStr.split('&');
    var ArQstr = new Array();
    var iloop;
    for (iloop = 0; iloop < arr.length; iloop++) {
        var index = arr[iloop].indexOf('=');
        var key = arr[iloop].substring(0, index);
        var val = arr[iloop].substring(index + 1);

        //this._arrQrStr[key] = val;
        ArQstr[key] = val;
    }
    this.NumPics = ArQstr['NumPics'];
    this.SSHeight = ArQstr['ImgVert'];
    this.SSWidth = ArQstr['ImgHoriz'];
    this._imagePath = ArQstr['ImgPath'];
    this._imgList = new Array();
    for (iloop = 0; iloop < this.NumPics; iloop++) {
        this._imgList[iloop] = new Object();
        this._imgList[iloop].name = ArQstr[ArQstr['ImgPrefix'] + iloop];
        this._imgList[iloop].width = 0;
        this._imgList[iloop].height = 0;
        this._imgList[iloop].index = iloop;
        this._imgList[iloop].src = this._imagePath + this._imgList[iloop].name;
        this._imgList[iloop].caption = "Image " + (iloop + 1) + " of " + this.NumPics;
    }
    if (this.NumPics < 5) this._preLoaded = this.NumPics;
    else this._preLoaded = 5;
    this._preLoadBuf = new Array();
    for (iloop = 0; iloop < this._preLoaded; iloop++) {
        this._preLoadBuf[iloop] = new Image();
    }
},
BrowserIE: function() {
    var agt = navigator.userAgent.toLowerCase();
    if (agt.indexOf("msie") != -1)
        return true;
    return false;
},
// This function creates and returns an DIV Element Object to be inserted into the DOM for MouseOver blanking effect.
HoverPane: function() {
    // Dynamically create new DIV element with default values.
    var hPane = document.createElement('div');
    hPane.setAttribute("id", "hpane");
    hPane.style.visibility = "hidden";
    hPane.style.backgroundColor = "#000000";
    // This is to allow the frames to overlap.
    hPane.style.position = "absolute";
    hPane.style.top = "3px";
    hPane.style.left = "3px";
    hPane.style.zIndex = this.ImageCount;
    // Match the size to the Frame size
    hPane.style.width = this.SSWidth + "px";
    hPane.style.height = this.SSHeight + "px";
    // Set the opacity level to 40%. This gives a nice blanking look.
    hPane.style.opacity = 0.50;
    hPane.style.MozOpacity = 0.50;
    hPane.style.KhtmlOpacity = 0.50;
    hPane.style.filter = "alpha(opacity=50)";
    // Return the object for insertion into the DOM
    return hPane;
},
// This function creates and returns a DIV Element Object to be inserted into the DOM for MouseOver captions.
HoverText: function() {
    // Dynamically create new DIV element with default values.
    var hText = document.createElement('div');
    hText.setAttribute("id", "htext");
    hText.style.padding = "10px";
    hText.style.visibility = "hidden";
    // Set the default Font and Color for the caption text.
    hText.style.textAlign = "Center";
    hText.style.color = "#FFFF99";
    hText.fontWeight = "normal";
    hText.style.fontSize = "18px";
    hText.style.fontFamily = this.BannerFont;
    // This is to allow for overlapping with the other DIVs
    hText.style.position = "absolute";
    hText.style.top = 0;
    hText.style.left = 0;
    hText.style.zIndex = this.ImageCount + 1;
    // Match the size to the Frame Size
    hText.style.width = parseInt(this.SSWidth - 20) + "px";
    hText.style.height = parseInt(this.SSHeight - 20) + "px";
    // Return the object for insertion into the DOM
    return hText;
},
AddHover: function() {
    this.ssdiv.appendChild(this.HoverPane());
    this.ssdiv.appendChild(this.HoverText());
    this.hvdiv = document.getElementById('hpane');
    this.htdiv = document.getElementById('htext');
},
PreLoadImages: function(FirstID) {
    this._preIndex = FirstID - 1;
    if (this._preIndex < 0)
        this._preIndex = this.NumPics - 1;
    for (var i = 0; i < this._preLoaded; i++) {
        this._preLoadBuf[i].src = this._imgList[this._preIndex].src;
        if (this._preIndex > (this.NumPics - 1))
            this._preIndex = 0;
    }
    this._shortIndex = 0;
    this._longIndex = FirstID;
},
PreLoadDone: function() {
    for (var iloop = 0; iloop < this._preLoaded; iloop++) {
        if (!this._preLoadBuf[iloop].complete)
            return false;
    }
    return true;
},
PreLoadNext: function() {
    this._preLoadBuf[this._shortIndex].src = this._imgList[this._preIndex].src;
    if (this._preIndex > (this.NumPics - 1)) this._preIndex = 0;
    if (this._shortIndex > (this._preLoaded - 1)) this._shortIndex = 0;
},
ThumbDiv: function(frameid, twid, thi) {
    var tDiv = document.createElement('div');
    tDiv.setAttribute("id", "tdiv" + frameid);
    tDiv.style.width = (twid || 100) + "px";
    tDiv.style.height = (thi || 75) + "px";
    tDiv.style.overflow = "hidden";
    if (this.BrowserIE()) {
        tDiv.style.position = "relative";
    }
    else {
        tDiv.style.display = "table";
        tDiv.style.position = "static";
    }
    tDiv.style.borderWidth = "2px";
    tDiv.style.borderStyle = "outset";
    tDiv.style.borderColor = "#ddddff";
    tDiv.style.backgroundColor = "#333333";
    return tDiv;
},
ThumbFrame: function(frameid) {
    var tFrm = document.createElement('div');
    tFrm.setAttribute("id", "tfrm" + frameid);
    if (this.BrowserIE()) {
        tFrm.style.position = "absolute";
        tFrm.style.top = "50%";
        tFrm.style.left = "50%";
    }
    else {
        tFrm.style.display = "table-cell";
        tFrm.style.verticalAlign = "middle";
        tFrm.style.textAlign = "center";
        tFrm.style.position = "static";
    }
    return tFrm;
},
ThumbImg: function(srcimg, srcnam, srcloc) {
    var tImg = document.createElement('img');
    tImg.setAttribute("src", "ThumbNail.aspx?file=" + srcimg);
    tImg.setAttribute("id", "timg" + srcloc);
    if (this.BrowserIE()) {
        tImg.style.position = "relative";
        tImg.style.top = "-50%";
        tImg.style.left = "-50%";
    }
    tImg.onclick = function() { SlideShow.SetImage(srcloc); }
    tImg.setAttribute("title", srcnam);
    return tImg;
},
_addThumbs: function() {
    var thumbLoc = document.getElementById('thumbDiv1');
    var thumbDV;
    for (var iloop = 0; iloop < this.NumPics; iloop++) {
        thumbLoc.appendChild(this.ThumbDiv(iloop, 100, 75));
        thumbDV = document.getElementById('tdiv' + iloop);
        thumbDV.appendChild(this.ThumbFrame(iloop));
        thumbDV = document.getElementById('tfrm' + iloop);
        thumbDV.appendChild(this.ThumbImg(this._imgList[iloop].src, this._imgList[iloop].name, iloop));
    }
},
ThumbsDone: function() {
    for (var iloop = 0; iloop < this.NumPics; iloop++) {
        if (!document.getElementById('timg' + iloop).complete)
            return false;
    }
    return true;
},
InsertButton: function(bid, bval, bclick) {
    var tBtn = document.createElement('input');
    tBtn.setAttribute("id", bid);
    tBtn.setAttribute("type", "button");
    tBtn.value = bval;
    tBtn.onclick = bclick;
    tBtn.style.padding = "2px";
    tBtn.style.fontWeight = "bold";
    tBtn.style.fontSize = "x-small";
    tBtn.style.fontFamily = "Arial";
    return tBtn;
},
AddButtons: function() {
    bDiv = document.getElementById('ButtonDiv');
    bDiv.appendChild(this.InsertButton("MoveFirstB", "<< First", function() { SlideShow.GoFirst(); }));
    bDiv.appendChild(this.InsertButton("MovePrevB", "< Prev", function() { SlideShow.GoPrevious(); }));
    bDiv.appendChild(this.InsertButton("PausePlayB", "Pause | |", function() { SlideShow.PausePlay(); }));
    bDiv.appendChild(this.InsertButton("MoveNextB", "Next >", function() { SlideShow.GoNext(); }));
    bDiv.appendChild(this.InsertButton("MoveLastB", "Last >>", function() { SlideShow.GoLast(); }));
},
GoFirst: function() {
    this.SetImage(0);
},
GoNext: function() {
    this.SetImage(this.AdjustLongIndex(1));
},
GoPrevious: function() {
    this.SetImage(this.AdjustLongIndex(-1));
},
AdjustLongIndex: function(vdir) {
    var NewIndex = this.Images[this._onImage].index + vdir;
    if (NewIndex < 0)
        NewIndex = this.NumPics - Math.abs(NewIndex);
    return (NewIndex);
},
GoLast: function() {
    this.SetImage(this.NumPics - 1);
},
PausePlay: function() {
    if (this.PlayBack)
        this.PausePlayback();
    else
        this.ContinuePlayback();
},
ContinuePlayback: function() {
    var Bvar = document.getElementById('PausePlayB');
    Bvar.value = "Pause | |";
    this.PlayBack = true;
},
PausePlayback: function() {
    var Bvar = document.getElementById('PausePlayB');
    Bvar.value = "Play |>";
    this.PlayBack = false;
},
Hover: function(pmode) {
    // Set the global 'paused' flag.
    if (pmode) {
        this.HoverPause = true;
        this.hvdiv.style.visibility = "visible";
        this.htdiv.style.visibility = "visible";
        this.Images[this._onImage].ChangeOpacity(80);
    }
    // If we're not paused, turn off the blanking effect.
    else {
        this.HoverPause = false;
        this.hvdiv.style.visibility = "hidden";
        this.htdiv.style.visibility = "hidden";
        this.Images[this._onImage].ChangeOpacity(100);
    }
},
SetImage: function(inpPar) {
    this.PausePlayback();
    this._longIndex = inpPar;
    this.LoadNext(this.NextOn());
    this.NormTrans();
},
NextOn: function() {
    return ((this._onImage == 0) ? 1 : 0);
},
ShowLargeImage: function() {
    var sIndex;
    if (this.SlideIndex == 1)
        sIndex = 0;
    else
        sIndex = 1;

    var nWind = window.open("", "mywindow", "status=0, scrollbars=1, resizable=1");
    nWind.document.write("<img id='previmg' alt='' src='ThumbNail.aspx?file=" +
        this.Images[this._onImage].src + "&full=1' width=" +
        this.Images[this._onImage].width + " height=" +
        this.Images[this._onImage].height + "/>");
    //        this._imgList[this._onImage].src + "&full=1' width=" +
    //        this._imgList[this._onImage].width + " height=" +
    //        this._imgList[this._onImage].height + "/>");
    while (!nWind.document.getElementById('previmg').complete) { };
    var vWid = nWind.document.getElementById('previmg').width;
    var vHi = nWind.document.getElementById('previmg').height;
    var nImg = nWind.document.getElementById('previmg');
    var wWid = nWind.document.body.offsetWidth;
    var wHi = nWind.document.body.offsetHeight;
    if (vHi < vWid) {
        nImg.width = wWid;
        nImg.height = wWid * (vHi / vWid);
    }
    else {
        nImg.height = wHi;
        nImg.width = wHi * (vWid / vHi);
    }
    //    nWind.document.title = "Full Size " + this._imgList[this._onImage].name;
    nWind.document.title = "Full Size " + this.Images[this._onImage].name;
},
Init: function(sscmd, ssdelay) {
    this._cmd = sscmd;
    this.ParseCommand(document.getElementById(this._cmd).value);
    this._fgDelay = ssdelay / 10;
    this.ssdiv = document.getElementById('ssdiv');
    this._addThumbs();
    this.AddButtons();

    this.Images = new Array();
    this.AddImage(this._imgList[0], this.SSHeight, this.SSWidth, this.BrowserIE());
    this.AddImage(this._imgList[1], this.SSHeight, this.SSWidth, this.BrowserIE());

    this.AddHover();

    this.PlayBack = true;
    this.HoverPause = false;
    this.PreLoadImages(0);

    this._longIndex = 2;
    this.TransCnt = 0;
    this.SlideDelay = ssdelay;
    this.SlideTrans = ssdelay / 50;
    this.WaitForLoad();
},
SetHover: function(hcapt, hsize, hcol) {
    if (this.BrowserIE())
        this.htdiv.innerText = hcapt;
    else
        this.htdiv.textContent = hcapt;
    this.htdiv.style.top = (this.hvdiv.offsetTop + (this.htdiv.offsetHeight / 2)) + "px";
    this.htdiv.style.left = (this.hvdiv.offsetLeft + (this.htdiv.offsetLeft / 2)) + "px";
    this.htdiv.style.fontSize = hsize || "24px";
    this.htdiv.style.color = hcol || "#FFFF99";
},
WaitForLoad: function() {
    if (!this.PreLoadDone()) {
        this.SetHover("Loading... (" + (this.WaitLoop++) + ")", "xx-large", "#FFFF99");
        this.hvdiv.style.visibility = "visible";
        this.htdiv.style.visibility = "visible";
        setTimeout("SlideShow.WaitForLoad()", 250);
        return;
    }
    this.hvdiv.style.visibility = "hidden";
    this.htdiv.style.visibility = "hidden";
    this.SetHover("Image 1 of " + this.NumPics);

    this.ssdiv.onmouseover = function() { SlideShow.Hover(1); };
    this.ssdiv.onmouseout = function() { SlideShow.Hover(0); };

    this.Images[0].FadeIn();
    this.TimedTrans();
},
LoadNext: function(fid) {
    this.Images[fid].NewImage(this._imgList[this._longIndex++]);
    this.PreLoadNext();
    if (this._longIndex >= this.NumPics) {
        this._longIndex = 0;
    }
},
TimedTrans: function() {
    setTimeout("SlideShow.TimedTrans()", 50);
    if (!this.PlayBack || this.HoverPause)
        return;
    if (this.TransCnt++ < this.SlideTrans)
        return

    this.TransCnt = 0;
    this.NormTrans();
},
NormTrans: function() {
    this.Images[this._onImage].FadeOut();
    this._onImage = this.NextOn();
    this.SetHover(this.Images[this._onImage].caption);
    this.Images[this._onImage].FadeIn();
},
AddImage: function(imginfo, shi, swid, brsr) {
    var pimg =
        {
            src: imginfo.src || "",
            name: imginfo.name || "",
            caption: imginfo.caption || "",
            width: imginfo.width || 0,
            height: imginfo.height || 0,
            index: imginfo.index || 0,
            sshi: shi || 240,
            sswid: swid || 320,
            refdb: false,
            id: 0,
            Ready: false,
            OverRide: false,
            _DivOb: null,
            _ImageOb: null,
            _PreLoad: null,
            _ReflectOb: null,
            _context: null,
            _outLoop: 0,
            _inLoop: 0,
            _fodiv: function(fid) {
                var tDiv = document.createElement('div');
                tDiv.setAttribute("id", "sdiv_" + fid);
                tDiv.style.visibility = "hidden";
                tDiv.style.position = "absolute";
                tDiv.style.width = (parseInt(this.sswid) + 8) + "px";
                tDiv.style.height = (parseInt(this.sshi) + 8) + "px";
                tDiv.style.top = 0;
                tDiv.style.left = 0;
                return tDiv;
            },
            _nimage: function(fid) {
                var tImg = document.createElement('img');
                tImg.setAttribute("src", "");
                tImg.setAttribute("id", "img_" + fid);
                tImg.setAttribute("title", "Click to load larger image");
                tImg.style.position = "absolute";
                tImg.style.top = 0;
                tImg.style.left = 0;
                tImg.style.zIndex = ((fid * 3) + 1);
                tImg.style.padding = "1px";
                tImg.style.borderStyle = "outset";
                tImg.style.borderWidth = "3px";
                tImg.style.borderColor = "#999";
                tImg.style.visibility = "visible";
                return tImg;
            },
            ForceOut: function() {
                this.OverRide = false;
                this._outLoop = this._inLoop;
                this.FadeOut();
            },
            ForceIn: function() {
                this.OverRide = true;
                this._inLoop = this._outLoop;
                this.FadeIn();
            },
            FadeOut: function() {
                if (this._outLoop <= 0) {
                    this._inLoop = 0;
                    SlideShow.LoadNext(this.id);
                    return;
                }
                setTimeout("SlideShow.Images[" + this.id + "].FadeOut()", 10);
                this.ChangeOpacity(this._outLoop-- * 2);
            },
            FadeIn: function() {
                if (this._inLoop > 50) {
                    this._outLoop = 50;
                    return;
                }
                setTimeout("SlideShow.Images[" + this.id + "].FadeIn()", 10);
                if (!this.Ready)
                    return;
                this.ChangeOpacity(this._inLoop++ * 2);
            },
            ChangeOpacity: function(opacity) {
                this._DivOb.style.opacity = (opacity / 100);
                this._DivOb.style.MozOpacity = (opacity / 100);
                this._DivOb.style.KhtmlOpacity = (opacity / 100);
                this._DivOb.style.filter = "alpha(opacity=" + opacity + ")";
            },
            SetImageParameters: function() {

                if ((!this._ImageOb.complete) || (!this._PreLoad.complete)) {
                    setTimeout("SlideShow.Images[" + this.id + "].SetImageParameters()", 50);
                    return;
                }
                this._ImageOb.style.marginLeft = 0;
                this._ImageOb.style.marginTop = 0;

                var srcHi = 0;
                var srcWid = 0;
                srcHi = this._PreLoad.height;
                srcWid = this._PreLoad.width;

                if ((srcHi / srcWid) <= (this.sshi / this.sswid)) {
                    this._ImageOb.style.width = this.sswid + "px";
                    this._ImageOb.style.height = ((srcHi * (this.sswid / srcWid)) + 50) + "px";
                }
                else {
                    this._ImageOb.style.height = this.sshi + "px";
                    this._ImageOb.style.width = ((srcWid * (this.sshi / srcHi)) + 50) + "px";
                }
                this.width = srcWid;
                this.height = srcHi;
                this._ImageOb.style.marginTop = "" + ((this.sshi - this._ImageOb.height) / 2) + "px";
                this._ImageOb.style.marginLeft = "" + ((this.sswid - this._ImageOb.width) / 2) + "px";
                this.Ready = true;
                this._PreLoad = null;
            },
            SetSrc: function(nsrc) {
                this._ImageOb.src = nsrc;
                this.SetImageParameters();
            },
            NewImage: function(imginfo) {
                this.Ready = false;
                this.src = imginfo.src;
                this.name = imginfo.name;
                this.width = imginfo.width;
                this.height = imginfo.height;
                this.index = imginfo.index;
                this.caption = imginfo.caption;
                this.ChangeOpacity(0);
                this._PreLoad = new Image();
                this._PreLoad.src = this.src;
                this.SetSrc(this.src);
            },
            ImageInit: function(cimg) {
                document.getElementById('ssdiv').appendChild(this._fodiv(cimg));
                this._DivOb = document.getElementById('sdiv_' + cimg);
                this._DivOb.appendChild(this._nimage(cimg));
                this.id = cimg;
                this._ImageOb = document.getElementById('img_' + cimg);
                this.ChangeOpacity(0);
                this._DivOb.style.visibility = "visible";
            }
        };
    this.Images[this.ImageCount] = pimg;
    if (brsr != null) {
        pimg.refdb = brsr;
    }
    this.Images[this.ImageCount].ImageInit(this.ImageCount);
    this.Images[this.ImageCount].NewImage(imginfo);
    return this.ImageCount++;
}
}