// This creates a DOM object called 'PageBanner'. This object has methods that are used to add transition // frames with background, overlay (foreground), Captions and Hyperlinks. You can add as many frames as you like // to the page. var PageBanner = // This is the PageBanner object consructor { paused: 0, // Indicates if the transitions are paused (mouse over). BannerFont: "Trebuchet Arial", // Default font for captions is Arial. Change by "PageBanner.BannerFont = 'font';" FrameCount: 0, // This is an internal indicator of the number of frames stored in the object. framewid: 0, // The overall frame size width (view port). framehi: 0, // The overall frame size height (view port). CurrentFrame: 0, // Indicates the current frame that is active. initdone: 0, // Initialization flag. ntdiv: null, // Pointer to containing DIV Element labeled 'pbanner'. hvdiv: null, // Pointer to dynamic DIV Element that is added for MouseOver blanking effect. htdiv: null, // Pointer to dynamic DIV Element that is added for MouseOver caption. Frames: null, // Object to store array of Frames (see below). WaitLoop: 1, // 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 = "visible"; hPane.style.backgroundColor = "#000000"; // This is to allow the frames to overlap. hPane.style.position = "absolute"; hPane.style.top = 0; hPane.style.left = 0; hPane.style.zIndex = this.FrameCount; // Match the size to the Frame size hPane.style.width = this.framewid + "px"; hPane.style.height = this.framehi + "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=60)"; // 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 = "visible"; // 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.FrameCount + 1; // Match the size to the Frame Size hText.style.width = (this.framewid - 20) + "px"; hText.style.height = (this.framehi - 20) + "px"; // Return the object for insertion into the DOM return hText; }, // This function initializes the pbanner DIV Element that must be inserted in the HTML document before calling. Init: function() { this.ntdiv = document.getElementById('pbanner'); if (this.ntdiv == null) { alert("A DIV with the 'id' of \"pbanner\" must be inserted in your HTML document to use this feature."); return 0; } // Add CSS style information to the pbanner DIV in the HTML document. this.ntdiv.style.overflow = "hidden"; this.ntdiv.style.position = "relative"; this.ntdiv.style.margin = "0"; // Match the size to the FrameSize this.ntdiv.style.width = this.framewid + "px"; this.ntdiv.style.height = this.framehi + "px"; // Add MouseOver and MouseOut handlers for blanking effect and pausing. this.ntdiv.onmouseover = function() { PageBanner.Pause(1); }; this.ntdiv.onmouseout = function() { PageBanner.Pause(0); }; // Initiallize variables. this.CurrentFrame = 0; this.initdone = 55; // Create the new FrameArray object to store some frames. this.Frames = new Array(); return 1; }, // This function is called by the active frame to set the OnClick event handler for Dynamic URLs SetClick: function(hlink) { // If the URL is blank, clear the OnClick event handler. if (hlink == "") this.htdiv.onclick = ""; // Set the OnClick event handler to open a new window with the specified URL. else { this.htdiv.onclick = function() { window.open(hlink); }; } }, // This function handels MouseOver and MouseOut events. // MouseOver calls with a '1' to indicate a 'Pause' condition. The transitions are paused and a // blanking caption is applied. // MouseOut calls with a '0' to indicate a 'Resume' condition. The transitions are resumed and the // blanking effect is removed. Pause: function(pmode) { // Set the global 'paused' flag. this.paused = pmode; // If we're paused, turn on the blanking effect. if (pmode) { this.hvdiv.style.visibility = "visible"; this.htdiv.style.visibility = "visible"; this.Frames[this.CurrentFrame].ChangeOpacity('ospan', 80) } // If we're not paused, turn off the blanking effect. else { this.hvdiv.style.visibility = "hidden"; this.htdiv.style.visibility = "hidden"; this.Frames[this.CurrentFrame].ChangeOpacity('ospan', 100) } }, WaitForLoad: function() { if (!this.Frames[this.CurrentFrame].FrameOb['bgimg'].complete) { this.hvdiv.style.visibility = "visible"; this.Frames[this.CurrentFrame].SetHover("Loading... (" + (this.WaitLoop++) + ")"); this.htdiv.style.visibility = "visible"; setTimeout("PageBanner.WaitForLoad()", 100); return; } this.Play(); }, // This function starts up the transition effect for the current Frame. Play: function() { // If no frames are loaded, don't to anything. if (this.FrameCount == 0) return; // If our blankign DIV Elements haven't been loaded, load them before starting. if (this.hvdiv == null) { this.ntdiv.appendChild(this.HoverPane()); this.ntdiv.appendChild(this.HoverText()); this.hvdiv = document.getElementById('hpane'); this.htdiv = document.getElementById('htext'); } if (!this.Frames[this.CurrentFrame].FrameOb['bgimg'].complete) { this.WaitForLoad(); return; } this.hvdiv.style.visibility = "hidden"; this.htdiv.style.visibility = "hidden"; // Initialize the current frame this.Frames[this.CurrentFrame].Init(); // Start the FadeIn transition effect this.Frames[this.CurrentFrame].FadeIn(this.CurrentFrame); // Start the zoom and pan transition effect. this.Frames[this.CurrentFrame].Submit(this.CurrentFrame); }, // This function handles the transition from one frame to the next. Next: function() { // Start the FadeOut transition for the current frame. this.Frames[this.CurrentFrame].FadeOut(this.CurrentFrame); // Increment to the Next Frame this.CurrentFrame += 1; if (this.CurrentFrame >= this.FrameCount) this.CurrentFrame = 0; // Start playing the next frame. this.Play(); }, // This function adds a new Frame to the PageBanner Object. // The new Frame object contains all of the Elements and Methods needed to // perform the necessary transitions. AddFrame: function(fwid, fhi, ndel, delv, thoriz, tvert, zend) { ///////////////////////////////////////////////////// // This starts the actual Frame Object constructor var pfrm = { // Containers for the Object 'id's for the Dynamic Frame object. ospanob: "", // Outer DIV ispanob: "", // Inner DIV bgob: "", // Background IMG olob: "", // Overlay IMG (foreground) captob: "", // Caption P element hovercapt: "Transition paused.", // Caption for Blanking Effect (each frame has it's own). hoverurl: "", // URL to apply to OnClick handling when blanking is applied. // Default frame font is Arial. Change by "PageBanner.Frames[id].FrameFont = 'font';" FrameFont: "Trebuchet Arial", // Delays for transitions and Frame sequence framedelay: delv || 0, nextdelay: ndel || 0, nextdel: 0, // Width for the frame. All frames should be the same. framewid: fwid || 0, framehi: fhi || 0, // Horizontal panning transitions in pixels (+values pan to right, -values pan to left). transhoriz: thoriz || 100, // Vertical panning transitions in pixels (+values pan down, -values pan up). transvert: tvert || 0, // Ending zoom factor (+values zoom in, -values zoom out). zoomfactor: zend || 0, // Used internally for positioning the clip() window. left: 0, right: 0, top: 0, bottom: 0, topstart: 0, leftstart: 0, dir: 0, // Loop counters for the fade in transitions. bloop: 0, oloop: 0, cloop: 0, mloop: 0, // These are temporary holders for the delays to fade in the Elements (background, overlay and Caption). bdel: 0, odel: 0, cdel: 0, // This is the default delays for above. bgdelay: 0, oldelay: 750, captdelay: 1200, // The FrameOb Object is an array to store the Frame Elements (Background, Foregroud, Caption). FrameOb: null, nextframe: 0, // Used to identify the two major browsers for handling some of those quirks. This can be added onto. GetBrwsr: function() { var agt = navigator.userAgent.toLowerCase(); if (agt.indexOf("msie") != -1) return "className"; return "class"; }, // Caption: function(frameid) { var iCapt = document.createElement('p'); iCapt.setAttribute("id", "icapt" + frameid); this.captob = iCapt.id; iCapt.style.fontSize = "22px"; iCapt.style.fontFamily = "Arial"; iCapt.style.fontWeight = "bold"; iCapt.style.textAlign = "Left"; iCapt.style.width = "300px"; iCapt.style.marginTop = "20px"; iCapt.style.marginLeft = "20px"; iCapt.style.color = "White"; iCapt.style.position = "absolute"; iCapt.style.top = 0; iCapt.style.left = 0; iCapt.style.zIndex = 3; iCapt.textContent = " "; return iCapt; }, OuterSpan: function(frameid) { var oSpan = document.createElement('div'); oSpan.setAttribute("id", "ospan" + frameid); this.ospanob = oSpan.id; oSpan.style.position = "absolute"; oSpan.style.top = 0; oSpan.style.left = 0; oSpan.style.zIndex = frameid; oSpan.style.width = "10px"; oSpan.style.height = "10px"; ; oSpan.style.styleFloat = "left"; return oSpan; }, InnerSpan: function(frameid) { var iSpan = document.createElement('div'); iSpan.setAttribute("id", "ispan" + frameid); this.ispanob = iSpan.id; iSpan.style.position = "absolute"; iSpan.style.top = 0; iSpan.style.left = 0; iSpan.style.clip = "rect(0px 10px 10px 0px)"; return iSpan; }, BackGround: function(frameid) { var bgImg = document.createElement('img'); bgImg.setAttribute("id", "bgimg" + frameid); this.bgob = bgImg.id; bgImg.style.position = "absolute"; bgImg.style.top = 0; bgImg.style.left = 0; bgImg.style.zIndex = 0; bgImg.style.width = "1px"; bgImg.style.height = "1px"; bgImg.style.visibility = "hidden"; return bgImg; }, OverLay: function(frameid) { var olImg = document.createElement('img'); olImg.setAttribute("id", "olimg" + frameid); this.olob = olImg.id; olImg.style.position = "absolute"; olImg.style.top = 0; olImg.style.left = 0; olImg.style.zIndex = 2; olImg.style.width = "1px"; olImg.style.height = "1px"; olImg.style.visibility = "hidden"; return olImg; }, Submit: function(cfram) { if (this.nextdel <= 0) { return; } setTimeout("PageBanner.Frames[" + cfram + "].Submit(" + cfram + ")", this.framedelay); if ((this.nextdel <= 500) && (this.nextframe == 0)) { PageBanner.Next(); this.nextframe = 1; } if (PageBanner.paused) return; this.nextdel -= this.framedelay; if (this.dir == 0) { if (this.left < (this.FrameOb['bgimg'].wid - this.transhoriz)) this.left += 1; else this.dir = 1; } else { if (this.left > 1) this.left -= 1; else this.dir = 0; } this.top = (Math.round((this.transvert * (this.left / this.transhoriz)) * 10) / 10); this.right = this.left + this.framewid; this.bottom = (this.top + this.framehi); this.FrameOb['ispan'].style.left = -this.left + "px"; this.FrameOb['ispan'].style.top = -this.top + "px"; this.FrameOb['ispan'].style.clip = "rect(" + this.top + "px " + this.right + "px " + this.bottom + "px " + this.left + "px)"; var ZoomPcnt = (100 + ((this.left / this.transhoriz) * this.zoomfactor)) / 100; var ZoomPcntH = this.FrameOb['bgimg'].wid * ZoomPcnt; var ZoomPcntV = this.FrameOb['bgimg'].hi * ZoomPcnt; this.FrameOb['bgimg'].style.height = ZoomPcntV + "px"; this.FrameOb['bgimg'].style.width = ZoomPcntH + "px"; }, AddLink: function(nlink) { this.hoverurl = nlink; }, SetHover: function(hcapt) { if (this.GetBrwsr() == "class") PageBanner.htdiv.textContent = hcapt; else PageBanner.htdiv.innerText = hcapt; }, FrameInit: function(frameid) { var ntdiv = document.getElementById('pbanner'); if (ntdiv == null) { alert("pbanner Needed!!"); return; } this.FrameOb = new Array(); ntdiv.appendChild(this.OuterSpan(frameid)); this.FrameOb['ospan'] = document.getElementById(this.ospanob); this.FrameOb['ospan'].appendChild(this.InnerSpan(frameid)); this.FrameOb['ispan'] = document.getElementById(this.ispanob); this.FrameOb['ispan'].appendChild(this.BackGround(frameid)); this.FrameOb['ospan'].appendChild(this.OverLay(frameid)); this.FrameOb['ospan'].appendChild(this.Caption(frameid)); this.FrameOb['bgimg'] = document.getElementById(this.bgob); this.FrameOb['olimg'] = document.getElementById(this.olob); this.FrameOb['capt'] = document.getElementById(this.captob); this.FrameOb['ospan'].style.width = this.framewid + "px"; this.FrameOb['ospan'].style.height = this.framehi + "px"; this.SetFades(); }, ObProp: function(obid, obsrc, obwid, obhi, startz, fidel) { this.FrameOb[obid].src = obsrc; this.FrameOb[obid].style.visibility = "visible"; this.FrameOb[obid].style.width = (obwid * startz) + "px"; this.FrameOb[obid].style.height = (obhi * startz) + "px"; this.FrameOb[obid].wid = (obwid * startz); this.FrameOb[obid].hi = (obhi * startz); }, AddBG: function(bgsrc, bgwid, bghi, startz, fidel) { this.ObProp('bgimg', bgsrc, bgwid, bghi, startz); this.bgdelay = fidel; }, AddOL: function(olsrc, olwid, olhi, startz, fidel) { this.ObProp('olimg', olsrc, olwid, olhi, startz); this.oldelay = fidel; }, AddCapt: function(capttex, capcol, capttop, captleft, fidel) { if (this.GetBrwsr() == "class") this.FrameOb['capt'].textContent = capttex; else this.FrameOb['capt'].innerText = capttex; this.FrameOb['capt'].style.marginTop = capttop + "px"; this.FrameOb['capt'].style.marginLeft = captleft + "px"; this.FrameOb['capt'].style.color = capcol; this.captdelay = fidel; }, ChangeOpacity: function(obid, opacity) { this.FrameOb[obid].style.opacity = opacity / 100; this.FrameOb[obid].style.MozOpacity = opacity / 100; this.FrameOb[obid].style.KhtmlOpacity = opacity / 100; this.FrameOb[obid].style.filter = "alpha(opacity=" + opacity + ")"; }, SetFades: function() { this.ChangeOpacity('bgimg', 0); if (this.oldelay > 0) this.ChangeOpacity('olimg', 0); if (this.captdelay > 0) this.ChangeOpacity('capt', 0); this.ChangeOpacity('ospan', 100); }, FadeIn: function(cfram) { this.bloop = this.cloop = this.oloop = 0; this.bdel = this.bgdelay; this.BGF(cfram); if (this.oldelay > 0) { this.odel = this.oldelay; this.OLF(cfram); } if (this.captdelay > 0) { this.cdel = this.captdelay; this.CAPTF(cfram); } }, FadeOut: function(cfram) { if (this.mloop <= 0) { setTimeout("PageBanner.Frames[" + cfram + "].SetFades()", 100); return; } setTimeout("PageBanner.Frames[" + cfram + "].FadeOut(" + cfram + ")", 10); if (PageBanner.paused) return; this.ChangeOpacity('ospan', this.mloop-- * 2); }, BGF: function(cfram) { if (this.bloop > 100) return; setTimeout("PageBanner.Frames[" + cfram + "].BGF(" + cfram + ")", 10); if (PageBanner.paused) return; if (this.bdel > 0) { this.bdel -= 10; return; } this.ChangeOpacity('bgimg', this.bloop++); }, OLF: function(cfram) { if (this.oloop > 100) return; setTimeout("PageBanner.Frames[" + cfram + "].OLF(" + cfram + ")", 10); if (PageBanner.paused) return; if (this.odel > 0) { this.odel -= 10; return; } this.ChangeOpacity('olimg', this.oloop++); }, CAPTF: function(cfram) { if (this.cloop > 100) return; setTimeout("PageBanner.Frames[" + cfram + "].CAPTF(" + cfram + ")", 10); if (PageBanner.paused) return; if (this.cdel > 0) { this.cdel -= 10; return; } this.ChangeOpacity('capt', this.cloop++); }, Init: function() { this.left = 0; this.dir = 0; this.nextdel = this.nextdelay; this.mloop = 50; this.nextframe = 0; this.SetHover(this.hovercapt); PageBanner.SetClick(this.hoverurl); } }; this.framehi = fhi; this.framewid = fwid; if (this.initdone == 0) if (!this.Init()) return -1; this.Frames[this.FrameCount] = pfrm; this.Frames[this.FrameCount].FrameInit(this.FrameCount); return this.FrameCount++; } };