Ext.namespace("Uwd.System");

Uwd.System.SystemMenu = Ext.extend(Ext.Window, {
    initComponent: function(config) {
		Ext.menu.MenuMgr.register(this);
		
		// left menu
		this.pMenu = new Ext.menu.Menu({
			floating: false,
			shadow: false,
			cls: 'ux-starmenu'
		});
		
		this.imagePanel = new Ext.Panel({
			title: false,
			style: 'margin-bottom: 5px;',
			header: false,
			html: '<img id="startmenu-profile-image" src="../profile.Images/default.jpg" style="width: 100%;" />'
		});
		
		// set up background-color for default theme of the tool panel
		var xPlain = window.system.user.getThemeName() === 'default' ? 'blue-plain' : 'x-plain';
		xPlain = window.system.user.getThemeName() === 'xtheme-vista-blue' ? 'vista-plain' : xPlain;
		xPlain = window.system.user.getThemeName() === 'xtheme-vista-gray' ? 'vista-gray-plain' : xPlain;
		//var style = window.system.user.getThemeName() === 'default' ? 'padding-left: 5px; background-color: #cedbef !important;' : 'padding-left: 5px;'
		Ext.apply(this, {
			cls: 'x-menu',
			draggable: false,
			closeAction: 'hide',
			layout: 'border',
			border:false,
			x: 5,
			y: Ext.getBody().getHeight() - this.height - 31,
			items: [{
					bodyStyle: 'padding: 5px',
					title: false,
					header: false,
					border:true,
					layout: 'fit',
					region: 'center',
					items: [this.pMenu]
				},
				new Ext.Panel({
					layout: 'anchor',
					title: false,
					header: false,
					region: 'east',
					style: 'padding-left: 5px;',
					split: false,
					collapsible: false,
					border:false,
					baseCls: xPlain,
					width: this.toolWidth,
					items: [this.imagePanel]
				})
			],
			resizable: false
		});

		Uwd.System.SystemMenu.superclass.initComponent.call(this, config);
		
		this.imagePanel.on({
			afterlayout: {fn: function() {
				var str = '<img src="' + window.system.userDetails.getProfileImage() + '" style="width: 100%;" />';
				this.imagePanel.body.update(str);
			}, scope: this}
		});
		
		this.pMenu.on({
			hide: {fn: function() {this.hide();}, scope: this}			  
		});
		
		this.on({
			beforeshow: {fn: this.onBeforeShow, scope: this},
			show: {fn: this.onShow, scope: this},
			render: {fn: function() {
				this.getEl().on({
					click: {fn: this.onClick, scope: this}
				});
	
			}, scope: this}
		});
	},
	
	onClick : function(e, el, o) {
		if (el.className !== 'x-menu-item-text' && el.className !== 'x-menu-item x-menu-item-arrow' && el.className !== 'x-menu-item-icon icon_tb_applications') {
			this.pMenu.items.items[0].hideMenu();
			this.pMenu.items.items[0].container.removeClass(this.pMenu.items.items[0].activeClass);
		}
	},
	
	onShow : function() {
		this.imagePanel.fireEvent('afterlayout');
		/*var xPlain = window.system.user.getThemeName() === 'default' ? 'blue-plain' : 'x-plain';
		this.items.items[1].getEl().removeClass(['blue-plain', 'x-plain']);
		this.items.items[1].getEl().addClass(xPlain);*/
	},
	
	onBeforeShow : function() {
		this.pMenu.show();
		this.y = Ext.getBody().getHeight() - this.height - 31;
	},
	
	addMenu : function(c) {
		this.pMenu.add(c);
	},
	
	addTool : function(c) {
		if (Ext.isEmpty(c.text)) {
			return;	
		}
		c.anchor = '100%';
		c.style = 'margin-bottom: 5px;';
		var oldHandler = c.handler;
		c.handler = function() {
			oldHandler();
			this.hide();
		}.createDelegate(this);
		var btn = new Ext.Button(c);
		this.items.items[1].add(btn);
	}
});