/*jslint node: true, nomen: true, unparam: true */
/*global jquery, $, _, define, Marionette, jqm, window */

'use strict';
define([ 'backbone', 'marionette', 'jquery' ],
	function (Backbone, Marionette, $) {
		return {
			attributes: {
				'data-role': 'dialog',
				'data-theme': 'c',
				'data-close-btn': 'right',
				'transition': 'fade'
			},
			regions: {
				'headerRegion': 'div[data-role=header]',
				'footerRegion': 'div[data-role=footer]',
				'contentRegion': 'div[data-role=content]'
			},
			events: {
				'pagehide': '_onPageHide',
				'pageshow': '_onPageShow',
				'pagebeforeshow': '_onPageBeforeShow',
				'tap a[title="Close"]': '_onTapCloseDialog'
			},
			initialize: function (options) {
                this.options = options || {};
				this.modalRegion = options.modalRegion;
				this.router = options.router;
				this.scrollableContent = !!options.scrollableContent || false;

				// set close button with attributes['data-close-btn'] or options.closeBtn
				if (typeof options.closeBtn !== 'undefined') {
					this.attributes['data-close-btn'] = (!options.closeBtn) ? "none" : options.closeBtn;
				}

				this.fragmentOnClose = options.fragment || (Backbone.history.previousFragment !== Backbone.history.fragment ? Backbone.history.previousFragment : '');


				this.on('open-modal-dialog', this.openDialog);
				this.on('close-modal-dialog', this.closeDialog);
			},
			openDialog: function () {
				this.modalRegion.show(this);
				$.mobile.changePage(this.$el);
			},
			closeDialog: function (options) {
				var mainPage = $("div[data-role=page]").eq(0),
					fragment = (typeof options !== "undefined" && typeof options.fragment !== "undefined") ? options.fragment : this.fragmentOnClose;
				this.router.navigate(fragment, {trigger: true});
				//$.mobile.changePage(mainPage);
			},
			onRender: function () {
				this.$el.trigger('pagecreate');
			},
			_onPageBeforeShow: function () {
				this.setHeightStyle();
			},
			_onPageShow: function () {
				this.setHeightStyle();
			},
			onClose: function () {
				if (this.scrollableContent) {
					$(window).off('resize.modal-dialog');
				}
				this.off();
			},
			_onPageHide: function () {
				this.close();
				this.$el.remove();
				// this is done to correct resizing of scrollableZones in the next applet to load
				$(window).resize();
			},
			_onTapCloseDialog: function (e) {
				e.preventDefault();
				this.closeDialog();
			},
			setHeightStyle: function () {
				var self = this;

				if (this.scrollableContent) {
					this._resizeScrollableModal();
					$(window).on('resize.modal-dialog', $.proxy(self._resizeScrollableModal, self));
				}
			},
			_resizeScrollableModal: function () {
				var self = this;

				this.$el.find('.ui-content').attr('style', self._calculateDialogHeight());
			},
			_calculateDialogHeight: function () {
				var contentDiv = this.$el.find('div[data-role=content]'),
					marginTop = 0, marginBottom = 0,
					paddingTop = 15, paddingBottom = 15,
					top = (marginTop + paddingTop > 0) ? (marginTop + paddingTop) : 0,
					bottom = (marginBottom + paddingBottom > 0) ? (marginBottom + paddingBottom) : 0,
					populatedZones =
						$(this.modalRegion.el).find('.ui-header').outerHeight() +
							$(this.modalRegion.el).find('.ui-footer').outerHeight() +
							top + bottom;

				return ('height:' + ($(window).innerHeight() - populatedZones) + 'px');
			}
		};
	});
