var scale = 0.70,
    w = 1400 * scale,
    h = 900 * scale,
    data = []
    map_portion = 0.55
    margin = w * .015;

d3.select('#head')
    .style({
        'margin-left': -1 * w / 2 + 'px',
        width: w + 'px',
        height: (150 * scale) + 'px'
    });

var star_d = 'M150,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11z';

var head_groups = d3.select('#head')
    .append('svg')
    .attr({width: w, height: h})
    .selectAll('.star_group')
        .data(d3.range(4))
        .enter()
        .append('g')
            .classed('star_group', true)
            .attr('transform', function (d) { return 'translate(' + [260 + d*100, -70] + ')scale(' + 0.5 + ')'; });

d3.selectAll('.star_group')
    .append('path')
    .classed('star', true)
    .attr('d', star_d)

d3.select('#container')
    .style({
        'margin-top': (150 * scale) + 'px',
        'margin-left': -1 * w / 2 + 'px',
        width: w + 'px',
        height: h + 'px'
    });

d3.select('#left')
    .style({
        width: (1 - map_portion) * 100 + '%',
        height: h + 'px'
    });

d3.select('#right')
    .style({
        width: map_portion * 100 + '%',
        height: h + 'px'
    });

var zoom = function () {
    map_area.attr('transform', 'translate(' + d3.event.translate +')scale(' + d3.event.scale + ')');
};

var content_area = d3.select('#left')
    .append('svg')
    .attr({
        id: 'svg_left',
        width: w * (1 - map_portion),
        height: h
    })
    .append('g')
    .attr('transform', 'translate(' + [margin, margin] + ')')

content_area.append('rect')
    .attr({
        id: 'content_rect',
        x: 0,
        y: 0,
        width: w * (1 - map_portion) - 1.5 * margin,
        height: h - 2 * margin 
    })

var map_svg = d3.select('#right')
    .append('svg')
    .attr({
        id: 'svg_right',
        width: w * map_portion,
        height: h
    })

map_svg.append('rect')
    .attr({
        id: 'map_rect',
        x: margin / 2,
        y: margin,
        width: w * map_portion - 1.5 * margin,
        height: h - 2 * margin 
    })

map_area = map_svg.append('g')
    // .attr('transform', 'scale(' + scale + ')')
    .attr('transform', 'translate(' + [margin / 2, margin] + ')')
    .call(d3.behavior.zoom()
        .scaleExtent([1, 10])
        .on('zoom', zoom)
    );

var projection = d3.geo.albers()
    .translate([(w * map_portion - 1.5 * margin) / 2, (h - 2 * margin) / 2])
    .scale(87000)
    .rotate([87.685, 0])
    .center([0, 41.833])

var path = d3.geo.path()
    .projection(projection);

var render_map = function () {
    d3.json('wards.json', function(wards_topo) {
        d3.csv('dreams3_coded_clean.csv', function (dreams) {
        dreams.forEach(function (dream) {
            dream.loc = [+dream.lng, +dream.lat];
            if (dream.directurl) {
                var img = new Image();
                img.src = dream.directurl;
                img.onload = function () { dream.img_ratio = img.width / img.height; };
            }
        });
        console.log(dreams);
        var wards_geo = topojson.feature(wards_topo, wards_topo.objects.wards).features;

        map_area.selectAll('path')
            .data(wards_geo)
            .enter()
            .append('path')
                .attr('id', function (d, i) { return i; })
                .attr('d', path);

        map_area.selectAll('.marker')
            .data(dreams)
            .enter()
            .append('circle')
                .attr({
                    class: function (d) { return d.imageurl.length > 0 ? 'lm' : 'mem'; },
                    cx: function (d) { return projection(d.loc)[0]; },
                    cy: function (d) { return projection(d.loc)[1]; },
                    r: 3.5
                });

        var zoom_groups = map_svg.selectAll('.zoom_group')
            .data(d3.range(2))
            .enter()
            .append('g')
                .classed('zoom_group', true)
                .attr({
                    id: function (d) { return 'zg' + d; },
                    transform: function (d) { return 'translate(' + [(w * map_portion) - (1.5 * margin) - margin - 35, 2 * margin + d * 35] + ')'; }
                });

        zoom_groups.append('rect')
            .attr({
                x: 0,
                y: 0,
                width: 30,
                height: 30,
                fill: 'white'
            });

        d3.select('#zg0').append('line')
            .attr({
                x1: 30 / 2,
                y1: 8,
                x2: 30 / 2,
                y2: 30 - 8
            })

        zoom_groups.append('line')
            .attr({
                x1: 8,
                y1: 30 / 2,
                x2: 30 - 8,
                y2: 30 / 2
            })

        d3.select('#zg0')
            .on('click', function (d) {
                console.log(d);
                map_area.attr('transform', 'scale(1.5)');
            });

        d3.select('#zg1')
            .on('click', function (d) {
                console.log(d);
                map_area.attr('transform', 'scale(1)');
            });

        d3.selectAll('.lm')
            .on('mouseenter', lm_actions.enter)
            .on('mouseleave', lm_actions.leave);

        d3.selectAll('.mem')
            .on('mouseenter', mem_actions.enter)
            .on('mouseleave', mem_actions.leave);

        });
    });
};

var lm_actions = {
    enter: function () {
        var selection = d3.select(this);
            active_dream = selection.data()[0],
            content_group = content_area.append('g').attr('id', 'content_group')
            char_limit = 40,
            text_lines = 1 + Math.floor(active_dream.caption.length / char_limit)
            start_char = 0;

        selection.attr('r', 7);

        content_group.append('image')
            .attr({
                id: 'large_img',
                'xlink:href': active_dream.directurl,
                width: w * (1 - map_portion) - 1.5 * margin,
                height: Math.min((w * (1 - map_portion) - 1.5 * margin) / active_dream.img_ratio, h - 8 * margin)
            });

        d3.range(text_lines).forEach(function (d, i) {
            content_group.append('text')
                .text('"' + active_dream.caption.slice(start_char, start_char + char_limit) + '"')
                .attr({
                    id: 'large_cap',
                    x: (w * (1 - map_portion) - 1.5 * margin) / 2,
                    y: Math.min((w * (1 - map_portion) - 1.5 * margin) / active_dream.img_ratio, h - 8 * margin) + 2 * margin + (i * 2 * margin),
                    'text-anchor': 'middle'
                });

            start_char += char_limit;            
        });

        content_group.append('text')
            .text('-' + active_dream.name + ' (' + active_dream.age + ')')
            .attr({
                id: 'small_cap',
                x: (w * (1 - map_portion) - 1.5 * margin) / 2,
                y: Math.min((w * (1 - map_portion) - 1.5 * margin) / active_dream.img_ratio, h - 8 * margin) + 4 * margin + (text_lines - 1) * 2 * margin,
                'text-anchor': 'middle'
            });            

    },

    leave: function () {
        d3.select('#content_group').remove();
        d3.select(this).attr('r', 3.5);
    }
};

var mem_actions = {
    enter: function () {
        var selection = d3.select(this);
            active_dream = selection.data()[0],
            content_group = content_area.append('g').attr('id', 'content_group'),
            char_limit = 40,
            text_lines = 1 + Math.floor(active_dream.memory.length / char_limit)
            start_char = 0;

        selection.attr('r', 7);

        d3.range(text_lines).forEach(function (d, i) {
            content_group.append('text')
                .text('"' + active_dream.memory.slice(start_char, start_char + char_limit) + '"')
                .attr({
                    id: 'large_cap',
                    x: (w * (1 - map_portion) - 1.5 * margin) / 2,
                    y: (h - 2 * margin) / 2 + i * 2 * margin,
                    'text-anchor': 'middle'
                });

            start_char += char_limit;            
        });

        content_group.append('text')
            .text('-' + active_dream.name + ' (' + active_dream.age + ')')
            .attr({
                id: 'small_cap',
                x: (w * (1 - map_portion) - 1.5 * margin) / 2,
                y: (h - 2 * margin) / 2 + 2 * margin + (text_lines - 1) * 2 * margin,
                'text-anchor': 'middle'
            });            

    },

    leave: function () {
        d3.select('#content_group').remove();
        d3.select(this).attr('r', 3.5);
    }
};

render_map();