define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
    'use strict';

    return Backbone.Router.extend({

        initialize: function() {
            _.bindAll(this, 'changePage');

            this.$el = $('#content');

            // Tells Backbone to start watching for hashchange events
            Backbone.history.start();

        },

        // All of your Backbone Routes (add more)
        routes: {

            // When there is no hash bang on the url, the home method is called
            '': 'home'

        },

        'home': function() {

            var self = this;

            $('#p1').fastClick(function() {
                self.changePage($('<div class=\'page\' style=\'background-color: #9acd32;\'><h1>Page 1</h1><br>some content<br>sdfdsf<br>sdffg<h3>oiuzz</h3></div>'));
            });

            $('#p2').bind('click', function() {
                self.changePage($('<div class=\'page\' style=\'background-color: blue;\'><h1>Page 2</h1><br>some content<br>sdfdsf<br><h2>sdfsdf</h2>sdffg</div>'));
            });

        },

        changePage: function(content) {

            var oldpage = this.$el.find('.page');
            content.css({x: '100%'});
            this.$el.append(content);
            content.transition({x: 0}, function() {
                window.setTimeout(function() {
                    oldpage.remove();
                }, 400);
            });

//            $("#viewport").transition({x: "100%"}, function(){
//                $("#viewport").html(content);
//                $("#viewport").transition({x: 0});
//            });
        }

    });
});