clog("VCON")




// glob_react.video_layout.calcTileGrid
glob_mx.h_scope = glob_mx.h_scope || {}
glob_mx.filmstrip_handlers["fs_h"] = function function_name(o) {
    // clog("fs_h FN HANDLER.")

    if (o.length == 1){
        $(".fs_container")[0].dataset.c_len = 1
    } else if (o.length == 2){
        $(".fs_container")[0].dataset.c_len = 2

    } else if (o.length == 3){
        $(".fs_container")[0].dataset.c_len = 3

    } else if (o.length > 3){
        $(".fs_container")[0].dataset.c_len = "3g"

    }

    // clog("fs_h FN HANDLER",arguments)
    return
    // console.trace("fs_h FN ")


    glob_mx.h_scope = {}
    glob_mx.h_scope.width =1000
    glob_mx.h_scope.height =1000
    // console.trace("fs_h")
    // setTimeout(fh2,0)
}
function fh2(){
	clog("fs_h FH2")
}
function rs_cb(j_){
    // clog("d3_i","rs_cb",j_)
    // clog("d3_","rs_cb")
	var i,k,v,j
	j = $(j_)
	for (v of j){
			// clog("mv_cb////.")

		if (v.mv_cb){
			// clog("mv_cb////",v.mv_cb)
			v.mv_cb.resolve("RS_CB")
		}
	}
}
glob_mx.filmstrip_handlers_post["fs_h"] = function function_name(o) {
    // clog("fs_h FN HANDLER_POST",arguments)
    // $(".fs_container").css()
    return
    if (o.length == 1){
        $(".fs_container")[0].dataset.c_len = 1
    } else if (o.length == 2){
        $(".fs_container")[0].dataset.c_len = 2

    } else if (o.length == 3){
        $(".fs_container")[0].dataset.c_len = 3

    } else if (o.length > 3){
        $(".fs_container")[0].dataset.c_len = "3g"

    }

    

    return

    var t_height = glob_mx.h_scope.height
    var t_width = glob_mx.h_scope.width

    var css_obj = {
    	"min-width":t_width,
    	"min-height":t_height,
    	width:t_width,
    	height:t_height,
    	"--vdim2": `"${Math.round(t_width * 10)/10} x ${Math.round(t_height * 10)/10}"`,
    }
        	// "--vdim2": `"${t_width} x ${t_height}"`,
// 
// Math.round(num * 10) / 10
    // $(".vspace").find(".small_vid")
    $(".vspace").find(".small_vid").css(css_obj)

    // console.trace("fs_h")
    // setTimeout(fh2,0)
}


// fs_handlers_post
glob_mx.filmstrip_tile_handlers["fs_h"] = function function_name(vc) {

    // clog("fs_h FN TILE HANDLER",vc,{that:this,args:[...arguments]})
    // console.trace("FSHT")
    // clog("d3_z","filmstrip_tile_handlers","fs_h",jc(vc.dataset))
    // clog("d3_","filmstrip_tile_handlers","fs_h",vc)
    // 
/*
bottom: 570
height: 285
left: 659
right: 1318
top: 285
width: 659
x: 659
y: 285*/


    // var bottom,height,left,right,top,width,x,y
    var bcr,bcr_
    var bcr0
    var jvc = $(vc)



    bcr0 = vc.getBoundingClientRect()
    bcr_ = vc.parentNode.getBoundingClientRect()
    bcr =  jc(bcr_)
    // bcr.height -= 50
    if (bcr.width){

    // bcr_ =  bcr
    // clog("d3_z",bcr_,vc ,vc.parentNode)
    }


    // 

    
    // jvc.css({width:bcr.width,height:bcr.height - 50})

    // RC I think I set css  this way so it dosen't resize weird
    // this is awkward TODO refactor
    // glob_mx.override_fns.iapx_hdec? glob_mx.override_fns.iapx_hdec(n):0
    if (glob_mx.override_fns.fth_vc_css){
        // clog("vcx",jc({vc,bcr0,bcr,bcr_,jvc}))
        let dc = vc.dataset.corner
        // clog("vcx_"+dc,jc({vc,bcr0,bcr,bcr_,jvc}))
        // clog("vcx_"+dc,jc(bcr),bcr)
        // clog("vcx_"+dc,jc(bcr),bcr,bcr_)
        glob_mx.override_fns.fth_vc_css({bcr0,bcr,bcr_,jvc})
        // clog("vcx_"+dc,bcr,bcr_)
        // clog("vcx_"+dc,bcr,bcr_,vc.parentNode.getBoundingClientRect())
    } else {
    jvc.css({width:bcr.width,height:bcr.height})

    }
    // jvc.css({width:bcr.width,height:bcr.height,"--findme":"findme", })
        // clog("dbg_ jvc",jvc)









    let {bottom,height,left,right,top,width,x,y} = bcr
    var vids = $(vc).find(".small_vid")

	const numberOfParticipants = $(vc).find(".small_vid").length
	const TILE_ASPECT_RATIO = 16 / 9;

    const viewAspectRatio = width / height;
    const ratioOfRatios = TILE_ASPECT_RATIO / viewAspectRatio;
    // clog("RA",ratioOfRatios,numberOfParticipants)
    if (numberOfParticipants < 1){
    	return
    }
    // console.trace("QX2z")
	// return
    const tileGrid = calcTileGrid_x(1/ratioOfRatios, numberOfParticipants);
    var t_height,t_width
    var t_height_2,t_width_2
    // var   

    // t_height = Math.floor(height/tileGrid.rows)



    // if (tileGrid.constraint){
    t_width = Math.floor(width/tileGrid.rows)
    t_width = t_width - 10
    t_height = t_width / TILE_ASPECT_RATIO
    // } else {
    t_height_2 = Math.floor(height/tileGrid.columns)
    t_height_2 = t_height_2 - 10
    t_width_2 = t_height_2 * TILE_ASPECT_RATIO
    // }


    if (t_width > t_width_2){
    	t_width = t_width_2
    	t_height = t_height_2
    }

    // t_width =
    // t_width = Math.floor(height/tileGrid.rows)
    // t_height = t_width / TILE_ASPECT_RATIO
    // t_width = t_width - 52
    // t_height = t_height - 52

    // vids
    var css_obj = {
    	"min-width":window.mfl?"":t_width,
    	"min-height":window.mfl?"":t_height,
    	width:t_width,
        // "--findme":"findme2",
        // "--fnd_me":"13",
        // "--fnd_me":"",
    	// height:t_height - 50,
        height:t_height ,
    }
    // glob_mx.h_scope.height ? 
    // if (!glob_mx.h_scope.height || glob_mx.h_scope.height < t_height){
    // if (glob_mx.h_scope.height < t_height){
    if (glob_mx.h_scope.height > t_height){
    	glob_mx.h_scope.height = t_height
    	glob_mx.h_scope.width = t_width

    }
    resize_thumbs_proto(vids,css_obj)
    rs_cb(vids)
    fix_avatar(vids)
    // let {bottom,height,left,right,top,width,x,y} = vc.getBoundingClientRect()

    // clog("fs_h FN TILE HANDLER",vc.className,$(vc).find(".small_vid").length,tileGrid,{height,width,t_height,t_width})
    // vid_container
}



glob_mx.filmstrip_handlers["fsx"] = function function_name(argument) {
    clog("fsx FN HANDLER")
}


glob_mx.filmstrip_tile_handlers["fsx"] = function function_name(argument) {
    clog("fsx FN TILE HANDLER")
}



glob_mx.filmstrip_handlers["fsx2"] = function function_name(argument) {
    clog("fsx2 FN HANDLER")
}



glob_mx.filmstrip_tile_handlers["fsx2"] = function function_name(argument) {
    clog("fsx2 FN TILE HANDLER")
}








function fix_avatar(vid){
    var k,v,bcr
    for (v of  $(vid).filter(".remote_vid,.local_vid")){
        bcr = v.getBoundingClientRect()
        var avi_dim = Math.ceil(bcr.height * .55)
        $(v).find(".avatar-container").css({
            width:avi_dim,
            height:avi_dim,
        })
    }
}

function fix_avatar_lv(vid){
    var k,v,bcr
    // $("#dominantSpeakerAvatar")
    v = $("#largeVideoContainer")[0]

    // for (v of  $(vid).filter(".remote_vid,.local_vid")){
        bcr = v.getBoundingClientRect()
        // $(v).find(".avatar-container").css({
        // $(v).find("#dominantSpeakerAvatar").css({

        // $(v).find("#dominantSpeakerAvatarContainer").css({
        var zx = bcr.height * .75
        // bcr.height
        var zoom =1
        if (zx < 300){
            zoom = zx/300
        } else {
        zoom =1

        }
        $(v).find("#dominantSpeaker").css({zoom
            // width:Math.ceil(bcr.height * .75),
            // height:Math.ceil(bcr.height * .75),
        })
    // }
}


dflt_css_proto = {

      'padding-top': '',
      "max-height": ``,
      "min-height": ``,
      "max-width": ``,
      "min-width": ``,
      width: ``,
      height: ``,
      top: ``,
      left: ``,
      bottom: ``,
      right: ``,
      position:``,
      tramsform:``,
      // right: ``,
      // right: ``,
    
}

function resize_thumbs_proto(thumbs,css_arg){
  var k,v
  let css
  if (Array.isArray(css_arg)){
    css = Object.assign({},dflt_css_proto,...css_arg)
  } else {
    css = Object.assign({},dflt_css_proto,css_arg)
  }

  if (typeof(css.data) == "object"){
    try{
    Object.assign($(thumbs)[0].dataset,css.data)
} catch(err) {
    clog("dataset err",err)
}
  }
  css["--vdim"] = `"${css.width} x ${css.height}"`
  $(thumbs).css(css)

}

function calcTileGrid_x(ratio, tilesParam) {
    let rows = 1;
    let columns = 1;
    let availableTiles = 1;
    let tiles = tilesParam;
    let constraint = 0;
    let all = []

    // Someone could give you ratio = 0 and/or tiles = Infinity
    if (tiles > 65536 || tiles < 1 || isNaN(tiles)) {
        tiles = 1;
    }
    if ( ratio <= 0 || isNaN(ratio)) {
        ratio = 1;
    }
    while (availableTiles < tiles) {
        if ((columns + 1) * ratio < rows + 1) {
            columns++;
            constraint = false
        } else {
            rows++;
            constraint = true
        }
        all.push({r:rows,c:columns,b:constraint})
        availableTiles = rows * columns;
    }
    let r2  = rows
    let c2  = columns
    if (constraint){
        while ((c2 + 1) * ratio < r2 + 1){
            c2+=1
        } 

    } else {
        while (!((c2 + 1) * ratio < r2 + 1)){
            r2+=1
        } 
    }

    return {
        rows,
        columns,
        availableTiles,
        tiles,
        constraint,
        all,
        r2,
        c2,
    };
}





dispatch_resize() 


// glob_mx.filmstrip_tile_handlers["fsx"] = glob_mx.filmstrip_tile_handlers["fsx2"]
// glob_mx.filmstrip_handlers["fsx"] = glob_mx.filmstrip_handlers["fsx2"]