MX.BoxDimensions = MX.Object3D.extend({

	// this will be called within the contructor
	init: function (opt) {

		this.type = "BoxDimensions"

		this.opt = opt

		var width = opt.width || 100
		var height = opt.height || 100
		var depth = opt.depth || 100
		var color = this.color = opt.color || 'rgba(0, 255, 122, .1)'
		var borderColor = this.borderColor = opt.borderColor || '#0f3'
		var sides = this.sides = opt.sides || "top bottom left right  back"

		// an Object3D's associated DOM node is the "el" property
		this.el.classList.add('box')

		var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2)

		var top = this.top = new MX.Object3D('.face.top')
		top.rotationX = angle
		top.width = width
		top.height = depth
		top.y = height

		var bottom = this.bottom = new MX.Object3D('.face.bottom')
		bottom.rotationX = -angle
		bottom.width = width
		bottom.height = depth
		bottom.y = 0

		var left = this.left = new MX.Object3D('.face.left')
		left.rotationY = -angle
		left.width = depth
		left.height = height
		left.x = -width/2
		left.y = height/2

		var right = this.right = new MX.Object3D('.face.right')
		right.rotationY = angle
		right.width = depth
		right.height = height
		right.x = width/2
		right.y = height/2

		var front = this.front = new MX.Object3D('.face.front')
		front.width = width
		front.height = height
		front.z = -depth/2
		front.y = height/2

		var back = this.back = new MX.Object3D('.face.back')
		back.width = width
		back.height = height
		back.rotationY = angle * 2
		back.z = depth/2
		back.y = height/2

		// adding children, must also be instances of Object3D
		if (-1 != sides.indexOf("top")) this.add(top)
		if (-1 != sides.indexOf("bottom")) this.add(bottom)
		if (-1 != sides.indexOf("left")) this.add(left)
		if (-1 != sides.indexOf("right")) this.add(right)
		if (-1 != sides.indexOf("front")) this.add(front)
		if (-1 != sides.indexOf("back")) this.add(back)

		this.children.forEach(function (face) {
			face.el.style.backgroundColor = color
			face.el.style.border = '3px solid ' + borderColor
		})

		bottom.el.style.border = "0"

		// this applies the updated CSS style
		// required for any change to take effect
		// when a parent object's update() is called
		// all its children will be updated as well
		this.update()

		// if this object's children won't move by themselves
		this.updateChildren = false
	}

	// other properties will be mixed into the prototype of the new constructor

})