jQuery.fn.extend do
    copy : -> @clone!remove-attr 'id class'

jq = (f) -> !-> $ f

# Call this to localize Highcharts
set-lang = !->
    Highcharts .set-options do
        # old colors
        colors: [\#2f7ed8 \#0d233a \#8bbc21 \#910000 \#1aadce \#492970
                 \#f28f43 \#77a1e5 \#c42525 \#a6c96a]
        lang:
            months: [\Januar \Februar \März \April \Mai \Juni \Juli
                     \August \September \Oktober \November \Dezember]
            short-months: [\Jan \Feb \Mär \Apr \Mai \Jun \Jul
                           \Aug \Sep \Okt \Nov \Dez]
            weekdays: [\Sonntag \Montag \Dienstag \Mittwoch \Donnerstag
                       \Freitag \Samstag]
            range-selector-from: \von
            range-selector-to: \bis
            range-selector-zoom: null

# Add
export addJS = jq !->
    $ 'input[name=date]' .datepicker do
        date-format: \dd.mm.yy
        first-day: 1

# Show
export showJS = jq !->
    set-lang!

    $ ".detail .heading" .click !->
        $ @ .closest \.detail .children \.mark:first .click!

    $ ".detail > .mark" .click !->
        if (@src.index-of \closed) isnt -1
            @src .= replace \closed \open
        else
            @src .= replace \open \closed

        $ @ .next-all \.details:first .toggle!

    $ \.details .hide!

    # draw the pies
    <-! $ \.pie .each
    $ @
        ..highcharts do
            title: text: null
            tooltip:
                hide-delay: 200ms
                formatter: ->
                    "#{@key}: <b>#{@y.toFixed 2} €</b> / #{@percentage.to-fixed 2}%"
            chart:
                background-color: null
                plot-border-width: null
                plot-shadow: off
                spacing-top: 0
            credits: enabled: false
            series: [
                type: \pie
                size: \70%
                states: hover: halo: null
                allow-point-select: true
                data-labels:
                    color: ..css \color
                    distance: 20px
                data: [ {name: if v>0 then k else '' , y: v, visible: v > 0} \
                        for k,v of ..data \pie ]
            ]

# Statistics
export statJS = jq !->
    set-lang!

    month = 30d * 24h * 60min * 60s * 1000ms

    const-dialog = !->
        df = Highcharts.date-format
        time = @x

        data <-! $.get df '/stats/_const/%Y/%d' time
        $ data .dialog do
            title: df '%B %Y' time

    <-! $ \.stats .each
    $ @
        ..highcharts 'StockChart' do
            title: text: null
            credits: enabled: false
            range-selector:
                buttons: []
                input-date-format: "%b %Y"
                input-edit-date-format: "%m.%Y"
                input-date-parser: (value) ->
                    value .= split /\./
                    Date.UTC value[1], # year
                             value[0] - 1, # month ... 0-based -.-
                             1, #day
                             0,0,0,0 # time
            plot-options:
                series:
                    point: events: click: const-dialog
            chart:
                events:
                    click: !->
                        for p in @series.0.data
                            if p.state
                                const-dialog.apply p
                                break
            x-axis:
                min-tick-interval: month
                min-range: month
            series: [
                data: ..data \stats
                step: \left
            ]
            tooltip:
                point-format: '<b>{point.y} €</b><br/>'


# Categories
export catsJS = jq !->
    counter = 0
    add-img = $ \img#add
    new-input = $ \input#new

    new-image = (new-name) ->
        # we need to copy the image to get the correct URL
        add-img.copy!
            ..attr \src -> @src.replace \add new-name

    $ "li > span" .click !->
        span = $ @
        input = span.next!
        img = new-image \undo
            ..click !->
                  $ @ .remove!

                  # reset text
                  input.val span.text!

                  <-! input.fade-out \slow
                  span.toggle!

        span.toggle!
        <-! input.fade-in \slow
        img.insert-after input

    add-img.click !->
        input = new-input.copy!
        img = new-image \minus
            ..click !->
                  <-! $ @ .parent!fade-out \slow
                  $ @ .remove!

        input.attr \name -> @name + counter
            .remove-attr \style
            .wrap "<li />"
            .parent! # wrap does not return the li
            .append img
            .hide!
            .insert-before add-img.parent!
            .fade-in \slow !-> input.focus!

        counter++