Melrow.Mtw.IssueWindow = function(){

		var form = new Ext.FormPanel({
			autoHeight:true,
	        labelAlign:'top',
			border:false,	        
	        title: 'Post question',
	        bodyStyle:'padding:10px 10px 0 10px',
	        items: [{
	            fieldLabel: 'Type your question here',
	            name: 'question',
	            xtype: 'textarea',
	            allowBlank:false,
	            anchor:'100%',
	            height: '200'
		    }], 
			buttons:[{
			 	text:'Post question',
				id:'issue-update-btn',								 	
			 	formBind:true,
			 	handler: function(f, e){
					form.stopMonitoring();			 	 
					Ext.getCmp('issue-update-btn').disable();
					form.getForm().doAction('submit', {method:'POST', url:'/mtw/issues/' + this.record.get('id'), success: function(){
						this.refreshThread();				
					}, scope:this});
				}.createDelegate(this)
			}]    
		});

		form.startMonitoring();
	
		this.tpl = new Ext.XTemplate([
			'<div id="issue-thread">',
				'<tpl for="thread">',
					'<div class="issue-post {[xindex == 1 ? "first-post" : ""]} {[xindex == xcount ? "last-post" : ""]} clearfix">',
						'<div class="issue-post-body">',
								'<div class="issue-post-msg">{MSG}</div>',
								'<div class="post-info-wrap clearfix"><div class="post-info clearfix"><div class="post-info-body clearfix">',
									'<span class="user"><strong>Posted by:</strong> {parent.contact}</span>',		
									'<span class="date"><strong>Posted at:</strong> {[ Date.parseDate(values.DATETIME,"Y-m-d h:i:s").dateFormat("M d, Y / h:i") ]}</span>',
								'</div></div></div>',
						'</div>',
						'<div class="issue-post-foot"><div class="issue-post-foot-left"><div class="issue-post-foot-right"></div></div></div>',
					'</div>',
				'</tpl>',								
			'</div>'
		]);

		/*
		this.attachmentsTpl = new Ext.XTemplate([
			'<div id="issue-attachments">',
				'<tpl for="files">',
					'<table class="issue-file">',
						'<tr><th><a href="">{name}</a></th><td>{date}</td></tr>',
						'<tr><td colspan="2">{desc}</td>',
					'</table>',
				'</tpl>',
			'</div>'
		]);*/

		var grid = new Ext.grid.PropertyGrid({
		    title: 'Details',
		    id:'issue-grid',
		    border:false,
		    source: {}
		});

		grid.getSelectionModel().lock();	 
	 	grid.on('beforeedit', function(){
			return false;
		}, this);

		Melrow.Mtw.IssueWindow.superclass.constructor.call(this, {
            id: 'issue-window',
            width:650,
            height:450,
            layout:'fit',
            renderTo: document.body,
            resizable:false,
            closeAction: 'hide',
		    plain: false,
            modal:true,
            items:[{
				xtype:'tabpanel',
				deferredRender:false,				
				activeTab:0,
				border:false,
				items: [ grid, {
				 	autoScroll:true,
					title:'Attachments',
					html:''
				}, form]
			}],
            buttons: [{
                text: 'Close',
                handler: function(){
                    this.hide();
                },
				scope:this 
            }]
    	});
}

Ext.extend(Melrow.Mtw.IssueWindow, Ext.Window, {
	record: null,
	
	refreshThread : function(){
		Ext.Ajax.request({url:'/mtw/issues/' + this.record.get('id'), method:'GET', success: function(r,o){
			var issue = eval('('+r.responseText+')');
			console.log(issue);
			this.renderThread(issue.data.THREAD, issue.data.CONTACT);
			Ext.getCmp('issue-update-btn').enable();																	
		}, scope:this});
	},

	renderThread: function(thread, contact){

		var p = this.items.get(0).items.get(1);
		var c = this.tpl.apply({thread:thread, contact:contact});			
		if (p.body) p.body.dom.innerHTML = c;
		else p.html = c; 

		if (thread.length > 0){
			this.items.get(0).items.get(1).show();
			this.items.get(0).items.get(2).setTitle('Post reply');			
		} else {
			this.items.get(0).items.get(1).hide();			
			this.items.get(0).items.get(2).setTitle('Post question');
		}
		
	},

	show: function(record){
	 	this.record = record;
	 	Ext.Ajax.request({url:'/mtw/issues/' + record.get('id'), method:'GET', success: function(r,o){
			var issue = eval('('+r.responseText+')');
	        var g = this.items.first().items.first();
			g.store.sortInfo = null;
	        g.setSource({
				'Issue No.': record.get('id'),
				'Type' : issue.data.TYPE,
				'Status': record.get('status'),				
				'Created' : record.get('created').dateFormat('M d, Y / H:i'),
				'Last updated': (record.get('updated').dateFormat('Y') == '1970' ? "" : record.get('updated').dateFormat('M d, Y / H:i')),
				'Last viewed': Date.parseDate(issue.data.TSLASTVIEW,"Y-m-d h:i:s").dateFormat('M d, Y / H:i'),
				'Melrow contact': issue.data.CONTACT
			});
			this.setTitle('Issue: ' + issue.data.TITLE);
	        this.items.get(0).activate(0);
			this.renderThread(issue.data['THREAD'], issue.data.CONTACT);

			Melrow.Mtw.IssueWindow.superclass.show.call(this);
			
		}, scope:this});
	}
	
});