/**
 * Steve L. Nyemba
 * This namespace is designed to run modal windows types {dialog,alert,custom} 
 */
var __jx_modalw__ = {width:0,height:0}
/**
 * @param {*} info  {uri|html}
 */
__jx_modalw__.init = function(info,pointers){
    // if(info.match(/^[a-z](+\/[a-z,.]+){1,}/i)){
    //     var uri = info
    //     var http = HttpClient.instance()
    //     http.get(uri,function(x){
    //         var html = x.responseText
    //         __jx_modalw__.render.modal(html,pointers)
    //     })
    // }else{
    //     var html = info
    //     __jx_modalw__.render.modal(id,html,pointers)
    // }
}

__jx_modalw__.render = {}
__jx_modalw__.render.modal = function(id,html,pointers){
    var bg      = jx.dom.get.instance('DIV')
    var frame   = jx.dom.get.instance('DIV')
    
    var buttons  = jx.dom.get.instance('DIV')
    bg.style.position       = 'relative'
    bg.style.zIndex         = 1
    bg.style.width          = '98.5%'
    bg.style.height         = '98%'
    bg.style.backgroundColor= 'rgba(242,242,242,0.7)'
    bg.style.display = 'grid'
    
    if(html.match(/^http|^\//)){
        bg.style.gridTemplateColumns = '10% 80% 10%'
        bg.style.gridTemplateRows = '10% 80% 10%'
        var iframe = jx.dom.get.instance('IFRAME')
        iframe.src = html
        iframe.frameBorder = 0
        iframe.style.width = '99%'
        iframe.style.height= '99%'
        iframe.style.backgroundColor = '#ffffff'
        iframe.className = 'border-round border'
        frame.appendChild(iframe)
            
    }else{
        var text   = jx.dom.get.instance('DIV')
        text.innerHTML = html
        frame.appendChild(text)
        bg.style.gridTemplateColumns = '20% 60% 20%'
        bg.style.gridTemplateRows = '20% 60% 20%'
        frame.style.display = 'flex'
        frame.style.justifyContent = 'center'
        frame.style.alignItems = 'center'
        // frame.style.resize = 'both'
        text.className = 'border border-round'
        text.style.backgroundColor = '#ffffff'
        
    }
    frame.style.gridRow = '2/3'
    frame.style.gridColumn = '2/3'

    bg.appendChild(frame)
    bg.onclick = function(){
        jx.dom.remove(this)
    }
    return {id:id,background:bg,frame:frame}
}
/**
 * This function is designed to layout the pane with the background on it
 */
__jx_modalw__.render.show = function(info){
    info.background.className = 'border-round border'
    info.background.style.position = 'relative'
    
    var parent = (info.id != null)?jx.dom.get.instance(info.id): document.body
    var height = $(parent).height()
    var width = $(parent).width()
    parent.appendChild(info.background)
    if(info.id == null){
        info.background.style.top = 0
        info.background.style.left =0
        info.background.style.position = 'absolute'
    }else{
        $(info.background).width(width+(width*0.01))
        $(info.background).height(height+(height*0.1))
        info.background.style.top =  -(height)
        info.background.style.left= -10
    
    }
    
    
    
}

if(! jx){
    var jx = {}
}
/**
 * This function will generate a modal window
 * @param {*} html 
 * @param {*} args 
 */
jx.modal= function(html,args){
    if(args == null){
        args = null
    }
    var info = __jx_modalw__.render.modal(args,html)
    __jx_modalw__.render.show(info)
}
// jx.modal.render = function(id,html){
//     var info = __jx_modalw__.render.modal(id,html)
//     // console.log(info)
    
// }
jx.modal_example = function(){
    
    busy = '<div class="small" align="center">Please wait</div><i class="fa fa-cog fa-5x faa-wrench animated" style="color:#4682b4"></i><i class="fa fa-cog fa-spin fa-3x" style="color:black"></i><i class="fa fa-cog faa-wrench animated fa-5x" style="color:#4682B4"></i>'
    jx.modal(busy)
}