Ext.ns('Ext.ux.clv2');

var demoWindow; /* Global variable, holds the Demo Window */
var demoData; /* Global variable, holds the Demo Data*/ 
var showDemo = function(){
	if (!Ext.getCmp('demoWindow')) {
		demoWindow = new Ext.ux.clv2.DemoWindow({
			id: 'demoWindow',
			cls: 'clv2-window demo-window'
		});
		var relativePos = findPos(document.getElementById('logo'));
		demoWindow.setPosition(relativePos[0],relativePos[1]+90);
	}
	if(Ext.isIE) demoWindow.show(); else demoWindow.show(this);
};

Ext.ux.clv2.DemoStepsData = function(){
	this.metadata.general = {};
	this.metadata.educational = {};
	this.metadata.general.coverage = '';
	this.metadata.general.language = '';
	this.metadata.general.keywords = '';
	this.metadata.general.description = '';
	this.metadata.educational.subject = '';
	this.metadata.educational.resourceType = '';
	this.metadata.educational.context = '';
	this.metadata.educational.interactivityType = '';
	this.metadata.educational.endUser = '';
	this.metadata.educational.ageFrom = '';
	this.metadata.educational.ageTo = '';
	this.metadata.educational.interactivityDegree = '';
	this.metadata.educational.difficulty = '';
};
Ext.ux.clv2.DemoStepsData.prototype = {
	title: '',
	type: '',	
	content: '',
	metadata: {}
};
demoData = new Ext.ux.clv2.DemoStepsData();

Ext.ux.clv2.DemoWindow = function(config) {
	Ext.ux.clv2.DemoWindow.superclass.constructor.call(this, config);
	
	this.on('beforeclose', this.hideSpotlight, this);
	this.on('beforehide', this.hideSpotlight, this);
	this.on('beforeshow', this.showSpotlight, this);
	this.on('collapse', this.showSpotlight, this);
	this.on('move', this.showSpotlight, this);
	this.on('resize', this.showSpotlight, this);
}; 
Ext.extend(Ext.ux.clv2.DemoWindow, Ext.Window, {	
	bodyBorder: false,
	bodyStyle: 'background:#f0f7f2;',
	border: false,
	closeAction: 'close',
	closable: false,
	collapsible: false,
	draggable: true,
	resizable: false,
	autoScroll: true,
	minHeight: 638, // minHeight+16
	minWidth: 975,
	height: 622,
	width: 975,
	
	hideSpotlight : hideSpotlight,
	showSpotlight : showSpotlight,
	addTitleBarItems: addExtTitleBarItems,
	setElementAction: setExtElementAction,
	
	listeners: {
		show: function(wnd){
			wnd.afterShowWindow();
		},
		render: function(wnd){
			wnd.afterRenderWindow();
		}
	},

    afterRenderWindow: function(){
		this.on("changeStep", this.changeStep, this);
		/**
		*   Content Element of Demo Window.
		*   It uses a Card layout to show only one of the views at any given time. 
		*/
		var step1Panel = new Ext.ux.clv2.DemoStep1Panel({id:'ds1-panel', window:this});
		var step2Panel = new Ext.ux.clv2.DemoStep2Panel({id:'ds2-panel', window:this, startInEditMode:true});
		var step3Panel = new Ext.ux.clv2.DemoStep3Panel({id:'ds3-panel', window:this, startInEditMode:true});
		var step4Panel = new Ext.ux.clv2.DemoStep4Panel({id:'ds4-panel', window:this});
        var ds4BodyStyle = 'background:#f0f7f2; border:0 none; height:610px; width:973px;';
		this.card = new Ext.layout.CardLayout({
			id: 'demo-card',
			layout: 'card',
			activeItem: 0,
			activeCardId: 'ds1-panel',
			bodyStyle: ds4BodyStyle,
			border: false,
			items: [step1Panel, step2Panel, step3Panel, step4Panel]
		});
		this.add(this.card);
		this.setSize(this.width, this.height);
		return;
	},
	afterShowWindow: function(){
		this.addTitleBarItems({title:'Common Library Demo', close:'close window'});
		this.setSize(975,622);
		return;
	},
	previousStep: function(){
		var idx = this.card.activeItem - 1;
		this.changeCard(idx);
		return;
	},
	nextStep: function(){
		var idx = this.card.activeItem + 1;
		this.changeCard(idx);
		return;
	},
	changeStep: function(steps){
		var idx = this.card.activeItem + steps;
		this.changeCard(idx);
		return;
	},
	changeCard: function(idx){
		this.card.items[this.card.activeItem].fireEvent('save');
		if(!idx) idx = this.card.activeItem;
		this.card.activeItem = idx;
		var cmpId = this.card.id;
		var cardId = this.card.activeCardId = this.card.items[idx].id;
		Ext.getCmp(cmpId).layout.setActiveItem(cardId ? cardId : idx);
		return;
	},
	showDemoStep2: function(){
		return;
	}
});
Ext.reg('DemoWindow', Ext.ux.clv2.DemoWindow);


Ext.ux.clv2.DemoStep1Panel = function(config) {	
	Ext.ux.clv2.DemoStep1Panel.superclass.constructor.call(this, config);
};
Ext.extend(Ext.ux.clv2.DemoStep1Panel, Ext.Panel, {
	bodyStyle: 'background:#f0f7f2; border:0 none;',
	nextBtnEnabled: false,
	height: 610,
	listeners: {
		render: function(panel){
			panel.afterRenderPanel();
		}
	},
	onSave: function(){
		demoData.title = Ext.get('titleText').getValue();
		var typeObj = Ext.get('typeSelect');
		demoData.type = typeObj.dom.value;
        return;
	},
	afterRenderPanel: function(){
		this.on("save", this.onSave, this);
		var mgrDemoStep1 = this.getUpdater();
		mgrDemoStep1.on("update", this.afterUpdateDemo1, this);
		mgrDemoStep1.update({
			url: "demo.spr",
			params: {stepNumber:1}
		});
	},
	afterUpdateDemo1: function(){
		this.window.setElementAction('step1Cancel','firstStepCancel','close','demo-cancel-btn-over');
		var input = Ext.get('titleText');
		input.on('keyup', this.afterKeyUpTitle, this);
		var btn = Ext.get('firstStepNext');
		btn.addClass('demo-next-btn-disable');
		this.nextBtnEnabled = false;
		return;
	},
	disableNextBtn: function(){
		var btn = Ext.get('firstStepNext');
		btn.removeClass('demo-next-btn-over');
		btn.removeClass('demo-next-btn-enable');
		btn.un('click', this.window.nextStep, this.window);
		btn.un('mouseout', removeExtElemClass, btn);
		btn.un('mouseover', addExtElemClass, btn);
		this.nextBtnEnabled = false;
		return;
	},
	enableNextBtn: function(){
		if (!this.nextBtnEnabled) {
			this.disableNextBtn();
			var btn = Ext.get('firstStepNext');
			btn.addClass('demo-next-btn-enable');			
			btn.on('click', this.window.nextStep, this.window);
			btn.on('mouseout', removeExtElemClass, btn, 'demo-next-btn-over');
			btn.on('mouseover', addExtElemClass, btn, 'demo-next-btn-over');
			this.nextBtnEnabled = true;
		}
		return;
	},
	afterKeyUpTitle: function(e, elem){
		if(elem.value == ""){
			this.disableNextBtn();			
		}else{
			this.enableNextBtn();
		}
		return;	
	}
});


Ext.ux.clv2.DemoStep2Panel = function(config) {
	Ext.ux.clv2.DemoStep2Panel.superclass.constructor.call(this, config);
};
Ext.extend(Ext.ux.clv2.DemoStep2Panel, Ext.Panel, {
	bodyStyle: 'background:#f0f7f2; border:0 none;',
	setElementAction: setExtElementAction,
	height: 610,
	listeners: {
		show: function(panel){
			panel.afterShowPanel();
		},
		render: function(panel){
			panel.addItems();
		}
	},
	totalShows: 0,
	afterShowPanel: function(){		
		if(this.startInEditMode) this.fireEvent('toggleMode', true);
		if (this.totalShows < 1 && tinyMCE && tinyMCE.activeEditor.contentAreaContainer) {
			var editor = tinyMCE.activeEditor.contentAreaContainer.firstChild;
			var newIframeHeight = Ext.isIE ? (editor.clientHeight) : (editor.clientHeight - 127);
			editor.style.height = newIframeHeight + 'px';
			var iframe = Ext.getCmp(this.contentView.id);
			iframe.getFrame().update(this.getEditorContent());
		}
		this.totalShows++;
		if(this.tbTop) this.tbTop.setTitle(demoData.title+demoData.type);
		return;
	},
	toggleMode: function(state){
		this.tbTop.editAndViewBtn.toggle(state);
		return;
	},
	afterToggleMode: function(){
		switch(this.card.activeItemName){
			case 'view':
				var iframe = Ext.getCmp(this.contentView.id);
				iframe.getFrame().update(this.getEditorContent());
			break;
		}
		return;
	},
	onSave: function(){
		demoData.content = this.getEditorContent();
		return;
	},
	getEditorContent: function(){
		var editorContent = tinyMCE.activeEditor.getContent();		
		editorContent = '<head xmlns="http://www.w3.org/1999/xhtml">'+
			'<base href="'+tinyMCE.activeEditor.documentBaseURI.getURI()+'">'+
			'<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">'+
			'<link href="scripts/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/content.css" mce_href="scripts/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/content.css" rel="stylesheet">'+
			'<link href="scripts/tinymce/jscripts/tiny_mce/plugins/spellchecker/css/content.css" mce_href="scripts/tinymce/jscripts/tiny_mce/plugins/spellchecker/css/content.css" rel="stylesheet">'+
			'<link href="scripts/tinymce/jscripts/tiny_mce/plugins/pagebreak/css/content.css" mce_href="scripts/tinymce/jscripts/tiny_mce/plugins/pagebreak/css/content.css" rel="stylesheet">'+
			'<link href="scripts/tinymce/jscripts/tiny_mce/plugins/media/css/content.css" mce_href="scripts/tinymce/jscripts/tiny_mce/plugins/media/css/content.css" rel="stylesheet">'+
		'</head>'+
		'<body dir="ltr" spellcheck="false" id="tinymce" class="mceContentBody">'+			
			editorContent+
		'</body>';
		return editorContent;
	},
	addItems: function(){		
		this.on("save", this.onSave, this);
		this.on("toggleMode", this.toggleMode, this);
		this.on("afterToggleMode", this.afterToggleMode, this);
		var bodyStyle = 'background:#e8f2f2; border:1px solid #c1c1c1; border-top: 0px none;';
		var height = 520, width = 661, ttbHeight = 27;
		
		var demo2Header = new Ext.Panel({
			autoLoad:{url: 'demoSection.spr', params: {section:"demoStep2Header"}},
            bodyStyle: 'background: #f2f9fc; border-bottom:1px solid #b4bab5;',
			border: false,
			header: false
		});
		
		this.contentView = {
			id: 'demo-content-view', // mandatory to get the componet after toggle to mode view
			cls: 'demo-iframe-panel',
			xtype: 'iframepanel',
			//defaultSrc: 'content.spr?'+Ext.urlEncode({ "learningObjectId" : learningObjectRecord.records[0].data.id}),
			height: height-ttbHeight,
			width: width
		};
		
		var contentEditTinyMCE = {
			xtype: "tinymce",
			width: width-2,
			height: height-ttbHeight-1,
			tinymceSettings: {
				theme: "advanced",
				plugins: "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
				theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
				theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor",
				theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,ltr,rtl,|",
				theme_advanced_buttons4 : "backcolor,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,|,visualchars,|",
				theme_advanced_toolbar_location : "top",
				theme_advanced_toolbar_align : "left",
				theme_advanced_statusbar_location : "bottom",
				//theme_advanced_resizing : true,
				extended_valid_elements: "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
				template_external_list_url: "example_template_list.js"
				//save_onsavecallback: "saveChanges"
			},
			value: ""
			//value: "<h1>Demo</h1><p>Ext.ux.TinyMCE works...</p>"
		};
		var contentEdit = new Ext.Panel({
			id: 'demo-content-edit',
			cls: 'demo-tinymce-panel',
			tbarTitle: 'Content Edit',
			bodyStyle: bodyStyle,
			autoScroll: true,
			border: false,
			height: height-ttbHeight,
			width: width,
			editor: contentEditTinyMCE,
			items: [contentEditTinyMCE]
		});
		this.card = new Ext.layout.CardLayout({
			id: 'demo-content-card',
			layout: 'card',
			activeItem: 0,
			activeItemName: 'view',
			activeCardId: 'demo-content-view',
			activeMenuBtnId: 'demo-content',
			autoScroll: true,
			border: false,
			demoStep: this,
			startInEditMode: this.startInEditMode,
			items: [this.contentView, contentEdit]
		});
		
		this.tvtbLeft = new Ext.ux.clv2.DemoLeftToolbar({
			cls: 'vertical-toolbar',
			btnPressedName: 'content',
			card: this.card,
			window: this.window,
			demoStep: this
		});
		var panelMenuLeft = new Ext.Panel({
			title: 'EDIT',
			width: 123,
			cls: 'vertical-toolbar-panel vertical-toolbar-demo',
			tbar: this.tvtbLeft,
			defaults: {autoScroll:false, border:false}
		});
		var demo2BodyLeft = new Ext.Panel({
			bodyStyle: 'background: #e8f2f2; '+
						'border: 1px solid #c1c1c1;'+
						'border-right: 0px none;'+
						'margin: 15px 0px 15px 15px; '+
						'padding-top: 0px;',
			header: false,
			height: height,
			items: [panelMenuLeft]
		});
		
		this.tbTop = new Ext.ux.clv2.DemoTopToolbar({
            id:'step2-top-toolbar',           
			modeSelectedName: 'view',
			card: this.card,
			window: this.window,
			demoStep: this,
			demoStepNumber: 2,
			startInEditMode: this.startInEditMode
		});
		
		var demo2BodyRight = new Ext.Panel({			
			bodyStyle: 'background: #fdffd6; '+
						'border: 1px solid #f4d22c;'+
						'padding: 15px 10px 0px 10px;',
			border: false,
			header: false,
			height: height,
			width: 150,
			parent: this,
			listeners: {
				render: function(panel){
					panel.afterRenderPanel();
				}
			},
			afterRenderPanel: function(){
			    var mgrRightPanel = this.getUpdater();
			    mgrRightPanel.on("update", this.setActions, this);
			    mgrRightPanel.update({
			        url: 'demoSection.spr',
                    params: {section:"demoStep2RightPanel"}
			    });
			},
			setActions: function(){
				this.parent.window.setElementAction('step2Cancel','ds2-cancel-btn','close','ds2-cancel-btn-over');
				this.parent.window.setElementAction('step2Next','ds2-next-btn','nextStep','ds2-next-btn-over');
				return;
			}
		});
		
		this.add(demo2Header, {
			layout: 'column',
			bodyStyle: 'background:#f0f7f2; border:0 none;',
			items: [{
				bodyStyle: 'background:#f0f7f2; border:0 none;',
				items: [demo2BodyLeft],
				width: 137
			},{
				id:'demo-step2-right-container',
                bodyStyle: 'background:#f0f7f2; border:0 none;',
				width: width,
				items: [this.tbTop, this.card]
			},{
				bodyStyle: 'background: #f0f7f2; border:0 none;'+
							'padding: 15px 10px 15px 15px;',
				items: [demo2BodyRight]
			}]
		});
		return;
	}
});


Ext.ux.clv2.MetadataViewPanelDemo = function(config) {
	Ext.ux.clv2.MetadataViewPanelDemo.superclass.constructor.call(this, config);
};
Ext.extend(Ext.ux.clv2.MetadataViewPanelDemo, Ext.Panel, {
	cls: 'collapsible-panel',
	title: 'Object Metadata',
	collapsedCls: 'collapsed-panel',
	autoScroll: true,
	border: false,
	collapsible: true,
	titleCollapse: true
});

Ext.ux.clv2.DemoStep3Panel = function(config) {
	Ext.ux.clv2.DemoStep3Panel.superclass.constructor.call(this, config);
};
Ext.extend(Ext.ux.clv2.DemoStep3Panel, Ext.Panel, {
	bodyStyle: 'background:#f0f7f2; border:0 none;',
	setElementAction: setExtElementAction,
	height: 610,
	listeners: {
		show: function(panel){
			panel.afterShowPanel();
		},
		render: function(panel){
			panel.addItems();
		}
	},
	afterShowPanel: function(){		
		if(this.startInEditMode) this.fireEvent('toggleMode', true);
		if(this.tbTop) this.tbTop.setTitle(demoData.title+demoData.type);                 
    },
	toggleMode: function(state){
		this.tbTop.editAndViewBtn.toggle(state);
		return;
	},
	onSave: function(){
		demoData.metadata = {};
		demoData.metadata.general = {};
		demoData.metadata.educational = {};
		demoData.metadata.general.coverage = Ext.get('ds3-coverage-in').getValue();
		var languageObj = Ext.get('ds3-language-sl');
		demoData.metadata.general.language = languageObj.dom.options[languageObj.dom.selectedIndex].text;
		demoData.metadata.general.keywords = Ext.get('ds3-keywords-ta').getValue();
		demoData.metadata.general.description = Ext.get('ds3-description-ta').getValue();
		demoData.metadata.educational.subject = Ext.get('ds3-subject-in').getValue();
		var lnTypeObj = Ext.get('ds3-lotype-sl');
		demoData.metadata.educational.resourceType = lnTypeObj.dom.options[lnTypeObj.dom.selectedIndex].text;
		var contextObj = Ext.get('ds3-context-sl');
		demoData.metadata.educational.context = contextObj.dom.options[contextObj.dom.selectedIndex].text;
		var iaTypeObj = Ext.get('ds3-itype-sl');
		demoData.metadata.educational.interactivityType = iaTypeObj.dom.options[iaTypeObj.dom.selectedIndex].text;
		var endUserObj = Ext.get('ds3-enduser-sl');
		demoData.metadata.educational.endUser = endUserObj.dom.options[endUserObj.dom.selectedIndex].text;
		var ageFromObj = Ext.get('ds3-agefrom-sl');
		demoData.metadata.educational.ageFrom = ageFromObj.dom.options[ageFromObj.dom.selectedIndex].text;
		var ageToObj = Ext.get('ds3-ageto-sl');
		demoData.metadata.educational.ageTo = ageToObj.dom.options[ageToObj.dom.selectedIndex].text;		
		var difficultyObj = Ext.get('ds3-difficulty-sl');
		demoData.metadata.educational.difficulty = difficultyObj.dom.options[difficultyObj.dom.selectedIndex].text;
		return;
	},
	addItems: function(){
		// add new items here
		this.on("save", this.onSave, this);		
		var bodyStyle = 'background:#e8f2f2; border:1px solid #c1c1c1; border-top: 0px none;';
		var height = 520, width = 629, ttbHeight = 27, pteHeight = 85;
		
		var demo3Header = new Ext.Panel({
			autoLoad:{url: 'demoSection.spr', params: {section:"demoStep3Header"}},
            bodyStyle: 'background: #f2f9fc; border-bottom:1px solid #b4bab5;',
			border: false,
			header: false
		});
		
		var metadataView = new Ext.Panel({
			id: 'demo-metadata-view',
			tbarTitle: 'Metadata View',
			bodyStyle: bodyStyle,
			border: false,
			height: height-ttbHeight,
			width: width,
			html: 'Metadata View'
		});
		
		var pTopEdit = new Ext.Panel({
			autoLoad:{url: 'demoMetadata.spr', params: {type:1, name:demoData.title}},
			cls: 'p-top-view',
			collapsedCls: 'collapsed-panel',
			border: false,
			header: false,
			autoScroll: true,
			collapsible: true,
			titleCollapse: true,
			height: pteHeight,
			width: (width-2)
		});
		var pCenterEdit = new Ext.Panel({
			autoLoad:{url: 'demoMetadata.spr', params: {type:2, name:demoData.title}},
            cls: 'collapsible-panel',
			collapsedCls: 'collapsed-panel',
			title: 'Object Metadata: General',
			border: false,
			autoScroll: false,
			collapsible: true,
			titleCollapse: true,
			width: (width-2)
		});
		var pDownEdit = new Ext.Panel({
			autoLoad:{url: 'demoMetadata.spr', params: {type:3, name:demoData.title}},
            cls: 'collapsible-panel',
			collapsedCls: 'collapsed-panel',
			title: 'Object Metadata: Educational',
			border: false,
			collapsed: true,
			autoScroll: false,
			collapsible: true,
			titleCollapse: true,
			width: (width-2)
		});
		
		var pMainEdit = new Ext.Panel({
			cls: 'p-top-view',
			//bodyStyle: 'overflow-x:none; overflow-y:scroll;', // TODO: move body style to a css class
			autoScroll: true,
			border: false,
			header: false,
			height: (height-ttbHeight-pteHeight),
			width: (width-2),
			items: [pCenterEdit, pDownEdit]
		});
		
		var metadataEdit = new Ext.Panel({
			id: 'demo-metadata-edit',
			tbarTitle: 'Metadata Edit',
			bodyStyle: bodyStyle,
			border: false,
			height: (height-ttbHeight),
			width: width,
			items: [pTopEdit, pMainEdit]
		});
		
		var dsCardBodyStyle = 'height:'+height-ttbHeight+'px; width:'+width+'px;';
		this.card = new Ext.layout.CardLayout({
			id: 'demo-metadata-card',
			layout: 'card',
			activeItem: 1,
			activeItemName: 'edit',
			activeCardId: 'demo-metadata-edit',
			activeMenuBtnId: 'demo-metadata',
			bodyStyle: dsCardBodyStyle,
			autoScroll: true,
			border: false,
			demoStep: this,
			startInEditMode: this.startInEditMode,
			items: [metadataView, metadataEdit]
		});
		
		this.tvtbLeft = new Ext.ux.clv2.DemoLeftToolbar({
			cls: 'vertical-toolbar',
			btnPressedName: 'metadata',
			card: this.card,
			window: this.window,
			demoStep: this
		});
		var panelMenuLeft = new Ext.Panel({
			title: 'EDIT',
			width: 123,
			cls: 'vertical-toolbar-panel vertical-toolbar-demo',
			tbar: this.tvtbLeft,
			defaults: {autoScroll:false, border:false}
		});
		var demo3BodyLeft = new Ext.Panel({
			bodyStyle: 'background: #e8f2f2; '+
						'border: 1px solid #c1c1c1;'+
						'border-right: 0px none;'+
						'margin: 15px 0px 15px 15px; '+
						'padding-top: 0px;',
			header: false,
			height: height,
			items: [panelMenuLeft]
		});
		
		this.tbTop = new Ext.ux.clv2.DemoTopToolbar({
            id:'step3-top-toolbar',
            //titleText: 'title 3',
			modeSelectedName: 'view',
			card: this.card,
			window: this.window,
			demoStep: this,
			demoStepNumber: 3,
			startInEditMode: this.startInEditMode
		});
		
		var demo3BodyRight = new Ext.Panel({
			bodyStyle: 'background: #fdffd6; '+
						'border: 1px solid #f4d22c;'+
						'padding: 15px 10px 0px 10px;',
			border: false,
			header: false,
			height: height,
			width: 182,
			parent: this,
			listeners: {
				render: function(panel){
					panel.afterRenderPanel();
				}
			},
			afterRenderPanel: function(){
			    var mgrRightPanel = this.getUpdater();
			    mgrRightPanel.on("update", this.setActions, this);
			    mgrRightPanel.update({
			        url: 'demoSection.spr',
                    params: {section:"demoStep3RightPanel"}
			    });
			},
			setActions: function(){
				this.parent.window.setElementAction('step3Cancel','ds3-cancel-btn','close','demo-cancel-btn-over');
				this.parent.window.setElementAction('step3Next','ds3-next-btn','nextStep','demo-next-btn-over');
				return;
			}
		});
		
        var ds3ColumnBodyStyle = 'background:#f0f7f2; border:0 none; height:610px; width:973px;';
		var ds3Column = new Ext.Panel({
			layout: 'column',
			bodyStyle: ds3ColumnBodyStyle,
			border: false,
			items: [{
				bodyStyle: 'background:#f0f7f2; border:0 none;',
				items: [demo3BodyLeft],
				width: 137
			},{
				bodyStyle: 'background:#f0f7f2; border:0 none;',
				width: width,
				items: [this.tbTop, this.card]
			},{
				bodyStyle: 'background: #f0f7f2; border:0 none; padding: 15px 10px 15px 15px;',
				items: [demo3BodyRight]
			}]
		});
		this.add(demo3Header, ds3Column);
		return;
	}
});


Ext.ux.clv2.SignUpFormDemo = function(config){
	Ext.ux.clv2.SignUpFormDemo.superclass.constructor.call(this, config);
};
Ext.extend(Ext.ux.clv2.SignUpFormDemo, Ext.form.FormPanel, {
	xtype: 'form',
	header: false,
	labelAlign: 'right',
	labelWidth: 150,
	allowBlank: false,
	bodyStyle: 'padding-top:5px;',
	cls: 'signup-form',
	border: false,
	labelPad: 7,
	layoutConfig: {
		labelSeparator: ''
	},
	defaults: {
		width: 210,
		msgTarget: 'qtip'
	},
	defaultType: 'textfield',
	listeners: {
		render: function(form){
			form.addClass('signup-form');
			if(Ext.isIE) form.addClass('signup-form-ie');
		}
	}
});

Ext.ux.clv2.DemoStep4Panel = function(config) {

	Ext.ux.clv2.DemoStep4Panel.superclass.constructor.call(this, config);
};
Ext.extend(Ext.ux.clv2.DemoStep4Panel, Ext.Panel, {
	bodyStyle: 'background:#f0f7f2; border:0 none;',
	height: 610,
	
	setElementAction: setExtElementAction,
	
	afterUpdateFormFooter: function(){
		this.setElementAction('linkTerms','ds4-terms-link','showTermsOfServicePanel','signup-footer-link-over');
		this.setElementAction('linkPolicy','ds4-policy-link','showPrivacyPolicyPanel','signup-footer-link-over');
		this.setElementAction('linkSupport','ds4-support-link','contactSupport','signup-footer-link-over');
		this.setElementAction('btnCancel','ds4-cancel-btn','doClose','signup-cancel-btn-over');
		this.setElementAction('btnCreate','ds4-create-btn','doCreate','signup-create-btn-over');
		this.setElementAction('ckbAgree', 'ds4-agree-cb', 'onCkbAgreeClick', '');
    },
	
	afterUpdateRightPanel: function(){
		return;
	},
	
	contactSupport: function(){
		Ext.Msg.alert('Common Library Support', 'It could show support window.');
	},
	
	doClose: function(){
		this.window.close();
	},
	
	onCkbAgreeClick: function(){
		var ckbAgree = Ext.get('ds4-agree-cb');
		var termAgree = Ext.get('alert-agree-terms');
		if (ckbAgree.dom.checked == true) {
			termAgree.removeClass('terms-agree-visible');
		}
		return true;
	},
	
	doCreate: function(){
		var ckbAgree = Ext.get('ds4-agree-cb');
		var termAgree = Ext.get('alert-agree-terms');
		
		this.fieldFirstName.validate();
		this.fieldLastName.validate();
		this.cbLanguage.validate();
		this.cbCountry.validate();
		this.cbMonth.validate();
		this.cbDay.validate();
		this.cbYear.validate();
		this.cbSexGender.validate();
		this.fieldEmail.validate();
		this.fieldPassword.validate();
		this.fieldPasswordValidation.validate();
		var countrySelect = this.cbCountry.getValue();
        var zip = '';
        if (countrySelect == 'clv2.language.unitedstates') {
			this.zipField.validate();
            zip = this.zipForm.getValue();
        } else {
			if (countrySelect == 'clv2.language.canada') {
				this.postalCode.validate();
                zip = this.frmPostalCode.getValue();
            }
		}
		if (ckbAgree.dom.checked == true) {
			var securityUtils = new Ext.clv2.utils.SecurityUtils();
            var learningObjectService = new Ext.clv2.utils.LearningObjectUtils();
            var month = this.cbMonth.getValue();
			var day =   this.cbDay.getValue();
			var year =  this.cbYear.getValue();
			var gender = Ext.getCmp('cbSex').value;
			month = month < 10 ? '0'+month : month;
			day = day < 10 ? '0'+day : day;
			var date = month+'/'+day+'/'+year;
			var country = this.cbCountry.getValue();
			var language = this.cbLanguage.getValue();           
            var user = {
				firstName: this.fieldFirstName.getValue(),
				lastName: this.fieldLastName.getValue(),
				password: this.fieldPassword.getValue(),
				username: this.fieldEmail.getValue(),
                zip:zip
            }
			var id = securityUtils.createUser(user, language, country, date, gender);
            //var id = '402881e4-1ef7b43d-011e-f7b8f67e-0001';            
            var iaTypeObj = Ext.get('ds4-footer-save-item-yes');
		    var saveLO = iaTypeObj.dom.checked;
            if(id != null && saveLO){
                learningObjectService.createLearningObjectFromDemo(demoData.title, demoData.type, demoData.content,
                        id, demoData.metadata.general, demoData.metadata.educational)
            }
            this.demo4BodyLeft.load({url: 'signUpSuccessful.spr', params: {userName: user.firstName}})
        } else {
			termAgree.addClass('terms-agree-visible');
		}
	},

    listeners: {
		render: function(panel){
			panel.afterRenderPanel();
		}
	},
    
    afterRenderPanel: function(){
		var exampleMonths = [['Jan', 'January', 1], ['Feb', 'February', 2], ['Mar', 'March', 3], ['Apr', 'April', 4], ['May', 'May', 5], ['Jun', 'June', 6], ['Jul', 'July', 7], ['Aug', 'August', 8], ['Sep', 'September', 9], ['Oct', 'October', 10], ['Nov', 'November', 11], ['Dec', 'December', 12]];
		var yearsBirth = [];
        var index = 2009;
        for(index; index > 1899; index--){
            yearsBirth.push(index);
        }
        var daysBirth = [];
		var month, year;
		var sexGender=[['M','Male'],['F','Female']];
		var ds4BodyStyle = 'background:#f0f7f2; border:0 none;';
		
		var storeCountrys = new Ext.data.JsonStore({
			url: 'i18n.spr',
			baseParams: {
				basename: 'i18n_countries'
			},
			root: 'rows',
			id: "id",
			fields: ['id', 'name'],
			autoLoad: true,
			sortInfo: {
				field: "name",
				direction: "ASC"
			}
		});
		
		var storeLanguages = new Ext.data.JsonStore({
			url: 'i18n.spr',
			baseParams: {basename:'i18n_languages'},
			root: 'rows',
			id: "id",
			fields: ['id', 'name'],
			autoLoad:true,
			sortInfo:{field: "name", direction: "ASC"}
		});
		
		// simple array store
		var storeMonths = new Ext.data.SimpleStore({
			fields: ['abbr', 'name', 'index'],
			data: exampleMonths
		});
		
		var storeDaysBirth = new Ext.data.SimpleStore({
			fields: ['name'],
			data: daysBirth
		});
		
		var storeYearsBirth = new Ext.data.SimpleStore({
			fields: ['name'],
			data: yearsBirth
		});
		
		var storeSexGender = new Ext.data.SimpleStore({
			fields: ['abbr', 'name'],
			data: sexGender
		});
		
		this.cbMonth = new Ext.ux.clv2.SignUpCombo({
			tpl: '<tpl for="."><div ext:qtip="{name}. {description}" class="x-combo-list-item">{name}</div></tpl>',
			store: storeMonths,
			fieldLabel: 'Date of Birth:',
			emptyText: 'Month',
			name: 'month',
			listWidth:110,
			msgTarget: 'qtip',
			valueField: 'index',
			allowBlank: false,
			blankText: 'Please provide month birth',
			listeners: {
				select: function(record, index){
					var daysBirth = [['1'], ['2'], ['3'], ['4'], ['5'], ['6'], ['7'], ['8'], ['9'], ['10'], ['11'], ['12'], ['13'], ['14'], ['15'], ['16'], ['17'], ['18'], ['19'], ['20'], ['21'], ['22'], ['23'], ['24'], ['25'], ['26'], ['27'], ['28']];
					month = this.getValue();
					
					if (month == 2) {
						if (year != "") {
							var leap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
							if (leap) {
								daysBirth.push(['29']);
							}
						}
					} else {
						if (month == 4 || month == 6 || month == 9 || month == 11) {
							daysBirth.push(['29']);
							daysBirth.push(['30']);
						} else {
							daysBirth.push(['29']);
							daysBirth.push(['30']);
							daysBirth.push(['31']);
						}
					}
					storeDaysBirth.loadData(daysBirth, false);
					return;
				}
			}
		});
		
		this.cbDay = new Ext.ux.clv2.SignUpCombo({
			fieldLabel: '/',
			emptyText: 'Day',
			name: 'day',
			msgTarget: 'qtip',
			valueField: 'name',
			store: storeDaysBirth,
			allowBlank: false,
			blankText: 'Please provide day birth'
		});
		
		this.cbYear = new Ext.ux.clv2.SignUpCombo({
			fieldLabel: '/',
			emptyText: 'Year',
			name: 'year',
			store: yearsBirth,
			msgTarget: 'qtip',
			valueField: 'name',
			allowBlank: false,
			blankText: 'Please provide year birth',
			listeners: {
				select: function(cbYear, record, index){
					var daysBirth = [['1'], ['2'], ['3'], ['4'], ['5'], ['6'], ['7'], ['8'], ['9'], ['10'], ['11'], ['12'], ['13'], ['14'], ['15'], ['16'], ['17'], ['18'], ['19'], ['20'], ['21'], ['22'], ['23'], ['24'], ['25'], ['26'], ['27'], ['28']];
					//month = this.cbMonth.getValue();
					year = this.getValue();
					if (month == 2) {
						if (year != "") {
							var leap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
							if (leap) {
								daysBirth.push(['29']);
							}
						}
						storeDaysBirth.loadData(daysBirth, false);
					}
				}
			}
		});
		
		this.cbSexGender=new Ext.ux.clv2.SignUpCombo({
			id: 'cbSex',
			fieldLabel:'Gender',
			emptyText: 'Select',
			name: 'name',
			listWidth:195,
			valueField: 'name',
			store:storeSexGender,
			msgTarget: 'qtip',
			allowBlank: false,
			blankText: 'Please provide your Gender'
		});
		
		var frmMonth = new Ext.ux.clv2.SignUpFormDemo({
			defaults:{width: 110},
			items:[this.cbMonth]
		});
		
		var frmDay = new Ext.ux.clv2.SignUpFormDemo({
			labelWidth: 10,
			defaults:{width: 45-15},
			items:[this.cbDay]
		});
		
		var frmYear = new Ext.ux.clv2.SignUpFormDemo({
			labelWidth: 10,
			defaults:{width: 65-15},
			items:[this.cbYear]
		});
		
		this.frmDateOfBirth = {
            id: 'frmDateOfBirth',
            layout: 'column',
			border: false,
			items: [{
				bodyStyle: ds4BodyStyle,
				width: 270+15,
				items: [frmMonth]
			}, {
				bodyStyle: ds4BodyStyle,
				width: 65,
				items: [frmDay]
			}, {
				bodyStyle: ds4BodyStyle,
				width: 85,
				items: [frmYear]
			}]
		};

        var formGenderDemo4 =new Ext.ux.clv2.SignUpFormDemo({
            id:'formGender',
			defaults: {
				width: 210-15,
				msgTarget: 'qtip'
			},
			items:[this.cbSexGender]
        });
		
		this.cbCountry = new Ext.ux.clv2.SignUpCombo({
			fieldLabel: 'Country:',
			name: 'country',
			store: storeCountrys,
			allowBlank: false,
			listWidth:209,
			msgTarget: 'qtip',
			blankText: 'Please select a country',
			listeners: {
				select: function(cbCountry, record, index){
					var countrySelect = cbCountry.getValue();
					if (countrySelect == 'USA') {
						this.zipForm.addClass('zip-post-code-visible');
						this.frmPostalCode.removeClass('zip-post-code-visible');
					} else {
						if (countrySelect == 'CAN') {
							this.frmPostalCode.addClass('zip-post-code-visible');
							this.zipForm.removeClass('zip-post-code-visible');
						} else {
							this.frmPostalCode.removeClass('zip-post-code-visible');
							this.zipForm.removeClass('zip-post-code-visible');
						}
					}
					return;
				}
			}
		});
		
		this.cbLanguage = new Ext.ux.clv2.SignUpCombo({
			fieldLabel: 'Native Language:',
			name: 'language',
			store: storeLanguages,
			listWidth:209,
			allowBlank: false,
			msgTarget: 'qtip',
			blankText: 'Please select a language'
		});
		
		this.zipField = new Ext.form.TextField({
			fieldLabel: 'Zip Code',
			name: 'zip',
			id: 'zip',
			allowBlank: false,
			vtype: 'zipCodeFormat',
			blankText: 'Please enter your zip code',
			msgTarget: 'qtip',
			width: 210
		});
		
		this.postalCode = new Ext.form.TextField({
			fieldLabel: 'Postal Code',
			name: 'post',
			id: 'post',
			allowBlank: false,
			blankText: 'Please enter your postal code',
			msgTarget: 'qtip',
			width: 210,
			vtype: 'postalCodeFormat'
		});
		
		var frmZipPost = new Ext.ux.clv2.SignUpFormDemo({
			cls: 'signup-form zip-post-code-hide',
			items: [this.zipField]
		});
		
		var frmPostalCode = new Ext.ux.clv2.SignUpFormDemo({
			cls: 'signup-form zip-post-code-hide',
			items: [this.postalCode]
		});
		
		Ext.apply(frmZipPost, {'zipField':this.zipField});
		Ext.apply(frmPostalCode, {'postalField':this.postalCode});
		Ext.apply(this.cbCountry, {'zipForm':frmZipPost, 'zipField':this.zipField, 'frmPostalCode':frmPostalCode, 'postalField':this.postalCode});
		
		this.fieldFirstName = new Ext.form.TextField({
			fieldLabel: 'First Name:',
			name: 'first',
			allowBlank: false,
			blankText: ' Please provide name',
			msgTarget: 'qtip'
		});
		
		this.fieldLastName = new Ext.form.TextField({
			fieldLabel: 'Last Name:',
			name: 'Last',
			msgTarget: 'qtip',
			allowBlank: false,
			blankText: ' Please enter your last name'
		});
		
		var frmBasicInfo = new Ext.ux.clv2.SignUpFormDemo({
			defaults: {
				width: 210,
				msgTarget: 'qtip'
			},
			defaultType: 'textfield',
			items: [this.fieldFirstName, this.fieldLastName, this.cbLanguage, this.cbCountry]
		});
		
		this.fieldEmail = new Ext.form.TextField({
			fieldLabel: 'Email Address:',
			name: 'email',
			allowBlank: false,
			inputType: 'text',
			msgTarget: 'qtip',
			vtype: 'emailError',
			blankText: ' Please provide email'
		});
		
		this.fieldPassword = new Ext.form.TextField({
			fieldLabel: 'Password:',
			name: 'pass',
			allowBlank: false,
			blankText: 'The password cannot be left blank',
			msgTarget: 'qtip',
			id: 'pass',
			vtype: 'passwordNoFormat',
            inputType: 'password'
        });
		
		this.fieldPasswordValidation = new Ext.form.TextField({
			fieldLabel: 'Confirm Password:',
			name: 'pass-cfrm',
			allowBlank: false,
			blankText: 'The password cannot be left blank',
			vtype: 'password',
			msgTarget: 'qtip',
			initialPassField: 'pass',
            inputType: 'password'
        });
		
		var frmContactInfo = new Ext.ux.clv2.SignUpFormDemo({
			defaults: {
				width: 210,
				msgTarget: 'qtip'
			},
			items: [this.fieldEmail, this.fieldPassword, this.fieldPasswordValidation]
		});
		
		var demo4HeaderLeft = new Ext.Panel({			
            autoLoad:{url: 'demoSection.spr', params: {section:"demoStep4HeaderLeft"}},
            bodyStyle:'background: #f2f9fc; border:1px solid #b4bab5; border-top:0px none; border-left:0px none; border-right:0px none;',
			cls: 'ds4-hl',
			border: false,
			header: false
		});
		
		var demo4FormFooter = new Ext.Panel({			
			bodyStyle: 'margin:20px 0 0 0px;',
			cls: 'ds4-form-footer',
			border: false,
			header: false,
			listeners: {
				render: function(panel){
					panel.afterRenderPanel();
				}
			},
			parent: this,
			afterRenderPanel: function(){
				var mgrFormFooter = this.getUpdater();
				mgrFormFooter.on("update", this.parent.afterUpdateFormFooter, this.parent);
				mgrFormFooter.update({
                    url: 'demoSection.spr',
                    params: {section:"demoStep4FormFooter"}
				});
			}
		});
		
		this.demo4BodyLeft = new Ext.Panel({
            id:'demo4BodyLeft',
            bodyStyle: 'background: #ffffff; '+
						'border: 1px solid #bbbdbb;'+
						'margin: 15px 0px 15px 15px; '+
						'padding-top: 10px;',
			header: false,
			height: 521,
			items: [frmBasicInfo, this.frmDateOfBirth, formGenderDemo4, frmContactInfo, demo4FormFooter]
		});
		
		var demo4HeaderRight = new Ext.Panel({
			autoLoad:{url: 'demoSection.spr', params: {section:"demoStep4HeaderRight"}},
            bodyStyle:'background: #f2f9fc; border-bottom:1px solid #b4bab5;',
			cls: 'ds4-hr',
			border: false,
			header: false
		});
		
		var demo4BodyRight = new Ext.Panel({
			bodyStyle: 'background: #fdffd6; '+
						'border: 1px solid #f4d22c;'+
						'margin: 15px 10px 15px 15px; '+
						'padding: 15px 10px 0px 10px;',
			header: false,
			height: 521,
			listeners: {
				render: function(panel){
					panel.afterRenderPanel();
				}
			},
			parent: this,
			afterRenderPanel: function(){
				var mgrRightPanel = this.getUpdater();
				mgrRightPanel.on("update", this.parent.afterUpdateRightPanel, this.parent);
				mgrRightPanel.update({					
                    url: 'demoSection.spr',
					params: {section:"demoStep4RightPanel"}
				});
			}
		});
		
		this.add(demo4HeaderLeft, {
			layout: 'column',
			bodyStyle: ds4BodyStyle,
			items: [{
				bodyStyle: ds4BodyStyle,
				//columnWidth: .57,
				width: 514,
				items:[/*demo4HeaderLeft, */this.demo4BodyLeft]
			},{
				bodyStyle: ds4BodyStyle,
				//columnWidth: .43,
				width: 458,
				items:[/*demo4HeaderRight, */demo4BodyRight] 
			}]
		});
		return;
	}
});

Ext.ux.clv2.DemoTopToolbar = function(config) {
	Ext.ux.clv2.DemoTopToolbar.superclass.constructor.call(this, config);
};
(function(){var DMTTB = Ext.ux.clv2.DemoTopToolbar;
Ext.extend(DMTTB, Ext.Toolbar, {
	cls: 'my-lib-toolbar demo-top-toolbar',
	titleLabel: 'Title',
	titleSeparator: ':',
	titleText: 'Learning Object Title',
	modeSelectedName: 'view', // view or edit
	modeSelectedIndex: 0, // 0=view, 1=edit
	height: 27,
	listeners: {
		render: function(toolbar){
			toolbar.afterRenderToolbar();
		}
	},
	afterRenderToolbar: function(){
		this.editAndViewBtn = new Ext.Toolbar.Button({
			ctCls: 'edit-preview-btn',
			viewOverCls: 'bview-over',
			cardItemName: this.modeSelectedName,
			cardItemIndex: this.modeSelectedIndex,
			enableToggle: true,
			viewBtnOut: function(){this.removeClass(this.viewOverCls);}, // remove css for the view mode
			viewBtnOver: function(){this.addClass(this.viewOverCls);}, // add css for the view mode
			tooltip: (this.modeSelectedName=='view' ? 'Switch to Edit mode' : 'Switch to View mode'),
			toggleToViewMode: function(){ // remove button listeners
				this.un('mouseover', this.viewBtnOver, this);
				this.un('mouseout', this.viewBtnOut, this);
				this.toolbar.modeSelectedName = this.cardItemName = 'view';
				this.toolbar.modeSelectedIndex = this.cardItemIndex = 0;
				//this.toolbar.parent.bvtbLeft.saveBtn.setDisabled(true);
				this.viewBtnOut();
				this.setTooltip('Switch to Edit mode');
			},
			toggleToEditMode: function(){ // add button listeners to change css on mouseover (only view mode)
				this.on('mouseover', this.viewBtnOver, this);
				this.on('mouseout', this.viewBtnOut, this);
				this.toolbar.modeSelectedName = this.cardItemName = 'edit';
				this.toolbar.modeSelectedIndex = this.cardItemIndex = 1;
				//this.toolbar.parent.bvtbLeft.saveBtn.setDisabled(false);
				this.setTooltip('Switch to Preview mode');
			},
			pressed: (this.modeSelectedName=='view' ? false : true),
			minWidth: 67,
			toolbar: this,
			scope: this
		});
		this.editAndViewBtn.on("toggle", this.toggleMode, this);
		
		if(this.demoStepNumber !== 3) this.add(this.editAndViewBtn);
		this.addFillTitle();
		this.setTitle();
		return;
	},
	addFillTitle: function(){
		this.fillTitle = new DMTTB.FillTitle();
		return this.addItem(this.fillTitle);
	},
	getTitleLabel: function(){
		return this.titleLabel;
	},
	getTitleSeparator: function(){
		return this.titleSeparator;
	},
	getTitleText: function(){
		return this.titleText;
	},
	setTitle: function(titleText, titleLabel, titleSeparator){
		if(typeof titleText == 'string') this.titleText = titleText;
		if(typeof titleLabel == 'string') this.titleLabel = titleLabel;
		if(typeof titleSeparator == 'string') this.titleSeparator = titleSeparator;
		//DMTTB.FillTitle.prototype.setTitle(this.titleText, this.titleLabel, this.titleSeparator);
		this.fillTitle.setTitle(this.titleText, this.titleLabel, this.titleSeparator);
	},
	setEditAndViewBtnDefaults: function(){
		if(this.editAndViewBtn.pressed){
			// the next code is to set button state defaults (pressed = false);
			this.editAndViewBtn.un("toggle", this.toggleMode, this);
			this.editAndViewBtn.toggleToViewMode(); // remove button listeners
			this.editAndViewBtn.toggle();
			this.editAndViewBtn.on("toggle", this.toggleMode, this);
		}
	},
	toggleMode: function(btn, pressed){
		if(btn.pressed){
			btn.toggleToEditMode(); // add button listeners
		}else{
			btn.toggleToViewMode(); // remove button listeners
		}
		this.changeCard();
		if(this.demoStep) this.demoStep.fireEvent('afterToggleMode');
	},
	changeCard: function(){
		if (this.card) {
			this.card.activeItem = this.modeSelectedIndex;
			this.card.activeItemName = this.modeSelectedName;
			this.card.activeCardId = this.card.items[this.card.activeItem].id;
			Ext.getCmp(this.card.id).layout.setActiveItem(typeof this.card.activeCardId == 'string' ? this.card.activeCardId : this.card.activeItem);
		}
		return;
	}
});

DMTTB.Title = function(){
	this.constructor.superclass.el = document.createElement("div");	
	this.constructor.superclass.el.className = 'ttbar-title-text';
	this.constructor.superclass.el.innerHTML = 
		'<span class="ttbar-title-label">'+DMTTB.prototype.getTitleLabel()+'</span>'+
		'<span class="ttbar-title-sep">'+DMTTB.prototype.getTitleSeparator()+'</span>'+
		DMTTB.prototype.getTitleText();
	DMTTB.Title.superclass.constructor.call(this, this.constructor.superclass.el);
	var hola = 12;
};
Ext.extend(DMTTB.Title, Ext.Toolbar.Item, {
	enable:Ext.emptyFn,
	disable:Ext.emptyFn,
	focus:Ext.emptyFn
});
Ext.reg('dmttbtitle', DMTTB.Title);

DMTTB.FillTitle = Ext.extend(DMTTB.Title, {
	render : function(td){
		td.style.width = '100%';
		DMTTB.FillTitle.superclass.render.call(this, td);
	},
	setTitle: function(titleText, titleLabel, titleSeparator){		
		this.el.innerHTML = 
			'<span class="ttbar-title-label">'+titleLabel+'</span>'+
			'<span class="ttbar-title-sep">'+titleSeparator+'</span>'+
			titleText;
	}
});
Ext.reg('dmttbfilltitle', DMTTB.FillTitle);
})();


Ext.ux.clv2.DemoLeftToolbar = function(config) {
    Ext.ux.clv2.DemoLeftToolbar.superclass.constructor.call(this, config);
};
Ext.extend(Ext.ux.clv2.DemoLeftToolbar, Ext.ux.clv2.VerticalToolbar, {
	itemCombinations: 2, // (list & column) x (view & edit)
	itemSelectedName: 'cu-content',
	itemSelectedIndex: 0, // 0=content, 1=metadata, 2=standards, ...
	listeners: {
		render: function(toolbar){
			toolbar.afterRenderToolbar();
		}
	},
	afterRenderToolbar: function(){
		var btnContent = new Ext.Toolbar.Button({
			//id:'demo-content',
			text: 'Content',
			cardItemIndex: 0,
			cardItemName: 'demo-content',
			iconCls: 'icon-content',
			enableToggle: true,
			toggleHandler: this.onItemToggle,
			pressed: false,
			minWidth: 146,
			toolbar: this,
			scope: this
		});
		var btnMetadata = new Ext.Toolbar.Button({
			//id:'demo-metadata',
			text: 'Metadata',
			cardItemIndex: 1,
			cardItemName: 'demo-metadata',
			iconCls: 'icon-metadata',
			enableToggle: true,
			toggleHandler: this.onItemToggle,
			pressed: false,
			minWidth: 146,
			toolbar: this,
			scope: this
		});
		var btnStandards = new Ext.Toolbar.Button({
			//id:'demo-standards',
			text: 'Standards',
			cardItemIndex: 2,
			cardItemName: 'demo-standards',
			iconCls: 'icon-standards',
			enableToggle: true,
			toggleHandler: this.onItemToggle,
			pressed: false,
			disabled: true,
			minWidth: 146,
			toolbar: this,
			scope: this
		});
		var btnVersions = new Ext.Toolbar.Button({
			//id:'demo-versions',
			text: 'Versions',
			cardItemIndex: 3,
			cardItemName: 'demo-versions',
			iconCls: 'icon-versions',
			enableToggle: true,
			toggleHandler: this.onItemToggle,
			pressed: false,
			disabled: true,
			minWidth: 146,
			toolbar: this,
			scope: this
		});
		var btnCollaboration = new Ext.Toolbar.Button({
			//id:'demo-collaboration',
			text: 'Collaboration',
			cardItemIndex: 4,
			cardItemName: 'demo-collaboration',
			iconCls: 'icon-collaboration',
			enableToggle: true,
			toggleHandler: this.onItemToggle,
			pressed: false,
			disabled: true,
			minWidth: 146,
			toolbar: this,
			scope: this
		});
		var btnDrafts = new Ext.Toolbar.Button({
			//id:'demo-drafts',
			text: 'Drafts',
			cardItemIndex: 5,
			cardItemName: 'demo-drafts',
			iconCls: 'icon-rating',
			enableToggle: true,
			toggleHandler: this.onItemToggle,
			pressed: false,
			disabled: true,
			minWidth: 146,
			toolbar: this,
			scope: this
		});
		switch(this.btnPressedName){
			case 'content':
				btnContent.pressed = true;
				this.changeItemPressed(btnContent);
				Ext.apply(this, {'pressedBtn':btnContent});
			break;
			case 'metadata':
				btnMetadata.pressed = true;
				this.changeItemPressed(btnMetadata);
				Ext.apply(this, {'pressedBtn':btnMetadata});
			break;
		}
		this.add(btnContent,'-',btnMetadata,'-',btnStandards,'-',btnVersions,'-',btnCollaboration,'-',btnDrafts);
	},
	
	onItemToggle: function(btn, pressed){
		if(!btn.pressed){
			btn.toolbar.togglePressState(btn);
		}else{
			btn.toolbar.changeItemPressed(btn);
			btn.toolbar.changeItemPressed(btn.toolbar.pressedBtn);
			var steps = btn.cardItemIndex - btn.toolbar.pressedBtn.cardItemIndex;
			this.window.fireEvent('changeStep', steps);
		}
	}
});
Ext.reg('DemoLeftToolbar', Ext.ux.clv2.DemoLeftToolbar);