messages.php

<!DOCTYPE html>


<?php
 session_start();
 if ($_SESSION['user_logged_in'] == ''){
 header('location: login.html');
 }

 ?>
<html>
<head>
<title>.::PkKit::.</title>

<!-- BootStrap -->

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="msgs.css" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700|Lato:400,100,300,700,900' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="css/animate.css">

    <link rel="stylesheet" href="css/style.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>


<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">PKKIT</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="myphotos.php">My Photos</a></li>
        <li><a href="aboutus.php">About Us</a></li>
        <li><a href="faqs.php">FAQs</a></li>
        <li><a href="support.php">Support</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
       <li><a href="create.php"><span class="glyphicon glyphicon-picture"></span> Create Album</a></li>
        <li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
      </ul>
    </div>
  </div>
</nav>
<ul>
</div>
<div id="body" class="container-fluid">
<div class="container-fluid">
    <div class="row chat-window col-xs-5 col-md-3" id="chat_window_1" style="margin-left:10px;">
        <div class="col-xs-12 col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading top-bar">
                    <div class="col-md-8 col-xs-8">
                        <h3 class="panel-title"><span class="glyphicon glyphicon-comment"></span> Messages</h3>
                    </div>
                    <div class="col-md-4 col-xs-4" style="text-align: right;">
                        <a href="#"><span id="minim_chat_window" class="glyphicon glyphicon-minus icon_minim"></span></a>
                        <a href="#"><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>
                    </div>
                </div>
<?php
// Grab all albums accosiated with the logged in user and display in a table

$servername = "localhost";
$username = "PKKIT";     // Set up the SQL server details.
$password = "jeznicklogan";
$dbname = "PKKIT";
$AccountID = $_SESSION['AccountID'];
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
 }

$sql = mysqli_query($conn, "SELECT * FROM message WHERE to_acc='$AccountID' ORDER BY message_id");

//$result = $conn->query($sql);
$count = 0;
//if ($result->num_rows > 0) {
    // output data of each row
    $crows=mysql_num_rows($sql);
    if ($crows < 1)
    {
        //echo "<B>You have no albums! <p />Create an album to get started!</B>";
    }
    while($row = mysqli_fetch_array($sql,MYSQL_ASSOC)) {

        $FROM = $row['from_acc'];
        $MSG = $row['message'];
        $MSG_ID = $row['msg_id'];

                                echo "<div class='row msg_container base_receive'>";
                                echo "<div class='col-md-2 col-xs-2 avatar'>";
                                echo "<img src='avatar.jpg' class=' img-responsive '>";
                                echo "</div>";
                                echo "<div class='col-md-10 col-xs-10'>";
                                echo "<div class='messages msg_receive'>";
                                echo "<p>$MSG</p>";
                                echo "<time datetime=''>$FROM</time>";
                                echo "</div>";
                                echo "</div>";
                                echo "</div>";


        // Row fetch
    }
    mysql_free_result($sql);

echo "</table>";
 $conn->close();
 ?>

  <div class="panel-footer">
                    <div class="input-group">
                        <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />
                        <span class="input-group-btn">
                        <button class="btn btn-primary btn-sm" id="btn-chat">Send</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="btn-group dropup">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="glyphicon glyphicon-cog"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#" id="new_chat"><span class="glyphicon glyphicon-plus"></span> Novo</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-list"></span> Ver outras</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-remove"></span> Fechar Tudo</a></li>
            <li class="divider"></li>
            <li><a href="#"><span class="glyphicon glyphicon-eye-close"></span> Invisivel</a></li>
        </ul>
    </div>
</div>

<script>

$(document).on('click', '.panel-heading span.icon_minim', function (e) {
    var $this = $(this);
    if (!$this.hasClass('panel-collapsed')) {
        $this.parents('.panel').find('.panel-body').slideUp();
        $this.addClass('panel-collapsed');
        $this.removeClass('glyphicon-minus').addClass('glyphicon-plus');
    } else {
        $this.parents('.panel').find('.panel-body').slideDown();
        $this.removeClass('panel-collapsed');
        $this.removeClass('glyphicon-plus').addClass('glyphicon-minus');
    }
});
$(document).on('focus', '.panel-footer input.chat_input', function (e) {
    var $this = $(this);
    if ($('#minim_chat_window').hasClass('panel-collapsed')) {
        $this.parents('.panel').find('.panel-body').slideDown();
        $('#minim_chat_window').removeClass('panel-collapsed');
        $('#minim_chat_window').removeClass('glyphicon-plus').addClass('glyphicon-minus');
    }
});
$(document).on('click', '#new_chat', function (e) {
    var size = $( ".chat-window:last-child" ).css("margin-left");
     size_total = parseInt(size) + 400;
    alert(size_total);
    var clone = $( "#chat_window_1" ).clone().appendTo( ".container" );
    clone.css("margin-left", size_total);
});
$(document).on('click', '.icon_close', function (e) {
    //$(this).parent().parent().parent().parent().remove();
    $( "#chat_window_1" ).remove();
});
</script>
    </div>

</div>


<div id="footer" class="container-fluid" style="width:100%;">
&copy PkKit 2016

</div>


</html>