//Global Variables
var mapLayout;
var mapID;
var mapExtension;
var mapLayers = new Array();
var tileLayers = new Array();
var measureLayers = new Array();
var measurelayerID = 0;
var gmapNavControl;
var gmapScaleControl;
var gmapOverviewControl;
var agsLayerFields =  new Array();
var agsLayerColumns = new Array();
var esriGeomTypeArr =  new Array();
var agsLayerExtents = new Array();
var agsLayerFieldsWS =  new Array(); //without shapes
var agsLayerColumnsWS = new Array(); //without shapes
var lastIdentifiedLayerID = 0;
var lastKMLUrl = '';
var addedMapItems = new Array();
var addItemsCount = 0;
var previousSelectedNodeID = 0;
var tempWindowItem = null;
var shapeFieldStatus = true;
var tempVar;

//Variables for Virtual Earth layers started.
var virtualEarthTileRoad = function(a, b){
    var tempQuad = TileToQuadKey(a.x,a.y,b);
	var quadTile = '000000';
    quadTile += (parseInt(a.y.toString(2) * 2) + parseInt(a.x.toString(2)));
    quadTile = quadTile.substring(quadTile.length - b, quadTile.length);
	tileUrl = 'http://r' + quadTile.substring(quadTile.length-1, quadTile.length) + '.ortho.tiles.virtualearth.net/tiles/r' + tempQuad + '.png?g=297&shading=hill';
    return tileUrl;
};

var virtualEarthLayerRoad = new GTileLayer(new GCopyrightCollection(''),1,22);
virtualEarthLayerRoad.getTileUrl = virtualEarthTileRoad;
virtualEarthLayerRoad.getCopyright = function(a,b) {return 'MSN Virtual Earth';}

var virtualEarthTileSat = function(a, b){
    var tempQuad = TileToQuadKey(a.x,a.y,b);
    var quadTile = '000000';
    quadTile += (parseInt(a.y.toString(2) * 2) + parseInt(a.x.toString(2)));
    quadTile = quadTile.substring(quadTile.length - b, quadTile.length);
	tileUrl = 'http://a' + quadTile.substring(quadTile.length-1, quadTile.length) + '.ortho.tiles.virtualearth.net/tiles/a' + tempQuad + '.jpeg?g=297';
    return tileUrl;
};

var virtualEarthLayerSat = new GTileLayer(new GCopyrightCollection(''),1,22);
virtualEarthLayerSat.getTileUrl = virtualEarthTileSat;
virtualEarthLayerSat.getCopyright = function(a,b) {return 'MSN Virtual Earth';}

var virtualEarthTileHbr = function(a, b){
    var tempQuad = TileToQuadKey(a.x,a.y,b);
	var quadTile = '000000';
    quadTile += (parseInt(a.y.toString(2) * 2) + parseInt(a.x.toString(2)));
    quadTile = quadTile.substring(quadTile.length - b, quadTile.length);
	tileUrl = 'http://h' + quadTile.substring(quadTile.length-1, quadTile.length) + '.ortho.tiles.virtualearth.net/tiles/h' + tempQuad + '.jpeg?g=297';
    return tileUrl;
};

var virtualEarthLayerHbr = new GTileLayer(new GCopyrightCollection(''),1,22);
virtualEarthLayerHbr.getTileUrl = virtualEarthTileHbr;
virtualEarthLayerHbr.getCopyright = function(a,b) {return 'MSN Virtual Earth';}

var VE_NORMAL_MAP = new GMapType([virtualEarthLayerRoad],G_SATELLITE_MAP.getProjection(), 'VENormalMap',{shortName:"VER"});
var VE_SATELLITE_MAP = new GMapType([virtualEarthLayerSat],G_SATELLITE_MAP.getProjection(), 'VESatelliteMap',{shortName:"VES"});
var VE_HYBRID_MAP = new GMapType([virtualEarthLayerHbr],G_SATELLITE_MAP.getProjection(), 'VEHybridMap',{shortName:"VEH"});
//Variables for Virtual Earth layers finished.

//Variables for Open Street Map layers started.
var openStreetMap = function(a, b){	
	tileUrl = 'http://tah.openstreetmap.org/Tiles/tile/' + b + '/' + a.x + '/' + a.y + '.png';
    return tileUrl;
};
var openStreetMapLayer = new GTileLayer(new GCopyrightCollection(''),1,22);
openStreetMapLayer.getTileUrl = openStreetMap;
openStreetMapLayer.getCopyright = function(a,b) {return 'Open Street Map';}
var OSM_NORMAL_MAP = new GMapType([openStreetMapLayer],G_SATELLITE_MAP.getProjection(), 'OSMNormalMap',{shortName:"OSM	"});
//Variables for Open Street Map layers finished.

//Variables for Layer Tree started.
var layerTree;
var layerTreeIndex = 0;
var layerTreeContextMenuAGS = new Ext.menu.Menu({items:[{ text: 'Remove', cls: 'x-btn-text-icon', icon: 'img/removeLayer.gif', handler: deleteLayerTreeNode },{ text: 'Layer Options', cls: 'x-btn-text-icon', icon: 'img/properties.gif', handler: openLayerInfoWindow },{ text: 'Attribute Table', cls: 'x-btn-text-icon', icon: 'img/attribTable.gif', handler: getLayerAttributeTable },{ text: 'Zoom To Layer', cls: 'x-btn-text-icon',icon: 'img/zoom2layer.gif', handler: zoom2AGSLayer }]});
var layerTreeContextMenuOther = new Ext.menu.Menu({items:[{ text: 'Remove', cls: 'x-btn-text-icon', icon: 'img/removeLayer.gif', handler: deleteLayerTreeNode },{ text: 'Layer Options', cls: 'x-btn-text-icon', icon: 'img/properties.gif', handler: openLayerInfoWindow }]});
var layerTreeLoader = new Ext.tree.TreeLoader({
	dataUrl:'dataTree.json',
	listeners: {load: prepareTreeGridOptions }
});
var layerTreeRootNode = new Ext.tree.AsyncTreeNode({
	text: 'Layers'
});
//Variables for Layer Tree finished.

//Variables for tile layers started.
var copyrightColl = new GCopyrightCollection('(c)');
copyrightColl.addCopyright(new GCopyright('(c)', new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),0,'State Hydraulic Works'));
//Variables for tile layers finished.

//Variables for measurement tool started.
var COLORS = [["red", "#ff0000"], ["orange", "#ff8800"], ["green","#008000"],["black","#000000"],
              ["blue", "#000080"], ["purple", "#800080"], ["gray","#999999"]];
var options = {};
var lineCounter_ = 0;
var shapeCounter_ = 0;
var markerCounter_ = 0;
var colorIndex_ = 0;
var featureTable_;
var descriptionCell;
//Variables for measurement tool finished.            
                     
//Variables for drag zoom tool started.
var boxStyleOpts = {
  opacity: .2,
  border: "2px solid red"
}
var otherOpts = {
  buttonHTML: "",
  buttonZoomingHTML: "",
  buttonStartingStyle: {width: '1px', height: '1px'}
};
var callbacks = {
  buttonclick: function(){},
  dragstart: function(){},
  dragging: function(x1,y1,x2,y2){},
  dragend: function(nw,ne,se,sw,nwpx,nepx,sepx,swpx){ 
		if (mapDragZoom.buttonState == 3){
			doSelection(ne,sw);			
		}
	}
};
var mapDragZoom = new DragZoomControl(boxStyleOpts, otherOpts, callbacks);
//Variables for drag zoom tool finished.

//Variables for Layer Info Window started.
var layerNameLabel = new Ext.form.TextField({id:'layerNameID', name:'layerNameName',fieldLabel: 'Layer Name', width:180,allowBlank: false, readOnly: true });
var layerTypeLabel = new Ext.form.TextField({id:'layerTypeID', name:'layerTypeName',fieldLabel: 'Layer Type', width:180,allowBlank: false, readOnly: true });
var layerUrlLabel = new Ext.form.TextField({id:'layerUrlID', name:'layerUrlName',fieldLabel: 'Layer URL', width:380,allowBlank: false, readOnly: true });
var layerOptionGridColumns =  new Ext.grid.ColumnModel([{header: "Field Name", dataIndex: 'name', sortable:true, width: 150},{header: "Field Type", dataIndex: 'type', sortable:true, width: 185},{header: "Field Alias", dataIndex: 'alias', sortable:true, width: 150}]);

var layerFieldDataReader = new Ext.data.JsonReader({fields: ['name', 'type', 'alias'],root: 'fields'});
var layerFieldDataProxy = new Ext.data.HttpProxy({url: proxyFile });
var layerFieldDataStore = new Ext.data.Store({reader: layerFieldDataReader, proxy: layerFieldDataProxy});
		
var layerFieldGrid = new Ext.grid.GridPanel({title: 'Table Fields', height: 200, hidden: true, cm: layerOptionGridColumns, ds: layerFieldDataStore });

var layerOptionsForm = new Ext.form.FormPanel({ frame:true, width: 520, height: 170,
    defaults: {labelSeparator:':', hideLabel:false},
    items: [layerNameLabel, layerTypeLabel, layerUrlLabel,
     {
		cls: 'x-form-item', border: false,
	    items: [{cls: 'x-form-item-label', html: 'Layer Transparency : (Not valid for KML/GeoRSS Layers)', border: false },
	    	    {xtype:'slider', fieldLabel:'Layer Transparency : ', name: 'layerSlider', id: 'layerSlider', minValue: 0, maxValue: 10, width: 260, value:5, increment:1}]
	  },
	  layerFieldGrid
	  ]
	});

var layerInfoWindow = new Ext.Window({ layout: 'form', id: 'layerWindowID', title: 'Layer Info', closeAction :'hide', bodyStyle: 'padding:8px', width:550,
	items:[layerOptionsForm],
	buttons:[{text:'Apply Settings', handler: changeLayerOptions}],
	listeners: {hide: function(){ layerFieldGrid.hide(); layerOptionsForm.setHeight(170); } }
});
//Variables for Layer Info Window finished.

//Variables for Attribute Table and its Windows started.
var attWindowFieldDataStore = null;
var attWindowGrid = null;
var attributeWindow = new Ext.Window({title: 'Selection Info', closeAction :'hide', width:534});
attributeWindow.on('hide', removeItemsFromMaps);
//Variables for Attribute Table and its Windows finished.

//Variables for Geocoding and its Windows started.
var geocoderClient;
var geocodeReasons=[];
var addressMarker = null;
geocodeReasons[G_GEO_SUCCESS]            = "Success";
geocodeReasons[G_GEO_MISSING_ADDRESS]    = "Missing Address: The address was either missing or had no value.";
geocodeReasons[G_GEO_UNKNOWN_ADDRESS]    = "Unknown Address:  No corresponding geographic location could be found for the specified address.";
geocodeReasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address:  The geocode for the given address cannot be returned due to legal or contractual reasons.";
geocodeReasons[G_GEO_BAD_KEY]            = "Bad Key: The API key is either invalid or does not match the domain for which it was given";
geocodeReasons[G_GEO_TOO_MANY_QUERIES]   = "Too Many Queries: The daily geocoding quota for this site has been exceeded.";
geocodeReasons[G_GEO_SERVER_ERROR]       = "Server error: The geocoding request could not be successfully processed.";
var addressTextFound = new Array();
var addressPointFound = new Array();
var addressField = new Ext.form.TextField({id:'addressFieldID', name:'addressFieldName',fieldLabel: 'Address', width:280, allowBlank: false });
var addressGridPanel = new Ext.Panel({width:380, height: 170});
var geocodeForm = new Ext.form.FormPanel({ frame:true, width: 420, height: 170,
    defaults: {labelSeparator:':', hideLabel:false},
    items: [addressField,addressGridPanel]
	});
var geocodeWindowFieldDataStore = null;
var geocodeWindowGrid = null;
var geocodeWindow = new Ext.Window({title: 'Find Address', closeAction :'hide', width:414,
	items:[geocodeForm],
	buttons:[{text:'Find Address', handler: findAddress}]
});
geocodeWindow.on('hide', function (){ if (addressMarker != null) mapID.removeOverlay(addressMarker); });
var tempGeocodePanel = null;
var revGeoCodeListener = null;
var revGeoCodeStatus = false;
//Variables for Geocoding and its Windows finished.

//Variables for Bookmark started.
var bookmarkCounter = 1;
var bookmarkArray = new Array();
var bookmarkTree;
var bookmarkTreeIndex = 0;
var bookmarkTreeContextMenu = new Ext.menu.Menu({items:[{ text: 'Remove', cls: 'x-btn-text-icon', icon: 'img/removeLayer.gif', handler: deleteBookmarkTreeNode },{ text: 'Go to Bookmark', cls: 'x-btn-text-icon',icon: 'img/zoom2layer.gif', handler: go2bookmark }]});
var bookmarkTreeLoader = new Ext.tree.TreeLoader({
	dataUrl:'bookmarks.json'
});
var bookmarkTreeRootNode = new Ext.tree.AsyncTreeNode({
	text: 'Bookmarks'
});
//Variables for Bookmark finished.

//Variables for Toolbox started.
var toolboxCounter = 1;
var toolboxArray = new Array();
var toolboxTree;
var toolboxTreeIndex = 0;
var toolboxTreeContextMenu = new Ext.menu.Menu({items:[{ text: 'Run Tool', cls: 'x-btn-text-icon',icon: 'img/runtb.gif', handler: runTool }]});
var toolboxTreeLoader = new Ext.tree.TreeLoader({
	dataUrl:'toolbox.json'
});
var toolboxTreeRootNode = new Ext.tree.AsyncTreeNode({
	text: 'Tools'
});
//Variables for Toolbox finished.

//Variables for Go2XY started.
var go2xyLatLabel = new Ext.form.TextField({id:'go2xyLatID', name:'go2xyLatName',fieldLabel: 'Latitude', width:100,allowBlank: false });
var go2xyLngLabel = new Ext.form.TextField({id:'go2xyLngID', name:'go2xyLngName',fieldLabel: 'Longitude', width:100,allowBlank: false });
var go2xyForm = new Ext.form.FormPanel({ frame:true, width: 220, height: 65,
    defaults: {labelSeparator:':', hideLabel:false},
    items: [go2xyLatLabel, go2xyLngLabel]});
var go2xyWindow = new Ext.Window({ layout: 'form', id: 'go2xyWindowID', title: 'Go to X-Y', closeAction :'hide', bodyStyle: 'padding:8px', width:250,
	items:[go2xyForm],
	buttons:[{text:'Go to XY', handler: gotoCoordinates}]
});
//Variables for Go2XY finished.

//Variables for Altitude started.
var altitudeListener = null;
var altitudeStatus = false;
//Variables for Altitude finished.

//Variables for Query and its Window started.
var agsQueryFields = new Array();
var fieldValueGridStore = null;
var fieldValueGrid = null;
var tempPanelItem = null;
var fieldValueGridPanel;
var selectedFieldColumn = '';
var tempQueryWindowItem = null;
var queryWindow = new Ext.Window({title: 'Query Layer', closeAction :'hide', width:365});
//Variables for Query and its Window finished.

//Variables for Streeview started.
var stIcon = null;
var stMarker = null;
var streetViewWindow = new Ext.Window({title: 'Street View Window', closeAction :'hide', width:400, height:350});
streetViewWindow.on('hide', onStreetViewWindowHide);
var streetViewPano = null;
var streetViewYaw = null;
var streetViewLocation = null;
var panoClient = null;
var streetViewOverlay = null;
var streetViewStatus = false;
//Variables for Streeview finished.

//Variables for Measurement Tool started.
var measureWindow = new Ext.Window({id: 'measureWindowID', height:160, width: 250, title: 'Measurement Tool', 
									closable: true, draggable: true, closeAction :'hide', 
									collapsible: true, contentEl:'measurementTool', listeners: {hide: function(){ shiftMeasure(1); } } });
//Variables for Measurement Tool finished.

//Variables for Add Data/Service Tool started.
var serviceTypes = new Ext.data.SimpleStore({
	fields: ['id', 'serviceType'],
	data : [['1','Static Map Tile Service'],['2','ArcGIS Server Map Service'],['3','ArcGIS Server Tile Service'],['4','WMS Service (via Tiles)'],['5','KML/GeoRSS Data']]
});
var serviceNameTextbox = new Ext.form.TextField({id:'serviceNameID', name:'serviceNameName',fieldLabel: 'Service Name', width:180,allowBlank: false});
var serviceTypeCombobox =  new Ext.form.ComboBox({ id:'serviceTypeID', name: 'serviceTypeName', fieldLabel: 'Service Type', mode: 'local', store: serviceTypes, displayField: 'serviceType', valueField:'id', width: 180, editable:false, triggerAction: 'all' });
var serviceUrlTextbox = new Ext.form.TextField({id:'serviceUrlID', name:'serviceUrlName',fieldLabel: 'Service URL', width:180,allowBlank: false});
var serviceFormPanel = new Ext.FormPanel({bodyStyle: 'padding:4px',items:[serviceNameTextbox, serviceTypeCombobox, serviceUrlTextbox], buttons:[{text:'Add Service', handler: addServiceToMap}]});
var serviceWindow = new Ext.Window({ layout: 'form', id: 'serviceWindowID', title: 'Add Services', closeAction :'hide', bodyStyle: 'padding:3px', width:320,
	items:[serviceFormPanel]
});
//Variables for Add Data/Service Tool finished.

//Variables for Google Maps Options started.
var gmapNavTypes = new Ext.data.SimpleStore({
	fields: ['id', 'className', 'navType'],
	data : [['0','no','NO pan/zoom control'],['1','new GLargeMapControl()','Large pan/zoom control'],['2','new GSmallMapControl()','Smaller pan/zoom control'],['3','new GSmallZoomControl()','Small zoom control (no pan) ']]
});
var gmapScaleTypes = new Ext.data.SimpleStore({
	fields: ['id', 'className', 'scaleType'],
	data : [['0','no','NO Scale Control'],['1','new GScaleControl()','Scale Control']]
});
var gmapOverviewTypes = new Ext.data.SimpleStore({
	fields: ['id', 'className', 'viewType'],
	data : [['0','no','NO Overview Map'],['1','new GOverviewMapControl()','Overview Map']]
});
var gmapWheelZoomTypes = new Ext.data.SimpleStore({
	fields: ['id', 'className', 'viewType'],
	data : [['0','no','Disable Wheel Zoom'],['1','yes','Enable Wheel Zoom']]
});
var gmapContZoomTypes = new Ext.data.SimpleStore({
	fields: ['id', 'className', 'viewType'],
	data : [['0','no','Disable Continuous Zoom'],['1','yes','Enable Continuous Zoom']]
});
var gmapNavCombobox =  new Ext.form.ComboBox({ id:'gmapNavID', name: 'gmapNavName', mode: 'local', store: gmapNavTypes, fieldLabel: 'Navigation', displayField: 'navType', valueField:'className', width: 280, editable:false, triggerAction: 'all', value: 'no' });
var gmapScaleCombobox =  new Ext.form.ComboBox({ id:'gmapScaleID', name: 'gmapScaleName', mode: 'local', store: gmapScaleTypes, fieldLabel: 'Scale', displayField: 'scaleType', valueField:'className', width: 280, editable:false, triggerAction: 'all', value: 'no' });
var gmapOverviewCombobox =  new Ext.form.ComboBox({ id:'gmapOverviewID', name: 'gmapOverviewName', mode: 'local', store: gmapOverviewTypes, fieldLabel: 'Overview Map',displayField: 'viewType', valueField:'className', width: 280, editable:false, triggerAction: 'all', value: 'no' });
var gmapWheelZoomCombobox =  new Ext.form.ComboBox({ id:'gmapWheelZoomID', name: 'gmapWheelZoomName', mode: 'local', store: gmapWheelZoomTypes, fieldLabel: 'Wheel Zoom',displayField: 'viewType', valueField:'className', width: 280, editable:false, triggerAction: 'all', value: 'no' });
var gmapContZoomCombobox =  new Ext.form.ComboBox({ id:'gmapContZoomID', name: 'gmapContZoomName', mode: 'local', store: gmapContZoomTypes, fieldLabel: 'Continuous Zoom',displayField: 'viewType', valueField:'className', width: 280, editable:false, triggerAction: 'all', value: 'no' });
var gmapOptionsFormPanel = new Ext.FormPanel({bodyStyle: 'padding:4px',items:[gmapNavCombobox,gmapScaleCombobox,gmapOverviewCombobox,gmapWheelZoomCombobox,gmapContZoomCombobox]});
var configureTabGMap = new Ext.Panel({layout:'form', title:'Google Maps Options', width: 400, items:[gmapOptionsFormPanel]});
var configureTabOther = new Ext.Panel({title:'About Summit Map',html:'<br><br><br><br><center><b>Developed by Alper Dinçer <br><br><a href=\'http://www.geowebdeveloper.com\'>www.geowebdeveloper.com</a> <br><br>© 2009</b></center>'});
var configureTabPanel = new Ext.TabPanel({border:false, activeTab: 0, anchor:'100% 100%', frame:true, /*tabPosition:'bottom' ,*/ defaults:{autoScroll: true}, 
								items:[configureTabGMap,configureTabOther]});
var configureWindow = new Ext.Window({ layout: 'form', id: 'configureWindowID', title: 'Configure Mashup', height:260, width: 450, modal: true, closeAction :'hide',
	items:[configureTabPanel], buttons:[{text:'Apply Settings', handler: applyGmapSettings}]
});
//Variables for Google Maps Options finished.

//Variables for top toolbar and menu started.
var gmapTypeMenu = [{ text: 'Google-Road Map', checked: true, group: 'gmap', maptype:G_NORMAL_MAP, handler: changeBaseMap}, 
					{ text: 'Google-Satellite', checked: false, group: 'gmap', maptype:G_SATELLITE_MAP, handler: changeBaseMap}, 
					{ text: 'Google-Hybrid', checked: false, group: 'gmap', maptype:G_HYBRID_MAP, handler: changeBaseMap},
					{ text: 'Google-Physical', checked: false, group: 'gmap', maptype:G_PHYSICAL_MAP, handler: changeBaseMap},
					{ text: 'Google-Map Maker-Road', checked: false, group: 'gmap', maptype:G_MAPMAKER_NORMAL_MAP, handler: changeBaseMap},
					{ text: 'Google-Map Maker-Hybrid', checked: false, group: 'gmap', maptype:G_MAPMAKER_HYBRID_MAP, handler: changeBaseMap},
					{ text: 'Virtual Earth-Road Map', checked: false, group: 'gmap', maptype:VE_NORMAL_MAP, handler: changeBaseMap},
					{ text: 'Virtual Earth-Satellite', checked: false, group: 'gmap', maptype:VE_SATELLITE_MAP, handler: changeBaseMap},
					{ text: 'Virtual Earth-Hybrid', checked: false, group: 'gmap', maptype:VE_HYBRID_MAP, handler: changeBaseMap},
					{ text: 'Open Street Map', checked: false, group: 'gmap', maptype:OSM_NORMAL_MAP, handler: changeBaseMap}];														

var toolbarItems = [{xtype: 'tbbutton', text:'Zoom In',cls: 'x-btn-text-icon',icon: 'img/zoom-in.gif', tooltip:'Fixed Zoom In', handler: function(){ mapDragZoom.initiateZoom(1); /*mapID.zoomIn();*/ }},
					{xtype: 'tbbutton', text:'Zoom Out',cls: 'x-btn-text-icon',icon: 'img/zoom-out.gif', tooltip:'Fixed Zoom Out', handler: function(){ mapDragZoom.initiateZoom(2); /*mapID.zoomOut();*/ }},
					{xtype: 'tbbutton', text:'Full Extent',cls: 'x-btn-text-icon',icon: 'img/full-extent.gif', tooltip:'Shows the Full Extent of Map', handler: function(){ mapID.setCenter(new GLatLng(centerx, centery), initialLevel); }},
					{xtype: 'tbbutton', id:'tbarMeasureButton', text:'Measure',cls: 'x-btn-text-icon',icon: 'img/measure.gif', tooltip:'Measurement Tool', handler: function(){ shiftMeasure(0); }},					
					{xtype: 'tbbutton', text:'Bookmark',cls: 'x-btn-text-icon',icon: 'img/bmark.gif', tooltip:'Bookmark Current View', handler: function(){ openBookmarkWindow(); }},
					{xtype: 'tbseparator'},
					{xtype: 'tbbutton', id:'tbarIdentityButton', text:'Identify',cls: 'x-btn-text-icon',icon: 'img/drag-zoom.gif', tooltip:'Identify Selected Layer Items', handler: function(){ mapDragZoom.initiateZoom(3);  }},
					{xtype: 'tbbutton', id:'tbarQueryButton', text:'Query',cls: 'x-btn-text-icon',icon: 'img/attSelect.gif', tooltip:'Query Layers by Attributes', handler: function(){ openCloseQueryWindow(); }},					
					{xtype: 'tbseparator'},
					{xtype: 'tbbutton', id:'tbarAddDataButton', text:'Add Data',cls: 'x-btn-text-icon',icon: 'img/add-data.gif', tooltip:'Add Data/Services Over Google Maps', handler: function(){ openCloseServiceWindow(); }},
					{xtype: 'tbseparator'},
					{xtype: 'tbbutton',text: 'Base Maps', menu: gmapTypeMenu, tooltip:'Change Base Map Types - Google or Virtual Earth'},
					{xtype: 'tbseparator'},
					{xtype: 'tbbutton', id:'tbarSVButton', text:'Street View',cls: 'x-btn-text-icon',icon: 'img/streetv.gif', tooltip:'Shows the street view', handler: function(){ getStreetView(); }},					
					{xtype: 'tbfill'},
					{xtype: 'tbbutton', id:'tbarOptionsButton', text:'Options',cls: 'x-btn-text-icon',icon: 'img/options.png', tooltip:'Configure Mashup', handler: function(){ configureWindow.setAnimateTarget(Ext.getCmp('tbarOptionsButton').getEl()); configureWindow.show(); }}];
//Variables for top toolbar and menu finished.

//Variables for left and bottom area started.
var accordionItems = [{title:'Layers',html:'<div id=\'treeViewAccordion\'></div><div id=\'animationPoint\'></div>'},
					  {title:'Toolbox', html:'<div id=\'toolboxPanel\'></div>'},
					  {title:'Bookmarks', html:'<div id=\'bookmarkPanel\'></div>'}];
	
var statusBar = new Ext.StatusBar({ id: 'mapStatusBarID', defaultText: 'Ready' });
var coordinateBar = new Ext.StatusBar({ id: 'coordinateBarID', defaultText: 'Coordinates' });
//Variables for left and bottom area finished.

//Variables for general layout started.
var layoutItems = [{region: 'north', xtype: 'toolbar', items: toolbarItems},
				   {region: 'west', xtype: 'panel', id:'leftAccordionPanel', layout: 'accordion', animate: true, split: true, collapsible: true, bbar: coordinateBar, title: 'Menu Bar', width: 200, items: accordionItems},
				   {id:'mapPanel', region: 'center', xtype: 'panel'},
				   {region: 'south', xtype: 'panel', height: 27, bbar: statusBar}];
//Variables for general layout finished.