// Alter default OpenLayers options
// --------------------------------

// Allow testing of specific renderers via "?renderer=Canvas", etc
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
OpenLayers.Layer.Vector.prototype.renderers = renderer ?
                                    [renderer] :
                                    OpenLayers.Layer.Vector.prototype.renderers;

// Create Objects
// --------------

// To report draw modify and delete events
var reportEvent;
if (window.console && window.console.log) {
    reportEvent = function(event) {
        console.log(event.type,
                    event.feature ? event.feature.id : event.components);
    };
} else {
    reportEvent = function() {};
}

// Create the vectorial layer
var vectorLayer = new OpenLayers.Layer.Vector('Vector Layer', {
    styleMap: new OpenLayers.StyleMap({
        'default': OpenLayers.Util.applyDefaults({
                strokeWidth: 3,
                graphicName: 'triangle',
                pointRadius: '${radius}'||6,
                rotation: '${angle}'
            }, OpenLayers.Feature.Vector.style['default']
        ),
        'select': OpenLayers.Util.applyDefaults({
                pointRadius: '${radius}'
            }, OpenLayers.Feature.Vector.style['select']
        )
    })
});
vectorLayer.events.on({
    'beforefeaturemodified': reportEvent,
    'featuremodified': reportEvent,
    'afterfeaturemodified': reportEvent,
    'beforefeatureremoved': reportEvent,
    'featureremoved': reportEvent,
    'vertexmodified': reportEvent,
    'sketchmodified': reportEvent,
    'sketchstarted': reportEvent,
    'sketchcomplete': reportEvent
});
// to ensure that the points have radius
vectorLayer.events.on({
    'beforefeatureadded': function(e) {
        e.feature.attributes.radius = 2;
    }
});

// Create and show the map
var map = new OpenLayers.Map({
    div: 'map',
    layers: [
        new OpenLayers.Layer.WMS('osgeo WMS',
                  'http://vmap0.tiles.osgeo.org/wms/vmap0?', {layers: 'basic'}),
        vectorLayer
    ]
});
map.setCenter(new OpenLayers.LonLat(0, 0), 3);

// Create the control collection to draw vectorial features.
var controls = {
    point: new OpenLayers.Control.DrawFeature(vectorLayer,
                OpenLayers.Handler.Point),
    multiPoint: new OpenLayers.Control.DrawFeature(vectorLayer,
                OpenLayers.Handler.Point, {handlerOptions: {multi: true}}),
    line: new OpenLayers.Control.DrawFeature(vectorLayer,
                OpenLayers.Handler.Path),
    polygon: new OpenLayers.Control.DrawFeature(vectorLayer,
                OpenLayers.Handler.Polygon),
    modify: new OpenLayers.Control.ModifyFeature(vectorLayer, {
        deferDelete: true,
        eventListeners: {
            'beforefeaturedeleted': reportEvent,
            'featuredeleted': reportEvent
        },
        tools: [ // custom tools
        { 
            // to rotate the "angle" attribute of a ponit by steps of 15 degrees
            geometryTypes: ['OpenLayers.Geometry.Point',
                            'OpenLayers.Geometry.MultiPoint'],
            dragAction: function(feature, initialAtt, escale, rotation) {
                var angle = ((initialAtt.angle || 0) - rotation) % 360;
                // force steps of 15 degrres
                angle = Math.floor(angle / 15) * 15;
                feature.attributes.angle = angle;
            },
            style: OpenLayers.Control.ModifyFeature_styles.rotate
        }, {
            // to resize the pointRadius.
            geometryTypes: ['OpenLayers.Geometry.Point',
                            'OpenLayers.Geometry.MultiPoint'],
            dragAction: function(feature, initialAtt, escale, rotation) {
                var radius = (initialAtt.radius || 6) * escale;
                feature.attributes.radius = Math.max(6, radius);
            },
            style: OpenLayers.Control.ModifyFeature_styles.resize
        }, {
            // to close a lineString as a ring
            geometryTypes: ['OpenLayers.Geometry.LineString'],
            pressingAction: function(feature) {
                var geometry = feature.geometry;
                geometry.addComponent(geometry.components[0].clone());
            },
            style: {
                label:'ring',
                title: 'press to close as a ring',
                cursor: "pointer",
                fontSize: '8px',
                fontColor: '#222',
                pointRadius: 10,
                fillColor: '#cccccc',
                strokeColor: '#444444'
            }
        }]
    })
};
// add this controls to the map
for (var key in controls) {
    map.addControl(controls[key]);
}
//updateModifyControl();

// Functions called from the form fields to choose the desired control to test.
// ----------------------------------------------------------------------------

// Function to toggle the active control
function toggleControl(element) {
    for (key in controls) {
        var control = controls[key];
        if (element.value === key && element.checked) {
            control.activate();
        } else {
            control.deactivate();
        }
    }
}

// Functions to change the behavior of modify control
function updateModifyControl() {
    var vertices = document.getElementById('vertices').checked;
    var rotate = document.getElementById('rotate').checked;
    var resize = document.getElementById('resize').checked;
    var drag = document.getElementById('drag').checked;
    var deform = document.getElementById('deform').checked;
    var delete_ = document.getElementById('delete').checked;
    var reshape = document.getElementById('reshape').checked;

    controls.modify.createVertices =
                        document.getElementById('createVertices').checked;
    // reset modification mode
    controls.modify.mode = 0;
    if (vertices) {
        controls.modify.mode |= OpenLayers.Control.ModifyFeature.VERTICES;
    }
    if (rotate) {
        controls.modify.mode |= OpenLayers.Control.ModifyFeature.ROTATE;
    }
    if (resize) {
        controls.modify.mode |= OpenLayers.Control.ModifyFeature.RESIZE;
    }
    if (deform) {
        controls.modify.mode |= OpenLayers.Control.ModifyFeature.DEFORM;
    }
    if (drag) {
        controls.modify.mode |= OpenLayers.Control.ModifyFeature.DRAG;
    }
    if (delete_) {
        controls.modify.mode |= OpenLayers.Control.ModifyFeature.DELETE;
    }
    if (reshape) {
        controls.modify.mode |= OpenLayers.Control.ModifyFeature.RESHAPE;
    }
}