(function() {
    var margin = {
            top: 20,
            right: 20,
            bottom: 30,
            left: 50
        },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var x = d3.time.scale()
        .range([0, width]);

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var line = d3.svg.line()
        .x(function(d) {
            return x(d.ts);
        })
        .y(function(d) {
            return y(d.data);
        });

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

    var data = getRandomData(1000);

    x.domain(d3.extent(data, function(d) {
        return d.ts;
    }));

    y.domain(d3.extent(data, function(d) {
        return d.data;
    }));

    svg.append("text")
        .attr("class", "log")
        .attr("dx", 12)
        .attr("dy", 12)
        .text("data:" + data.length + " downsampled:" + 0);

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

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

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

    resize();

    function getRandomValue(min, max) {
        return Math.random() * (max - min) + min;
    }

    function getRandomData(count) {
        count = count || 0;
        for (var data = [],
                day = 24 * 3600 * 1000,
                date = new Date() * 1,
                lognormal = d3.random.logNormal(1, .5),
                i = 0; i < count; i++) {
            date = date + day;
            data.push({
                "ts": date,
                "data": lognormal(),
            });
        }

        return data;
    }


    function largestTriangleThreeBucket(data, threshold, xProperty, yProperty) {
        /**
         * This method is adapted from the 
         * "Largest Triangle Three Bucket" algorithm by Sveinn Steinarsson
         * In his 2013 Masters Thesis - "Downsampling Time Series for Visual Representation"
         * http://skemman.is/handle/1946/15343
         *
         * The MIT License
         *  
         * Copyright (c) 2013 by Sveinn Steinarsson
         *
         * Permission is hereby granted, free of charge, to any person obtaining a copy
         * of this software and associated documentation files (the "Software"), to deal
         * in the Software without restriction, including without limitation the rights
         * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
         * copies of the Software, and to permit persons to whom the Software is
         * furnished to do so, subject to the following conditions:
         * The above copyright notice and this permission notice shall be included in
         * all copies or substantial portions of the Software.
         * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
         * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
         * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
         * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
         * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
         * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
         * THE SOFTWARE.
         * --------------------------------------------------------------------------------------------------------
         */
        yProperty = yProperty || 0;
        xProperty = xProperty || 1;

        var m = Math.floor,
            y = Math.abs,
            f = data.length;

        if (threshold >= f || 0 === threshold) {
            return data;
        }

        var n = [],
            t = 0,
            p = (f - 2) / (threshold - 2),
            c = 0,
            v,
            u,
            w;

        n[t++] = data[c];

        for (var e = 0; e < threshold - 2; e++) {
            for (var g = 0,
                    h = 0,
                    a = m((e + 1) * p) + 1,
                    d = m((e + 2) * p) + 1,
                    d = d < f ? d : f,
                    k = d - a; a < d; a++) {
                g += +data[a][xProperty], h += +data[a][yProperty];
            }

            for (var g = g / k,
                    h = h / k,
                    a = m((e + 0) * p) + 1,
                    d = m((e + 1) * p) + 1,
                    k = +data[c][xProperty],
                    x = +data[c][yProperty],
                    c = -1; a < d; a++) {
                "undefined" != typeof data[a] &&
                    (u = .5 * y((k - g) * (data[a][yProperty] - x) - (k - data[a][xProperty]) * (h - x)),
                        u > c && (c = u, v = data[a], w = a));
            }

            n[t++] = v;
            c = w;
        }

        n[t++] = data[f - 1];

        return n;
    };

    function resize() {
        // get the container dimensions
        var container = d3.select('#timeseries');
        width = parseInt(container.style('width'), 10);
        width = width - margin.left - margin.right;
        height = parseInt(container.style('height'), 10);
        height = height - margin.top - margin.bottom;

        // set the new ranges and axes
        x.range([0, width]);
        y.range([height, 0]).nice();

        // define this number of axis ticks relative to the pixel length of the axis
        xAxis.ticks(Math.max(width / 100, 2));
        yAxis.ticks(Math.max(height / 50, 2));

        d3.select(".x.axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        d3.select(".y.axis")
            .call(yAxis);

        // calculate the downsample data using half the width as the threshold
        var downsampled = largestTriangleThreeBucket(data, width / 2, "ts", "data");

        // redraw the path with the downsampled data
        d3.select("path.line")
            .datum(downsampled)
            .attr("d", line);

        // output the lengths
        d3.select(".log").text("data:" + data.length + " downsampled:" + downsampled.length);
    }

    d3.select(window).on('resize', resize);

})();