(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 Floor = function(opt){
		this.id = opt.id
		this.side = opt.side
		this.ceiling = opt.side & CEILING
		this.mx = opt.mx
	}
	
	Floor.prototype.serialize = function(){
	  return {
	    id: this.id,
	    background: this.background,
	  }
	}
	
	Floor.prototype.deserialize = function(data){
	  this.wallpaper( data.background )
	}

	Floor.prototype.bind = function(){
		var base = this
		base.$els = $( this.mx.map(function(mx){ return mx.el }) )

		this.mx.forEach(function(mx, index){
			$(mx.el).bind({
        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 x = mx.x + mx.width * (offset.left-0.5)
          var z = mx.z + mx.height * (0.5-offset.top)
  
          if (Scenery.nextMedia) {
            e.preventDefault()
          
            var sculpture = Sculpture.addNext({
              position: { x: x, y: 0, z: z },
            })
          
            // scenery was not placed
            if (! sculpture) {	
              e.stopPropagation()
              return
            }

            app.controller.toolbar.resetPermissions()
            Sculpture.resize.show(sculpture)
            Sculpture.hovering = true 
          
            // app.controller.pick(sculpture)

            UndoStack.push({
              type: 'create-sculpture',
              undo: { id: sculpture.id },
              redo: sculpture.serialize(),
            })
          
            // TODO: watch individual sculpture 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, null)
          }
          else {
            app.controller.pickWall(base, null)
          }
				}
			})
		})

    // flip the mx order
		var shouldFlip = this.side & (CEILING)
		if (! shouldFlip) {
			this.mx.reverse()
		}
	}
	
	Floor.prototype.color = function(color){
		this.$els.css("background-color", color)
	}
	
	Floor.prototype.wallpaper = function(background){
	  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
		}
		
		var 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()
	}
	
	Floor.prototype.wallpaperLoad = function(url){
	  if (url !== "none") {
	    url = "url(" + url + ")"
	  }
		this.mx.forEach(function(mx){
      mx.el.style.backgroundImage = url
    })
	}

	Floor.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.mx.forEach(function(mx, i){
      
      var region = mx.rect
      
      if (this.ceiling) {
        dx = Math.round( this.background.x - region.x.a )
        dy = Math.round( this.background.y - region.y.a )
      }
      else {
        dx = Math.round( this.background.x - region.x.a )
        dy = Math.round( this.background.y + region.y.b )
      }
      
      mx.el.style.backgroundPosition = dx + 'px ' + dy + 'px'
      mx.el.style.backgroundSize = w + 'px ' + h + 'px'
    }.bind(this))
    bbb = this
	}

	if ('window' in this) {
		window.Floor = Floor
	}
	else {
		module.exports = Floor
	}
})()