/*global document, d3, XMLHttpRequest, navigator */
"use strict";

function gid(text) {
    return document.getElementById(text);
}

function dilate(a) {
    var delta = (a[1] - a[0]) * 0.1;
    return [a[0] - delta, a[1] + delta];
}

function set_weather(d) {
    gid("temperature").textContent = Math.round(d.temperature) + "°C";
    gid("icon").className = "wi wi-forecast-io-" + d.icon;
    gid("summary").textContent = d.summary;
    gid("humidity").textContent = Math.round(d.humidity * 100) + "%";
    gid("precipitation").textContent = (d.precipIntensity.toFixed(2) +
            " mm/hr (" + Math.round(d.precipProbability * 100) + "%)");
    gid("wind").textContent = Math.round(d.windSpeed) + " km/hr";
    gid("wind-icon").className = "wi wi-wind from-" + d.windBearing + "-deg";
    gid("date").textContent = (d3.time.format("%a %I %p"))(d.time);
}

function plot(data, current) {
    data.forEach(function (d) {
        d.time = new Date(d.time * 1000);
    });

    var margin = {top: 30, right: 30, bottom: 30, left: 30},
        width = 390 - margin.left - margin.right,
        height = 170 - margin.top - margin.bottom,

        x = d3.time.scale().range([0, width]),
        y1 = d3.scale.linear().range([height, 0]),
        y2 = d3.scale.linear().range([height, 0]),

        xAxis = d3.svg.axis().scale(x)
            .orient("bottom").ticks(5),

        y1Axis = d3.svg.axis().scale(y1)
            .orient("left").ticks(3),

        y2Axis = d3.svg.axis().scale(y2)
            .orient("right").ticks(3),

        templine = d3.svg.line()
            .x(function (d) { return x(d.time); })
            .y(function (d) { return y1(d.temperature); }),

        precipline = d3.svg.line()
            .x(function (d) { return x(d.time); })
            .y(function (d) { return y2(d.precipIntensity); }),

        svg = d3.select("#plot")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" +
                    margin.left + "," + margin.top + ")"),

        background,
        tempspot,
        precipspot;

    x.domain(d3.extent(data, function (d) { return d.time; }));
    y1.domain(dilate(d3.extent(data, function (d) { return d.temperature; })));
    y2.domain(dilate(d3.extent(data, function (d) {
        return d.precipIntensity;
    })));

    background = svg.append("g")
        .attr("class", "background");


    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(y1Axis);

    svg.append("g")
        .attr("class", "y2 axis")
        .attr("transform", "translate(" + width + ",0)")
        .call(y2Axis);

    background.selectAll("rect")
        .data(data.slice(0, -1))
        .enter().append("rect")
        .attr("class", function (d) { return d.icon; })
        .attr("x", function (d) { return x(d.time); })
        .attr("y", "0")
        .attr("height", height)
        .attr("width", width / data.length + 2)
        .on("mouseover", function (d) {
            set_weather(d);
            tempspot
                .style("display", "inherit")
                .attr("cx", x(d.time))
                .attr("cy", y1(d.temperature));
            precipspot
                .style("display", "inherit")
                .attr("cx", x(d.time))
                .attr("cy", y2(d.precipIntensity));
        })
        .on("mouseout", function () {
            tempspot
                .style("display", "none");
            precipspot
                .style("display", "none");
            set_weather(current);
        });

    svg.append("path")
        .datum(data)
        .attr("class", "templine")
        .attr("d", templine);

    svg.append("path")
        .datum(data)
        .attr("class", "precipline")
        .attr("d", precipline);

    tempspot = svg.append("circle")
        .attr("class", "spot tempspot")
        .attr("r", 3.5);

    precipspot = svg.append("circle")
        .attr("class", "spot precipspot")
        .attr("r", 3.5);
}

function process_data(text) {
    var data = JSON.parse(text);
    data.currently.time = new Date(data.currently.time * 1000);
    console.log(data.hourly.data[0]);
    set_weather(data.currently);
    plot(data.hourly.data.slice(0, 26), data.currently);
    gid("weather").style.display = "inherit";
}

function process_request(request) {
    if (request.readyState === 4) {
        if (request.status === 200) {
            process_data(request.responseText);
        } else {
            console.log("There was a problem with the request.");
        }
    }
}

function get_weather(latitude, longitude) {
    var httpRequest = new XMLHttpRequest(),
        url = "weather/" + latitude + "/" + longitude;

    httpRequest.onreadystatechange = function () {
        process_request(httpRequest);
    };
    httpRequest.open("GET", url);
    httpRequest.send();
}

document.addEventListener("DOMContentLoaded", function () {
    navigator.geolocation.getCurrentPosition(function (position) {
        get_weather(position.coords.latitude, position.coords.longitude);
    });
});