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




TJ.Admin.LM.BaseComponent = Ext.extend(Ext.Panel,{
	stateful: false,
	serverType: 'null',
	configFields: {},
	values: {},
	items: null,
	cls: 'pm-dragsource pm-dropsource',
	proxySelector: 'div.x-panel-header',
	index: 0,
	tools:  [
				{	id:'close',
					handler: function(e, target, panel){
						var owner=panel.ownerCt;
						panel.getEl().fadeOut({ duration: 0.2,
							callback: function() {
								owner.remove(panel,true);
						}});
						}
				}

			],
	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');
		if(title)
			title.setStyle({'font-weight': 'normal'});
	},
	onClick: function(e){
		e.stopEvent();
		var container=this.findParentByType(TJ.Admin.LM.Designer);
		if(container){
			container.activateItem(this);
		}

	},
	setConfigValue: function(record,value){
		if(record=='_name'){
			this.setTitle(value);
			return;
		}
		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,
					serverType: this.serverType
					,xtype: this.getXType()
						});

	}

});






TJ.Admin.LM.Container = Ext.extend(TJ.Admin.LM.BaseComponent,{
	mode: 'content',
	iconCls: 'icon_layout_content',
	tools: null,
	cls: 'pm-dropsource',
	autoScroll: true,
	render: function(ct,p){
		TJ.Admin.LM.Container.superclass.render.call(this,ct,p);
		TJ.Admin.LM.initDropZone(this);
	},
	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={};
		}
//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 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());
	}
});



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);

	}
});


TJ.Admin.LM.Column = Ext.extend(TJ.Admin.LM.BaseComponent,{
	style:  'padding: 5px;',
	iconCls: 'icon_application_tile_horizontal',
	title: 'New Column'
});

TJ.Admin.LM.Box = Ext.extend(TJ.Admin.LM.BaseComponent,{
	style:  'padding: 5px;',
	iconCls: 'icon_application_view_tile',
	title: 'New Box'
});


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);
	},

	canAddColumn: function(){
		return this.items.length < this.maxCols;
	},
	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);
	}
});


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_box',TJ.Admin.LM.Box);
Ext.reg('tjadmin_pm_cell',	TJ.Admin.LM.Cell);