// Appear to rotate a page by blinking "pages" (probably divs) on and off. var pageIdPrefix; var navIdPrefix; var resumeId; var classCurrentNav; var classPaused; var interval; var pageCount; var currentPage; var timerID = ""; // aPageIdPrefix - All pages (probably a HTML div) that are to be rotated should have an id starting with this prefix. // The suffix is the page number. // eg. aPageIdPrefix = 'rotate-page-' // To rotate three pages there would be three div with ids 'rotate-page-1', 'rotate-page-2', 'rotate-page-3'. // aNavIdPrefix - Each page that is to be rotated should have a corresponding navigation button that has an id starting with this prefix. // eg. aNavIdPrefix = 'rotate-nav-' // For three pages there will be three elements with ids 'rotate-nav-1', 'rotate-nav-2', 'rotate-nav-3'. // Use "" if there are no navigation keys. // aClassCurrentNav - This class is added to the navigation button to indicate it is current. // The css behind the page should highlight a navigation button when it has this class. // aResumeId - The id of the element that will be used to resume after pausing (the display is paused by clicking a navigation button). // Use "" if there are no resume key. // aClassPaused - This class is added to the play button to indicate that the rotating has been paused. // The css behind the page should highlight the play button when it has this class. // aPageCount - The number of pages that are to be rotated. // aIntervalInSeconds - The interval in seconds between page changes. // // Example Call - function initialiseRotate(aPageIdPrefix, aNavIdPrefix, aClassCurrentNav, aResumeId, aClassPaused, aPageCount, aIntervalInSeconds) { pageIdPrefix = aPageIdPrefix; navIdPrefix = aNavIdPrefix; classCurrentNav = aClassCurrentNav; resumeId = aResumeId; classPaused = aClassPaused; interval = aIntervalInSeconds * 1000; pageCount = aPageCount; currentPage = aPageCount; switchPage(); } function switchPage() { var oldPage = currentPage; currentPage = currentPage + 1; if (currentPage > pageCount) { currentPage = 1; } blink(oldPage, currentPage); timerID = setTimeout("switchPage()", interval); } function blink(aOldPage, aNewPage) { document.getElementById(pageIdPrefix + aOldPage).style.display = "none"; // make the current page invisible document.getElementById(pageIdPrefix + aNewPage).style.display = ""; // make the new page visible if ((navIdPrefix !== "") && (classCurrentNav !== "")) { removeClass(document.getElementById(navIdPrefix + aOldPage), classCurrentNav); // remove the class indicating current addClass(document.getElementById(navIdPrefix + aNewPage), classCurrentNav); // add the class indicating current } } function setPage(aPage) { if (timerID !== "") { clearInterval(timerID); timerID = ""; addClass(document.getElementById(resumeId), classPaused); } var oldPage = currentPage; currentPage = aPage; blink(oldPage, currentPage); } function resume() { if (timerID === "") { switchPage(); if ((resumeId !== "") && (classPaused !== "")) { removeClass(document.getElementById(resumeId), classPaused); } } } // Functions to modify the class of an HTML element. function hasClass(element, classText) { return element.className.match(new RegExp('( |^)' + classText + '( |$)')); } function addClass(element, classText) { if (! this.hasClass(element, classText)) { element.className += " " + classText; } } function removeClass(element, classText) { if (hasClass(element, classText)) { var reg = new RegExp('( |^)' + classText + '( |$)'); element.className= element.className.replace(reg, ' '); } }