Kundli = {};

Kundli.Charts = {};

Kundli.Dict = {
    sGraha: ["Lagna", "Ravi", "Budh", "Shukra", "Mangal", "Guru", "Shani", "Chandra", "Rahu", "Ketu", "Uranus", "Neptune", "Pluto"]
};

Kundli.Charts.NorthIndian = Ext.extend(Ext.Panel, {
    chartInfo: null,
    height: 350,
    autoScroll: true,
    initComponent: function() {
        Kundli.Charts.NorthIndian.superclass.initComponent.call(this);

        var chartInfo = [];

        chartInfo.push({
            number: {x: 2910, y:600},
            text: {x: 2925, y:1440}
        });

        chartInfo.push({
	        number: {x: 2683, y:120},
	        text: {x: 1500, y:420}
        });

        chartInfo.push({
	        number: {x: 225, y:2640},
	        text: {x: 540, y:1440}
        });

        chartInfo.push({
	        number: {x: 645, y:2880},
	        text: {x: 1560, y:2880}
        });

        chartInfo.push({
	        number: {x: 225, y:3060},
	        text: {x: 540, y:4140}
        });

        chartInfo.push({
	        number: {x: 2685, y:5580},
	        text: {x: 1560, y:5220}
        });

        chartInfo.push({
	        number: {x: 2910, y:5100},
	        text: {x: 2940, y:4200}
        });

        chartInfo.push({
	        number: {x: 3105, y:5580},
	        text: {x: 4260, y:5220}
        });

        chartInfo.push({
	        number: {x: 5625, y:3060},
	        text: {x: 5200, y:4140}
        });

        chartInfo.push({
	        number: {x: 5145, y:2880},
	        text: {x: 4260, y:2820}
        });

        chartInfo.push({
	        number: {x: 5625, y:2640},
	        text: {x: 5200, y:1440}
        });

        chartInfo.push({
	        number: {x: 3105, y:120},
	        text: {x: 4200, y:420}
        });
        
        this.chartInfo = chartInfo;
    },
    
    setData: function(data) {
        var chartData = [];
        var i;
        for(i=0; i<12; i++) {
            chartData.push({number: i, text: ""});
        }
        
        var cInfo = data[this.chartType.type];
        
        var no = cInfo[0];
        for(i=0; i<chartData.length; i++) {
            chartData[i].number = no;
            chartData[i].text = "";
            no++;
            if(no > 12) {
                no = 1;
            }
        }
        
        var sGraha = Kundli.Dict.sGraha;

        var start = this.chartType.lagna ? 0 : 1;
        for(i=start; i<cInfo.length; i++) {
            if(cInfo[i] !== 0) {
                no = cInfo[i] - cInfo[0];
                if(no < 0) {
                    no += 12;
                }
                var cData = chartData[no];
                if(cData.text.length > 0) {
                    cData.text = cData.text + " ";
                }
                cData.text = cData.text + sGraha[i];
            }
        }

        var origSize = 6000;
        var currentSize = 320;
        var factor = currentSize / origSize;
        var chartInfo = this.chartInfo;
        var topMargin = 12;
        var leftMargin = 8;
        
        var html = '<div class="chart">' +
            '<div style="left:0; top:0;"><img src="img/NorthIndianChart.GIF" width="' + currentSize + 'px" height="' + currentSize + 'px" /></div>';

        
        var showText = function(options) {
            var x = options.position.x;
            var y = options.position.y;
            var width = options.width * currentSize / 385;
            var height = options.height * currentSize / 385;
            var text = options.text;
            
            x = x * factor;
            y = y * factor;
            
            x = x - width/2 + leftMargin;        
            y = y - height/2 + topMargin;
            
            html = html + "<table style='left:" + x + "px; top:" + y + "px; width:" + width + "px; height:" + height + "px;' cellspacing=0 cellpadding=0><tr><td>" + text + "<td></tr></table>";
        };
        
        for(i=0; i<chartInfo.length; i++) {
            showText({position: chartInfo[i].number, text: chartData[i].number, width:20, height:20});
            showText({position: chartInfo[i].text, text: chartData[i].text, width:70, height:60});
        }
        
        html = html + '</div>';
        
        if(this.rendered) {
            this.body.update(html);
        } else {
            this.html = html;
        }
    }
});

Kundli.DegreeGrid = function(config) {
    if(!config) {
        config = {};
    }
    
    Ext.applyIf(config, {
        store: new Ext.data.JsonStore({
            url: 'Controllers/Calculate.ashx',
            baseParams: {info: 'main'},
            root: this.infoType,
            fields: ["Planet", "Rashi", "RashiNo", "RashiLord", "Position", "Direction", "Nakshatra", "NakshatraPad", "NakshatraLord", "NakshatraNo"]
        }),
        height: 330,
        columns: [
            {header: "Planet", width: 80, dataIndex: 'Planet'},
            {header: "Rashi", width: 75, dataIndex: 'Rashi'},
            {header: "Lord", width: 80, dataIndex: 'RashiLord'},
            {header: "Position", width: 65, dataIndex: 'Position'},
            {header: "Direction", width: 35, dataIndex: 'Direction'},
            {header: "Nakshatra", width: 85, dataIndex: 'Nakshatra'},
            {header: "Pad", width: 30, dataIndex: 'NakshatraPad'},
            {header: "Lord", width: 70, dataIndex: 'NakshatraLord'}
        ]
    });
    
    //DA.Portlet.Convert(config);

    Ext.apply(this, config);
    Kundli.DegreeGrid.superclass.constructor.call(this);
};

Ext.extend(Kundli.DegreeGrid, Ext.grid.GridPanel, {});

Kundli.NiryanGrid = function(config) {
    this.infoType = 'niryan';    
    Ext.apply(this, config);
    Kundli.NiryanGrid.superclass.constructor.call(this);
};

Ext.extend(Kundli.NiryanGrid, Kundli.DegreeGrid, {});

Kundli.SayanGrid = function(config) {
    this.infoType = 'sayan';    
    Ext.apply(this, config);
    Kundli.SayanGrid.superclass.constructor.call(this);
};

Ext.extend(Kundli.SayanGrid, Kundli.DegreeGrid, {});

Kundli.NameValueGrid = function(config) {
    if(!config) {
        config = {};
    }
    
    Ext.applyIf(config, {
        store: new Ext.data.JsonStore({
            root: config.infoType,
            fields: ["Key", "Value"]
        }),
            
        height: 350,
        columns: [
            {header: "", width: 200, dataIndex: 'Key'},
            {header: "", width: 200, dataIndex: 'Value'}
        ]
    });
    //DA.Portlet.Convert(config);

    Ext.apply(this, config);
    Kundli.NameValueGrid.superclass.constructor.call(this);
};

Ext.extend(Kundli.NameValueGrid, Ext.grid.GridPanel, {});

Kundli.DashaGrid = function(config) {
    if(!config) {
        config = {};
    }
    
    Ext.applyIf(config, {
        title: config.dashaName,
        store: new Ext.data.JsonStore({
            url: 'Controllers/Calculate.ashx',
            baseParams: {info: config.dashaType},
            root: 'Sub',
            fields: ["DashaNo", "Planet", "Start", "End"]
        }),
        height: 280,
        dashaParents: [],
        columns: [
            {header: "Planet", width: 100, dataIndex: 'Planet'},
            {header: "Start", width: 100, dataIndex: 'Start'},
            {header: "End", width: 100, dataIndex: 'End'}
        ]
    });

    //DA.Portlet.Convert(config);
    Ext.apply(this, config);
    Kundli.DashaGrid.superclass.constructor.call(this);
    
    if(this.dashaParents.length < 4) {
        this.on('rowdblclick', this.rowDblClickHandler);
    }
    
    this.closable = this.dashaParents.length > 0;
    
    this.store.on('load', this.loadHandler, this);
};

Ext.extend(Kundli.DashaGrid, Ext.grid.GridPanel, {
    loadHandler: function(store) {
        if(this.dashaParents.length > 0) {
            var reader = store.reader;
            var json = reader.jsonData;
            this.setTitle(json.DashaType + ": " + json.DashaName + " (" + json.Start + " - " + json.End + ")");
        } else {
            this.hideSubDasha();
        }
    },
    
    hideSubDasha: function() {
        if(this.childDashaGrid) {
            this.childDashaGrid.hideSubDasha();
            Kundli.Display.tabPanel.hideTabStripItem(this.childDashaGrid);
        }
    },
    
    rowDblClickHandler: function(grid, rowIndex) {
        var store = grid.getStore();
        var record = store.getAt(rowIndex);
        var childGrid = this.childDashaGrid;
        var parents;
        if(!childGrid) {
            parents = [];
            for(var i=0, len=this.dashaParents.length; i<len; i++) {
                parents.push(this.dashaParents[i]);
            }
            parents.push(0);
            childGrid = new Kundli.DashaGrid({dashaName: grid.dashaName, dashaType: grid.dashaType, dashaParents: parents});
            Kundli.Display.tabPanel.add(childGrid);
            this.childDashaGrid = childGrid;
        }
        parents = childGrid.dashaParents;
        parents[parents.length-1] = record.get('DashaNo');
        childGrid.getStore().load({params: Ext.apply({parent: Ext.encode(parents)}, Kundli.Display.nativeData)});
        Kundli.Display.tabPanel.setActiveTab(childGrid);
    }
});

Kundli.Prediction = function(config) {
    if(!config) {
        config = {};
    }
    
    Ext.applyIf(config, {
        tpl: new Ext.XTemplate(
            '<center>',
//        '<script type="text/javascript"><!--',
//        'google_ad_client = "pub-2311278683893444";',
//        '/* 160x600, created 5/30/08 */',
//        'google_ad_slot = "7905363828";',
//        'google_ad_width = 160;',
//        'google_ad_height = 600;',
//        '//-->',
//        '</script>',
//        '<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>',
                '<tpl for=".">',
                    '<div class="prediction">',
                        '<div class="title">{0}</div>',
                        '<div>{1}</div>',
                    '</div>',
                '</tpl>',
            '</center>'
        )
    });

    //DA.Portlet.Convert(config);
    Ext.apply(this, config);
    Kundli.Prediction.superclass.constructor.call(this);
};

Ext.extend(Kundli.Prediction, Ext.Panel, {
    autoScroll: true,
    layout: 'fit',
    setData: function(json) {
        this.tpl.overwrite(this.body, json[this.predictionType]);
    }
});

Kundli.Display = {
    basicInfo: new Kundli.NameValueGrid({title:'Basic Info.', infoType: 'basic'}),
    lagnaChart: new Kundli.Charts.NorthIndian({title:'Lagna Kundli', chartType: {type: 'LagnaKundli', lagna: true}}),
    moonChart: new Kundli.Charts.NorthIndian({title:'Chandra Kundli', chartType: {type: 'ChandraKundli', lagna: false}}),
    navamsaChart: new Kundli.Charts.NorthIndian({title:'Navamsa', chartType: {type: 'Navamsa', lagna: true}}),
    niryanBhavChalitChart: new Kundli.Charts.NorthIndian({title:'Niryan Bhav Chalit', chartType: {type: 'NiryanBhavChalit', lagna: false}}),
    chalitChart: new Kundli.Charts.NorthIndian({title:'Chalit', chartType: {type: 'Chalit', lagna: false}}),
    niryan: new Kundli.NiryanGrid({title: 'Niryana'}),
    sayan: new Kundli.SayanGrid({title: 'Sayana'}),
    vimst: new Kundli.DashaGrid({dashaName: 'Vimshottari', dashaType: 'vimst'}),
    yogini: new Kundli.DashaGrid({dashaName: 'Yogini', dashaType: 'yogini'}),
    rashiPrediction: new Kundli.Prediction({title: 'Rashi Predictions', predictionType: 'rashi-prediction'}),
    genPrediction: new Kundli.Prediction({title: 'General Predictions', predictionType: 'general-prediction'}),
    planetPrediction: new Kundli.Prediction({title: 'Planet Predictions', predictionType: 'planet-prediction'}),
    aspects: new Ext.grid.GridPanel({
        title: 'Aspects',
        height: 320,
        store: new Ext.data.JsonStore({
            root: 'aspects',
            fields: ["Planet", "CHANDRA", "MANGAL", "BUDHA", "GURU", "SHUKRA", "SANI", "RAHU", "KETU", "NEPTUNE", "PLUTO"]
        }),
            
        columns: [
            {header: "Planet", width: 75, dataIndex: 'Planet'},
            {header: "Chandra", width: 70, dataIndex: 'CHANDRA'},
            {header: "Mangal", width: 70, dataIndex: 'MANGAL'},
            {header: "Budha", width: 70, dataIndex: 'BUDHA'},
            {header: "Guru", width: 70, dataIndex: 'GURU'},
            {header: "Shukra", width: 70, dataIndex: 'SHUKRA'},
            {header: "Shani", width: 70, dataIndex: 'SANI'},
            {header: "Rahu", width: 70, dataIndex: 'RAHU'},
            {header: "Ketu", width: 70, dataIndex: 'KETU'},
            {header: "Neptune", width: 70, dataIndex: 'NEPTUNE'},
            {header: "Pluto", width: 70, dataIndex: 'PLUTO'}
        ]
    }),
    matchBasicInfo: new Ext.grid.GridPanel({
        title: 'Basic Info',
        height: 320,
        store: new Ext.data.JsonStore({
            root: 'basic',
            fields: ["Category", "Boy", "Girl"]
        }),
        columns: [
            {header: "Category", width: 170, dataIndex: 'Category'},
            {header: "Male", width: 150, dataIndex: 'Boy'},
            {header: "Female", width: 150, dataIndex: 'Girl'}
        ]
    }),
    matchResult: new Ext.grid.GridPanel({
        title: 'Match Result',
        height: 320,
        store: new Ext.data.JsonStore({
            root: 'result',
            fields: ["Category", "Boy", "Girl", "Score"]
        }),
        columns: [
            {header: "Category", width: 100, dataIndex: 'Category'},
            {header: "Male", width: 100, dataIndex: 'Boy'},
            {header: "Female", width: 100, dataIndex: 'Girl'},
            {header: "Score", width: 50, dataIndex: 'Score'}
        ]
    }),
    bhavSpasht: new Ext.grid.GridPanel({
        title: 'Niryan Bhav Longitudes',
        store: new Ext.data.JsonStore({
            root: 'bhav-spasht',
            fields: ["Position", "BegRashi", "BegPosition", "BegNakshatra", "BegNakshatraLord", "MidRashi", "MidPosition", "MidNakshatra", "MidNakshatraLord"]
        }),
        height: 330,
        columns: [
            {header: "Position", width: 50, dataIndex: 'Position'},
            {header: "Rashi", width: 70, dataIndex: 'BegRashi'},
            {header: "Position", width: 65, dataIndex: 'BegPosition'},
            {header: "Nakshatra", width: 75, dataIndex: 'BegNakshatra'},
            {header: "Lord", width: 75, dataIndex: 'BegNakshatraLord'},
            {header: "Rashi", width: 70, dataIndex: 'MidRashi'},
            {header: "Position", width: 65, dataIndex: 'MidPosition'},
            {header: "Nakshatra", width: 75, dataIndex: 'MidNakshatra'},
            {header: "Lord", width: 75, dataIndex: 'MidNakshatraLord'}
        ]
    }),
    init: function() {
        this.fields = {};
        
        var buttons = [];
        
        this.matchingMode = false;
        
        var modeButton = new Ext.CycleButton({
            showText: true,
            prependText: 'Mode: ',
            items: [{
                text:'Horoscope',
                checked:!this.matchingMode
            },{
                text:'Matching',
                checked:this.matchingMode
            }],
            changeHandler:function(btn, item){
                this.matchingMode = item.text == 'Matching';
                this.setPanelVisibility();
                var genderField = this.fields.gender;
                genderField.setDisabled(this.matchingMode);
                genderField.setValue(0);
            },
            scope: this
        });

        this.setPanelVisibility = function() {
            this.inputPanel.items.get(1).setVisible(this.matchingMode);
        };

        var inputPanel = {
            url: 'Controllers/Calculate.ashx',
            title: 'Birth Data',
            layout: 'column',
            defaults: {columnWidth: 0.5, layout: 'form', border: false, labelWidth: 80},
            items: [{
                defaults: {xtype: 'textfield', width: 150},
                items: [
                    this.fields.name = {fieldLabel: 'Name', name: 'Name', value: 'Durlabh Jain'},
                    this.fields.gender = new Ext.ux.Combo({fieldLabel: 'Gender', hiddenName: 'Gender', xtype: 'xcombo', data: [[0, 'Male'], [1, 'Female']], value: 0}),
                    this.fields.birthDate = {fieldLabel: 'Birth Date', name: 'BirthDate', xtype: 'datefield', allowBlank: false, value: new Date('07/15/1979'), format: 'd/m/Y'},
                    this.fields.birthTime = {fieldLabel: 'Birth Time', name: 'BirthTime', xtype: 'timefield', allowBlank: false, value: '00:50 AM'},
                    this.fields.birthCountry = new Ext.ux.Combo({fieldLabel: 'Birth Country', allowBlank: false, value: {LookupId: 95, DisplayValue: 'India'}, hiddenName: 'Country', storeConfig: {url: 'controllers/DAL.aspx', baseParams: {type: 'Country'}}}),
                    this.fields.birthPlace = new Ext.ux.Combo({fieldLabel: 'Birth Place', allowBlank: false, value: {LookupId: 1814, DisplayValue: 'Delhi'}, hiddenName: 'BirthPlace', xtype: 'xcombo', mode: 'remote', pageSize: 10, storeConfig: {url: 'controllers/DAL.aspx', baseParams: {type: 'City', ParentRecordType: 'Country', ScopeId: 95}}})
                ]
            }, {
                defaults: {xtype: 'textfield', width: 150},
                items: [
                    this.fields.femaleName = {fieldLabel: 'Name', name: 'femaleName', value: 'Female'},
                    this.fields.femaleGender = {fieldLabel: 'Gender', xtype: 'xcombo', data: [[0, 'Male'], [1, 'Female']], value: 1, disabled: true},
                    this.fields.femaleBirthDate = {fieldLabel: 'Birth Date', name: 'femaleBirthDate', xtype: 'datefield', allowBlank: false, value: new Date('07/15/1979'), format: 'd/m/Y'},
                    this.fields.femaleBirthTime = {fieldLabel: 'Birth Time', name: 'femaleBirthTime', xtype: 'timefield', allowBlank: false, value: '00:50 AM'},
                    this.fields.femaleBirthCountry = new Ext.ux.Combo({fieldLabel: 'Birth Country', allowBlank: false, value: {LookupId: 95, DisplayValue: 'India'}, hiddenName: 'femaleCountry', storeConfig: {url: 'controllers/DAL.aspx', baseParams: {type: 'Country'}}}),
                    this.fields.femaleBirthPlace = new Ext.ux.Combo({fieldLabel: 'Birth Place', allowBlank: false, value: {LookupId: 1814, DisplayValue: 'Delhi'}, hiddenName: 'femaleBirthPlace', xtype: 'xcombo', mode: 'remote', pageSize: 10, storeConfig: {url: 'controllers/DAL.aspx', baseParams: {type: 'City', ParentRecordType: 'Country', ScopeId: 95}}})
                ]
            }],
            bodyStyle: "padding:5px;",
            tbar: [modeButton],
            buttons: buttons
        };
        
        buttons.push({
            text: 'Submit',
            handler: function() {
                var form = inputPanel.getForm();
                form.submit({
                    waitMsg: 'Calculating...',
                    params: {"info": "main", "matchingMode": this.matchingMode},
                    success: function(form, action) {
                        var result = action.result;
                        if(result.data) {
                            this.loadData(result.data);
                        }
                        Ext.ux.SlidingWindow.msg('Note', 'Please share your feedback about Online Kundli at our blog at <a href="blog">http://www.durlabh.com/blog</a>');
                    },
                    failure: function(form, action) {
                        var failureType = action.failureType;
                        if(failureType == Ext.form.Action.CLIENT_INVALID) {
                            Ext.Msg.alert('Error', 'Please fill all the required fields');
                        } else {
                            Ext.Msg.alert('Error', 'An unhandled error has occured. Please try again later');
                        }
                    },
                    scope: this
                }, this);
            },
            scope: this
        });

        inputPanel = new Ext.form.FormPanel(inputPanel);
        this.inputPanel = inputPanel;
        
        Ext.ux.SetCascading(this.fields.birthCountry, this.fields.birthPlace);
        Ext.ux.SetCascading(this.fields.femaleBirthCountry, this.fields.femaleBirthPlace);

        var horoTabs = [];
        // Default portlets
        horoTabs.push({column: 0, item: this.genPrediction});
        horoTabs.push({column: 0, item: this.rashiPrediction});
        horoTabs.push({column: 0, item: this.planetPrediction});
        horoTabs.push({column: 0, item: this.basicInfo});
        horoTabs.push({column: 0, item: this.vimst});
        horoTabs.push({column: 1, item: this.niryan});
        horoTabs.push({column: 1, item: this.moonChart});
        horoTabs.push({column: 2, item: this.lagnaChart});
        horoTabs.push({column: 2, item: this.navamsaChart});
        horoTabs.push({column: 0, item: this.niryanBhavChalitChart});
        horoTabs.push({column: 1, item: this.sayan});
        horoTabs.push({column: 2, item: this.aspects});
        horoTabs.push({column: 0, item: this.bhavSpasht});
        horoTabs.push({column: 1, item: this.chalitChart});
        horoTabs.push({column: 2, item: this.yogini});
        
        var matchTabs = [];
        matchTabs.push({column: 0, item: this.matchBasicInfo});
        matchTabs.push({column: 1, item: this.matchResult});

        var portalMode = false;
        
        if(portalMode) {
            for(var i=0, len=childTabs.length; i<len; i++) {
                DA.Portal.items.add(childTabs[i]);
            }
            DA.Portal.columns = 3;
            DA.Portal.configure();
        }

        this.tabPanel = new Ext.TabPanel({
            activeTab: 0,
            closeAction: 'hide',
            enableTabScroll: true,
            deferredRender: false,
            layoutOnTabChange: true,
            items: [
                inputPanel
            ]
        });
        
        var loaded = false;
        
        this.tabPanel.setPanelVisibility = function(panel, visible) {
            if(visible) {
                this.unhideTabStripItem(panel);
            } else {
                this.hideTabStripItem(panel);
            }
        };
        
        this.Horo = function() {
            this.matchingMode = false;
            this.tabPanel.setActiveTab(inputPanel);
            this.setPanelVisibility();
        };

        this.Match = function() {
            this.matchingMode = true;
            this.tabPanel.setActiveTab(inputPanel);
            this.setPanelVisibility();
        };
        
        this.loadData = function(jsonData) {
            
            Kundli.Dict.sGraha = jsonData.grahanames;

            if(!loaded) {
                if(portalMode) {
                    this.tabPanel.add(DA.Portal.portalPage);
                } else {
                    for(var i=0, len=horoTabs.length; i<len; i++) {
                        var tab = horoTabs[i].item;
                        this.tabPanel.add(tab);
                    }

                    for(var i=0, len=matchTabs.length; i<len; i++) {
                        var tab = matchTabs[i].item;
                        this.tabPanel.add(tab);
                    }
                }
                loaded = true;
            }
            if(portalMode) {
                this.tabPanel.setActiveTab(DA.Portal.portalPage);
            } else {

                var firstTab = null;
                for(var i=0, len=horoTabs.length; i<len; i++) {
                    var tab = horoTabs[i].item;
                    this.tabPanel.setPanelVisibility(tab, !this.matchingMode);
                    if(firstTab == null && !this.matchingMode) {
                        firstTab = tab;
                    }
                }

                for(var i=0, len=matchTabs.length; i<len; i++) {
                    var tab = matchTabs[i].item;
                    this.tabPanel.setPanelVisibility(tab, this.matchingMode);
                    if(firstTab == null && this.matchingMode) {
                        firstTab = tab;
                    }
                }
                this.tabPanel.setActiveTab(firstTab);
            }

            this.nativeData = inputPanel.getForm().getValues();
            
            var childGrids = [];
            var charts = [];
            var others = [];
            
            if(this.matchingMode) {
                childGrids = [this.matchResult, this.matchBasicInfo];
            } else {
                childGrids = [this.niryan, this.basicInfo, this.sayan, this.aspects, this.vimst, this.yogini, this.bhavSpasht];
                charts = [this.lagnaChart, this.moonChart, this.navamsaChart, this.niryanBhavChalitChart, this.chalitChart];
                others = [this.rashiPrediction, this.genPrediction, this.planetPrediction];
            }
            
            for(var i=0;i<childGrids.length;i++) {
                var childGrid = childGrids[i];
                var data = childGrid.dashaType ? jsonData[childGrid.dashaType] : jsonData;
                childGrid.getStore().loadData(data);
            }
            
            for(var i=0; i<charts.length; i++) {
                charts[i].setData(jsonData.saptavarga);
            }
            
            for(var i=0; i<others.length; i++) {
                others[i].setData(jsonData);
            }
        };
        
        var north = {
            region:'north',
            contentEl: 'north',
            autoShow: true,
            height: 250,
            border: false,
            bodyStyle: 'background-color:black;'
        };
        
        var south = {
            region:'south',
            contentEl: 'south',
            autoShow: true,
            height: 30,
            border: false,
            bodyStyle: 'background-color:black;'
        };
        
        var east = {
            title: 'Information',
            region: 'east',
            contentEl: 'east',
            autoShow: true,
            autoScroll: true,
            width: 200
        };
        
        var west = {
            title: 'Navigation',
            region: 'west',
            contentEl: 'west',
            autoShow: true,
            autoScroll: true,
            width: 200
        };

        Ext.apply(this.tabPanel, {
            region: "center"
        });
        
        var viewport = new Ext.Viewport({
            layout:'border',
            items: [north, this.tabPanel, south, east, west]
        });
        
        this.fields.birthCountry.store.load({
            callback: function(records, options, success) {
                if(success) {
                    this.fields.femaleBirthCountry.store.loadData(this.fields.birthCountry.store.reader.jsonData);
                }
            },
            scope: this
        }, this);
        
        this.fields.birthPlace.setDisabled(false);
        
        this.setPanelVisibility();
    }
}