<script type="text/javascript" src="javascripts/jquery.js"></script>
	<script type="text/javascript" src="javascripts/jquery.form.js"></script>
	
			<?php if(!empty($_SESSION['id'])) echo '<h3>'.$txt['area_messenger_title_text'].'</h3>'; ?>
                <div id="page">
                  <div class="top"></div>
                    <div class="content">
                    <center>
                      <div id="daddy-shoutbox" style="float:inherit;">
                        <div class="inputform-shoutbox">
                        <?php if(!empty($_SESSION['id'])){ ?>
                        <form id="daddy-shoutbox-form" action="shoutboxthings/shoutbox.php?action=add" method="post">
<?php if($gebruiker['account_code'] == 1 && $gebruiker['mute'] < 1 && $gebruiker['rank'] >= 3){ ?>
<table width="100%">
<tr>
<td width="47"><div style="padding-left:5px; font-weight:bold;" class="shoutbox-list-time"><?php echo $txt['say']; ?></div></td>
<td width="140">
<input type="text" name="message" class="text_long" style="float:none;" maxlength="200" />
</td>
<td width="50">
<input type="submit" value="Verzend" class="button" style="margin-right:8px;" />
</td>
<td><div style="float:left;"><span id="daddy-shoutbox-response"></span></div></td>
</tr>
</table>


                        </form>
                        <?php }
						else echo $txt['please_login_first']; ?>
                        </div>
                        <div id="daddy-shoutbox-list"></div>
					</div></div></div>
					</center>
			




  <script type="text/javascript">
    var count = 0;
    var lastTime = 0;
        
		// nu komt er een 0 voor de tijd als het minder is als 10.
		function checkTime(i){if (i<10){i="0" + i;}return i;}
		
        function prepare(response) {
          var d = new Date();
          count++;
          d.setTime(response.time*1000);
          var mytime = checkTime(d.getHours())+':'+checkTime(d.getMinutes())+':'+checkTime(d.getSeconds());
          var string = '<div class="shoutbox-list" id="list-'+count+'">'
              + '<span class="shoutbox-list-time">'+mytime+'</span>'
              + '<span class="shoutbox-list-nick">'+response.nickname+':</span>'
              + '<span class="shoutbox-list-message">'+response.message+'</span>'
              +'</div>';
			  
	      //Hoeveel berichten mogen er gezien worden:
          if (count > 50) { x = (count - 50); $('#list-' + x).fadeOut('slow'); x = document.getElementById('list-' + x); x.style.display = "none"; }
          return string;
        }
        
        function success(response, status)  { 
          if(status == 'success') {
            lastTime = response.time;
            if(response.bad == 1) $('#daddy-shoutbox-response').html('<img src="images/icons/red.png" /> <?php echo 'Login first before saying something'; ?>');
            else{
              $('#daddy-shoutbox-response').html('<img src="images/icons/green.png" />');
              $('#daddy-shoutbox-list').prepend(prepare(response));
              $('input[@name=message]').attr('value', '').focus();
              $('#list-'+count).fadeIn('slow'); 
              timeoutID = setTimeout(refresh, 3000);
            }
          }
        }
        
        function validate(formData, jqForm, options) {
          for (var i=0; i < formData.length; i++) { 
            if (!formData[i].value) {
              $('#daddy-shoutbox-response').html('<img src="images/icons/red.png" /> <?php echo 'No message'; ?>');
              return false; 
            }
          } 
          $('#daddy-shoutbox-response').html('<img src="images/icons/loading.gif" />');
          clearTimeout(timeoutID);
        }
		
       function refresh() {
         $.getJSON("shoutboxthings/shoutbox.php?action=view&time="+lastTime + '&nocache=' + Math.random(), function(json) {
            if(json.length) {
              for(i=0; i < json.length; i++) {
                $('#daddy-shoutbox-list').prepend(prepare(json[i]));
                $('#list-' + count).fadeIn('slow');
                //EvalSound('succes') //play sound
                //  window.focus();
                var mes = json[i].nickname+": "+json[i].message; 
                document.title = mes;


              }
              var j = i-1;
              lastTime = json[j].time;
            }
            //alert(lastTime);
          });
          timeoutID = setTimeout(refresh, 3000);
        }
        
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            var options = { 
              dataType:       'json',
              beforeSubmit:   validate,
              success:        success
            }; 
            $('#daddy-shoutbox-form').ajaxForm(options);
            timeoutID = setTimeout(refresh, 100);
			
        });
  </script>