PortfolioItem.coffee

###
PorfolioItem
###

window.PorfolioItem = class PorfolioItem

  constructor: (domElement) ->
    @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()
    #remove the mask from the DOM
    @element.find('img.mask').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

    #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) =>
      @mask.x = e.offsetX
      @mask.y = e.offsetY

    @element.mousemove (e) =>
      @tween = TweenLite.to @mask, 0.3,
        x: e.offsetX + 30
        y: e.offsetY + 30
        onUpdate: =>
          @stage.update()

#    @element.mouseleave (e) =>
#      @tween.kill()
#      console.log "asdf"
#      @waves.x = -30
#      @waves.y = -30
#      @stage.update()