Ugly code example

gistfile1.mustache

{% load thumbnail %}
{% load applicationcontent_tags %}


{% for product in products %}
<script type="text/javascript" language="javascript">
    $(document).ready(function(){
        $(function() {
            $('#thumbs .thumb a').each(function(i) {
                $(this).addClass( 'itm'+i );
                $(this).click(function() {
                    $('#images').trigger( 'slideTo', [i, 0, true] );
                    return false;
                });
            });
            $('#thumbs a.itm0').addClass( 'selected' );

            $('#images').carouFredSel({
                direction: 'left',
                circular: true,
                infinite: false,
                items: 1,
                auto: false,
                scroll: {
                    fx: 'directscroll',
                    onBefore: function() {
                        var pos = $(this).triggerHandler( 'currentPosition' );
                        $('#thumbs a').removeClass( 'selected' );
                        $('#thumbs a.itm'+pos).addClass( 'selected' );

                        var page = Math.floor( pos / 3 );
                        $('#thumbs').trigger( 'slideToPage', page );
                    }
                }
            });
            $('#thumbs').carouFredSel({
                direction: 'left',
                circular: true,
                infinite: false,
                items: 3,
                align: false,
                auto: false,
                prev: '#prev',
                next: '#next'
            });

        });
    });
</script>
<div class="row">

    <div id="container">
        <div id="gallery">
            <div id="main">
                <div id="images">
                    {% for image in product.product_images.all %}
                    <div class="slide">
                        <a href=""></a>
                        <img src="{% thumbnail image.image 600x400 crop %}" alt="{{ product.name }}" />
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div id="thumbs">
                {% for image in product.product_images.all %}
                <div class="thumb">
                    <a href=""></a>
                    <img src="{% thumbnail image.image 72x38 crop %}" alt="{{ product.name }}" />
                </div>
                {% endfor %}
            </div>
            <a href="#" class="thumbs" id="prev">Previous</a>
            <a href="#" class="thumbs" id="next">Next</a>
        </div>

        <div class="clear"></div>
        <br>
    </div>

    <div class="row">
        <span class="span6">
        <a href="{% app_reverse "product_detail" "widisk.products.urls" product.slug %}"><h3>{{ product.name }}</h3></a>
        <div class="redactortext">
            {{ product.short_description|safe }}
        </div>
        </span>
    </div>

</div>
        <hr>
{% endfor %}