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.id;
                    })
                .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);

        var citems = document.getElementById('campus-items');
        coords.forEach(function(building) {
            var header = document.createElement('h2');
            header.id = '/campus/' + building.id;
            header.textContent = building.name;
            citems.appendChild(header);

            var text_block = document.createElement('p');
            text_block.innerHTML = building.description;
            citems.appendChild(text_block);

            var links_block = document.createElement('p');
            var back_to_top = document.createElement('a');
            back_to_top.href = '#top';
            back_to_top.textContent = 'Back to top';
            links_block.appendChild(back_to_top);
            citems.appendChild(links_block);
        });
    };
});