lbgm.draw = {
    map:null,
    pointlayer: null,
    linelayer: null,
    polylayer: null,

    init: function() { // Get options and create layers
        this.map =  lbgm.maplets.mapobject.map;


        this.pointlayer = new OpenLayers.Layer.Vector('DrawPoints');
        this.map.addLayer(this.pointlayer);
        this.pointlayer.setVisibility(true);

        this.linelayer = new OpenLayers.Layer.Vector('DrawLines');
        this.map.addLayer(this.linelayer);
        this.linelayer.setVisibility(true);
        this.linelayer.style = {
            stroke: true,
            strokeColor: '#FF0000',
            strokeWidth: 5
        };

        this.polylayer = new OpenLayers.Layer.Vector('DrawPolygons');
        this.map.addLayer(this.polylayer);
        this.polylayer.setVisibility(true);
    },

    createExtDrawButton: function() {
        this.init();
        
        this.toolbar = new lbgm.maplets.toolbar({map: this.map});

        // Draw Layers
        this.layersWnd = new Ext.Window({
            width:300
            ,height:150
            ,id:'drawLayersWnd'
            ,autoScroll:false
            ,closable:true
            ,constrain: true
            ,resizable: false
            ,closeAction: 'hide'
            ,title:'Draw Layers'
            ,items: new Ext.Panel({
                layout: 'form',
                padding: 10,
                height:150,
                items: [{
                    xtype: 'checkbox',
                    fieldLabel: 'Points',
                    labelSeparator: '',
                    name: 'DrawPoints',
                    handler: lbgm.draw.showHideLayer,
                    checked: lbgm.draw.getLayerDisplay('DrawPoints')
                }, {
                    xtype: 'checkbox',
                    fieldLabel: 'Lines',
                    labelSeparator: '',
                    name: 'DrawLines',
                    handler: lbgm.draw.showHideLayer,
                    checked: lbgm.draw.getLayerDisplay('DrawLines')
                }, {
                    xtype: 'checkbox',
                    fieldLabel: 'Polygons',
                    labelSeparator: '',
                    name: 'DrawPolygons',
                    handler: lbgm.draw.showHideLayer,
                    checked: lbgm.draw.getLayerDisplay('DrawPolygons')
                }]
            })
        });

        this.toolbar.add({
                id: 'drawlayersbtn',
                text: 'Layers',
                icon: 'gmadmin/images/icons/layers.png',
                listeners: {
                    click: {
                        scope: this,
                        fn: function(button, e) {
                            this.layersWnd.x = button.getEl().getX()
                            this.layersWnd.y = button.getEl().getY() + 30;
                            this.layersWnd.show();
                        }
                    }
                },
                tooltip: {text:'Select draw layers to be displayed', title:'Draw Layers'}
            });
        

        this.toolbar.addSpacer();
        this.toolbar.addSeparator();
        this.toolbar.addSpacer();

        // Feature Select Button
        this.toolbar.addControl(
            new OpenLayers.Control.SelectFeature([
                this.pointlayer, this.linelayer, this.polylayer
            ], {
                type: OpenLayers.Control.TYPE_TOGGLE,
                hover: false,
                map: this.map,
                onSelect: this.drawSelected
            }), {
            //text: "select",
            icon: "src/images/cursor.png",
            // button options
            enableToggle: true,
            tooltip: "Select Feature",
            group: "draw",
            toggleGroup: "draw"
        });

        this.toolbar.addSpacer();
        this.toolbar.addSeparator();
        this.toolbar.addSpacer();

        // Point Draw
        this.toolbar.addControl(
            new OpenLayers.Control.DrawFeature(
                this.pointlayer, OpenLayers.Handler.Point, {
                    map: this.map,
                    featureAdded: function(feature) {
                        lbgm.draw.dataInput(feature);
                    }
                }
            ), {
            //text: "draw line",
            icon: 'src/images/add_point_off.png',
            // button options
            toggleGroup: "draw",
            allowDepress: false,
            tooltip: "Draw Point",
            // check item options
            group: "draw"
        });

        // Line Draw
        this.toolbar.addControl(
            new OpenLayers.Control.DrawFeature(
                this.linelayer, OpenLayers.Handler.Path, {
                    map: this.map,
                    featureAdded: function(feature) {
                        lbgm.draw.dataInput(feature);
                    }
                }
            ), {
            //text: "draw line",
            icon: 'src/images/draw_line_off.png',
            // button options
            toggleGroup: "draw",
            allowDepress: false,
            tooltip: "Draw Line",
            // check item options
            group: "draw"
        });

        // Polygon Draw
        this.toolbar.addControl(
            new OpenLayers.Control.DrawFeature(
                this.polylayer, OpenLayers.Handler.Polygon, {
                    map: this.map,
                    scope: this,
                    featureAdded: function(feature) {
                        lbgm.draw.dataInput(feature);
                    }
                }
            ),{
            //text: "draw poly",
            icon: 'src/images/draw_polygon_off.png',
            // button options
            toggleGroup: "draw",
            allowDepress: false,
            tooltip: "Draw Polygon",
            // check item options
            group: "draw"
        });

        // Sraw tools window
        this.toolsWnd = new Ext.Window({
            id: "draw-tools",
            //animateTarget: 'tb_draw_btn',
            //layout:'anchor',
            width:250,
            height:58,
            closeAction:'hide',
            plain: false,
            closable: true,
            draggable: true,
            title: 'Draw Tools',
            constrain: true,
            autoScroll: true,
            resizable: false,
            style: {opacity:0.85},
            items: [this.toolbar],
            listeners: {
                close: {
                    scope: this,
                    fn: function() {
                        this.toolbar._buttons[1].toggle();
                        //this.tools.navaction.items[0].toggle();
                    }
                }
            }
        });

        var btn = new Ext.Button({
            id: "tb_draw_btn",
            icon: 'gmadmin/images/icons/paintbrush.png',
            text: "Draw",
            tooltip: "Draw Tools",
            listeners: {
                click: {
                    scope: this,
                    fn: function(button, e) {
                        this.toolsWnd.x = button.getEl().getX()
                        this.toolsWnd.y = button.getEl().getY() + 27;
                        this.toolsWnd.show();
                    }
                }
            }
        });

        return btn;
    },

    dataInput: function(feature) {
        var lonlat = feature.geometry.getBounds().getCenterLonLat();

        alert(feature.geometry.toString());
        this.map.zoomToExtent(feature.geometry.getBounds());

        this.displayAddPopup(feature);

        //feature.id = "test";

        // Display Add Popup
    },

    drawSelected: function(feature) {
        var lonlat = feature.geometry.getBounds().getCenterLonLat();

        //alert(feature.geometry.toString());
        this.map.zoomToExtent(feature.geometry.getBounds());

        lbgm.popup.displayPopup(feature, "Title", "Data");
    },

    getLayerDisplay: function(layerName) {
        var layers = this.map.getLayersByName(layerName);
        return layers[0].getVisibility();
    },

    showHideLayer: function(obj, checked) {

        var layers = lbgm.draw.map.getLayersByName(obj.name);
        if(layers.length > 0) layers[0].setVisibility(checked);

        //if(layers.length > 0) //layers[0].setVisibility(true);
        //    lbgm.maplets.mapobject.map.raiseLayer(layers[0], 10000);
    },

    displayAddPopup: function(feature) {
        if(lbgm.popup.activepopup!=null)
            lbgm.popup.hidePopup(lbgm.popup.activepopupid);

        lbgm.popup.showLoadingPopup(feature);
        //this.loadAddPopupCont(lon, lat, feature);

        var type = '';
        if(feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point")
            type = 'point';
        else if(feature.geometry.CLASS_NAME == "OpenLayers.Geometry.LineString")
            type = 'line';
        else if(feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Polygon")
            type = 'polygon';

        var conn = new Ext.data.Connection();
        conn.request({
            url: 'src/php/conn/draw.conn.php',
            method: 'POST',
            params: {"request": "loadAddPopup", featureid: feature.id, type: type},
            success: function(responseObject) {
                //eval(responseObject.responseText);

                lbgm.popup.setJSonHead(responseObject.responseText);
                lbgm.popup.setCSSonHead(responseObject.responseText);

                if (feature || feature.popup == null) {
                    //feature.data.popupContentHTML = responseObject.responseText;
                    lbgm.popup.hideLoadingPopup(feature);

                    var popup = new OpenLayers.Popup.Lbgmpopup("drawaddpopup",
                        feature.geometry.getBounds().getCenterLonLat(),
                        null, "", null, false);
                    feature.popup = popup;
                    //feature.popup = feature.createPopup(false);

                    feature.popup.id = "drawpopup_0";

                    var realSize = OpenLayers.Util.getRenderedDimensions(
                        responseObject.responseText, null, { displayClass: feature.popup.displayClass }
                    );

                    feature.popup.contentDiv.style.padding = '0px';
                    var updSize = new OpenLayers.Size(realSize.w, realSize.h);
                    //alert(realSize.w);
                    feature.popup.setSize(updSize);
                    feature.popup.setContentHTML(responseObject.responseText);

                    lbgm.maplets.mapobject.map.addPopup(feature.popup);
                    feature.popup.setSize(updSize);

                    feature.popup.show();

                    //lbgm.point.feature.popup = feature.popup;
                    //feature.popup.updatePosition();
                    //this.popupfeature = feature;
                }

                lbgm.popup.activepopup = feature.popup;
                lbgm.popup.activepopupid = -1;
            },
            failure: function() {
                //Ext.Msg.alert(lbgm.options.appname, 'Unable to load layout.');
            },
            scope: this
        });
    },

    hideAddPopup: function() {
        
    }
};