
// looping config vars
var _totalLoops     = 0;
var _endFrameDelay  = 4;

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

// exit
var exitBtn         = getById("exit_btn");
var _exitURL        = "https://www.hogarth.com";



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

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


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

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

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

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

    jumpToEndFrame: function() 
    {
        Creative.tl.pause();
        Creative.tl.seek( "end", false);
    },

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

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

        // scale fonts down so copy fits on one line:
        Creative.scaleTextToFit();

    

        Creative.setUpTimeline();

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

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

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

    displayBanner: function()
    {
        loadingContent.style.display = "none";
        container.style.display = "block";
    },

    init: function() 
    {
        Creative.tl.to(copy_01, {duration:1, alpha:1}, "0")

            .to(copy_01, {duration:0.5, alpha:0}, ">2")
            .to(copy_02, {duration:1, alpha:1}, "<.25")
            .to(copy_02, {duration:0.5, alpha:0}, ">2")
            .to(copy_03, {duration:1, alpha:1}, "<.25")
            .to(terms, {duration:1, alpha:1}, "<")
            .addLabel("end", ">");
    },

    scaleTextToFit: function(){

        var copiesToScale = document.querySelectorAll('.scaleToFit');
        var maxSize = 100;
        var minSize = 7.5;
        copiesToScale.forEach(el => {
            el.style.fontSize = maxSize+"px";
            el.style.lineHeight = (maxSize*1.14)+"px";

            var innerDiv = document.createElement("div");
            innerDiv.innerHTML=el.innerHTML;
            el.appendChild(innerDiv);
            
            var i = gsap.getProperty(el,"fontSize");
            var cs = getComputedStyle(el);
            var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
            var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
            // Element width and height minus padding 
            var elementWidth = el.offsetWidth - paddingX;
            var elementHeight = el.offsetHeight - paddingY;
            // height of temporary innerText div:
            var innerWidth = innerDiv.scrollWidth;
            var innerHeight = innerDiv.scrollHeight;

            while (innerWidth > elementWidth && i>minSize) {
                i=i-0.5;
                el.style.fontSize = i+"px";
                el.style.lineHeight = (i*1.14)+"px";

                innerWidth = innerDiv.scrollWidth;
            } 

            while (innerHeight > elementHeight && i>minSize) {
                i=i-0.5;
                el.style.fontSize = i+"px";
                el.style.lineHeight = (i*1.14)+"px";

                innerHeight = innerDiv.scrollHeight;
            } 
            innerDiv.remove();
        });
    }
};


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