<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
<script src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/OpenLayers.js" type="text/javascript"></script>
<script src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/lib/OpenLayers/Layer/ArcGISCache.js" type="text/javascript"></script>

<style>
    .olControlAttribution {
        bottom: 0 !important;
    }
</style>

<script type="text/javascript">

  document.addEventListener("DOMContentLoaded", function(event) {

  	// document.getElementById('preview_map').setAttribute("style", "height:600px");

    var layers = [];
    var zoom = {{ map.zoom }};
    var center_x = {{ map.center_x }};
    var center_y = {{ map.center_y }};
    var center = [center_x, center_y];
    var settings_crs = '{{ crs }}'

    if (settings_crs != 'EPSG:4326') {
        settings_crs = 'EPSG:3857';
    }

    var config = {{ config|safe }};

    var model_crs = config['map']['projection'];

    if (settings_crs != model_crs) {
        // if the two crs are not the same, user must have switched default crs for project after map was created
        center = new OpenLayers.LonLat(center).transform(new OpenLayers.Projection(model_crs),new OpenLayers.Projection(settings_crs));
    }

    var config_layers = config['map']['layers']
    for (layer in config_layers) {
        if (config_layers[layer]['title'] == 'OpenStreetMap') {
            // if (config_layers[layer]['visibility'] == true) {
                layers.push(
                    new OpenLayers.Layer.OSM("OpenCycleMap",
                      ["http://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
                       "http://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
                       "http://c.tile.openstreetmap.org/${z}/${x}/${y}.png"])
                );
            // }
            break;
        }
    }

    var source;

    {% for layer in layers %}
        {% if layer.ows_url != None %}
            source = new OpenLayers.Layer.WMS("{{ layer.name|safe }}",
                '{{ layer.ows_url|safe }}',
                {layers: '{{ layer.name }}', transparent: true},
                {isBaseLayer: false}
            );

        layers.push(source);
        {% endif %}
    {% endfor %}

    var map = new OpenLayers.Map({
        div: 'preview_map',
        projection: new OpenLayers.Projection(settings_crs),
        // controls: [],
        layers: layers,
        center: center,
        zoom: zoom
    });
  });

</script>
