$(function () {
    var app = Sammy(function () {
        var self = this;

        var addFeaturedModule = function () {
            var template = [];
            template.push('<p class="pull-right visible-xs">');
            template.push('<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>');
            template.push('<div class="jumbotron">');
            template.push('<h1>MUG</h1>');
            template.push('<p>Introducción al desarrollo web moderno.</p>');
            template.push('</div>');

            var content = $("#featured");
            content.empty();
            content.append(template.join(""));
        }
                    
        self.get("#/", function () {
            addFeaturedModule();

            $.get("api/properties", function (results) {
                var template = [];

                $.each(results, function (index, item) {
                    template.push('<div class="col-xs-6 col-lg-4">');
                    template.push('<h2>' + item.description + '</h2><p>Descripción</p>');
                    template.push('<p><a class="btn btn-default" href="#detail/' + item.propertyID + '" role="button">Detalle &raquo;</a></p></div>');
                });
                var content = $("#main-content");
                content.append(template.join(""));
            });
        });

        this.get("#about", function () {
            $("#featured").empty();
            var content = $("#main-content");
            content.empty();
            content.append("<p>About</p>");
        });

        this.get("#contact", function () {
            $("#featured").empty();
            var content = $("#main-content");
            content.empty();
            content.append("<p>Contacto</p>");
        });
        
        this.get("#detail/:id", function (sender) {
            var id = sender.params["id"];

            $.get("api/properties/" + id, function (result) {
                var template = [];
                template.push('<div class="col-xs-12">');
                template.push('<h2>' + result.description + '</h2><p>Descripción</p>');
                template.push('</div>');

                $("#featured").empty();

                var content = $("#main-content");
                content.empty();
                content.append(template.join(""));
            });
        });
    });
    app.run("#/");
});