Ext.ns('S100');

S100.MapLayer = function(s100Map, name, title, data) {
    this.s100Map        = s100Map;
    this.layerName      = name;
    this.title          = title;
    this.data           = data || S100.Map.places[this.layerName];

    this.init();
    this.setupEvents();
};

S100.MapLayer.prototype.init = function() {
    this.activeMarker = null;
    this.markers = [];
    this.isHidden = false;
    
    this.setupMarkerTypes();
    
    // TODO move the infoWindow to Map
    this.createInfoBox();
    this.createMarkerMgr();
    
    // Create markers from array or single object
    if (Ext.isArray(this.data)) {
        this.createMarkers(this.data);
    } 
    // If we dont have an array, then the layer must be a mixed bag of people and places
    // we're probably filtering by person for example
    else if (Ext.isObject(this.data)) {
        this.createMarkers(this.data);
        this.createMarkers(this.data.places);
    }
    this.mgr.addMarkers(this.markers);
};

S100.MapLayer.prototype.setupEvents = function() {
    google.maps.event.addListener(this.infoWindow, 'closeclick', function() {
        this.resetActiveMarker();
    }.createDelegate(this));

    // domready gets called each time the InfoBox is opened, so we remove the listener
    google.maps.event.addListener(this.infoWindow, 'domready', function(evt) {
        var infoBox = Ext.get(this.getMap().getDomId()).select('.infoBox a.my-likes');
        infoBox.on('click', this.onMyLikesClick, this, {'single': true});
    }.createDelegate(this));
};

S100.MapLayer.prototype.setupMarkerTypes = function() {
    this.markerTypes = [
        'person',
        'place',
        'communityperson',
        'communityplace'
    ];
};

S100.MapLayer.prototype.draw = function() {
    this.isHidden = false;
    this.mgr.addMarkers(this.markers);
};

S100.MapLayer.prototype.onMarkerClick = function(opts) {
    var marker = opts.marker;
    
    this.s100Map.closeInfoWindows();
    
    var data = Ext.apply({markerType: marker.getType()}, marker.getData());
    this.openInfoWindow(data, marker.getMarker());

    this.resetActiveMarker();
    this.activeMarker = marker;
};

S100.MapLayer.prototype.getMap = function() {
    return this.s100Map;
};

S100.MapLayer.prototype.getName = function() {
    return this.layerName;
};

S100.MapLayer.prototype.getTitle = function() {
    return this.title;
};

S100.MapLayer.prototype.getMarkerManager = function() {
    return this.mgr;
};

S100.MapLayer.prototype.getInfoWindow = function() {
    return this.infoWindow;
};    

S100.MapLayer.prototype.closeInfoWindow = function() {
    this.resetActiveMarker();
    this.infoWindow.close();
};

// Create MarkerManager
S100.MapLayer.prototype.createMarkerMgr = function() {
    this.mgr = new MarkerClusterer(this.s100Map.map, [], {
      maxZoom: 14,
      gridSize: 90,
      // averageCenter: true,
      styles: this.getMarkerStyles()
    });
    return this.mgr;
};

S100.MapLayer.prototype.getMarkerStyles = function() {
    var hasCommunityMarkers = this.layerName.toLowerCase().indexOf('community') > -1;
    var hasPeopleMarkers = this.layerName.toLowerCase().indexOf('person') > -1;
    var xPos = hasCommunityMarkers ? '-191px' : '-79px';
    var yPos = hasPeopleMarkers ? '-90px' : '0';
    var bgPosition = xPos + ' ' + yPos;
    
    return [
        { 
            url: '/images/markers.png',
            backgroundPosition: bgPosition,
            width: 84,
            height: 100,
            textColor: hasCommunityMarkers ? '#000' : '#fff',
            textSize: 11
        }
    ];
};

S100.MapLayer.prototype.resetActiveMarker = function() {
    if (!this.activeMarker) return;
    
    this.activeMarker.toggleState(false);
    this.activeMarker = null;
};

S100.MapLayer.prototype.createMarkers = function(items) {
    Ext.each(items, function(item) {
        type = item.type;
        data = item;

        if (!data.address_lat_long) { return true; }
        
        var marker = new S100.MapMarker(data, type);
        marker.on('markerclick', this.onMarkerClick, this);
        this.markers.push(marker.getMarker());
        
        return true;
    }, this);
    
    return this.markers;
};

S100.MapLayer.prototype.openInfoWindow = function(data, marker) {
    switch(data.type){
        case 'person':              tpl = this.infoBoxPersonTpl;    break;
        case 'place':               tpl = this.infoBoxPlaceTpl;     break;
        case 'communityplace':
        case 'communityperson':     tpl = this.infoBoxCommunityTpl; break;
    }
    this.infoWindow.setContent(tpl.apply(data));
    this.infoWindow.open(this.s100Map.map, marker);
};

S100.MapLayer.prototype.createInfoBox = function() {
    this.infoBoxPlaceTpl = Ext.XTemplate.from('s100_place_infobox');
    this.infoBoxPersonTpl = Ext.XTemplate.from('s100_person_infobox');
    this.infoBoxCommunityTpl = Ext.XTemplate.from('community_infobox');
    // this.infoBoxPersonTpl = new Ext.XTemplate()
    
    var infoBoxOpts = {
        pixelOffset: new google.maps.Size(-55, -215),
        maxWidth: 440,
        closeBoxMargin: '5px',
        closeBoxURL: "/images/close_trans.png",
        infoBoxClearance: new google.maps.Size(65, 65)
    };
    this.infoWindow = new InfoBox(infoBoxOpts);
};

S100.MapLayer.prototype.clearLayer = function() {
    this.isHidden = true;
    this.infoWindow.close();
    this.mgr.clearMarkers();
};

S100.MapLayer.prototype.onMyLikesClick = function(evt) {
    var target = Ext.get(evt.target);

    this.closeInfoWindow();
    
    var type = target.getAttribute('data-type'),
        slug = evt.target.getAttribute('data-slug');
    this.getMap().addFilterLayer(type, slug);
};