recalc positions divs

by jpeter06

HTML

<select id="selector" onchange="cambiarObj(this)">
  <option >obj1</option>
  <option >obj2</option>
  <option >obj3</option>
  <option >obj4</option>
  <option >obj5</option>
  <option selected>obj6</option>
</select>

<div id="v1">
<div id="obj1" class="container">
  <div  id="A" style="width: 100%; height: 35px; top: 0%; left: 0%;">A Obj1</div>  
  <div  id="B" style="width: 62.3344%; height: calc( 100% - 35px); top: 35px; left: 0%;">B</div> 
  <div  id="C" style="width: 37.6656%; height: calc( 100% - 35px); top: 35px; left: 62.3344%;">C</div>
</div>

<div id="obj2" class="container">
  <div id="A" style="width: 60%; height: calc(50% - 35px); top: 0%; left: 0%;">A Obj2</div>  
  <div id="B"  style="width: 60%; height: 35px; top:calc(50% - 35px); left: 0%;">B</div> 
  <div id="C"  style="width: 60%; height: 50%; top:50%; left: 0%;">C</div> 
  <div id="D"  style="width: 40%; height: 50%; top: 0%; left: 60%; ">D</div>
  <div id="E"  style="width: 40%; height: 50%; top: 50%; left: 60%; ">E</div>
</div>

<div id="obj3" class="container">
  <div  id="A" style="width: 100%; height: 30px; top: 0%; left: 0%;">A Obj3</div>
  <div  id="B" style="width: 100%; height: calc( 50% - 15px); top: 30px; left: 0%;">B</div> 
  <div  id="C" style="width: 100%; height: calc( 50% - 15px); top: calc(50% + 15px); left: 0%;">C</div>
</div>
<div id="obj4" class="container">
  <div  id="A" style="width: 100%; height: 20px; top: 0%; left: 0%;">A Obj4</div>
  <div  id="B" style="width: 100%; height: calc( 100% - 20px); top: 20px; left: 0%;">B</div>  
</div>
<div id="obj5" class="container">
  <div  id="A" style="width: 100%; height:  calc( 100% - 20px); top: 0%; left: 0%;">A Obj5</div>
  <div  id="B" style="width: 100%; height: 20px; top: calc( 100% - 20px); left: 0%;">B</div> 
</div>
<div id="obj6" class="container">
  <div  id="A" style="width: 100%; height: 35px; top: 0%; left: 0%;">A Obj1</div>  
  <div  id="B" style="width: 62.3344%; height: 35px; top: 35px; left: 0%;">B</div> 
  <div ...

CSS

html, body{
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0;padding:0;
  position:absolute;
}

#v1{  position:absolute;top:20px;left:0px;width:50%;height:calc(100% - 20px);}
#v2{  position:absolute;top:20px;left:50%;width:50%;height:calc(100% - 20px);}

.container{
  width:100%; height:100%;position:relative; display:none;
}

div{ 
    position:absolute;
    border: 2px solid #ddd;
    box-sizing: border-box;
  }
  
  #A{background:#f6d206}
  #B{background:#1ccebe}
  #C{background:#6a89a6}
  #D{background:#e26e8e}
  #E{background:#80d44d}

JavaScript

function printHTN(obj){
	console.log(obj.id,obj.fixedH,'height:',obj.heightN,'top:',obj.topN);
}
function sumNull(val1,val2){return val1==null?val2:(val2==null?val1:val1+val2)}
function halfNull(val1){return val1==null?null:val1/2}
function percent(val,total){return 100*val/total;}

function treatFixed(obj,hT,fixH,fixTop,secondH){
	    console.log(obj.id,fixH,fixTop,secondH);
      var fixed=obj.height;      
      obj['heightN']=""+fixed+"px";
      if(fixH){ 
        var aux=obj.top -fixTop;
        if(aux==0)
      		obj['topN']=""+""+fixTop+"px"; 
        else{
        if(secondH)
      		obj['topN']="calc( "+percent((obj.top + obj.height),hT) +"% - "+fixed+"px )";	
        else
      		obj['topN']="calc( "+percent(obj.top,hT) +"% "+(secondH?"+":"-")+" "+fixH+"px )"; 	
        }
      }else {	
        if(secondH)
      		obj['topN']="calc( "+percent((obj.top + obj.height),hT) +"% - "+fixed+"px )";	
        else
      		obj['topN']=""+percent(obj.top,hT) +"%"; 	
      }
      printHTN(obj);
    	return fixed;
}

function treatNotFixed(obj,hT,fixH,fixTop,secondH){
			console.log(obj.id,fixH,fixTop,secondH);
      if(fixH){
      	obj['heightN']=" calc( "+percent((obj.height+fixH),hT)+"% - "+fixH+"px )";  
        if((obj.top-fixTop)!=0)
        	obj['topN']=" calc( "+percent((obj.top-fixTop),hT) +"% "+(secondH?"+":"-")+" "+fixH+"px )";
        else{
          if(fixTop)
        		obj['topN']=""+ fixTop +"px";
          else
        		obj['topN']=""+ percent(obj.top,hT) +"%";          
         }
      }else{    
      	obj['heightN']=""+percent(obj.height,hT)+"%";     
        obj['topN']=""+ percent(obj.top,hT) +"%";
      }
      printHTN(obj);
      return null;
}

function calc(obj,hTotal,fixH, fixTop,secondH){
	if(obj==null){
  }else if(obj.tipo=="Div"){//FINAL
  	if(obj.fixedH){
			return treatFixed(obj,hTotal,fixH,fixTop,secondH);
    }else{
      return treatNotFixed(obj,hTotal,fixH,fixTop,secondH);
    }
  }else{ //NOT FINAL
   ...