$(document).ready ->
  
  options = $(".accountOptions")

  updatePos = ->
    mainHeight = $("#rightContent").height()
    $("#accountNav").height(mainHeight)
    $("#mainContent").height(mainHeight)
    if options.hasClass("fixed")
      if $(window).scrollTop() + $(window).height() > mainHeight + 39
        options.removeClass("fixed").addClass("relative")
    if options.hasClass("relative")
      if $(window).scrollTop() + $(window).height() < mainHeight + 39
        options.removeClass("relative").addClass("fixed")

  updatePos()

  weeklyTicks = ["May 25", "Jun 1", "Jun 8", "Jun 15", "Jun 15", "Jun 22", "Jul 29", "Jul 6", "Jul 13", "Jul 20"]

  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%"]

  freqData = [{ "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}, { "x": 7,  "y": 4},
                { "x": 8,  "y": 3}, { "x": 9, "y": 1}];

  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}, { "x": 7,  "y": 2},
                { "x": 8,  "y": 1}, { "x": 9, "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}, { "x": 7,  "y": 2},
                { "x": 8,  "y": 1}, { "x": 9, "y": 3}]; 

  typeBarData = [1, 3, 4, 5]

  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}, { "x": 7,  "y": 3},
                { "x": 8,  "y": 2}, { "x": 9, "y": 4}];

  satData = [{ "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}, { "x": 7,  "y": 3.84},
                { "x": 8,  "y": 3.98}, { "x": 9, "y": 4.2}];

  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}, { "x": 7,  "y": 2.9},
                { "x": 8,  "y": 3.7}, { "x": 9, "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}, { "x": 7,  "y": 1},
                { "x": 8,  "y": 2}, { "x": 9, "y": 2}];

  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}, { "x": 7,  "y": 2},
                { "x": 8,  "y": 4}, { "x": 9, "y": 1}];

  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}, { "x": 7,  "y": 1},
                { "x": 8,  "y": 1}, { "x": 9, "y": 1}];

  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}, { "x": 7,  "y": 3},
                { "x": 8,  "y": 1}, { "x": 9, "y": 4}];

  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}, { "x": 7,  "y": 5},
                { "x": 8,  "y": 5}, { "x": 9, "y": 4}];

  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}, { "x": 7,  "y": 5},
                { "x": 8,  "y": 5}, { "x": 9, "y": 3}];

  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}, { "x": 7,  "y": 3},
                { "x": 8,  "y": 5}, { "x": 9, "y": 3}];

  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}, { "x": 7,  "y": 5},
                { "x": 8,  "y": 5}, { "x": 9, "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}, { "x": 7,  "y": 3},
                { "x": 8,  "y": 1}, { "x": 9, "y": 4}];

  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}, { "x": 7,  "y": 4},
                { "x": 8,  "y": 1}, { "x": 9, "y": 5}];

  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}, { "x": 7,  "y": 1},
                { "x": 8,  "y": 4}, { "x": 9, "y": 1}];

  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")


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

    #Add Line Groups
    xLines = xLineGroup.selectAll("g")
      .data(weeklyTicks)
      .enter()
      .append("g")
      .attr("transform", (d,i) -> return "translate(" + ((i*84)) + ",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;")
    )

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

  #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")

  #Add groups for the text 
  weeklyTickGroups = xAxisLabels.selectAll("g")
    .data(weeklyTicks)
    .enter()
    .append("g")
    .attr("transform", (d,i) -> return "translate(" + ((i*84)) + ",0)")

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

  #yAxis label function

  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

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

  #on CircleMouseOver
  circleMouseOver = ->
    circle = d3.select(this)
    circle.transition().duration(500).attr("r", 11)
    circleData = circle.data()[0]
    left = ((circleData.x)*84)+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")

  #on CircleMouseOver2
  circleMouseOver2 = ->
    circle = d3.select(this)
    circle.transition().duration(500).attr("r", 14)
    circleData = circle.data()[0]
    left = ((circleData.x)*84)+70
    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 CircleMouseOut2
  circleMouseOut2 = ->
    circle = d3.select(this)
    circle.transition().duration(500).attr("r", 11)
    $(".toolTip").addClass("fade").removeClass("visible")

  #set circle function
  setCircles = (graph, data)  ->
    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*84)))
      .attr("cy", (d) -> return -((d.y*56)+28))
      .on("mouseover", circleMouseOver)
      .on("mouseout", circleMouseOut)

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


  #Set Bars
  setBars = (graph, data)  ->
    barWidth = 420 / data.length
    barGroup = graph.append("g")
      .attr("class", "barGroup")
      .attr("transform", "translate(55,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")

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

  #initialize graph

  setXLines()

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

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

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

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


  #Set Engagement Graph line and circles for Satisfaction data
  engagementGraph = d3.select("#VOSGraph svg")
  initializeGraph(engagementGraph, satData, 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, freqData, messageTicks)

  #Category Click
  $(".col h2").click ->
    if !($(this).hasClass("active"))
      $('.col h2').removeClass('active')
      $("i.fa-chevron-up").addClass("hidden")
      $("i.fa-chevron-down").removeClass("hidden")
      $("ul.subs li").removeClass("active")
      $("ul.subBreakdown").removeClass("active")
      $(this).find("i.fa-chevron-left").addClass("hidden")
      $(this).find("i.fa-chevron-down").removeClass("hidden")

  $('h2#message').click ->
    if !($(this).hasClass("active"))
      $(this).addClass("active")
      $('.dash').hide()
      $('#message.dash').show()
      $("ul.subs li#frequency").addClass("active")
      $("div.graphWrapper h3").text("Message Frequency Trend")
      #resetGraph Data
      resetGraph(messageGraph)
      initializeGraph(messageGraph, freqData, messageTicks)
      updatePos()
  
  $('h2#VOS').click ->
    if !($(this).hasClass("active"))
      $(this).addClass("active")
      $('.dash').hide()
      $('#VOS.dash').show() 
      $("ul.subs li#satisfaction").addClass("active")
      $("div.graphWrapper h3").text("Satisfaction Trend")
      #resetGraph Data
      resetGraph(engagementGraph)
      initializeGraph(engagementGraph, satData, npsTicks)
      updatePos()

  $('h2#unsub').click ->
    if !($(this).hasClass("active"))
      $(this).addClass("active")
      $('.dash').hide()
      $('#unsub.dash').show()
      $("ul.subs li#surveyFrequency").addClass("active")
      $("div.graphWrapper h3").text("Survey Trend: Message Frequency")
      #resetGraph Data
      resetGraph(unsubGraph)
      initializeGraph(unsubGraph, survey1Data, unsubTicks)
      updatePos()




  resetSubs = (parent) ->
    $("ul.subs li").removeClass("active")
    $("i.fa-chevron-down").removeClass("hidden")
    $("i.fa-chevron-up").addClass("hidden")
    $("ul.subBreakdown").removeClass("active")
    parent.find("ul.subBreakdown").addClass("active")
    parent.find("i.fa-chevron-down").addClass("hidden")
    parent.find("i.fa-chevron-up").removeClass("hidden")
    updatePos()

  #Individual subcategories

  $("ul.subs li#satisfaction button.subSelector").click ->
    if !($("ul.subs li#satisfaction").hasClass("active"))
      resetSubs($("ul.subs li#satisfaction"))
      $("ul.subs li#satisfaction").addClass("active")
      $("div.graphWrapper h3").text("Satisfaction Trend")
      #Set satisfactionGraph Data
      resetGraph(engagementGraph)
      initializeGraph(engagementGraph, satData, npsTicks)

  $("ul.subs li#ratings button.subSelector").click ->
    if !($("ul.subs li#ratings").hasClass("active"))
      resetSubs($("ul.subs li#ratings"))
      $("ul.subs li#ratings").addClass("active")
      $("div.graphWrapper h3").text("Ratings Trend")
      #Set ratingsGraph Data
      resetGraph(engagementGraph)
      initializeRatingsGraph(engagementGraph, ratingsData)
      #Reset subBreakdown
      $("ul.subBreakdown li").removeClass("active")
    else
      sub = $(this).parent("li").find("ul.subBreakdown")
      if sub.hasClass("active")
        $(this).parent("li").find("ul.subBreakdown").removeClass("active")
        $(this).find("i.fa-chevron-down").removeClass("hidden")
        $(this).find("i.fa-chevron-up").addClass("hidden")
      else
        $(this).parent("li").find("ul.subBreakdown").addClass("active")
        $(this).find("i.fa-chevron-down").addClass("hidden")
        $(this).find("i.fa-chevron-up").removeClass("hidden")
      updatePos()

  $("ul.subs li#reviews button.subSelector").click ->
    if !($("ul.subs li#reviews").hasClass("active"))
      resetSubs($("ul.subs li#reviews"))
      $("ul.subs li#reviews").addClass("active")
      $("div.graphWrapper h3").text("Reviews Trend")
      #Set reviewsGraph Data
      resetGraph(engagementGraph)
      initializeReviewsGraph(engagementGraph, reviewsData)


  #CHURN
  $("ul.subs li#surveyFrequency").click ->
    if !($(this).hasClass("active"))
      resetSubs($(this))
      $(this).addClass("active")
      $("div.graphWrapper h3").text("Survey Trend: Message Frequency")
      #Set survey1Graph Data
      resetGraph(unsubGraph)
      initializeGraph(unsubGraph, survey1Data, unsubTicks)

  $("ul.subs li#surveyOverload").click ->
    if !($(this).hasClass("active"))
      resetSubs($(this))
      $(this).addClass("active")
      $("div.graphWrapper h3").text("Survey Trend: Inbox Overload")
      #Set survey2Graph Data
      resetGraph(unsubGraph)
      initializeGraph(unsubGraph, survey2Data, unsubTicks)

  $("ul.subs li#surveyExpectation").click ->
    if !($(this).hasClass("active"))
      resetSubs($(this))
      $(this).addClass("active")
      $("div.graphWrapper h3").text("Survey Trend: Didn't Meet Expectation")
      #Set survey3Graph Data
      resetGraph(unsubGraph)
      initializeGraph(unsubGraph, survey3Data, unsubTicks)

  $("ul.subs li#surveyRelevancy").click ->
    if !($(this).hasClass("active"))
      resetSubs($(this))
      $(this).addClass("active")
      $("div.graphWrapper h3").text("Survey Trend: Messages not Relevant")
      #Set survey4Graph Data
      resetGraph(unsubGraph)
      initializeGraph(unsubGraph, survey4Data, unsubTicks)

  $("ul.subs li#surveyRepetitive").click ->
    if !($(this).hasClass("active"))
      resetSubs($(this))
      $(this).addClass("active")
      $("div.graphWrapper h3").text("Survey Trend: Messages Repetitive")
      #Set survey5Graph Data
      resetGraph(unsubGraph)
      initializeGraph(unsubGraph, survey5Data, unsubTicks)

  $("ul.subs li#surveyOther").click ->
    if !($(this).hasClass("active"))
      resetSubs($(this))
      $(this).addClass("active")
      $("div.graphWrapper h3").text("Survey Trend: Other")
      #Set survey6Graph Data
      resetGraph(unsubGraph)
      initializeGraph(unsubGraph, survey6Data, unsubTicks)


  #Messages
  $("ul.subs li#frequency button.subSelector").click ->
    if !($("ul.subs li#frequency").hasClass("active"))
      resetSubs($("ul.subs li#frequency"))
      $("ul.subs li#frequency").addClass("active")
      $("div.graphWrapper h3").text("Message Frequency Trend")
      #Set frequencyGraph Data
      resetGraph(messageGraph)
      initializeGraph(messageGraph, freqData, messageTicks)

  $("ul.subs li#types button.subSelector").click ->
    if !($("ul.subs li#types").hasClass("active"))
      resetSubs($("ul.subs li#types"))
      $("ul.subs li#types").addClass("active")
      $("div.graphWrapper h3").text("Frequency Trend by Type")
      #Set typeGraph Data
      resetGraph(messageGraph)
      resetXLines()
      setYLabels(messageGraph, messageTicks)
      setBars(messageGraph, typeBarData)
    else
      sub = $(this).parent("li").find("ul.subBreakdown")
      if sub.hasClass("active")
        $(this).parent("li").find("ul.subBreakdown").removeClass("active")
        $(this).find("i.fa-chevron-down").removeClass("hidden")
        $(this).find("i.fa-chevron-up").addClass("hidden")
      else
        $(this).parent("li").find("ul.subBreakdown").addClass("active")
        $(this).find("i.fa-chevron-down").addClass("hidden")
        $(this).find("i.fa-chevron-up").removeClass("hidden")
      updatePos()

  $("ul.subs li#time button.subSelector").click ->
    if !($("ul.subs li#time").hasClass("active"))
      resetSubs($("ul.subs li#time"))
      $("ul.subs li#time").addClass("active")
      $("div.graphWrapper h3").text("Time Sent Trend")
      #Set timeGraph Data
      resetGraph(messageGraph)
      initializeGraph(messageGraph, timeData, timeTicks)
      #move ticks over and set font smaller

  #subCategories
  $("ul.subBreakdown li#value").click ->
    if !($(this).hasClass("active"))
      #reset subBreakdown
      $("ul.subBreakdown li").removeClass("active")
      $(this).addClass("active")
      $("div.graphWrapper h3").text("Ratings Trend: Value")
      #Set value Data
      resetGraph(engagementGraph)
      initializeRatingsGraph(engagementGraph, valueData)

  $("ul.subBreakdown li#frequencyR").click ->
    if !($(this).hasClass("active"))
      #reset subBreakdown
      $("ul.subBreakdown li").removeClass("active")
      $(this).addClass("active")
      $("div.graphWrapper h3").text("Ratings Trend: Frequency")
      #Set value Data
      resetGraph(engagementGraph)
      initializeRatingsGraph(engagementGraph, frequencyRData)

  $("ul.subBreakdown li#relevancy").click ->
    if !($(this).hasClass("active"))
      #reset subBreakdown
      $("ul.subBreakdown li").removeClass("active")
      $(this).addClass("active")
      $("div.graphWrapper h3").text("Ratings Trend: Relevancy")
      #Set value Data
      resetGraph(engagementGraph)
      initializeRatingsGraph(engagementGraph, relevancyData)

  $("ul.subBreakdown li#design").click ->
    if !($(this).hasClass("active"))
      #reset subBreakdown
      $("ul.subBreakdown li").removeClass("active")
      $(this).addClass("active")
      $("div.graphWrapper h3").text("Ratings Trend: Design")
      #Set value Data
      resetGraph(engagementGraph)
      initializeRatingsGraph(engagementGraph, designData)

  #ShowHide
  $("a.showHide").click ->
    $("div.dash").slideToggle("slow")
    $(this).toggleClass("active")
    updatePos()

  #Toggle Time View
  $("#timeToggle button").click ->
    if !($(this).hasClass("active"))
      $("#timeToggle button").removeClass("active")
      $(this).addClass("active")