PIXI.TextInput Demo with custom box generator

var app
var input

function init(){
	app = new PIXI.Application(
		{ 
			width: 1000,
			height: 600,
			antialias: true,
			backgroundColor: 0xffffff
		}
	)
	document.getElementById('canvas-placeholder').appendChild(app.view)


	input = new PIXI.TextInput({
		input: {
			fontFamily: 'Arial',
			fontSize: '32px',
			padding: '14px 24px',
			width: '500px',
			color: 'white'
		},
		box: generateBox
	})
	
	input.placeholder = 'Enter your Text...'
	input.x = 500
	input.y = 300
	input.pivot.x = input.width/2
	input.pivot.y = input.height/2
	app.stage.addChild(input)
}

function generateBox(w,h,state){
	var box = new PIXI.Container()
	var sprite = new PIXI.extras.TilingSprite(PIXI.Texture.fromImage('tile.png'), w, h)
	var mask = new PIXI.Graphics()


	mask.beginFill(0)
	mask.drawRoundedRect(0,0,w,h,36)

	box.addChild(sprite)
	box.addChild(mask)
	sprite.mask = mask

	switch(state){
		case 'DEFAULT':
			sprite.tint = 0xffffff
		break;
		case 'FOCUSED':
			sprite.tint = 0x7EDFFF
		break;
		case 'DISABLED':
			sprite.alpha = 0.5
		break;
	}

	return box
}