legacy code with javascript help please

[MikeKJ]

This legacy code outputs an image with a set of thumbnails to change the main
image with, to start it is main image above thumbnails but when any
thumbnail that is not forloop.first is clicked it swaps upside down like
thumbnails with main image under and I cannot see how to maintain image
above and thumbnails below at all times....

[code snippet]

{% if_greater product.image_set.count 1 %}
        <script src="/media/js/MochiKit.js" type="text/javascript"
charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            function change_main_photo(showthis) {
                images = getElementsByTagAndClassName('div',
'large-images');
                for (i=0;i<images.length;i++) {
                    addElementClass(images[i].id, 'hidden');
                    if ($(showthis).id == images[i].id) {
                        removeElementClass(images[i].id, 'hidden');
                    }
                }
            }
        </script>
{% endif_greater %}
{% endblock %}
{% block content %}

    <br /><div class="breadcrumbs" style="padding-top: 13px;"> /contract/
Contract Sanitary Ware  &gt;&gt;  {{ product.category.get_absolute_url }}
{{product.category.name}}  &gt;&gt; {{product.name }}</div>


{% if product.image_set.all %}
    {% load thumbnails_tags %}

    <div>
    <div id="contractcontent" style="width:730px; margin-left:20px;
margin-top: 20px; margin-bottom: 20px; background:#FFFFFF;"
class="matching-column" >
    {% for p in product.image_set.all %}
    {% if forloop.first %}
            <div style="float:right; width:500px; margin-left: 15px;">
                <div id="main-photo-{{p.id}}" class="large-images">
{{p.get_absolute_url|thumbnail: <br />{{p.caption}}</div>
                {% if_greater product.image_set.count 1 %}
                    <p>Click image to enlarge</p>
                    <div id="product-thumbnails">
                    {% for p in product.image_set.all %}
                         {{p.get_absolute_url}} 
{{p.get_absolute_url|thumbnail:  
                    {% endfor %}
                    </div>
                {% endif_greater %}

            </div>
    {% else %}
            <div style="float:right; width:500px; margin-left: 15px;">
                <div id="main-photo-{{p.id}}" class="large-images hidden">
{{p.get_absolute_url|thumbnail: <br />{{p.caption}}</div>
             </div>

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

[/code snippet]
-- 
View this message in context: 
http://old.nabble.com/legacy-code-with-javascript-help-please-tp31612316p31612316.html
Sent from the django-users mailing list archive at Nabble.com.

-- 
You received this message because you are subscribed to the Google Groups 
"Django users" group.
To post to this group, send email to django-users@googlegroups.com.
To unsubscribe from this group, send email to 
django-users+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/django-users?hl=en.