Event.observe(window, 'load', function() {
    var loading = $('maploading');
    loading.parentNode.removeChild(loading);
    var map = mapInit();
    window.m = map; //debug
    mapAddGeoRssLayer(map);
});

function mapInit() {
    OpenLayers.ImgPath = "js/ressources/ol/";
    var options = {
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        units: "m",
        maxResolution: 156543.0339,
        maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
                                          20037508.34, 20037508.34),
        restrictedExtent: new OpenLayers.Bounds(-18802285.986257, -7867262.238554, 21272730.692143, 12170246.100646)
    };
    var map = new OpenLayers.Map('map', options);
    map.addLayer(
        new OpenLayers.Layer.Google( "Google Hybrid" , {sphericalMercator:true, type: G_HYBRID_MAP})
    );
    map.addLayer(new OpenLayers.Layer.Google("Google", {sphericalMercator:true}));
    map.addLayer(
        new OpenLayers.Layer.Google( "Google Relief" , {sphericalMercator:true, type: G_PHYSICAL_MAP})
    );
    map.addLayer(new OpenLayers.Layer.TMS(
        "OpenStreetMap (Mapnik)",
        "http://tile.openstreetmap.org/",
        {
            type: 'png',
            displayOutsideMaxExtent: true,
            getURL: function(bounds) {
                var res = this.map.getResolution();
                var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
                var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
                var z = this.map.getZoom();
                var limit = Math.pow(2, z);
                if (y < 0 || y >= limit) {
                    return OpenLayers.Util.getImagesLocation() + "404.png";
                } else {
                    x = ((x % limit) + limit) % limit;
                    return this.url + z + "/" + x + "/" + y + "." + this.type;
                }
            }
        }
    ));
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.MousePosition());
    map.addControl(new OpenLayers.Control.ScaleLine());

    map.zoomToExtent(
        new OpenLayers.Bounds(
            -3309291.6471453, 2810512.6499707, 6709462.5224547, 7819889.7347707
        )
    );
    return map;
}
function mapAddGeoRssLayer(map) {
    function createGeoRssFeatures(url, formatOptions) {
        OpenLayers.Format.MyGeoRSS = OpenLayers.Class(OpenLayers.Format.GeoRSS, {
            createFeatureFromItem: function(item) {
                var f = OpenLayers.Format.GeoRSS.prototype.createFeatureFromItem.call(this, item);
                f.data.flickr_photosetId = this.getChildValue(item, "*", "flickr_photosetId", null);
                return f;
            }
        });
        var req = OpenLayers.Request.GET({
            url: url,
            async: false
        });
        var doc = req.responseXML;
        if (!doc || !doc.documentElement) {
            doc = OpenLayers.Format.XML.prototype.read(ajaxRequest.responseText);
        }
        formatOptions = formatOptions || {};
        var format = new OpenLayers.Format.MyGeoRSS(formatOptions);
        var features = format.read(doc);
        return features;
    }
    var layer = new OpenLayers.Layer.Vector(
        "Activity",
        {
            projection: new OpenLayers.Projection("EPSG:4326"),
            styleMap: new OpenLayers.StyleMap({
                externalGraphic: "js/ressources/marker-gold-small.png",
                backgroundGraphic: "js/ressources/marker_shadow.png",
                backgroundXOffset: 0,
                backgroundYOffset: -7,
                graphicZIndex: 11,
                backgroundGraphicZIndex: 10,
                pointRadius: 7
            }),
            isBaseLayer: false,
            rendererOptions: {yOrdering: true}
        }
    );
    map.addLayer(layer);
    var features = createGeoRssFeatures("a/geoRSS/activity.xml", {
        externalProjection: layer.projection,
        internalProjection: map.getProjectionObject()
    });
    layer.addFeatures(features);
    displayFeaturesItemsList(features, "geoRssItems"/*, "js/ressources/marker-green-small.png"*/)
    // TODO: add popup on features
    // TODO: add features list link
/*
    var geoRssLayer = new OpenLayers.Layer.GeoRSS(
        'Activity',
        'a/geoRSS/activity.xml', {
            projection: new OpenLayers.Projection("EPSG:4326"),
            icon: new OpenLayers.Icon("js/ressources/marker-gold-small.png", new OpenLayers.Size(13,16))
        }
    );
    geoRssLayer.events.register('loadend', null, createRssItems);
    map.addLayer(geoRssLayer);
*/
}
function enlargeMap() {
    $('map').style.width = "99%"
    $('map').style.height = "512"
}

function enwindowMap() {
    var width = Ext.getBody().getWidth() - Ext.get('additional').getBox().x;
    width = width < 250 ? 250 : width;
    var w = new Ext.Window({
        title: 'Map',
        contentEl: 'map',
        resizable: false,
        width: width,
        x: Ext.getBody().getWidth() - width - 10,
        y: Ext.get('header').getHeight()+10,
        listeners: {
            beforeClose: function() {
                Ext.get('mapFrame').insertFirst(Ext.get('map'));
                Ext.select('#mapFrame').setVisibilityMode(Ext.Element.DISPLAY).show();
            }
        }
    });
    w.show();
    Ext.select('#mapFrame').setVisibilityMode(Ext.Element.DISPLAY).hide();
}

/*
 * Display features as html interactive list
 */
function createRssItems(e) {
    displayFeaturesItemsList(
        e.object.features, "geoRssItems", "js/ressources/marker-green-small.png");
}
function displayFeaturesItemsList(features, divId, altIconUrl) {
    function addFlickrImages(flickrPhotosetId, parentEl) {
        // Get flick photoset images url
        var url = "a/services/proxy/flickr.php"
        var req = OpenLayers.Request.GET({
            url: url,
            params: {
                method: 'flickr.photosets.getPhotos',
                photoset_id: flickrPhotosetId,
                per_page: 6
            },
            async: true,
            success: function(req) { createFlickrImagesDom(req, parentEl) }
        });
        function createFlickrImagesDom(req, parentEl) {
            var json = new OpenLayers.Format.JSON().read(req.responseText);
            if (!json || !json.stat || json.stat != "ok") return;
            // Creates DOM
            var box = document.createElement("div");
            var photos = json.photoset.photo;
            for (var i=0; i<photos.length; i++) {
                photos.current = photos[i];
                var imgUrl = OpenLayers.String.format(
                    'http://farm${farm}.static.flickr.com/${server}/${id}_${secret}_s.jpg',
                    photos.current
                );
                var aHref = OpenLayers.String.format(
                    'http://www.flickr.com/photos/${owner}/${photo.current.id}/in/set-${id}/',
                    json.photoset
                );
                var img = document.createElement("img");
                img.src = imgUrl;
                img.className = "thumbnail";
                var a = document.createElement("a");
                a.href = aHref;
                a.target = "_blank";
                a.appendChild(img);
                box.appendChild(a);
            }
            // "More" link
            var moreBox = document.createElement('div');
            var a = document.createElement('a');
            a.innerHTML = "More pictures...";
            a.target = "_blank";
            a.href = OpenLayers.String.format(
                'http://www.flickr.com/photos/${owner}/sets/${id}/',
                json.photoset
            );
            moreBox.appendChild(a)
            box.appendChild(moreBox);
            parentEl.appendChild(box);
        }
    }
    var maxListItems = 5;
    var ul = document.createElement("ul");
    for (var i=0; i<features.length; i++) {
        // Creates DOM
        var li = document.createElement("li");
        var a = document.createElement("a");
        a.href = "javascript:void(0);";
        a.innerHTML = OpenLayers.String.format('${title}', features[i].data);
        a.feature = features[i];
        li.className = "toggler";
        if (i > maxListItems) { li.style.display = "none" }
        li.appendChild(a);
        // Add list item addition info box
        var box = document.createElement("div");
        box.className = "wbox";
        box.style.display = "none";
        // Add a items details box
        var wedge = document.createElement("div");
        wedge.className = "wedge wedgeup";
        box.appendChild(wedge);
        var p = document.createElement("p");
        p.innerHTML = features[i].data.description;
        box.appendChild(p);
        li.appendChild(box);
        // Appends the li tu ul
        ul.appendChild(li);
        // Append images
        if (features[i].data.flickr_photosetId) {
            a.photosetId = features[i].data.flickr_photosetId;
            Event.observe(a, 'click', function(ev) {
                if (this.imagesAppended) return;
                this.imagesAppended = "1";
                var box = this.parentNode.getElementsByTagName("div")[0];
                addFlickrImages(this.photosetId, box);
            });
        }
        // Attaches events for map marker highlight
        if (altIconUrl) {
            var initialIconUrl = features[i].marker.icon.url;
            Event.observe(a, 'mouseover', function(ev) {
                Event.element(ev).feature.marker.setUrl(altIconUrl);
            });
            Event.observe(a, 'mouseout', function(ev) {
                Event.element(ev).feature.marker.setUrl(initialIconUrl);
            });
        }
        Event.observe(a, 'click', function(ev) {
            if (altIconUrl) Event.element(ev).feature.marker.setUrl(altIconUrl);
            var lonlat = new OpenLayers.LonLat(
                Event.element(ev).feature.geometry.x,
                Event.element(ev).feature.geometry.y
            );
            Event.element(ev).feature.layer.map.panTo(lonlat);
        });
    }
    // Add a "more" link
    if (i > maxListItems) {
        var li = document.createElement("li");
        var a = document.createElement("a");
        a.href = "javascript:void(0);";
        a.innerHTML = "...more...";
        li.appendChild(a);
        ul.appendChild(li);
        Event.observe(a, 'click', function(ev) {
            li.parentNode.removeChild(li);
            var liEls = OpenLayers.Util.getElement('geoRssItems').getElementsByTagName('li');
            for (var j=0; j<liEls.length; j++) liEls[j].style.display = '';
        });
    }
    // Replaces target div with items list
    OpenLayers.Util.getElement(divId).innerHTML = '';
    OpenLayers.Util.getElement(divId).appendChild(ul);

    // make collapsible: see menu.js
    makeCollapsible();
}