<arc-chat>

    <div class="pane north" name="north"></div>
    <div class="pane west" name="west"></div>
    <div class="pane center" name="center">
        <arc-chat-message-area name="messages" messages="{messageList}" status="{messageAreaStatus}"></arc-chat-message-area>
    </div>
    <div class="pane east" name="east"></div>
    <div class="pane south" name="south">
        <arc-chat-input>AAAA</arc-chat-input>
    </div>

        <style scoped>

            :scope {
                position: relative;
                display: block;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            .pane{
                position: absolute;
                margin: 0;
                padding: 0;


            }

            .north{
                background-color: red;
            }
            .west{
                background-color: green;
            }
            .east{
                background-color: blue;
            }
            .south{
                background-color: yellow;
            }
            .center{
                background-color: pink;
            }

        </style>


        <script>
            var self=this;
            var messages=[];
            self.messageList=messages;

            self.messageAreaStatus = { scrollBarShown : false };

            self.westW=200;
            self.eastW=0;
            self.northH=0;
            self.southH=200;

            // Paneサイズ調整
            self.resizePanes=function(){
                //各パネルの大きさ計算
                if( self.northH<=0 ){
                    $(self.north).hide();
                }else{
                    $(self.north).show();
                    $(self.north).width($(self.root).width()-self.westW-self.eastW);
                    $(self.north).height(self.northH);
                    $(self.north).css({top: 0, left: self.westW});
                }

                if( self.southH<=0 ){
                    $(self.south).hide();
                }else {
                    $(self.south).show();
                    $(self.south).width($(self.root).width() - self.westW - self.eastW);
                    $(self.south).height(self.southH);
                    $(self.south).css({bottom: 0, left: self.westW});
                }


                if( self.westW<=0 ){
                    $(self.west).hide();
                }else {
                    $(self.west).show();
                    $(self.west).width(self.westW);
                    $(self.west).height($(self.root).height());
                    $(self.west).css({top: 0, left: 0});
                }


                if( self.eastW<=0 ){
                    $(self.east).hide();
                }else {
                    $(self.east).show();
                    $(self.east).width(self.eastW);
                    $(self.east).height($(self.root).height());
                    $(self.east).css({top: 0, right: 0});
                }

                $(self.center).width($(self.root).width()-self.westW-self.eastW);
                $(self.center).height($(self.root).height()-self.northH-self.southH);
                $(self.center).css({ top: self.northH, left: self.westW });
            };



            // 初回
            self.loadFirst = function(){

            };

            // 古い記事をロード
            self.loadOlder=function(){
                console.log('loadOlder');
            };



            self.addMessage=function(arg){

                self.messageList.push({
                    id: 8
                    ,myMessage: true
                    ,userID: 10
                    ,message: arg
                    ,name: 'Annonymous'
                    ,date: '(送信中)'
                    ,time: ''});

                self.update();

                setTimeout( function(){
                    console.log(self.messageAreaStatus.scrollBarShown);
                }, 10 );


            };


            self.on('mount',function(){
                self.resizePanes();
                $(self.root).on('resize', function(){
                    self.resizePanes();
                });
            });


            self.on('updated',function(){
                self.resizePanes();
            });



        </script>



</arc-chat>