<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>PHP Cargo Shipping Application</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/css/bootstrap.min.css">
        <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="/css/style.css">
        <script language="javascript" type="text/javascript" src="/js/jquery.min.js"></script>
        <script language="javascript" type="text/javascript" src="/js/jquery.addons.js"></script>
        <script language="javascript" type="text/javascript" src="/js/bootstrap.min.js"></script>
        <script language="javascript" type="text/javascript" src="/js/notify.min.js"></script>
        <script language="javascript" type="text/javascript" src="/js/lodash.js"></script>
        <script language="javascript" type="text/javascript" src="/js/q.js"></script>
        <script language="javascript" type="text/javascript" src="/js/moment.min.js"></script>
        <script language="javascript" type="text/javascript" src="/js/riot.min.js"></script>
        <script language="javascript" type="text/javascript" src="/js/prooph.riot.app.js"></script>
        <script language="javascript" type="text/javascript" src="/js/stores.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">                    
                    <a class="navbar-brand" href="/">PHP Cargo Shipping System</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#booking">Booking App</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </nav>
        <div class="container">
            <main></main>
            <hr>
            <footer>
                <p>&copy; 2013<?php echo (date('Y') > 2013)? ' - ' . date('Y') : ''; ?> by Alexander Miertsch. All rights reserved.</p>
            </footer>
        </div> <!-- /container -->
        <script type="text/javascript">
            <?php echo $this->compileRiot() ?>

            var CargoUI = ProophRiot.App.create({
                config : {
                    url : {
                        apiRoot: '/api/',
                        forResource : function (resource) {
                            return this.apiRoot + this.resourcePlural(resource.getName()) + '/' + resource.getId();
                        },
                        forResourceCollection : function (resourceName) {
                            return this.apiRoot + this.resourcePlural(resourceName);
                        },
                        resourcePlural: function(resourceName) {
                            return resourceName + 's';
                        },
                        forChildResource : function(childResource) {
                            return this.apiRoot + this.resourcePlural(childResource.getParentName())
                                    + '/' + childResource.getParentId()
                                    + '/' + this.resourcePlural(childResource.getName())
                                    + '/' + childResource.getId()
                        },
                        forChildResourceCollection : function(parentResource, childResourceName) {
                            return this.apiRoot + this.resourcePlural(parentResource.getName())
                                    + '/' + parentResource.getId()
                                    + '/' + this.resourcePlural(childResourceName);
                        }
                    },
                    chapter: "ChapterFour"
                }
            });

            var locationsStore = new LocationStore(CargoUI);
            var cargoStore = new CargoStore(CargoUI);
            var routeCandidateStore = new RouteCandidateStore(CargoUI);

            $(function () {
                CargoUI.bootstrap("main").ready();
            });
        </script>
    </body>
</html>
