define([
    'Global',
    'BookedAppointments',
    'ApptRequestDetails',
    'Text!../html/templates/booking-future-appt-detail.html',
    'Text!../html/templates/request-status.html'
],
    function (Global, BookedAppointments, ApptRequestDetails, detailsTemplate, requestStatusTemplate) {
        'use strict';
        var thisView;

        return Backbone.View.extend({
            initialize: function () {
                this.template = _.template(detailsTemplate);
                this.requestStatusTemplate = _.template(requestStatusTemplate);
                thisView = this;
            },
            render: function () {
                var $document = $(document),
					id = $document.jqmData('requestHref-for-detail-viewing');

                this.details = BookedAppointments.instance().findById(id).toJSON();

                this.$el
                    .empty()
                    .append(thisView.requestStatusTemplate({inUse: false, lockedByUser: false, title: "Cancel Appointment", className: "", enable: true}))
					.append(thisView.template(this.details));

				getMainContent()
					.empty()
					.append(thisView.$el)
					.trigger('create');

				$document.jqmData('requestHref-for-detail-viewing', '');

                var $processRequest = $('#process-request');

                $processRequest[0].disabled = false;
	            $processRequest.focus();

				return thisView;
            },
			remove: function () {
				$(document).jqmData("noRedraw", false);

				Backbone.View.prototype.remove.call(this);
			},
            events: {
                "click #process-request": "showCancelDialog"
            },
            showCancelDialog: function(){
				$(document).jqmData("noRedraw", true);
                ApptRequestDetails.instance().fillData(this.details);
                Global.getUtilities().eventAggregator.trigger("cancel-appointment");
            }
        });
    }
);
