"use strict";
var Premium = Premium || {};

Premium.creative = {
    init: function() {
        /* START OF CUSTOM JS */

        switch (document.body.id) {
            case "body_top":
                // top panel code here

                var playPauseEl = document.querySelector("#play-pause")

                var config = {
                    targetElement: "#three-sixty",
                    path: "assets/car/frames/42083.00",
                    // classPrefix:"frame frame-",
                    numFrames: 36,
                    startIndex: 1,
                    suffixDigits: 2,
                    indexIncrem: 2,
                    fileExt: "png"
                }
                JPSpritePlayer.UseTouchEvents = false;
                var threeSixty = new JPSpritePlayer(config);
  
                threeSixty.on("framechange", function() {
                    // console.log(threeSixty.currentIndex);
                })

                threeSixty.on("ended", function() {
                    playPauseEl.innerText = "Play";
                })

                // threeSixty.setLoop(true);
                // threeSixty.setSwipeEnabled(false)
                threeSixty.play();
                // threeSixty.setYoyo(true);

                var togglePlay = function(){
                    if (threeSixty.isPlaying){
                        threeSixty.pause();
                        playPauseEl.innerText = "Play";
                    } else {
                        threeSixty.play(); 
                        playPauseEl.innerText = "Pause";
                    }
                }
                playPauseEl.addEventListener("click", togglePlay);
                break;

            case "body_left":
                // left panel code here
                var spritePlayerEl = document.querySelector("#sprite-player");

                var pseudoCss = {
                    width:1,
                    minWidth:170
                }

                var config = {
                    targetElement: "#sprite-player",
                    classPrefix: [
                        { index: "0", classPrefix: "sprite-1 -DOMIN0419_Group-Ordering-SPRITE-900x450_" },
                        { index: "16", classPrefix: "sprite-2 -DOMIN0419_Group-Ordering-SPRITE-900x450_" },
                        { index: "32", classPrefix: "sprite-3 -DOMIN0419_Group-Ordering-SPRITE-900x450_" },
                        { index: "48", classPrefix: "sprite-4 -DOMIN0419_Group-Ordering-SPRITE-900x450_" },
                        { index: "66", classPrefix: "sprite-5 -DOMIN0419_Group-Ordering-SPRITE-900x450_" },
                        { index: "84", classPrefix: "sprite-6 -DOMIN0419_Group-Ordering-SPRITE-900x450_" }
                    ],
                    numFrames: 100,
                    startIndex: 27,
                    suffixDigits: 5
                }
     
                JPSpritePlayer.UseTouchEvents = false;
                var  spritePlayer = new JPSpritePlayer(config);

                setTimeout(function(){
                    spritePlayer.play();
                }, 2000);

                var resizeHandler = function(){
                    var scale = spritePlayerEl.offsetParent.clientWidth/spritePlayerEl.clientWidth * pseudoCss.width;
                    var minScale = pseudoCss.minWidth/spritePlayerEl.clientWidth;
                    scale = Math.max(scale, minScale);
                    spritePlayerEl.style.transform = "scale(" + scale + ")";
                }

                window.addEventListener("resize", resizeHandler);
                document.addEventListener("DOMContentLoaded", resizeHandler)
                break;

            case "body_right":
                // right panel code here
                var spritePlayerEl = document.querySelector("#sprite-player");
                var playPauseEl = document.querySelector("#play-pause");
                var pseudoCss = {
                    baseWidth:320,
                    width:.9,
                    maxWidth:300,
                    minWidth:100
                }
                var preload = [];
                var spriteSheet1 = new Image();
                spriteSheet1.src = "assets/dude/sprite_0-70.png";
                spriteSheet1.addEventListener("load", imageLoadedHandler);
                preload.push(spriteSheet1);
                var spriteSheet2 = new Image();
                spriteSheet2.src = "assets/dude/sprite_71-117.png";
                spriteSheet2.addEventListener("load", imageLoadedHandler);
                preload.push(spriteSheet2)
                var toLoad = preload.length;

                var config = {
                    targetElement: "#sprite-player",
                    classPrefix: [{ index: "0", classPrefix: "sprite-1 Frames_" }, { index: "71", classPrefix: "sprite-2 Frames_" }],
                    numFrames: 118,
                    startIndex: 0,
                    suffixDigits: 3
                }
     
                JPSpritePlayer.UseTouchEvents = false;
                var  spritePlayer = new JPSpritePlayer(config);

                // spritePlayer.setLoop(true);

                // threeSixty.setYoyo(true)

                function imageLoadedHandler() {
                    toLoad--;
                    if (toLoad === 0) {
                        spritePlayer.preRender(function() {
                            spritePlayer.showFrame(115)
                            spritePlayer.play(-1);
                        });
                    }
                }

                spritePlayer.on("ended", function() {
                    playPauseEl.innerText = "Play";
                })

               var togglePlay = function(){
                    if (spritePlayer.isPlaying){
                        spritePlayer.pause();
                        playPauseEl.innerText = "Play";
                    } else {
                        spritePlayer.play(); 
                        playPauseEl.innerText = "Pause";
                    }
                }
                playPauseEl.addEventListener("click", togglePlay);

                var changeFrame = function(e){
                    spritePlayer.pause();
                    playPauseEl.innerText = "Play";
                    if (e.target.id==="frame-forward"){
                        spritePlayer.showFrame(spritePlayer.currentIndex + 1)
                    } else {
                        spritePlayer.showFrame(spritePlayer.currentIndex - 1) 
                    }
                }
                document.querySelector("#frame-forward").addEventListener("click", changeFrame);
                document.querySelector("#frame-back").addEventListener("click", changeFrame);

                var resizeHandler = function(){
                    var scale = spritePlayerEl.offsetParent.clientWidth/pseudoCss.baseWidth * pseudoCss.width;
                    var minScale = pseudoCss.minWidth/pseudoCss.baseWidth;
                    var maxScale = pseudoCss.maxWidth/pseudoCss.baseWidth;
                    scale = Math.min(Math.max(scale, minScale), maxScale);
                    spritePlayerEl.style.transform = "scale(" + scale + ")";
                }
                window.addEventListener("resize", resizeHandler);
                document.addEventListener("DOMContentLoaded", resizeHandler)
                break;

            case "body_back":
                // back panel code here
                break;
        }

        /* END OF CUSTOM JS */
    }
}