<script type="text/javascript">
    $(document).ready(function(){
        $("img.advancedpanorama").panorama({
                    auto_start: {{auto_start|yesno:"true,false"}},
                    start_position: {{start_position}},
                    control_display: '{{control_display}}',
                    speed: {{speed}},
                    direction: '{{direction}}',
                    viewport_width: {{viewport_width}},
                    mode_360: {{mode_360|yesno:"true,false"}}
        });
    });
</script>
{% if panoramainfos %}
<!-- advanced-panorama must be called after panorama initialization -->
<script type="text/javascript" src="{{STATIC_URL}}panorama/js/jquery.advanced-panorama.js"></script>
{% endif %}
<img class="advancedpanorama" src="{{panorama.image.url}}" width="{{panorama.image.width}}" height="{{panorama.image.height}}" title="{{panorama.title}}" {% if panoramainfos %}usemap="panoramamap" {%endif%}/> {% if panoramainfos %}
<map id="panoramamap" name="panoramamap"> 
    {% for info in panoramainfos %}
    <area {%if info.type%}class="{{info.type}}"{%endif%} shape="rect" coords="{{info.x0}},{{info.y0}},{{info.x1}},{{info.y1}}" href="{{info.url}}" alt="{{info.alt}}" /> 
    {% endfor %}
</map>
<script type="text/javascript">
    $(document).ready(function(){
        $('.iframe').fancybox({'type':'iframe'});
        $('.ajax').fancybox({'type':'ajax'});
    });
</script>
{% endif %}
