define(['campus-coords', 'd3'], function(coords, d3) {
    'use strict';

    var imageUrl = 'images/campus.jpg';
    var width = 1280, height = 893;
    var scalingFactor = 0.75;

    function initSvg(svg) {
        svg
            .attr('width', width * scalingFactor)
            .attr('height', height * scalingFactor);
        // set the container size to the same size as svg element
        d3.select(svg.node().parentNode)
            .style('width', svg.attr('width') + 'px')
            .style('height', svg.attr('height') + 'px');
        // show the full image (one could apply clipping here)
        svg
            .attr('viewBox', [
                0,
                0,
                width / scalingFactor,
                height / scalingFactor,
            ].join(' '));

        svg.append('image')
            .attr('xlink:href', imageUrl)
            .attr('width', width)
            .attr('height', height);

        svg.append('g')
            .selectAll('polygon')
                .data(coords)
            .enter()
                .append('a')
                    .attr('xlink:href', function(d) {
                        return '#/campus/' + d.name;
                    })
                .append('polygon')
                    .attr('class', 'building')
                    .attr('points', function(d) {
                        return d.coords.join(' ');
                    })
                    .append('title')
                        .text(function(d) {
                            return d.name;
                        });
    }

    return function() {
        var svg = d3.select('#campus-map').append('svg');
        initSvg(svg);
    };
});