#Set Intervals

  weekInterval = 120

  monthInterval = 76

  yearInterval = 70

  weekTicks = ["Dec 11", "Dec 12", "Dec 13", "Dec 14", "Dec 15", "Dec 16", "Dec 17"]

  monthTicks = ["Nov 17", "Nov 20", "Nov 23", "Nov 26", "Nov 29", "Dec 2", "Dec 5", "Dec 8", "Dec 11", "Dec 14", "Dec 17"]

  threeMonthTicks = ["Sep 18", "Sep 27", "Oct 6", "Oct 15", "Oct 24", "Nov 2", "Nov 11", "Nov 20", "Nov 29", "Dec 8", "Dec 17"]

  sixMonthTicks = ["Jun 21", "Jul 9", "Jul 27", "Aug 14", "Sep 1", "Sep 19", "Oct 7", "Oct 25", "Nov 12", "Nov 30", "Dec 17"]

  yearTicks = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

  barTicks = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sun"]

  messageTicks = ["1", "2", "3", "4", "5"]

  ratingsTicks = ["1", "2", "3", "4", "5"]

  typeTicks = ["Type 1", "Type 2", "Type 3", "Type 4"]

  timeTicks = ["0h", "6h", "12h", "18h", "24h"]

  npsTicks = ["-100", "-50", "0", "50", "100"]

  reviewsTicks = ["veryunhappy", "unhappy", "neutral", "happy", "veryhappy"]
  
  unsubTicks = ["0", "15%", "30%", "45%", "60%"]

  frequencyData = [{ "x": 0,   "y": 1}, { "x": 1,  "y": 2},
                { "x": 2,  "y": 5}, { "x": 3,  "y": 4},
                { "x": 4,  "y": 3}, { "x": 5, "y": 1},
                { "x": 6,  "y": 5}];

  typeData = [{ "x": 0,   "y": 2}, { "x": 1,  "y": 3},
                { "x": 2,  "y": 3}, { "x": 3,  "y": 3},
                { "x": 4,  "y": 2}, { "x": 5, "y": 2},
                { "x": 6,  "y": 3}];

  type2Data = [{ "x": 0,   "y": 2}, { "x": 1,  "y": 4},
                { "x": 2,  "y": 3}, { "x": 3,  "y": 3},
                { "x": 4,  "y": 2}, { "x": 5, "y": 2},
                { "x": 6,  "y": 3}]; 

  dateBarData = [2, 3, 2.3, 4.2, 2.1, 1, 3.7]

  timeData = [{ "x": 0,   "y": 1}, { "x": 1,  "y": 5},
                { "x": 2,  "y": 2}, { "x": 3,  "y": 5},
                { "x": 4,  "y": 3}, { "x": 5, "y": 5},
                { "x": 6,  "y": 2}];

  satisfactionData = [{ "x": 0,   "y": 3.7}, { "x": 1,  "y": 3.76},
                { "x": 2,  "y": 3.6}, { "x": 3,  "y": 3.68},
                { "x": 4,  "y": 3.9}, { "x": 5, "y": 4},
                { "x": 6,  "y": 4.1}];

  ratingsData = [{ "x": 0,   "y": 3.4}, { "x": 1,  "y": 2.9},
                { "x": 2,  "y": 3.6}, { "x": 3,  "y": 2.7},
                { "x": 4,  "y": 3.1}, { "x": 5, "y": 3.3},
                { "x": 6,  "y": 3.2}];

  valueData = [{ "x": 0,   "y": 2}, { "x": 1,  "y": 1},
                { "x": 2,  "y": 3}, { "x": 3,  "y": 2},
                { "x": 4,  "y": 1}, { "x": 5, "y": 2},
                { "x": 6,  "y": 3}];

  frequencyRData = [{ "x": 0,   "y": 4}, { "x": 1,  "y": 1},
                { "x": 2,  "y": 2}, { "x": 3,  "y": 2},
                { "x": 4,  "y": 3}, { "x": 5, "y": 5},
                { "x": 6,  "y": 5}];

  relevancyData = [{ "x": 0,   "y": 1}, { "x": 1,  "y": 2},
                { "x": 2,  "y": 3}, { "x": 3,  "y": 2},
                { "x": 4,  "y": 1}, { "x": 5, "y": 1},
                { "x": 6,  "y": 5}];

  designData = [{ "x": 0,   "y": 1}, { "x": 1,  "y": 3},
                { "x": 2,  "y": 2}, { "x": 3,  "y": 3},
                { "x": 4,  "y": 2}, { "x": 5, "y": 5},
                { "x": 6,  "y": 2}];

  reviewsData = [{ "x": 0,   "y": 3.1}, { "x": 1,  "y": 4.5},
                { "x": 2,  "y": 4.7}, { "x": 3,  "y": 4.85},
                { "x": 4,  "y": 5}, { "x": 5, "y": 4.8},
                { "x": 6,  "y": 5}];

  survey1Data = [{ "x": 0,   "y": 3}, { "x": 1,  "y": 2},
                { "x": 2,  "y": 1}, { "x": 3,  "y": 3},
                { "x": 4,  "y": 4}, { "x": 5, "y": 1},
                { "x": 6,  "y": 1}];

  survey2Data = [{ "x": 0,   "y": 5}, { "x": 1,  "y": 2},
                { "x": 2,  "y": 1}, { "x": 3,  "y": 3},
                { "x": 4,  "y": 2}, { "x": 5, "y": 1},
                { "x": 6,  "y": 1}];

  survey3Data = [{ "x": 0,   "y": 2}, { "x": 1,  "y": 1},
                { "x": 2,  "y": 2}, { "x": 3,  "y": 3},
                { "x": 4,  "y": 2}, { "x": 5, "y": 3},
                { "x": 6,  "y": 2}];

  survey4Data = [{ "x": 0,   "y": 3}, { "x": 1,  "y": 5},
                { "x": 2,  "y": 1}, { "x": 3,  "y": 5},
                { "x": 4,  "y": 4}, { "x": 5, "y": 3},
                { "x": 6,  "y": 3}];

  survey5Data = [{ "x": 0,   "y": 4}, { "x": 1,  "y": 1},
                { "x": 2,  "y": 4}, { "x": 3,  "y": 1},
                { "x": 4,  "y": 3}, { "x": 5, "y": 3},
                { "x": 6,  "y": 3}];

  survey6Data = [{ "x": 0,   "y": 1}, { "x": 1,  "y": 1},
                { "x": 2,  "y": 2}, { "x": 3,  "y": 5},
                { "x": 4,  "y": 4}, { "x": 5, "y": 2},
                { "x": 6,  "y": 5}];

  monthData = [{ "x": 0,   "y": 1}, { "x": 1,  "y": 1},
                { "x": 2,  "y": 2.2}, { "x": 3,  "y": 5},
                { "x": 4,  "y": 4}, { "x": 5, "y": 2},
                { "x": 6,  "y": 5}, { "x": 7, "y": 2.1},
                { "x": 8,  "y": 5}, { "x": 9, "y": 2.4},
                { "x": 10,  "y": 5}];

  threeMonthData = [{ "x": 0,   "y": 3}, { "x": 1,  "y": 2},
                { "x": 2,  "y": 3.2}, { "x": 3,  "y": 4.2},
                { "x": 4,  "y": 4.1}, { "x": 5, "y": 2},
                { "x": 6,  "y": 3}, { "x": 7, "y": 2.1},
                { "x": 8,  "y": 3}, { "x": 9, "y": 2.4},
                { "x": 10,  "y": 3}];

  sixMonthData = [{ "x": 0,   "y": 1.2}, { "x": 1,  "y": 3},
                { "x": 2,  "y": 2.2}, { "x": 3,  "y": 1,2},
                { "x": 4,  "y": 4.1}, { "x": 5, "y": 2.6},
                { "x": 6,  "y": 5}, { "x": 7, "y": 2.1},
                { "x": 8,  "y": 3.2}, { "x": 9, "y": 2.4},
                { "x": 10,  "y": 4.1}];

  yearData = [{ "x": 0,   "y": 1}, { "x": 1,  "y": 1},
                { "x": 2,  "y": 2.2}, { "x": 3,  "y": 5},
                { "x": 4,  "y": 4}, { "x": 5, "y": 2},
                { "x": 6,  "y": 5}, { "x": 7, "y": 2.1},
                { "x": 8,  "y": 5}, { "x": 9, "y": 2.4},
                { "x": 10,  "y": 5}, { "x": 11,  "y": 3}];

  graphHolders = d3.selectAll(".graphHolder")

  #svg Holder divs
  svgDivs = graphHolders.append("svg")
    .attr("width", 920)
    .attr("height", 320)

  #Plot Background
  svgDivs.append("rect")
    .attr("class", "plot")
    .attr("width", 840)
    .attr("height", 300)
    .attr("x", 55)
    .attr("y", 1)
    .attr("rx", 5)
    .attr("ry", 5)
    .attr("stroke", "#dbe0e2")
    .attr("stroke-width", 1)
    .style("fill", "white")

  #Add GridLines Groups
  gridGroup = svgDivs.append("g")
    .attr("class", "gridLines")

  #Add yAxisGridLines group
  yLineGroup = gridGroup.append("g")
    .attr("class", "yLines")
    .attr("transform", "translate(55,280)")

  #Add Line Groups
  yLines = yLineGroup.selectAll("g")
    .data(messageTicks)
    .enter()
    .append("g")
    .attr("transform", (d,i) -> return "translate(0," + -((i*56)+28) + ")")

  #Add Lines to the groups
  yLines.each((tickData) ->
    d3.select(this)
      .append("line")
      .data(tickData)
      .attr("y2", 0)
      .attr("x2", 840)
      .attr("style", "stroke: #eaeff4; fill: none; stroke-width: 1px;")
  )

  #Group for the xAxisLabels
  xAxisLabels = svgDivs.append("g").attr("class", "xAxisLabels")
    .attr("transform", "translate(54,280)")
    
  #xAxisLabels Background
  xAxisLabels.append("rect")
    .attr("class", "xAxisLabelsBG")
    .attr("width", 842)
    .attr("height", 30)
    .style("fill", "#eaeff4")

  setXLines = (interval, ticks) ->
    #Add xAxisGridLines group
    xLineGroup = gridGroup.append("g")
      .attr("class", "xLines")
      .attr("transform", "translate(55,300)")

    #Add Line Groups
    xLines = xLineGroup.selectAll("g")
      .data(ticks)
      .enter()
      .append("g")
      .attr("transform", (d,i) -> return "translate(" + ((i*interval)) + ",0)")

    #Add Lines to the groups
    xLines.each((tickData) ->
      d3.select(this)
        .append("line")
        .data(tickData)
        .attr("y2", -298)
        .attr("x2", 0)
        .attr("style", "stroke: #eaeff4; fill: none; stroke-width: 1px;")
    )

    #Add groups for the daily text 
    tickGroups = xAxisLabels.selectAll("g")
      .data(ticks)
      .enter()
      .append("g")
      .attr("class", "tickGroups")
      .attr("transform", (d,i) -> return "translate(" + ((i*interval)) + ",0)")

    #Add the date data to text fields
    tickGroups.each((tickData) ->
      d3.select(this)
        .append("text")
        .text(tickData)
        .attr("y", 10)
        .attr("dy", ".71em")
        .attr("style", "text-anchor: middle; fill: #586874;")
    )

  setBarTicks = ->
    #Add groups for the daily text 
    tickGroups = xAxisLabels.selectAll("g")
      .data(barTicks)
      .enter()
      .append("g")
      .attr("class", "tickGroups")
      .attr("transform", (d,i) -> return "translate(" + ((i*120)+60) + ",0)")

    #Add the date data to text fields
    tickGroups.each((tickData) ->
      d3.select(this)
        .append("text")
        .text(tickData)
        .attr("y", 10)
        .attr("dy", ".71em")
        .attr("style", "text-anchor: middle; fill: #586874;")
    )

  resetXLines = ->
    d3.selectAll("g.xLines").remove()
    d3.selectAll("g.tickGroups").remove()

  #yAxis label functions
  setYLabels = (graph, data) ->
    #Group for the yAxisLabels
    yAxisLabels = graph.append("g").attr("class", "yAxisLabels")
      .attr("transform", "translate(40,280)")
    #Add groups for the text 
    yAxisTickGroups = yAxisLabels.selectAll("g")
      .data(data)
      .enter()
      .append("g")
      .attr("transform", (d,i) -> return "translate(0," + -((i*56)+28) + ")")
    #Add the yAxis number data with text fields
    yAxisTickGroups.each((tickData) ->
      d3.select(this)
        .append("text")
        .text(tickData)
        .attr("x", 0)
        .attr("y", 0)
        .attr("dy", ".32em")
        .attr("style", "text-anchor: end; fill: #586874;")
    )

  setRatingsLabels = (graph) ->
    #Group for the yAxisLabels
    yAxisLabels = graph.append("g").attr("class", "yAxisLabels")
      .attr("transform", "translate(25,280)")
    #Add groups for the text 
    yAxisTickGroups = yAxisLabels.selectAll("g")
      .data(ratingsTicks)
      .enter()
      .append("g")
      .attr("transform", (d,i) -> return "translate(0," + -((i*56)+28) + ")")
    #Add the yAxis number data with text fields
    yAxisTickGroups.each((tickData) ->
      d3.select(this)
        .append("image")
        .attr("width", 28)
        .attr("height", 28)
        .attr("x", -14)
        .attr("y", -14)
        .attr("xlink:href", "/static/images/star.svg")
    )

  setReviewsLabels = (graph) ->
    #Group for the yAxisLabels
    yAxisLabels = graph.append("g").attr("class", "yAxisLabels")
      .attr("transform", "translate(25,280)")
    #Add groups for the text 
    yAxisTickGroups = yAxisLabels.selectAll("g")
      .data(reviewsTicks)
      .enter()
      .append("g")
      .attr("transform", (d,i) -> return "translate(0," + -((i*56)+28) + ")")
    #Add the yAxis number data with text fields
    yAxisTickGroups.each((tickData) ->
      d3.select(this)
        .append("image")
        .attr("width", 36)
        .attr("height", 36)
        .attr("x", -22)
        .attr("y", -18)
        .attr("xlink:href", "/static/images/#{tickData}.svg")
    )

  #Line/Circle Drawing Functions


  #Initialize Current Interval
  currentInterval = weekInterval

  currentTicks = weekTicks

  setLineFunction =  ->
    return lineFunction = d3.svg.line()
      .x((d) -> return ((d.x*currentInterval)))
      .y((d) -> return -((d.y*56)+28))
      .interpolate("linear")

  #Intial LineDrawer
  lineFunction = setLineFunction()

  #on CircleMouseOver
  circleMouseOver = ->
    circle = d3.select(this)
    circle.transition().duration(500).attr("r", 11)
    circleData = circle.data()[0]
    left = ((circleData.x)*currentInterval)+28
    top = ((6 - (circleData.y))*56)+53
    $(".toolTip .dataValue p").text(circleData.y)
    $(".toolTip").css("left", "#{left}px").css("top", "#{top}px").addClass("visible").removeClass("fade")

  #on CircleMouseOut
  circleMouseOut = ->
    circle = d3.select(this)
    circle.transition().duration(500).attr("r", 8)
    $(".toolTip").addClass("fade").removeClass("visible")

  #set circle function
  setCircles = (graph, data, interval)  ->
    circleGroup = graph.append("g")
      .attr("class", "circleGroup")
      .attr("transform", "translate(55,336)")
    circles = circleGroup.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("r", 8)
      .attr("style", "fill: #ffffff; stroke: #6f90ab; stroke-width: 3;")
      .attr("cx", (d) -> return ((d.x*interval)))
      .attr("cy", (d) -> return -((d.y*56)+28))
      .on("mouseover", circleMouseOver)
      .on("mouseout", circleMouseOut)

  #Set Range
  y = d3.scale.linear().domain([1,d3.max(dateBarData)]).range([224, 0])

  #Set Bars
  setBars = (graph, data)  ->
    barWidth = 420 / data.length
    barGroup = graph.append("g")
      .attr("class", "barGroup")
      .attr("transform", "translate(35,55)")
    bars = barGroup.selectAll("bar")
      .data(data)
      .enter()
      .append("rect")
      .attr("x", (d, i) -> return (i * barWidth * 2) + 52)
      .attr("y", (d) -> return y(d) - 27)
      .attr("height", (d) -> return 251 - y(d))
      .attr("width", barWidth - 1)
      .attr("style", "fill: #6f90ab;")

  #set line function
  setLine = (graph, data) ->
    lineGroup = graph.append("g")
      .attr("class", "lineGroup")
      .attr("transform", "translate(55,336)")
    paths = lineGroup.append("path")
      .attr("d", lineFunction(data))
      .attr("stroke", "#6f90ab")
      .attr("stroke-width", 5)
      .attr("fill", "none")

  #initialize graph for week
  setXLines(120, weekTicks)

  initializeGraph = (graph, data, ticks) ->
    setLine(graph, data)
    setCircles(graph, data, currentInterval)
    setYLabels(graph, ticks)

  initializeRatingsGraph = (graph, data) ->
    setLine(graph, data)
    setCircles(graph, data, currentInterval)
    setRatingsLabels(graph)

  initializeReviewsGraph = (graph, data) ->
    setLine(graph, data)
    setCircles(graph, data, currentInterval)
    setReviewsLabels(graph)

  resetGraph = (graph) ->
    graph.selectAll(".lineGroup").remove()
    graph.selectAll(".circleGroup").remove()
    graph.select(".yAxisLabels").remove()
    graph.select(".barGroup").remove()
    resetXLines()
    setXLines(currentInterval, currentTicks)


  #reset Time Toggle
  resetTime = ->
    $("#timeToggle button").removeClass("active")
    $("#timeToggle button#week").addClass("active")
    currentTicks = weekTicks
    currentInterval = weekInterval
    lineFunction = setLineFunction()
  



  #Set Engagement Graph line and circles for Satisfaction data
  engagementGraph = d3.select("#VOSGraph svg")
  initializeGraph(engagementGraph, satisfactionData, npsTicks)
  
  #Set Unsub Graph line and circles for Satisfaction data
  unsubGraph = d3.select("#unsubGraph svg")
  initializeGraph(unsubGraph, survey1Data, unsubTicks)

  #Set Message Graph line and circles for frequency data
  messageGraph = d3.select("#messageGraph svg")
  initializeGraph(messageGraph, frequencyData, messageTicks)

#Stop Copy