text: /**
   * Copyright (c) 2009 OpenGeo
   */
  
  Ext.namespace("gxp");
  gxp.WMSLayerPanel = Ext.extend(Ext.TabPanel, {
      
      /** api: config[layerRecord]
       *  ``GeoExt.data.LayerRecord``
       *  Show properties for this layer record.
       */
      layerRecord: null,
      
      /** api: config[activeTab]
       *  ``String or Number``
       *  A string id or the numeric index of the tab that should be initially
       *  activated on render.  Defaults to ``0``.
       */
      activeTab: 0,
      
      /** api: config[border]
       *  ``Boolean``
       *  Display a border around the panel.  Defaults to ``false``.
       */
      border: false,
      
      /** api: config[imageFormats]
       *  ``RegEx`` Regular expression used to test browser friendly formats for
       *  GetMap requests.  The formats displayed will those from the record that
       *  match this expression.  Default is ``/png|gif|jpe?g/i``.
       */
      imageFormats: /png|gif|jpe?g/i,
      
      initComponent: function() {
          
          this.addEvents(
              /** api: event[change]
               *  Fires when the ``layerRecord`` is changed using this dialog.
               */
              "change"
          );
  
          this.items = [
              this.createAboutPanel(),
              this.createDisplayPanel()
          ];
  
          gxp.WMSLayerPanel.superclass.initComponent.call(this);
      },
      
      /** private: createAboutPanel
       *  Creates the about panel.
       */
      createAboutPanel: function() {
          return {
              title: "About",
              style: {"padding": "10px"},
              defaults: {
                  border: false
              },
              items: [{
                  layout: "form",
                  labelWidth: 70,
                  items: [{
                      xtype: "textfield",
                      fieldLabel: "Title",
                      anchor: "99%",
                      value: this.layerRecord.get("title"),
                      listeners: {
                          change: function(field) {
                              this.layerRecord.set("title", field.getValue());
                              //TODO revisit when discussion on
                              // http://trac.geoext.org/ticket/110 is complete
                              this.layerRecord.commit();
                              this.fireEvent("change");
                          },
                          scope: this
                      }
                  }, {
                      xtype: "textfield",
                      fieldLabel: "Name",
                      anchor: "99%",
                      value: this.layerRecord.get("name"),
                      readOnly: true
                  }]
              }, {
                  layout: "form",
                  labelAlign: "top",
                  items: [{
                      xtype: "textarea",
                      fieldLabel: "Description",
                      grow: true,
                      growMax: 150,
                      anchor: "99%",
                      value: this.layerRecord.get("abstract"),
                      readOnly: true
                  }]
              }]
          };
      },
      
      /** private: createDisplayPanel
       *  Creates the display panel.
       */
      createDisplayPanel: function() {
          var record = this.layerRecord;
          var layer = record.get("layer");
          var opacity = layer.opacity;
          if(opacity == null) {
              opacity = 1;
          }
          var formats = [];
          var currentFormat = layer.params["FORMAT"].toLowerCase();
          Ext.each(this.layerRecord.get("formats"), function(format) {
              if(this.imageFormats.test(format)) {
                  formats.push(format.toLowerCase());
              }
          }, this);
          if(formats.indexOf(currentFormat) === -1) {
              formats.push(currentFormat);
          }
          var transparent = layer.params["TRANSPARENT"];
          transparent = (transparent === "true" || transparent === true);
  
          return {
              title: "Display",
              style: {"padding": "10px"},
              layout: "form",
              labelWidth: 70,
              items: [{
                  xtype: "slider",
                  name: "opacity",
                  fieldLabel: "Opacity",
                  value: opacity * 100,
                  //TODO remove the line below when switching to Ext 3.2 final
                  values: [opacity * 100],
                  anchor: "99%",
                  isFormField: true,
                  listeners: {
                      change: function(slider, value) {
                          layer.setOpacity(value / 100);
                          this.fireEvent("change");
                      },
                      scope: this
                  }
              }, {
                  xtype: "combo",
                  fieldLabel: "Format",
                  store: formats,
                  value: currentFormat,
                  mode: "local",
                  triggerAction: "all",
                  editable: false,
                  anchor: "99%",
                  listeners: {
                      select: function(combo) {
                          layer.mergeNewParams({
                              format: combo.getValue()
                          });
                          this.fireEvent("change");
                      },
                      scope: this
                  }
              }, {
                  xtype: "checkbox",
                  fieldLabel: "Transparent",
                  checked: transparent,
                  listeners: {
                      check: function(checkbox, checked) {
                          layer.mergeNewParams({
                              transparent: checked ? "true" : "false"
                          });
                          this.fireEvent("change");
                      },
                      scope: this
                  }
              }]
          };
      }    
  
  });
  
  Ext.reg('gx_wmslayerpanel', gxp.WMSLayerPanel); 