@using BuildOurOwnBabylonJSServer.Extensions;
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    @if (ViewBag.DoNotUseBabylonJS == null)
    {
        @Html.Raw(this.BabylonJSStyle(@"Tools\BuildOurOwnBabylonJS\BuildOurOwnBabylonJSShared\Style\Loading.css"))
        @Html.Raw(this.BabylonJSScript("cannon.js"))
        @Html.Raw(this.BabylonJSScript(@"Tools\BuildOurOwnBabylonJS\BuildOurOwnBabylonJS\ourOwnBabylon.js"))
        @Html.Raw(this.BabylonJSScript(@"Tools\BuildOurOwnBabylonJS\BuildOurOwnBabylonJSShared\Scripts\Loading.js"))
        <script type="text/javascript">
            var OURBABYLON = OURBABYLON || {};
            $(document).ready(function(){
                if (!BABYLON.Engine.isSupported()) {
                    alert("Your browser does not support WebGL so you can't use BabylonJS on it");
                    return;
                }

                OURBABYLON.canvas = document.getElementById("ourOwnBabylonJSCanvas");
                OURBABYLON.engine = new BABYLON.Engine(OURBABYLON.canvas, true);

                OURBABYLON.sceneInitialization = function (scene, attachControlToCamera) {
                    OURBABYLON.currentScene = scene;
                    if (!OURBABYLON.currentScene.activeCamera) {
                        OURBABYLON.currentScene.activeCamera = new BABYLON.ArcRotateCamera("DefaultCamera", Math.PI / 2, 0, 10, new BABYLON.Vector3.Zero(), OURBABYLON.currentScene);
                        OURBABYLON.currentScene.activeCamera.zoomOn();
                        if (attachControlToCamera) {
                            OURBABYLON.currentScene.activeCamera.attachControl(OURBABYLON.canvas);
                        }
                    }
                    if (OURBABYLON.currentScene.lights.length == 0) {
                        var light = new BABYLON.HemisphericLight("Default light", new BABYLON.Vector3(0, 1, 0), OURBABYLON.currentScene);
                    }
                };
                window.addEventListener("resize", function () {
                    OURBABYLON.engine.resize();
                });

                window.OURBABYLON = OURBABYLON;
            });
        </script>
    }
</head>
<body>
    <div id="main">
        <div id="title">
            <h1>@ViewBag.Title</h1>
            <div id="menu">
                <a href="@Url.Action("Index", "SandBox")">Sandbox</a>
            </div>
        </div>
        @if (ViewBag.DoNotUseBabylonJS == null)
        {
        <canvas id="ourOwnBabylonJSCanvas"></canvas>
        }
        @RenderBody()
        <script type="text/javascript">
            var menu = document.getElementById("menu");

            var req = new XMLHttpRequest();
            req.open('GET', "@Html.Raw(this.BabylonJSSamplesFolder())");
            req.onreadystatechange = function (evt) {
                if (req.readyState == 4) {
                    if (req.status == 200) {
                        var json = JSON.parse(req.responseText);
                        for (var i in json.files) {
                            var span = document.createElement("span");
                            span.innerHTML = " | ";
                            menu.appendChild(span);

                            var file = json.files[i];
                            var a = document.createElement("a");
                            a.setAttribute("href", file.url);
                            a.textContent = file.linkName.charAt(0).toUpperCase() + file.linkName.slice(1);
                            menu.appendChild(a);
                        }
                    }
                }
            };
            req.send(null);
        </script>
    </div>
</body>
</html>
