Tooltip.coffee

class exports.Tooltip extends Layer
	constructor: (config) ->
		super config
		tooltipOptions =
			bg: '#555'
			fontSize: "12px"
			fontFamily: "Helvetica, sans-serif"
			lineHeight: "16px"
			padding: "12px"
			fontWeight: "400"
			maxWidth: 380
			color: "white"
			direction: "up"
			delayIn: 0
			delayOut: 0

		_.extend tooltipOptions, config.tooltipOptions

		if config.tooltip
			text = config.tooltip
			animationCurve = "spring(500, 50, 50)"
			tooltipBG = "#555" 	# Default BG
			tooltipPadding = 12	# Default Padding
			tooltipMaxWidth = 380	# Max Width for text
			tooltipStyle = 		# Default styles
				"color" : tooltipOptions.color
				"font-size" : tooltipOptions.fontSize
				"font-family" :  tooltipOptions.fontFamily
				"line-height" :  tooltipOptions.lineHeight
				"padding" :  tooltipOptions.padding
				"font-weight" : tooltipOptions.fontWeight
				"box-shadow" : "0 1px 2px rgba(0,0,0,.15)"

			# Get Text Size
			tooltipTextSize = Utils.textSize(text, tooltipStyle)

			# If it's wider than the max width, re-adjust
			if tooltipTextSize.width > tooltipMaxWidth
				tooltipTextSize = Utils.textSize(text, tooltipStyle, { width: tooltipMaxWidth })

			directions =
				"up" : { x: Align.center, y: 0 - tooltipTextSize.height - 4, shownY: 0 - tooltipTextSize.height - 8 }
				"down" : { x: Align.center, y: @.height + 4, shownY: @.height + 8 }
				"right" : {x: @.width + 4, y: Align.center, shownX: @.width + 8 }
				"left" : { x: 0 - tooltipTextSize.width - 4, y: Align.center, shownX: 0 - tooltipTextSize.width - 8}

		# On Hover, create and show the tooltip
		@.on Events.MouseOver, (event) ->
			pointInLayer = Utils.convertPointFromContext {x: event.pageX, y: event.pageY}, @
			bounds = {x: 0, y: 0, width: @.width, height: @.height}
			if not Utils.pointInFrame pointInLayer, bounds
				return

		# Set clipping to false so you can see the tip.
		# TODO: Refactor to make this work on clipped layers too
			@.clip = false

		# Remove any already existing tooltips
			for tip in @.subLayersByName("tooltip")
				tip.destroy()

			# Create Tooltip
			tooltip = new Layer
				parent: @
				html: text
				backgroundColor: tooltipOptions.bg
				style: tooltipStyle
				name: "tooltip"
				color: "white"
				width: tooltipTextSize.width
				height: tooltipTextSize.height
				opacity: 0
				z: 1
				y: directions[tooltipOptions.direction].y
				x: directions[tooltipOptions.direction].x
				borderRadius: 4

			# Little pointer thingy
			tooltipArrow = new Layer
				parent: tooltip
				width: 6
				height: 6
				rotation: 45
				backgroundColor: tooltip.backgroundColor
				midY: tooltip.height
				midX: tooltip.width / 2
			#Shown state
			if tooltipOptions.direction == "up"
				tooltipArrow.midY = tooltip.height
				tooltipArrow.midX = tooltip.width / 2
			else if tooltipOptions.direction == "down"
				tooltipArrow.midY = 0
				tooltipArrow.midX = tooltip.width / 2
			else if tooltipOptions.direction == "right"
				tooltipArrow.midX = 0
				tooltipArrow.midY = tooltip.height / 2 + 2
			else
				tooltipArrow.midX = tooltip.width
				tooltipArrow.midY = tooltip.height / 2 + 2

			if tooltipOptions.direction == "up" or
			tooltipOptions.direction == "down"
				tooltip.states.add
					shown: opacity: 1, y: directions[tooltipOptions.direction].shownY
			else
				tooltip.states.add
					shown: opacity: 1, x: directions[tooltipOptions.direction].shownX
			tooltip.states.animationOptions =
				curve: animationCurve
				delay: tooltipOptions.delayIn



			# Animate the tooltip in
			tooltip.states.switch "shown"

		# Hide and destroy the tip on mouseout
		@.on Events.MouseOut, ->
			for tt in @.subLayersByName("tooltip")
				tt.states.animationOptions =
					curve: animationCurve
					delay: tooltipOptions.delayOut
				tt.states.switch "default"

				tt.on Events.StateDidSwitch, ->
					@.destroy()

					for a in [0...4]
	myLayer = new Tooltip
		width: 100
		height: 100
		parent: wrapper
		backgroundColor: Utils.randomColor()
		y: Align.center
		x: 200 * a
		
		# The important parts
		tooltip: 'Homage to this object'
		tooltipOptions:
			bg: "black"
			fontSize: "12px"
			color: "#ededed"
			lineHeight: "12px"
			maxWidth: 280
			direction: tooltipDirection()
			fontWeight: "regular"
			delayIn: .1
			delayOut: 0