Ext.onReady(function(){
    //Theme
    Ext.util.CSS.swapStyleSheet('theme', './../../extjs/resources/css/xtheme-gray.css'); 
    Ext.BLANK_IMAGE_URL = './../../extjs/resources/images/default/s.gif';

   // Menu containing actions
    var tabDollarAction = new Ext.Panel({
    	frame:true,
    	title: 'Hanuman Setu Bandha',
    	collapsible:false,
    	contentEl:'dollaraction',
        titleCollapse: false
    });
    
    var tabItemsAction = new Ext.Panel({
    	frame:true,
    	title: 'Donate Time/Items',
    	collapsible:false,
    	contentEl:'itemsaction',
        titleCollapse: false
    });
    
    var tabMemberAction = new Ext.Panel({
    	frame:true,
    	title: 'Life Time Puja Sponsorship',
    	collapsible:false,
    	contentEl:'memberaction',
        titleCollapse: false
    });

    var tabTulasiAction = new Ext.Panel({
    	frame:true,
    	title: 'Offer Tulasi Leaves',
    	collapsible:false,
    	contentEl:'tulasiaction',
        titleCollapse: false
    });

    var tabBrickAction = new Ext.Panel({
    	frame:true,
    	title: 'Buy Bricks',
    	collapsible:false,
    	contentEl:'brickaction',
        titleCollapse: false
    });

    var tabRoomAction = new Ext.Panel({
    	frame:true,
    	title: 'Building Renovation',
    	collapsible:false,
    	contentEl:'roomaction',
        titleCollapse: false
    });

    var tabParkAction = new Ext.Panel({
    	frame:true,
    	title: 'On Site Parking',
    	collapsible:false,
    	contentEl:'parkaction',
        titleCollapse: false
    });

    var tabRoadAction = new Ext.Panel({
    	frame:true,
    	title: 'Road Expansion',
    	collapsible:false,
    	contentEl:'roadaction',
        titleCollapse: false
    });

    var tabCashAction = new Ext.Panel({
    	frame:true,
    	title: 'Cash Donation',
    	collapsible:false,
    	contentEl:'cashaction',
        titleCollapse: false
    });

    var tabPledgeAction = new Ext.Panel({
    	frame:true,
    	title: 'Pledge Donation',
    	collapsible:false,
    	contentEl:'pledgeaction',
        titleCollapse: false
    });

    var tabLandAction = new Ext.Panel({
    	frame:true,
    	title: 'Land Pledges',
    	collapsible:false,
    	contentEl:'landaction',
        titleCollapse: false
    });
    
    var tabCorporateAction = new Ext.Panel({
    	frame:true,
    	title: 'Corporate Matching Gifts',
    	collapsible:false,
    	contentEl:'corporateaction',
        titleCollapse: false
    });

    var donationSelectionBox = new Ext.form.ComboBox({
                        fieldLabel: 'Select Donation',
                        hiddenName:'donationtype',
                        store: new Ext.data.SimpleStore({
                            fields: ['dontype'],
                            data : Ext.donationform.donations
                        }),
                        valueField:'dontype',
                        displayField:'dontype',
                        forceSelection:true,
                        editable: false,
                        allowBlank:false,
                        typeAhead: true,
                        minListWidth : 250,
                        mode: 'local',
                        triggerAction: 'all',
                        selectOnFocus:true,
                        width: 250
                });

    var dynamicCombo = new Ext.form.ComboBox({
                        id: 'tempdynCid',
                        fieldLabel: 'Sponsor',
                        hiddenName:'dynCombo',
                        store: new Ext.data.SimpleStore({
                            fields: ['bld'],
                            data : Ext.donationform.building 
                        }),
                        valueField:'bld',
                        value:'25sq.ft of Building - $1,500',
                        displayField:'bld',
                        typeAhead: true,
                        allowBlank:false,
                        mode: 'local',
                        triggerAction: 'all',
                        selectOnFocus:true,
                        width: 250
                        });

    var dynamicText1 = new Ext.form.TextField({
                    id: 'tempdynTid1',
                    fieldLabel: 'Nos of Units to Sponsor',
                    name: 'dynText1',
                    value: '1',
                    allowBlank:false
                });

    var dynamicText2 = new Ext.form.TextField({
                    id: 'tempdynTid2',
                    fieldLabel: 'Donation Amount',
                    name: 'dynText2',
                    value: '',
                    allowBlank:false
                });

    var tributeSelectionBox = new Ext.form.ComboBox({
                        fieldLabel: 'Tribute Type',
                        hiddenName:'tributetype',
                        store: new Ext.data.SimpleStore({
                            fields: ['tritype'],
                            data : Ext.donationform.tributes
                        }),
                        valueField:'tritype',
                        displayField:'tritype',
                        typeAhead: true,
                        mode: 'local',
                        triggerAction: 'all',
                        selectOnFocus:true,
                        width: 250
                });

    var firstNameField = new Ext.form.TextField({
    id: 'firstNameField',
    fieldLabel: 'First Name',
    maxLength: 20,
    allowBlank: false,
    maskRe: /([a-zA-Z0-9\s]+)$/
    });

    var lastNameField = new Ext.form.TextField({
    id: 'lastNameField',
    fieldLabel: 'Last Name',
    maxLength: 20,
    allowBlank: false,
    maskRe: /([a-zA-Z0-9\s]+)$/
    });

    var dobField = new Ext.form.DateField({
    id:'dobField',
    fieldLabel: 'Date Of Birth',
    format : 'm/d/Y',
    allowBlank: false
    });

    var addressField = new Ext.form.TextField({
    id: 'addressField',
    fieldLabel: 'Present Address',
    maxLength: 40,
    allowBlank: false,
    maskRe: /([a-zA-Z0-9\s]+)$/
    });

    var cityField = new Ext.form.TextField({
    id: 'cityField',
    fieldLabel: 'City',
    maxLength: 20,
    allowBlank: false,
    maskRe: /([a-zA-Z0-9\s]+)$/
    });

    var stateField = new Ext.form.ComboBox({
        id: 'stateField',
        fieldLabel: 'State',
        hiddenName:'state',
        store: new Ext.data.SimpleStore({
           fields: ['abbr', 'state'],
           data : Ext.donationform.states 
        }),
        valueField:'abbr',
        displayField:'state',
        typeAhead: true,
        minListWidth : 250,
        mode: 'local',
        triggerAction: 'all',
        selectOnFocus:true,
        width: 250
    });

    var zipField = new Ext.form.TextField({
    id: 'zipField',
    fieldLabel: 'Zip Code',
    maxLength: 10,
    allowBlank: false
    });

    var emailField = new Ext.form.TextField({
    id: 'emailField',
    fieldLabel: 'EMail',
    vtype: 'email',
    maxLength: 60,
    allowBlank: false
    });

    var hphoneField = new Ext.form.TextField({
    id: 'hphoneField',
    fieldLabel: 'Phone(Home)',
    maxLength: 12,
    allowBlank: false
    });

    var mphoneField = new Ext.form.TextField({
    id: 'mphoneField',
    fieldLabel: 'Phone(Mobile)',
    maxLength: 12
    });

    var tributeField = new Ext.form.TextField({
    id: 'tributeField',
    fieldLabel: 'Name',
    maxLength: 20
    });

    var tributeDescField = new Ext.form.TextField({
    id: 'tributeDescField',
    fieldLabel: 'Description',
    maxLength: 100
    });

    var donationArea = new Ext.Panel({
        title: 'Donation Info',
        iconCls: 'icon-ccdonation',
        bodyStyle:'padding:0px;background:#ffffff',
        border: false
    });

    var donationListingWindow = new Ext.Window({
      id: 'donationListingWindow',
      title: 'Donation Information',
      bodyStyle:'padding:15px 0px 15px 0px;background:#ffffff',
      closable:true,
      width:400,
      height:350,
      plain:false,
      layout: 'fit',
      items: [donationArea]
    });
   
    // Panel with Forms for donation
        var donationForm = new Ext.FormPanel({
        labelWidth: 135, // label settings here cascade unless overridden
        url:'saveDonation.php',
        frame:true,
        bodyStyle:'padding:15px 0px 15px 0px;background:#ffffff',
        height:825,
        autoWidth:true,
        border: false,

        items: [{
            xtype:'fieldset',
            id: 'topFieldSet',
            title: 'Donation Information',
            collapsible: true,
            autoHeight:true,
            defaults: {width: 250},
            defaultType: 'textfield',
            items :[donationSelectionBox]
        },
        {
            xtype:'fieldset',
            title: 'Personal Information',
            collapsible: true,
            autoHeight:true,
            bodyStyle:'padding:15px 0px 15px 0px',
            defaults: {width: 250},
            defaultType: 'textfield',
            collapsed: false,
            items :[firstNameField,lastNameField,dobField,addressField,cityField,stateField,zipField]
        },{
            xtype:'fieldset',
            title: 'Contact Details',
            collapsible: true,
            autoHeight:true,
            bodyStyle:'padding:15px 0px 15px 0px',
            defaults: {width: 250},
            defaultType: 'textfield',
            items :[emailField, hphoneField, mphoneField]
        },{
            xtype:'fieldset',
            title: 'Tribute Information -  Tribute this donation to someone special',
            collapsible: true,
            autoHeight:true,
            bodyStyle:'padding:15px 0px 15px 0px',
            defaults: {width: 250},
            defaultType: 'textfield',
            items :[tributeField,tributeSelectionBox,tributeDescField]
        }],
        buttons: [
        {
            text: 'Request More Info',
            handler: requestMoreInfo
        },{
            text: 'Donate Now',
            handler: donateNow    
        },{
            text: 'Reset',
            handler: function() {
                dynamicCombo.reset();
                dynamicText1.reset();
                dynamicCombo.container.up('div.x-form-item').setDisplayed(false);
                dynamicText1.container.up('div.x-form-item').setDisplayed(false);
				donationForm.form.reset();
            }
        }]
    }); 

  
    // Parent Panel to hold actions menu
    var actionPanel = new Ext.Panel({
        title: "Donation Opportunities",
        id:'action-panel',
        region:'west',
    	split:false,
    	collapsible: true,
        width:165,
    	minWidth: 150,
        border: true,
        margins: '5 2 0 2',
        bodyStyle: 'padding:3px',
        items: [tabDollarAction,tabMemberAction,tabTulasiAction,tabItemsAction,tabCashAction,tabPledgeAction,tabLandAction,tabCorporateAction]
    });

    var ccPanel = new Ext.Panel({
        title: 'Click to Donate Online using Credit Card/PayPal',
        iconCls: 'icon-ccdonation',
        bodyStyle:'padding:0px;background:#ffffff',
        items:[donationForm],
        border: false
    });

    var checkPanel = new Ext.Panel({
        title: 'Click for Cash/Check Donations',
        iconCls: 'icon-cshdonation',
        bodyStyle:'padding:0px;background:#ffffff',
        collapsed: true,
        autoLoad: {url: 'dashboardDonationCash.html'},
        border: false
    });

    //Panel Manu
    var viewsMenu = new Ext.menu.Menu({
        id: 'mainMenu',
        items: [
                {id: 'tulasiinfoid', text: 'Offer Tulasi Leaves', handler: onItemClick},
                {id: 'dollarinfoid', text: 'Hanuman Setu Bandha', handler: onItemClick},
                {id: 'itemsinfoid', text: 'Donate Time/Items', handler: onItemClick},
                {id: 'brickinfoid', text: 'Buy Bricks', handler: onItemClick},
                {id: 'roominfoid', text: 'Building Renovation', handler: onItemClick},
                {id: 'parkinfoid', text: 'On Site Parking', handler: onItemClick},
                {id: 'roadinfoid', text: 'Road Expansion', handler: onItemClick},
                {id: 'cashinfoid', text: 'Cash Donation', handler: onItemClick},
                {id: 'pledgeinfoid', text: 'Pledge Donation', handler: onItemClick},
                {id: 'landinfoid', text: 'Land Pledges', handler: onItemClick},
                {id: 'corporateinfoid', text: 'Corporate Matching Gifts', handler: onItemClick}
        ]
    });

    var southPanel = new Ext.Panel({
        id:'donationTab',
        layout:'accordion',
        split: true,
        closable:false,
        title:'Donate Now',
        iconCls: 'icon-donationform',
        margins:'0px;background:#ffffff',
        items: [checkPanel,ccPanel]
     });

    // Main (Tabbed) Panel
    var tabPanel = new Ext.TabPanel({
		region:'center',
		deferredRender:false,
		autoScroll: true, 
        enableTabScroll:true,
        autoDestroy:true,
        height: 450,
		margins:'5 4 0 2',
        activeTab:0,
        items:[{
			id:'mainTab',
			contentEl:'phase1Tab',
    		title: 'Temple Renovation/Construction Info',
    		closable:false,
            iconCls: 'icon-phase1',
            handler: onItemClick,
    		autoScroll:true
          }]
		});
			

    var rootPanel = new Ext.Panel({
    	title: "Ways to Give Dashboard",
    	region:'center',
    	border: true,
    	layout:'border',
        margins: '1 1 1 1',
        iconCls: 'icon-waystogive',
        items:[actionPanel,tabPanel]
    });

    //Donation Combo Box selection change
    donationSelectionBox.on('select',function(){
        var val = donationSelectionBox.getValue();
        var fset = donationForm.getComponent('topFieldSet');
        switch(val)
        {
            case "Offer Tulasi Leaves - $501":
                if(fset.findById('tempdynTid1') != null)
                {
                    dynamicText1.show();
                    dynamicText1.container.up('div.x-form-item').setDisplayed(true);
                }
                else
                    fset.add(dynamicText1);

                if(fset.findById('tempdynTid2') != null)
                {
                    dynamicText2.hide();
                    dynamicText2.container.up('div.x-form-item').setDisplayed(false);
                }

                if(fset.findById('tempdynCid') != null)
                {
                    dynamicCombo.hide();
                    dynamicCombo.container.up('div.x-form-item').setDisplayed(false);
                }
                fset.doLayout();
                break;
            case "Buy Bricks - $1000":
                if(fset.findById('tempdynTid1') != null)
                {
                    dynamicText1.show();
                    dynamicText1.container.up('div.x-form-item').setDisplayed(true);
                }
                else
                    fset.add(dynamicText1);

                if(fset.findById('tempdynTid2') != null)
                {
                    dynamicText2.hide();
                    dynamicText2.container.up('div.x-form-item').setDisplayed(false);
                }

                if(fset.findById('tempdynCid') != null)
                {
                    dynamicCombo.hide();
                    dynamicCombo.container.up('div.x-form-item').setDisplayed(false);
                }
                fset.doLayout();
                break;
            case "Building Renovation":
                if(fset.findById('tempdynTid1') != null)
                {
                    dynamicText1.hide();
                    dynamicText1.container.up('div.x-form-item').setDisplayed(false);
                }
                if(fset.findById('tempdynTid2') != null)
                {
                    dynamicText2.hide();
                    dynamicText2.container.up('div.x-form-item').setDisplayed(false);
                }

                if(fset.findById('tempdynCid') != null)
                {
                    dynamicCombo.show();
                    dynamicCombo.container.up('div.x-form-item').setDisplayed(true);
                }
                else
                    fset.add(dynamicCombo);

                fset.doLayout();
                break;
            case "General Donation":
                if(fset.findById('tempdynTid1') != null)
                {
                    dynamicText1.hide();
                    dynamicText1.container.up('div.x-form-item').setDisplayed(false);
                }

                if(fset.findById('tempdynTid2') != null)
                {
                    dynamicText2.show();
                    dynamicText2.container.up('div.x-form-item').setDisplayed(true);
                }
                else
                    fset.add(dynamicText2);

                if(fset.findById('tempdynCid') != null)
                {
                    dynamicCombo.hide();
                    dynamicCombo.container.up('div.x-form-item').setDisplayed(false);
                }
                fset.doLayout();
                break;
            case "On Site Parking - $1500":
                if(fset.findById('tempdynTid1') != null)
                {
                    dynamicText1.show();
                    dynamicText1.container.up('div.x-form-item').setDisplayed(true);
                }
                else
                    fset.add(dynamicText1);

                if(fset.findById('tempdynTid2') != null)
                {
                    dynamicText2.hide();
                    dynamicText2.container.up('div.x-form-item').setDisplayed(false);
                }

                if(fset.findById('tempdynCid') != null)
                {
                    dynamicCombo.hide();
                    dynamicCombo.container.up('div.x-form-item').setDisplayed(false);
                }
                fset.doLayout();
                break;
            case "Road Expansion - $1000":
                if(fset.findById('tempdynTid1') != null)
                {
                    dynamicText1.show();
                    dynamicText1.container.up('div.x-form-item').setDisplayed(true);
                }
                else
                    fset.add(dynamicText1);

                if(fset.findById('tempdynTid2') != null)
                {
                    dynamicText2.hide();
                    dynamicText2.container.up('div.x-form-item').setDisplayed(false);
                }

                if(fset.findById('tempdynCid') != null)
                {
                    dynamicCombo.hide();
                    dynamicCombo.container.up('div.x-form-item').setDisplayed(false);
                }
                fset.doLayout();
                break;
            case "Sashwata Seva - $2500":
                if(fset.findById('tempdynTid1') != null)
                {
                    dynamicText1.hide();
                    dynamicText1.container.up('div.x-form-item').setDisplayed(false);
                }

                if(fset.findById('tempdynTid2') != null)
                {
                    dynamicText2.hide();
                    dynamicText2.container.up('div.x-form-item').setDisplayed(false);
                }

                if(fset.findById('tempdynCid') != null)
                {
                    dynamicCombo.hide();
                    dynamicCombo.container.up('div.x-form-item').setDisplayed(false);
                }
                fset.doLayout();
                break;
                
        }
    });

    // Configure viewport
    viewport = new Ext.Viewport({
           layout:'border',
           items:[rootPanel]});

  
    // This must come after the viewport setup, so the body has been initialized
    actionPanel.body.on('mousedown', doAction, null, {delegate:'a'});
    tabPanel.body.on('mousedown', doAction, null, {delegate:'a'});

  // request More Info PHP call
  function requestMoreInfo(){
     var result;
     if(isFormValid()){
      Ext.Ajax.request({   
        url: 'saveDonation.php',
        waitMsg: 'Sending Info...',
        params: {
          task: "REQUESTINFO",
          firstname: firstNameField.getValue(),
          lastname: lastNameField.getValue(),
          email: emailField.getValue(),
          dob: dobField.getValue().format('Y-m-d')
        }, 
        success: function(response){              
          result=response.responseText;
          donationArea.setValue(result);
          donationListingWindow.show();
        },
        failure: function(response){
          result=response.responseText;
          Ext.MessageBox.alert('Error','Could not connect to the Server. Retry Later...');         
        }                      
      });
    } else {
      Ext.MessageBox.alert('Warning Message', 'Please fill up all fields to Proceed...');
    }
  }

  function isFormValid(){
      return(donationSelectionBox.isValid() && dynamicText1.isValid() && firstNameField.isValid() && lastNameField.isValid() && dobField.isValid() && addressField.isValid() && cityField.isValid()
             && stateField.isValid() && emailField.isValid() && hphoneField.isValid() && dynamicCombo.isValid());
  }

  // donate Now PHP call
  function donateNow(){
     var win;
     var result;
     if(isFormValid()){
      Ext.Ajax.request({   
        waitMsg: 'Please wait...',
        url: 'saveDonation.php',
        params: {
          task: "DONATE",
          firstname: firstNameField.getValue(),
          lastname: lastNameField.getValue(),
          email: emailField.getValue(),
          dob: dobField.getValue().format('Y-m-d')
        }, 
        success: function(response){              
          result=response.responseText;
          win = window.open('http://www.paypal.com','sdsdsd','height=400,width=600,resizable=1,scrollbars=1, menubar=1');       
        },
        failure: function(response){
          result=response.responseText;
          Ext.MessageBox.alert('Error','Could not connect to the Server. Retry Later...');        
        }                      
      });
    } else {
      Ext.MessageBox.alert('Warning', 'Please complete all Information!');
    }
  }

    // Update the contents of a tab if it exists, otherwise create a new one
    function updateTab(tabId,url,title) {
    	var tab = tabPanel.getItem(tabId);
        if(tab)
        {
            tab.getUpdater().update(url);
    		tab.setTitle(title);
    	}else{
    		tab = addTab(tabId,title,url);
    	}
    	tabPanel.setActiveTab(tab);
        tabPanel.focus();
    }

    function addTab(tabId, tabTitle, targetUrl){
        tabPanel.add({
	    title: tabTitle,
        id: tabId,
	    iconCls: 'icon-donation',
	    autoLoad: {url: targetUrl, callback: this.initSearch, scope: this},
        closable:true,autoScroll: true, 
        enableTabScroll:true
	}).show();
    }

    function updateDonationTab(tabId) {
    	tabPanel.setActiveTab(southPanel);
        ccPanel.expand(true);
        donationSelectionBox.focus(true);
        tabPanel.focus();
    }
 
    // Map link ids to functions
    var actions = {
        'dollarinfoid' : function(){
            updateTab('viewsTab','dashboardDollar.html',tabDollarAction.title);
        },
        'memberinfoid' : function(){
            updateTab('viewsTab','dashboardMember.html',tabMemberAction.title);
        },
        'itemsinfoid' : function(){
            updateTab('viewsTab','dashboardItems.html',tabItemsAction.title);
        },
        'tulasiinfoid' : function(){
            updateTab('viewsTab','dashboardTulasi.html',tabTulasiAction.title);
        },
        'brickinfoid' : function(){
            updateTab('viewsTab','dashboardBricks.html',tabBrickAction.title);
        },
        'roominfoid' : function(){
            updateTab('viewsTab','dashboardRooms.html',tabRoomAction.title);
        },
        'parkinfoid' : function(){
            updateTab('viewsTab','dashboardPark.html',tabParkAction.title);
        },
        'roadinfoid' : function(){
            updateTab('viewsTab','dashboardRoad.html',tabRoadAction.title);
        },
        'cashinfoid' : function(){
            updateTab('viewsTab','dashboardCash.html',tabCashAction.title);
        },
        'pledgeinfoid' : function(){
            updateTab('viewsTab','dashboardPledges.html',tabPledgeAction.title);
        },
        'landinfoid' : function(){
            updateTab('viewsTab','dashboardLand.html',tabLandAction.title);
        },
        'corporateinfoid' : function(){
            updateTab('viewsTab','dashboardCorporate.html',tabCorporateAction.title);
        },
        'summaryid' : function(){
            updateTab('viewsTab','dashboardSummary.html');
        }
        
    };
 
    function doAction(e, t){
    	e.stopEvent();
    	actions[t.id]();
    }

    function onItemClick(item){
        actions[item.id]();
    }

    });