splitter inside editor

by jpeter06

HTML

<link rel="stylesheet" href="http://jquery.jcubic.pl/css/jquery.splitter.css">
<script src="http://jquery.jcubic.pl/js/jquery.splitter-0.14.0.js"></script>
<input id="boton" type="button" value="Toggle hidden" />

<div id="left" class="animated">aa</div>
<div id="bottom"  class="animated"></div>
<div id="top"  class="animated" style="text-align:center;" >Edit Mode </div>
<div id="right"  class="animated" >
    <div id="widget" >
        <div id="a">
               <div id="c" class="gray1">c
            </div>
            <div id="d" class="gray2">d
            </div>
        </div>
        <div class="gray3" id="b">dfsdfgs
        </div>
    </div>
</div>

CSS

html, body{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;  
    background:black;
}

.animated{
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.animated_top{
 -webkit-transition: top 0.5s;
  -moz-transition: top 0.5s;
  -o-transition: top 0.5s;
  transition: top 0.5s;
}
.animated_bottom{
 -webkit-transition: bottom 0.5s;
  -moz-transition: bottom 0.5s;
  -o-transition: bottom 0.5s;
  transition: bottom 0.5s;
}
.h_left  { left: -40px !important;  }
.h_top  { top: -40px !important;  }
.h_bottom  { bottom: -40px !important;  }

#boton{
    position:absolute;
    z-index:100;
    top:5px; left:5px;
}
#left{
    position:fixed;
    left:0px;top:30px;bottom:40px;
    width:40px;
    background:orange;
}

#bottom{
    position:fixed;
    left:0px;right:0px;bottom:0px;
    height:40px;
    background:orange;
    z-index:90;
}

#top{
    position:fixed;
    left:0px;right:0px;top:0px;
    height:30px;
    background:orange;
    z-index:90;
}

#right{
    position:fixed;
    left:40px;right:0px;top:30px;bottom:40px;
    z-index:90;
}


#widget{
    background:red;
    display: block;
        width:100%;
    height:100%;
}

.green{  background:green;}
.blue{ background:blue;}
.gray1{ background:#eee;}
.gray2{ background:#ddd;}
.gray3{ background:#ccc;}

JavaScript

jQuery(function($) {
 $('#widget').split({orientation:'horizontal', limit:100});            $('#a').split({orientation:'vertical', limit:100});

$(document).on("click", "input", function()
{
  $("#left").toggleClass("h_left");
  $("#top").toggleClass("h_top");  
  $("#bottom").toggleClass("h_bottom");
    
  $("#right").toggleClass("h_left");
  $("#right").toggleClass("h_bottom");  $("#right").toggleClass("h_top");
});
    
});