Educational Platform

by jakie8

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<div id="toolbar"></div>
<div id="app">
    <div id="sidebar">
        <div id="messages"></div>
        <ul>
            <li><a href="#">Item One</a></li>
            <li><a href="#">Item Two</a></li>
            <li><a href="#">Item Three</a></li>
            <li><a href="#">Item Four</a></li>    
            <li><a href="#">Item Five</a></li>        
        </ul>                
    </div>
    <div id="frames">
        <table>
            <tr>
                <td class="first-cell"><textarea></textarea></td>
                <td class="second-cell"><textarea></textarea></td>
            </tr>
            <tr>
                <td class="third-cell"><textarea></textarea></td>
                <td class="fourth-cell"><textarea></textarea></td>
            </tr>            
        </table>           
    </div>
</div>

CSS

body{
    background:#EFEFEF;
    font-family:"Helvetica", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
}
#toolbar{
    height: 42px;
    border-top: 1px solid #B0BDCF;
    border-bottom: 1px solid #445C75;
    background-color: #617e9f;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#617e9f), to(#567493));
    background-image: -webkit-linear-gradient(top, #617e9f, #567493);
    background-image:    -moz-linear-gradient(top, #617e9f, #567493);
    background-image:     -ms-linear-gradient(top, #617e9f, #567493);
    background-image:      -o-linear-gradient(top, #617e9f, #567493);
    background-image:         linear-gradient(to bottom, #617e9f, #567493);

    }
#app{
    position:absolute;
    top:44px;
    bottom:0;
    width:100%;
    }
#sidebar{
    position:absolute;
    top:0;
    bottom:0;
    width:217px;
    background:#fff;
    border-right:1px solid #ccc;
    font-size:11px;
    color:#444;
    overflow:auto;
}
#frames{
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:217px;
}
#frames table{
    width:100%;
    height:100%;
}
#frames table .first-cell{
    width:50%;
    height:50%;
}
#frames table td{
    position:relative;
    
  -webkit-transition: all 0.5s ease; 
     -moz-transition: all 0.5s ease; 
      -ms-transition: all 0.5s ease; 
       -o-transition: all 0.5s ease; 
          transition: all 0.5s ease;
}
#frames table textarea{
    position:absolute;
    top:6px;
    left:6px;
    bottom:6px;
    right:6px;
    border:none;
    resize:none;
    outline:1px solid #CCC;
}
#frames table textarea{
    outline:1px solid #CCC
}
#frames .first-cell textarea{ right:3px; bottom:3px; }
#frames .second-cell textarea{ left:3px; bottom:3px; }
#frames .third-cell textarea{ right:3px; top:3px; }
#frames .fourth-cell textarea{ left:3px; top:3px; }


#messages .message{
    color: #3A87AD;
    background-color: #D9EDF7;
    border: 1px solid #BCE8F1;
    border-radius:5px;
   ...

JavaScript

var Quad = {};
var Messages = {};

Quad = {
    table: -1,
    listener: -1,
    init: function(settings) {
        Quad.table = settings.table, Quad.listener = settings.listener;


        $(document).on((Quad.listener == "hover") ? 'mouseover' : Quad.listener, Quad.table + ' td', function() {
            switch ($(this).attr('class')) {
            case 'first-cell':
                $('.first-cell').css({
                    width: '75%',
                    height: '75%'
                });
                break;
            case 'second-cell':
                $('.first-cell').css({
                    width: '25%',
                    height: '75%'
                });
                break;
            case 'third-cell':
                $('.first-cell').css({
                    width: '75%',
                    height: '25%'
                });
                break;
            case 'fourth-cell':
                $('.first-cell').css({
                    width: '25%',
                    height: '25%'
                });
                break;
            }
            if (Quad.listener == "click") {
                $('body').on('click', function() {
                    $('.first-cell').css({
                        width: '50%',
                        height: '50%'
                    });
                });
                event.stopPropagation();
            }
        });
        if (Quad.listener == "hover") {
            $(document).on('mouseout', Quad.table, function() {
                $('.first-cell').css({
                    width: '50%',
                    height: '50%'
                });
            });
        } else if (Quad.lisener == "click") {
            $(document).on('click', ':not(' + Quad.table + ')', function() {
                $('.first-cell').css({
                    width: '50%',
                    height: '50%'
                });
            });
        }
    }
}

Messages = {
    remove: function(obj) {
       ...