/**
 * This class is the main view for the application.
 *
 */
Ext.define('CutawayRenderer.view.main.Main', {
    //extend: 'Ext.container.Container',
	extend: 'Ext.panel.Panel',
    requires: [
        'CutawayRenderer.view.main.MainController',
        'CutawayRenderer.view.main.MainModel',
		'CutawayRenderer.util.DebugConsole',
		'CutawayRenderer.util.StatusConsole',
		//'CutawayRenderer.components.toolbar.StatusBar'
		'CutawayRenderer.view.scene.Scene',
		'CutawayRenderer.components.TextureView',
		'Ext.menu.CheckItem',
		'CutawayRenderer.components.form.field.ColorField',
		'CutawayRenderer.components.form.field.Float'
    ],

    xtype: 'cr.main',
    
    controller: 'main',
    viewModel: {
        type: 'main'
    },

    layout: {
        type: 'border'
    },
	
	/* 
	 * #################################
	 * ######## new properties #########
	 * #################################
	 */
	
	
	/**
	 * Instance of the Visualization view (WebGL canvas).
	 * 
	 * @type {CutawayRenderer.components.WebGLRenderer}
	 */
	visualization: null,

	initComponent: function() {
		//this.tools = this.buildTools();
		this.tbar = this.buildToolBar();
		this.items = this.buildItems();
		this.bbar = this.buildBBar();
		
		this.callParent();
	},

	/**
	 * Build the extJS component configuration array for the toolbar.
	 * 
	 * @returns {Object[]}
	 * @private
	 */
	buildToolBar: function() {
		var me = this;
		return [
			{
				xtype: 'label',
				//forId: 'myFieldId',
				text: 'Scene:',
				margin: '0 5 0 10'
			}, {
				xtype: 'combobox',
				//handler: 'onClickButton',
				//name: 'scene',
				//fieldLabel: 'Scene',
				displayField: 'name',
				//valueField: 'abbr',
				bind: {
					store: '{scenes}',
					selection: '{currentScene}'
				}
			}, /*{
				xtype: 'label',
				//forId: 'myFieldId',
				text: 'Debug:',
				margin: '0 5 0 10'
			}, {
				xtype: 'checkbox',
				//handler: 'onClickButton',
				//name: 'debug',
				//fieldLabel: 'Debug',
				bind: {
					value: '{render3d.debugVisualizing}'
				}
			},*/{
				xtype: 'label',
				//forId: 'myFieldId',
				text: 'Edit:',
				margin: '0 5 0 10'
			},{
				xtype: 'segmentedbutton',
				allowDepress: true,
				bind: '{editMode}',
				items: [{
					text: 'translate',
					value: 'translate'
				}, {
					text: 'scale',
					value: 'scale'
				}, {
					text: 'rotate',
					value: 'rotate'
				}]
			}, {
				xtype: 'button',
				text: 'Debug',
				menu: {
					xtype: 'menu',                          
					items: [{
						xtype: 'menucheckitem',
						text: 'show helper',
						bind: {
							checked: '{render3d.debugVisualizing}'
						},
						listeners: {
							checkchange: function ( item , checked , eOpts ) { me.getViewModel().set('render3d.debugVisualizing', checked);} // stupied workaround
						}
					},{
						xtype: 'menucheckitem',
						text: 'visualize FBO Textures',
						bind: {
							checked: '{render3d.visualizeFBOTextures}'
						},
						listeners: {
							checkchange: function ( item , checked , eOpts ) { me.getViewModel().set('render3d.visualizeFBOTextures', checked);} // stupied workaround
						}
					},{
						xtype: 'menucheckitem',
						text: 'perspective cutaway slope correction',
						bind: {
							checked: '{cutawayOptions.perspectiveSlopeCorrection}'
						},
						listeners: {
							checkchange: function ( item , checked , eOpts ) { me.getViewModel().set('cutawaySurface.perspectiveSlopeCorrection', checked);}
						}
					}]
				}
			}, {
				xtype: 'label',
				text: 'Cut Angle:',
				margin: '0 5 0 10'
			},{
				xtype: 'cr.floatfield',
				width: 60,
				value: 45,
				minValue: 0,
				maxValue: 90,
				step: 0.1,
				slowStep: 0.01,
				fastStep: 1.0,
				bind: '{cutawayOptions.cutawayAngle}'
			}, {
				xtype: 'label',
				//forId: 'myFieldId',
				text: 'BG:',
				margin: '0 5 0 10'
			}, {
				xtype: 'cr.colorfield',
				width: 100,
				//fieldLabel: 'Color',
				//anchor:'100%',
				bind: '{render3d.backgroundColor}'
			}
		];
	},

	/**
	 * Build the extJS component configuration array of the child view item.
	 * 
	 * @returns {Object[]}
	 * @private
	 */
	buildItems: function() {
		var me = this;
		
		var debugPanel = Ext.create('CutawayRenderer.components.panel.DebugPanel', {
			region: 'south',
			height: 200,
			split: true,
			splitterResize: true,
			collapsible: true,
			collapseMode: 'mini', // undefined, // "header" - The Panel collapses to leave its header visible as when not inside a border layout; "mini" - The Panel collapses without a visible header. 
			collapsed: true
		});
		CutawayRenderer.util.DebugConsole.setDebugPanel(debugPanel);
		
		me.visualization = Ext.create('CutawayRenderer.view.visualization.Visualization', {
			title: 'Center',
			region: 'center',
			hidden: false,
			//weight: 0.7,
			layout: {
				//type: 'border'
				type: 'fit'
			}
		});
		CutawayRenderer.util.StatusConsole.setLoadMaskComponent(me.visualization);
		
		return [
			//Ext.create('mmc.view.panel.CategoryTreePanel')
			//Ext.create('mmc.view.panel.HeaderPanel', {
			//	//layout: 'border',
			//	region: 'north',
			//	height: 40
			//}),
			//me.naviPanel,
			//me.contendContainer,
			//me.companyGrid,
			debugPanel,
			{
				xtype: 'cr.scene',
				bind: {
					title: '{name}'
				},
				region: 'west',
				width: 285,
				split: true
				//tbar: [{
				//	text: 'Button',
				//	handler: 'onClickButton'
				//}]
			}/*,{
				region: 'center',
				xtype: 'tabpanel',
				items:[{
					title: 'Tab 1',
					html: '<h2>Content appropriate for the current navigation.</h2>'
				}]
			}*/
			, me.visualization
			, me.buildCutawayOptionsForm()
			/*, {
				region: 'east',
				split: true,
				xtype: 'cr.Textureview',
				reference: 'cutawaySurfaceView'
				
			}*/
		];
	},
	
	/**
	 * Build the extJS component configuration array of the cutaway options form on the right side. (part of the child view item)
	 * 
	 * @returns {Object[]}
	 * @private
	 */
	buildCutawayOptionsForm: function () {
		return {
			xtype: 'form',
			title: 'CutawayOptions',
			region: 'east',
			width: 250,
			
			
			split: true,
			splitterResize: true,
			collapsible: true,
			animCollapse: false,
			//collapseMode: 'header', // 'mini', // undefined, // "header" - The Panel collapses to leave its header visible as when not inside a border layout; "mini" - The Panel collapses without a visible header. 
			//collapseFirst: true,
			collapsed: true,
			
			scrollable: true,
			bodyStyle: 'padding: 10px;',
			fieldDefaults: {
				//labelAlign: 'left',
				labelWidth: 120
			},
			items: [{
					xtype: 'checkbox',
					anchor:'100%',
					fieldLabel: 'perspective slope correction',
					bind: '{cutawayOptions.perspectiveSlopeCorrection}'
				},{
					xtype: 'cr.floatfield',
					fieldLabel: 'Cut Angle',
					anchor:'100%',
					minValue: 0,
					maxValue: 90,
					step: 0.1,
					slowStep: 0.01,
					fastStep: 1.0,
					bind: '{cutawayOptions.cutawayAngle}'
				},{
					xtype: 'checkbox',
					anchor:'100%',
					fieldLabel: 'Render CutRidge',
					bind: '{cutawayOptions.renderCutRidge}'
				},{
					xtype: 'checkbox',
					anchor:'100%',
					fieldLabel: 'Use CutRidge Color',
					bind: {
						disabled: '{!cutawayOptions.renderCutRidge}',
						value: '{cutawayOptions.useCutRidgeColor}'
					}
				}, {
					xtype: 'cr.colorfield',
					fieldLabel: 'CutRidge Color',
					anchor:'100%',
					bind: {
						disabled: '{disabledCutRidgeColor}',
						value: '{cutawayOptions.cutRidgeColor}'
					}
				}]
		};
	},
	
	/**
	 * Build the extJS component configuration array for the Bottom Bar (CutawayRenderer.components.toolbar.StatusBar).
	 * @returns {Object[]}
	 * @private
	 */
	buildBBar: function() {
		var me = this;
		
		var statusBar = Ext.create('CutawayRenderer.components.toolbar.StatusBar', {
		});
		CutawayRenderer.util.StatusConsole.setStatusBar(statusBar);
		
		return statusBar;
	}
});