/**
 * picFader.js
 * Copyright 2011, Markus Liebe
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser 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 Lesser General Public License for more details.
 * 
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 * 
 */

/**
 * some global variables
 * TODO: to be replaced by an encapsulated class definition at a later time
 */

var version = "0.3.0";

/*--- setting up the slides ---*/
var slide1 = new Object();
slide1.image = "bilder/jahresprogramm_2012.jpg";
slide1.link = "pdf/baptisten_jahresprogramm_2012.pdf";

var slide2 = new Object();
slide2.image = "bilder/expedition_ich.jpg";
slide2.link = "demnaechst.php";

var slide3 = new Object();
slide3.image = "bilder/kosse_bw.jpg";
slide3.link = "demnaechst.php";

var slide4 = new Object();
slide4.image = "bilder/gemeindegruppen.jpg";
slide4.link = "gruppen.php";

var slide5 = new Object();
slide5.image = "bilder/gottesdienst1.jpg";
slide5.link = "index.php";

var slide6 = new Object();
slide6.image = "bilder/slide3.jpg";
slide6.link = "bau.php";

var slide7 = new Object();
slide7.image = "bilder/lobpreis_und_spiele.jpg";
slide7.link = "index.php";


//var slide4 = new Object();
//slide4.image = "bilder/link_zur_dlf_predigt.jpg";
//slide4.link = "downloads/Predigt_Rundfunk-Gottesdienst_ueber_Ps_139_am_17_07_2011.pdf";


/*--- array containing the images for the slideshow ---*/
var slides = new Array(
	slide1,
	slide2,
	slide3,
    slide4,
	slide7
	);

var slideDuration;              // global variable: the duration between the change of slides

var currentInterval;            // global variable: to keep the intervalTimer
var currentTimeout;             // global variable: to keep the timer that starts
                                //                  starts the slideshow 
var runForward = true;          // global variable: to keep the direction of the fading mechanism
var timerIsOn = false;
var animationRunning = false;   // global variable: to keep the state of the animation
var ticker = 0;                 // global variable: main counter variable (0-100)
var opacityValue = 1;           // global variable: keeps the current opacity value.
var imageIndex = slides.length; // global variable: the current position in the array of images

var containerFadeOut;       // global variable: keeps the dom element of the div 
                            //                  that contains the image that has to be faded out.
var containerFadeIn;        // global variable: keeps the dom element of the div i
                            //                  that contains the image that has to be faded out.


/**
 * function that is run only once per site refresh. 
 * It does some initializing of the two container divs.
 * @returns void
 */
function initScene(timeout) {
    slideDuration = timeout;
    containerFadeOut = document.getElementById('picfader-container-fadeOut');
    containerFadeIn  = document.getElementById('picfader-container-fadeIn');
    containerFadeOut.style.opacity = 1.0;
    containerFadeIn.style.opacity = 0.0;

    var urlFadeOut;
    var urlFadeIn;
    if (runForward) {
        urlFadeOut  = "url(" + slides[0].image + ")"; 
        urlFadeIn   = "url(" + slides[1].image + ")"; 
    } else {
        urlFadeOut  = "url(" + slides[1].image + ")"; 
        urlFadeIn   = "url(" + slides[0].image + ")"; 
    }

    containerFadeOut.style.background = urlFadeOut;
    containerFadeIn.style.background = urlFadeIn;

    containerFadeOut.style.backgroundRepeat = "no-repeat";
    containerFadeIn.style.backgroundRepeat = "no-repeat";
    
    currentTimeout = setTimeout('startScene(true)',slideDuration);
}

/**
 * starts the processing of the scene.
 * this function gets called from initScene after a given timeout;
 * @param: bool: startTimer 
 */
function startScene(startTimer) {
    // reset timer state 
    timerIsOn = false;
    if (startTimer) {
        currentInterval = setInterval('advanceScene(true)',50); 
    } else {
        currentInterval = setInterval('advanceScene(false)',50); 
    }
    animationRunning = true;
}


/**
 * this function advances the scene for one step.
 * Each time this function is called some properties of
 * the scene are altered and thus the fadeIn/fadeOut 
 * effect is generated
 * @param: bool : starTimer
 */
function advanceScene(startTimer) {
    if ( ticker == 0 ) {
        var fadeOutIndex = (imageIndex % slides.length) ;
        if (runForward) {
            imageIndex++;
        } else {
            imageIndex--;
        }
        var fadeInIndex = (imageIndex % slides.length) ;

        var urlFadeOut  = "url(" + slides[fadeOutIndex].image + ")"; 
        var urlFadeIn   = "url(" + slides[fadeInIndex].image + ")"; 

        containerFadeOut.style.background = urlFadeOut;
        containerFadeOut.style.backgroundRepeat = "no-repeat";

        containerFadeIn.style.background = urlFadeIn;
        containerFadeIn.style.backgroundRepeat = "no-repeat";
    }

    ticker+=5;
    opacityValue = ticker / 100;

    if ( ticker >= 100 ) {
        clearInterval(currentInterval);
        animationRunning = false;

        // reset ticker: start over again
        ticker = 0;

        if (startTimer) {
            // wait the given timeout time  before next run
            if (!timerIsOn) {
                console.log("starting timer normal");
                currentTimeout = setTimeout('startScene(true)',slideDuration);
                timerIsOn = true;
            }
        }
    }
    containerFadeOut.style.opacity = 1-opacityValue;
    containerFadeIn.style.opacity = opacityValue;
}

/**
 * This function opens the link for the current shown
 * image.
 */
function openLink() {
	var linkIndex = (imageIndex % slides.length);
	location.href = slides[linkIndex].link;
}

/**
 * This function shows or hides the navigation overlay
 */
function showNavigation(visible)
{
    var navigationLeft  = document.getElementById('picfader-navigation-left');
    var navigationRight = document.getElementById('picfader-navigation-right');

    if (visible == true) {
        // show navigation and pause slideshow
        //if (timerIsOn) {
            console.log("clear timeout");
            clearTimeout(currentTimeout);
            timerIsOn = false;
        //}
        navigationLeft.style.visibility = 'visible';
        navigationRight.style.visibility = 'visible';
    } else {
        // hide navigation and continue slideshow
        runForward = true;
        navigationLeft.style.visibility = 'hidden';
        navigationRight.style.visibility = 'hidden';
        if (!timerIsOn) {
            console.log("starting timer");
            currentTimeout = setTimeout('startScene(true)',slideDuration);
            timerIsOn = true;
        }
    }
}

function goLeft()
{
    if (!animationRunning) {
        console.log("go left");
        runForward = false;
        startScene(false);
        if (timerIsOn) {
            console.log("clear timeout");
            clearTimeout(currentTimeout);
            timerIsOn = false;
        }
    }
}

function goRight()
{
    if (!animationRunning) {
        console.log("go right");
        runForward = true;
        startScene(false);
        if (timerIsOn) {
            console.log("clear timeout");
            clearTimeout(currentTimeout);
            timerIsOn = false;
        }
    }
}