<link rel="stylesheet" type="text/css" href="blog.css">
<script type="text/javascript">
// Go forward or back
var go = function(direction) {

    var req = new XMLHttpRequest();
    req.open(
        "GET",
        "blog_ajax.php?" + 
        "direction=" + direction +
        "&username=" + username +
        "&postid=" + postid
    );

    req.onreadystatechange = function() {
        if (req.readyState == 4 && req.status == 200) {
            var post = eval('(' + req.responseText + ')');
            loadPost(post);

            // Push a new history state onto the stack
            // This is what "changes the URL" in your browser
            history.pushState(
                { "postid": postid },                   // State object
                "",                                     // Title (unused)
                "blog_comments.php?postid=" + postid    // URL to change to
            );
        }
    };

    req.send();

};

// Given a response, load the data
var loadPost = function(post) {
    document.getElementById("title").textContent = post.title;
    document.getElementById("body").textContent = post.body;
    document.getElementById("date").textContent = post.date;
    postid = post.postid;

    // Show comments
    var commentsContainer = document.createElement("div");
    for (var i in post.comments)
    {
        var commentDiv = document.createElement("div");
        commentDiv.setAttribute("class", "comment");
        var authorDiv = document.createElement("div");
        authorDiv.setAttribute("class", "author");
        var bodyDiv = document.createElement("div");

        var comment = post.comments[i];

        authorDiv.textContent = comment.author + " says:";
        bodyDiv.textContent = comment.comment;

        commentDiv.appendChild(authorDiv);
        commentDiv.appendChild(bodyDiv);

        commentsContainer.appendChild(commentDiv);
    }

    // Set comments HTML to what we just generated
    document.getElementById("comments").innerHTML
        = commentsContainer.innerHTML;

};

window.onpopstate = function(event) {
    if (!event.state) return;

    var req = new XMLHttpRequest();
    req.open("GET", "blog_ajax.php?postid=" + event.state.postid);

    req.onreadystatechange = function() {
        if (req.readyState == 4 && req.status == 200) {
            var data = eval('(' + req.responseText + ')');
            loadPost(data);
        }
    }

    req.send();

};

</script>
<?php

    $db = new PDO(
        "mysql:host=localhost;dbname=class_blog",
        "class_user",
        "class_password"
    );

    $get_post_query = $db->prepare("
        SELECT * FROM `posts`
        WHERE `postid` = :postid
    ");

    $params = array(
        ':postid' => $_GET['postid']
    );

    $get_post_query->execute($params);
    $post = $get_post_query->fetch();

?>

    <script type="text/javascript">
    var username = "<?=$post['username']?>";
    var postid = <?=$post['postid']?>;

    // Replace current "state" so that we have a state object
    // for the initial page load (before prev/next are pushed)
    window.onload = function() {
        history.replaceState(
            { "postid" : postid },  // State
            ""                      // Title (unused)
        );
    };
    </script>

    <div class="links">
        <div style="float:left">
            <a href="javascript:go('prev')">Prev</a>
        </div>
        <div style="float:right;">
            <a href="javascript:go('next')">Next</a>
        </div>
    </div>

    <div class="post">
        <div id="title" class="title"><?=$post['title']?></div>
        <div id="body"><?=$post['body']?></div>
        <div class="footer">
            Posted by <?=$post['username']?>
            on <span id="date"><?=$post['date']?></span>
        </div>
    </div>

    <div id="comments">
<?php

    $get_comments_query = $db->prepare("
        SELECT * FROM `comments`
        WHERE postid = :postid
        ORDER BY `comment_date` DESC
    ");

    $get_comments_query->execute(array(
        ':postid' => $_GET['postid']
    ));

    while ($row = $get_comments_query->fetch())
    {
        echo '
            <div class="comment">
                <div class="author">' . htmlspecialchars($row['author']) . ' says:</div>
                ' . nl2br(htmlspecialchars($row['comment'])) . '
            </div>
        ';
    }

?>
    </div>

    <div id="newcomment">
        <b>Post New Comment</b>
        <form method="post"
            action="blog_savecomment.php">
            <input type="hidden" name="postid" value="<?=$_GET['postid']?>" />
            Name:<br/>
            <input type="text" name="name" /><br/>
            Message:<br/>
            <textarea name="message" rows="5" cols="40"></textarea><br/>
            <input type="submit" />
        </form>
    </div>





