Fixed chat

It now has a userID again,
displays which user you are chatting withhover over user changes different background

website/public/API/loadMessages.php

@@ -1,6 +1,6 @@
 <?php
 
-include_once("../queries/private_message.php");
+include_once("../../queries/private_message.php");
 
 if (isset($_POST["lastID"]) && $_POST["lastID"] != "") {
 

website/public/API/sendMessage.php

@@ -1,6 +1,6 @@
 <?php
 
-include_once("../queries/private_message.php");
+include_once("../../queries/private_message.php");
 
 if (isset($_POST["destination"]) &&
     isset($_POST["content"])) {

website/public/js/chat.js

@@ -1,10 +1,12 @@
 $(document).ready(function() {
     loadMessages();
+    sayEmpty();
+    $(".chat-field").hide();
 });
 
 function loadMessages() {
     $.post(
-        "loadMessages.php",
+        "API/loadMessages.php",
         $("#lastIDForm").serialize()
     ).done(function(data) {
         if (data && data != "[]") {
@@ -23,7 +25,7 @@ function loadMessages() {
 function sendMessage() {
     console.log($("#sendMessageForm").serialize());
     $.post(
-        "sendMessage.php",
+        "API/sendMessage.php",
         $("#sendMessageForm").serialize()
     ).done(function( data ) {
         console.log(data);
@@ -51,7 +53,14 @@ function addMessages(messages) {
 }
 
 function switchUser(userID) {
+    $(".chat-field").show();
     $(".destinationID").val(userID);
     $("#chat-history").html("");
     $("#lastID").val("");
+    $(".chat-left .friend-item").removeClass("active-friend-chat");
+    $(".chat-left #friend-item-" + userID).addClass("active-friend-chat");
+}
+
+function sayEmpty() {
+    $("#chat-history").html("Begin nu met chatten!");
 }

website/public/styles/chat.css

@@ -88,4 +88,9 @@
     padding: 5px 10px;
     border-radius: 0 10px 10px 0;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.active-friend-chat {
+    background: aquamarine;
+    color: #333;
 }

website/public/styles/menu.css

@@ -30,9 +30,14 @@
     cursor: pointer;
 }
 
+.friend-item:hover {
+    background: #845663;
+    color: white;
+}
+
 .menu button {
     background: none;
-    color: #333;
+    color: inherit;
     width: 100%;
     height: 100%;
     padding: 0;