var _build = function(){
    var _nodes = $('.selected_item :selected')
    var _body = {}
    jx.utils.patterns.visitor(_nodes,function(_item){
        if (_item.selected == true){
            var _name = _item.parentNode.name ;
            var _value = _item.value
           _body[_name] = parseInt(_value)
        }
    })
    //
    // Let us submit the payload and and render the image
    var http = HttpClient.instance()
    http.setHeader('Content-Type','application/json')
    http.setData (JSON.stringify(_body))
    var _context = sessionStorage.getItem('genomix.studio')
    var _uri     = _context + '/api/studio/_build'
    http.post(_uri,function(x){
        stream = 'data:image/png;base64,' + x.responseText
        jx.dom.set.attribute('image','src',stream)
        // jx.dom.set.attribute('_avatar2','src',stream)
    })

}

var _open = function(_id){
    $('.studio .section').hide()
    $('.studio .'+_id.trim()).slideDown()
    jx.dom.set.value('section-label',_id)
    if (_id == 'login'){
        $('.button').hide()
    }else{
        $('.button').show()
    }

   
}

_save = function(){
   var _stream = jx.dom.get.attribute('image','src')
   var _alias = jx.dom.get.value('alias').trim().toLowerCase()
   var _email= jx.dom.get.value('email').trim().toLowerCase()
   var _body = {email:_email,alias:_alias,png:_stream,'_args':{}}
   var _nodes = $('.selected_item :selected')
   if (_alias.match(/^[a-z]{3,}$/) == null || _email.match(/^[a-z,0-9,.,-]+\@[a-z,0-9,-]{2,}\.[a-z]{2,3}$/) == null){
        _message = (['The alias and/or email are invlaid, Please enter correct alias and/or email','<ul><li>alias must be at least 3 characters</li><li>Email must be properly formatted</li></ul>']).join('')
        _dialog('Error found','fa-solid fa-xmark',_message)
        return
   }
   jx.utils.patterns.visitor(_nodes,function(_item){
       if (_item.selected == true){
           var _name = _item.parentNode.name ;
           var _value = _item.value
          _body._args[_name] = parseInt(_value)
       }
   })
   http = HttpClient.instance()
   http.setHeader('content-type','application/json')
   http.setData(JSON.stringify(_body))
   var _context = sessionStorage.getItem('genomix.studio')
   var _uri     = _context+'/api/studio/_save'
   http.post(_uri,function(x){
       if(x.status == 200){
            //
            //
            _message = (['An avatar for ',_alias,'has been saved/updated']).join(' ')
            
            _icon = 'fa-solid fa-floppy-disk'
            _pointer = function(){_reset(); $('.jxmodal').slideUp()}
           
       }else{
        _message = (['An avatar for ',_alias,'has failed to be added']).join(' ')
        _icon = 'fa-solid fa-xmark'
        _pointer = null;
       }
       _dialog('New Avatar',_icon,_message)
   })
}

var _dialog = function(title,icon,msg,_pointer){
    var http = HttpClient.instance()
    http.setHeader('uri','dialog.html')
    http.setHeader('dom','_dialog')
    var _context    = sessionStorage.getItem('genomix.studio')
    var _uri        = _context + '/page'
    http.post(_uri,function(x){
        var _html = x.responseText.replace(/:title/,title).replace(/:message/,msg).replace(/:icon/,icon)
        jx.modal.show({html:_html,id:'_dialog'})
        if (_pointer == null){
            _pointer = function(){$('.jxmodal').slideUp()}
           
        }
        
        $('.dialog .button').on('click',function(){
            _pointer()
        })
    })
}

var _reset = function(){
    $("option:selected").prop("selected", false)
    // jx.dom.set.attribute('image','src','')
    _open('basic')
    _build()
}