prototype1.coffee

define [ 'jquery', 'underscore', 'backbone',
    'jade!prototypes/prototype1',

], ($, _, Backbone, Template) ->

    Prototype1View = Backbone.View.extend

        el: $('<div id="prototype1"></div>')

        initialize: () ->
            @render()

        render: () ->
            @$el.html Template()
            @$name = @$el.find('.top-line-name')
            @$amount = @$el.find('.top-line-amount')
            @$blueBox = @$el.find('.top-line-blue')
            @$note = @$el.find('.note')
            @chainAnimations()

        chainAnimations: ->
            that = this
            itr = (arr) ->
                if arr.length > 0
                    fn =  _.head(arr).fn
                    ms =  _.head(arr).time
                    setTimeout($.proxy(fn,that), ms)
                    itr _.tail(arr)

            itr(@animations)

        animations: [
            # Type "Andrew Kortina in name"
           {time: 1000, fn: ->
               @$name.text ''
               @typeAnimate(@$name, 'Andrew Kortina', 1000)
               @$blueBox.addClass('active')
           }
            # Activate bluebox
            # Add $
           {time: 2000, fn: ->
               @$amount.text '$'
               @$blueBox.addClass('visible')
           }
            # Type money amt
           {time: 3000, fn: ->
               @typeAnimate(@$amount, '5.70', 800)
           }
            # Type note
           {time: 4000, fn: ->
               @$note.text ''
               @typeAnimate(@$note, 'Mmmm! Great Pizza!', 1000)
               @$note.addClass('active')
           }
            # Enable pay/charge buttons
           {time: 5000, fn: ->
               @$el.find('button.pay')
                   .removeClass('disabled')
               @$el.find('button.charge')
                   .removeClass('disabled')
           }
            # Enable pay/charge buttons
           {time: 6000, fn: ->
               @$el.find('button.pay')
                   .addClass('down')
               @$el.find('.confirmation')
                   .fadeIn(100)
               #@$el.find('.pay-charge-buttons')
               #    .hide()
               #@$el.find('.confirm-payment-buttons')
               #    .show()
           }
            # Restart animation
           {time: 9000, fn: ->
               @render()
           }
        ]

        typeAnimate: ($jq, text, duration) ->
            letterTime = duration/text.length
            itr = (arr) ->
                if arr.length > 0
                    $jq.text($jq.text() + _.head(arr))
                    setTimeout((-> itr _.tail(arr)), letterTime)
            itr(text.split(''))


    return Prototype1View