{% extends 'layout.html.twig' %}

{% block stylesheets %}
    <link href="{{ path('css/jquery.iviewer.css') }}" rel="stylesheet" media="all"/>
    <style>
        #viewer {
            position: relative;
            width: 100%;
        }
        .wrapper {
            overflow: hidden;
        }
    </style>
{% endblock %}

{% block javascripts %}
    <script src="{{ path('js/jquery.mousewheel.js') }}" type="text/javascript"></script>
    <script src="{{ path('js/jquery.iviewer.js') }}" type="text/javascript"></script>
    <script type="text/javascript">
        $(window).resize(function(){
            $("#viewer").height($(window).height() - 100);
        });

        $(document).ready(function() {
            $("#viewer").iviewer({src: '{{ path('graphs/classes.svg') }}', zoom_animation: false});
            $('#viewer img').bind('dragstart', function(event){
                event.preventDefault();
            });
            $(window).resize();
        });
    </script>
{% endblock %}

{% block content %}
    <div class="row-fluid">
        <div class="span12">
            <div class="wrapper">
                <div id="viewer" class="viewer"></div>
            </div>
        </div>
    </div>
{% endblock %}