// using jquery to dynamically load posts with ajax
// 3 parts, jquery,functions.php,and index.php

// jquery part

(function () {
        jQuery('div.post').each(function () {
            var _post = this;
            var id = jQuery(_post).attr('id');
            if (/^post\-[0-9]+$/.test(id)) {
                if (/blank_content/i.test(jQuery(_post).find('.content').attr('class'))) {
                    var toggle = jQuery('<a href="javascript:void(0);" class="toggle collapse"></a>');
                    toggle.toggle(function () {
                        expand(id, _post)
                    }, function () {
                        collapse(_post)
                    })
                } else {
                    var toggle = jQuery('<a href="javascript:void(0);" class="toggle expand"></a>');
                    toggle.toggle(function () {
                        collapse(_post)
                    }, function () {
                        expand(id, _post)
                    })
                }
                toggle.prependTo(jQuery(_post))
            }
        });

    function expand(id, post) {
        if (jQuery(post).find('.content').text() == '') {
            loadPost(id)
        }
        jQuery(post).find('.content').slideDown();
        jQuery(post).find('a.toggle').removeClass('collapse').addClass('expand')
    }
    function collapse(post) {
        jQuery(post).find('.content').slideUp();
        jQuery(post).find('a.toggle').removeClass('expand').addClass('collapse')
    }

    function loadPost(id) {
        var postId = id.slice(5);
        jQuery.ajax({
            type: 'GET',
            url: '?action=load_post&id=' + postId,
            cache: false,
            dataType: 'html',
            contentType: 'application/json; charset=utf-8',
            beforeSend: function (data) {
                loadPostContent(id, '<p class="ajax-loader">Loading...</p>')
            },
            success: function (data) {
                loadPostContent(id, data)
            },
            error: function (data) {
                loadPostContent(id, '<p>Oops, failed to load data. <small><a href="javascript:void(0);" onclick="POS.loadPost(\'' + id + '\');">[Reload]</a></small></p>')
            }
        })
    }
    function loadPostContent(id, data) {
        jQuery('#' + id + ' .content').html(data)
    }
})();


// wordpress functions part

function load_post() {
    if($_GET['action'] == 'load_post' && $_GET['id'] != '') {
        $more_link_text = 'Read more...';
        $id = $_GET["id"];
        $output = '';

        global $wpdb;
        $post = $wpdb->get_row($wpdb->prepare("SELECT * FROM $wpdb->posts WHERE ID = %d LIMIT 1", $id));

        if($post) {
            $content = $post->post_content;
            
            if ( preg_match('/<!--more(.*?)?-->/', $content, $matches) ) {
                $content = explode($matches[0], $content, 2);
                if ( !empty($matches[1]) && !empty($more_link_text) ) {
                    $more_link_text = strip_tags(wp_kses_no_null(trim($matches[1])));
                }
            } else {
                $content = array($content);
            }
            $output = $content[0];
            if ( count($content) > 1 ) {
                if ( $more ) {
                    $output .= '<span id="more-'.$id.'"></span>'.$content[1];
                } else {
                    $output = balanceTags($output);
                    if ( ! empty($more_link_text) ) {
                        $output .= ' <a href="'. get_permalink($id) . "#more-$id\" class=\"more-link\">$more_link_text</a>";
                    }
                }

            }
        }
        $output .= '<div class="fixed"></div>';
        echo wpautop($output);
        die();
    }
}

add_action('init', 'load_post');

// wordpress template part (index.php)

<?php if (have_posts()) : while (have_posts()) : the_post(); update_post_caches($posts); ?>
        <div class="post" id="post-<?php the_ID(); ?>">

            <h2><a class="title" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>

                        <div class="content blank_content clearfix"></div>
            
        </div>
    <?php endwhile; ?>
    <?php endif; ?>