class KeyframeView extends EICDomContent {

    constructor() {
        super()
        Object.assign(this, app.helpers.activeAttributes)
        //this.tileMarkup = app.Assets.Store.html['/app/assets/html/mailing/tile.html']
    }
    
    DOMContentFocused(options) { 
        if(this.wasBlured){ // Avoid 2nd refesh on DomContentLoaded
            //this.refreshyoustuff() 
        }
        this.wasBlured = false
    }

    DOMContentBlured(options) { this.wasBlured = true }

    DOMContentLoaded(options) {    
        this.windowPrefsId = `editors.keyframeview.${options.mode}`
        for(let model in options.models) this[model] = options.models[model]
        this.kfe = options.kfe
        const components = ui.eicfy(this.el)       
        this.setupTriggers(components)        
        this.setupRefs(components)
        this.renderingEngine = this.kfe.startRendering(this.outputs.kfeCanvas, options.mode)
        this.output('settingsMenu',app.Assets.Store.html.sapceViewSetting)
        this.outputs.settingsMenu.querySelectorAll('input[type="toggler"]').forEach(el => {  
                const tog = new InputToggler(el)
                if(this.kfe[tog._el.name].layers){
                    tog.value = this.renderingEngine.camera.layers.test(this.kfe[tog._el.name].layers) ? 'yes' : 'no'
                }
                tog.onToggle = this.settingsToggle.bind(this)
        })
    }

    settingsToggle(value, object){
        if(['grid','axes'].includes(object._el.name)){
            const layerId = {'grid':1,'axes':2}[object._el.name]
            if(value=='yes'){
                this.renderingEngine.camera.layers.enable(layerId)
            } else {
                this.renderingEngine.camera.layers.disable(layerId)
            }
        }
        //TODO save & restore in prefs
    }
    
}

app.registerClass('KeyframeView', KeyframeView)