Ext.onReady(function(){
    Ext.QuickTips.init();
        
        var win = window.nativeWindow;
        
        var opener = Ext.air.NativeWindow.getRootHtmlWindow();
        var taskId = String(window.location).split('=')[1];
        var isNew = !taskId;
        var completed = false;
        
        win.title = 'Task - ' + Ext.util.Format.ellipsis(getTask().data.title, 40);
        
        var tb = new Ext.Toolbar({
                region: 'north',
                height:26,
                id:'main-tb',
                items:[{
                        id:'cpl-btn', 
                        iconCls: 'icon-mark-complete', 
                        text: 'Mark Complete',
                        handler: function(){
                                setCompleted(!completed);
                                if(completed) {
                                        setMsg('This task was completed on ' + new Date().format('l, F d, Y'));
                                }
                                if(validate()) {
                                        (function(){
                                                saveData();
                                                if (completed) {
                                                        win.close();
                                                }
                                        }).defer(250);
                                }
                        }
                },'-',
                        {iconCls: 'icon-delete-task', text: 'Delete', handler: function(){
                                Ext.Msg.confirm('Confirm Delete', 'Are you sure you want to delete this task?', function(btn){
                                        if(btn == 'yes'){
                                                opener.tx.data.tasks.remove(getTask());
                                                win.close();
                                        }
                                });
                        }}
                ]
        });
        
        var title = new Ext.form.TextField({
                fieldLabel: 'Task Subject',
        name: 'title',
        anchor: '100%'
    });
                
        var dueDate = new Ext.form.DateField({
                fieldLabel: 'Due Date',
                name: 'dueDate',
                width: 135,
                format: 'm/d/Y'
        });
        
        var list = new ListSelector({
        fieldLabel: 'Task List',
                name: 'listId',
                store: opener.tx.data.lists,
                anchor: '100%'
    });
        
        list.on('render', function(){
                this.menu.on('beforeshow', function(m){
                        list.tree.setWidth(Math.max(180, list.getSize().width));
                });
        });
        win.addEventListener('closing', function(){
                opener.tx.data.lists.unbindTree(list.tree);
        });
        
        
        var hasReminder = new Ext.form.Checkbox({
                boxLabel: 'Reminder:',
                checked: false
        });
        
        var reminder = new Ext.ux.form.DateTime({
                name: 'reminder',
                disabled: true,
                timeFormat: 'g:i A',
                dateFormat: 'm/d/Y',
                timeConfig: {
                        tpl: opener.Templates.timeField,
                        listClass:'x-combo-list-small',
                        maxHeight:100
                }
        });
        
        var description = new Ext.form.HtmlEditor({
        hideLabel: true,
        name: 'description',
        anchor: '100% -95',  // anchor width by percentage and height by raw adjustment
        onEditorEvent : function(e){
                var t;
                if(e.browserEvent.type == 'mousedown' && (t = e.getTarget('a', 3))){
                    t.target = '_blank';
                }
                this.updateToolbar();
            }
    });
        
        var form = new Ext.form.FormPanel({
                region:'center',
        baseCls: 'x-plain',
        labelWidth: 75,
        margins:'10 10 5 10',
                
                buttonAlign: 'right',
                minButtonWidth: 80,
                buttons:[{
                        text: 'OK',
                        handler: function(){
                                if(validate()) {
                                        saveData();
                                        window.nativeWindow.close();
                                }
                        }
                },{
                        text: 'Cancel',
                        handler: function(){ window.nativeWindow.close(); }
                }],
                                
                
        items: [{
                        xtype:'box',
                        autoEl: {id:'msg'}
                },
                title,{
                        layout: 'column',
                        anchor: '100%',
                        baseCls: 'x-plain',
                        items: [{
                                width: 250,
                                layout: 'form',
                                baseCls: 'x-plain',
                                items: dueDate
                        }, {
                                columnWidth: 1,
                                layout: 'form',
                                baseCls: 'x-plain',
                                labelWidth:55,
                                items: list
                        }]
                },{
                        xtype:'box',
                        autoEl: {cls:'divider'}
                },{
                        layout: 'column',
                        anchor: '100%',
                        baseCls: 'x-plain',
                        items: [{
                                width: 80,
                                layout: 'form',
                                baseCls: 'x-plain',
                                hideLabels: true,
                                items: hasReminder
                        }, {
                                columnWidth: 1,
                                layout: 'form',
                                baseCls: 'x-plain',
                                hideLabels: true,
                                items: reminder
                        }]
                }, 
                description]
    });
        
        var viewport = new Ext.Viewport({
                layout:'border',
                items:[tb, form]
        });
        
        var msg = Ext.get('msg');
        var task = getTask();
        
        if(task && task.data.completedDate){
                setMsg('This task was completed on ' + task.data.completedDate.format('l, F d, Y'));
        }       
        
        hasReminder.on('check', function(cb, checked){
                reminder.setDisabled(!checked);
                if(checked && !reminder.getValue()){
                        reminder.setValue(opener.tx.data.getDefaultReminder(getTask()));
                }
        });
        
        refreshData.defer(10);

        win.visible = true;
        win.activate();
        
        title.focus();
                
        function refreshData(){
                if(!isNew){
                        var task = getTask();
                        hasReminder.setValue(!!task.data.reminder);
                        form.getForm().loadRecord(task);
                        setCompleted(task.data.completed);
                }
        }
        
        function saveData(){
                var task;
                if(isNew){
                        task = opener.tx.data.tasks.createTask(
                                title.getValue(), 
                                list.getRawValue(), 
                                dueDate.getValue(), 
                                description.getValue(),
                                completed
                        );
                }else{
                        task = getTask();
                        task.set('completed', completed);
                }
                if(!hasReminder.getValue()){
                        reminder.setValue('');
                }
                form.getForm().updateRecord(task);
        }
        
        function setCompleted(value){
                completed = value;
                var cplBtn = Ext.getCmp('cpl-btn');
                if (completed) {
                        cplBtn.setText('Mark Active');
                        cplBtn.setIconClass('icon-mark-active');
                        hasReminder.disable();
                        reminder.disable();
                }
                else {
                        cplBtn.setText('Mark Complete');
                        cplBtn.setIconClass('icon-mark-complete');
                        setMsg(null);
                        hasReminder.enable();
                        reminder.setDisabled(!hasReminder.checked);
                }
        }
        
        function setMsg(msgText){
                var last;
                if(!msgText) {
                        msg.setDisplayed(false);
                } else {
                        msg.setDisplayed('');
                        msg.update(msgText);
                }
                description.anchorSpec.bottom = function(v){
            if(v !== last){
                last = v;
                                var h = msg.getHeight();
                return v - 95 - (h ? h + 8 : 0);
            }
        };
                form.doLayout();
        }
        
        function validate(){
                if(Ext.isEmpty(title.getValue(), false)){
                        Ext.Msg.alert('Warning', 'Unable to save changes. A subject is required.', function(){
                                title.focus();
                        });
                        return false;
                }
                return true;
        }
        
        function getTask(){
                var t = opener.tx.data.tasks.lookup(taskId);
                if(t){
                        //workaround WebKit cross-frame date issue
                        fixDateMember(t.data, 'completedDate');
                        fixDateMember(t.data, 'reminder');
                        fixDateMember(t.data, 'dueDate');
                }
                return t;
        }
        
});