// initialise the 'map' object
function init() {
  // start position for the map (hardcoded here for simplicity)
  var lat  = 40.7612;
  var lon  = -111.8958;
  var zoom = 12; 

  function hidePanorama() {
    /* maybe only on a scroll up event */
    document.getElementById('smallmap').style.width  = '0px';
    document.getElementById('smallmap').style.height = '0px';

    document.getElementById('panorama').style.display = 'none';
    document.getElementById('map').style.display = 'block';
    document.getElementById("wrapper").style.backgroundImage = null;
  }

  function showPanorama(feature) {
    document.getElementById('map').style.display = 'none';
    document.getElementById('smallmap').style.width  = '250px';
    document.getElementById('smallmap').style.height = '250px';

    smallmap.setCenter(new OpenLayers.LonLat(feature.geometry.x, feature.geometry.y), 16);
   
    var wrapper = document.getElementById("wrapper");
    var pano    = document.getElementById("panorama");
    pano.style.display = 'block';

/*
    pano.src=feature.attributes.description;

    var panoH = pano.clientHeight;
    var panoW = pano.clientWidth;

    var scaleH = wrapper.clientHeight / pano.clientHeight;
    var scaleW = wrapper.clientWidth / pano.clientWidth;

    pano.style.height = wrapper.clientHeight + "px";
    pano.style.width = Math.round(panoW * scaleH) + "px";
    
    pano.style.width = wrapper.clientWidth + "px";
    pano.style.height = Math.round(panoH * scaleW) + "px";
*/

    wrapper.style.backgroundImage="url('"+feature.attributes.description+"')";
    wrapper.style.backgroundRepeat = 'repeat-x';
    wrapper.style.backgroundColor = '#000';
    pano.onmousedown = hidePanorama;

    selcontrol1.unselect(feature);
    selcontrol2.unselect(feature);
  }

  // only the map controls that we actually want to have on our maps
  var map_controls = [ new OpenLayers.Control.Navigation(),
                       new OpenLayers.Control.PanPanel(),
		       new OpenLayers.Control.ZoomPanel()
		       ];
  var smallmap_controls = [ new OpenLayers.Control.Navigation() ];

  // complex object of type OpenLayers.Map
  var map      = new OpenLayers.Map('map', {controls: map_controls});
  var smallmap = new OpenLayers.Map('smallmap', {controls: smallmap_controls});

  var layerTile      = new OpenLayers.Layer.OSM("OpenStreetMap", "http://tile.openstreetmap.org/${z}/${x}/${y}.png",
                             { numZoomLevels: 19,
			       maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
			       maxResolution: 156543.0399,
			       units: 'm',
			       projection: new OpenLayers.Projection("EPSG:900913"),
			       displayProjection: new OpenLayers.Projection("EPSG:4326") });
  var layerSmallTile  = new OpenLayers.Layer.OSM("OpenStreetMap", "http://tile.openstreetmap.org/${z}/${x}/${y}.png",
                             { numZoomLevels: 19,
			       maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
			       maxResolution: 156543.0399,
			       units: 'm',
			       projection: new OpenLayers.Projection("EPSG:900913"),
			       displayProjection: new OpenLayers.Projection("EPSG:4326") });
  var lgpx1 = new OpenLayers.Layer.GML("Panorama", "./poi.txt",{ format: OpenLayers.Format.Text, projection: new OpenLayers.Projection("EPSG:4326") });
   var lgpx2 = new OpenLayers.Layer.GML("Panorama", "./poi.txt",{ format: OpenLayers.Format.Text, projection: new OpenLayers.Projection("EPSG:4326") });
 
  var selcontrol1 = new OpenLayers.Control.SelectFeature(lgpx1, { onSelect: showPanorama });
  var selcontrol2 = new OpenLayers.Control.SelectFeature(lgpx2, { onSelect: showPanorama });

  map.addLayer(layerTile);
  map.addLayer(lgpx1);
  map.addControl(selcontrol1);
  selcontrol1.activate();

  smallmap.addLayer(layerSmallTile);
  smallmap.addLayer(lgpx2);
  smallmap.addControl(selcontrol2);
  selcontrol2.activate();

  // center maps
  if (!map.getCenter()) {
    map.setCenter(new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), zoom);
  }
  if (!smallmap.getCenter()) {
    smallmap.setCenter(new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), zoom);
  }
}