// TopToolbar
function createToolbar(map){
	toolbar = new mapfish.widgets.toolbar.Toolbar({
	    map: map, 
	    configurable: false
    });
    // this is a quick fix for http://trac.mapfish.org/trac/mapfish/ticket/126
    toolbar.autoHeight = false;
    toolbar.height = 28;
    
    toolbar.addControl(
        new OpenLayers.Control.ZoomToMaxExtent({
            map: map,
            title: 'Zoom to maximum map extent'
        }), {
            iconCls: 'zoomfull', 
            toggleGroup: 'map'
        }
    );
    toolbar.addControl(
        new OpenLayers.Control.ZoomBox({
            title: 'Zoom in: click in the map or use the left mouse button and drag to create a rectangle'
        }), {
            iconCls: 'zoomin', 
            toggleGroup: 'map'
        }
    );
    toolbar.addControl(
        new OpenLayers.Control.ZoomBox({
            out: true,
            title: 'Zoom out: click in the map or use the left mouse button and drag to create a rectangle'
        }), {
            iconCls: 'zoomout', 
            toggleGroup: 'map'
        }
    );                
    toolbar.addControl(
        new OpenLayers.Control.DragPan({
            isDefault: true,
            title: 'Pan map: keep the left mouse button pressed and drag the map'
        }), {
            iconCls: 'pan', 
            toggleGroup: 'map'
        }
    );
    return toolbar;
};

// mapcomponent
function createMap(map,toolbar,nodetext){
	var item_map = {
	    xtype: 'mapcomponent',
	    id: 'itemmap',
	    draggable: {
		//      Config option of Ext.Panel.DD class.
		//      It's a floating Panel, so do not show a placeholder proxy in the original position.
		        insertProxy: false,
		
		//      Called for each mousemove event while dragging the DD object.
		        onDrag : function(e){
		//          Record the x,y position of the drag proxy so that we can
		//          position the Panel at end of drag.
		            var pel = this.proxy.getEl();
		            this.x = pel.getLeft(true) - Ext.getCmp('easy_beispiele').getPosition()[0];
		            this.y = pel.getTop(true) - Ext.getCmp('easy_beispiele').getPosition()[1];
		
		//          Keep the Shadow aligned if there is one.
		            var s = this.panel.getEl().shadow;
		            if (s) {
		                s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
		            }
		        },
		        
		//      Called on the mouseup event.
		        endDrag : function(e){
		        	//		Kontrolle über die Mausposition-Positon
		        	if (this.y < 0){this.y = 5;};
		        	if (this.x < 0){this.x = 5;};
		            this.panel.setPosition(this.x, this.y);
		        }
            },
        floating: true,
        collapsible: true,
        title: nodetext,
    	bodyBorder: false, x:220, y: 10,
        map: map, 
        width: Ext.getCmp('vp_center').getHeight() * 0.7, 
        height: Ext.getCmp('vp_center').getHeight() * 0.7,
        tbar: toolbar,
        bbar: new Ext.Toolbar({
        	id: 'map_bbar',
        	height: 28,
        	hidden: true
        })
    };
    
    return item_map;
};

// Einstellungen-Komponente erstellen (Legende, Layers, Settings)
function createSettings(map,store){
	var item_layer = {
       	title: 'Einstellungen',
       	collapsible: true,
       	draggable: {
		        insertProxy: false,
		        onDrag : function(e){
		            var pel = this.proxy.getEl();
		            this.x = pel.getLeft(true) - Ext.getCmp('easy_beispiele').getPosition()[0];
		            this.y = pel.getTop(true) - Ext.getCmp('easy_beispiele').getPosition()[1];
		            var s = this.panel.getEl().shadow;
		            if (s) {
		                s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
		            }
		        },
		        endDrag : function(e){
		        	if (this.y < 0){this.y = 5;};
		        	if (this.x < 0){this.x = 5;};
		            this.panel.setPosition(this.x, this.y);
		        }
              },
          	x:10, y: 10,
          	layout: 'accordion',
          	width: Ext.getCmp('vp_center').getWidth() * 0.15,
          	height: Ext.getCmp('vp_center').getHeight() * 0.7,
              layoutConfig:{
                  animate: true
              },
              items: [{
                  title: 'Themen',
                  border: false,
                  xtype: 'layertree',
                  rootVisible: false,
                  map: map
              },{
                  title: 'Legende',
                  //html: '<p>Some settings in here.</p>',
                  border: false,
                  items: new GeoExt.LegendPanel({layerStore: store})
              }]
       };
       
       return item_layer;
};