<arc-chat-message-area>

    <virtual each="{messages}">
        <arc-chat-message></arc-chat-message>
    </virtual>

    <style scoped>

        :scope {
            display: block;
            position: relative;
            height: 100%;
            overflow-x: hidden;
            overflow-y: scroll;
            background-color: rgb(128,148, 192);
        }


    </style>


    <script>

        var self=this;
        var bottomFlg=true;
        self.status=opts.status;
        self.messages=opts.messages;



        // MOUNT
        self.on('mount',function(){

            // 一番上まで来たら古い記事をロード
            $(self.root).on('scroll',function(e){

                bottomFlg=false;
                if( $(this).scrollTop()==0 ){
                    self.parent.loadOlder();
                }else if( $(self.root)[0].scrollHeight == $(self.root).scrollTop() + $(self.root).height() ){
                    bottomFlg=true;
                }

            });


            setInterval(function(){
                self.messages.push({
                    id: 10
                    ,myMessage: false
                    ,userID: 11
                    ,message: 'Hello'
                    ,name: 'Annonymous'
                    ,date: '2016-10-16'
                    ,time: '11:15:12'
                });
                self.update();
            },200000);

        });

        // UPDATED
        self.on('updated',function(){

            self.status.scrollBarShown=($(self.root)[0].scrollHeight>$(self.root).height());

            if( bottomFlg ){
                $(self.root).scrollTop($(self.root)[0].scrollHeight);
            }
        });




    </script>



</arc-chat-message-area>