Header Configuration

headerConfig : {

	enabled : true,
	heightInPx : 80,
	position : 'fixed',
	headerTransisition : false,
	component : 'appheader'

},

headerConfig : {
	enabled : true,
	heightInPx : 80,
	position : 'fixed',
	headerTransisition : false,
	component : 'menuheader' 
	Header Configuration code:
	canvas.ns('canvas.applnlayout.utkarsh.menu');

/**
*@namespace "canvas.applnlayout.card"
*@description This component is currently responsible Jquery Framework to rendered card layout header.
*/

canvas.applnlayout.utkarsh.menu.header = Class({

/**
*@class"canvas.applnlayout.card.header"
*@description The constructor gets the metadata and parent element(#HEADER).
*/

	headerData : null,
	parentElem : null,
	constructor : function (config)
	{
		this.customJSON = config.config;
		this.headerData = config.md || {};
		this.parentElem = config.parentElem;
		if(this.customJSON.isPanelPageRequired()){
			this.createPanel();
			this.panelElem = "#panelPageMenu";
			}
		this.setHeaderPosition();
		this.setFooterPosition();
		this.createJqueryMobileContent();
	},
	createJqueryMobileContent : function(){
		$('[data-role="page"]').attr('id','app');
		$("#CONTENT_DIV").attr('role','content').addClass('ui-content');
		$.mobile.activePage.trigger('pagecreate');
	},
	setHeaderPosition : function(){
		if( !canvas.isEmpty(this.customJSON.getHeaderPosition()) ){
			if(this.customJSON.getHeaderPosition() == "absolute"){
				$('#HEADER_DIV').attr('data-role','header');
				$('#HEADER_DIV').attr('data-position','absolute');
				$('#HEADER_DIV').attr('data-tap-toggle',"false");
			}else{
			$('#HEADER_DIV').attr('data-role','header');
			$('#HEADER_DIV').attr('data-position','fixed');
			$('#HEADER_DIV').attr('data-tap-toggle',"false");
		}
	}
},

setFooterPosition : function(){
	if( !canvas.isEmpty(this.customJSON.getHeaderPosition()) ){
		if(this.customJSON.getHeaderPosition() == "absolute"){
		$('#FOOTER_DIV').attr('data-role','footer');
		$('#FOOTER_DIV').attr('data-position','absolute');
		$('#FOOTER_DIV').attr('data-tap-toggle',"false");
		}else{
			$('#FOOTER_DIV').attr('data-role','footer');
			$('#FOOTER_DIV').attr('data-position','fixed');
			$('#FOOTER_DIV').attr('data-tap-toggle',"false");
		}
	}
},

/**
*CreatingPanel
*/
createPanel:function(){
	var panelPageClass = CLCR.getCmp({
		'COMPONENT': 'PANEL',
		"APPLICATION_FW": "JQM"
	});
	if (panelPageClass) {
	this.panelPage = new panelPageClass().getLandingDOM();
	}
},

/**
* @method getHeaderDOM
* @memberof "canvas.applnlayout.card.header"
* @description This method is responsible for loading the user picture, user 
* info,last login time with the template(cardheader.cttpl).
*/

getHeaderDOM : function ()
{
	var componentJSON = {};
	componentJSON['HEADER_REQ'] = this.customJSON.isHeaderEnabled();
	componentJSON['CSS_CLASS'] = this.customJSON.getHeaderCls();
	var user_info = canvas.preferences.getLoggedInUserName();
	componentJSON['USR_INFO'] = user_info;
	var user_log_time = canvas.preferences.getLastLoginDateTime();
	componentJSON['USR_LOGIN'] = user_log_time;
	var bundle = CRB.getFWBundle();
	componentJSON['LAST_LOGIN_TEXT'] = bundle['LBL_LAST_LOGIN'];
	componentJSON['HEADER_PREF'] = bundle['LBL_PREF'];
	componentJSON['HEADER_LOGOUT'] = bundle['LBL_LOGOUT'];
	componentJSON['PIC_TOOL_TIP'] = bundle['LBL_CHANGE_PROF_PIC'];
	componentJSON['CANVAS_TECHNOLOGY'] = bundle['CANVAS_TECHNOLOGY'];
	var tmpLayer = canvas.templateManager.createTemplate('menu_header_template.cttpl', componentJSON,canvas.util.getTemplatePath());
	tmpLayer.getTemplate(this.applyTemplate, this);
	var panelPageComponentName = this.customJSON.getpanelPageComponentName();
	var panelPageClass = CLCR.getCmp({
		'COMPONENT': panelPageComponentName,
		"APPLICATION_FW": "JQM"
	});

if (panelPageClass) {
		this.panelPage = new panelPageClass({
		parentElem: this.panelElem
		}).getLandingDOM();
	} 
},

/**
* @method applyTemplate
* @memberof "canvas.applnlayout.card.header"
* @description This method gets the template, appends it to the parent element 
* and adds click listener for user preferences and logout.
*/

applyTemplate : function (template, tmpClass)
{
	if (!canvas.core.isEmpty(this.parentElem)) {
		$(this.parentElem).append(template);
		canvas.getImageSrc(canvas.setImageSrc);
	}
	//load Initial Workspace
	$(".default_home").on("click",function(e){ 
	//canvas.workspace.metadata.getWorkspaceManager().getContainer().switchWorkspace();
	//canvas.lib.workspacehandler.activateWorkspace(null, 0, null, null, true);
	var homeWorkspaceId = canvas.HashManager.setHash({});
	canvas.workspace.metadata.getWorkspaceManager().getContainer().switchWorkspace(homeWorkspaceId);
});

//Click action for the Logout button
$(".default_logout").on("click",function(e){
	canvas.lib.utility.logoutUserWithPrompt();
});

//Click event for the update preference
$(".default_preference").on("click",function(e){
	canvas.showPreferences();
});

//Navigation / back - Enable clicks for menu panel
var that=this;
$(".default_navigation_button").on("click",function(e){
	e.preventDefault();
	if (canvas.workspace.metadata.getCurrentWorkspaceId() === "ADDITIONAL_REQUEST") {
		canvas.lib.utility.navigateToPrev(e);
		$(this).addClass("default_back"); 
	} else {
		canvas.lib.utility.openHeaderPopup();
	}
});

//Enables profile picture
$(".default_userImage").on("click",function(e){
		$("#popupUserImg").popup("open", {
			positionTo: "window",
			transition: "slidedown"
			});
		});
	}
}); 

CLCR.registerCmp({

	"COMPONENT" : "menuheader",
	"APPLICATION_FW" : "JQM"

}, canvas.applnlayout.utkarsh.menu.header);