extends ../../../views/withjs

block title
    title #{title} - Prototype

block extrajs
    script(src="/static/js/prototype/ArrowCamera.js")
    script(src="/static/js/prototype/FixedCamera.js")
    script(src="/static/js/prototype/OldFixedCamera.js")
    script(src="/static/js/prototype/ReverseCamera.js")
    script(src="/static/js/prototype/initScene.js")
    script(src="/static/js/prototype/raycasterTools.js")
    script(src="/static/js/prototype/Previewer.js")
    script(src="/static/js/prototype/ButtonManager.js")
    script(src="/static/js/prototype/Coin.js")
    script(src="/static/js/Logger.js")

    if cameraStyle == 'replay'
        script var params = params || {}; params.get = params.get || {}; params.get.id = #{id};
        script(src="/static/js/ReplayCamera.js")
        script(src="/static/js/prototype/replay.js")
    else
        if cameraStyle == 'arrows'
            script RecommendedCamera = FixedCamera;
        else if cameraStyle == 'viewports'
            script RecommendedCamera = OldFixedCamera;
        else if cameraStyle == 'reverse'
            script RecommendedCamera = ReverseCamera

        script(src="/static/js/prototype/main.js")

    script document.getElementById('music').volume = 0.5;

block extrahead
    link(rel="stylesheet" href="/static/css/prototype.css")

block content
    #main-div.panel-group(style={'margin-top':'10px', 'margin-bottom':'10px'})
        if cameraStyle != 'replay'
            #instructions.panel.panel-default
                .panel-heading
                    h4.panel-title
                        a(href="#", data-target="#collapseInstructions", data-toggle="collapse",onclick="setTimeout(onWindowResize,500);") Instructions

                .panel-collapse.collapse.in#collapseInstructions
                    .panel-body
                        p
                            | This is the prototype of a 3D interface. You can move
                            | the camera with the arrow keys of your keyboard (or
                            | WASD if you like FPS-games, and by the way, if you
                            | use azerty keyboard, you can also use ZQSD instead),
                            | and change the angle of the camera by dragging and
                            | dropping the scene around it (you can also use your
                            | numpad, 2 to look lower, 8 to look higher, 4 to look
                            | on the left and 6 to look on the right, but if you're
                            | more comfortable with non-numpad keys, you can also
                            | use i for up, j for left, k for down, and l for
                            | right).

                        p
                            | This is a re-creation of the Bob-omb Battlefield
                            | level from Super Mario 64, and with its 8 red coins.
                            | You can click on them to get them, and once you got
                            | them all, you get... well you get nothing but the
                            | sound of the star is played (but the star doesn't
                            | appear... sorry guys)

                        p
                            | It contains <em>recommended views</em> : 3D objects
                            | here to guide you through this coin search.

                        if cameraStyle == 'arrows'

                            p
                                | Recommended views are displayed with a
                                | transparent blue arrow.  They disappear when you
                                | come closer to them, and shows the motion between
                                | your current position and the recommendation.

                        else if cameraStyle == 'viewports'

                            p
                                | Recommended views are displayed with a
                                | transparent red rectangle and some lines.
                                | Basically, it represents the position of a camera
                                | (the point at the extramities of the lines
                                | represents the optical center, and the red
                                | rectangle represents the image plane).

                        else if cameraStyle == 'reverse'

                            p
                                | Recommended views are displayed with a strange
                                | blue object.  Basically, the curve at the
                                | begining of this weird object shows the motion
                                | that starts from where you are and leads to the
                                | recommended view, and the extremity is in fact an
                                | object representing a camera.

                        p
                            | You can click on a recommendation to move to the
                            | recommended viewpoint. The recommendation will become
                            | more and more transparent as you come closer, and
                            | will disappear when you reach it.

                        p
                            | You may now <a href="#" data-target="#collapseInstructions" data-toggle="collapse" onclick="setTimeout(onWindowResize,500);">hide this panel</a> and start playing !

        button#full.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom': '10px'}) Fullscreen
        button#reset.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom':'10px'}) Reset camera

        button#undo.btn.btn-default(style={'margin-right': '10px', 'margin-bottom': '10px'})
            span.glyphicon.glyphicon-triangle-left('aria-hidden'="true")

        button#redo.btn.btn-default(style={'margin-right': '10px', 'margin-bottom':'10px'})
            span.glyphicon.glyphicon-triangle-right('aria-hidden'="true")

        input#fullarrow(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'})
        label(for="fullarrow" style={'margin-right':'10px'}) Full arrow

        input#collisions(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}, checked)
        label(for="collisions" style={'margin-right':'10px'}) Collisions

        input#showarrows(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}, checked)
        label(for="showarrows" style={'margin-right':'10px'}) Show arrows

        input#recommendation(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'})
        label(for="recommendation" style={'margin-right':'10px'}) Fixed prev

        audio#music(controls, volume=0.5)
            source(src="/static/data/music/bobomb.ogg")
            source(src="/static/data/music/bobomb.mp3")

        #container(style={'padding': '0px', 'margin': '0px'}, tabindex="1")