typing.coffee

string = "Connection with your friends"

cursor = new Layer
	backgroundColor: "blue"
	width: 2
	height: 40
	
text = new Layer
	width: 1, height: 100
	backgroundColor: ""
	
	style:
		color: "black"
		textAlign: "center"

text.html = "<span id='type'></span>"
width = document.getElementById("type").offsetWidth
text.center()
cursor.y = text.y - 7
cursor.centerX()
count = 0

Utils.interval 5, ->
	text.html = "<span id='type'></span>"
	width = document.getElementById("type").offsetWidth
	text.center()
	cursor.y = text.y - 7
	cursor.centerX()
	count = 0

Utils.delay 1, -> 
	Utils.interval .02, ->
		text.html = """
			<span id='type'>
			<nobr>
			#{string[0..count // 3]}
			</nobr>
			</span>"""
			
		count++
			
		width = document.getElementById("type").offsetWidth
		text.width = width
		text.centerX()
		
		cursor.x = text.x + text.width / 2 + width / 2
		
Utils.interval 1, ->
	cursor.animate
		properties: opacity: 0
		time: .2
	
	cursor.onAnimationEnd ->
		if cursor.opacity is 0
			cursor.animate properties: {opacity: 1}, time: .5
		else
			cursor.animate properties: {opacity: 0}, time: .5