clog("!")






glob_mx.filmstrip_handlers = glob_mx.filmstrip_handlers || {}






dflt_css = {

      'padding-top': '',
      "min-height": ``,
      "min-width": ``,
      width: ``,
      height: ``,
    
}
function resize_thumbs(thumbs,css){
  const computed_css = Object.assign({},dflt_css,css)
  var k,v
  for ([k,v] of Object.entries(computed_css)){
    Number(v) ? computed_css[k] = v + "px" : 0
  }
  // clog("RTHUMBS")
  thumbs.css(computed_css)

}
function resize_thumbs_vertical(cont){
  const computed_css = Object.assign({},dflt_css)

  var aspect = 16/9
  var width = 335
  var thumbs = $(cont).children(".small_vid")
  width = $(cont).width() - 1  
  // computed_css["--v_index"]=`"VERT"`
  var height = Math.round(width/aspect)
  computed_css.height = height
  computed_css["min-height"] = height
  computed_css.width = width
  computed_css["min-width"] = width
  var k,v
  for ([k,v] of Object.entries(computed_css)){
    Number(v) ? computed_css[k] = v + "px" : 0
  }
  // clog("RTHUMBS")
  thumbs.css(computed_css)

}

function resize_thumbs_horizontal(cont){
  const computed_css = Object.assign({},dflt_css)

  var aspect = 16/9
  var width = 335
  // computed_css["--v_index"]=`"horizontal"`
  var thumbs = $(cont).children(".small_vid")
  width = ($(cont).height() * aspect) 
  width = ($(cont).height() * aspect) - 1
  var height = Math.round(width/aspect)
  computed_css.height = height
  computed_css.width = width
  var k,v
  for ([k,v] of Object.entries(computed_css)){
    Number(v) ? computed_css[k] = v + "px" : 0
  }
  // clog("RTHUMBS")
  thumbs.css(computed_css)


}

function resize_thumbs_center(cont){
  const computed_css = Object.assign({},dflt_css)

  var aspect = 16/9
  var width = 335
  // computed_css["--v_index"]=`"horizontal"`
  var thumbs = $(cont).children(".small_vid")
  width = ($(cont).height() * aspect) 
  width = ($(cont).height() * aspect) - 1
  var height = Math.round(width/aspect)
  computed_css.height = height
  computed_css.width = width
  var k,v
  for ([k,v] of Object.entries(computed_css)){
    Number(v) ? computed_css[k] = v + "px" : 0
  }
  // clog("RTHUMBS")
  thumbs.css(computed_css)


}


function resize_filmstrips(that,fn_name,args=[]){

}
function resize_filmstrips2(that,fn_name,args=[]){
	
}


function resizeThumbnailsForCustomView(that,fn_name,args=[]){
    const thumbs = glob_react.Filmstrip._getThumbs()
    const all_thumbs = $(".small_vid")
    const custom_thumbs = all_thumbs.not(thumbs.remlocThumbs)
    const vid_containers = $(".vid_container")
    const loose_thumbs = custom_thumbs.not(vid_containers.children())
    var k,v 
    for (v of vid_containers){
      // clog(":",v,v.dataset.fs_type)
      switch (v.dataset.fs_type){
        case "vertical":{
          resize_thumbs_vertical(v)
          /*
          resize_thumbs($(v).children(".small_vid"),{
                  width: `${100}px`,
                height: `${100}px`,
          })
          */
          break;
        }
        case "horizontal":{
          resize_thumbs_horizontal(v)

          break;
        }
        case "single":{
          resize_thumbs_center(v)

          break;
        }

        default:{

          break;
        }
        clog("HI")
      }
    }
    // return
    // const custom_thumbs = all_thumbs

    var aspect = 16/18
    var width = 135
    var height = Math.round(width/aspect)
    loose_thumbs.css({
      'padding-top': '',
      "min-height": `${height}px`,
      "min-width": `${width}px`,
      width: `${width}px`,
      height: `${height}px`,
    })

    clog("rtscv",fn_name,[that,...args])


}




function calc_fs_dims0(){
    const hd_w = 16
    const hd_h = 9

    const aspect_ratio_hd = hd_w / hd_h

    const aspect_ratio_65 = (hd_w * 6) / (hd_h * 5)
    const aspect_ratio_64 = (hd_w * 6) / (hd_h * 4)


    const state = APP.store.getState();
    var { clientHeight, clientWidth } = state['features/base/responsive-ui'];
    var avail_width  =clientWidth
    var avail_height =clientHeight - 100



    var dim_hd = glob_dev_fns.calculateThumbnailSizeForTileView_dev({
            columns:1,
    visibleRows:1,
    clientWidth:avail_width,
    clientHeight:avail_height,
    TILE_ASPECT_RATIO:TILE_ASPECT_RATIO ,
    verticalMargin:0,
    // sideMargins=0,
    // topBottomPadding:100,
    })


    var dim_65 = glob_dev_fns.calculateThumbnailSizeForTileView_dev({
            columns:1,
    visibleRows:1,
    clientWidth:avail_width,
    clientHeight:avail_height,
    TILE_ASPECT_RATIO:aspect_ratio_65 ,
    verticalMargin:0,
    // sideMargins=0,
    // topBottomPadding:100,
    })

    var dim_64 = glob_dev_fns.calculateThumbnailSizeForTileView_dev({
            columns:1,
    visibleRows:1,
    clientWidth:avail_width,
    clientHeight:avail_height,
    TILE_ASPECT_RATIO:aspect_ratio_64 ,
    verticalMargin:0,
    // sideMargins=0,
    // topBottomPadding:100,
    })
    clog("~~",dim_hd)




    resize_thumbs_proto($(".a1"),{
        width:clientWidth,
        height:clientHeight,
        "--vtext":`"window"`
    })
    resize_thumbs_proto($(".a2"),{
        width:avail_width,
        height:avail_height,
        "--vtext":`"avail"`
    })


    resize_thumbs_proto($(".b2"),[dim_hd,
    	{
    		"--vtext":`"dim_hd"`
    	},])

    resize_thumbs_proto($(".b3"),[dim_65,
    	{
    		"--vtext":`"dim_65"`
    	},])

    resize_thumbs_proto($(".b4"),[dim_64,
    	{
    		"--vtext":`"dim_64"`
    	},])
    let w5,h5,w53,h53,w54,h54
    h5 = dim_hd.height/5
    w5 = dim_hd.width/5

    w53 = w5 * 3
    h53 = h5 * 3
    w54 = w5 * 4
    h54 = h5 * 4
    resize_thumbs_proto($(".a3z"),[
    	{
    		        width:w5,
        height:h5,
    		"--vtext":`"t5"`
    	},])


    resize_thumbs_proto($(".a4"),[
    	{
    		     width:dim_hd.width,
        height:h5,
    		"--vtext":`"top_fs"`
    	},])
    resize_thumbs_proto($(".a5"),[
    	{
    		     width:w5,
        height:h53,
        top:h5,
    		"--vtext":`"left_fs"`,
    	},])

    resize_thumbs_proto($(".a6"),[
    	{
    		     width:w5,
        height:h53,
        top:h5,
        left:w54,
        // right:0,
    		"--vtext":`"right_fs"`,
    	},])

    resize_thumbs_proto($(".a7"),[
    	{
    		     width:dim_hd.width,
        height:h5,
        top:h54,
        // left:w54,
        // right:0,
    		"--vtext":`"bottom_fs"`,
    	},])



    // resize_thumbs_proto($(".b2"),dim_hd)



}
function calc_fs_dims(){
    const hd_w = 16
    const hd_h = 9

    const aspect_ratio_hd = hd_w / hd_h

    const aspect_ratio_65 = (hd_w * 6) / (hd_h * 5)
    const aspect_ratio_64 = (hd_w * 6) / (hd_h * 4)


    const state = APP.store.getState();
    var { clientHeight, clientWidth } = state['features/base/responsive-ui'];
    var avail_width  =clientWidth
    var avail_height =clientHeight - 100



    var dim_hd = glob_dev_fns.calculateThumbnailSizeForTileView_dev({
            columns:1,
    visibleRows:1,
    clientWidth:avail_width,
    clientHeight:avail_height,
    TILE_ASPECT_RATIO:TILE_ASPECT_RATIO ,
    verticalMargin:0,
    // sideMargins=0,
    // topBottomPadding:100,
    })
    let w5,h5,w53,h53,w54,h54
    h5 = dim_hd.height/5
    w5 = dim_hd.width/5

    w53 = w5 * 3
    h53 = h5 * 3
    w54 = w5 * 4
    h54 = h5 * 4




    // fs_type: "vertical"
    resize_thumbs_proto($(".ic1"),[
    	{
    		     width:dim_hd.width,
        height:h5,
    		"--vtext":`"top_fs"`,
    		// data:{fs_type: "vertical"},
    		data:{fs_type: "horizontal",},
    	},])


    resize_thumbs_proto($(".ic2"),[
    	{
    		     width:w5,
        height:h53,
        top:h5,

    		"--vtext":`"left_fs"`,
    		data:{fs_type: "vertical"},
    	},])

    resize_thumbs_proto($(".ic3"),[
    	{
    		     width:w5,
        height:h53,
        top:h5,
        left:w54,
        // left:0,
        // right:0,
    		"--vtext":`"right_fs"`,
    		data:{fs_type: "vertical"},
    	},])

    resize_thumbs_proto($(".ic6"),[
    	{
    		     width:dim_hd.width,
        height:h5,
        top:h54,
        left:0,
        // left:w54,
        // right:0,
    		"--vtext":`"bottom_fs"`,
    		data:{fs_type: "horizontal"},
    	},])


    resize_thumbs_proto($(".ic4"),[
    	{
    		     width:w53,
        height:h53,
        height:h53,
        top:h5,
        left:w5,
        // left:w54,
        // right:0,
    		"--vtext":`"center"`,
    		data:{fs_type: "single"},
    	},])

}



function new_move(){
	var j 
	try {
		j = jc(window.sorted_tiles)
	} catch (err) {
		clog("NEW MOVE err:",err)
	}
	// var j = $(".small_vid")
	$(".ic1").append(j.splice(2,5))
	$(".ic2").append(j.splice(0,3))
	$(".ic3").append(j.splice(0,3))
	$(".ic6").append(j.splice(0,5))
	$(".ic4").append(j.splice(0,1))
}

function move_info(){
	var j = $(".small_vid")
	var k,v
	for (v of j){
		clog(v)
	}
	// $(".ic1").append(j.splice(2,5))
	// $(".ic2").append(j.splice(0,3))
	// $(".ic3").append(j.splice(0,3))
	// $(".ic6").append(j.splice(0,5))
	// $(".ic4").append(j.splice(0,1))
}


if (window.saftly_remove){
    init_api6()
    // calc_fs_dims0()
    calc_fs_dims()
    new_move()
    // get_avail_width()
    // clog("REZIE PROTO READY")
}