var map, myselection, myselect, style, polygonControl, markers, layer_style;
var lon = -2.746582;
var lat = 54.495568;
var zoom = 1;

var proj_900913 = new OpenLayers.Projection("EPSG:900913");
var proj_27700 = new OpenLayers.Projection("EPSG:27700");
var proj_4326 = new OpenLayers.Projection("EPSG:4326");

var bounds = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
var mybounds = new OpenLayers.Bounds(-1447153, 6446275, 489805, 8289249);

var browse_init, search_init, navigate = false;

function init() {

    /* Create map object */

    var optionMap = {
        controls:[
        new OpenLayers.Control.MouseDefaults(),
        new OpenLayers.Control.PanZoomBar(),
        new OpenLayers.Control.LayerSwitcher({roundedCorner:false})
        ],
        projection: proj_900913,
        displayProjection: proj_27700,
        numZoomLevels: 10,
        units: "m",
        maxExtent: bounds,
        minZoomLevel: 4,
        maxZoomLevel: 9
    };

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

    /* Add GoogleMap layers */

    var optionGoogleRel = {
        isBaseLayer: true,
        type: google.maps.MapTypeId.TERRAIN,
        'sphericalMercator':true
    };
    var googleRel = new OpenLayers.Layer.Google( "GoogleMap Relief", optionGoogleRel );
    map.addLayer(googleRel);

    var optionGoogleMap = {
        isBaseLayer: true,
        'sphericalMercator':true
    };
    var googleMap = new OpenLayers.Layer.Google( "GoogleMap", optionGoogleMap );
    map.addLayer(googleMap);

    var optionGoogleSat = {
        isBaseLayer: true,
        type: google.maps.MapTypeId.SATELLITE,
        'sphericalMercator':true
    };
    var googleSat = new OpenLayers.Layer.Google( "GoogleMap Satellite", optionGoogleSat );
    map.addLayer(googleSat);

    var optionGoogleHyb = {
        isBaseLayer: true,
        type: google.maps.MapTypeId.HYBRID,
        'sphericalMercator':true
    };
    var googleHyb = new OpenLayers.Layer.Google( "GoogleMap Hybrid", optionGoogleHyb );
    map.addLayer(googleHyb);

//    var os = new UKOSLayer();
//    map.addLayer(os);

    var osm = new OpenLayers.Layer.OSM();
    map.addLayer(osm);

    /* Checking if values (or value) are already set in the form */
    if(document.getElementById("aLat").value){
        setInitSelection();
    }
    /* Setting select mode.  Default to rectangle for now... */
    rectangleSelect();

    /* Create OpenLayers lonlat and convert to GoogleMap projection */
    var olLonLat = new OpenLayers.LonLat(lon, lat);
    olLonLat.transform(proj_4326, map.getProjectionObject());

    layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
    layer_style.fillOpacity = 0.8;
    layer_style.graphicOpacity = 1;

    style = OpenLayers.Util.extend({}, layer_style);
    style.strokeColor = "#cc6633";
    style.fillColor = "#ffcc66";
    style.pointRadius = 5;
    style.strokeWidth = 2;
    style.strokeOpacity = 0.8;

    markers = new OpenLayers.Layer.Vector("Panels", {
        styleMap: new OpenLayers.StyleMap({
            "default": style,
            "select": {
                fillColor: "#FF0000",
                strokeColor: "#32a8a9"
            }
        })
    });

    plotPanels();

    myselect = new OpenLayers.Control.newSelectFeature(markers, {
        onClickSelect: onClickSelect,
        onClickUnselect: onClickUnselect,
        onHoverSelect: onHoverSelect,
        onHoverUnselect: onHoverUnselect
    });

    map.addControl(myselect);

    myselect.activate();

    map.addLayer(markers);

    if(document.getElementById("aLon").value != 0) {
        map.zoomToExtent(mybounds, false);
    } else {
        map.setCenter(olLonLat);
        map.zoomTo(map.zoom +1);
    }

    //  map.setCenter(olLonLat, zoom);
    map.addControl(polygonControl);

    document.getElementById('polygonToggle').checked = true;

}

/**
 * RECTANGLE SELECTION
 * an initial function to check if a box has already been drawn and then a
 * function to draw the box around where the selection box was
 **/

function rectangleSelect(){
    polygonControl = new OpenLayers.Control();
    OpenLayers.Util.extend(polygonControl, {
        draw: function () {
            this.box = new OpenLayers.Handler.Box( polygonControl,
            {
                "done": this.notice
            });
            this.box.activate();
        },

        notice: function (bounds) {
            /* Get latlon from bounding box */

            if(!isNaN(bounds.left + bounds.right))
            {
                var botLft = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.left,bounds.bottom));
                var topRght = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.right,bounds.top));
                mybounds = new OpenLayers.Bounds(botLft.lon, botLft.lat, topRght.lon, topRght.lat);

                /* clone and convert lonlat from GoogleMap projection to WGS84 */
                var lla = botLft.clone(true);
                lla.transform(map.getProjectionObject(),proj_4326);
                var llb = topRght.clone(true);
                llb.transform(map.getProjectionObject(),proj_4326);

                document.getElementById("aLon").value =  lla.lon.toFixed(6);
                document.getElementById("aLat").value =  lla.lat.toFixed(6);
                document.getElementById("bLon").value =  llb.lon.toFixed(6);
                document.getElementById("bLat").value =  llb.lat.toFixed(6);

                var allHTMLTags=document.getElementsByTagName("*");
                for (i=0; i < allHTMLTags.length; i++) {
                    if (allHTMLTags[i].className=="mapsubmit") {
                        var thebutton =  allHTMLTags[i];
                        thebutton.click();
                    }
                }
            }
        //  drawBox(mybounds);

        }
    });
}

function drawBox(mybounds){
    try {
        map.removeLayer(myselection);
    } catch(e) { }

    myselection = new OpenLayers.Layer.Vector("Selection");
    map.addLayer(myselection);
    var bbox = new OpenLayers.Feature.Vector(mybounds.toGeometry());
    myselection.addFeatures(bbox);
}

/*  Draw an initial box on the map if values are already present in the form */
function setInitSelection(){
    var initBotLft = new OpenLayers.LonLat(document.getElementById("aLon").value,document.getElementById("aLat").value);
    var initTopRght = new OpenLayers.LonLat(document.getElementById("bLon").value,document.getElementById("bLat").value);

    initBotLft.transform(proj_4326, map.getProjectionObject());
    initTopRght.transform(proj_4326, map.getProjectionObject());

    var initBounds = new OpenLayers.Bounds(initBotLft.lon, initBotLft.lat, initTopRght.lon, initTopRght.lat);

    mybounds = initBounds;

    drawBox(initBounds);
}

/**
 * MAP STATES (CIRCLE SELECT)
 * these functions control which listeners, layers etc are displayed
 **/

function circleSelect()
{
    if(!search_init)
    {
        addSearchListener();
        search_init = true;
    }

    try {
        addSearchListener();
    } catch(e) {  }

}

/**
 * MAP LISTENERS (CIRCLE SELECT)
 * these functions are responsible for adding appropriate listeners to the map
 **/

function addSearchListener() {
    style = new OpenLayers.Style({
        pointRadius: "${radius}",
        fillColor: "#ffcc66",
        fillOpacity: 0.8,
        strokeColor: "#cc6633",
        strokeWidth: 2,
        strokeOpacity: 0.8
    }, {
        context: {
            radius: function(feature) {
                return Math.min(feature.attributes.count, 7) + 3;
            }
        }
    });

    map.events.register("click", map, function(e,marker) {

        /* get lonlat from mouseclick */
        var lonlat = map.getLonLatFromViewPortPx(e.xy);

        /* clone and convert lonlat from GoogleMap projection to WGS84 */
        var ll = lonlat.clone(true);
        ll.transform(map.getProjectionObject(),proj_4326);

        /* create latlong and OSGB from converted lonlat */
        var ll2 = new LatLng(ll.lat, ll.lon);
        var os2 = ll2.toOSRef();

        /* populate form fields */
        //getElementsByStyleClass("easting")[0].value =  Math.round(os2.easting);
        //getElementsByStyleClass("northing")[0].value =  Math.round(os2.northing);
        document.getElementById("aLat").value =  round(ll.lat,6);
        document.getElementById("aLon").value =  round(ll.lon,6);
        //getElementsByStyleClass("gridref")[0].value = os2.toSixFigureString();

        /* create bounding box from OSGB */
        var extent = 25000; //Set default to 500km (50 * 1000/2)
        var minos = (new OSRef(os2.easting - extent, os2.northing - extent)).toLatLng();
        var maxos = (new OSRef(os2.easting + extent, os2.northing + extent)).toLatLng();

        /* Create OpenLayers lonlat and convert to GoogleMap projection */
        var ll_min = new OpenLayers.LonLat(minos.lng, minos.lat);
        ll_min.transform(proj_4326, map.getProjectionObject());
        var ll_max = new OpenLayers.LonLat(maxos.lng, maxos.lat);
        ll_max.transform(proj_4326, map.getProjectionObject());

        /* remove current selection from map if exists*/
        try {
            map.removeLayer(myselection);
        } catch(e) { }


        /* Create OpenLayers lonlat and convert to GoogleMap projection */
        var olLonLat = new OpenLayers.LonLat(minos.lng, minos.lat);
        olLonLat.transform(proj_4326, map.getProjectionObject());

        myselection = new OpenLayers.Layer.Vector("Selection", {
            styleMap: new OpenLayers.StyleMap({
                "default": style,
                "select": {
                    fillColor: "#8aeeef",
                    strokeColor: "#32a8a9"
                }
            })
        });

        var circOrigin = new OpenLayers.Geometry.Point( lonlat.lon, lonlat.lat );
        var circStyle = OpenLayers.Util.extend( {},
            OpenLayers.Feature.Vector.style["default"] );
        var circleFeature = new OpenLayers.Feature.Vector(
            OpenLayers.Geometry.Polygon.createRegularPolygon( circOrigin, extent, 20, 0 ),
            null,
            circStyle );

        myselection.addFeatures( [circleFeature] );

        map.addLayer(myselection);

    });
}


/**
 * LISTENER FUNCTIONS
 * these functions are used by the map listeners
 **/

function onClickSelect(feature) {
    clearMap();
    selectedFeature = feature;

    var content = "";

    /* Changed below from 'archsearch?q=tid:' to '/record?titleId=' because map link wasn't working (py - 26/11/2018) */
    content = "<div style='font-size:0.9em'>" +
    "<p><strong>" + feature.attributes.era_id + ": " + feature.attributes.panel_name + "</strong></p>" +
    "<p><a href=\"/archsearch/record?titleId="+feature.attributes.era_id+"\">Click to view Archsearch record</a></p>" +
    "</div>";

    popup = new OpenLayers.Popup.FramedCloud(
        "chicken",
        feature.geometry.getBounds().getCenterLonLat(),
        null,
        content,
        null, true, null);

    feature.popup = popup;
    map.addPopup(popup);
}

function onClickUnselect(feature) {
    try {
        map.removePopup(feature.popup);
    } catch(e) { }
    feature.popup.destroy();
    feature.popup = null;
}
function onHoverSelect(feature) {

}
function onHoverUnselect(feature) {

}
function clearMap() {
    for (var i=0; i<map.popups.length; i++) {
        map.removePopup(map.popups[i]);
    }
}

function plotPanels() {
    var f = [];
    var olLonLat;
    //   mybounds = new OpenLayers.Bounds();

    for(i = 0; i < myFeatures.length; i++)
    {
        var lon = myFeatures[i][1];
        var lat = myFeatures[i][0];

        if(lon != 0.0)
        {
            olLonLat = new OpenLayers.LonLat(lon, lat);
            olLonLat.transform(proj_4326, proj_900913);

            f.push(
                new OpenLayers.Feature.Vector(
                    new OpenLayers.Geometry.Point(olLonLat.lon, olLonLat.lat),{
                        era_id: myFeatures[i][3],
                        panel_name: myFeatures[i][2]
                    })
                );

            olLonLat = new OpenLayers.LonLat(lon, lat);
            olLonLat.transform(proj_4326, proj_900913);
        //  mybounds.extend(olLonLat);
        }
    }

    markers.addFeatures(f);

}

/**
 * GENERAL FUNCTIONS
 * these functions are general utility functions not OpenLayer specific
 **/
function deactivateSelect(){
    if(navigate == false){
        polygonControl.box.deactivate();
        navigate = true
    }
}

function activateSelect(type){
    if(type == 'polygon'){
        polygonControl.box.activate();
    } else if(type == 'circle') {
        polygonControl.box.deactivate();
        circleSelect();
    }
    navigate = false;
}

function round(number,X) {
    /* rounds number to X decimal places, defaults to 2 */
    X = (!X ? 2 : X);
    return Math.round(number*Math.pow(10,X))/Math.pow(10,X);
}
function getElementsByStyleClass (className)
{
    var all = document.all ? document.all :
    document.getElementsByTagName('*');
    var elements = new Array();
    for (var e = 0; e < all.length; e++) {
        if (all[e].className == className)
            elements[elements.length] = all[e];
    }
    return elements;
}
function getElementByClass(theClass) {
    var allHTMLTags=document.getElementsByTagName("*");
    for (i=0; i < allHTMLTags.length; i++) {
        if (allHTMLTags[i].className==theClass) {
            return allHTMLTags[i];
        }
    }
    return null;
}
function concatObject(obj) {
    str='';
    for(prop in obj)
    {
        str+=prop + " value :"+ obj[prop]+"\n";
    }
    return(str);
}


/* for Mozilla/Opera9 */
if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", init, false);
}
/* for Safari */
else if (/WebKit/i.test(navigator.userAgent)) { // sniff
    var _timer = setInterval(function() {
        if (/loaded|complete/.test(document.readyState)) {
            init(); // call the onload handler
        }
    }, 10);
}
/* for other browsers */
else {
    window.onload = init;
}