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

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(' + [230 + 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
    })

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

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

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

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

var process_text = function (text) {
    var text = '"' + text + '"',
        char_limit = 40,
        all_words = text.split(' '),
        lines = [],
        current_line = [all_words[0]];

    all_words.slice(1).forEach(function (word) {
        if (current_line.join(' ').length + word.length + 1 < char_limit) {
            current_line.push(word);
        } else {
            lines.push(current_line);
            current_line = [word];
        }
    });

    lines.push(current_line);
    return lines;
};

var render_map = function () {
    d3.json('wards.json', function(wards_topo) {
        d3.csv('merged_clean.csv', function (dreams) {
        dreams.forEach(function (dream) {
            var position = 0,
                char_limit = 40;

            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; };
            }

            if (dream.memory.length > 0) { dream.memory = process_text(dream.memory); }
            if (dream.caption.length > 0) { dream.caption = process_text(dream.caption); }
        });
        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');

        selection.transition().attr('r', 5.5).style('opacity', 1);

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

        if (active_dream.caption.length) {
            active_dream.caption.forEach(function (d, i) {
                content_group.append('text')
                    .text(d.join(' '))
                    .attr({
                        id: 'large_cap',
                        x: (w * (1 - map_portion)) / 2,
                        y: Math.min((w * (1 - map_portion)) / active_dream.img_ratio, h - h * 0.25) + 30 + (i * 30),
                        'text-anchor': 'middle'
                    });
            });            
        }
    
        // content_group.append('text')
        //     .text('-' + active_dream.name + ' (' + active_dream.age + ')')
        //     .attr({
        //         id: 'small_cap',
        //         x: (w * (1 - map_portion)) / 2,
        //         y: Math.min((w * (1 - map_portion)) / active_dream.img_ratio, h - h * 0.25) + 60 + (active_dream.caption.length - 1) * 30,
        //         'text-anchor': 'middle'
        //     });
    },

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

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');

        selection.transition().attr('r', 5.5).style('opacity', 1);

        active_dream.memory.forEach(function (d, i) {
            content_group.append('text')
                .text(d.join(' '))
                .attr({
                    id: 'large_cap',
                    x: (w * (1 - map_portion)) / 2,
                    y: h / 2.5 + i * 30,
                    'text-anchor': 'middle'
                });
        });

        content_group.append('text')
            .text(function () {
                if (active_dream.landmark.length) {
                    return '-' + active_dream.name + ' (' + active_dream.age + ') @' + active_dream.landmark;
                } else {
                    return '-' + active_dream.name + ' (' + active_dream.age + ')';
                }
            })
            .attr({
                id: 'small_cap',
                x: (w * (1 - map_portion)) / 2,
                y: h / 2.5 + 30 + (active_dream.memory.length - 1) * 30,
                'text-anchor': 'middle'
            });            

    },

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

render_map();