var level = 0;
var maptype = 0;
var region = -1;
var thematic = false;
var election = '2004';
var constituency = -1;
var ds;
var graphtype = 0;
var btns;
	
	function ToggleRest(btnIndex)
	{
		for(i = 0; i < btns.length; ++i)
		{
			if(i != btnIndex)
				btns[i].toggle(false);
			else
				btns[i].toggle(true);
		}
	}

	
	function OnGraphOptionsClicked(graphOption)
	{		
		ToggleRest(graphOption);
		if (graphOption != graphtype) {
			graphtype = graphOption;
			UpdateGraph(1);
		}
	}

Ext.onReady(function(){
	w = screen.width;
	h = screen.height;
	
	imageX = (w <= 1024) ? (w > 800) ? 85 : 0 : 0 ; 
	leftWidth = (w >= 1024) ? 200 : 260 ; 
	//alert(imageX);
	
//    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	var detailEl;
	
	//createDS();
	

var mapPanel = {
	id:'map-panel',
    layout:'absolute',
	border:false,
	bodyBorder:false,
	hideBorders:true,
	defaults: {bodyStyle: 'padding:0px'},
    items: [{
		x:imageX,
		y:0,       
        //height: 400,
		contentEl:'map'
    }]
};

var graphPanel = {
	id:'graph-panel',
	layout:'fit',
	border:false,
	hideBorders:true,
	bodyBorder:false,
	tbar: [
        {
            id: 'histogram',
            text: 'Histogram',
			enableToggle:true,
			pressed: true,
	//		handler:OnGraphOptionsClicked,
			//toggleGroup:'graphs',
            //toggleHandler: OnGraphOptionsClicked
			handler: OnGraphOptionsClicked.createDelegate(this,[0])
        },
        //'->',  greedy spacer so that the buttons are aligned to each side
        {
            id: 'pie',
            text: 'Pie Chart',
			enableToggle:true,
			//toggleGroup:'graphs',
			//toggleHandler: OnGraphOptionsClicked
//            handler: OnGraphOptionsClicked//navHandler.createDelegate(this, [1])
			handler: OnGraphOptionsClicked.createDelegate(this,[1])
        /*},'-',{
			id: 'performance',
			text: 'Performance',
			enableToggle:true,
			handler: Hiide.createDelegate(this)*/
		},{
			id:'line',
			text:'Line Graph', 
			handler: OnGraphOptionsClicked.createDelegate(this, [2])
		 },{
		 	id:'histo',
			text: 'Bars',
			handler: OnGraphOptionsClicked.createDelegate(this, [4])
		},{
			id:'stack',
			text: 'Stacked Bars',
			handler: OnGraphOptionsClicked.createDelegate(this, [3])
		}					
    ],
	items:[{       
		contentEl:'graph'
    }]
};
	
	/*
	 * ================  BorderLayout config  =======================
	 */ 
	 
	var border = {
		id:'border-panel',
		//title: 'Border Layout',
		layout:'border',
		bodyBorder: false,
		defaults: {
			collapsible: true,
			split: true,
			animFloat: false,
			autoHide: false,
			useSplitTips: true,
			bodyStyle: 'padding:15px'
		},
		items: [{
			title: '<a href="javascript:EnlargeTable(\'maxtable.php\');">Statistics</a> : <a href="javascript:EnlargeTable(\'trend_table.php\');">Trend</a>',
			bodyStyle:'padding:0px',
			region: 'south',
			height: 150,
			minSize: 75,
			maxSize: 250,
			cmargins: '5 0 0 0',
			contentEl:'stats',
			layout:'fit'
		}, {
			title: '<a href="../index1.php">Map</a>',
			region:'center',
			collapsible:false,
			id: 'card-panel', 
			layout:'card',
			activeItem: 0, // make sure the active item is set on the container config!
			bodyStyle: 'padding:0px',
			defaults: {
				// applied to each contained panel
				border:false
			},
			// the panels (or "cards") within the layout
			items: [
				mapPanel
			,
				graphPanel
			,{
				id: 'card-2',
				html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
			}]
		}]
	};



	
	var contentPanel = ({
		id: 'content-panel',
		region: 'center', // this is what makes this panel into a region within the containing layout
		layout: 'card',
		margins: '2 2 5 0',
		activeItem: 0,
		border: false,
		items: [ border ]
	});
	
	
    
		
	// Go ahead and create the TreePanel now so that we can use it below
    var treePanel = {
    	id: 'menu-panel',
    	title: 'Menu',
		collapsible:true,
        region:'north',
        split: true,
        height: 420,
        //minSize: 150,
		//maxSize: 200,
		layout:'absolute',
		items:[{
			xtype:'label',
			text:'Data',
			x:7,
			y:7
		},{
			xtype:'radio',
			boxLabel:'Presidential',
			name:'maptype',
			inputValue:'0',	
			id:'maptypePres',
			checked:true,
			x:7,
			y:27		
		},{
			xtype:'radio',
			boxLabel:'Parliamentary',
			name:'maptype',
			inputValue:'1',
			x:7,
			y:47
		},{
			xtype:'label',
			text:'Election',
			x:7,
			y:77
		},{
			xtype:'radio',
			boxLabel:'1992',
			name:'election',
			inputValue:'1992',
			id:'electionRadio',
			x:7,
			y:97		
		},{
			xtype:'radio',
			boxLabel:'1996',
			name:'election',
			inputValue:'1996',
			x:7,
			y:117
		},{
			xtype:'radio',
			boxLabel:'2000',
			name:'election',
			inputValue:'2000',
			//id:'election2000',
			x:7,
			y:137
		},{
			xtype:'radio',
			boxLabel:'2000 (2nd Round)',
			name:'election',
			inputValue:'2001',
			x:7,
			y:157		
		},{
			xtype:'radio',
			boxLabel:'2004',
			name:'election',
			inputValue:'2004',			
			x:7,
			y:177
		},{
			xtype:'radio',
			boxLabel:'2008',
			name:'election',
			inputValue:'2008',	
			x:7,
			y:197,
			checked:true
		},{
			xtype:'radio',
			boxLabel:'2008 (2nd Round)',
			name:'election',
			inputValue:'2009',	
			x:7,
			y:217
		},{
			xtype:'label',
			text:'Other',
			x:7,
			y:247
		},{
			xtype:'checkbox',
			boxLabel:'Thematic',
			name:'thematic',
			id:'thematic',
			x:7,
			y:267			
		}]//,
		/*bbar: Ext.StatusBar({
			id: 'my-status',
			
			// defaults to use when the status is cleared:
			defaultText: 'Default status text',
			defaultIconCls: 'default-icon',
			
			// values to set initially:
			text: '<b><a href="javascript:UpdateApplication();">Go</a></b>',
			iconCls: 'ready-icon',
			items: [
				'->',
				'-',
				{
					text: 'Map',
					id:'btnMap',
					//allowDepress:true,
					//enableToggle:true,
					pressed: true,
					//handler:cardNav.createDelegate(this, ['map'])
				},
					'-',
				{
					text:'Graph',				
					//allowDepress:true,
					id:'btnGraph',
					//enableToggle: true,
					//handler:cardNav.createDelegate(this, ['graph'])
				/*},'-',{
					text:'Search',				
					id:'btnSearch',
					handler:cardNav.createDelegate(this, ['search'])
				}]			
		})*/
		
    };
	
	var adsPanel = {
		id:'ads-panel',
		title:'Sponsored Links',
		region:'center',
		bodyStyle: 'padding-bottom:15px;background:#eee;',
		autoScroll: true,
		border:false,
		contentEl:'ads'
	};
	
		
		
	// 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.
    new Ext.Viewport({
		layout: 'border',
		title: 'g e o g h a n a',
		items: [{
			xtype: 'box',
			region: 'north',
			applyTo: 'header',
			height: 30
		},{
			layout:'border',
			id:'ads-pane',
			region:'east',
			border:'false',
			collapsible:true,
			split:true,
			margins: '2 2 5 0',
			width: 175,
			//minWidth:140,
			items:[adsPanel]
		},{
			layout: 'border',
	    	id: 'layout-browser',
	        region:'west',
	        border: false,
	        split:true,
			margins: '2 0 5 5',
	        width: 275,
	        minSize: 100,
	        maxSize: 200,
			items: [treePanel, detailsPanel]
		},
			contentPanel
		],
        renderTo: Ext.getBody()
    });
	
	Ext.get('map').on('click', function(e){
		var x = e.getPageX() - Ext.get('map').getX();
		var y = e.getPageY() - Ext.get('map').getY();
		UpdateMap(x, y);	
    });
	
	var mapInit = Ext.get('map');
	mapInit.load({
		url:'map.php',
		text:'Updating...',
		scripts:true
	});
	
	btns = [Ext.getCmp('histogram'), Ext.getCmp('pie'), Ext.getCmp('line'), Ext.getCmp('stack'), Ext.getCmp('histo')];	
	
	
});
	function UpdateTable()
	{			
		var map = Ext.get('stats');
		map.load({
			url: 'table.php', // <-- change if necessary
			params: 'level=' + level + '&election=' + election + '&region=' + region + '&maptype=' + maptype
					+ '&thematic=' + thematic + '&cid=' + constituency,
			text: 'Updating...',
			scripts:true		
		});
		
		map.show();
	}
	
	function ShowView(index)
	{		
		Ext.getCmp('card-panel').layout.setActiveItem(index);
	}
	
	function UpdateApplication()
	{
		currentView = Ext.getCmp('card-panel').layout.activeItem.id;
		if(currentView == 'map-panel')
		{
			view = 0;
			UpdateMap();
		}
		else if(currentView == 'graph-panel')
		{
			view = 1;
			UpdateGraph();
		}
	}
	
	function UpdateMap(x, y)
	{
		UpdateMapWLevel(x,y,level);
	}
	
	function UpdateMapWLevel(x, y, level)
	{	
		if(!Update())
			return;
					
		var map = Ext.get('map');

		map.load({
			url: 'map.php', // <-- change if necessary
			params: 'x=' + x + '&y=' + y + '&level=' + level + '&election=' + election + '&region=' + region + '&maptype=' + maptype
					+ '&thematic=' + thematic + '&constituency=' + constituency,
			text: 'Updating...',
			scripts:true		
		});
		
		map.show();		
	}