
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <link rel="stylesheet" type="text/css" href="StyleSheet.css" />

    <link rel="stylesheet" type="text/css" href="StyleSheetPrint.css" media="print"/>

    
    <script src="../lib/OpenLayers.js"></script>

    
    <script type="text/javascript">

        <!--

        var lon = 5;

        var lat = 40;

        var zoom = 5;

        var map, layer;

        var mapp;

        
        box_extents = [

            [-10, 50, 5, 60],

            [-75, 41, -71, 44],

            [-122.6, 37.6, -122.3, 37.9],

            [10, 10, 20, 20]

        ];


        function init(){

            map = new OpenLayers.Map( 'map' );

            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 

                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );

            map.addLayer(layer);

            //map.zoomToMaxExtent();

            //map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

            map.setCenter(new OpenLayers.LonLat(-95.8413581848145, 36.9642248153687), 5);

            
            mapp = new OpenLayers.Map('mapp', { controls: [] });

            var ol_wms = new OpenLayers.Layer.WMS.Untiled( "OpenLayers WMS", 

                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );

            var boxes  = new OpenLayers.Layer.Boxes( "Boxes" );

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

                ext = box_extents[i];

                bounds = new OpenLayers.Bounds(ext[0], ext[1], ext[2], ext[3]); 

                box = new OpenLayers.Marker.Box(bounds);

                box.events.register("click", box, function (e) {

                    this.setBorder("yellow");

                });

                boxes.addMarker(box);

            }


            mapp.addLayers([ol_wms, boxes]);

            //mapp.addLayer(ol_wms);

            //mapp.addControl(new OpenLayers.Control.LayerSwitcher());

            mapp.zoomToExtent(map.getExtent());

            //mapp.zoomToMaxExtent();

            //mapp.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

            //mapp.setCenter(new OpenLayers.LonLat(-95.8413581848145, 36.9642248153687), 5);

            
        }

        
        function getextents(){

            var txt = "See if I learned...";

            txt = map.getExtent();

            document.getElementById("debug").innerHTML=txt

            mapp.zoomToExtent(map.getExtent());

        }

        // -->

    </script>

  </head>

  <body onload="init()">    

    <input type="button" value="Set Print map extents" onclick="getextents()">

    <div id="debug"></div>

    
    <div id="noprint">

        <div id="map"></div>

    </div>

    
    <div id="print">

        <div id="mapp" style="width:100%;height:512px"></div>

    </div>

    <input type="label" value="testing here.....">

  </body>

</html>