<script>
    $(document).on("pageinit",function(event){
        setInterval(update, 10000);
        setInterval(getMessage, 20000);

        $( "#submit" ).bind( "click", function(event, ui) {
            //get message
            var msg_display = $("#msg").val();
            //get chat_id, if not set, display an alert of not able to send, please select chat member
            var chat_id = $("#chat_id").val();
            //get user_id
            var user = $("#user").val();
            if(chat_id != ""){
                //send message
              sendMessage(msg_display, chat_id, user);
            }else{
                alert("Please select a user to chat with");
                $("#msg").val("");
            }
});

        $( "#m_on li" ).bind( "click", function() {
          var selected_member = $(this).html();
          window.location = 'chat.php?chat_mate=' + selected_member;
            //reload this page with the values of member to chat with
});



        function update() {
     $.ajax({
         type: 'POST',
           url: "update.php",
           success: function(result){
               //all good.
           }
     })
 }
        function sendMessage(msg, msg_id, from){
           $.ajax({
         type: 'POST',
           url: "send_message.php",
           data: {msg:msg, msg_id:msg_id, from:from},
           success: function(result){
               if(result == "good"){
                   getMessage(msg_id);
               }else{
                   alert("Not able to send message " + result);
               }
           }
     })
        }

        function getMessage(msg_id){
           $.ajax({
         type: 'POST',
           url: "get_message.php",
           data: {msg_id:msg_id},
           dataType: "json",
           success: function(result){
               //all good.
               ///append to the chats.
               for(var i=0, i < result.length; i++){
                   $("#chats").append("<p>" + result[i]['message'] + "</p>" +
                                      "<p align=right>Sent by " + result[i]['sender'] + " at " +
                                       result[i]['time'] + "</p>");
               }
               $("#msg").val("");
               $('#chats').animate({scrollTop:$('#chats').prop("scrollHeight")}, 500);
           }
     })
        }
});
</script>

<div id="chats"></div>
   <textarea cols="40" rows="8" name="msg" id="msg" placeholder="Message here..."></textarea>
   <input type="button" data-inline="true" id="submit" value="Submit">