animationframe.coffee

###
PorfolioItem
###

window.PorfolioItem = class PorfolioItem

  constructor: (domElement) ->
    @animation = {}
    @animation.value = 0
    @animation.iteration = 0
    @animation.animating = false

    @element = ($ domElement)

    # find the images in the dom element
    regularImage = @element.find 'img.active'
    hoverImage = @element.find 'img.hover'

    # get the urls
    @regularImageURL = ($ regularImage).attr('src')
    @hoverImageURL = ($ hoverImage).attr('src')

    #remove the images from the DOM
    regularImage.remove()
    hoverImage.remove()

    #create a new canvas object
    canvas = $('<canvas width="174px" height="174px" />').prependTo @element.find('article')
    #get the DOM element
    @stage = new Stage canvas.get(0)

    #create a new shape (later used for the waves mask)
    @mask = new Shape()
    @mask.graphics.beginFill("#F00")
    @mask.graphics.drawCircle(-30, -30, 30)
    @mask.graphics.endFill()

    #create a container
    @container = new Container()
    @stage.addChild @container

    @size = canvas.width()

    #load the images in the Canvas object
    @loadImages()

  loadImages: ->
    # regular image
    regularImage = new Image()
    regularImage.src = @regularImageURL
    regularImage.onload = =>
      @bmpBack = new Bitmap(regularImage)
      @imageLoaded()

    # regular image
    hoverImage = new Image()
    hoverImage.src = @hoverImageURL
    hoverImage.onload = =>
      @bmpFront = new Bitmap(hoverImage)
      @imageLoaded()

  imageLoaded: ->
    #are both images loaded?
    if @bmpBack && @bmpFront

      #add image to canvas object
      @container.addChild(@bmpBack)
      @container.addChild(@bmpFront)

      #set the mask
      @bmpFront.mask = @mask

      #update the stage
      @stage.update()

      @addListeners()

  addListeners: ->
    @element.mouseenter (e) =>
      @animation.iteration = 0
      @animationFrameID = window.requestAnimationFrame => @tick()

    @element.mouseleave (e) =>
      window.cancelAnimationFrame @animationFrameID

      TweenMax.to @mask, 1,
        y: 200
        ease: Back.easeIn
        onUpdate: =>
          @stage.update()

  tick: ->
    @animation.iteration += 0.5
    waveHeight = ( Math.sin(@animation.iteration / 10)) * 30

    waveSpeed = 0.001 * 10

    @animation.waveSpeed = @animation.iteration / 20
    @mask.y = @animation.value

    @mask.graphics.clear()

    mousePosition = @element.position().top - window.mouseYPos

    @mask.y = @size - mousePosition + 30

    for i in [0..175] #seriously? yes. seriously!
      @animation.waveSpeed += waveSpeed
      ypos = Math.sin(@animation.waveSpeed) * waveHeight
      @mask.graphics.lineTo(i, ypos)

    @mask.graphics.lineTo(i - 1, 400)
    @mask.graphics.lineTo(0, 400)
    @mask.graphics.closePath()

    @stage.update()

    @animationFrameID = window.requestAnimationFrame => @tick()