GuaranaUI/src/templatemaemo.js

;(function() {
	Nokia.TemplateMaemo = Nokia.Template.extend({
		footerIconicMenu: null,

		initialize: function(options) {
			var instance = this;

			var defaults = {
				showFirstView: true
			};

			instance.options = jQuery.extend(defaults, options);

			instance._super.apply(instance, [instance.options]);

			instance.viewManager = options.viewManager;

			// Animated Menu

			instance.createAnimatedMenu();

			// Content

			instance.setContent(
				Nokia.dom.parseHTML('<div class="nokia-template-content"></div>')
			);

			Nokia.dom.append(instance.getContainer(), instance.getContent());

			if (instance.options.menu) {

				instance.setFooter(
					Nokia.dom.parseHTML('<div class="nokia-template-menu"></div>')
				);

				instance.options.menu.element = Nokia.dom.parseHTML('<div></div>');

				instance.iconicMenu = new Nokia.IconicMenu(
					instance.options.menu
				);

				Nokia.dom.append(instance.getFooter(), instance.iconicMenu.getWrapper());
				Nokia.dom.append(instance.getMenuWrapper(), instance.getFooter());

			} else {

				instance.getContent().addClass('nokia-template-content-no-footer');

			}

			// Append views to the template content
			instance.views = instance.viewManager.getViews();

			jQuery.each(instance.views, function(i, view) {
				view.setTemplate(instance);
				view._renderUI(instance.getContent());
			});

			instance.viewManager.hideAll();

			// Show first view
			if (instance.options.showFirstView) {
				instance.viewManager.show(instance.views[0]);
			}
		},

		createAnimatedMenu: function() {
			var instance = this;

			instance.menuWrapper = Nokia.dom.parseHTML('<div class="nokia-template-menu-wrapper"></div>');
			instance.menuTrigger = Nokia.dom.parseHTML('<a href="javascript:void(0);" class="nokia-template-menu-trigger"></a>');

			Nokia.dom.append(instance.getContainer(), instance.menuWrapper);
			Nokia.dom.append(instance.getContainer(), instance.menuTrigger);

			instance.menuTrigger.click(function() {
				instance.showMenu();
			});

			var allowed = [
				'.nokia-template-menu-wrapper',
				'.nokia-template-menu-content',
				'.nokia-template-menu-trigger'
			].join(', ');

			jQuery(document.body).bind('click.menutemplatemaemo', function(event) {
        		if (!jQuery(event.target).is(allowed)) {
        			instance.hideMenu();
        		}
        	});
		},

		showMenu: function() {
			var instance = this;

			instance.menuWrapper.animate({
				opacity: 1,
				top: '1px',
				right: '5px',
				height: '418px',
				width: '104px'
			});

			instance.menuTrigger.fadeOut();
		},

		hideMenu: function() {
			var instance = this;

			instance.menuWrapper.animate({
				opacity: 0,
				top: '342px',
				right: '16px',
				height: '72px',
				width: '72px'
			});

			instance.menuTrigger.fadeIn();
		},

		getMenuWrapper: function() {
			var instance = this;

			return instance.menuWrapper;
		},

		getViewManager: function() {
			var instance = this;

			return instance.viewManager;
		},

		getIconicMenu: function() {
			var instance = this;

			return instance.footerIconicMenu;
		}

	});
})();