export const DisplayID = "Display-Work";
import DataUtils, {
    REQUEST_TYPE_GET,
    REQUEST_TYPE_PUT,
    REQUEST_TYPE_POST,
    REQUEST_TYPE_DELETE,
    CONTENT_TYPE_JSON,
    CONTENT_TYPE_FORM
} from '../tools/utilities/DataUtils.jsx';
import * as DataEvent from '../tools/events/DataEvent.jsx';
import Animate from '../tools/effects/Animate.jsx';
import * as Ease from '../tools/effects/Animate.jsx';
import TextEffects from '../tools/effects/TextEffects.jsx';
import Mailer from '../tasks/Mailer.jsx'
class DisplayWork {
    //--------------------------
    // constructor
    //--------------------------
    constructor() {
        this.dataUtils = new DataUtils();
        this.mailer = new Mailer();
        this.start();
    }
    //--------------------------
    // methods
    //--------------------------
    start() {
        let self = this;
        if (document.getElementById('work-display')) {
            new Animate().object({
                targets: document.getElementById('work-display'),
                duration: 500,
                opacity: 1,
                easing: 'easeInOutQuad',
                complete: function () {
                    self.sortItemList();
                    new Animate().object({
                        targets: document.getElementById('float-bg'),
                        duration: 2000,
                        opacity: 1,
                        easing: 'easeInQuad',
                        complete: function () {

                        }
                    });
                }
            });

            new Animate().object({
                targets: document.getElementById('work-header'),
                duration: 500,
                opacity: 1,
                easing: 'easeInOutQuad',
                complete: function () {

                }
            });
        } else {
            new Animate().object({
                targets: document.getElementById('folio-header'),
                duration: 500,
                opacity: 1,
                easing: 'easeInOutQuad',
                complete: function () {
                    self.showFolioImages();
                }
            });
        }
    }
    sortItemList() {
        let workItems = document.getElementById('work-list').children;
        let trans = 300;
        let self = this;
        for (var i = 0; i < workItems.length; i++) {
            //item.addEventListener('click', f => this.handleWorkList(f))

            new Animate().object({
                targets: workItems[i],
                duration: trans,
                opacity: 1,
                easing: 'easeInOutQuad',
                complete: function () {
                    //self.showFolioImages();
                }
            });

            trans = trans + 200;
            if (i == workItems.length - 1) {

                new Animate().object({
                    targets: document.getElementById('contact'),
                    duration: 300,
                    opacity: 1,
                    easing: 'easeInOutQuad',
                    complete: function () {
                        //self.showFolioImages();
                    }
                });

            }
        }
    }

    showFolioImages() {
        let images = document.getElementById('project-images').children;
        let trans = 300;
        let self = this;
        for (var i = 0; i < images.length; i++) {
            //item.addEventListener('click', f => this.handleWorkList(f))

            new Animate().object({
                targets: images[i],
                duration: trans,
                opacity: 1,
                easing: 'easeInOutQuad',
                complete: function () {
                    //self.showFolioImages();
                }
            });
            trans = trans + 200
        }
    }
    //--------------------------
    // event handlers
    //--------------------------
}
export {
    DisplayWork as
    default
}
