{% load thumbnail %}
<div class="action news_action action_{{ block_size }}" id="action_{{ block.id }}">
    <h2 class="title">
        {{ block }}
    </h2>
    <div class="feed articles">
        {% for article in block.get_rss_feeds %}
            <div class="article article_{{ forloop.counter }} {% if forloop.last %}last{% endif %}">
                <h3><a href="{{ article.link }}" target="_blank">{{ article }}</a></h3>
                <p class="date">{{ article.added }}</p>
                <p class="content">{{ article.summary|striptags|truncatewords:"10"|safe }}</p>
            </div>
        {% endfor %}
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function(){
        scrollRSS_{{ block.id }}();
    });

    function scrollRSS_{{ block.id }}() {
        var article_top, index=-1, allowed=true, article_num = $('#action_{{ block.id }} .feed .article').length;
        $('#action_{{ block.id }} .feed').animate({scrollTop:0});

        $('#action_{{ block.id }} .feed').mouseenter(function(){
            allowed = false;
        }).mouseleave(function(){
            allowed = true;
            index = -1;
            $('#action_{{ block.id }} .feed').animate({scrollTop: '0px'});
        });

        setInterval(function(){
            if (allowed){
                if (article_num === index) {
                    index = -1;
                    $('#action_{{ block.id }} .feed').animate({scrollTop: '0px'});
                }
                index += 1;
                if (index > 0){
                    article_height = $('#action_{{ block.id }} .feed .article_'+index).outerHeight();
                    $('#action_{{ block.id }} .feed').animate({scrollTop: '+='+article_height}, 1000);
                }
            }
        }, 4000);
    }

</script>