// SCRIPT MODULES LIBRARY   ECMAScript v3.0   (c) 2007 Codesmiths codesmiths.com.au - all rights reserved
//
// a Global object CSS07 is assumed declared CSS07  may be made unique for deployment
// this relies on CSS07 being populated with CSS07.kpl
try
{

// ===========================================================================
// NAMESPACE MANAGEMENT - ONLY ONE GLOBAL IDENTIFIER RESERVED ('CSS07')
  if (!CSS07.gal) { window.status = 'CSM-LIB: CSS07.gal not loaded]'; throw new Error(window.status); }

  if (!CSS07.flm) { CSS07.flm = {USAGE:'codesmiths.com.au ecmascript & event lib'}; }

// ===========================================================================
// CLASS: Controls for a film strip thumbnail control  --  PJM
// uses the gal object ImageLoader

CSS07.flm.roundWid   = 64;      // pixels to round full-size image size (increases re-use of cache)
CSS07.flm.roundHgt   = 20;      // "
CSS07.flm.previewWid = 320;     // default size for preview width
CSS07.flm.previewHgt = 200;     //
CSS07.flm.defaultWid = 960;     // default size for full-size image width
CSS07.flm.defaultHgt = 720;     //
CSS07.flm.marginPerCent = 3;    // allowance for margins and borders
CSS07.flm.captionHeight = 40;   // allowance for caption if present (pixels)
CSS07.flm.defaultCaption = "'Image '  + (this.currentFrame +1)";  // evaluated each frame
CSS07.flm.previewZindex  = 100;
CSS07.flm.defaultDiv = 'preview';  // for the user-located div, needs to match style sheet
CSS07.flm.StripTip   = 'Double click on strip to pause';
CSS07.flm.PreviewTip = 'Click to see a larger image';
CSS07.flm.previewTime = 3; // delay after mouse out in seconds
CSS07.flm.previewMargin = 10; // min proximity to edge of window


CSS07.flm.FilmStrip = function (div_ID,        // CLASS CONSTRUCTOR
                                img_folder,    // root down (virtual) path to the folder of images
                                wid, hgt,      // dimensions of the strip (zero for the long axis)
                                gap,           // Gap between frames, also the side border size at this stage
                                ticks, speed,  // ticks per second and px per second
                                screen_ID,     // Target for display of previews, make a popup if == "auto"
                                image_page,    // if defined, this is the URL to display the large image (accepts File=, Width=, Height=)
                                x_margin,      // pl margin left +right (for above to calculate requested image size)
                                y_margin,
                                first_frame)   // pl margin top + bottom
        {
          try
          {
            if (!(this instanceof CSS07.flm.FilmStrip ))             { return null; }  // constructor was CALLed as a function

            CSS07.kpl.Encapsulator.call(this);                   // 'inherit'   Encapsulator's features
            CSS07.gal.ImageKeys.call(this);                      // 'inherit'   ImageKeys's features
            CSS07.gal.Browsers.call(this);                       // 'inherit'   Browser properties

            CSS07.csm.EnhanceArray();                            // chcks for array features.

            this.container = window.document.getElementById(div_ID);

            if(this.container) {

              // position the start point  ??

              var conWidth = this.container.offsetWidth;

              this.stepTime = 1.0/ticks;
              this.stride = speed*this.stepTime;
              this.width  = parseInt(wid);
              this.height = parseInt(hgt);
              this.firstItemX = (this.width  === 0) ? 0 : -1;  // horizontal strip
              this.firstItemY = (this.height === 0) ? 0 : -1;  // vertical   strip
              this.statusText = '';

              this.preloadStrip = new Image();
              if (this.msie) {
                //window.status = 'MSIE';
                window.document.body.appendChild(this.preloadStrip);
                this.preloadStrip.style.display = 'none';
                try {
                  // remove flicker on bkgnd change
                  document.execCommand("BackgroundImageCache", false, true);
                } catch(err) {};
              }
              //window.status = 'Binding filmstrip.filmStripLoaded';
              var sepChar = (img_folder.charAt(img_folder.length -1) == '/') ? '' : '/';
              this.imgFolder = img_folder + sepChar;

              this.setSize(this.width, this.height);
              var strip_name = 'filmStrip_' + this.sufx;
              var reqKey = this.args + this.jKeyE('gap') + (gap || '5');
              // this.imgLoadURI is inherited from imageKeys (over-ridable by server aspx)
              this.stripURI = this.fldrLoadURI + encodeURI(img_folder) + sepChar +  reqKey;
              this.tick = this.bind(this, this.step);
              this.imgURI = this.imgLoadURI + encodeURI(img_folder) + sepChar;
              this.onPreloadStrip = this.bindEvent(this.preloadStrip, this.bind(this, this.filmStripLoaded), 'load');

              //set filmstrip object based on height/width
              this.stripInfo=CSS07[strip_name];

              if (image_page) {
                this.setupImagePageLink(image_page, x_margin, y_margin);
              }

              if (this.stripInfo && screen_ID !== undefined) {
                // Preview required
                this.setupPreviewPane(screen_ID);

                // setup strip
                var maxFrame = this.stripInfo.imgNames.length;
                if (first_frame) {
                  // check constructor argument (1 to n)
                  this.currentFrame = first_frame > 1 &&  first_frame <= maxFrame ? first_frame -1 : 0;
                } else {
                  if (this.screen) {
                    this.firstImage = this.screen.getAttribute('src');
                    if (this.firstImage && this.firstImage.length) {
                      this.firstImage = CSS07.csm.filePart(this.firstImage);
                      this.currentFrame = this.stripInfo.imgNames.indexOf(this.firstImage);
                    }
                  }
                }
                if (this.currentFrame === undefined || this.currentFrame<0 || this.currentFrame> this.stripInfo.imgNames.length ) {
                  this.currentFrame = CSS07.csm.randomInteger(0, maxFrame);
                }


                if (this.screen && !(this.screenType == 'auto')) {
                  this.setupPreviewImage(screen_ID);
                }
              }
              // dynamic loading of filmstrip -- different if running from a server
              if (window.location.href.substr(0,6) == 'file:/') {
                // for debug animate the strip with local files if not defined by css
                var stripImg = this.container.style.backgroundImage;
                if (stripImg.length === 0) { stripImg = CSS07.img.localStripURI; }
                this.imgFolder = CSS07.img.localToRoot + encodeURI(this.imgFolder);   // for consistent checking
                if (image_page && this.imagePage.substr(0,1) == '/') {
                  this.imagePage = CSS07.img.localToRoot + image_page;
                }
                this.imgPrefix = CSS07.img.localToRoot;  // for external images
                this.args='';
                this.preloadStrip.setAttribute('src', stripImg);
              } else {
                this.imgPrefix = this.imgLoadURI;  // for external images
                this.imgFolder = this.imgURI;
                this.preloadStrip.setAttribute('src', this.stripURI);
              }

              if (this.currentFrame > -1) {
                this.changeCurrentImage();
              }
              //window.status = CSS07.csm.getAgentVersion();
            }
          }
          catch(e){this.destroy();}
        };


CSS07.flm.FilmStrip.prototype.destroy = function ()
        {
          try
          {
            this.pause();
            if (this.unload) { this.unbindEvent(window, this.unload, 'unload'); }
            if (this.onDblClick) {
              this.unbindEvent(this.dcTarget, this.onDblClick, 'dblclick');
              this.onDblClick = null;
            }
            if (this.onClick) {
              this.unbindEvent(this.dcTarget, this.onClick, 'click');
              this.onClick = null;
            }
            if (this.onMouseOver) {
              this.unbindEvent(this.container, this.onMouseOver, 'mouseover');
              this.onMouseOver = null;
            }
            if (this.onMouseOut) {
              this.unbindEvent(this.container, this.onMouseOut, 'mouseout');
              this.onMouseOut = null;
            }
            if (this.onMouseMove) {
              this.unbindEvent(this.container, this.onMouseMove, 'mousemove');
              this.onMouseMove = null;
            }
            this.container = null;

            if (this.onPreloadStrip && this.preloadStrip) { this.unbindEvent(this.preloadStrip, this.onPreloadStrip, 'load'); }
            this.onPreloadStrip = null;
            this.preloadStrip = null;

            if (this.onPreloadPrevw && this.preloadPrevw) { this.unbindEvent(this.preloadPrevw, this.onPreloadPrevw, 'load'); }
            this.onPreloadPrevw = null;
            this.preloadPrevw = null;
            this.tick = null;

            if (this.timerPvw) {
              window.clearTimeout(this.timerPvw);
              this.timerPvw = null;
            }
            this.hidePvw = null;
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.enableEvents = function ()
        {
          try
          {
            if (this.imgFolder) {

              this.dcTarget = this.stripLink || this.container;
              var stopStart = this.bind(this, this.toggleMovement);
              if (this.imagePage) {
                var showImg   = this.bind(this, this.showLargeImage);
                this.clickHandler = new CSS07.csm.ClickHandler(showImg, stopStart);
                // we need a combined event handler to place sngl & dbl on the same item
                var he = this.bind(this.clickHandler, this.clickHandler.handleEvent);
                this.onClick      = this.bindEvent(this.dcTarget, he, 'click');
                this.onDblClick   = this.bindEvent(this.dcTarget, he, 'dblclick');
              } else {
                this.onDblClick   = this.bindEvent(this.dcTarget, stopStart, 'dblclick');
                this.bindEvent(this.container, this.onDblClick, 'dblclick');
              }
              this.statusText = this.screen ? CSS07.flm.StripTip: CSS07.flm.PreviewTip;
              //window.status = this.statusText;
              // if we want click to view on strip, dynamically change href on link

              this.onMouseOver = this.bind(this, this.mouseOver);
              this.bindEvent(this.container, this.onMouseOver, 'mouseover');

              // if we want change on mouse crossing boundary
              this.onMouseExit = this.bind(this, this.mouseExit);
              this.bindEvent(this.container, this.onMouseExit, 'mouseout');
              this.onMouseMove = this.bind(this, this.mouseMove);
              this.bindEvent(this.container, this.onMouseMove, 'mousemove');
              // where is the mouse? if over the strip we can set it in play

            }
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.setupPreviewPane  =  function (screen_ID)
        {
          try
          {
            if (screen_ID == 'auto') {
              // make a popup div panel with anchor, image and maybe caption?
              this.screenType = screen_ID ;
              var div_ID = 'auto_preview';
              screen_ID = 'auto_screen';  // img elt
              var caption_ID = null; 'auto_cap';
              var anchor_ID = 'auto_a';
              this.previewDiv = CSS07.gal.makePreviewPane(div_ID, screen_ID, anchor_ID, caption_ID, 'h3');
              var styl = this.previewDiv.style;
              styl.left   = '';
              styl.top    = '200px';
              styl.right  = '140px';
              styl.width  = '';
              styl.height = '';
              styl.display = 'none';
              styl.visibility = 'visible';
              styl.zIndex = CSS07.flm.previewZindex;
              this.setSize(CSS07.flm.previewWid, CSS07.flm.previewHgt);
              if (caption_ID) { this.loadingSign = window.document.getElementById(caption_ID); }
              if (this.loadingSign) { this.loadingSign.style['visibility'] = 'hidden'; }
              this.hideTime = CSS07.flm.previewTime;
            }
            // Do we have a screen image (supplied or auto-constructed)
            this.screen = window.document.getElementById(screen_ID);
            if (this.screen) {
              if (this.screen.parentNode.tagName.toLowerCase() == 'a') {
                this.screenLink =  this.screen.parentNode;
              }
            } else {
              // do we have a preview div? if yes add in what we need
              // (user can place and style the screen but leave the detail to us)
              var div = window.document.getElementById(CSS07.flm.defaultDiv);
              if (div) {
                CSS07.gal.makePreviewPane(div, screen_ID, 'auto_a', null); // this caption is at the bottom
                // const width for a vertical strip
                this.screen = window.document.getElementById(screen_ID);

                if (this.msie || !this.screen.hasAttribute('width')) {
                  this.screen.setAttribute('width' ,CSS07.flm.previewWid);
                }
                if (!this.msie && this.screen.getAttribute('height')) {
                  this.screen.removeAttribute('height','');
                }
                this.screenLink = this.screen.parentNode;
                this.screenLink.setAttribute('title' ,CSS07.flm.PreviewTip);
              }
            }  // end setup preview pane
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.setupPreviewImage  =  function (screen_ID)
        {
          try
          {
            if (this.screen) {
              var cap_ID = screen_ID + '_loading';
              this.loadingSign = window.document.getElementById(screen_ID + '_loading');
              if (!this.loadingSign) {
                var div = this.screen.parentNode;
                var tag = div.tagName.toLowerCase();
                if (tag != 'div' && tag != 'body') {
                  div = div.parentNode;
                }
                this.loadingSign = CSS07.gal.makeLoadingSign(div, cap_ID, null, 'h5', 11);
              }
              if (this.loadingSign) {
                this.loadingSign.style['visibility'] = 'hidden';
              }
              if (this.screen.tagName.toLowerCase() == 'img'){
                var imgWidth  = this.screen.getAttribute('width' );
                var imgHeight = this.screen.getAttribute('height');
                if (!imgWidth)  { imgWidth  = this.screen.style.width; }
                if (!imgHeight) { imgHeight = this.screen.style.height; }
                if (!imgWidth)  { imgWidth  = 'auto'; }
                if (!imgHeight) { imgHeight = 'auto'; }

                this.setSize(imgWidth,imgHeight);
              }
            }
          }
          catch(e){}
        };


CSS07.flm.FilmStrip.prototype.setupImagePageLink  =  function (image_page, x_margin, y_margin)
        {
          try
          {
            if (image_page) {

              // parameters for image display page (link from strip or preview).
              this.imagePage = image_page;

              // assume the header is the same, the receiving page can ignore these sizes but we give hints
              var vpWid = CSS07.kpl.viewportWidth ();
              var vpHgt = CSS07.kpl.viewportHeight();

              var topElt = window.document.getElementById('head');
              var pgeElt = topElt.parentNode;

              var useable = (100 -CSS07.flm.marginPerCent)/100;
              if (pgeElt.clientWidth >0) {
                this.myFrameWid = pgeElt.clientWidth *useable;  // this will be image width, allow for margin
                this.myFrameHgt = (pgeElt.clientHeight -topElt.clientHeight) *useable ;
              } else {
                if(!x_margin) { x_margin = 60; }
                if(!y_margin) { y_margin = 60; }
              }

              this.imgWid = (vpWid - x_margin) || this.myFrameWid || CSS07.flm.defaultWid;
              this.imgHgt = (vpHgt - y_margin) || this.myFrameHgt || CSS07.flm.defaultHgt;

              this.imgWid = CSS07.csm.round_down(this.imgWid, CSS07.flm.roundWid);
              this.imgHgt = CSS07.csm.round_down(this.imgHgt, CSS07.flm.roundHgt);

              // set up First image link
              if (this.currentFrame) {
                this.firstImage = this.stripInfo.imgNames[this.currentFrame];
              }
              // set strip top to startFrame
              this.setStripStart();
            }
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.showLargeImage  =  function (evt)
        {
          try
          {
            if (this.timerRef) { window.clearTimeout(this.timerRef); }
            this.timerRef = null;

            var newX = evt.clientX - CSS07.kpl.domLeftToBody(this.container);
            var newY = evt.clientY - CSS07.kpl.domTopToBody (this.container);
            var thisFrame = this.getFrame(newX, newY);
            if (thisFrame != this.currentFrame) {
              //this can be the first mouse event we get
              this.currentFrame = thisFrame;
              this.mapCurrentImage();
            }
            if (this.largeImageURI) {
               // inserting an anchor over the strip reduces the smooth animation of the background
              //  using window.location annoys the shift-clickers but they can shift-click on the previews
              window.location = this.largeImageURI;
            }
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.showPreview  =  function (evt)
        {
          try
          {
             this.previewDiv.style.display = 'block';
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.hidePreview = function ()
        {
          try
          {
             this.previewDiv.style.display = 'none';
          }
          catch(e){}
        };


CSS07.flm.FilmStrip.prototype.mouseOver  =  function (evt)
        {
          try
          {
             this.mouseMove(evt);
             this.currentFrame = -1;  // force update from the mouse coords
             //alert ('MouseOver');
             this.checkCurrentFrame();

             this.mouseInPlay = true;
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.mouseExit  =  function (evt)
        {
          try
          {
             this.mouseInPlay = false;
             if (this.screenType == 'auto') {
               if (!this.hidePvw) { this.hidePvw = this.bind(this, this.hidePreview); }
               this.timerPvw = window.setTimeout(this.hidePvw, (this.hideTime * 1000));
             }
             window.status = '';

          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.mouseMove  =  function (evt)
        {
          try
          {
             var el = this.container;
             // this works while we don't scroll the filmstrip
             //this.mouseX = evt.clientX; // || evt.screenX - window.screen.width  + window.screen.availWidth ;
             //this.mouseY = evt.clientY; // || evt.screenY - window.screen.height + window.screen.availHeight;
             //window.status = 'Mouse Move X: ' + this.mouseX + '  Y: ' + this.mouseY;

             // this seems to resolve the scrolling issue
             this.mouseX = evt.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
             this.mouseY = evt.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
             this.checkCurrentFrame();
             this.mouseInPlay = true;   // Page can load with the mouse over the filmStrip so we cannot rely on mouseover firing
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.checkCurrentFrame  =  function ()
        {
          try
          {
             if (!this.checkNmbr) { this.checkNmbr = 0; }
             this.checkNmbr += 1;
             var newX = this.mouseX - CSS07.kpl.domLeftToBody(this.container);
             var newY = this.mouseY - CSS07.kpl.domTopToBody (this.container);

             var frameNmbr =this.getFrame(newX, newY);
             if (frameNmbr != this.currentFrame) {
               //window.status = 'Current Frame: ' + frameNmbr ;
               this.currentFrame = frameNmbr;
               this.changeCurrentImage();
               //window.status = this.statusText;
             }
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.mapCurrentImage  =  function ()
        {
          try
          {
             var newImgPath = this.imgFolder + encodeURI(this.stripInfo.imgNames[this.currentFrame]);
             this.largeImageURI = this.getLargeImageLink(newImgPath);
             return newImgPath;
          } catch(e){}
        };

// to preview External image & link
CSS07.flm.FilmStrip.prototype.mapExternalmage  =  function (imgFolder, imgFile, caption)
        {
          try
          {
             var sepChar = (imgFolder.charAt(imgFolder.length -1) == '/') ? '' : '/';
             var prefix = imgFolder.indexOf(this.imgPrefix) < 0 ? this.imgPrefix : '';
             var newImgPath = prefix + encodeURI(imgFolder) + sepChar + encodeURI(imgFile);
             this.largeImageURI = this.extLargeImageLink(newImgPath,caption);
             return newImgPath;
          } catch(e){}
        };

CSS07.flm.FilmStrip.prototype.changePreviewImage  =  function (newImgPath)
        {
          try
          {
             var pvwImgPath = newImgPath + this.args;
             if (this.onPreloadPrevw && this.preloadPrevw) {
               if (this.preloadPrevw.getAttribute('src') == pvwImgPath) {
                 // still loading same image
                 return;
               }
               // different image
               this.unbindEvent(this.preloadPrevw, this.onPreloadPrevw, 'load');
             }
             if (this.screen
                && (pvwImgPath != this.screen.getAttribute('src'))
                && (this.mouseInPlay || this.screenType != 'auto')) {

               if (!this.onPreloadPrevw) { this.onPreloadPrevw = this.bind(this, this.previewLoaded); }

               if (!this.preloadPrevw) {
                 this.preloadPrevw  = new Image();  // IE will not fire unless its in the dom
                 if (this.msie) {
                   window.document.body.appendChild(this.preloadPrevw);
                   this.preloadPrevw.style.display = 'none';
                 }
               }

               this.bindEvent(this.preloadPrevw, this.onPreloadPrevw, 'load');
               if (this.loadingSign) { this.loadingSign.style['visibility'] = 'visible'; }
               this.container.style['cursor'] = 'wait';
               this.preloadPrevw.setAttribute('src', pvwImgPath);
             } else {
               if (this.mouseInPlay && this.screenType == 'auto') {
                 this.showPreview();
               }
             }

             // check href for large image
             if (this.screenLink && this.largeImageURI) {
               this.screenLink.setAttribute('href', this.largeImageURI);
             }

             //return (newImgPath); // for other links
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.changeCurrentImage  =  function ()
        {
          try
          {
            var newImgPath = this.mapCurrentImage();
            this.changePreviewImage(newImgPath);
          }
          catch(e){}
        };
CSS07.flm.FilmStrip.prototype.filmStripLoaded  =  function (evt)
        {
          try
          {
            //window.status = 'filmstrip.filmStripLoaded fired : ';
            if (this.timerRef) { window.clearTimeout(this.timerRef); }
            this.timerRef = null;

            this.unbindEvent(this.preloadStrip, this.onPreloadStrip, 'load');
            this.onPreload = null;

            this.stripWidth  = this.preloadStrip.width;
            this.stripHeight = this.preloadStrip.height;

            this.container.style.backgroundPosition = '0 0';
            var bgi = 'url(' + this.preloadStrip.getAttribute('src') + ')';
            if (this.container.style.backgroundImage != bgi)
              { this.container.style.backgroundImage = bgi; }
            // start escapement
            this.step();
            this.preloadStrip = null; // no need to keep this once its on background
            this.enableEvents();

          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.getLargeImageLink  =  function (largeImgPath)
        {
          try
          {
            if (this.imagePage) {               // set available screen size better
              var capTxt = eval(CSS07.flm.defaultCaption);
              var capHgt = 0;
              if (capTxt && capTxt.length > 0) {
                capHgt = CSS07.flm.captionHeight;
              }
              if (this.stripInfo.imgCaptions && this.stripInfo.imgCaptions[this.currentFrame]) {
                capTxt = this.stripInfo.imgCaptions[this.currentFrame];
              }
              var szArgs = this.jKeyE('wid') + this.imgWid + this.jKeyE('hgt') + (this.imgHgt - capHgt);
              return(this.imagePage + this.qKeyE('file') + encodeURIComponent(largeImgPath + szArgs) + this.jKeyE('cap') + encodeURIComponent(capTxt));
            }
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.extLargeImageLink  =  function (largeImgPath, caption)
        {
          try
          {
            if (this.imagePage) {               // set available screen size better
              var capTxt = caption;
              var capHgt = 0;
              if (capTxt && capTxt.length > 0) {
                capHgt = CSS07.flm.captionHeight;
              }
              var szArgs = this.jKeyE('wid') + this.imgWid + this.jKeyE('hgt') + (this.imgHgt - capHgt);
              return(this.imagePage + this.qKeyE('file') + encodeURIComponent(largeImgPath + szArgs) + this.jKeyE('cap') + encodeURIComponent(capTxt));
            }
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.previewLoaded  =  function (evt)
        {
          try
          {
            //window.status = 'filmstrip.previewLoaded fired : ';

            if (this.loadingSign) { this.loadingSign.style['visibility'] = 'hidden'; }
            this.container.style['cursor'] = '';
            var scnSrc=this.screen.getAttribute('src');

            var imgSrc = this.preloadPrevw.getAttribute('src');
            if (scnSrc != imgSrc) {
              this.screen.setAttribute('src', imgSrc);
              // set up the href for a click on this preview...
              if (this.screenLink && this.largeImageURI) {
                this.screenLink.setAttribute('href', this.largeImageURI);
              }
            }

            this.unbindEvent(this.preloadPrevw, this.onPreloadPrevw, 'load');
            //this.preloadPrevw = null;  // try retention
            this.preloadPrevw.setAttribute('src','');

            if (this.screenType == 'auto') {
              // move & size & make visible
              //var pvwHeight = this.preloadPrevw.height;
              //var pvwWidth  = this.preloadPrevw.width;

              // prototype for vertistrip only
              var margin = CSS07.flm.previewMargin;
              var imgHgt = this.screen.height;
              var pvwTop = this.mouseY - (imgHgt/2);
              var pvwBot = pvwTop + imgHgt;
              var windowHgt = window.document.body.clientHeight;
              if (pvwBot > windowHgt - 2*margin) {
                pvwTop = windowHgt - imgHgt - 2*margin;
              }
              if (pvwTop < margin) {
                pvwTop = margin;
              }
              this.previewDiv.style.top = '' + (pvwTop)+'px';
              /*
              var imgWid = this.screen.width;
              if (imgWid < CSS07.flm.previewWid) {
                this.screen.style.width = '' + imgWid + 'px'
              } else {
                this.screen.style.width = '' + imgWid + 'px'
              }
              */
              this.showPreview();

              // timer? fade?
            }
          }
          catch(e){}
        };


CSS07.flm.FilmStrip.prototype.getFrame =  function (x, y)
        {
          try
          {
            var imax;
            if (this.firstItemX >= 0) {
              imax = this.indexAbove(x - this.firstItemX, this.stripInfo.xLimits);
            } else {
              imax = this.indexAbove(y - this.firstItemY, this.stripInfo.yLimits);
            }
            return imax;
          }
          catch(e){}
        };

// Clock Algebra fn to get the hit Frame where arry holds the top edge of each frame, 0 based
CSS07.flm.FilmStrip.prototype.indexAbove = function (valTest, arry)
        {
          try
          {
              var imax = arry.length;
              var maxV = arry[imax -1];
              while (valTest < 0)     { valTest += maxV; }
              while (valTest >= maxV) { valTest -= maxV; }

              var imin = 0;
              var ix = imax;
              while (imin < imax) {
                ix = Math.floor((imin + imax)/2);
                if (valTest > arry[ix]) {
                  imin = ix +1;
                } else {
                  imax = ix;
                }
              }
              return(imax);
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.currentAspect = function ()
        // Maybe needed to request the larger dimension
        {
          try
          {
            var X1, Y1;
            var xSize, ySize;
            if (this.firstItemX >= 0) {
              X1 = this.currentFrame ? this.stripInfo.xLimits[this.currentFrame -1] : 0;
              X2 = this.stripInfo.xLimits[this.currentFrame];
              xSize = X2 -X1;
              ySize = this.stripInfo.xLimits[this.currentFrame]-2*this.gap;
            } else {
              Y1 = this.currentFrame ? this.stripInfo.yLimits[this.currentFrame -1] : 0;
              X2 = this.stripInfo.xLimits[this.currentFrame];
              xSize = X2 -X1;
              ySize = this.width-2*this.gap;
            }
            return (xSize/ySize);
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.moveStrip = function ()
        {
          try
          {
            if (this.firstItemX >= 0) {
              this.container.style.backgroundPosition = '' + this.firstItemX + 'px 0';
            } else {
              this.container.style.backgroundPosition = '0 ' + this.firstItemY + 'px';
            }
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.toggleMovement = function ()
        {
          try
          {
            if (this.timerRef) {
              this.pause();
            } else {
              this.step();
            }
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.step = function ()
        {
          try
          {
            if (this.firstItemX >= 0) {
              this.firstItemX += this.stride;
              if (this.firstItemX >= this.stripWidth ) { this.firstItemX = 0; }
            } else {
              this.firstItemY += this.stride;
              if (this.firstItemY >= this.stripHeight) { this.firstItemY = 0; }
            }
            this.moveStrip();
//            if (this.firstItemY %10 === 0 && this.mouseInPlay) {
//              this.mouseInPlay = true;  /* landing spot for debugger */
//            }
            if (this.mouseInPlay) {
              this.checkCurrentFrame();
            }
            this.timerRef = window.setTimeout(this.tick, (this.stepTime * 1000));
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.pause = function ()
        {
          try
          {
            if (this.timerRef) {
              window.clearTimeout(this.timerRef);
              this.timerRef = null;
            }
            return (true);
          }
          catch(e){}
        };

CSS07.flm.FilmStrip.prototype.setStripStart = function ()
        // set start frame in strip to current Frame
        {
          try
          {
            if (this.firstItemX === 0) {
              this.firstItemX = this.currentFrame ? -this.stripInfo.xLimits[this.currentFrame -1] : 0;
            } else {
              this.firstItemY = this.currentFrame ? -this.stripInfo.yLimits[this.currentFrame -1] : 0;
            }
          }
          catch(e){}
        };


// (c) 2007 Codesmiths

}
catch(e) {}

// end script
