<script>
function renderArticles(data) {
    var text = '';
    var len = data.to_view.length;
    if(len == 0)
    {
        document.getElementById('article-list').innerHTML = '<div class="span12">No elements</div>';
    }
    else
    {
        for(var i=0; i<len; i++)
        {
            text += '<div class="span3"><a href="/ex/slug/'+data.to_view[i].slug+'">'+data.to_view[i].title+"</a></div>";
        }
        document.getElementById('article-list').innerHTML = text;
    }
}
function renderImages(data) {
    var text = '';
    var len = data.to_view.length;
    if(len == 0)
    {
        document.getElementById('image-list').innerHTML = '<div class="span12">No elements</div>';
    }
    else
    {
        for(var i=0; i<len; i++)
        {
            text += '<div class="span3"><a href="'+data.to_view[i].image+'" target="_blank"><img style="height:80px" src="'+data.to_view[i].image+'" /></a></div>';
        }
        document.getElementById('image-list').innerHTML = text;
    }
}
</script>
<div class="container">
    <div class="page-header">
            <h1>Strehler demo homepage</h1>
    </div>
    <div>
        <p>This is just a dummy page to display Strehler contents. It's very simple because Strehler main target is giving a good backend for your sites leaving you free to make the frontend the way you like most. So, this page just display contents created with Strehler and it's not about what Strehler can do for you!</p>
        <p>This page uses Strehler API system to display contents. It's not necessary to implement frontend this way, you can use Strehler contents in server-side generated pages. Single article pages are realized this way.</p>
    </div>
    <h2>Recent published articles (8 elements)</h2>
    <div id="article-list" class="row">
    </div>
    <h2>Recent images (3 elements)</h2>
    <div id="image-list" class="row">
    </div>
    <h2>More pages...</h2>
    <a href="/ex/list/dummy">Articles published under dummy category</a><br />
    <a href="/ex/mypage">Page with many contents</a>
</div>
<script type="text/javascript" src="/api/v1/articles/?callback=renderArticles&entries_per_page=8"></script>
<script type="text/javascript" src="/api/v1/images/?callback=renderImages&entries_per_page=3"></script>