define([
    'Global',
    'backbone',
    'underscore',
    'jquery',
    'jquery.mobile',
    'MainView',
    'ExitNavigationPopupView',
    'PatientContext',
    'Text!../html/templates/panel-navigation.html'
],
    function (Global, Backbone, _, $, jqm, MainView, ExitNavigationPopupView, PatientContext, navigationItemTemplate) {
        'use strict';

        var singleInstance,
            LeftPanelNavigationView = Backbone.View.extend({
            attributes:{
                "data-iconpos":"left",
                "data-icon": "arrow-r"
            },
            initialize : function (options) {
                this.options = options || {};
                _.bindAll(this);
                _.extend(this, options);
                this.template = _.template(navigationItemTemplate);
                this.exitPopup = new ExitNavigationPopupView();
            },
            render: function () {
                var that = this;
                this.ui.$leftNavigationPanel = $("#left-navigation-panel");
                this.$el.append(this.template());
                this.ui.$leftNavigationPanel.empty().append(this.$el);
                setTimeout(function(){
                    that.setHeightStyle();
                }, 1000 );
                $(window).on('resize.nav', function(){
                    that.setHeightStyle();
                }).trigger('resize.nav');

                return this;
            },
            remove: function () {
                Backbone.View.prototype.remove.call(this);
            },
            ui: {
                "topList": "#portal-nav-toplist",
                "bottomList": "#portal-nav-bottomlist"
            },
            events : {
	            "focus li": "handleNavItemFocus",
	            "focusout li": "handleNavItemFocusOut",
                "tap li": "closePanel",
	            "keydown #portal-about-btn": "handleAboutKeydown",
	            "keydown #portal-exit-btn": "handleExitKeydown",
                "click #portal-exit-btn": "exit",
                "click #portal-about-btn": "about",
                "click #patient-data-refresh": "refreshPatientDataInContext",
                "keydown li": function(e) { if (e.which === 13 /* Enter */) this.closePanel(); }
            },
            handleNavItemFocus: function (e) {
	            $(e.currentTarget).addClass('ui-focus');
            },
	        handleAboutKeydown: function (e) {
		        if (e.which === 9 && e.shiftKey) {
			        e.preventDefault();

			        $('#left-navigation').focus();
		        }
	        },
            handleExitKeydown: function (e) {
				if (e.which === 9 && !e.shiftKey) {
					e.preventDefault();

					$('#left-navigation').focus();
				}
            },
	        handleNavItemFocusOut: function (e) {
		        $(e.currentTarget).removeClass('ui-focus');
	        },
            setHeightStyle: function() {
                var $topList = this.$el.find(this.ui.topList),
                    styleAttr = this.calculateStyle();

                this.ui.$leftNavigationPanel.attr('style', styleAttr);
                this.$el.attr('style', styleAttr);
                $topList.attr('style', this.calculateTopListHeight());
            },
            calculateStyle: function() {
                var footerHeight = $("#footer").outerHeight(),
                    headerHeight = $(".header").eq(0).outerHeight(),
                    populatedZones = headerHeight + footerHeight;

                return ('height:' + ($(window).innerHeight() - populatedZones) + 'px; margin-bottom: ' + footerHeight + 'px;');
            },
            calculateTopListHeight: function() {
                var $bottomList = this.$el.find(this.ui.bottomList),
                    height = "height: " + (this.$el.innerHeight() - $bottomList.outerHeight()) + "px;";

                return  height;
            },
            closePanel: function (e) {
                Global.getUtilities().eventAggregator.trigger("closePanel");
            },
            about: function(){
                Global.getUtilities().eventAggregator.trigger("about");
            },
            exit: function(){
	            this.exitPopup.openExit({
	                onCloseExit: function () {
		                $('#left-navigation-panel').panel("toggle");
		                $('#portal-exit-btn').focus();
	                }
                });
            },
            refreshPatientDataInContext: function(){
                Global.getUtilities().eventAggregator.trigger("refresh:patient:incontext");
            }
        });

        LeftPanelNavigationView.instance = function () {
            if (typeof singleInstance === "undefined") {
                singleInstance = new LeftPanelNavigationView();
            }
            return singleInstance;
        };
        return LeftPanelNavigationView;
    }
);
