var Mediawall = {

     currentPage: 0,   // current page being displayed
     playing: false,   // play/pause state
     delay: 10,        // seconds between page flips

     // sets the play state if give a param of "play" or "pause", or
     // toggles it between if given none.
     // 
     // clears the timer and sets the page to flip if current playing.
     play: function(playPause) { 
         if (playPause == "play") {
             this.playing = true;
         } else if (playPause == "pause") {
             this.playing = false;
         } else {
             this.playing = !(this.playing);
         }
         
         // if we change play/pause, reset the flip timer
         window.clearTimeout(this.timeout);
         if (this.playing) {
             this.timeout =  window.setTimeout("Mediawall.flipPage();", this.delay * 1000);
         }
     },

     // manually flips the page back or forward
     // 
     // if playing, clears the timer and sets the page to flip.
     flipPage: function(direction) {
         if (!direction) {
             direction = 1;
         }
         this.currentPage += direction;
         if (this.currentPage == this.pages.length) { 
             this.currentPage = 0; 
         }
         if (this.currentPage < 0) { 
             this.currentPage = this.pages.length - 1; 
         }
         if (this.playing) { 
             window.clearTimeout(this.timeout);
             this.timeout = window.setTimeout("Mediawall.flipPage();", this.delay * 1000);
         }
         this.transitionHTML();
     },
     
     // this function is *always* to be defined in via the params to
     // the init() method
     createHTML: function(pageNum) {
//         alert("No Mediawall createHTML function defined");
     },

     preloadImages: function(pages) {
         var imagePreload = new Array();
         for (var i=0; i<pages.length; i++) {
             imagePreload[i] = new Image;
             imagePreload[i].src = pages[i].image;
         }
     },

     
     transitionPeriod: 2, // tenths of a second - default period for a fade to take

     // takes a element id and sets it to fade from opactityStart to
     // opacityEnd over the default transition period.
     doFade: function(id, opacityStart, opacityEnd) {
         var transitionPeriod = this.transitionPeriod;
         var timer = 0;
         var increment = transitionPeriod / 100;
         var changeRate = 10;
         
         if (opacityStart > opacityEnd) {
             for (i = opacityStart; i >= opacityEnd; i -= changeRate) {
                 setTimeout("Mediawall.setOpacity(" + i + ",\"" + id + "\")", (timer * transitionPeriod));
                 timer += changeRate;
             }
         } else if (opacityStart < opacityEnd) {
             for (i = opacityStart; i <= opacityEnd; i += changeRate) {
                 setTimeout("Mediawall.setOpacity(" + i + ",\"" + id + "\")", (timer * transitionPeriod));
                 timer += changeRate;
             }
         }
     },

     // does the actual work of setting the element opacity
     setOpacity: function(opacity, id) {
         // if (navigator.userAgent.indexOf('Gecko') != -1 && navigator.userAgent.indexOf('Safari') == -1))
        if (opacity == 100) { opacity = 99.99; }; // hack to fix flicker in Mozilla and Safari - doesnt seem to bother IE
         var el = document.getElementById(id)
         if (el) { 
             el.style.opacity = (opacity / 100);
             el.style.filter = "alpha(opacity=" + opacity + ")";
             el.style.MozOpacity = (opacity/100); 
         }
     },

     // given a pagenum, it fades out any defined opacityIds, 
     // then innerHTMLs any htmlIds for the new page and 
     // then fades the same opacityIds back in
     transitionHTML: function(pageNum) {
        if (!pageNum) { pageNum = this.currentPage; }
        for (var i=0; i< this.opacityIds.length; i++) {
            Mediawall.doFade(this.opacityIds[i], 100,0);
            setTimeout("Mediawall.doFade(\"" + this.opacityIds[i] +"\", 0,100);", Mediawall.transitionPeriod * 100);
        }
        for (var i=0; i< this.htmlIds.length; i++) {
            setTimeout("document.getElementById(\"" + this.htmlIds[i] +"\").innerHTML = Mediawall.createHTML(" + pageNum + ", \"" + this.htmlIds[i] + "\")", Mediawall.transitionPeriod * 100);
        }
     },

     // takes a param object to defined the ids of necessary elements
     // and buttons, and the createHTML function
     // 
     // @param.data : object with param of pages which is array of object defining the mediawall content for each page
     // @param.opacityIds : array of image ids to fade out and in with each page transition
     // @param.htmlIds : array of ids to innerhtml contnet into with createHTML
     // @param.buttonIds : object with play, next, previous properties that give element ids for the play/next/prev buttons
     // @param.createHTML : function that returns formatted html given pageNum and the html targetId
     //
     init: function(params) {

        if (params.data.pages) {
            // load the mediawall data and preload the images
            this.pages = params.data.pages;
            this.preloadImages(this.pages);
        } else {
//            alert("No mediawall pages defined - check data file");
        }

        // hook up the custom html generator
        if (params.createHTML) {
            this.createHTML = params.createHTML;
        }

        // ids of images to fade on transition, and elements to innerHTML new content into
        this.opacityIds = params.opacityIds;
        this.htmlIds = params.htmlIds;

        // urls to play / pause state images
        this.playImage = params.playButtonImages.play;
        this.pauseImage = params.playButtonImages.pause;

        // hook up event handlers to mediawall buttons
        elPrevPage  = document.getElementById(params.buttonIds.prev);
        elNextPage  = document.getElementById(params.buttonIds.next);
        elPlayPause = document.getElementById(params.buttonIds.play);

        window.doPrev = function() { Mediawall.flipPage(-1); }
        window.doNext = function() { Mediawall.flipPage(1);  }
        window.doPlay = function() { 
            Mediawall.play();
            if (Mediawall.playing) {
                elPlayPause.style.backgroundImage = "url(" + Mediawall.playImage + ")";  // should abstract images
                elPlayPause.title = "Pause Rotation";
            } else {
                elPlayPause.style.backgroundImage = "url(" + Mediawall.pauseImage + ")";
                elPlayPause.title = "Start Playing";
            }
        }
        
        if (elPrevPage && elNextPage && elPlayPause) {
            if (typeof window.addEventListener != "undefined") {     // the firefox way
                elPrevPage.addEventListener("click", doPrev, false);
                elNextPage.addEventListener("click", doNext, false);
                elPlayPause.addEventListener("click", doPlay, false);
            } else if (typeof window.attachEvent != "undefined") {   // the ie way
                elPrevPage.attachEvent("onclick", doPrev);
                elNextPage.attachEvent("onclick", doNext);
                elPlayPause.attachEvent("onclick", doPlay);
            }
        }

        // create the first page and start the wall rotating
        this.transitionHTML();
        this.play("play");
     }

};