     
     $.getJSON jsonFile, (data) =>
       @canvasGraph?.marks.destroyAll()  
-
       @marksContainer.appendChild(@canvas)
       @canvasGraph = new CanvasGraph(@canvas, data)
       @canvasGraph.plotPoints()
       @canvasGraph.enableMarking()
       @drawSliderAxisNums()
 
+      @zoomRanges = [ @canvasGraph.largestX, (@canvasGraph.largestX * 10/@canvasGraph.largestX), @canvasGraph.largestX * 3/@canvasGraph.largestX ]
+      
       @el.find("#ui-slider").noUiSlider
         start: 0
         range:

          "max": @canvasGraph.largestX - @zoomRange
      
  onChangeScaleSlider: ->
    val = +@el.find("#ui-slider").val()
    # @focusCenter = +@el.find('#scale-slider').val() + @zoomRange/2
    # xMin = @focusCenter-@zoomRange/2
    # xMax = @focusCenter+@zoomRange/2

    return unless @isZoomed
    @canvasGraph.plotPoints(val, (val + @zoomRange))

  onToggleZoom: ->
    @isZoomed = !@isZoomed
    if @isZoomed
      @canvasGraph.zoomInTo(0, @zoomRange)
      @el.find("#toggle-zoom").addClass("toggled")
      @el.find("#ui-slider").val(0)
      @el.find(".noUi-handle").fadeIn(150)
    else
      @canvasGraph.zoomOut()
      @el.find("#toggle-zoom").removeClass("toggled")
      @el.find("#ui-slider").val(@canvasGraph.smallestX)
      @el.find(".noUi-handle").fadeOut(150)

  onToggleFav: ->
    favButton = @el.find("#toggle-fav")[0]
    if @isFaved

  constructor: ->
    super    
    window.classifier = @
    
    # zoom levels [days]: 2x, 10x, 20x
    @zoomRange = 30 # set to first zoom level
    @zoomRanges = []
    @zoomLevel = 0
    isZoomed: false
    ifFaved: false

