borderThickness = 3

MX.Door = MX.Object3D.extend({

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

		width = opt.width || 100
		height = opt.height || 100
		doorOffset = opt.doorOffset || 0
		doorWidth = opt.doorWidth || 30
		doorHeight = opt.doorHeight || 20
		color = opt.color || 'rgba(0, 255, 122, .1)'
		borderColor = opt.borderColor || '#0f3'

		// 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 left = new MX.Object3D('.face.door.leftTop')
		left.width = (width - doorWidth) / 2 + doorOffset
		left.height = height-doorHeight-borderThickness
		left.x = (width + doorWidth) / 4 + doorOffset
		left.y = (height+doorHeight+borderThickness)/2
		left.el.style.backgroundColor = color
		left.el.style.borderTop = borderThickness + 'px solid ' + borderColor
		left.el.style.borderRight = borderThickness + 'px solid ' + borderColor
		this.add(left)

		var leftBot = new MX.Object3D('.face.door.leftBot')
		leftBot.width = (width - doorWidth) / 2 - doorOffset
		leftBot.height = doorHeight + borderThickness
		leftBot.x = (width + doorWidth) / 4 - doorOffset
		leftBot.y = (doorHeight+borderThickness)/2
		leftBot.el.style.backgroundColor = color
		leftBot.el.style.borderLeft = borderThickness + 'px solid ' + borderColor
		leftBot.el.style.borderRight = borderThickness + 'px solid ' + borderColor
		leftBot.el.style.borderBottom = borderThickness + 'px solid ' + borderColor
		this.add(leftBot)

		var rightTop = new MX.Object3D('.face.door.rightTop')
		rightTop.width = (width - doorWidth) / 2 - doorOffset
		rightTop.height = height-doorHeight-borderThickness
		rightTop.x = -(width+doorWidth)/4 - doorOffset
		rightTop.y = (height+ doorHeight+borderThickness)/2
		rightTop.el.style.backgroundColor = color
		rightTop.el.style.borderTop = borderThickness + 'px solid ' + borderColor
		rightTop.el.style.borderLeft = borderThickness + 'px solid ' + borderColor
		this.add(rightTop)

		var rightBot = new MX.Object3D('.face.door.rightBot')
		rightBot.width = (width - doorWidth) / 2 - doorOffset
		rightBot.height = doorHeight+borderThickness
		rightBot.x = -(width + doorWidth)/4 - doorOffset
		rightBot.y = (doorHeight+borderThickness)/2
		rightBot.el.style.backgroundColor = color
		rightBot.el.style.borderLeft = borderThickness + 'px solid ' + borderColor
		rightBot.el.style.borderRight = borderThickness + 'px solid ' + borderColor
		rightBot.el.style.borderBottom = borderThickness + 'px solid ' + borderColor
		this.add(rightBot)

		var top = new MX.Object3D('.face.door.top')
		top.width = doorWidth
		top.height = height-doorHeight
		top.x = doorOffset
		top.y = (height+ doorHeight)/2
		top.el.style.backgroundColor = color
		top.el.style.borderTop = borderThickness + 'px solid ' + borderColor
		top.el.style.borderBottom = borderThickness + 'px solid ' + borderColor
		this.add(top)

	}
})