/// <reference path="Ext.Dummy.js" />
/// <reference path="globalvardef.js" />
/// <reference path="common.js" />

var logon = new Ext.Window();
var forgotPw = new Ext.Window();
var forgotPwform = null;
var logonForm = null;
function showForgotPw(){
    logon.hide();
    logonForm.getForm().reset();
    forgotPw.show();
}
Ext.onReady(function() {

    var xd = Ext.data;

    var DCServiceStatusNotificationsReader = new Ext.data.JsonReader({
        root: 'DCServiceStatusNotifications',
        totalProperty: 'totalCount',
        fields: [
           { name: 'id', type: 'int' },
           { name: 'eventDisplayStartDateTime', type: 'date', dateFormat: 'Y.m.d H:i:s' },
           { name: 'eventDisplayStartDate', type: 'date', dateFormat: 'Y.m.d' },
           { name: 'eventDisplayStartTime', type: 'date', dateFormat: 'H:i:s' },
           { name: 'eventDisplayEndDateTime', type: 'date', dateFormat: 'Y.m.d H:i:s' },
           { name: 'eventDisplayEndDate', type: 'date', dateFormat: 'Y.m.d' },
           { name: 'eventDisplayEndTime', type: 'date', dateFormat: 'H:i:s' },
           { name: 'eventTitle', type: 'string' },
           { name: 'eventNotesExternal', type: 'string' },
           { name: 'eventNotesInternal', type: 'string' },
           { name: 'displayOnWeb', type: 'bool' },
           { name: 'appliesToCWCustomers', type: 'bool' },
           { name: 'appliesToTSCustomers', type: 'bool' }
        ]
    });
    var store = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: '/data.aspx?action=dcservicestatusnotifications'
        }),
        reader: DCServiceStatusNotificationsReader,
        listeners: {
            loadexception: function(proxy, options, response, ex) {
                Ext.MessageBox.show({
                    icon: Ext.MessageBox.ERROR,
                    msg: String.format(
                        'Error loading {0} store: {1}', 
                        'DCServiceStatusNotifications', 
                        ex
                    )
                });
            }
        }
    });
    
    store.load({
        callback: function() {
            if (store.getCount() == 0) {
                store.insert(
                    0,
                    new Ext.data.Record({
                        id: -1,
                        eventTitle: 'Services Operating Normally',
                        eventNotesExternal: 'All Trans-Soft Hosted Services are currently operating normally. ',
                        eventDisplayStartDateTime: new Date()
                    })
                );
            }
        } 
    });

    var tpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div id="servicestatus_{id}" style="padding: 5px;background-color: #FFFFFF;border-bottom: solid 1px #CCCCCC;">',
                '<div class="hd-status-title">{eventTitle}</div>',
                '<div class="hd-status-date">Posted on {statusDate}</div>',
                '<div class="hd-status-body">{eventNotesExternal}</div>',
            '</div>',
        '</tpl>',
        '<div class="x-clear"></div>'
        //,'<hr style="height:1px;border: solid 1px #FF0000;" />'
        );




    function invalidDiv(fieldLabel) {
        return String.format('<div class="x-form-invalid-msg" style="width: 200px; display: block;">Please enter a {0}</div>',
        fieldLabel);
    }
    function addHeight(form, fieldName) {
        return (form.findField(fieldName).getValue() == '') ? 20 : 0;
    }
    Ext.QuickTips.init();
    logonForm = new Ext.FormPanel({
        region: 'center',
        labelWidth: 100,
        url: String.format(
            'http://{0}/{1}',
            HelpDeskApp.BaseUrl,
            HelpDeskApp.LogonProcessingUrl
        ),
        frame: true,
        bodyStyle: 'padding:5px',
        width: 400,
        defaults: { width: 375 },
        defaultType: 'textfield',
        border: false,
        labelAlign: 'top',
        baseParams: {
            redirectUrl: HelpDeskApp.RedirectUrl
        },
        items: [
            {
                fieldLabel: 'User Name',
                name: 'userName',
                allowBlank: false,
                blankText: 'Please enter a User Name',
                msgTarget: 'under',
                validateOnBlur: false,
                validationEvent: false
            },{
                fieldLabel: 'Password',
                name: 'password',
                inputType: 'password',
                allowBlank: false,
                blankText: 'Please enter a Password',
                msgTarget: 'under',
                listeners: {
                    specialkey: function(field, e) {
                        if (e.getKey() == 13) {
                            logonForm.getForm().submit();
                        }
                    }
                },
                validateOnBlur: false,
                validationEvent: false
            }
        ],
        buttons: [
            {
                text: 'Logon',
                handler: function() {
                    logonForm.getForm().submit();
                }
            }
        ],
        listeners: {
            actionfailed: function(form, action) {
                switch (action.type) {
                    case "submit":
                        if (action.result != null) {
                            Ext.MessageBox.show({
                                title: 'Login Failed',
                                msg: action.result.errors.userName,
                                buttons: Ext.MessageBox.OK,
                                icon: Ext.MessageBox.ERROR,
                                height: 60,
                                minWidth: 300
                            });
                        } else {
                            var validationMsg = '<div style="padding-left: 50px;">' +
                                ((form.findField('userName').getValue() == '') ? invalidDiv('UserName') : '')
                                +
                                ((form.findField('password').getValue() == '') ? invalidDiv('Password') : '') + '</div>';
                            Ext.MessageBox.show({
                                title: 'Login&nbsp;Failed',
                                msg: validationMsg,
                                buttons: Ext.MessageBox.OK,
                                icon: Ext.MessageBox.ERROR,
                                height: 60,
                                minWidth: 300
                            });
                        }
                        break;
                }
            },
            actioncomplete: function(form, action) {
                switch (action.type) {
                    case "submit":
                        if (action.result.success) {
                            if (HelpDeskApp.RedirectOnLogonSuccess) {
                                document.location = action.result.redirect;
                            } else {
                                if (HelpDeskApp.OnLogonSuccess != null) {
                                    HelpDeskApp.OnLogonSuccess();
                                }
                            }
                        }
                        break;
                }
            }
        }
    }); // end of logonForm

    logon = new Ext.Window({
        title: 'Trans-Soft HelpDesk Login',
        layout: 'table',
        layoutConfig: {
            columns: 1
        },
        width: 712,
        closeAction: 'hide',
        plain: true,
        modal: true,
        closable: false,
        draggable: false,
        resizable: false,
        border: false,
        items: [
            new Ext.Panel({
                layout: 'table',
                layoutConfig: {
                    columns: 2
                },
                items: [
                    {
                        columnWidth: .66,
                        layout: 'table',
                        layoutConfig: {
                            columns: 1
                        },
                        items: [
                            new Ext.Panel({
                                region: 'north',
                                html:'<div style="float: left;">' +
                                        '<table width="2" style="background-color: #FFFFFF;">' +
                                            '<tr>' +
                                                '<td width="1" alt="Trans-Soft HelpDesk System" title="Trans-Soft HelpDesk System">' +
                                                    '<img src="/images/logosmalltrans.gif" border="0" />' +
                                                '</td>' +
                                                '<td width="1" class="hdLogoText">HD<sup>TM</sup></td>' +
                                            '</tr>' +
                                        '</table>' +
                                    '</div>' +
                                    '<div style="float:right;padding: 10px;padding-right: 20px;font-family: verdana, arial;font-size: 10pt;color:#FF0000;font-weight:bold;">' +
                                        '<ul>' +
                                            '<li id="errorUserName">&nbsp;</li>' +
                                            '<li id="errorPassword">&nbsp;</li>' +
                                        '</ul>' +
                                    '</div>',
                                frame: false,
                                height: 50,
                                border: true
                            }),
                            logonForm,
                            new Ext.Panel({
                                region: 'south',
                                html:'<table align="center">' +
                                        '<tr>' +
                                            '<td style="text-align: center;font-family: Tahoma, Arial;font-size:10pt;">' +
                                                '<a href="javascript: showForgotPw();">Forgot my password.</a>' +
                                            '</td>' +
                                        '</tr>' +
                                    '</table>',
                                frame: true,
                                border: false
                            }),
                            new Ext.Panel({
                                region: 'south',
                                html:'<table align="center">' +
                                        '<tr>' +
                                            '<td style="font-family: Tahoma, Arial;font-size:10pt;">' +
                                                '<span>Optimized for:&nbsp;' +
                                                    '<span style="color:#666666;font-weight:bold;">Mozilla&nbsp;' +
                                                        '<span style="color:#D64203;">Firefox</a>&#174;</span>' +
                                                    '</span>' +
                                                '</span>' +
                                            '</td>' +
                                        '</tr>' +
                                        '<tr>' +
                                            '<td style="text-align: center;">' +
                                                '<a href="http://getfirefox.com/" title="Get Firefox - The Browser, Reloaded.">' +
                                                    '<img src="http://www.mozilla.org/products/firefox/buttons/firefox_80x15.png" width="80" height="15" border="0" alt="Get Firefox">' +
                                                '</a>' +
                                            '</td>' +
                                        '</tr>' +
                                    '</table>',
                                frame: true,
                                border: false
                            })
                        ]
                    },{
                        columnWidth: .34,
                        layout: 'table',
                        frame: false,
                        border: true,
                        layoutConfig: {
                            columns: 1
                        },
                        items: [
                            new Ext.Panel({
                                region: 'north',
                                width: 294,
                                height: 50,
                                html: '<div class="hd-service-status-header">Hosted Service Status:</div>',
                                frame: false,
                                border: true
                            }),
                            new Ext.Panel({
                                region: 'south',
                                width: 294,
                                height: 239,
                                layoutConfig: {
                                    columns: 1
                                },
                                frame: false,
                                border: true,
                                items: [
                                    new Ext.DataView({
                                        store: store,
                                        tpl: tpl,
                                        style: 'overflow:scroll',
                                        //autoHeight: true,
                                        height: 250,
                                        multiSelect: true,
                                        overClass: 'x-view-over',
                                        itemSelector: 'div.thumb-wrap',
                                        emptyText: 'All systems operational. No reported issues.',
                                        plugins: [],
                                        prepareData: function(data) {
                                            var displayDate = new Date(data.eventDisplayStartDateTime);
                                            data.statusDate = displayDate.format('Y-m-d') + '&nbsp;' + displayDate.format('h:iA');
                                            return data;
                                        }
                                    }),
                                    new Ext.PagingToolbar({
                                        pageSize: 25,
                                        store: store,
                                        height: 20,
                                        displayInfo: true,
                                        displayMsg: 'Displaying Service Statuses {0} - {1} of {2}',
                                        emptyMsg: "All systems operational. No reported issues."
                                    })
                                ]
                            })
                        ]
                    }
                ]
            })
        ]
    }); // end of logon

    forgotPwform = new Ext.FormPanel({
        region: 'center',
        labelWidth: 100,
        url: 'forgotpassword.aspx',
        frame: true,
        bodyStyle: 'padding:5px;',
        width: 400,
        defaults: { width: 375 },
        defaultType: 'textfield',
        border: false,
        labelAlign: 'top',
        items: [
            {
                fieldLabel: 'Email Address',
                name: 'email',
                blankText: 'Please enter an Email Address.',
                allowBlank: false,
                msgTarget: 'under',
                listeners: {
                    specialkey: function(field, e) {
                        if (e.getKey() == 13) {
                            forgotPwform.getForm().submit();
                        }
                    }
                },
                validateOnBlur: false,
                validationEvent: false
            }
        ],
        buttons: [
            {
                text: 'Email Logon Info',
                handler: function() {
                    forgotPwform.getForm().submit();
                }
            },{
                text: 'Cancel',
                handler: function() {
                    forgotPw.hide();
                    forgotPwform.getForm().reset();
                    logon.show();
                }
            }
        ],
        listeners: {
            actioncomplete: function(form, action) {
                forgotPw.syncSize();
                switch (action.type) {
                    case "submit":
                        if (action.result.success) {
                            forgotPw.hide();
                            logon.show();
                            Ext.example.msg(
                            'Login Info Sent',
                            'An email with your login info was sent.'
                        );
                        }
                        break;
                }
            },
            actionfailed: function(form, action) {
                if (action.result != null) {
                    Ext.MessageBox.show({
                        title: action.result.errors.email,
                        msg: action.result.errorMessage,
                        buttons: Ext.MessageBox.OK,
                        icon: Ext.MessageBox.ERROR,
                        height: 60,
                        minWidth: 300
                    });
                }
            }
        }
    }); // end of forgotPwform
        
    forgotPw = new Ext.Window({
        title: 'Email Logon Info',
        layout: 'table',
        layoutConfig: {
            columns: 1
        },
        width: 412,
        closeAction: 'hide',
        plain: true,
        modal: true,
        closable: false,
        draggable: false,
        resizable: false,
        border: false,
        items: [
            new Ext.Panel({
                region: 'north',
                html:'<table style="background-color:#FFFFFF;">' +
                        '<tr>' +
                            '<td alt="Trans-Soft HelpDesk System" title="Trans-Soft HelpDesk System">' +
                                '<img src="/images/logosmalltrans.gif" border="0" />' +
                            '</td>' +
                            '<td class="headerText">HD<sup>TM</sup></td>' +
                        '</tr>' +
                    '</table>',
                frame: false,
                height: 50,
                border: true
            }),
            forgotPwform
        ]
    }); // end of forgotPw
    
}); // end of Ext.onReady function