class Main {

    constructor () {
        this.setImageTemplate = ::this.setImageTemplate;
        this.openTemplate = ::this.openTemplate;

        // El
        this.testBtn = document.querySelector('.btn-test-overlay');
        this.overlayImageTemplate = document.querySelector('#overlay-image');

        // Get all posts
        this.getAllposts();

        // Set custom Binder for style
        this.setCustomBinding();
    }

    getAllposts(){
        const posts = new wp.api.collections.Posts();
        posts.fetch().done((posts)=>{
            this.posts = posts;
            this.testBtn.addEventListener('click',this.openTemplate);
        });
    }

    openTemplate(e){
        const postId = e.target.getAttribute('data-id');
        const postOverlayType = e.target.getAttribute('data-overlay-type');
        const postOverlayColor = e.target.getAttribute('data-color');

        if(postOverlayType == 'image'){
            this.setImageTemplate(this.posts[postId],postOverlayColor);
        }else if(postOverlayType == 'content'){
            this.setContentTemplate(this.posts[postId],postOverlayColor);
        }
    }

    setImageTemplate(post,postOverlayColor){
        var data = {
            title: post.title.rendered,
            color: postOverlayColor
        };

        rivets.bind( this.overlayImageTemplate , { data : data });

        TweenMax.to(this.overlayImageTemplate,1,{opacity:1});
    }

    setContentTemplate(post,postOverlayColor){

    }

    setCustomBinding(){
        rivets.binders['style-*'] = function(el, value){
            el.style.setProperty(this.args[0], value);
        };
    }
}

new Main();