Ext.namespace('TJ.Admin.LM');




TJ.Admin.LM.BaseComponent = Ext.extend(Ext.Panel,{
	stateful: false,
	serverType: 'null',
	configFields: {},
	values: {},
	items: null,
	status: 'live',
	cls: 'pm-dragsource pm-dropsource',
	proxySelector: 'div.x-panel-header',
	// these parameters for all subclasses.
	stackMode: 'vertical',
	childrenList: ['tjadmin_pm_cell','tjadmin_pm_box','tjadmin_pm_row','tjadmin_pm_tabset'],		// these are the default items.
	siblingList: ['tjadmin_pm_cell','tjadmin_pm_box','tjadmin_pm_row','tjadmin_pm_tabset'],
	maxChildren: 40,		
	index: 0,
	tools:  [    { id: 'gear',
				   qtip: 'Change publishing status',
				   handler: function(e, target,panel) {
						if(panel.status=='preview') {
							panel.status='disabled';
						} else 
						if(panel.status=='disabled') {
							panel.status='live';
						} else {
							panel.status='preview';
						}
//						panel.
//						console.log('new status' ,panel.status);
						panel.setStatusText();
						panel.getEl().highlight();
//						console.log('after' ,panel.status);
						

					}
				},

				{	id:'close',
				    qtip: 'Hold down CTRL and SHIFT to delete',
					handler: function(e, target, panel){
						var owner=panel.ownerCt;
						if(e.ctrlKey && e.shiftKey) {
							panel.getEl().fadeOut({ duration: 0.2,
								callback: function() {
									owner.remove(panel,true);
							}});


						} else {
							Ext.Msg.show({
							   title:'Cell delete',
							   width: 400,
							   msg: 'Please hold down the Ctrl and Shift keys to delete a cell.',
							   buttons: Ext.Msg.OK,
							   icon: Ext.MessageBox.INFO
							});

						}
					}
				}

			],
	getIndex: function(){
		this.index++;
		return this.index;
	},
	setupItems: function(){
		// this ensures that xtypes are set for the items.  
		// After Sep 2009, this isn't required except for existing layouts

		if(this.items && this.items.length){
			for(var x=0; x < this.items.length; x++){
				this.items[x].xtype=TJ.Admin.LM.setXtype(this.items[x]);
			}
		}
	},
	initComponent: function(){
		this.values=TJ.clone(this.values);
		// set the appropriate xtypes for these guys.

		this.setupItems();

		TJ.Admin.LM.BaseComponent.superclass.initComponent.call(this);

	},
	render: function(ct,pos){
		TJ.Admin.LM.BaseComponent.superclass.render.call(this,ct,pos);
		this.getEl().on('click',this.onClick,this);
		title=this.getEl().child('.x-panel-header-text');
		this.statusText = Ext.DomHelper.insertAfter(title,{ tag:'span', html:''},true);
		if(title)
			title.setStyle({'font-weight': 'normal'});
		if(this.isReadOnly()) {
			this.removeClass('pm-dragsource');
			this.removeClass('pm-dropsource');
		}
		this.setStatusText();
	},
	onClick: function(e){
		e.stopEvent();
		var container=this.findParentByType(TJ.Admin.LM.Designer);
		if(container){
			container.activateItem(this);
		}

	},
	isReadOnly: function(){
		var container = this.findParentByType(TJ.Admin.LM.Container);
		if(container){
			return container.readOnly;
		}
		return false;
	},
	setStatusText: function() {
		if(this.statusText) {
			if(this.status=='preview'){
				this.statusText.update('&nbsp;[Preview]');
			} else
			if(this.status=='disabled'){
				this.statusText.update('&nbsp;[Disabled]');
			} else
				this.statusText.update('');
		}


	},

	setConfigValue: function(record,value){
		if(record=='_name'){
			this.setTitle(value);
			return;
		}
		if(Ext.isArray(this.values))
			this.values={};

		this.values[record]=value;
	},

	getServerConfig: function(){
		var ret=this.getBaseServerConfig();
		if(this.items && this.items.length) {
			ret.items = [];
			this.items.each( function(sub) {
				ret.items.push(sub.getServerConfig());
			});
		}
//		console.log('getServerConfig',this.xtype,this.title,ret);
		return ret;
	},
	getBaseServerConfig:  function(){
		return ({	values: this.values,
					title: this.title,
					status: this.status,
					serverType: this.serverType,
					xtype: this.getXType()
						});

	},
		// DD evernts
	ddPaint:  function() {
		this.ddPaintClear();
		if(this.dropIndex==-1) {
			this.ddPaintInsert();
		} else
		if(this.dropIndex==this.targetIndex) {
			this.ddPaintBefore();
		} else
		this.ddPaintAfter();


	},
	ddPaintInsert: function() {
		this.body.addClass('panel-insert-below');

	},
	ddPaintBefore: function(){
		this.el.addClass('panel-insert-above');

	},
	ddPaintAfter: function() {
		this.el.addClass('panel-insert-below');

	},
	ddPaintClear: function(){
		this.body.removeClass('panel-insert-below');
		this.el.removeClass(['panel-insert-above','panel-insert-below']);
	},
	ddCanDrop: function(e,data,paint) {
		var ret=false;
		this.targetIndex=this.ownerCt.items.indexOf(this);
//		console.log('component can drop?',this.xtype, data.sourceCmp.xtype,e,data);
		
//		console.log(this.childrenList,this.siblingList);
		var allowInsert  = this.childrenList.indexOf(data.sourceCmp.xtype)>-1;
		var allowSibling = this.siblingList.indexOf(data.sourceCmp.xtype)>-1;
//		console.log('allow insert,sibling',allowInsert,allowSibling);



		if(allowSibling){
			ret= this.setDropIndex(e,allowInsert);
			//  restrict this move if:
			//  1.  copying an item when the two
			if(this.ownerCt.items.items.length >= this.ownerCt.maxChildren) {		// we may be over
				if(data.sourceCmp.ownerCt != this.ownerCt)		// different owners.  We will be over.
					ret=false;
				// now it's the same owners
				if(data.copy)
					ret=false;


			}

//			console.log('check drop index',allowInsert,ret,this.dropIndex,this.targetIndex);
			
		} else
		if(allowInsert) {
			// only insert
			if(this.items.length < this.maxChildren) {			// check quantity.
				this.dropIndex=-1;
				ret=true;
//				console.log('insert allowed!!!!',this.dropIndex,this.targetIndex);
			} 
		}
		if(paint) {
			if(ret)
				this.ddPaint();
			else
				this.ddPaintClear();
		}
		return ret;

	},
	setDropIndex: function(e,insert) {

//		console.log('ti',this.targetIndex);
		if(this.stackMode=='vertical') {
			if(e.getPageY() < this.el.getY() + 15) {
				this.dropIndex=this.targetIndex;
				return true;
			} 
			if(e.getPageY() > this.el.getY() + this.el.getHeight() - 15){
				this.dropIndex=this.targetIndex+1;
				return true;
			}
			if(insert) {
				this.dropIndex=-1;
				return true;
			}
			return false;
		} else {
			if(e.getPageX() < this.el.getX() + 20) {
				this.dropIndex=this.targetIndex;
				return true;
			} 
			if(e.getPageX() > this.el.getX() + this.el.getWidth() - 20){
				this.dropIndex=this.targetIndex+1;
				return true;
			}
			return false;
		}

		


	}



});

TJ.Admin.LM.Container = Ext.extend(TJ.Admin.LM.BaseComponent,{
	mode: 'content',
	iconCls: 'icon_layout_content',
	tools: null,
	cls: 'pm-dropsource',
	border: false,
	autoScroll: true,
	readOnly: false,
	render: function(ct,p){
		TJ.Admin.LM.Container.superclass.render.call(this,ct,p);
		if(!this.readOnly)
			TJ.Admin.LM.initDropZone(this);
	},
	isReadOnly: function(){
		return this.readOnly;
	},
	initComponent: function(){

		if(this.mode=='page'){
			this.title='Page Layout';
			this.serverType='cl_pm_pagelayout';
			this.values = {	position: 'center',
							width: 800};
		} else
		if(this.mode=='set'){
			this.title='Layout Set';
			this.serverType='cl_pm_setlayout';
			this.values={};
		}
		else
		{
			this.title='Content Layout';
			this.serverType='cl_pm_contentlayout';
			this.values={pagelayout: 0};
		}

		if(this.isReadOnly())
			this.title= this.title + ' [readonly]';
//console.log(this.serverType);
		TJ.Admin.LM.Container.superclass.initComponent.call(this);

		this.on('add',this.doLayout);
		this.on('remove',this.doLayout);
		this.on('bodyresize',this.doLayout);

	},
	setValue: function(value){

		if(this.rendered)	{
			TJ.Admin.ClearPanel(this);

		}
		this.values = value.values || this.values;

		this.setTitle(value.title + (this.isReadOnly() ? ' [readonly]':''));
		
		// this ensures that xtypes are set for the items.  
		// After Sep 2009, this isn't required except for existing layouts



		if(value && value.items){
			for(var i=0; i<value.items.length;i++){
				value.items[i].xtype=TJ.Admin.LM.setXtype(value.items[i]);
				this.add(value.items[i]);
			}
			this.doLayout();
		}
//		console.log('setval',this.getServerConfig());
	},
	ddPaintClear: function(){
		if(this.items && this.items.length)
			this.items.last().getEl().removeClass('panel-insert-below');
		this.body.removeClass('panel-insert-above');
	},
	ddPaintInsert: function(){
		this.ddPaintClear();
			if(this.items && this.items.length) {
				this.items.last().getEl().addClass('panel-insert-below');
			} else {
				this.body.addClass('panel-insert-above');
			}
	},
// defaults	childrenList: ['tjadmin_pm_cell','tjadmin_pm_box','tjadmin_pm_row','tjadmin_pm_tabset'],		
	siblingList: []


});



TJ.Admin.LM.Cell = Ext.extend(TJ.Admin.LM.BaseComponent,{
	iconCls: 'icon_page_white',
	style:  'padding: 5px;',
	title:'New Cell',
	initComponent: function(){

		if(this.serverType=='cl_pm_content')
			this.iconCls='icon_page';
		else if (this.serverType=='cl_pm_set')
		{
			this.iconCls='icon_application_lightning';
		}
		TJ.Admin.LM.Cell.superclass.initComponent.call(this);
	},
	childrenList:[]
// default	siblingList: ['tjadmin_pm_cell','tjadmin_pm_box','tjadmin_pm_row','tjadmin_pm_tabset'],

});


TJ.Admin.LM.Column = Ext.extend(TJ.Admin.LM.BaseComponent,{
	style:  'padding: 5px;',
	iconCls: 'icon_application_tile_horizontal',
	title: 'New Column',
	ddPaintClear: function(){
		this.el.removeClass(['panel-insert-left','panel-insert-right']);
		TJ.Admin.LM.Column.superclass.ddPaintClear.call(this);
	},
	ddPaintBefore:function() {
			this.el.addClass('panel-insert-left');
	},
	ddPaintAfter:function() {
			this.el.addClass('panel-insert-right');
	},
//default	childrenList: ['tjadmin_pm_cell','tjadmin_pm_box','tjadmin_pm_row','tjadmin_pm_tabset'],

	stackMode: 'horizontal',
	siblingList: ['tjadmin_pm_column']

});

TJ.Admin.LM.Box = Ext.extend(TJ.Admin.LM.BaseComponent,{
	style:  'padding: 5px;',
	iconCls: 'icon_application_view_tile',
	title: 'New Box'
// default 	childrenList:['tjadmin_pm_cell','tjadmin_pm_box','tjadmin_pm_row','tjadmin_pm_tabset'],
// default	siblingList: ['tjadmin_pm_cell','tjadmin_pm_box','tjadmin_pm_row','tjadmin_pm_tabset'],
// default 	maxChildren: 40

});


TJ.Admin.LM.Row = Ext.extend(TJ.Admin.LM.BaseComponent,{
	layout: 'column',
	style:  'padding: 5px;',
	iconCls: 'icon_application_tile_vertical',
	title: 'New Row',
	maxCols:4,
	initComponent: function(){
		TJ.Admin.LM.Row.superclass.initComponent.call(this);
		this.on('remove',this.doLayout,this);
		this.on('resize',this.doLayout,this);
		this.on('bodyresize',this.doLayout,this);
	},

	doLayout: function(){
		if(this.items)
			this.items.each(function(col) { col.columnWidth= (0.995/this.items.length);},this);
		TJ.Admin.LM.Row.superclass.doLayout.call(this);
	},
	ddPaintClear: function(){
		this.body.removeClass(['panel-insert-right','panel-insert-below']);
		TJ.Admin.LM.Row.superclass.ddPaintClear.call(this);

	},
	ddPaintInsert: function(){
		if(this.items.length) {
			this.body.addClass('panel-insert-right');
		} else {
			this.body.addClass('panel-insert-below');
		}
	},
	childrenList: ['tjadmin_pm_column'],		
// default	siblingList: ['tjadmin_pm_cell','tjadmin_pm_box','tjadmin_pm_row','tjadmin_pm_tabset'],
	maxChildren: 4		

});

TJ.Admin.LM.Tabset = Ext.extend(TJ.Admin.LM.BaseComponent,{
	layout: 'column',
	style:  'padding: 5px;',
	iconCls: 'icon_tab_go',
	title: 'New Tab Set',
	maxTabs:10,
	initComponent: function(){
		TJ.Admin.LM.Tabset.superclass.initComponent.call(this);
		this.on('remove',this.doLayout,this);
		this.on('resize',this.doLayout,this);
		this.on('bodyresize',this.doLayout,this);
	},

	canAddTab: function(){
		return this.items.length < this.maxTabs;
	},
	doLayout: function(){
		if(this.items)
			this.items.each(function(col) { col.columnWidth= (0.995/this.items.length);},this);
		TJ.Admin.LM.Tabset.superclass.doLayout.call(this);
	},
	ddPaintClear: function(){
		this.body.removeClass(['panel-insert-right','panel-insert-below']);
		TJ.Admin.LM.Row.superclass.ddPaintClear.call(this);

	},
	ddPaintInsert: function(){
		if(this.items.length) {
			this.body.addClass('panel-insert-right');
		} else {
			this.body.addClass('panel-insert-below');
		}
	},

	childrenList: ['tjadmin_pm_tab'],		
// default	siblingList: ['tjadmin_pm_cell','tjadmin_pm_box','tjadmin_pm_row','tjadmin_pm_tabset'],
	maxChildren: 8		

});

TJ.Admin.LM.Tab = Ext.extend(TJ.Admin.LM.BaseComponent,{
	style:  'padding: 5px;',
	iconCls: 'icon_tab',
	title: 'New Tab',
	ddPaintClear: function(){
		this.el.removeClass(['panel-insert-left','panel-insert-right']);
		TJ.Admin.LM.Column.superclass.ddPaintClear.call(this);
	},
	ddPaintBefore:function() {
			this.el.addClass('panel-insert-left');
	},
	ddPaintAfter:function() {
			this.el.addClass('panel-insert-right');
	},
//default	childrenList: ['tjadmin_pm_cell','tjadmin_pm_box','tjadmin_pm_row','tjadmin_pm_tabset'],
	stackMode: 'horizontal',
	siblingList: ['tjadmin_pm_tab']

});





Ext.reg('tjadmin_pm_main',	TJ.Admin.LM.Container);
Ext.reg('tjadmin_pm_row',	TJ.Admin.LM.Row);
Ext.reg('tjadmin_pm_column',	TJ.Admin.LM.Column);

Ext.reg('tjadmin_pm_tabset',	TJ.Admin.LM.Tabset);
Ext.reg('tjadmin_pm_tab',	TJ.Admin.LM.Tab);

Ext.reg('tjadmin_pm_box',	TJ.Admin.LM.Box);
Ext.reg('tjadmin_pm_cell',	TJ.Admin.LM.Cell);