define([
        'Global',
        'Text!../html/templates/about-dialog.html'
    ],
    function (Global, template) {
        'use strict';
        return Backbone.View.extend({
            tagName: "div",
            id: "about-dialog",
            attributes: {
                "data-role": "dialog",
                "data-corners": "false",
                "data-overlay-theme": "d",
                "data-close-btn": "none"
            },

            events: {
                "click #done-btn": "closeDialog",
                "keydown #done-btn": "handleDoneBtnKeyDown",
                "keydown .ui-header .ui-btn": "handleCloseBtnKeyDown"
            },

            initialize: function () {
                this.template = _.template(template);
            },

            render: function () {
                var $container = $('body'),
                    that = this;

                this.$el
                    .empty()
                    .append(this.template);

                $container
                    .append(this.$el);

                this.calculateHeight();

                $(window).resize();

                this.$el.on('tap', 'a[title="Close"]', function(e) {
                    e.preventDefault();
                    that.closeDialog();
                });
                this.$el.on('keydown', 'a[title="Close"]', function(e) {
                    if (e.which === 13 || 32) {
                        e.preventDefault();
                        that.closeDialog();
                    } else if (e.shiftKey && e.which === 9) {
                        e.preventDefault();
                        $('#done-btn').focus();
                    }
                });
                this.$el.on('pageshow.about', function () {
                    $('#user-guide').focus();
                });

                return this;
            },

            closeDialog: function () {
	            if (!this.calledCloseDialog) {
	            	Global.getUtilities().eventAggregator.trigger('veteran-requests');		            
		            $("#left-navigation-panel").addClass('ui-panel-open').panel('toggle');
		            this.calledCloseDialog = true;
		            this.resetFocus();
	            }
            },
            
	        resetFocus: function () {
		        $('#main').animationComplete(function () {
			        $('#portal-about-btn').focus();
		        });
	        },

            handleCloseBtnKeyDown: function (e) {
                if (e.which === 13 || e.which === 32) {
	                e.preventDefault();
                    $(e.currentTarget).trigger('tap');
                } else if (e.shiftKey && e.which === 9) {
                    e.preventDefault();
                    $('#done-btn').focus();
                }
            },

            handleDoneBtnKeyDown: function (e) {
                if (e.which === 9 && !e.shiftKey) {
                    e.preventDefault();
                    $('.ui-dialog .ui-header a').focus();
                }
            },

            calculateHeight: function(){
                $(window).resize(function(){
                    var windowHeight = $(window).height(),
                        $aboutWrapper = $('.about-wrapper');

                    $aboutWrapper.css({
                        height: (windowHeight - 400) + "px"
                    })
                });

                $(window).resize();

            }
        });
    }
);
