cryptomarket-sample-09.coffee

# Getting data from the CoinMarketCap API
coins = JSON.parse Utils.domLoadDataSync 'https://api.coinmarketcap.com/v1/ticker/'

# Create a Scroll componnent, that will wrap all coinRows
list = new ScrollComponent
	width: Screen.width
	height: Screen.height

# Set the backgrond color for the scroll content 
list.content.backgroundColor = '#FFFFFF'

# Remove scroll horizontal option in the scroll component
list.scrollHorizontal = false
# coinRows

# Put all coinRows in an Array
coinRows = []

# Loop through all coins
for coin, index in coins

	# Extracting values stored in the coin object
	{name, id, symbol, price_usd : price} = coin

	# Create a Layer for each coin
	coinRow = new Layer
		parent: list.content
		width: Screen.width
		height: 100
		y: 101 * index
		name: id
		backgroundColor: '#DDDDDD'
		
	# Set the coinRow states
	coinRow.states =
		hidden:
			opacity: 0
		
	# Create a TextLayer for each coin that shows the Coin Name
	coinName = new TextLayer
		parent: coinRow
		text: "#{name} (#{symbol})"
		fontSize: 18
		x: 30
		y: Align.center()
		
	# Set the coinName states
	coinName.states =
		hidden:
			opacity: 0
		
	# Create a TextLayer for each coin that shows the Coin Price
	coinPrice = new TextLayer
		parent: coinRow
		text: "$ #{price}"
		fontSize: 18
		x: Align.right(-30)
		y: Align.center()
		
	# Set the coinPrice states
	coinPrice.states =
		hidden:
			opacity: 0
			
	# Add each coinRow in the coinRows array
	coinRows.push(coinRow)
	
	#tap event
	coinRow.onTap ->

		selectedRow = this

		# Create an Animation
		heroSize = new Animation selectedRow,
			# change the scroll position to the top of the screen
			y: list.scrollY
			# Increase the size of the selectedRow to 250
			height: 250

		# Loop through all itens in coinRow array
		for row in coinRows

			# If the element in the coinRows is the element that the user clicked
			if selectedRow is row

				# Loop through all row children elements (coinName and coinValue)
				for child in selectedRow.children
					child.onStateSwitchEnd ->
						heroSize.onAnimationEnd ->
							flow.transition(modal, goToModal)
						heroSize.start()
					child.animate('hidden')
			else
				# Apply the hidden state
				row.animate('hidden')

# goToModal animation
goToModal = (nav, layerA, layerB, overlay) ->
	transition =
		# states of the current layer
		layerA:
			show:
				x: 0
				opacity: 1
			hide:
				x: 0
				opacity: 1
		# states of layer that the next layer
		layerB:
			show:
				x: 0
				opacity: 1
			hide:
				x: 0
				opacity: 0

# modal
modal = new Layer
	size: Screen.size
	label: 'Modal'
	backgroundColor: '#CCCCCC'

#Flow Component
flow = new FlowComponent
flow.showNext(list)