(function(){

	var vec2, Rect, sort
	if ('window' in this) {
		vec2 = window.vec2
		Rect = window.Rect
		sort = window.sort
	}
	else {
		vec2 = require('./vec2')
		Rect = require('./rect')
		UidGenerator = require('../util/uid')
	}
	
	var Wall = function(opt){
		this.id = [ opt.side|0, opt.edge|0, opt.vec.a|0 ].join("_")
		this.vec = opt.vec
		this.edge = opt.edge
		this.side = opt.side
		this.surface = opt.surface
		this.mx = opt.mx
		this.background = { src: "none" }
	}
	
	Wall.prototype.toString = function(){
		return this.vec.toString()
	}
	Wall.prototype.get_points = function(wall_vec){
		wall_vec = wall_vec || new Rect ()
		if (this.side & LEFT) {
			wall_vec.x.a = this.edge
			wall_vec.x.b = this.vec.b
			wall_vec.y.a = this.edge
			wall_vec.y.b = this.vec.a
		}
		else if (this.side & RIGHT) {
			wall_vec.x.a = this.edge
			wall_vec.x.b = this.vec.a
			wall_vec.y.a = this.edge
			wall_vec.y.b = this.vec.b
		}
    else if (this.side & FRONT) {
      wall_vec.x.a = this.vec.a
      wall_vec.x.b = this.edge
      wall_vec.y.a = this.vec.b
      wall_vec.y.b = this.edge
    }
    else if (this.side & BACK) {
      wall_vec.x.a = this.vec.b
      wall_vec.x.b = this.edge
      wall_vec.y.a = this.vec.a
      wall_vec.y.b = this.edge
    }
    return wall_vec
	}

	Wall.prototype.reset = function(){
	}
	
	Wall.prototype.destroy = function(){
		this.mx.forEach(function(mx){
			mx.destroy && mx.destroy()
		})
		this.room = this.vec = this.mx = null
	}
	
	Wall.prototype.bind = function(){
		var base = this
		base.$walls = $( this.mx.map(function(mx){ return mx.el }) )
		
		this.mx.forEach(function(mx, index){
			$(mx.el).bind({
				mouseover: function(){
				},
				mouseenter: function(e){
					Scenery.mouse.mouseenter(e, {
						wall: base,
						index: index,
					})
				},
/*
				mousemove: function(e){
          var offset = offsetFromPoint(e, mx.el)
          if (offset) {
            var pos = base.mxOffsetToPosition( offset, index )
            
            var mx_pos = base.positionToMx(pos, new vec2(5,5))
            var mx_dot = new MX.Object3D
            mx_dot.move(mx_pos)
            mx_dot.width = 5
            mx_dot.height = 5
            mx_dot.rotationY = wall_rotation[base.side]
            mx_dot.el.style.backgroundColor = "red"
            scene.add(mx_dot)
          }
				},
*/
        contextmenu: function(e){
          if (! (e.ctrlKey || e.metaKey || e.shiftKey) ) {
            e.preventDefault()
          }
          if (Scenery.nextMedia) {
            e.preventDefault()
            Scenery.nextMedia = null
            app.tube('cancel-scenery')
          }
          else if (Scenery.nextWallpaper) {
            e.preventDefault()
            Scenery.nextWallpaper = null
            app.tube('cancel-wallpaper')
          }
        },

				mousedown: function(e){
				  
				  // right-click
				  if (e.which == 3) {
				    if (Scenery.nextMedia) {
				      e.preventDefault()
              Scenery.nextMedia = null
              app.tube('cancel-scenery')
				    }
				    else if (Scenery.nextWallpaper) {
				      e.preventDefault()
              Scenery.nextWallpaper = null
              app.tube('cancel-wallpaper')
				    }
				    return
				  }
          
          var offset = offsetFromPoint(e, mx.el)
          if (! offset) { return }

          var pos = base.mxOffsetToPosition( offset, index )

					if (Scenery.nextMedia) {
            var scenery = Scenery.addNextToWall({
            	wall: base,
            	index: index,
            	position: pos,
            })
            
            // scenery was not placed
            if (! scenery) {	
            	e.stopPropagation()
            	return
            }

            app.controller.toolbar.resetPermissions()
            Scenery.resize.show(scenery)
            Scenery.hovering = true 
            
            app.controller.pick(scenery)

  					UndoStack.push({
  					  type: 'create-scenery',
  					  undo: { id: scenery.id },
              redo: scenery.serialize(),
  					})
  					
            // TODO: watch individual scenery object here
            Minotaur.watch( app.router.editorView.settings )
          }
					else if (Scenery.nextWallpaper) {
					  var oldState = base.serialize()
						base.wallpaper(Scenery.nextWallpaper)
						// Scenery.nextWallpaper = null

  					UndoStack.push({
  					  type: 'update-wallpaper',
  					  undo: oldState,
              redo: base.serialize(),
  					})

            // TODO: watch individual scenery object here
            Minotaur.watch( app.router.editorView.settings )

						app.controller.pickWall(base, pos)
          }
					else {
						app.controller.pickWall(base, pos)
					}
				},
			})
		})

    // flip the mx order
		var shouldFlip = this.side & (LEFT | BACK)
		if (! shouldFlip) {
			this.mx.reverse()
		}
	}
	
	Wall.prototype.serialize = function(){
	  return {
	    id: this.id,
	    background: this.background,
	  }
	}
	
	Wall.prototype.deserialize = function(data){
	  this.wallpaper( data.background )
	}


  // wall
  // side: corresponds to the orientation of this wall
  // vec: equivalent to the bounds of the Surface
  // edge: the coordinate of the normal of this surface
  // 			 var useX = side & LEFT_RIGHT
  //			 var useA = side & (FRONT | LEFT)
  //       edge = mx.rect[useX ? 'x': 'y'][ useA ? 'a': 'b']
  // surface: an ordered set of contiguous wall regions, corresponding to mx objects

	Wall.prototype.positionToMx = function(position, dimension) {
		var x, z
		switch (this.side) {
			case FRONT:
				x = position.a + dimension.a / 2
				z = this.edge + painting_distance_from_wall
				break
			case BACK:
				x = position.a + dimension.a / 2
				z = this.edge - painting_distance_from_wall
				break
			case LEFT:
				x = this.edge + painting_distance_from_wall
				z = position.a + dimension.a / 2
				break
			case RIGHT:
				x = this.edge - painting_distance_from_wall
 				z = position.a + dimension.a / 2
				break
		}
		return {
		  x: x,
		  y: position.b + dimension.b / 2,
		  z: z,
		  rotationY: wall_rotation[ this.side ],
		}
	}
	Wall.prototype.mxToPosition = function(mx, dimension) {
	  var position = new vec2(0,0)
	  switch (this.side) {
	    case FRONT:
	    case BACK:
	      position.a = mx.x
	      position.b = mx.y
	      break
	    case LEFT:
	    case RIGHT:
	      position.a = mx.z
	      position.b = mx.y
	      break
	  }
	  if (dimension) {
	  	position.a -= dimension.a / 2
	  	position.b -= dimension.b / 2
	  }
	  return position
	}
  Wall.prototype.mxOffsetToPosition = function( offset, index ) {
    var face = this.surface.faces[index]
    var shouldFlip = this.side & (RIGHT | FRONT)
    var position = new vec2(0,0)
    position.a = face.x.lerp(shouldFlip ? 1-offset.left : offset.left)
    position.b = face.y.lerp(1-offset.top)
    position.round()
    return position
  }

	Wall.prototype.color = function(color){
		this.$walls.css("background-color", color)
	}
	
	Wall.prototype.wallpaper = function(background, img){
	  if (! background) {
	    background = { src: "none" }
	  }
	  else if (typeof background == "string") {
	    background = { src: background }
	  }
	  else if (! background.src) {
	    background = { src: "none" }
	  }
    background.x = background.x || 0
    background.y = background.y || 0
    background.scale = background.scale || 1

		this.background = background
		this.background.src = this.background.src.replace("url(","").replace(")","")

		if (this.background.src == "none") {
		  this.wallpaperLoad(this.background.src)
		  return
		}
		
		img = img || new Image ()
		img.onload = function(){
		  this.backgroundImage = img
		  this.wallpaperLoad(this.background.src)
		  this.wallpaperPosition(background)
		}.bind(this)
		img.src = this.background.src
		img.complete && img.onload()
	}
	
	Wall.prototype.wallpaperLoad = function(url){
	  if (url !== "none") {
	    url = "url(" + url + ")"
	  }
		this.mx.forEach(function(mx){
      if (mx.el) mx.el.style.backgroundImage = url
    })
	}

	Wall.prototype.wallpaperPosition = function(background){
	  if (this.background.src == "none") { return }

	  this.background.x = background.x || this.background.x || 0
	  this.background.y = background.y || this.background.y || 0
	  this.background.scale = background.scale || this.background.scale || 1

		var mx, dx, dy
		var w = Math.round( this.backgroundImage.naturalWidth * this.background.scale )
		var h = Math.round( this.backgroundImage.naturalHeight * this.background.scale )

		this.surface.faces.forEach(function(face, i){
      // this.mx[i].el.innerHTML = sidesToString(this.side)

      switch (this.side) {
      	case LEFT:
					mx = this.mx[this.mx.length-1-i]
					dx = Math.round( this.background.x + face.x.a )
					dy = Math.round( this.background.y + face.y.b )
					break
				case RIGHT:
					mx = this.mx[this.mx.length-1-i]
					dx = Math.round( this.background.x + face.x.b )
					dy = Math.round( this.background.y + face.y.b )
					break
				case FRONT:
					mx = this.mx[this.mx.length-1-i]
					dx = Math.round( this.background.x + face.x.b )
					dy = Math.round( this.background.y + face.y.b )
					break
				case BACK:
					mx = this.mx[i]
					dx = Math.round( this.background.x - face.x.a )
					dy = Math.round( this.background.y + face.y.b )
					break
      }
      
      mx.el.style.backgroundPosition = dx + 'px ' + dy + 'px'
      mx.el.style.backgroundSize = w + 'px ' + h + 'px'
    }.bind(this))
	}
	
	Wall.prototype.outline = function(wallColor, outlineColor){
		var mx = this.mx

		var len = this.mx.length
    var outlineString = app.defaults.outlineWidth + "px solid " + outlineColor
		zz = 0

		mx.forEach(function(mx, i){
			// if (mx.outlined) return
			// mx.outlined = true
      if (wallColor) {
        mx.el.style.backgroundColor = wallColor
      }
      if (outlineColor) {
        // all walls get bottom lines
        mx.el.style.borderBottom = outlineString
        
        // all walls get top lines
        mx.el.style.borderTop = outlineString
        
        // walls on initial sides get left lines
        // if their left edge lines up with the rect edge
        if (i == 0) {
          mx.el.style.borderLeft = outlineString
        }
        
        // walls on terminal sides get right lines....
        // if their right edge lines up with the rect edge
        if (i == len-1) {
          mx.el.style.borderRight = outlineString
        }
      }
		})
	}
	
	if ('window' in this) {
		window.Wall = Wall
	}
	else {
		module.exports = Wall
	}


})()