/**
* Class: OpenLayers.Control.StyledOverviewMap
*
* Inherits from:
*  - <OpenLayers.Control.OverviewMap>
*/
OpenLayers.Control.StyledOverviewMap =
    OpenLayers.Class(OpenLayers.Control.OverviewMap, {
          /**  
          * APIProperty: autoPan  
          * {Boolean} Always pan the overview map, so the box remains in the  
          * center.  
          */  
          autoPan: false,  


        initialize: function() {
            OpenLayers.Control.OverviewMap.prototype.initialize.apply(this, arguments);
        },

        /**
        * Method: draw
        * Render the control in the browser.
        */
        draw: function() {
            OpenLayers.Control.prototype.draw.apply(this, arguments);
            if (!(this.layers.length > 0)) {
                if (this.map.baseLayer) {
                    var layer = this.map.baseLayer.clone();
                    this.layers = [layer];
                } else {
                    this.map.events.register("changebaselayer", this, this.baseLayerDraw);
                    return this.div;
                }
            }

            // create overview map DOM elements
            this.element = document.createElement('div');
            this.element.className = this.displayClass + 'Element';
            this.element.style.display = 'none';
            
            this.mapDiv = document.createElement('div');
            this.mapDiv.style.width = this.size.w + 'px';
            this.mapDiv.style.height = this.size.h + 'px';
            this.mapDiv.style.position = 'relative';
            this.mapDiv.style.overflow = 'hidden';
            this.mapDiv.style.display = 'block';
            this.mapDiv.id = OpenLayers.Util.createUniqueID('overviewMap');

            this.extentRectangle = document.createElement('div');
            this.extentRectangle.style.position = 'absolute';
            this.extentRectangle.style.zIndex = 9999;  //HACK


            this.extentRectangle.className = this.displayClass + 'ExtentRectangle';
            this.mapDiv.appendChild(this.extentRectangle);

            this.element.appendChild(this.mapDiv);

            this.div.appendChild(this.element);

            // Optionally add min/max buttons if the control will go in the
            // map viewport.
            if (!this.outsideViewport) {
                this.div.className += " " + this.displayClass + 'Container';
                var imgLocation = OpenLayers.Util.getImagesLocation();
                // maximize button div
                var img = imgLocation + 'overview-map-maximize.png';
                this.maximizeDiv = OpenLayers.Util.createAlphaImageDiv(
                                        this.displayClass + 'MaximizeButton',
                                        null,
                                        new OpenLayers.Size(207, 18),
                                        img,
                                        'absolute');
                this.maximizeDiv.style.display = 'none';
                this.maximizeDiv.className = this.displayClass + 'MaximizeButton';
                OpenLayers.Event.observe(this.maximizeDiv, 'click',
                    OpenLayers.Function.bindAsEventListener(this.maximizeControl,
                                                        this));

                this.div.appendChild(this.maximizeDiv);

                // minimize button div
                var img = imgLocation + 'overview-map-minimize.png';
                this.minimizeDiv = OpenLayers.Util.createAlphaImageDiv(
                                        'OpenLayers_Control_minimizeDiv',
                                        null,
                                        new OpenLayers.Size(207, 18),
                                        img,
                                        'absolute');
                this.minimizeDiv.style.display = 'none';
                this.minimizeDiv.className = this.displayClass + 'MinimizeButton';
                OpenLayers.Event.observe(this.minimizeDiv, 'click',
                    OpenLayers.Function.bindAsEventListener(this.minimizeControl,
                                                        this));

                this.div.appendChild(this.minimizeDiv);

                var eventsToStop = ['dblclick', 'mousedown'];

                for (var i = 0; i < eventsToStop.length; i++) {

                    OpenLayers.Event.observe(this.maximizeDiv,
                                         eventsToStop[i],
                                         OpenLayers.Event.stop);

                    OpenLayers.Event.observe(this.minimizeDiv,
                                         eventsToStop[i],
                                         OpenLayers.Event.stop);
                }

                this.minimizeControl();
            } else {
                // show the overview map
                this.element.style.display = '';
            }
            if (this.map.getExtent()) {
                this.update();
            }

            this.map.events.register('moveend', this, this.update);

            return this.div;
        },
    
        createMap: function() {
            OpenLayers.Control.OverviewMap.prototype.createMap.apply(this, arguments);        

            // check extent rectangle border width (overwrite, default to border-width=4)
            this.wComp = parseInt(OpenLayers.Element.getStyle(this.extentRectangle,
                                               'border-left-width')) +
                     parseInt(OpenLayers.Element.getStyle(this.extentRectangle,
                                               'border-right-width'));
            this.wComp = (this.wComp) ? this.wComp : 4;
            this.hComp = parseInt(OpenLayers.Element.getStyle(this.extentRectangle,
                                               'border-top-width')) +
                     parseInt(OpenLayers.Element.getStyle(this.extentRectangle,
                                               'border-bottom-width'));
            this.hComp = (this.hComp) ? this.hComp : 4;
        },
        
     updateRectToMap: function() { 
            OpenLayers.Control.OverviewMap.prototype.updateRectToMap.apply(this, arguments);        

            this.extentRectangle.className = this.displayClass + 'ExtentRectangle';
      },
     rectDrag: function() { 
            OpenLayers.Control.OverviewMap.prototype.rectDrag.apply(this, arguments);        

            this.extentRectangle.className = this.displayClass + 'ExtentRectangle';
      },


        CLASS_NAME: "OpenLayers.Control.StyledOverviewMap"
    });