framer-statusbar.coffee

class StatusBar extends Layer
	constructor: (options = {}) ->
		options.provider        ?= "Blueprint"
		options.data            ?= "wifi"
		options.tintColor       ?= "black"
		options.backgroundColor ?= null
		options.signalStrength  ?= 3
		options.batteryStrength ?= 100
		options.time            ?= null

		super options

		@options    = options
		@padding    = 6

		@setupFrame()

		@provider = @getProvider()
		@signal   = @getSignal(@options.signalStrength)
		@time     = @getTime(@options.time)
		@battery  = @getBattery(@options.batteryStrength)

		if @options.data == "wifi" || @options.data == "WIFI"
			@wifi = @getWifi()
			@colorWifi(@wifi)
		else
			@data = @getData()

		@colorSignal(@signal)
		@colorBattery(@battery)

	setupFrame: ->
		this.z      = 0
		this.width  = Screen.width
		this.height = 20
		this.backgroundColor = @options.backgroundColor
		this.color = @options.tintColor

	@define "background",
		get: -> this
		set: (value) ->
			this.backgroundColor = value

	@define "tint",
		get: -> @options.tintColor
		set: (value) ->
			this.color = value
			@options.tintColor = value
			@colorSignal(@signal)
			@colorBattery(@battery)

			if @options.data == "wifi" || @options.data == "WIFI"
				@colorWifi(@wifi)

	getProvider: ->
		return provider = new TextLayer
			parent: this
			x: (@padding * 2) + 16.5
			y: 2.5
			text: @options.provider
			fontSize: 12
			letterSpacing: 0.2
			fontWeight: 500
			color: @options.tintColor

	getWifi: ->
		layers = []

		wifiMask = new Layer
			parent: this
			width: 10
			height: 10
			x: @provider.x + @provider.width + 6
			y: 3
			rotation: 45
			clip: true
			backgroundColor: ""

		for i in [0..2]
			level = new Layer
				parent: wifiMask
				width: 6 + (i * 6)
				height: 6 + (i * 6)
				x: 7 - (i * 3)
				y: 7 - (i * 3)
				borderRadius: 3 * (i + 1)
				backgroundColor: ""
				borderWidth: 1.5

			layers.push(level)

		return layers

	colorWifi: (layers) ->
		layers[0].borderColor = ""
		layers[0].backgroundColor = @options.tintColor
		layers[1].borderColor = @options.tintColor
		layers[2].borderColor = @options.tintColor

	getSignal: (strength = 3) =>
		strength -= 1
		layers = []
		barHeight = 4

		signalWrapper = new Layer
			parent: this
			height: 10
			width: 16.5
			x: 6
			y: Align.center
			backgroundColor: ""

		for i in [0..3]
			layer = new Layer
				parent: signalWrapper
				width: 3
				height: barHeight
				y: Align.bottom
				x: (i * 4.5)
				borderRadius: 2

			layers.push(layer)

			barHeight += 2

			if i > strength
				layers[i].opacity = 0.3

		return layers

	colorSignal: (layers) ->
		for bar in layers
			bar.backgroundColor = @options.tintColor

	getTime : (time = null) ->
		return time = new TextLayer
			parent: this
			x: Align.center
			y: 2.5
			text: @printTime(time)
			fontSize: 12
			letterSpacing: 0.2
			fontWeight: 600
			color: @options.tintColor

	printTime : (time) ->
		if time == null
			time = new Date()
			if time.getMinutes() < 10
				minutes = "0" + time.getMinutes()
			else
				minutes = time.getMinutes()

			return time.getHours() + ":" + minutes
		else
			return time

	getBattery : (chargePercent = 100) ->
		layers = []
		batteryChargeWidth = 0.2 * chargePercent

		batteryWrapper = new Layer
			parent: this
			width: 26.5
			height: 11.5
			y: Align.center
			x: Screen.width - @padding - 24
			backgroundColor: ""

		pin = new Layer
			parent: batteryWrapper
			height: 4
			width: 1.5
			y: 3.5
			x: batteryWrapper.width - 1.5
			opacity: 0.4
			style: { "borderRadius": "0 4px 4px 0" }

		layers.push(pin)

		outline = new Layer
			parent: batteryWrapper
			width: 24
			height: 11.5
			y: Align.center
			x: 0
			borderRadius: 2
			borderWidth: 1
			opacity: 0.4
			backgroundColor: ""
			style: { "borderRadius": "1px 0 0 1px" }

		layers.push(outline)

		charge = new Layer
			parent: batteryWrapper
			width: batteryChargeWidth
			height: 7.5
			y: Align.center
			x: 2

		layers.push(charge)

		if chargePercent == 100
			charge.borderRadius = 1
		else
			charge.style = { "borderRadius": "1px 0 0 1px" }

		return layers

	colorBattery : (layers) ->
		layers[0].backgroundColor = @options.tintColor
		layers[1].borderColor = @options.tintColor

		if @options.batteryStrength <= 10
			layers[2].backgroundColor = "red"
		else
			layers[2].backgroundColor = @options.tintColor

	getData : ->
		return data = new TextLayer
			parent: this
			x: @provider.x + @provider.width + 4
			y: 2.5
			text: @options.data
			fontSize: 12
			letterSpacing: 0.2
			fontWeight: 500
			color: @options.tintColor

exports.StatusBar = StatusBar