var width = 960,
    height = 500;

var projection = d3.geo.stereographic()
    .scale(600)

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height)

var c = canvas.node().getContext("2d")

function getRetinaRatio() {
    var devicePixelRatio = window.devicePixelRatio || 1
    var backingStoreRatio = c.webkitBackingStorePixelRatio ||
        c.mozBackingStorePixelRatio ||
        c.msBackingStorePixelRatio ||
        c.oBackingStorePixelRatio ||
        c.backingStorePixelRatio || 1

    return devicePixelRatio / backingStoreRatio
}

var ratio = getRetinaRatio()
var scaledWidth = width * ratio
var scaledHeight = height * ratio

canvas.node().width = scaledWidth
canvas.node().height = scaledHeight
canvas
    .style("width", width + 'px')
    .style("height", height + 'px')

c.scale(ratio, ratio)

var path = d3.geo.path()
    .projection(projection)
    .context(c)

var graticule = d3.geo.graticule()
    .step([15, 15])

var title = d3.select("h1")

var bgRGB = d3.rgb('#113')

d3.json("/erohinaelena/raw/ec635d68e8bf55586d40/starData.json", function(error, data) {

    var geoConstellations = []
    var starsMag = []
    data = data.map(function(constellation){
        constellation.stars = constellation.stars.filter(function(star){
            if (star.mag < 6) starsMag.push(star.mag)
            return star.mag < 6
        })
        return constellation
    })
    var minMaxMag = d3.extent(starsMag)
    var opacityScale = d3.scale.linear()
        .domain(minMaxMag)
        .range([1, 0.4])

    console.log(d3.extent(starsMag))

    var magScale = d3.scale.linear()
        .domain(minMaxMag)
        .range([2.7, 1.7])

    data.forEach(function (constellation) {
        var geometries = []

        constellation.stars.map(function (star) {
                var rgb = d3.rgb(star.color)
                var rgba = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacityScale(star.mag) + ')'

                geometries.push({
                    type: 'Point',
                    coordinates: [-star.ra, star.dec],
                    properties: {
                        color: rgba,
                        mag: magScale(star.mag)
                    }
                })
        })

        var lines = constellation.lines.map(function (line) {
            var p1 = [-line.ra1, line.dec1]
            var p2 = [-line.ra2, line.dec2]

            return [p1, p2]
        })

        geometries.push({
            type: "MultiLineString",
            coordinates: lines
        })

        if (constellation.name == 'Serpens'){
            var bound1 = constellation.boundary[0].map(function (coords) {
                return [-coords[0], coords[1]]
            })
            var bound2 = constellation.boundary[1].map(function (coords) {
                return [-coords[0], coords[1]]
            })
            geometries.push({
                type: "LineString",
                coordinates: bound1
            })
            geometries.push({
                type: "LineString",
                coordinates: bound2
            })
        } else {
            var boundLines = constellation.boundary.map(function (coords) {
                return [-coords[0], coords[1]]
            })
            geometries.push({
                type: "LineString",
                coordinates: boundLines
            })
        }

        geoConstellations.push({
                type: 'Feature',
                geometry: {
                    type: 'GeometryCollection',
                    geometries: geometries
                },
                properties: {
                    name: constellation.name,
                    zodiac: constellation.zodiac
                }
            }
        )
    })
    ready(geoConstellations)
})
function makeRadialGradient(x, y, r, color) {
    var radialgradient = c.createRadialGradient(x, y, 0, x, y, r)
    radialgradient.addColorStop(0.2, color)
    radialgradient.addColorStop(0.5,'rgba(' + bgRGB.r + ',' +bgRGB.g + ',' + bgRGB.b + ',0)')
    radialgradient.addColorStop(0.5,'rgba(' + bgRGB.r + ',' +bgRGB.g + ',' + bgRGB.b + ',1)')
    radialgradient.addColorStop(1,'rgba(' + bgRGB.r + ',' +bgRGB.g + ',' + bgRGB.b + ',0)')
    c.fillStyle = radialgradient
}

function ready (constellations) {
    var i = -1,
        previousCenter = [0, 0],
        n = constellations.length;

    (function transition() {
        d3.transition()
            .duration(1250)
            .each("start", function() {
                title.text(constellations[i = (i + 1) % n].properties.name)
            })
            .tween("rotate", function() {
                var center = d3.geo.centroid(constellations[i])
                var raRotate = center[0] - previousCenter[0]
                previousCenter = center
                var rotate = projection.rotate()
                var r = d3.interpolate(rotate, [-center[0], -center[1]])
                var r1 = d3.interpolate([rotate[0] - 360, rotate[1]], [-center[0], -center[1]])
                var r2 = d3.interpolate([rotate[0] + 360, rotate[1]], [-center[0], -center[1]])
                return function(t) {
                    var coordinates = r(t)
                    if (Math.abs(raRotate) > 180) coordinates = (raRotate > 0)? r1(t) : r2(t)

                    projection.rotate(coordinates)

                    c.clearRect(0, 0, width, height)
                    c.strokeStyle = "#fff"
                    c.lineWidth = .1
                    c.beginPath(), path(graticule()), c.stroke()
                    c.lineWidth = .4
                    c.beginPath(), path({type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]}), c.stroke()
                    c.strokeStyle = "#f2f237"
                    c.beginPath(), path({type: "LineString", coordinates: [[-180, 0], [-90, 23.26], [0, 0], [90, -23.26], [180, 0]]}), c.stroke()

                    constellations.forEach(function(constellation){
                        constellation.geometry.geometries.forEach(function(geo){
                            if (geo.type == 'Point') {
                                makeRadialGradient(
                                    projection(geo.coordinates)[0],
                                    projection(geo.coordinates)[1],
                                    geo.properties.mag,
                                    geo.properties.color)
                                path.pointRadius([geo.properties.mag])
                                c.beginPath(), path(geo), c.fill();
                            } else if (geo.type == 'LineString'){
                                c.strokeStyle = '#000'
                                c.beginPath(), path(geo),c.stroke()
                            } else if (geo.type == 'MultiLineString'){
                                c.strokeStyle = (constellation.properties.zodiac)?'#f2f237':"#999"
                                c.beginPath(), path(geo), c.stroke();
                            }
                        })
                    })
                    c.strokeStyle = "#f00"
                    c.lineWidth = 1.2
                    constellations[i].geometry.geometries.forEach(function(geo){
                        if (geo.type == 'LineString'){
                            c.beginPath(), path(geo), c.stroke()
                        }
                    })
                };
            })
            .transition()
            .each("end", transition)
    })();
}