
//hoxton.timeline = Creative.tl;
gsap.defaults({overwrite: "auto", duration:0, ease:"none"});

// as we are using className to target elements in certain sizes in the TL, we want to suppress warnings:
gsap.config({nullTargetWarn:false});


// looping config vars
var _currentLoop    = 0;
var _totalLoops     = 0;
var _endFrameDelay  = 4;
var _useReplayBtn   = true;

// content
var container       = getById("container");
var loadingContent  = getById("loading_content");

// images
var img_container   = getById("img_container");

// furniture cta, logos etc
var ctaContainer    = getById("cta_container");
var copyCta         = getById("copy_cta");
var logoContainer   = getById("logo_container");
var imgLogo         = getById("img_logo");
var spareContainer  = getById("spare_container");

// banner timings
var _arrFrameWaits  = [3,3,3,3]; // frame timings
var _fadeOutSpeed   = 0.3;
var _fadeInSpeed    = 1;

// vars to control elements that can be turned on/off for each frame (logo,cta etc).
var _arrLogoFrames      = [false,false,false,false,false]; 
var _arrCtaFrames       = [false,false,false,false,false];
var _arrSpareImgFrames  = [false,false,false,false,false];
var _arrFrameObjs       = []; // array of objects (one for each ele) that define ele behaviour (used for logos and cta's)
   

// exit and replay
var btn_replay   = getById("btn_replay");
var exitBtn     = getById("exit_btn");

var _exitURL    = "https://www.hogarthww.com";


// frame
var _totalFrames    = 5;
var _currentFrame   = 0;
var _previousFrame  = 0;


// Create and provide timeline to Hoxton
var Creative = {

    tl: gsap.timeline( { defaults: { duration:0 , ease:"none" } } ),


    setExitURL: function( strURL )
    {
        _exitURL = strURL;
    },

    onExit: function( e ) 
    {
        hoxton.exit( "Exit" , _exitURL );
    },

    onReplay: function() 
    {
        _currentLoop++;
        Creative.tl.repeat(0);
        Creative.tl.seek("reset");
        Creative.tl.play();
        //tlTracer();
    },

    onBannerStart: function() 
    {
        console.log("Creative.onBannerStart()");
    },

    onBannerRepeat: function() 
    {   
        _currentLoop++;
    },

    onBannerComplete: function() 
    {
        if( _currentLoop === _totalLoops && _useReplayBtn === true )
        {
            Creative.tl.to( btn_replay , {display:"block"} , "end" );
        }
    },

    jumpToEndFrame: function() 
    {
        Creative.tl.pause();
        Creative.tl.seek( "end", false);
        gsap.to(btn_replay,{display:"none"});
    },

    checkIsBackup: function() 
    {
        return ( window.location.href.indexOf( 'hoxtonBackup' ) >= 0 ) ? true : false;
    },

    startAd: function() 
    {  
        Creative.createButtons();
        Creative.setUpTimeline();

        Creative.init();
        Creative.checkIsBackup() ? Creative.jumpToEndFrame() : null;
    },

    createButtons: function()
    {
        exitBtn.addEventListener( "click" , Creative.onExit , false );
        btn_replay.addEventListener( "click" , Creative.onReplay , false );
    },

    setUpTimeline: function()
    {
        Creative.tl.repeat(_totalLoops);
        Creative.tl.repeatDelay(_endFrameDelay);
        Creative.tl.eventCallback("onStart", Creative.onBannerStart);
        Creative.tl.eventCallback("onRepeat", Creative.onBannerRepeat);
        Creative.tl.eventCallback("onComplete", Creative.onBannerComplete);
    },

    displayBanner: function()
    {
        gsap.to(container,{display:"block"});
    },

    resetFrameObjs: function() 
    {
        for(var i = 0; i < _arrFrameObjs.length; i ++)
        {
            _arrFrameObjs[i].ifShowing = false;
            gsap.set([_arrFrameObjs[i].eleRef], {alpha:0});
        }
    },

    init: function() {

        Creative.tl.addLabel("reset", 0)
            
            // reset elements to initial states
            .call( Creative.resetFrameObjs ,[] , "reset" )
            
            // reset frame content - rather than hiding individual elements, we hide all using one class:
            .to(".hidden", {alpha:0}, "reset")
            .to("#container", {alpha:1}, "reset")
            .to(btn_replay, {display:"none"}, "<")
            .to(".main-copy", {filter:"blur(10px)"}, "<")


        // examples of size specific JS on the TL without if statements:

            // we have set a size specific class on the container in setDynamicContent.js
            
            // set all main-copy startPoints to y:10% except on the 728x90 format:
            .to(".main-copy:not(.size728x90 .main-copy)", {x:0, y:"10%"}, "<")
            
            // set the main-copy startPoints on 728x90 only to x:-20%
            .to(".size728x90 .main-copy", {x:"-20%", y:0}, "<")

            // reset the main-copy startPoints on 300x250 only to be adjusted if align bottom/top is set:
            .to(".size300x250 .copy-align-top", {x:0, y:"-10%"}, "<")
            .to(".size300x250 .copy-align-bottom", {x:0, y:"10%"}, "<")
            





        .addLabel("frame01", getLabelTime(0))
            // show frame content
            .to([copy_frame01a, copy_frame01b], {duration:_fadeInSpeed, filter:"blur(0px)", alpha:1, stagger:_fadeInSpeed}, "frame01+="+_fadeOutSpeed)
            .to(copy_frame01a, {duration:_fadeInSpeed, ease:"power1.out", x:0, y:0}, "<")

            // hide frame content
            .to([copy_frame01a, copy_frame01b], {duration:_fadeOutSpeed, alpha:0, overwrite:(_arrFrameWaits[0] <= _fadeOutSpeed) ? true:"auto"}, "frame01+="+_arrFrameWaits[0])


        .addLabel("frame02", getLabelTime(1))

            // show frame content
            .to([img_frame02], {duration:_fadeInSpeed, alpha:1}, "frame02+="+_fadeOutSpeed)
            .to([copy_frame02a, copy_frame02b], {duration:_fadeInSpeed, filter:"blur(0px)", alpha:1}, "frame02+="+(_fadeOutSpeed+_fadeInSpeed))
            .to(copy_frame02a, {duration:_fadeInSpeed, ease:"power1.out", x:0, y:0}, "<")

            // hide frame content
            .to([copy_frame02a, copy_frame02b], {duration:_fadeOutSpeed, alpha:0, overwrite:(_arrFrameWaits[1] <= _fadeOutSpeed+_fadeInSpeed) ? true:"auto"}, "frame02+="+_arrFrameWaits[1])


        .addLabel("frame03", getLabelTime(2))
            // show frame content
            .to([img_frame03], {duration:_fadeInSpeed, alpha:1}, "frame03+="+_fadeOutSpeed)
            .to([copy_frame03a, copy_frame03b], {duration:_fadeInSpeed, filter:"blur(0px)", alpha:1}, "frame03+="+(_fadeOutSpeed+_fadeInSpeed))
            .to(copy_frame03a, {duration:_fadeInSpeed, ease:"power1.out", x:0, y:0}, "<")

            // hide frame content
            .to([copy_frame03a, copy_frame03b], {duration:_fadeOutSpeed, alpha:0, overwrite:(_arrFrameWaits[2] <= _fadeOutSpeed+_fadeInSpeed) ? true:"auto"}, "frame03+="+_arrFrameWaits[2])


        .addLabel("frame04", getLabelTime(3))
            // show frame content
            .to([img_frame04], {duration:_fadeInSpeed, alpha:1}, "frame04+="+_fadeOutSpeed)
            .to([copy_frame04a, copy_frame04b], {duration:_fadeInSpeed, filter:"blur(0px)", alpha:1}, "frame04+="+(_fadeOutSpeed+_fadeInSpeed))
            .to(copy_frame04a, {duration:_fadeInSpeed, ease:"power1.out", x:0, y:0}, "<")

            // hide frame content
            .to([copy_frame04a, copy_frame04b], {duration:_fadeOutSpeed, alpha:0, overwrite:(_arrFrameWaits[3] <= _fadeOutSpeed+_fadeInSpeed) ? true:"auto"}, "frame04+="+_arrFrameWaits[3])


        .addLabel("frame05", getLabelTime(4))
            // show frame content
            .to([img_frame05], {duration:_fadeInSpeed, alpha:1}, "frame05+="+_fadeOutSpeed)
            .to([copy_frame05a, copy_frame05b], {duration:_fadeInSpeed, filter:"blur(0px)", alpha:1}, "frame05+="+(_fadeOutSpeed+_fadeInSpeed))
            .to(copy_frame05a, {duration:_fadeInSpeed, ease:"power1.out", x:0, y:0}, "<")


        .addLabel("end", "frame05+="+(_fadeOutSpeed+_fadeInSpeed+_fadeInSpeed))
            .call( Creative.onBannerComplete , null , "end" )


            // function adds to the timeline any tweens for the elements that can be turned on/off for each frame (logo,cta etc)
            // must be called here, after whole TL is defined but using the position value we actually call it right at start of playback
            .call(showHideBoolElements,[], "reset");

    }

};


function getById( eleID ) 
{
    return document.getElementById(eleID);
}



/*
* Function gets cumulative time for frame/labels
*/
function getLabelTime(frameIndex) {
    var totalTime = 0;

    var arrCumulativeTime = [];
    arrCumulativeTime.push(totalTime);

    for(var i= 0; i < _arrFrameWaits.length; i++)
    {
        totalTime += _arrFrameWaits[i];
        arrCumulativeTime.push(totalTime);
    }

    if(arrCumulativeTime.length > frameIndex)
    {
        return arrCumulativeTime[frameIndex];
    }
    else
    {
        return 0;
    }
}

/*
* Function adds to the timeline any tweens required to control the state
* of the objects that can be turned on/off for each frame (logo,cta etc).
*/
function showHideBoolElements() 
{
    
    var showSpeed;
    var showDelay;
    var hideSpeed;

    for(var i = 0; i < _arrFrameObjs.length; i ++)
    {
        for(var fIndex = 1; fIndex <= _totalFrames; fIndex++) 
        { 
            showSpeed = (fIndex > 1) ? _fadeInSpeed:0;
            showDelay = (fIndex > 1) ? _fadeOutSpeed:0;
            hideSpeed = (fIndex > 1) ? _fadeOutSpeed:0;

            var ifSkip = false;
            if(fIndex < _totalFrames) // if skipping a frame we need to not add tweens for it
            {
                if(_arrFrameWaits[fIndex-1] <= 0)
                {
                    ifSkip = true;
                }
            }

            var tlPos = getLabelTime(fIndex-1); // position in timeline at which to add the tween
            if(_arrFrameObjs[i].arrFrames[fIndex-1] === true) // if the element should be shown on a frame
            {
                if(_arrFrameObjs[i].ifShowing === false && ifSkip === false) // if not already showing add tween to show it
                {
                    Creative.tl
                        .to(_arrFrameObjs[i].eleRef, {duration:showSpeed, alpha:1, delay:showDelay}, tlPos);
                    _arrFrameObjs[i].ifShowing = true;
                }
            }
            else // if the element should not be shown on a frame
            {
                if(_arrFrameObjs[i].ifShowing === true && ifSkip === false) // if currently showing add tween to remove it
                {
                    Creative.tl
                        .to(_arrFrameObjs[i].eleRef, {duration:hideSpeed, alpha:0, delay:0}, tlPos);
                    _arrFrameObjs[i].ifShowing = false;
                }
            }
        }
    }
}

