Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);

Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', '/scripts/ext-4.0.0/examples/ux');

Ext.require([
    'Ext.tip.QuickTipManager',
    'Ext.container.Viewport',
    'Ext.layout.*',
    'Ext.form.Panel',
    'Ext.form.Label',
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.tree.*',
    'Ext.selection.*',
    'Ext.tab.Panel',
    'Ext.ux.layout.Center'  
]);

Ext.onReady(function(){
	//Ext.MessageBox.alert('TEST','Testing');
	
	//initPanel();
	//initLayout();
	//initChart();
	
	initMenu();
});

function drawFlag(){
	// Draw the TX Flag
	var drawComponent = Ext.create('Ext.draw.Component',{
		width: 300,
		height: 200,
		gradients: [{
			id: 'grad1',
			angle: 100,
			stops: {
				0: {
					color: '#FFFFFF'
				},
				100: {
					color: '#AAAAAA'
				}
			}
		}],
		items: [{
			// The blue section
			type: 'rect',
			fill: '#002868',
			x: 0,
			y: 0,
			width: 100,
			height: 200
		},{
			// The white section
			type: 'rect',
			fill: '#FFFFFF',
			x: 100,
			y: 0,
			width: 200,
			height: 100
		},{
			// The red section
			type: 'rect',
			fill: '#BF0A30',
			x: 100,
			y: 100,
			width: 200,
			height: 100
		},{
			// The star
			type: 'path',
			path: ['M 50 62 l -8.625 25.89 l -27.29 0 l 21.75 15.76 l -8.25 25.89 l 22.125 -16.14',
				'l 22.125 16.14 l -8.25 -25.89 l 21.75 -15.76 l -27.29 0 Z'].join(''),
			fill: 'url(#grad1)'
		}]
	});
    
    return drawComponent;
}

function initMenu(){
	var menu = Ext.create('Ext.menu.Menu',{
		id: 'mainMenu',
		style: {
			overflow: 'visible'
		},
		items: [{
			text: 'Charts'
		},{
			text: 'Drawing'
		},{
			text: 'More Testing'
		}]
	});
	
	var tb = Ext.create('Ext.toolbar.Toolbar');
	tb.suspendLayout = true;
	tb.render('divMainTb');
	
	tb.add({
			text: 'Charts',
			handler: function(){
				Ext.create('Ext.Panel',{
					renderTo: 'divMain',
					items: [cube]
				});
			}
		},{
			text: 'Drawing',
			handler: function(){
				var myCube = new Cube();
				var cube = myCube.get_cube({
					x: 0,
					y: 0,
					w: 100,
					h: 100,
					d: 100,
					r: 0
				});
				
				Ext.create('Ext.Panel',{
					renderTo: 'divMain',
					items: [cube]
				});
			}
		},{
			text: 'More Testing'
		});
}

function initLayout(config){
    Ext.tip.QuickTipManager.init();

    // This is an inner body element within the Details panel created to provide a "slide in" effect
    // on the panel body without affecting the body's box itself.  This element is created on
    // initial use and cached in this var for subsequent access.
    var detailEl;
    
    var flag = drawFlag();
    
    // Gets all layouts examples
    var layoutExamples = [];
    
    /*
    layoutExamples.push({
		id: 'center-panel',
		layout: 'ux.center',
		items: {
			title: 'Centered Panel: 75% of container width and fit height',
			layout: 'ux.center',
			autoScroll: true,
			widthRatio: 0.75,
			bodyStyle: 'padding:20px 0;',
			items: [{
				title: 'Inner Centered Panel',
				html: 'Fixed 300px wide and auto height. The container panel will also autoscroll if narrower than 300px.',
				width: 300,
				frame: true,
				autoHeight: true,
				bodyStyle: 'padding:10px 20px;'
			}]
		}
	});
	
	layoutExamples.push({
		id: 'chartCmp',
		xtype: 'chart',
		style: 'background:#fff',
		animate: true,
		store: store1,
		legend: {
			position: 'bottom'
		},
		axes: [{
			type: 'Numeric',
			grid: true,
			position: 'left',
			fields: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
			title: 'Number of Hits',
			grid: {
				odd: {
					opacity: 1,
					fill: '#ddd',
					stroke: '#bbb',
					'stroke-width': 1
				}
			},
			minimum: 0,
			adjustMinimumByMajorUnit: 0
		}, {
			type: 'Category',
			position: 'bottom',
			fields: ['name'],
			title: 'Month of the Year',
			grid: true,
			label: {
				rotate: {
					degrees: 315
				}
			}
		}],
		series: [{
			type: 'area',
			highlight: false,
			axis: 'left',
			xField: 'name',
			yField: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
			style: {
				opacity: 0.93
			}
		}]
	});
	*/
	//layoutExamples.push(flag);
	
	var myCube = new Cube();
	layoutExamples.push(myCube.get_cube({
		x: 0,
		y: 0,
		w: 100,
		h: 100,
		d: 100,
		r: 0
	}));


    var contentPanel = {
         id: 'content-panel',
         region: 'center', // this is what makes this panel into a region within the containing layout
         //layout: 'card',
         margins: '2 5 5 0',
         activeItem: 0,
         border: false,
         items: layoutExamples
    };
     
    var store = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true
        },
        proxy: {
            type: 'ajax',
            url: 'http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/tree-data.json'
        }
    });
    
    // Go ahead and create the TreePanel now so that we can use it below
     var treePanel = Ext.create('Ext.tree.Panel', {
        id: 'tree-panel',
        title: 'Sample Layouts',
        region:'north',
        split: true,
        height: 360,
        minSize: 150,
        rootVisible: false,
        autoScroll: true,
        store: store
    });
    
    // Assign the changeLayout function to be called on tree node click.
    treePanel.getSelectionModel().on('select', function(selModel, record) {
        if (record.get('leaf')) {
            Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel');
             if (!detailEl) {
                var bd = Ext.getCmp('details-panel').body;
                bd.update('').setStyle('background','#fff');
                detailEl = bd.createChild(); //create default empty div
            }
            detailEl.hide().update(Ext.getDom(record.getId() + '-details').innerHTML).slideIn('l', {stopAnimation:true,duration: 200});
        }
    });
    
    // This is the Details panel that contains the description for each example layout.
    var detailsPanel = {
        id: 'details-panel',
        title: 'Details',
        region: 'center',
        bodyStyle: 'padding-bottom:15px;background:#eee;',
        autoScroll: true,
        html: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'
    };
 
    // Finally, build the main layout once all the pieces are ready.  This is also a good
    // example of putting together a full-screen BorderLayout within a Viewport.
    Ext.create('Ext.Viewport', {
        layout: 'border',
        title: 'timmyboy.net My Personal Playground',
        items: [{
            xtype: 'box',
            id: 'header',
            region: 'north',
            html: '<h1> Ext.Layout.Browser</h1>',
            height: 30
        },{
            layout: 'border',
            id: 'layout-browser',
            region:'west',
            border: false,
            split:true,
            margins: '2 0 5 5',
            width: 275,
            minSize: 100,
            maxSize: 500,
            items: [treePanel, detailsPanel]
        }, 
            contentPanel
        ],
        renderTo: Ext.getBody()
    });
}

function initPanel(config){
    var panel = Ext.create('Ext.Panel', {
        id:'main-panel',
        baseCls:'x-plain',
        renderTo: Ext.getBody(),
        layout: {
            type: 'table',
            columns: 3
        },
        // applied to child components
        defaults: {frame:true, width:200, height: 200},
        items:[{
				title:'Item 1'
			},{
				title:'Item 2'
			}
        ]
    });
}


function initChart(){
	var win = Ext.create('Ext.Window', {
        width: 800,
        height: 600,
        hidden: false,
        shadow: false,
        maximizable: true,
        title: 'Area Chart',
        renderTo: Ext.getBody(),
        layout: 'fit',
        tbar: [{
            text: 'Reload Data',
            handler: function() {
                store1.loadData(generateData());
            }
        }, {
            enableToggle: true,
            pressed: true,
            text: 'Animate',
            toggleHandler: function(btn, pressed) {
                var chart = Ext.getCmp('chartCmp');
                chart.animate = pressed ? { easing: 'ease', duration: 500 } : false;
            }
        }],
        items: {
            id: 'chartCmp',
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            store: store1,
            legend: {
                position: 'bottom'
            },
            axes: [{
                type: 'Numeric',
                grid: true,
                position: 'left',
                fields: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
                title: 'Number of Hits',
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 1
                    }
                },
                minimum: 0,
                adjustMinimumByMajorUnit: 0
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: 'Month of the Year',
                grid: true,
                label: {
                    rotate: {
                        degrees: 315
                    }
                }
            }],
            series: [{
                type: 'area',
                highlight: false,
                axis: 'left',
                xField: 'name',
                yField: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
                style: {
                    opacity: 0.93
                }
            }]
        }
    }); 
}


function getChart(config){
    return Ext.create('Ext.Window', {
        width: 800,
        height: 600,
        hidden: false,
        shadow: false,
        maximizable: true,
        title: 'Area Chart',
        //renderTo: Ext.getBody(),
        layout: 'fit',
        tbar: [{
            text: 'Reload Data',
            handler: function() {
                store1.loadData(generateData());
            }
        }, {
            enableToggle: true,
            pressed: true,
            text: 'Animate',
            toggleHandler: function(btn, pressed) {
                var chart = Ext.getCmp('chartCmp');
                chart.animate = pressed ? { easing: 'ease', duration: 500 } : false;
            }
        }],
        items: {
            id: 'chartCmp',
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            store: store1,
            legend: {
                position: 'bottom'
            },
            axes: [{
                type: 'Numeric',
                grid: true,
                position: 'left',
                fields: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
                title: 'Number of Hits',
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 1
                    }
                },
                minimum: 0,
                adjustMinimumByMajorUnit: 0
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: 'Month of the Year',
                grid: true,
                label: {
                    rotate: {
                        degrees: 315
                    }
                }
            }],
            series: [{
                type: 'area',
                highlight: false,
                axis: 'left',
                xField: 'name',
                yField: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
                style: {
                    opacity: 0.93
                }
            }]
        }
    });
}