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

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

        switch (document.body.id) {
            case "body_top":
                var scalingEl = document.getElementById("scaling-carousel");
                var options = {
                    target: scalingEl,
                    type: JPCarousel.Horiz,
                    navPosition: JPCarousel.Bottom,
                    arrowsrc: "assets/arrow.png",
                    infinite: true,
                    periphery: .6,
					noshowitem:true,
					navcontainer:document.body
                }
                var scalingObj = new JPCarousel(options);
                scalingObj.on("showitem", function(index){
                    console.log("showitem", index, scalingObj.getCurrentItem());
                })
                scalingObj.on("prepshowitem", function(index){
                    console.log("prepshowitem", index);
                })
                scalingObj.on("swipeitem", function(direction){
                    console.log("swipeitem", direction);
                })
                JPCarousel.callOnReady(scalingObj, function(){
                    scalingObj.showItem(0, 0);
                })
               
                break;

            case "body_left":

                var horizStaticEl = document.getElementById("horiz-static-carousel");
                JPCarousel.callOnReady(horizStaticEl, function(el, obj){
                    JPCarousel.getObject(horizStaticEl) === obj // true
                    obj.showItem(1, 0);
                })

                var verticalStaticObj = JPCarousel.getObject("#vertical-static-carousel");
                verticalStaticObj.autoShowTimer(3000);
				verticalStaticObj.on("swipeitem", function(direction){
					console.log("swipeitem", direction);
				})

                var scalingEl = document.getElementById("scaling-carousel");
                var options = {
                    target: scalingEl,
                    type: JPCarousel.Vert,
                    infinite:false,
                    navPosition: JPCarousel.None,
                    periphery: .6,
                }
                var scalingObj = new JPCarousel(options);

                break;

            case "body_right":
                var horizDynamicObj = JPCarousel.getObject("#horiz-dynamic-carousel");
                var images = [
                    "assets/men/frame-01.png",
                    "assets/women/frame-01.png",
                    "assets/men/frame-02.png",
                    "assets/women/frame-02.png",
                    "assets/men/frame-03.png"
                ];
                var requiredIndexes = [];
                horizDynamicObj.on("showitem", function(index) {
                    var prevIndex = index === 0 ? horizDynamicObj.numItems - 1 : index - 1;
                    var nextIndex = index === horizDynamicObj.numItems - 1 ? 0 : index + 1;
                    requiredIndexes.length = 0;
                    requiredIndexes.push(index, nextIndex, prevIndex);
                    var itemEls = horizDynamicObj.getItems();
                    for (var i = 0; i < requiredIndexes.length; i++) {
                        itemEls[requiredIndexes[i]].style.backgroundImage = "url(" + images[requiredIndexes[i]] + ")";
                    }
                })
                JPCarousel.callOnReady(horizDynamicObj, function(el, obj){
                    horizDynamicObj.showItem(1, 0);
                });
                
                var verticalDynamic = document.getElementById("dynamic-fade-carousel");
                var verticalDynamicObj = new JPCarousel(verticalDynamic, JPCarousel.Fade, undefined, true);
                verticalDynamicObj.setIsFadeOutOtherItems(true);

                var transparentBgFadeObj = JPCarousel.getObject("#transparent-bg-carousel");
                transparentBgFadeObj.autoShowTimer(3000);
                transparentBgFadeObj.on("showitem", function(){
                    gsap.from(transparentBgFadeObj.getCurrentItem(), .5, {scale:.9})
                })
                break;
        }

        /* END OF CUSTOM JS */
    }
}