<div id="shoutarea">
<script type="text/javascript">
$(function() {
    refresh_shoutbox();
    setInterval("refresh_shoutbox()", 15000);


    $("#submit").click(function() {
        // getting the values that user typed
        var name    = $("#name").val();
    //var name = <?php echo $_SESSION['user_id']; ?>
        var message = $("#message").val();
        // forming the queryString
        var data            = 'name='+ name +'&message='+ message;


        // ajax call
        $.ajax({
            type: "POST",
            url: "shout.php",
            data: data,
            success: function(html){ // this happen after we get result
                $("#shoutarea").slideToggle(500, function(){
                    $(this).html(html).slideToggle(500);
                    $("#message").val("");
                });
          }
        });    
        return false;
    });
});


function refresh_shoutbox() {
    var data = 'refresh=1';
    
    $.ajax({
            type: "POST",
            url: "shout.php",
            data: data,
            success: function(html){ // this happen after we get result
                $("#shoutarea").html(html);
            }
        });
}


</script></div>
<?
if (isset($_SESSION['id'])){
?>
<form method="post" action="">
                        <table class="maintxt">
                            <tr>
                                <td width="47"><div style="padding-left:5px; font-weight:bold;" class="shoutbox-list-time"><p><b><?=$gebruiker['username'];?> zeg:</b></p></div></td>
                                <td width="140"><input type="text" name="message" class="text_long" style="float:none; width: 100%;" placeholder="Jouw bericht..." maxlength="200"></td>
                                <td width="50" align="center"><input type="submit" name="sendMSG" value="Send" class="button" style="margin-right:8px;"></td>
                            </tr>
                        </table>
</form><? } ?>