/* This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * http://www.gnu.org/licenses/gpl.html * * * Copyright 2010, Samuel Rydén * * Author: Samuel Rydén * Contact: samuel.ryden --at-> utb.hoganas.se * Version: 1.0 * Purpose: Simple image animation effects that integrates with Sitebase as seamlessly as possible, with minimal knowledge requirements to use. * Usage: Simplest example, include this file somewhere in the HTML page, set the ID tag of a div somewhere to "aie", make a couple of AddImage calls and finally call StartAnimatedImagesEngine(). * Revision: SR 2010-06-07 First release. * * Example: * * *

* * * * TODO: More thorough documentation. On demand. Maybe. */ // http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/ecma-script-language-binding.html function IEAnimate(sID) { FindEngine(sID).Animate(); } function AnimationDoneEvent() { var sID = /^(.+?)img\d+/.exec(this.id)[1]; FindEngine(sID).OnAnimationDone(); } function CreateAnimatedImagesEngine(sID) { if (undefined == sID) sID = "aie"; g_aie_engines.push(new AnimatedImagesEngine(sID)); } function FindEngine(sID) { for (var iCounter = 0; iCounter < g_aie_engines.length; iCounter++) { if (g_aie_engines[iCounter].m_sID == sID) return g_aie_engines[iCounter]; } return undefined; } function AddImage(sURL) { if (undefined == FindEngine("aie")) CreateAnimatedImagesEngine(); FindEngine("aie").AddImage(sURL); } function StartAnimatedImagesEngine(sID) { if (undefined == sID) sID = "aie"; FindEngine(sID).Start(); } /** * JS class to encapsulate an animated images engine. * @param sID string identifying the ID of any valid DOM element, containing the images to act upon. */ function AnimatedImagesEngine(sID) { this.m_sID = sID; this.m_bInitialised = false; this.m_iCurrentIndex = 0; this.m_iNextIndex = 0; this.GetDOM = _AnimatedImagesEngine_GetDOM; this.AddImage = _AnimatedImagesEngine_AddImage; this.Start = _AnimatedImagesEngine_Start; this.SetFadeInterval = _AnimatedImagesEngine_SetFadeInterval; this.SetFadeTime = _AnimatedImagesEngine_SetFadeTime; this.m_pTimer = undefined; this.Animate = _AnimatedImagesEngine_Animate; this.OnAnimationDone = _AnimatedImagesEngine_OnAnimationDone; // Time between fadings in milliseconds this.m_iFadeInterval = 5000; // Fading time in milliseconds this.m_iFadeTime = 2000; var me = this.GetDOM(); while (me.hasChildNodes()) { try { me.removeChild(me.childNodes[0]); } // IE retardedness; hey, let's break a standard! catch(e) { me.childNodes[0].removeNode(true); }; } this.m_aImages = []; return this; } function _AnimatedImagesEngine_AddImage(sURL) { var pNode = document.createElement("IMG"); pNode.id = this.m_sID + "img" + this.m_aImages.length.toString(); pNode.style.position = "absolute"; pNode.style.display = "none"; pNode.style.zIndex = "0"; pNode.src = sURL; this.GetDOM().appendChild(pNode); // first image? if (this.m_aImages.length == 0) { pNode.style.display = ""; pNode.style.zIndex = "1"; pNode.parentNode.style.width = pNode.style.width; pNode.parentNode.style.height = pNode.style.height; } this.m_aImages.push(pNode); } function _AnimatedImagesEngine_OnAnimationDone() { $(this.m_aImages[this.m_iCurrentIndex]).hide(); this.m_aImages[this.m_iNextIndex].style.zIndex = 0; this.m_iCurrentIndex = this.m_iNextIndex; this.m_iNextIndex = -1; this.Start(); } function _AnimatedImagesEngine_Animate() { var pCurrent = this.m_aImages[this.m_iCurrentIndex]; this.m_iNextIndex = ((this.m_iCurrentIndex + 1) >= this.m_aImages.length) ? 0 : this.m_iCurrentIndex + 1; var pNext = this.m_aImages[this.m_iNextIndex]; pCurrent.style.zIndex = "0"; $("#" + pNext.id).hide(); pNext.style.zIndex = "1"; $("#" + pNext.id).fadeIn(this.m_iFadeTime, AnimationDoneEvent); } function _AnimatedImagesEngine_Start() { // again, IE7 is severely crippled, make sure the timer is triggered correctly var sCmd = "IEAnimate(\"" + this.m_sID + "\");" if (this.m_aImages.length > 1) { this.m_pTimer = window.setTimeout(sCmd , this.m_iFadeInterval); } } function _AnimatedImagesEngine_GetDOM() { return document.getElementById(this.m_sID); } function _AnimatedImagesEngine_SetFadeTime(iMilliseconds) { this.m_iFadeTime = iMilliseconds; } function _AnimatedImagesEngine_SetFadeInterval(iMilliseconds) { this.m_iFadeInterval = iMilliseconds; } function SetFadeTime(iMilliseconds) { if (undefined == FindEngine("aie")) CreateAnimatedImagesEngine(); FindEngine("aie").SetFadeTime(iMilliseconds); } function SetFadeInterval(iMilliseconds) { if (undefined == FindEngine("aie")) CreateAnimatedImagesEngine(); FindEngine("aie").SetFadeInterval(iMilliseconds); } // array of engine objects var g_aie_engines = [];