[OpenLayers-Users] OpenLayers.Control.DrawFeature on IE

[ihaddad at wtwlevant.com]

hello everyone , i am trying to draw a rectangle using this code below.
it work fine on firefox, but on IE it doesn't draw rectangle, it draws it
either as a vertical or horizontal line or sometimes after amny tries as a
rectangle.
any help would be greatly appreciated.

//code in the html page
//---------------------------------------------
 drawingLayer = new OpenLayers.Layer.Vector("Drawing");
			drawingLayer.setVisibility(false,false);
			drawingLayer.onFeatureInsert = drawgeofence;
			if(drawingcontrol==undefined) {
			drawingcontrol =  new
OpenLayers.Control.DrawFeature(drawingLayer,OpenLayers.Handler.Rectangle);
			map.addControl(drawingcontrol);
			}
			map.addLayer(drawingLayer);
			drawingcontrol.activate();

---------------------------------------------------------------------------------

///here's the rectangle calss
//---------------------------------------
OpenLayers.Handler.Rectangle = OpenLayers.Class.create();
OpenLayers.Handler.Rectangle.prototype =
  OpenLayers.Class.inherit(OpenLayers.Handler.Polygon, {

    /**
     * Handle mouse move.  Adjust the geometry and redraw.
     * Return determines whether to propagate the event on the map.
     *
     * @param {Event} evt
     * @type Boolean
     */
    mousemove: function(evt) {
        if (this.drawing) {
            var lonlat = this.map.getLonLatFromPixel(evt.xy);
            this.point.x = lonlat.lon;
            this.point.y = lonlat.lat;

            this.line.components[1].x = lonlat.lon;
            this.line.components[2] = this.point.clone();
            this.line.components[3].y = lonlat.lat;

            this.drawGeometry();
        }
        return false;
    },

    /**
     * Handle mouse up. Finalize the geometry.
     * Return determines whether to propagate the event on the map.
     *
     * @param {Event} evt
     * @type Boolean
     */
    mouseup: function (evt) {
        if (this.drawing) {
            this.drawing = false;
            this.finalize();
        }
        return false;
    },

    /**
     * Handle mouse down. Create the geometry.
     * Return determines whether to propagate the event on the map.
     *
     * @param {Event} evt
     * @type Boolean
     */
    mousedown: function(evt) {
        // ignore double-clicks
        if (this.lastDown && this.lastDown.equals(evt.xy)) {
            return false;
        }
        this.lastDown = evt.xy;
        this.drawing = true;

		this.createGeometry();

        var lonlat = this.control.map.getLonLatFromPixel(evt.xy);
        this.point.x = lonlat.lon;
        this.point.y = lonlat.lat;

        // add the 4 points
        this.line.addComponent(this.point.clone(), -1);
        this.line.addComponent(this.point.clone(), -1);
        this.line.addComponent(this.point.clone(), -1);

        return false;
    },


    /** @final @type String */
    CLASS_NAME: "OpenLayers.Handler.Rectangle"
});