/**
 * A module for the router of the desktop application
 */
define("router", [
    'jquery',
    'underscore',
    'configuration',
    'utilities',
    'text!../templates/desktop/main.html'
],function ($,
            _,
            config,
            utilities,
            MainTemplate) {

    $(document).ready(new function() {
       utilities.applyTemplate($('body'), MainTemplate)
    })

    /**
     * The Router class contains all the routes within the application -
     * i.e. URLs and the actions that will be taken as a result.
     *
     * @type {Router}
     */

    var Router = Backbone.Router.extend({
        initialize: function() {
            //Begin dispatching routes
            Backbone.history.start();
        },
        routes:{
        }
    });

    // Create a router instance
    var router = new Router();

    return router;
});

<!--
    The main layout of the page - contains the menu and the 'content' &lt;div/&gt; in which all the
    views will render the content.
-->
<div id="logo"><div class="wrap"><h1>Ticket Monster</h1></div></div>
<div id="container">
    <div id="menu">
        <div class="navbar">
            <!-- Toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-items">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="navbar-items" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#about">About</a></li>
                    <li><a href="#events">Events</a></li>
                    <li><a href="#venues">Venues</a></li>
                    <li><a href="#bookings">Bookings</a></li>
                    <li><a href="#monitor">Monitor</a></li>
                    <li><a href="admin">Administration</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="content" class="container">
    </div>
</div>

<footer style="">
    <div style="text-align: center;"><img src="resources/img/rhjb_eap_logo.png" alt="HTML5"/></div>
</footer>

/**
 * Module for the Event model
 */
define([
    'configuration',
    'backbone'
], function (config) {
    /**
     * The Event model class definition
     * Used for CRUD operations against individual events
     */
    var Event = Backbone.Model.extend({
        urlRoot: config.baseUrl + 'rest/events' // the URL for performing CRUD operations
    });
    // export the Event class
    return Event;
});

/**
 * Module for the Events collection
 */
define([
    // The collection element type and configuration are dependencies
    'app/models/event',
    'configuration'
], function (Event, config) {
    /**
     *  Here we define the Bookings collection
     *  We will use it for CRUD operations on Bookings
     */
    var Events = Backbone.Collection.extend({
        url: config.baseUrl + "rest/events", // the URL for performing CRUD operations
        model: Event,
        id:"id", // the 'id' property of the model is the identifier
        comparator:function (model) {
            return model.get('category').id;
        }
    });
    return Events;
});

define([
    'utilities',
    'bootstrap',
    'text!../../../../templates/desktop/events.html'
], function (
    utilities,
    bootstrap,
    eventsTemplate) {

    var EventsView = Backbone.View.extend({
        events:{
            "click a":"update"
        },
        render:function () {
            var categories = _.uniq(
                _.map(this.model.models, function(model){
                    return model.get('category')
                }), false, function(item){
                    return item.id
                });
            utilities.applyTemplate($(this.el), eventsTemplate, {categories:categories, model:this.model})
            $(this.el).find('.item:first').addClass('active');
            $(".carousel").carousel();
            $("a[rel='popover']").popover({trigger:'hover',container:'body'});
            return this;
        },
        update:function () {
            $("a[rel='popover']").popover('hide')
        }
    });

    return  EventsView;
});

<div class="row">
    <div class="col-md-3 col-md-offset-1">
        <div class="panel" id="itemMenu">

            <%
            _.each(categories, function (category) {
            %>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a class="panel-toggle"
                       data-target="#category-<%=category.id%>-collapsible" data-toggle="collapse"
                       data-parent="#itemMenu"><%= category.description %></a>
                </div>
                <div id="category-<%=category.id%>-collapsible" class="panel-collapse collapse">
                    <div id="category-<%- category.id%>" class="panel-body">

                        <%
                        _.each(model.models, function (model) {
                        if (model.get('category').id == category.id) {
                        %>
                        <p><a href="#events/<%- model.attributes.id%>" rel="popover"
                              data-content="<%- model.attributes.description%>"
                              data-original-title="<%- model.attributes.name%>"><%=model.attributes.name%></a></p>
                        <% }
                        });
                        %>
                    </div>
                </div>
            </div>
            <% }); %>
        </div>
    </div>

    <div id='itemSummary' class="col-md-8 hidden-sm hidden-xs">
        <div class="carousel-container">
            <div id="eventCarousel" class="carousel slide">
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <%_.each(model.models, function(model) {
                        if( model.get('mediaItem')) {
                    %>
                    <div class="item">
                        <img src='rest/media/<%=model.attributes.mediaItem.id%>'/>

                        <div class="carousel-caption">
                            <div class="row">
                                <div class="col-md-9">
                                    <h4><%=model.attributes.name%></h4>
                                    <p><%=model.attributes.description%></p>
                                </div>
                                <div class="col-md-2">
                                    <a class="btn btn-danger action" href="#events/<%=model.id%>">Book tickets</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <%
                        }
                     });
                    %>
                </div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#eventCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="carousel-control right" href="#eventCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
    </div>
</div>

/**
 * A module for the router of the desktop application
 */
define("router", [
    ...
    'utilities',
    'app/collections/events',
    'app/views/desktop/home',
    'app/views/desktop/events',
    ...
    'text!../templates/desktop/main.html'
],function ($,
            ...
            utilities,
            Events,
            HomeView,
            EventsView,
            ...
            MainTemplate) {

    var Router = Backbone.Router.extend({
        ...
        routes : {
            ...,
            "events":"events"
        },
        ...,
        events:function () {
            var events = new Events();
            var eventsView = new EventsView({model:events, el:$("#content")});
            events.on("reset",
                function () {
                    utilities.viewManager.showView(eventsView);
                }).fetch({
                    reset : true,
                    error : function() {
                        utilities.displayAlert("Failed to retrieve events from the TicketMonster server.");
                    }
                });
        }
    });

/**
 * Shortcut alias definitions - will come in handy when declaring dependencies
 * Also, they allow you to keep the code free of any knowledge about library
 * locations and versions
 */
require.config({
    baseUrl:"resources/js",
    paths: {
        jquery:'libs/jquery-2.0.3',
        jquerymobile:'libs/jquery.mobile-1.4.2',
        text:'libs/text',
        underscore:'libs/underscore',
        backbone: 'libs/backbone',
        utilities: 'app/utilities',
        router:'app/router/mobile/router'
    },
    // We shim Backbone.js and Underscore.js since they don't declare AMD modules
    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },

        'underscore': {
            exports: '_'
        }
    }
});

define("configuration", function() {
    if (window.TicketMonster != undefined && TicketMonster.config != undefined) {
        return {
            baseUrl: TicketMonster.config.baseRESTUrl
        };
    } else {
        return {
            baseUrl: ""
        };
    }
});

define("initializer", [
    'jquery',
    'utilities',
    'text!../templates/mobile/main.html'
], function ($,
             utilities,
             MainTemplate) {
    // Configure jQuery to append timestamps to requests, to bypass browser caches
    // Important for MSIE
    $.ajaxSetup({cache:false});
    $('head').append('<link rel="stylesheet" href="resources/css/jquery.mobile-1.4.2.css"/>');
    $('head').append('<link rel="stylesheet" href="resources/css/m.screen.css"/>');
    // Bind to mobileinit before loading jQueryMobile
    $(document).bind("mobileinit", function () {
        // Prior to creating and starting the router, we disable jQuery Mobile's own routing mechanism
        $.mobile.hashListeningEnabled = false;
        $.mobile.linkBindingEnabled = false;
        $.mobile.pushStateEnabled = false;

        // Fix jQueryMobile header and footer positioning issues for iOS.
        // See: https://github.com/jquery/jquery-mobile/issues/4113 and
        // https://github.com/jquery/jquery-mobile/issues/5532
        $(document).on('blur', 'input, textarea, select', function() {
            setTimeout(function() {
            window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
            }, 0);
        });

        utilities.applyTemplate($('body'), MainTemplate);
    });
    // Then (load jQueryMobile and) start the router to finally start the app
    require(['router']);
});

// Now we declare all the dependencies
// This loads and runs the 'initializer' module.
require(['initializer']);

<!--
    The main layout of the page - contains the menu and the 'content' &lt;div/&gt; in which all the
    views will render the content.
-->
<div id="container" data-role="page" data-ajax="false"></div>

/**
 * A module for the router of the mobile application.
 *
 */
define("router",[
    'jquery',
    'jquerymobile',
    'underscore',
    'utilities'
],function ($,
            jqm,
            _,
            utilities) {

    /**
     * The Router class contains all the routes within the application - i.e. URLs and the actions
     * that will be taken as a result.
     *
     * @type {Router}
     */
    var Router = Backbone.Router.extend({
        initialize: function() {
            //Begin dispatching routes
            Backbone.history.start();
        },
        execute : function(callback, args) {
            $.mobile.loading("show");
            window.setTimeout(function() {
                if (callback) {
                    callback.apply(this, args);
                }
                $.mobile.loading("hide");
            }, 300);
        }
    });

    // Create a router instance
    var router = new Router();

    return router;
});

<div data-role="header">
    <h3>Ticket Monster</h3>
</div>
<div class="ui-content">
    <img src="resources/img/rhjb_eap_logo.png" />
    <h4>Find events</h4>
    <ul data-role="listview">
        <li>
            <a href="#events">By Category</a>
        </li>
        <li>
            <a href="#venues">By Location</a>
        </li>
    </ul>
</div>

/**
 * A module for the router of the mobile application.
 *
 */
define("router",[
    ...
    'text!../templates/mobile/home-view.html'
],function (
		...
        HomeViewTemplate) {

	...
    var Router = Backbone.Router.extend({
        ...
        routes:{
            "":"home"
        },
        ...
        home:function () {
            utilities.applyTemplate($("#container"), HomeViewTemplate);
            $("#container").enhanceWithin();
    	}
    });
    ...
});

define([
    'utilities',
    'text!../../../../templates/mobile/events.html'
], function (
    utilities,
    eventsView) {

    var EventsView = Backbone.View.extend({
        render:function () {
            var categories = _.uniq(
                _.map(this.model.models, function(model){
                    return model.get('category');
                }), false, function(item){
                    return item.id;
                });
            utilities.applyTemplate($(this.el), eventsView,  {categories:categories, model:this.model});
            $(this.el).enhanceWithin();
            return this;
        }
    });

    return EventsView;
});

<div data-role="header">
    <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
    <h3>Categories</h3>
</div>
<div class="ui-content">
    <div id="itemMenu" data-role="collapsible-set" data-inset="false">
        <%
        _.each(categories, function (category) {
        %>
        <div data-role="collapsible">
            <h2><%= category.description %></h2>
            <ul id="categoryMenu" data-role="listview" data-inset="true">
            <%
            _.each(model.models, function (model) {
                if (model.get('category').id == category.id) {
                %>
                <li>
                    <a href="#events/<%=model.attributes.id%>"><%=model.attributes.name%></a>
                </li>
                <% }
            });
            %>
            </ul>
        </div>
        <% }); %>
    </div>
</div>

/**
 * A module for the router of the desktop application.
 *
 */
define("router",[
    ...
	'app/collections/events',
	...
	'app/views/mobile/events'
	...
],function (
	...,
	Events,
	...,
	EventsView,
	...) {

	...
    var Router = Backbone.Router.extend({
        ...
        routes:{
        	...
            "events":"events"
            ...
        },
        ...
        events:function () {
            var events = new Events;
            var eventsView = new EventsView({model:events, el:$("#container")});
            events.on("reset", function() {
                utilities.viewManager.showView(eventsView);
            }).fetch({
                reset : true,
                error : function() {
                    utilities.displayAlert("Failed to retrieve events from the TicketMonster server.");
                }
            });
        }
        ...
    });
    ...
});

define([
    'utilities',
    'require',
    'configuration',
    'text!../../../../templates/mobile/event-detail.html',
    'text!../../../../templates/mobile/event-venue-description.html'
], function (
    utilities,
    require,
    config,
    eventDetail,
    eventVenueDescription) {

    var EventDetailView = Backbone.View.extend({
        events:{
            "click a[id='bookButton']":"beginBooking",
            "change select[id='showSelector']":"refreshShows",
            "change select[id='performanceTimes']":"performanceSelected",
            "change select[id='dayPicker']":'refreshTimes'
        },
        render:function () {
            $(this.el).empty()
            utilities.applyTemplate($(this.el), eventDetail, _.extend({}, this.model.attributes, config));
            $(this.el).enhanceWithin();
            $("#bookButton").addClass("ui-disabled");
            var self = this;
            $.getJSON(config.baseUrl + "rest/shows?event=" + this.model.get('id'), function (shows) {
                self.shows = shows;
                $("#showSelector").empty().append("<option data-placeholder='true'>Choose a venue ...</option>");
                $.each(shows, function (i, show) {
                    $("#showSelector").append("<option value='" + show.id + "'>" + show.venue.address.city + " : " + show.venue.name + "</option>");
                });
                $("#showSelector").selectmenu('refresh', true)
                $("#dayPicker").selectmenu('disable')
                $("#dayPicker").empty().append("<option data-placeholder='true'>Choose a show date ...</option>")
                $("#performanceTimes").selectmenu('disable')
                $("#performanceTimes").empty().append("<option data-placeholder='true'>Choose a show time ...</option>")
            });
            $("#dayPicker").empty();
            $("#dayPicker").selectmenu('disable');
            $("#performanceTimes").empty();
            $("#performanceTimes").selectmenu('disable');
            $(this.el).enhanceWithin();
            return this;
        },
        performanceSelected:function () {
            if ($("#performanceTimes").val() != 'Choose a show time ...') {
                $("#bookButton").removeClass("ui-disabled")
            } else {
                $("#bookButton").addClass("ui-disabled")
            }
        },
        beginBooking:function () {
            require('router').navigate('book/' + $("#showSelector option:selected").val() + '/' + $("#performanceTimes").val(), true)
        },
        refreshShows:function (event) {

            var selectedShowId = event.currentTarget.value;

            if (selectedShowId != 'Choose a venue ...') {
                var selectedShow = _.find(this.shows, function (show) {
                    return show.id == selectedShowId
                });
                this.selectedShow = selectedShow;
                var times = _.uniq(_.sortBy(_.map(selectedShow.performances, function (performance) {
                    return (new Date(performance.date).withoutTimeOfDay()).getTime()
                }), function (item) {
                    return item
                }));
                utilities.applyTemplate($("#eventVenueDescription"), eventVenueDescription, _.extend({},{venue:selectedShow.venue},config));
                $("#detailsCollapsible").show()
                $("#dayPicker").removeAttr('disabled')
                $("#performanceTimes").removeAttr('disabled')
                $("#dayPicker").empty().append("<option data-placeholder='true'>Choose a show date ...</option>")
                _.each(times, function (time) {
                    var date = new Date(time)
                    $("#dayPicker").append("<option value='" + date.toYMD() + "'>" + date.toPrettyStringWithoutTime() + "</option>")
                });
                $("#dayPicker").selectmenu('refresh')
                $("#dayPicker").selectmenu('enable')
                this.refreshTimes()
            } else {
                $("#detailsCollapsible").hide()
                $("#eventVenueDescription").empty()
                $("#dayPicker").empty()
                $("#dayPicker").selectmenu('disable')
                $("#performanceTimes").empty()
                $("#performanceTimes").selectmenu('disable')
            }


        },
        refreshTimes:function () {
            var selectedDate = $("#dayPicker").val();
            $("#performanceTimes").empty().append("<option data-placeholder='true'>Choose a show time ...</option>")
            if (selectedDate) {
                $.each(this.selectedShow.performances, function (i, performance) {
                    var performanceDate = new Date(performance.date);
                    if (_.isEqual(performanceDate.toYMD(), selectedDate)) {
                        $("#performanceTimes").append("<option value='" + performance.id + "'>" + performanceDate.getHours().toZeroPaddedString(2) + ":" + performanceDate.getMinutes().toZeroPaddedString(2) + "</option>")
                    }
                })
                $("#performanceTimes").selectmenu('enable')
            }
            $("#performanceTimes").selectmenu('refresh')
            this.performanceSelected()
        }

    });

    return EventDetailView;
});

<div data-role="header" data-position="fixed">
    <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
    <h3>Book tickets</h3>
</div>
<div class="ui-content">
    <h3><%=name%></h3>
    <img width='100px' src='<%=baseUrl%>rest/media/<%=mediaItem.id%>'/>
    <p><%=description%></p>
    <div class="ui-field-contain">
        <label for="showSelector"><strong>Where</strong></label>
        <select id='showSelector' data-mini='true'/>
    </div>

    <div data-role="collapsible" data-content-theme="c" style="display: none;"
         id="detailsCollapsible">
        <h3>Venue details</h3>

        <div id="eventVenueDescription">
        </div>
    </div>

    <div data-role='fieldcontain'>
        <fieldset data-role='controlgroup'>
            <legend><strong>When</strong></legend>
            <label for="dayPicker">When:</label>
            <select id='dayPicker' data-mini='true'/>

            <label for="performanceTimes">When:</label>
            <select id="performanceTimes" data-mini='true'/>

        </fieldset>
    </div>

</div>
<div data-role="footer" data-position="fixed">
    <div class="ui-grid-b">
        <div class="ui-block-a"></div>
        <div class="ui-block-b"></div>
        <div class="ui-block-c">
            <a id='bookButton' class="ui-btn ui-btn-b ui-icon-check ui-btn-icon-left block-btn">Book</a>
        </div>
    </div>
</div>

<img width="100" src="<%=baseUrl%>rest/media/<%=venue.mediaItem.id%>"/></p>
<%= venue.description %>
<address>
    <p><strong>Address:</strong></p>
    <p><%= venue.address.street %></p>
    <p><%= venue.address.city %>, <%= venue.address.country %></p>
</address>

/**
 * A module for the router of the desktop application.
 *
 */
define("router",[
    ...
	'app/models/event',
	...
	'app/views/mobile/event-detail'
	...
],function (
	...,
	Event,
	...,
	EventDetailView,
	...) {

	...
    var Router = Backbone.Router.extend({
        ...
        routes:{
        	...
            "events/:id":"eventDetail",
            ...
        },
        ...
        eventDetail:function (id) {
            var model = new Event({id:id});
            var eventDetailView = new EventDetailView({model:model, el:$("#container")});
            model.on("change",
                function () {
                    utilities.viewManager.showView(eventDetailView);
                    $("body").pagecontainer("change", "#container", {transition:'slide', changeHash:false});
                }).fetch({
                    error : function() {
                        utilities.displayAlert("Failed to retrieve the event from the TicketMonster server.");
                    }
                });
        }
        ...
    });
    ...
});

define([
    'utilities',
    'configuration',
    'require',
    'text!../../../../templates/mobile/booking-details.html',
    'text!../../../../templates/mobile/create-booking.html',
    'text!../../../../templates/mobile/confirm-booking.html',
    'text!../../../../templates/mobile/ticket-entries.html',
    'text!../../../../templates/mobile/ticket-summary-view.html'
], function (
    utilities,
    config,
    require,
    bookingDetailsTemplate,
    createBookingTemplate,
    confirmBookingTemplate,
    ticketEntriesTemplate,
    ticketSummaryViewTemplate) {

    var TicketCategoriesView = Backbone.View.extend({
        id:'categoriesView',
        events:{
            "change input":"onChange"
        },
        render:function () {
            var views = {};

            if (this.model != null) {
                var ticketPrices = _.map(this.model, function (item) {
                    return item.ticketPrice;
                });
                utilities.applyTemplate($(this.el), ticketEntriesTemplate, {ticketPrices:ticketPrices});
            } else {
                $(this.el).empty();
            }
            return this;
        },
        onChange:function (event) {
            var value = event.currentTarget.value;
            var ticketPriceId = $(event.currentTarget).data("tm-id");
            var modifiedModelEntry = _.find(this.model, function(item) { return item.ticketPrice.id == ticketPriceId});
            if ($.isNumeric(value) && value > 0) {
                modifiedModelEntry.quantity = parseInt(value);
            }
            else {
                delete modifiedModelEntry.quantity;
            }
        }
    });

     var TicketSummaryView = Backbone.View.extend({
        render:function () {
            utilities.applyTemplate($(this.el), ticketSummaryViewTemplate, this.model.bookingRequest)
        }
    });

    var CreateBookingView = Backbone.View.extend({

        currentView: "CreateBooking",
        intervalDuration : 100,
        formValues : [],
        events:{
            "click a[id='confirmBooking']":"checkout",
            "change select":"refreshPrices",
            "change input[type='number']":"updateForm",
            "change input[name='email']":"updateForm",
            "click a[id='saveBooking']":"saveBooking",
            "click a[id='goBack']":"back",
            "click a[data-action='delete']":"deleteBooking"
        },
        render: function() {
            if (this.currentView === "CreateBooking") {
                this.renderCreateBooking();
            } else if(this.currentView === "ConfirmBooking") {
                this.renderConfirmBooking();
            }
            return this;
        },
        renderCreateBooking:function () {

            var self = this;

            $.getJSON(config.baseUrl + "rest/shows/" + this.model.showId, function (selectedShow) {
                self.model.performance = _.find(selectedShow.performances, function (item) {
                    return item.id == self.model.performanceId;
                });
                self.model.email = self.model.email || "";
                var id = function (item) {return item.id;};
                // prepare a list of sections to populate the dropdown
                var sections = _.uniq(_.sortBy(_.pluck(selectedShow.ticketPrices, 'section'), id), true, id);

                utilities.applyTemplate($(self.el), createBookingTemplate, { show:selectedShow,
                    performance:self.model.performance,
                    sections:sections,
                    email:self.model.email});
                $(self.el).enhanceWithin();
                self.ticketCategoriesView = new TicketCategoriesView({model:{}, el:$("#ticketCategoriesViewPlaceholder") });
                self.model.show = selectedShow;
                self.ticketCategoriesView.render();
                $('a[id="confirmBooking"]').addClass('ui-disabled');
                $("#sectionSelector").change();
                self.watchForm();
            });

        },
        refreshPrices:function (event) {
            if (event.currentTarget.value != "Choose a section") {
                var ticketPrices = _.filter(this.model.show.ticketPrices, function (item) {
                    return item.section.id == event.currentTarget.value;
                });
                var ticketPriceInputs = new Array();
                _.each(ticketPrices, function (ticketPrice) {
                    var model = {};
                    model.ticketPrice = ticketPrice;
                    ticketPriceInputs.push(model);
                });
                $("#ticketCategoriesViewPlaceholder").show();
                this.ticketCategoriesView.model = ticketPriceInputs;
                this.ticketCategoriesView.render();
                $(this.el).enhanceWithin();
            } else {
                $("#ticketCategoriesViewPlaceholder").hide();
                this.ticketCategoriesView.model = new Array();
                this.updateForm();
            }
        },
        checkout:function () {
            var savedTicketRequests = this.model.bookingRequest.tickets = this.model.bookingRequest.tickets || [];
            _.each(this.ticketCategoriesView.model, function(newTicketRequest){
                var matchingRequest = _.find(savedTicketRequests, function(ticketRequest) {
                    return ticketRequest.ticketPrice.id == newTicketRequest.ticketPrice.id;
                });
                if(newTicketRequest.quantity) {
                    if(matchingRequest) {
                        matchingRequest.quantity += newTicketRequest.quantity;
                    } else {
                        savedTicketRequests.push(newTicketRequest);
                    }
                }
            });
            this.model.bookingRequest.totals = this.computeTotals(this.model.bookingRequest.tickets);
            this.currentView = "ConfirmBooking";
            this.render();
        },
        updateForm:function () {
            var valid = true;
            this.model.email = $("input[type='email']").val();
            $("input[type='number']").each(function(idx,element) {
                var quantity = $(this).val();
                if(quantity.length > 0 &&
                    (!$.isNumeric(quantity)  // is a non-number, other than empty string
                        || quantity <= 0 // is negative
                        || parseFloat(quantity) != parseInt(quantity))) {
                    $("#error-" + element.id).empty().append("Should be a positive number.");
                    valid = false;
                } else {
                    $("#error-" + element.id).empty();
                }
            });
            try {
                var validElements = document.querySelectorAll(":valid");
                var $email = $("#email");
                var emailElem = $email.get(0);
                var validEmail = false;
                for (var ctr=0; ctr < validElements.length; ctr++) {
                    if (emailElem === validElements[ctr]) {
                        validEmail = true;
                    }
                }
                if(validEmail) {
                    this.model.email = $email.val();
                    $("#error-email").empty();
                } else {
                    $("#error-email").empty().append("Please enter a valid e-mail address");
                    delete this.model.email;
                    valid = false;
                }
            }
            catch(e) {
                // For browsers like IE9 that do fail on querySelectorAll for CSS pseudo selectors,
                // we use the regex defined in the HTML5 spec.
                var emailRegex = new RegExp("[a-zA-Z0-9.!#$%&'*+/=?^_`{]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*");
                var emailValue = $("#email").val();
                if(emailRegex.test(emailValue)) {
                    this.model.email = emailValue;
                    $("#error-email").empty();
                } else {
                    $("#error-email").empty().append("Please enter a valid e-mail address");
                    delete this.model.email;
                    valid = false;
                }
            }
            var totals = this.computeTotals(this.ticketCategoriesView.model);
            if (totals.tickets > 0 && valid) {
                $('a[id="confirmBooking"]').removeClass('ui-disabled');
            } else {
                $('a[id="confirmBooking"]').addClass('ui-disabled');
            }
        },
        computeTotals: function(ticketRequestCollection) {
            var totals = _.reduce(ticketRequestCollection, function (partial, model) {
                if (model.quantity != undefined) {
                    partial.tickets += model.quantity;
                    partial.price += model.quantity * model.ticketPrice.price;
                    return partial;
                } else {
                    return partial;
                }
            }, {tickets:0, price:0.0});
            return totals;
        },
        renderConfirmBooking:function () {
            utilities.applyTemplate($(this.el), confirmBookingTemplate, this.model);
            this.ticketSummaryView = new TicketSummaryView({model:this.model, el:$("#ticketSummaryView")});
            this.ticketSummaryView.render();
            $(this.el).enhanceWithin();
            if (this.model.bookingRequest.totals.tickets > 0) {
                $('a[id="saveBooking"]').removeClass('ui-disabled');
            } else {
                $('a[id="saveBooking"]').addClass('ui-disabled');
            }
            return this;
        },
        back:function () {
            this.currentView = "CreateBooking";
            this.render();
        },
        saveBooking:function (event) {
            var bookingRequest = {ticketRequests:[]};
            var self = this;
            _.each(this.model.bookingRequest.tickets, function (model) {
                if (model.quantity != undefined) {
                    bookingRequest.ticketRequests.push({ticketPrice:model.ticketPrice.id, quantity:model.quantity})
                }
            });

            bookingRequest.email = this.model.email;
            bookingRequest.performance = this.model.performanceId;
            $.ajax({url:(config.baseUrl + "rest/bookings"),
                data:JSON.stringify(bookingRequest),
                type:"POST",
                dataType:"json",
                contentType:"application/json",
                success:function (booking) {
                    utilities.applyTemplate($(self.el), bookingDetailsTemplate, booking);
                    $(self.el).enhanceWithin();
                }}).error(function (error) {
                    try {
                        var response = JSON.parse(error.responseText);
                        var displayMessage = "";
                        if(response && response.errors) {
                            var errors = response.errors;
                            for(var idx = 0; idx < errors.length; idx++) {
                                displayMessage += errors[idx] + "\n";
                            }
                            alert(displayMessage);
                        } else {
                            alert("Failed to perform the bookng.");
                        }
                    } catch (e) {
                        alert("Failed to perform the bookng.");
                    }
                });
        },
        deleteBooking: function(event) {
            var deletedIdx = $(event.currentTarget).data("ticketpriceid");
            this.model.bookingRequest.tickets = _.reject(this.model.bookingRequest.tickets, function(ticketRequest) {
                return ticketRequest.ticketPrice.id == deletedIdx;
            });
            this.model.bookingRequest.totals = this.computeTotals(this.model.bookingRequest.tickets);
            this.renderConfirmBooking();
            return false;
        },
        watchForm: function() {
            if($("#sectionSelect").length) {
                var self = this;
                $("input").each( function(index,element) {
                    if(element.value !== self.formValues[element.id]) {
                        self.formValues[element.id] = element.value;
                        $("input[id='"+element.id+"']").change();
                    }
                });
                this.timerObject = setTimeout(function() {
                    self.watchForm();
                }, this.intervalDuration);
            } else {
                this.onClose();
            }
        },
        onClose: function() {
            if(this.timerObject) {
                clearTimeout(this.timerObject);
                delete this.timerObject;
            }
        }
    });
    return CreateBookingView;
});

<div data-role="header" data-position="fixed">
    <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
    <h1>Book tickets</h1>
</div>
<div class="ui-content">
    <p>
       <h3><%=show.event.name%></h3>
    </p>
    <p>
      <%=show.venue.name%>
    <p>

    <p>
      <small><%=new Date(performance.date).toPrettyString()%></small>
    </p>
    <div id="sectionSelectorPlaceholder">
        <div class="ui-field-contain">
            <label for="sectionSelect">Section</label>
            <select id="sectionSelect">
                <option value="-1" selected>Choose a section</option>
                <% _.each(sections, function(section) { %>
                <option value="<%=section.id%>"><%=section.name%> - <%=section.description%></option>
                <% }) %>
            </select>
        </div>

    </div>
    <div id="ticketCategoriesViewPlaceholder" style="display:none;"></div>

    <div class="fieldcontain">
        <label>Contact email</label>
        <input type='email' id='email' name='email' required placeholder="Email" value="<%=email%>" />
        <span id="error-email" class="error" />
    </div>
</div>

<div data-role="footer" data-position="fixed">
    <div class="ui-grid-a">
        <div class="ui-block-a"><a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left block-btn">Cancel</a></div>
        <div class="ui-block-b"><a id="confirmBooking" class="ui-btn ui-btn-b ui-icon-check ui-btn-icon-left block-btn" disabled>Checkout</a></div>
    </div>
</div>

<% if (ticketPrices.length > 0) { %>
    <form name="ticketCategories" id="ticketCategories">
    <h4>Select tickets by category</h4>
    <% _.each(ticketPrices, function(ticketPrice) { %>
      <div id="ticket-category-input-<%=ticketPrice.id%>"/>

      <fieldset class="ui-field-contain">
         <label for="ticket-<%=ticketPrice.id%>"><%=ticketPrice.ticketCategory.description%>($<%=ticketPrice.price%>)</label>
         <input id="ticket-<%=ticketPrice.id%>" data-tm-id="<%=ticketPrice.id%>" type="number" min="0" placeholder="Enter value"
               name="tickets"/>
         <span id="error-ticket-<%=ticketPrice.id%>" class="error" />
      </fieldset>
   <% }) %>
   </form>
<% } %>

<div data-role="header" data-position="fixed">
    <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
    <h1>Confirm order</h1>
</div>
<div class="ui-content">
    <h3><%=show.event.name%></h3>
    <p><%=show.venue.name%></p>
    <p><small><%=new Date(performance.date).toPrettyString()%></small></p>
    <p><strong>Buyer:</strong>  <emphasis><%=email%></emphasis></p>
    <div id="ticketSummaryView"/>

</div>

<div data-role="footer" data-position="fixed">
    <div class="ui-grid-b">
        <div class="ui-block-a"><a id="cancel" href="#" class="ui-btn ui-icon-delete ui-btn-icon-left block-btn">Cancel</a></div>
        <div class="ui-block-b"><a id="goBack" class="ui-btn ui-icon-back ui-btn-icon-left block-btn">Back</a></div>
        <div class="ui-block-c"><a id="saveBooking" class="ui-btn ui-btn-b ui-icon-check ui-btn-icon-left block-btn">Buy!</a></div>
    </div>
</div>

<ul data-role="listview" data-split-icon="delete" data-split-theme="c" data-inset="true">
    <% _.each(tickets, function(model) { %>
    <li>
        <a class="readonly-listview">
            <p><strong>Section</strong> <%= model.ticketPrice.section.name %></p>
            <p><strong>Category</strong> <%= model.ticketPrice.ticketCategory.description %></p>
            <p><strong>Price</strong> <%= model.ticketPrice.price %></p>
            <p><strong>Quantity</strong> <%= model.quantity %></p>
        </a>
        <a href="#" data-action="delete" data-ticketpriceid="<%= model.ticketPrice.id %>"></a>
    </li>
    <% }); %>
</ul>
<div>
    <h4>Totals</h4>
    <p><strong>Total tickets: </strong><%= totals.tickets %></p>
    <p><strong>Total price: $ </strong><%= totals.price %></p>
</div>

<div data-role="header" data-position="fixed">
    <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
    <h1>Booking complete</h1>
</div>
<div class="ui-content">
    <table id="confirm_tbl">
        <thead>
        <tr>
            <td colspan="5" align="center"><strong>Booking <%=id%></strong></td>
        <tr>
        <tr>
            <th>Ticket #</th>
            <th>Category</th>
            <th>Section</th>
            <th>Row</th>
            <th>Seat</th>
        </tr>
        </thead>
        <tbody>
        <% $.each(_.sortBy(tickets, function(ticket) {return ticket.id}), function (i, ticket) { %>
        <tr>
            <td><%= ticket.id %></td>
            <td><%=ticket.ticketCategory.description%></td>
            <td><%=ticket.seat.section.name%></td>
            <td><%=ticket.seat.rowNumber%></td>
            <td><%=ticket.seat.number%></td>
        </tr>
        <% }) %>
        </tbody>
    </table></div>
<div data-role="footer" data-position="fixed">

    <div class="ui-block-b">
        <a id="back" href="#" class="ui-btn ui-icon-back ui-btn-icon-left block-btn">Back</a>
    </div>

</div>

/**
 * A module for the router of the desktop application
 */
define("router", [
	...
    'app/views/mobile/create-booking',
    ...
],function (
			...
            CreateBookingView
            ...) {

    var Router = Backbone.Router.extend({
        ...
        routes:{
            ...
            "book/:showId/:performanceId":"bookTickets",
            ...
        },
        ...
        bookTickets:function (showId, performanceId) {
            var createBookingView = new CreateBookingView({model:{showId:showId, performanceId:performanceId, bookingRequest:{tickets:[]}}, el:$("#container")});
            utilities.viewManager.showView(createBookingView);
        },
        ...
        });
    ...
});