/*
 *  'killbillGraph' is the namespace required to access all the public objects
 *
 *  PIE
 *
 *  Input for pie chart should be of the form
 *  dataforPie = {"name":"pie1", "data": [{"label":"one", "value":10}, ]};
 *
 *  LAYERS and LINES
 *
 *  Input for layers and line graphs are expected to be of the form:
 *  dataForGraph = [ {"name":"line1", "values":[{"x":"2013-01-01", "y":6}, {"x":"2013-01-02", "y":6}] },
 *                    {"name":"line2", "values":[{"x":"2013-01-01", "y":12}, {"x":"2013-01-02", "y":3}] } ];
 *
 *   There can be up to 20 lines -- limited by the color palette -- per graph; the graph can be either:
 *   - layered graph (KBLayersGraph)
 *   - lines graph (KBLinesGraph)
 *
 *   Description of the fields:
 *   - name is the 'name of the line-- as shown in the label
 *   - values are the {x,y} coordinates for each point; the x coordinates should be dates and should all be the same for each entries.
 *
 */
(function (killbillGraph, $, undefined) {


    /**
     * Input parameters to draw all the graphs
     */
    killbillGraph.KBInputGraphs = function (canvasWidth, canvasHeigth, topMargin, rightMargin, bottomMargin, leftMargin, betweenGraphMargin, graphData) {

        this.topMargin = topMargin;
        this.rightMargin = rightMargin;
        this.bottomMargin = bottomMargin;
        this.leftMargin = leftMargin;


        this.betweenGraphMargin = betweenGraphMargin;

        this.canvasWidth = canvasWidth;
        this.canvasHeigth = canvasHeigth;

        this.data = graphData;

    }


    /**
     * KBHistogram : Histogram chart
     */
    killbillGraph.KBHistogram = function (graphCanvas, title, data, width, heigth, palette) {

        // For non 'bin' histogram interesting blod post : http://www.recursion.org/d3-for-mere-mortals/

        this.graphCanvas = graphCanvas;
        this.name = name
        this.data = data;
        this.width = width;
        this.heigth = heigth;
        this.palette = palette;
        this.title = title;

        this.minValue;
        this.maxValue;


        this.computeMinMax = function () {
            var min;
            var max;
            for (var i = 0; i < this.data.length; i++) {
                if (min == null || this.data[i] < min) {
                    min = this.data[i];
                }
                if (max == null || this.data[i] > max) {
                    max = this.data[i];
                }
            }
            this.minValue = min - 1;
            this.maxValue = max + 2;
        }


        this.draw = function () {

            this.computeMinMax();

            var formatCount = d3.format(",.0f");

            var x = d3.scale.linear()
                .domain([this.minValue, this.maxValue])
                .range([0, this.width]);

            var data = d3.layout.histogram()
                .bins(x.ticks(10))
                (this.data);

            var y = d3.scale.linear()
                .domain([0, d3.max(data, function (d) {
                    return d.y;
                })])
                .range([this.heigth, 0]);

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

            var svg = this.graphCanvas
                .append("svg")
                .attr("width", this.width)
                .attr("height", this.height)
                .append("g")
                .attr("transform", "translate(" + 0 + "," + 0 + ")");

            var bar = svg.selectAll(".bar")
                .data(data)
                .enter().append("g")
                .attr("class", "bar")
                .attr("transform", function (d) {
                    return "translate(" + x(d.x) + "," + y(d.y) + ")";
                });

            var myself = this;
            bar.append("rect")
                .attr("x", 1)
                .attr("width", x(data[0].dx) - 1)
                .attr("height", function (d) {
                    return myself.heigth - y(d.y);
                });

            bar.append("text")
                .attr("dy", ".75em")
                .attr("y", 6)
                .attr("x", x(data[0].dx) / 2)
                .attr("text-anchor", "middle")
                .text(function (d) {
                    return formatCount(d.y);
                });

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

            this.graphCanvas.append("svg:text")
                .attr("class", "title")
                .attr("x", (this.width - this.title.length) / 2)
                .attr("y", -30)
                .text(this.title);
        }

        this.addOnMouseHandlers = function () {
            // Not implemented
        }

    }

    /**
     * KBPie : A Pie chart
     */
    killbillGraph.KBPie = function (graphCanvas, title, inputData, width, heigth, palette) {

        // If our value is less than that -- compared to total, we don't display this is too small.
        this.minDisplayRatio = 0.05;

        this.graphCanvas = graphCanvas;
        this.name = name
        this.inputData = inputData;
        this.width = width;
        this.heigth = heigth;
        this.radius = (this.width / 4);
        this.palette = palette;
        this.title = title;

        this.totalValue = function () {
            var result = 0;
            for (var i = 0; i < this.data.length; i++) {
                result = result + this.data[i].value;
            }
            return result;
        }

        this.draw = function () {
            this.addLegend();
            this.drawPie();
            this.addOnMouseHandlers();
        }

        this.drawPie = function () {

            var vis = this.graphCanvas
                .append("svg:svg")
                .data([this.data])
                .attr("width", this.width)
                .attr("height", this.heigth)
                .append("svg:g")
                .attr("transform", "translate(" + (this.width / 2) + "," + this.radius + ")");

            var arc = d3.svg.arc()
                .outerRadius(this.radius);

            var pie = d3.layout.pie()
                .value(function (d) {
                    return d.value;
                });

            var arcs = vis.selectAll("g.slice")
                .data(pie)
                .enter()
                .append("svg:g")
                .attr("class", "slice");

            var myself = this;
            arcs.append("svg:path")
                .style("fill", function (d, i) {
                    return palette(i);
                })
                .attr("id", function (d, i) {
                    return  "arc-" + myself.data[i]['id'];
                })
                .attr("d", arc);
            this.addValues(arcs, arc);
        }

        this.getDisplayValue = function (value) {
            var total = this.totalValue();
            var minDisplayRatio = this.minDisplayRatio;
            return (value / total > minDisplayRatio) ? "inline" : "none";
        }

        this.addValues = function (arcs, arc) {

            var myself = this;
            arcs.append("svg:text")
                .attr("transform", function (d) {
                    d.innerRadius = 0;
                    d.outerRadius = this.radius;
                    return "translate(" + arc.centroid(d) + ")";
                })
                .attr("id", function (d, i) {
                    return  "arc-value-" + myself.data[i]['id'];
                })
                .attr("text-anchor", "middle")
                .text(function (d, i) {
                    return myself.data[i].value;
                })
                .attr("display", function (d, i) {
                    return  myself.getDisplayValue(myself.data[i].value);
                });
        }


        this.addLegend = function () {

            this.graphCanvas.append("svg:text")
                .attr("class", "title")
                .attr("x", (this.width - this.title.length) / 2)
                .attr("y", -30)
                .text(this.title);

            var legend = this.graphCanvas.append("g")
                .attr("class", "legend")
                .attr("height", 100)
                .attr("width", 200)
                .attr('transform', 'translate(-100,0)')


            var myself = this;
            legend.selectAll('rect')
                .data(this.data)
                .enter()
                .append("rect")
                .attr("x", this.width - 65)
                .attr("y", function (d, i) {
                    return i * 20;
                })
                .attr("id", function (d, i) {
                    return "pie-legend-" + myself.data[i]['id'];
                })
                .attr("width", 11)
                .attr("height", 11)
                .attr("rx", 3)
                .attr("ry", 3)
                .style("fill", function (d, i) {
                    var color = palette(i);
                    return color;
                })

            legend.selectAll('text')
                .data(this.data)
                .enter()
                .append("text")
                .attr("x", this.width - 52)
                .attr("y", function (d, i) {
                    return i * 20 + 9;
                })
                .text(function (d, i) {
                    var text = d.label;
                    return text;
                });
        }

        this.addOnMouseHandlers = function () {
            this.addMouseLegend();
        }

        this.addMouseLegend = function () {

            var myself = this;
            $('rect').each(function (i) {


                var curLegendId = $(this).attr("id");
                if (curLegendId === undefined || curLegendId.substring(0, 11) != "pie-legend-") {
                    return;
                }

                var arcId = $(this).attr("id").replace("pie-legend", "arc");
                var arcValueId = $(this).attr("id").replace("pie-legend", "arc-value");
                var arcValue = $("#" + arcValueId);

                var otherArcs = new Array();
                var otherArcValues = new Array();
                for (var i = 0; i < myself.data.length; i++) {

                    var curArcId = "arc-" + myself.data[i]['id'];
                    var curArcValueId = "arc-value-" + myself.data[i]['id'];
                    if (curArcId != arcId) {
                        var curArc = $("#" + curArcId);
                        otherArcs.push(curArc);
                        var curArcValue = $("#" + curArcValueId);
                        otherArcValues.push(curArcValue);
                    }
                }

                var myPieLegendRect = $(this);
                $(this).hover(function () {
                    for (var i = 0; i < otherArcs.length; i++) {
                        otherArcs[i].attr("opacity", 0.1);
                        otherArcValues[i].attr("display", "none");
                    }

                    arcValue.attr("display", "inline");
                    myPieLegendRect.attr("width", 15)
                        .attr("height", 15)
                        .attr('transform', 'translate(-3,-3)');
                }, function () {
                    for (var i = 0; i < otherArcs.length; i++) {
                        otherArcs[i].attr("opacity", 1.0);
                        otherArcValues[i].attr("display", myself.getDisplayValue(parseInt(otherArcValues[i].text())));
                    }
                    arcValue.attr("display", myself.getDisplayValue(parseInt(arcValue.text())));

                    myPieLegendRect.attr("width", 11)
                        .attr("height", 11)
                        .attr('transform', 'translate(0,0)');
                });
            });
        }

        this.addDataId = function () {
            for (var i = 0; i < this.inputData.length; i++) {
                this.inputData[i]['id'] = (Math.random() + 1).toString(36).substring(7);
            }
            return this.inputData;
        }

        this.data = this.addDataId();

    }

    /**
     * KBTimeSeriesBase : Base class for both layered and non layered graphs
     */
    killbillGraph.KBTimeSeriesBase = function (graphCanvas, title, inputData, width, heigth, palette) {

        this.graphCanvas = graphCanvas;
        this.inputData = inputData;

        this.width = width;
        this.heigth = heigth;
        this.title = title;

        // the palette function out of which we create color map
        this.palette = palette;


        this.addDataId = function () {
            for (var i = 0; i < this.inputData.length; i++) {
                this.inputData[i]['id'] = (Math.random() + 1).toString(36).substring(7);
            }
            return this.inputData;
        }

        /**
         * Create the 'x' date scale
         * - dataX is is an ordered array of all the dates
         */
        this.getScaleDate = function () {

            var dataX = this.extractKeyOrValueFromDataLayer(this.data[0], 'x');
            var minDate = new Date(dataX[0]);
            var maxDate = new Date(dataX[dataX.length - 1]);
            return d3.time.scale().domain([minDate, maxDate]).range([0, width]);
        }


        this.formatDate = function (date) {

            // We want to display a UTC date, so before we extract year, month, day info, we add the time difference
            // between our timezone and UTC
            date.setHours(date.getHours() + (date.getTimezoneOffset() / 60));
            var date_part = date.getDate();
            var month_part = date.getMonth() + 1
            var year_part = date.getFullYear();

            return moment(date).format('MM[/]DD[/]YYYY')
        }

        /**
         * Create the 'Y' axis in a new svg group
         * - scaleY is the d3 scale built based on height and y point range
         */
        this.createYAxis = function (scaleY) {
            var yAxisLeft = d3.svg.axis().scale(scaleY).ticks(6).tickSize([-(this.width + 25)]).orient("left");

            this.graphCanvas.append("svg:g")
                .attr("class", "y axis")
                .attr("id", "yaxis-" + this['id'])
                .attr("transform", "translate(-25,0)")
                .call(yAxisLeft);

            /*
            $("#yaxis-" + this['id']).children().each(function (i) {
               if ($(this).attr('class') == 'domain') {
                   //$(this).attr("display", "none");
               }
                console.log("Got element " + $(this).attr('class'));
            });
            */
        }

        /**
         * Create the 'X' axis in a new svg group
         * - dataLayer : the data for the layer format
         * - xAxisGraphGroup the group where this axis will be attached to
         * - xAxisHeightTick the height of the ticks
         */
        this.createXAxis = function (xAxisGraphGroup, xAxisHeightTick) {

            var scaleX = this.getScaleDate();
            var xAxis = d3.svg.axis().scale(scaleX).tickSize(-xAxisHeightTick).tickSubdivide(true);
            xAxisGraphGroup.append("svg:g")
                .attr("class", "x axis")
                .call(xAxis);
        }


        /**
         * Add the cirles for each point in the graph line
         *
         * This is used for both stacked and non stacked lines
         */
        this.addCirclesForGraph = function (circleGroup, lineId, dataX, dataY, scaleX, scaleY, lineColor) {

            var nodes = circleGroup.selectAll("g")
                .data(dataY)
                .enter();

            nodes.append("svg:circle")
                .attr("id", function (d, i) {
                    return "circle-" + lineId + "-" + i;
                })
                .attr("cx", function (d, i) {
                    return scaleX(new Date(dataX[i]));
                })
                .attr("cy", function (d, i) {
                    return scaleY(d);
                })
                .attr("r", 3.5)
                .attr("fill", lineColor)
                .attr("value", function (d, i) {
                    return d;
                });
        }

        this.addOverlayForGraph = function (circleGroup, lineId, dataX, dataY, scaleX, scaleY) {

            var myself = this;

            var nodes = circleGroup.selectAll("g")
                .data(dataY)
                .enter()
                .append("svg:g");

            nodes.append("svg:rect")
                .attr("id", function (d, i) {
                    return "rect-" + lineId + "-" + i;
                })
                .attr("x", function (d, i) {
                    return scaleX(new Date(dataX[i]));
                })
                .attr("y", function (d, i) {
                    return scaleY(d);
                })
                .attr("width", 140)
                .attr("height", 50)
                .attr("rx", 5)
                .attr("ry", 5)
                .attr("display", "none")
                .style("fill", function (d, i) {
                    return "#222";
                })
                .attr("transform", 'translate(10,-30)');


            nodes.append("svg:text")
                .attr("id", function (d, i) {
                    return "text-" + lineId + "-" + i + "-1";
                })
                .attr("x", function (d, i) {
                    return scaleX(new Date(dataX[i]));
                })
                .attr("y", function (d, i) {
                    return scaleY(d);
                })
                .attr("fill", "#bbb")
                .attr("display", "none")
                .text(function (d, i) {
                    return "Date = " + myself.formatDate(new Date(dataX[i]));
                })
                .attr("transform", 'translate(30,-10)');

            nodes.append("svg:text")
                .attr("id", function (d, i) {
                    return "text-" + lineId + "-" + i + "-2";
                })
                .attr("x", function (d, i) {
                    return scaleX(new Date(dataX[i]));
                })
                .attr("y", function (d, i) {
                    return scaleY(d);
                })
                .attr("fill", "#bbb")
                .attr("display", "none")
                .text(function (d, i) {
                    return "Value = " + myself.numberWithCommas(d);
                })
                .attr("transform", 'translate(30, 10)');
        }


        this.numberWithCommas = function (x) {
            var parts = x.toString().split(".");
            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            return parts.join(".");
        }

        /**
         * Extract the 'x' or 'y' from dataLyer format where each entry if of the form:
         * - attr is either the 'x' or 'y'
         * - dataLayer : the data for a given layer
         * E.g:
         *  "name": "crescendo",
         *  "values": [
         *     { "x": "2010-07-08", "y":  0},
         *     ....
         */
        this.extractKeyOrValueFromDataLayer = function (dataLayer, attr) {
            var result = [];
            for (var i = 0; i < dataLayer.values.length; i++) {
                result.push(dataLayer.values[i][attr])
            }
            return result;
        }


        /**
         * Add on the path the name of the line -- not used anymore as we are using external labels
         */
        this.addPathLabel = function (graph, lineId, positionPercent) {
            graph.append("svg:g")
                .append("text")
                .attr("font-size", "15")
                .append("svg:textPath")
                .attr("xlink:href", "#path-" + lineId)
                .attr("startOffset", positionPercent)
                .text(function (d) {
                    return lineId;
                });
        }


        /**
         * Create a new group for the circles-- no translations needed
         */
        this.createCircleGroup = function (lineId) {
            return this.graphCanvas.append("svg:g")
                .attr("id", "circles-" + lineId);
        }

        this.createOverlayGroup = function (lineId) {
            return this.graphCanvas.append("svg:g")
                .attr("id", "overlay-" + lineId);
        }

        /**
         * Given a colorMap, extract the k-ieme color
         *
         * The colormap are standard d3 colormap which switch to new color every 4 colors;
         * in order to maximize the difference among colors we first get colors that are far apart
         *
         */
        this.getColor = function (k) {
            var div = Math.floor(k / 4);
            var mod = k % 4;
            var value = div + 4 * mod;
            return this.colorMap[value];
        }

        /**
         *  Create the color map from the d3 palette
         */
        this.createColorMap = function () {
            var colorMap = {}
            for (var i = 0; i < 20; i++) {
                colorMap[i] = this.palette(i);
            }
            return colorMap;
        }

        this.addLegend = function () {

            this.graphCanvas.append("svg:text")
                .attr("class", "title")
                .attr("x", (this.width - this.title.length ) / 2)
                .attr("y", -30)
                .text(this.title);

            var legend = this.graphCanvas.append("g")
                .attr("class", "legend")
                .attr("height", 100)
                .attr("width", 200)
                .attr('transform', 'translate(+80,+0)')


            var myself = this;
            legend.selectAll('rect')
                .data(this.data)
                .enter()
                .append("rect")
                .attr("id", function (d, i) {
                    return "ts-legend-" + myself.data[i]['id'];
                })
                .attr("x", this.width - 65)
                .attr("y", function (d, i) {
                    return i * 20;
                })
                .attr("width", 11)
                .attr("height", 11)
                .attr("rx", 3)
                .attr("ry", 3)
                .style("fill", function (d, i) {
                    var color = myself.getColor(i);
                    return color;
                })

            legend.selectAll('text')
                .data(this.data)
                .enter()
                .append("text")
                .attr("x", this.width - 52)
                .attr("y", function (d, i) {
                    return i * 20 + 9;
                })
                .text(function (d, i) {
                    var text = d.name;
                    var displayText = text;
                    if (text.length > 25) {
                       displayText = text.substring(0,25) + "...";
                    }
                    return displayText;
                });
        }

        this.addOnMouseHandlers = function () {
            this.addMouseOverCircleForValue();
            this.addMouseLegend();
        }

        /**
         * Attach handlers to all circles so as to display value
         *
         * Note that this will attach for all graphs-- not only the one attached to that objec
         */
        this.addMouseOverCircleForValue = function () {

            $('circle').each(function (i) {

                var textId1 = $(this).attr("id").replace("circle", "text") + "-1";
                var textId2 = $(this).attr("id").replace("circle", "text") + "-2";
                var rectId = $(this).attr("id").replace("circle", "rect");

                var circleText1 = $('#'.concat(textId1));
                var circleText2 = $('#'.concat(textId2));
                var circleRect = $('#'.concat(rectId));

                $(this).hover(function () {
                    circleRect.show();
                    circleText1.show();
                    circleText2.show();
                }, function () {
                    setTimeout(
                        function () {
                            circleRect.hide();
                            circleText1.hide();
                            circleText2.hide();
                        }, 100);

                });
            });
        }


        this.performActionOnMouseHoverLegend = function () {
        }

        /* Build and save colorMap */
        this.colorMap = this.createColorMap();

        this.data = this.addDataId();
        this.id = (Math.random() + 1).toString(36).substring(7);

    }

    /**
     *  KBLayersGraph : Inherits KBTimeSeriesBase abd offers specifics for layered graphs
     */
    killbillGraph.KBLayersGraph = function (graphCanvas, title, data, width, heigth, palette) {

        killbillGraph.KBTimeSeriesBase.call(this, graphCanvas, title, data, width, heigth, palette);


        /**
         * Create the area function that defines for each point in the stack graph
         * its x, y0 (offest from previous stacked graph) and y position
         */
        this.createLayerArea = function (scaleX, scaleY) {
            var area = d3.svg.area()
                .x(function (d) {
                    return scaleX(new Date(d.x));
                })
                .y0(function (d) {
                    return scaleY(d.y0);
                })
                .y1(function (d) {
                    return scaleY(d.y + d.y0);
                });
            return area;
        }

        /**
         * Create the 'y' scale for the stack graph
         *
         * Extract min/max for each x value across all layers
         *
         */
        this.getLayerScaleValue = function () {

            var tmp = [];
            for (var i = 0; i < this.data.length; i++) {
                tmp.push(this.data[i].values)
            }

            var sumValues = [];
            for (var i = 0; i < tmp[0].length; i++) {
                var max = 0;
                for (var j = 0; j < tmp.length; j++) {
                    max = max + tmp[j][i].y;
                }
                sumValues.push(max);
            }
            var minValue = 0;
            var maxValue = 0;
            for (var i = 0; i < sumValues.length; i++) {
                if (sumValues[i] < minValue) {
                    minValue = sumValues[i];
                }
                if (sumValues[i] > maxValue) {
                    maxValue = sumValues[i];
                }
            }
            if (minValue > 0) {
                minValue = 0;
            }
            return d3.scale.linear().domain([minValue, maxValue]).range([heigth, 0]);
        }


        /**
         * All all layers on the graph
         */
        this.addLayers = function (stack, area, dataLayers) {

            var dataLayerStack = stack(dataLayers);

            var currentObj = this;

            this.graphCanvas.selectAll("path")
                .data(dataLayerStack)
                .enter()
                .append("path")
                .style("fill",function (d, i) {
                    return currentObj.getColor(i);
                }).attr("d", function (d) {
                    return area(d.values);
                })
                .attr("id", function (d) {
                    return "path-" + d.id;
                });
        }

        this.draw = function () {
            this.addLegend();
            this.drawStackLayers();
            this.addOnMouseHandlers();
        }

        /**
         * Draw all layers-- calls previous function addLayers
         * It will create its Y axis
         */
        this.drawStackLayers = function () {

            var scaleX = this.getScaleDate();
            var scaleY = this.getLayerScaleValue();

            var stack = d3.layout.stack()
                .offset("zero")
                .values(function (d) {
                    return d.values;
                });

            var area = this.createLayerArea(scaleX, scaleY);

            this.addLayers(stack, area, this.data);

            var dataX = this.extractKeyOrValueFromDataLayer(this.data[0], 'x');
            var dataY0 = null;
            for (var i = 0; i < this.data.length; i++) {

                var circleGroup = this.createCircleGroup(this.data[i]['id']);
                var dataY = this.extractKeyOrValueFromDataLayer(this.data[i], 'y');
                if (dataY0) {
                    for (var k = 0; k < dataY.length; k++) {
                        dataY[k] = dataY[k] + dataY0[k];
                    }
                }
                this.addCirclesForGraph(circleGroup, this.data[i]['id'], dataX, dataY, scaleX, scaleY, this.getColor(i));
                dataY0 = dataY;
            }

            this.createYAxis(scaleY);

            dataY0 = null;
            for (var i = 0; i < this.data.length; i++) {
                var circleGroup = this.createOverlayGroup(this.data[i]['id']);
                var dataY = this.extractKeyOrValueFromDataLayer(this.data[i], 'y');
                if (dataY0) {
                    for (var k = 0; k < dataY.length; k++) {
                        dataY[k] = dataY[k] + dataY0[k];
                    }
                }
                this.addOverlayForGraph(circleGroup, this.data[i]['id'], dataX, dataY, scaleX, scaleY);
                dataY0 = dataY;
            }

        }

        this.addMouseLegend = function () {

            var myself = this;
            $('rect').each(function (i) {

                var curLegendId = $(this).attr("id");
                if (curLegendId === undefined || curLegendId.substring(0, 10) != "ts-legend-") {
                    return;
                }

                var pathId = $(this).attr("id").replace("ts-legend", "path");
                var path = $("#" + pathId);

                var otherPaths = new Array();
                var otherCircles = new Array();
                for (var i = 0; i < myself.data.length; i++) {
                    if ("path-" + myself.data[i]['id'] != pathId) {
                        var curPath = $("#path-" + myself.data[i]['id']);
                        otherPaths.push(curPath);

                        var curCircle = $("#circles-" + myself.data[i]['id']);
                        otherCircles.push(curCircle);
                    }
                }

                var myLegendRect = $(this);
                $(this).hover(function () {
                    for (var i = 0; i < otherPaths.length; i++) {
                        otherPaths[i].attr("opacity", 0.1);
                        otherCircles[i].attr("opacity", 0);
                    }

                    myLegendRect.attr("width", 15)
                        .attr("height", 15)
                        .attr('transform', 'translate(-3,-3)');
                }, function () {
                    setTimeout(
                        function () {

                            for (var i = 0; i < otherPaths.length; i++) {
                                otherPaths[i].attr("opacity", 1.0);
                                otherCircles[i].attr("opacity", 1.0);
                            }
                            myLegendRect.attr("width", 11)
                                .attr("height", 11)
                                .attr('transform', 'translate(0,0)');
                        }, 100);
                });
            });
        }
    }
    killbillGraph.KBLayersGraph.prototype = Object.create(killbillGraph.KBTimeSeriesBase.prototype);


    /**
     *  KBLinesGraph : Inherits KBTimeSeriesBase abd offers specifics for layered graphs
     */
    killbillGraph.KBLinesGraph = function (graphCanvas, title, data, width, heigth, palette) {

        killbillGraph.KBTimeSeriesBase.call(this, graphCanvas, title, data, width, heigth, palette);

        /**
         * Create the 'y' scale for line graphs (non stacked)
         */
        this.getScaleValue = function () {

            var dataYs = [];
            for (var k = 0; k < this.data.length; k++) {
                var dataY = this.extractKeyOrValueFromDataLayer(this.data[k], 'y');
                dataYs.push(dataY);
            }

            var minValue = 0;
            var maxValue = 0;
            for (var i = 0; i < dataYs.length; i++) {
                for (var j = 0; j < dataYs[i].length; j++) {
                    if (dataYs[i][j] < minValue) {
                        minValue = dataYs[i][j];
                    }
                    if (dataYs[i][j] > maxValue) {
                        maxValue = dataYs[i][j];
                    }
                }
            }
            if (minValue > 0) {
                minValue = 0;
            }
            return d3.scale.linear().domain([minValue, maxValue]).range([this.heigth, 0]);
        }

        /**
         * Add the svg line for this data (dataX, dataY)
         */
        this.addLine = function (dataY, scaleX, scaleY, lineColor, lineId) {

            var dataX = this.extractKeyOrValueFromDataLayer(this.data[0], 'x');
            this.graphCanvas.selectAll("path.line")
                .data([dataY])
                .enter()
                .append("svg:path")
                .attr("stroke-width", 1.5)
                .attr("d", d3.svg.line()
                    .x(function (d, i) {
                        return scaleX(new Date(dataX[i]));
                    })
                    .y(function (d) {
                        return scaleY(d);
                    }))
                .attr("id", "path-" + lineId)
                .style("stroke", lineColor);
        }

        this.draw = function () {
            this.addLegend();
            this.drawLines();
            this.addOnMouseHandlers();
        }

        /**
         * Draw all lines
         * It will create its Y axis
         */
        this.drawLines = function () {

            var scaleX = this.getScaleDate();
            var scaleY = this.getScaleValue();

            for (var k = 0; k < this.data.length; k++) {
                var dataY = this.extractKeyOrValueFromDataLayer(this.data[k], 'y');
                this.addLine(dataY, scaleX, scaleY, this.getColor(k), this.data[k]['id']);
            }

            for (var k = 0; k < this.data.length; k++) {
                var dataX = this.extractKeyOrValueFromDataLayer(this.data[0], 'x');
                var dataY = this.extractKeyOrValueFromDataLayer(this.data[k], 'y');
                var lineId = this.data[k]['id']
                var circleGroup = this.createCircleGroup(lineId);
                this.addCirclesForGraph(circleGroup, lineId, dataX, dataY, scaleX, scaleY, this.getColor(k));
            }

            this.createYAxis(scaleY);

            for (var k = 0; k < this.data.length; k++) {
                var dataX = this.extractKeyOrValueFromDataLayer(this.data[0], 'x');
                var dataY = this.extractKeyOrValueFromDataLayer(this.data[k], 'y');
                var lineId = this.data[k]['id']
                var circleGroup = this.createOverlayGroup(lineId);
                this.addOverlayForGraph(circleGroup, lineId, dataX, dataY, scaleX, scaleY);

            }
        }

        this.addMouseLegend = function () {

            $('rect').each(function (i) {

                var curLegendId = $(this).attr("id");
                if (curLegendId === undefined || curLegendId.substring(0, 10) != "ts-legend-") {
                    return;
                }

                var pathId = $(this).attr("id").replace("ts-legend", "path");
                var path = $("#" + pathId);

                var myLegendRect = $(this);
                $(this).hover(function () {
                    path.attr("stroke-width", 3);
                    myLegendRect.attr("width", 15)
                        .attr("height", 15)
                        .attr('transform', 'translate(-3,-3)');
                }, function () {
                    setTimeout(
                        function () {
                            path.attr("stroke-width", 1.5);
                            myLegendRect.attr("width", 11)
                                .attr("height", 11)
                                .attr('transform', 'translate(0,0)');
                        }, 100);
                });
            });
        }
    }

    killbillGraph.KBLinesGraph.prototype = Object.create(killbillGraph.KBTimeSeriesBase.prototype);


    killbillGraph.GraphStructure = function () {

        /**
         * Setup the main divs for both legend and main charts
         *
         * It is expected to have a mnain div anchir on the html with id = 'chartAnchor'.
         */
        this.setupDomStructure = function () {

            var $divChart = $('<div id="charts" class="charts">');
            var $spanChart = $('<span id="chartId" class="charts"></span>');
            $divChart.prepend($spanChart);

            $("#chartAnchor").append($divChart);
        }


        /**
         * Create initial canvas on which to draw all graphs
         */
        this.createCanvas = function (m, w, h) {

            // See http://tutorials.jenkov.com/svg/svg-viewport-view-box.html
            var canvasViewBoxWidth = w + m[1] + m[3];
            var canvasViewPortWidth =  canvasViewBoxWidth;
            var canvasHeight = h + m[0] + m[2];

            return d3.select("#chartId")
                .append("svg:svg")
                .attr("width", canvasViewPortWidth)
                .attr("height", canvasHeight)
                .attr("viewBox", "0 0 " + canvasViewBoxWidth + " " + canvasHeight)
                .attr("preserveAspectRatio", "xMinYMin meet");
        }


        /**
         * Create a new group and make the translation to leave room for margins
         */
        this.createCanvasGroup = function (canvas, translateX, translateY) {
            return canvas
                .append("svg:g")
                .attr("transform", "translate(" + translateX + "," + translateY + ")");

        }
    };

}(window.killbillGraph = window.killbillGraph || {}, jQuery)
    )
;