/*
 * Ext JS Library 3.0 RC2
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */


Ext.onReady(function() {
    
    // The only requirement for this to work is that you must have a hidden field and
    // an iframe available in the page with ids corresponding to Ext.History.fieldId
    // and Ext.History.iframeId.  See history.html for an example.
    Ext.History.init();
    
    // Needed if you want to handle history for multiple components in the same page.
    // Should be something that won't be in component ids.
    var tokenDelimiter = ':';
    
    var tp = new Ext.TabPanel({
        renderTo: Ext.getBody(),
        id: 'main-tabs',
        height: 300,
        width: 750,
        activeTab: 0,
        
        items: [{
            xtype: 'tabpanel',
            title: 'HOME',
            id: 'tab',
            activeTab: 0,
            tabPosition: 'bottom',

            
            items: [{
                title: 'Home',
                id: 'home',
                autoLoad:'home.html'
            },{
                title: 'Areas',
                id: 'area',
                autoLoad:'area.html'
            },{
                title: 'Bytes',
                id: 'byte',
                autoLoad:'bytes.html'
            },{
                title: 'Density',
                id: 'density',
                autoLoad:'density.html'
            },{
                title: 'Energy',
                id: 'energy',
                autoLoad:'energy.html'
            },{
                title: 'Force',
                id: 'force',
                autoLoad:'force.html'
            },{
                title: 'Length',
                id: 'length',
                autoLoad:'length.html'
            },{
                title: 'Mass',
                id: 'mass',
                autoLoad:'mass.html'
            },{
                title: 'Power',
                id: 'power',
                autoLoad:'power.html'
            },{
                title: 'Pressure',
                id: 'pressure',
                autoLoad:'pressure.html'
            },{
                title: 'Speed',
                id: 'speed',
                autoLoad:'speed.html'
            },{
                title: 'Temperature',
                id: 'temperature',
                autoLoad:'temperature.html'
            },{
                title: 'Volume',
                id: 'volume',
                autoLoad:'volume.html'
            } ],
            
            listeners: {
                'tabchange': function(tabPanel, tab){
                    Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
                }
            }
        },{
            title: 'About MATEORS',
            id: 'tab2',
            autoLoad:'about.html'


        }
],





        
        listeners: {
            'tabchange': function(tabPanel, tab){
                // Ignore tab1 since it is a separate tab panel and we're managing history for it also.
                // We'll use its handler instead in that case so we don't get duplicate nav events for sub tabs.
                if(tab.id != 'tab1'){
                    Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);

                }
            }
        }
    });
    
    // Handle this change event in order to restore the UI to the appropriate history state
    Ext.History.on('change', function(token){
        if(token){
            var parts = token.split(tokenDelimiter);
            var tabPanel = Ext.getCmp(parts[0]);
            var tabId = parts[1];
            
            tabPanel.show();
            tabPanel.setActiveTab(tabId);
        }else{
            // This is the initial default state.  Necessary if you navigate starting from the
            // page without any existing history token params and go back to the start state.
            tp.setActiveTab(0);
            tp.getItem(0).setActiveTab(0);
        }
    });
    
});