From 5824170f10685f71c05190551260b409cbeba3df Mon Sep 17 00:00:00 2001
From: crschmidt <crschmidt@crschmidt.net>
Date: Thu, 13 Dec 2007 19:51:49 +0000
Subject: [PATCH] Box Handler should use CSS to style its box. (Closes #1070)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@5399 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
---
 lib/OpenLayers/Handler/Box.js | 18 +++++++++---------
 theme/default/style.css       |  9 +++++++++
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/lib/OpenLayers/Handler/Box.js b/lib/OpenLayers/Handler/Box.js
index 6a065e8101..c5e4e4b9d2 100644
--- a/lib/OpenLayers/Handler/Box.js
+++ b/lib/OpenLayers/Handler/Box.js
@@ -21,6 +21,13 @@ OpenLayers.Handler.Box = OpenLayers.Class(OpenLayers.Handler, {
      */
     dragHandler: null,
 
+    /**
+     * APIProperty: boxDivClassName
+     * {String} The CSS class to use for drawing the box. Default is
+     *     olHandlerBoxZoomBox
+     */
+    boxDivClassName: 'olHandlerBoxZoomBox',
+
     /**
      * Constructor: OpenLayers.Handler.Box
      *
@@ -62,15 +69,8 @@ OpenLayers.Handler.Box = OpenLayers.Class(OpenLayers.Handler, {
     */
     startBox: function (xy) {
         this.zoomBox = OpenLayers.Util.createDiv('zoomBox',
-                                                 this.dragHandler.start,
-                                                 null,
-                                                 null,
-                                                 "absolute",
-                                                 "2px solid red");
-        this.zoomBox.style.backgroundColor = "white";
-        this.zoomBox.style.filter = "alpha(opacity=50)"; // IE
-        this.zoomBox.style.opacity = "0.50";
-        this.zoomBox.style.fontSize = "1px";
+                                                 this.dragHandler.start);
+        this.zoomBox.className = this.boxDivClassName;                                         
         this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
         this.map.viewPortDiv.appendChild(this.zoomBox);
 
diff --git a/theme/default/style.css b/theme/default/style.css
index 958535b097..7d3b4fdb3e 100644
--- a/theme/default/style.css
+++ b/theme/default/style.css
@@ -159,3 +159,12 @@ div.olControlMousePosition {
   background-image: url("img/draw_polygon_on.png");
   background-repeat: no-repeat;
 }
+
+.olHandlerBoxZoomBox {
+    border: 2px solid red;
+    position: absolute;
+    background-color: white;
+    opacity: 0.50;
+    font-size: 1px;
+    filter: alpha(opacity=50);
+}