Melrow.Mtw.CreateIssueWindow = function(){

	this.addEvents({create:true});

	Melrow.Mtw.CreateIssueWindow.superclass.constructor.call(this, {
        layout:'fit',
        width:650,
        renderTo: document.body,
        height:400,
        title:'Create a new issue',
        resizable:false,
        bodyStyle:'background-color:#fff',
        closeAction:'hide',
	    buttonAlign:'center',
        modal:true,
        items: {
         	xtype:'form',
	     	border: false,
	        bodyStyle:'padding:10px',	     	
	        labelAlign:'top',
			autoHeight:true,
	     	items: [{
					layout:'column',
					border:false,
					bodyStyle:'margin-bottom:10px',
		            items:[{
						autoHeight:true,
				        defaultType:'textfield',
				    	columnWidth:.5,
				    	layout:'form',
						border:false,				    	
				    	items: [{
			         		fieldLabel: 'Issue title',
				         	name: 'title',
				         	allowBlank:false,
							anchor:'95%'				         	
			        	},{
				         	fieldLabel: 'Issue type',
							store : new Ext.data.JsonStore({
							  data : {types:[]},
							  root: 'types',
							  fields: ['val', 'text']
							}),
							mode:'local',
						    displayField: 'text',
						    hiddenName: 'type',
						    valueField:'val',						    
						    name: 'type_combo',
						    xtype:'combo',
						    emptyText: 'Select a type ...',
						    allowBlank: false,
						    readOnly: true,
						    triggerAction: 'all',
						    selectOnFocus:true,
							anchor:'95%'				         										         	
						}]
					},{
					 	columnWidth:.5,
					 	layout:'form',
				        labelAlign:'top',
						border:false,				        
						autoHeight:true,
				        defaultType:'textfield',
					 	
						items: [{
				         	fieldLabel: 'Melrow contact',
							store : new Ext.data.JsonStore({
							  data : {contacts:[]},
							  root: 'contacts',
							  fields: ['val', 'text']
							}),
							mode:'local',
						    displayField: 'text',
						    valueField:'val',
						    hiddenName: 'contact',
						    name: 'contact_combo',
						    xtype:'combo',
						    emptyText: 'Select a contact ...',
						    allowBlank: false,
						    listeners: {
						     	select: function(field, record, index){
						     	 	if (record.get('val') == -1){
										this.showField('name');
										this.showField('email');
									} else {
										this.hideField('name');
										this.hideField('email');
									}
								},
								scope:this
							},
						    readOnly: true,
						    triggerAction: 'all',
						    selectOnFocus:true,
							anchor:'100%'				         										         	
						},{
							fieldLabel: 'Name',
				         	name: 'name',
							allowBlank:false,			         	
							disabled: true,
							hideLabel:true,
							hidden:true, 						
							anchor:'100%'				         								
						}, {
							fieldLabel: 'Email',
							name: 'email',
							disabled:true,
							hideLabel:true,
							hidden:true,						
							allowBlank:false,
							vtype:'email',
							anchor:'100%'				         								
						}] 
					}]
				},{
		            fieldLabel: 'Type your question here',
		            name: 'question',
		            anchor:'100%',
		            allowBlank:false,
		            height:140,
		            xtype: 'textarea'
			}]					
		},
        buttons: [{
			text: 'Post issue',
			id:'issue-create-btn',
			handler: function(){
				var cmps = this.find('xtype', 'form');
				var form = cmps[0].getForm();
				if (form.isValid()){
				 	Ext.getCmp('issue-create-btn').disable();
					form.doAction('submit', {method:'POST', url:'/mtw/issues/0', success: function(){
						this.hide();
						form.reset();
					 	Ext.getCmp('issue-create-btn').enable();						
						this.fireEvent('create', this);
					}, scope:this});
				} else {
					Ext.MessageBox.alert('Create new issue', 'Please correct the fields marked in red.');
				}
			}, 
			scope:this
		},{
            text: 'Cancel',
            handler: function(){
                this.hide();
            },
			scope:this 
        }]
	});

}

Ext.extend(Melrow.Mtw.CreateIssueWindow, Ext.Window, {
	loaded : false,

	hideField: function(name){
		var cmps = this.find('xtype', 'form');
		var form = cmps[0].getForm();
		var field = form.findField(name);
		field.disable();
		field.hide();
		field.getEl().up('.x-form-item').addClass('x-hide-label');
	},
	
	showField : function(name){
		var cmps = this.find('xtype', 'form');
		var form = cmps[0].getForm();
		var field = form.findField(name);
		field.enable();
		field.show();
		field.getEl().up('.x-form-item').removeClass('x-hide-label');
	},
	
	show : function(){
	 	if (!this.loaded){
		 	Ext.Ajax.request({url:'/mtw/issues/0', method:'GET', success: function(r,o){
				this.loaded = true;
				var data = eval('('+r.responseText+')');
				var cmps = this.find('xtype', 'form');
				var form = cmps[0].getForm();
				form.findField('type').store.loadData(data);
				form.findField('contact').store.loadData(data);
				Melrow.Mtw.CreateIssueWindow.superclass.show.call(this);
			}, scope:this});
		} else {
			Melrow.Mtw.CreateIssueWindow.superclass.show.call(this);
		}		
	}
	
});