EventListViewer = Ext.extend(Ext.Panel, {
                constructor: function(config){
                    EventListViewer.superclass.constructor.apply(this, arguments);
                    this.url = config.url ? config.url : 'services/webinars.aspx';
                    this.calendars=null;
                    this._init();
                },
                _init: function(){
                        this._template = new Ext.XTemplate(
                            '<tpl for="calendars">',
                                '<h3>{Name}</h3>',
                                '<ul>',
                                        '<tpl for="Events">',
                                            '<li><a id="webinarLink{parent.Name}">{Title}-{StartDate}</a></li>',
                                        '</tpl>',
                                '</ul>',
                            '</tpl>'
                        );
                        
                        Ext.Ajax.request({
                                        url: this.url,
                                        success: this._initComplete,
                                        failure: this._initError,
                                        params: {m:'gfe'},
                                        extraParams: this
                        });
                },
                _initComplete: function(response, eventArgs){
                    var t = eventArgs.extraParams;
                    t.calendars = Ext.decode(response.responseText).calendars;
                    t._template.overwrite(t.body, t);
                    
                    for(var j=0; j < t.calendars.length; j++)
                    {
                        var links = Ext.query('a[id=webinarLink' + t.calendars[j].Name + ']')
                        for(var i=0; i < links.length; i++)
                        {
                            var l = new Ext.Element(links[i]);
                            l.addListener('click', t._itemClicked, t, {Event:t.calendars[j].Events[i]});
                        }
                    }                    
                },
                _initFailure: function(e){
                    alert('There was an error trying to retrieve the upcoming events.  Please try again.');
                },
                _itemClicked:function(eventElement, sender, eventArgs){
                                var e = eventArgs.Event;
                                var eventWindow = new EventWindowViewerForm({
                                                event: e,
                                                labelWidth: 75, // label settings here cascade unless overridden
                                                frame:true,
                                                collapsible: true,
                                                renderTo: Ext.getBody(),
                                                floating:true,
                                                title: e.Title+'-'+e.Location+'  '+e.StartDate,
                                                bodyStyle:'padding:5px 5px 0',
                                                width: 400,
                                                monitorValid: true,
                                                url: this.url,
                                                monitorPoll: 500,
                                                defaults: {width: 275},
                                                defaultType: 'textfield',
                                                draggable: {
                                                                        insertProxy: false,
                                                                        onDrag : function(e){
                                                                                                var pel = this.proxy.getEl();
                                                                                                this.x = pel.getLeft(true);
                                                                                                this.y = pel.getTop(true);
                                                                                                    var s = this.panel.getEl().shadow;
                                                                                                    if (s) {
                                                                                                        s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
                                                                                                    }
                                                                        },
                                                                        endDrag : function(e){
                                                                                                this.panel.setPosition(this.x, this.y);
                                                                                            }
                                                },
                                                items: [{
                                                        fieldLabel: 'Title',
                                                        name: 'title',
                                                        readOnly:true,
                                                        value: e.Title
                                                        
                                                    },{
                                                        fieldLabel: 'Description',
                                                        name: 'description',
                                                        readOnly:true,
                                                        value: e.Description,
                                                        xtype: 'textarea'
                                                    },{
                                                        fieldLabel: 'Start Time',
                                                        name: 'starttime',
                                                        readOnly:true,
                                                        value: e.StartDate
                                                    },{
                                                        fieldLabel: 'End Time',
                                                        name: 'endtime',
                                                        readOnly:true,
                                                        value: e.EndDate
                                                    },{
                                                        fieldLabel: 'First Name',
                                                        name: 'fn',
                                                        allowBlank:false,
                                                        value:''
                                                    },{
                                                        fieldLabel: 'Last Name',
                                                        name: 'ln',
                                                        allowBlank:false,
                                                        value:''
                                                    },{
                                                        fieldLabel: 'Email',
                                                        name: 'email',
                                                        vtype:'email',
                                                        allowBlank:false,
                                                        value:''
                                                    },{
                                                        fieldLabel: 'Phone',
                                                        name: 'p',
                                                        value:''
                                                    }
                                                ],

                                                buttons: [{
                                                    text: 'Register',
                                                    formBind:true,
                                                    type:'submit',
                                                    handler: function(){this.ownerCt.register();}
                                                },{
                                                    text: 'Cancel',
                                                    onClick: function() { this.ownerCt.cancel(); }
                                                }]                                               
                                });
                                eventWindow.getEl().center();
                                eventWindow.show();
                }
});

EventWindowViewerForm = Ext.extend(Ext.FormPanel, {
                    constructor: function(config){
                            EventWindowViewerForm.superclass.constructor.apply(this, arguments);
                            this.url = config.url;
                            this.event = config.event;
                    },
                            register: function(){
                                      var f = this.getForm();
                                      this.collapse(true);
                                      f.submit(
                                                {
                                                    params:{m:'r', cid:this.event.CalendarId, eid:this.event.EventId, test: Ext.util.JSON.encode(this.event)},
                                                    scope:this,
                                                    url:this.url,
                                                    success: this._registrationComplete,
                                                    failure: this._registrationFailure
                                                }
                                             );
                            },
                            cancel: function(){
                                        this.hide();
                            },
                            _registrationComplete: function(form, eventArgs){
                                var f = form;
                                if(eventArgs.result.calendars.Status=='-1')
                                {
                                    
                                    Ext.Msg.show({
                                           title:'Registration Complete',
                                           msg: 'Thank you for registering.\r\nYou will be receiving a confirmation email shortly.',
                                           buttons: Ext.Msg.OK,
                                           icon: Ext.MessageBox.INFO
                                        });

                                    this.hide();
                                    return;
                                }
                                this._registrationFailure();
                            },
                            _registrationFailure: function(){
                                this.enable();
                                this.expand();
                                 Ext.Msg.show({
                                           title:'Oops. Registration Failure',
                                           msg: 'Failed to register for the webinar. Please try again.',
                                           buttons: Ext.Msg.OK,
                                           icon: Ext.MessageBox.ERROR
                                        });
                            }
})