dynamic positioning

by jpeter06

HTML

<div id="main">
    <riot-container id="one" style="width: 31.4261%; height: 50.1018%; top: 0%; left: 0%; background:blue"> <div class="content"><h2>asd</h2><p>asdf as asdf asdf asd qwer qwe qwer qwe qwerqwer qwer qwe asdf asfasdasd asfasfasfas asf asf as asf asf asf a rqwerqwer qwer erqwerqwer qw qwer qwafasdfas asdf a</p></div>
   </riot-container>
    <riot-container id="two" class="wood"  style=" width: 31.4261%; height: 50.1018%; top: 50.1018%; left: 0%;"> qwe qwer qwe qwerqwer qwer qwe asdf asfasdasd asfasfasfas asf asf as asf asf asf a rqwerqwer qwer erqwerqwer qw 
   </riot-container>
    <riot-container id="three" style=" width: 68.5739%; height: 35.8452%; top: 0%; left: 31.4261%; background:green"> qwe qwer qwe qwerqwer qwer qwe asdf asfasdasd asfasfasfas asf asf as asf asf asf a rqwerqwer qwer erqwerqwer qw 
   </riot-container>    
    <riot-container id="four" style=" width: 68.5739%; height: 64.1548%; top: 35.8452%; left: 31.4261%;background:orange"> qwe qwer qwe qwerqwer qwer qwe asdf asfasdasd asfasfasfas asf asf as asf asf asf a rqwerqwer qwer erqwerqwer qw 
   </riot-container>    
</div>
<div id="bcont">
<button id="move" onclick="mover()">move</button>
<button id="back" onclick="volver()">back</button>
</div>

CSS

.stack2{
    float:left !important;
    clear: both;
    width:25% !important; 
    height: 25% !important;
  /*  padding-bottom: 25%; */
    position:static !important;
    zoom:0.5;
  /*  border-radius: 50%; */
    overflow:hidden;
    transition: all 0.4s ease;
}


.fullSize2{
    width:75% !important; 
    height:100% !important;
    position:absolute !important;
    right:0px !important;
    top:0px !important;
    left:initial !important;
}

#bcont{ position:absolute;top:0px;left:0px; z-index:2}

#selector2{
   position: absolute;
    left: 0px;   top: 0px;  bottom: 0px;
    width:25%;   padding: 0px;
    background: rgba(0,0,0,0.6);
    overflow: auto;
}

#container2{
     position: absolute;
    right: 0px; top: 0px; bottom: 0px;
    width:75%;    padding: 0px;
    background: rgba(0,0,0,0.4);  
}

riot-container {
    box-sizing: border-box;
    display: block;
    position: absolute;
    padding: 12px;
    transition: all 0.5s ease;
    border:4px solid white;
    overflow:auto;
}

#main {
    position: absolute;
    left: 14px; right: 14px; top: 22px; bottom:10px;
    padding: 0px;
    overflow: hidden;
    width: auto;
}

.wood{
    background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
    background-color:#0C0C0C;
    background-size: 100% 100%;
    height:100%;
    width:100%;
}

JavaScript

$(function(){
    console.log("init");
    
})

function mover(){
    $('#main').children().each(function(){
        console.log(this);
        $(this).addClass("stack2");
        click2($(this));
    });
    
    $('#main').children().last().removeClass("stack2").addClass("fullSize2").
      unbind("click");
}

function volver(){
    $('#main').children().each(function(){
        $(this).
        removeClass("stack2").removeClass("fullSize2").
        unbind("click");
    });
}


function click2(obj){
    obj.on( "click",function( event ) {
  		event.preventDefault();
      $('#main').children().each(function(){
        $(this).addClass("stack2").
        removeClass("fullSize2");
        click2($(this));
      });
   	  $(this).
      removeClass("stack2").addClass("fullSize2").
      unbind("click");
	  });	
}