stacks divs resize

by jpeter06

HTML

<script>
    var layout=new function(){
     this.list;
     this.consts={};
     this.resC;
     this.minS=25;

     this.minMax=function(id){
        if($("#"+id).height()<=this.minS){//expandimos
            $("#"+id).height(this.consts[id]);
        }else{//minimizamos
            $("#"+id).height(this.minS);
        }
        this.resizeResC();
     };

     this.resizeResC=function(){
        $("#"+this.resC).height(0);//para poder recalcular ok
        $('body').height();
        var newH=$('body').height();
        for(var i=0;i<this.list.length;i++)
            if(this.list[i]!=this.resC) newH-=$("#"+this.list[i]).height()+4;
        $("#"+this.resC).height(newH);
        this.mostrarHeights();
     };

     this.setConts=function(list,resC){
        this.resC=resC;
        this.list=list;
     };

     this.init=function(){
        for(var i=0;i<this.list.length;i++)
            this.consts[this.list[i]]=$("#"+this.list[i]).height();
        //maximizamos resC;
        this.resizeResC();
     }

     this.mostrarHeights=function(){
        var texto="";
        var total=0;
        for(var i=0;i<this.list.length;i++){
            texto+=this.list[i]+":"+$("#"+this.list[i]).height()+"\n";
            total+=$("#"+this.list[i]).height();
            }
        texto+="body:"+$('body').height()+":"+total+"\n";
        //alert(texto);
     }
   }

    layout.setConts(['filter','data','form'],'data');
   $(document).ready(function() {layout.init();});
   $(window).resize(function() {
        layout.resizeResC();
    });
</script>


<div id="filter" class="filter">
    <div class="title">title<button onclick="layout.minMax('filter');">colapse</button></div>
  FILTER<br>FILTER2</div>

<div id="data" class="data">DATA0<br>DATA1<br>DATA2<br>DATA3<br>DATA4<br>DATA5<br>DATA<br>DATA<br>DATA<br>DATA<br>DATA<br>DATA<br>DATA<br>DATA<br>DATA<br>DATA<br>DATA<br>DATA<br>DATA<br>DATA<br><br>DATA<br>DATA</div>

<div id="form" class="form">
<div class="title">title<button...

CSS

html{height:100%;}
body{    background-color:#f0f0f0;height:100%;padding:0;margin:0;font-size:14px;}
.title{    background-color:orange;text-align:center;height:25px;}
.data{ background-color:tan; width:100%;overflow:hidden; overflow:auto;}
.form,.filter{ border: 1px solid black; background-color:white;overflow:hidden;}