var Arena ={
  create:function(id, config, options){
    var ar = {};

    ///////// function init code here /////////
    ar.init = function(id){

      // public vars
      ar.units = [];
      ar.options = {
        showSky: true,
        dynamicSky: false,
        showShadow: true,
        dynamicShadow: true
      };
      ar.id = id;
      ar.domId = "#" + id;
      ar.cruise = {
        target : new THREE.Vector3(),
        lon: 90,
        lat: 0,
        phi: 0,
        theta : 0
      };
      ar.temp = {};
      ar.shape3Ds = [];
      ar.mouse = new THREE.Vector2();

      function getViewSize(){
        var SCREEN_WIDTH = window.innerWidth - $(ar.domId).offset().left;
        var SCREEN_HEIGHT = window.innerHeight - $(ar.domId).offset().top - 17;

        return { width: SCREEN_WIDTH, height: SCREEN_HEIGHT };
      }

      function initScene(){
        ar.raycaster = new THREE.Raycaster();
        ar.scene	= new THREE.Scene();
        //ar.scene.overrideMaterial = new THREE.MeshDepthMaterial();
      }

      function initRender(){
        if(Detector.webgl){
          ar.renderer = new THREE.WebGLRenderer({ antialias:true});

          if (ar.options.showShadow){
            ar.renderer.shadowMap.enabled = true;
            ar.renderer.shadowMapSoft = true;
            ar.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
          }
          console.info("webGL render is working.");
        }else{
          ar.renderer = new THREE.CanvasRenderer(); //WebGLRenderer
          console.info("canvas render is working. restart brower remote to enable WebGL");
        }

        ar.renderer.sortObjects = false;
        ar.renderer.setClearColor( 0x0086b3 ,1);
        ar.renderer.setPixelRatio( window.devicePixelRatio );
        ar.renderer.setSize(getViewSize().width,getViewSize().height);
      }

      function initCamera(){
        // camera attributes
        var VIEW_ANGLE = 45, ASPECT = getViewSize().width / getViewSize().height,
          NEAR = 10, FAR = 50000;

        ar.camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);

        ar.camera.position.set(-100, 1600, 1800);
        ar.camera.lookAt(ar.scene.position);
        ar.scene.add(ar.camera);
        //ar.scene.fog = new THREE.Fog( 0xffffff, 1, 5000 );
        //ar.scene.fog.color.setHSL( 0.6, 0, 1 );
      }

      function initSky(){
        var texture_placeholder = document.createElement( 'canvas' );
        texture_placeholder.width = 128;
        texture_placeholder.height = 128;

        var context = texture_placeholder.getContext( '2d' );
        context.fillStyle = 'rgb( 200, 200, 200 )';
        context.fillRect( 0, 0, texture_placeholder.width, texture_placeholder.height );

        function loadTexture( path ) {

          var texture = new THREE.Texture( texture_placeholder );
          var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );

          var image = new Image();
          image.onload = function () {

            texture.image = this;
            texture.needsUpdate = true;

          };
          image.src = path;

          return material;
        }

        var materials = [
        
         loadTexture('/img/3d/skybox/skybox_02.png'),
         loadTexture('/img/3d/skybox/skybox_04.png'),
         loadTexture('/img/3d/skybox/skybox_05.png'), 
         loadTexture('/img/3d/skybox/skybox_06.png'),
         loadTexture('/img/3d/skybox/skybox_01.png'),
         loadTexture('/img/3d/skybox/skybox_03.png')
        ];

        // var materials = [

        //   loadTexture( '/img/3d/skybox/px.jpg' ), // right
        //   loadTexture( '/img/3d/skybox/nx.jpg' ), // left
        //   loadTexture( '/img/3d/skybox/py.jpg' ), // top
        //   loadTexture( '/img/3d/skybox/ny.jpg' ), // bottom
        //   loadTexture( '/img/3d/skybox/pz.jpg' ), // back
        //   loadTexture( '/img/3d/skybox/nz.jpg' )  // front

        // ];

        var mesh = new THREE.Mesh(
          new THREE.BoxGeometry( 30000, 30000, 30000, 7, 7, 7 ),
          new THREE.MeshFaceMaterial( materials ) );
        mesh.scale.x = - 1;
        ar.scene.add( mesh );
      }

      function initResize(){
        $(window).resize(function (){
          ar.camera.aspect = getViewSize().width / getViewSize().height;
          ar.camera.updateProjectionMatrix();
          ar.renderer.setSize( getViewSize().width, getViewSize().height);
        });
      }

      function initControl(){
        //ar.controls = new THREE.OrbitControls(ar.camera, ar.renderer.domElement);
        ar.controls = new THREE.OrbitControls( ar.camera );
        ar.controls.addEventListener( 'change', ar.render );
        ar.controls.minDistance = 500;
        ar.controls.maxDistance = 5000;
        ar.controls.maxPolarAngle = Math.PI * 0.5;
        //ar.controls.minPolarAngle = Math.PI * 0.1;

        ar.container.style.position = "relative";
        var btnContainer = document.createElement('div');
        btnContainer.id = "btnContainer";
        btnContainer.style.cssText = "position:absolute;left:20px;bottom:20px;margin:10px;";

        var vi = document.createElement('img');
        vi.id = "veilimg";
        vi.style.cssText = "padding:3px;cursor:pointer;";
        vi.src = 'img/3d/veilView-h.png';
        vi.onclick = function(){
          if (this.src.indexOf('img/3d/veilView-h.png') >= 0)
          {
            this.src = 'img/3d/veilView-i.png';
            document.getElementById("overimg").src="img/3d/overview-h.png";
            ar.cartoon('veilview');
          }
        };

        var oi = document.createElement('img');
        oi.id = "overimg";
        oi.style.cssText = "padding:3px;cursor:pointer;";
        oi.src = "img/3d/overview-h.png";
        oi.onclick = function(){
          if (this.src.indexOf('img/3d/overview-h.png') >= 0)
          {
            this.src = 'img/3d/overview-i.png';
            document.getElementById("veilimg").src="img/3d/veilView-h.png";
            ar.cartoon('overview');
          }
        };

        btnContainer.appendChild(vi);
        btnContainer.appendChild(oi);
        ar.container.appendChild(btnContainer);
      }

      function initDebugParts(){
        // axes
        var axes = new THREE.AxisHelper(100);
        ar.scene.add( axes );

        // displays current and past frames per second attained by scene
        ar.stats = new Stats();
        ar.stats.domElement.style.position = 'absolute';
        ar.stats.domElement.style.bottom = '0px';
        ar.stats.domElement.style.zIndex = 100;
        ar.container.appendChild(ar.stats.domElement);

        // Grid
        var size = 800, step = 80;

        var geometry = new THREE.Geometry();

        for (var i = -size; i <= size; i += step) {
          geometry.vertices.push(new THREE.Vector3(-size, 0, i));
          geometry.vertices.push(new THREE.Vector3(size, 0, i));
          geometry.vertices.push(new THREE.Vector3(i, 0, -size));
          geometry.vertices.push(new THREE.Vector3(i, 0, size));
        }

        var material = new THREE.LineBasicMaterial({color: 0xeeeeee, opacity: 0.7});

        var line = new THREE.Line(geometry, material, THREE.LinePieces);
        ar.scene.add(line);

        //ArrowHelper
        var directionV3 = new THREE.Vector3(1, 0, 1);
        var originV3 = new THREE.Vector3(0, 200, 0);
        // 100 is length, 20 and 10 are head length and width
        var arrowHelper = new THREE.ArrowHelper(directionV3, originV3, 100, 0xff0000, 20, 10);
        ar.scene.add(arrowHelper);

        // 3. BoundingBoxHelper
        //bboxHelper = new THREE.BoundingBoxHelper(group, 0x999999);
        //ar.scene.add(bboxHelper);
      }

      function defineMouseBehavior(){
        ar.container.addEventListener( 'mousemove', onDocumentMouseMove, false );
        ar.container.addEventListener( 'mousedown', onDocumentMouseDown, false );
        function onDocumentMouseMove( event ) {
          ar.mouse.x = ( (event.clientX - $(ar.domId).position().left)/ $(ar.domId).width()) * 2 - 1;
          ar.mouse.y = - ( (event.clientY - $(ar.domId).position().top) / $(ar.domId).height()) * 2 + 1;
          event.preventDefault();
        }
        function onDocumentMouseDown( e ) {
          e.preventDefault();
          if (ar.INTERSECTED){
            var shp = ar.getShapeByMesh(ar.INTERSECTED);
            if (shp.config.bindings.length > 0) {
              var devId = shp.config.bindings[0].id;
              ar.options.shell.$location.url('/deviceInfo/' + devId);
              //alert(angular.toJson(shp.config));
            }
          }
        }
      }

      function attachToDom(){
        ar.container = document.getElementById(ar.id);
        ar.container.appendChild(ar.renderer.domElement);

      }

      initScene();
      initRender();
      initCamera();
      attachToDom();
      if (ar.options.showSky) initSky();
      initResize();
      initControl();
      //initDebugParts();
      defineMouseBehavior();
    };

    ar.clear = function(){
      ar.shape3Ds = [];
    };

    ar.load = function(config){
      ar.clear();
      if (config) {
        ar.loadConfig = config;
      }
      else {
        ar.loadConfig = bn.demoConfig;
      }

      ar.loadConfig.shapes.forEach(function (shp) {
        if (shp.param3D) ar.loadUnit(shp.param3D);
      });

      ar.initLight();
    };

    ar.loadUnit = function(param) {
      var ut = _.find(ar.units, function (item) {
        return item.name === param.unit;
      });

      if (_.isUndefined(ut)) return;
      if (_.isUndefined(ut.create)) return;

      var mesh = ut.create(param);
      mesh.unit = ut;

      var shp = _.extend({}, ar.shape3DClass);
      shp.mesh = mesh;
      shp.config = param;
      shp.id = _.uniqueId();

      ar.shape3Ds.push(shp);
      ar.scene.add(mesh);
    };

    ar.animate = function(){
      ar.aniframeId = requestAnimationFrame(ar.animate);
      TWEEN.update();
      ar.render();
      ar.controls.update();
    };

    ar.render = function(){
      if (!ar) return;
      ar.update();
      ar.renderer.render(ar.scene, ar.camera);
    };

    ar.update = function() {
      if (ar.options.dynamicSky){
        ar.cruise.lon += 0.1;

        ar.cruise.lat = Math.max( - 85, Math.min( 85, ar.cruise.lat ) );
        ar.cruise.phi = THREE.Math.degToRad( 90 - ar.cruise.lat );
        ar.cruise.theta = THREE.Math.degToRad( ar.cruise.lon );

        ar.cruise.target.x = 500 * Math.sin( ar.cruise.phi ) * Math.cos( ar.cruise.theta );
        ar.cruise.target.y = 500 * Math.cos( ar.cruise.phi );
        ar.cruise.target.z = 500 * Math.sin( ar.cruise.phi ) * Math.sin( ar.cruise.theta );

        ar.camera.lookAt( ar.cruise.target );
      }

      if (ar.options.dynamicShadow){
        var timer = Date.now() * 0.0001;
        ar.light.position.x = Math.sin(timer) * 1000;
        ar.light.position.z = Math.cos(timer) * 1000;
        ar.light.target.position.set(0, 0, 0);
      }

      ar.shape3Ds.forEach(function(shp){
        if (shp.mesh.unit.isFlat) shp.mesh.lookAt( ar.camera.position );
      });

      // high light mouse indicator
      ar.raycaster.setFromCamera( ar.mouse, ar.camera );
      var intersects = ar.raycaster.intersectObjects( ar.scene.children, true );

      if ( intersects.length > 0 ) {

        if ( ar.INTERSECTED != intersects[ 0 ].object ) {
          if ( ar.INTERSECTED ) ar.util.maskColor(ar.INTERSECTED, ar.INTERSECTED.currentHex);
          ar.INTERSECTED = intersects[ 0 ].object;
          ar.INTERSECTED.currentHex = ar.util.getMaskColor(ar.INTERSECTED);
          ar.util.maskColor(ar.INTERSECTED, 0x223366);
        }

      } else {
        if ( ar.INTERSECTED ) ar.util.maskColor(ar.INTERSECTED, ar.INTERSECTED.currentHex);
        ar.INTERSECTED = null;
      }
    };

    ar.getUnit = function(name){
      return _.find(ar.units, function (unit) {
        return unit.name === name;
      });
    };

    ar.initLight = function () {
      //泛光可调整整个房间的明暗度
      //var ambient = new THREE.AmbientLight( 0x888888);
      //ar.scene.add( ambient );

      //半球面环境光，模拟天空到大地的光线，可作为主环境光
      var envlight = new THREE.HemisphereLight( 0xffffff, 0xA2C9ED, 0.8);
      //var envlight = new THREE.HemisphereLight( 0x888888, 0x111111, 0.8);
      //envlight.position.set( 0, 1500, 0 );

      //envlight.shadowCameraFov = 60;
      ar.scene.add(envlight);

      // 5000 is sphere size, 3000 is arrow length
      //var hlightHelper = new THREE.HemisphereLightHelper(envlight, 10000, 1000);
      //ar.scene.add(hlightHelper);

      //平行光，用于产生阴影
      var light = new THREE.DirectionalLight(0x222222);
      light.position.set(0, 1000, 2000);
      light.target.position.set(0, 0, 0);


      light.castShadow = true;
      light.shadowDarkness = 0.7;
      //light.shadowCameraNear = 2;
      //light.shadowCameraFar = 5000;
      light.shadowCameraLeft = -3000;
      light.shadowCameraRight = 3000;
      light.shadowCameraTop = 3000;
      light.shadowCameraBottom = -3000;
      //light.shadowCameraFov = 60000;
      light.shadowMapWidth = light.shadowMapHeight = 1024;

      ar.scene.add(light);
      ar.light = light;

      //ar.camera.updateMatrix();
      //var cameraHelper = new THREE.CameraHelper( light.shadow );
      //this.scene.add(cameraHelper);

      //// 50 is helper size
      //dlightHelper = new THREE.DirectionalLightHelper(light, 500);
      //ar.scene.add(dlightHelper);

    };

    ar.dispose = function(){

      var disposeObject = function(obj){
        for(var b in obj){
          if(typeof(obj[b]) === "function" && obj[b].name === "event"){
            obj[b] = undefined;
          }
          else if(typeof(obj[b]) === "function" && obj[b].length > 0){
            disposeObject(obj[b]);
          }
          else if(typeof(obj[b]) === "object" && b === "dispatch"){
            disposeObject(obj[b]);
          }
        }
      };

      var disposeNode = function(node)
      {
        if (node instanceof THREE.Camera)
        {
          node = undefined;
        }
        else if (node instanceof THREE.Light)
        {
          if (!node.dispose){
            disposeObject(node);
          }
          else
            node.dispose ();
          node = undefined;
        }
        else if (node instanceof THREE.Mesh)
        {
          if (node.geometry)
          {
            node.geometry.dispose ();
            node.geometry = undefined;
            delete node.geometry;
          }

          if (node.material)
          {
            if (node.material instanceof THREE.MeshFaceMaterial)
            {
              $.each (node.material.materials, function (idx, mtrl)
              {
                if (!mtrl) return;
                mtrl.dispose();
                if (mtrl.map)           
                  {
                    mtrl.map.dispose();
                    mtrl.map = undefined;
                    delete mtrl.map;
                  }

                if (mtrl.lightMap)      mtrl.lightMap.dispose();
                if (mtrl.bumpMap)       mtrl.bumpMap.dispose();
                if (mtrl.normalMap)     mtrl.normalMap.dispose();
                if (mtrl.specularMap)   mtrl.specularMap.dispose();
                if (mtrl.envMap)        mtrl.envMap.dispose();

                mtrl.dispose();    // disposes any programs associated with the material
                mtrl = undefined;
                delete mtrl;
              });
            }
            else
            {
              if (node.material.map)          
              {
                node.material.map.dispose();
                node.material.map = undefined;
                delete node.material.map;
              }

              if (node.material.lightMap)     node.material.lightMap.dispose ();
              if (node.material.bumpMap)      node.material.bumpMap.dispose ();
              if (node.material.normalMap)    node.material.normalMap.dispose ();
              if (node.material.specularMap)  node.material.specularMap.dispose ();
              if (node.material.envMap)       node.material.envMap.dispose ();

              node.material.dispose ();   // disposes any programs associated with the material
              node.material = undefined;
              delete node.material;
            }
          }

          node = undefined;
        }
        else if (node instanceof THREE.Object3D)
        {
          node = undefined;
          delete node;
        }
      };

      var disposeHierarchy = function(node, callback)
      {
        for (var i = node.children.length - 1; i >= 0; i--)
        {
          var child = node.children[i];
          disposeHierarchy (child, callback);
          callback (child);
        }
      };

      //stop data pooling
      if (ar.provider) ar.provider.dispose();
      //remove event for controller
      $(window).off();
      $(window).unbind();
      $(document).off();
      $(document).unbind();
      $(ar.domId).off();
      $(ar.domId).unbind();
      if (ar.renderer) $(ar.renderer.domElement).off();

      //stop animation
      TWEEN.removeAll();
      if (ar.aniframeId) window.cancelAnimationFrame(ar.aniframeId);
      //remove shapes
      // if (ar.shape3Ds){
      //   ar.shape3Ds.forEach(function(shp){
      //     if (shp.mesh){
      //       ar.scene.remove(shp.mesh);
      //       disposeHierarchy(shp.mesh, disposeNode);
      //     }
      //   });
      //   disposeObject(ar.shape3Ds);
      //   ar.shape3Ds = undefined;
      //   delete ar.shape3Ds;
      // }

      //remove scene
      if (ar.controls) ar.controls.dispose();
      if (ar.raycaster) disposeObject(ar.raycaster);
      // $.each(ar.scene.children, function(idx, obj) {
      //           if (obj !== undefined) {
      //               if (obj.geometry) {
      //                   obj.geometry.dispose();
      //               }

      //               if (obj.material) {
      //                   if (obj.material instanceof THREE.MeshFaceMaterial) {
      //                       $.each(obj.material.materials, function(idx, obj) {
      //                           obj.dispose();
      //                       });
      //                   } else {
      //                       obj.material.dispose();
      //                   }
      //               }

      //               if (obj.dispose) {
      //                   obj.dispose();
      //               }
      //           }
      //       }); 

      //clear all resource

      if (ar.camera) disposeObject(ar.camera);
      //if (ar.scene) disposeHierarchy (ar.scene, disposeNode);
      if (ar.container) disposeObject(ar.container);      
      
      if (ar.renderer) 
        {
          ar.renderer.forceContextLoss();
          ar.renderer.context = null;
          ar.renderer.domElement = null;          
          disposeObject(ar.renderer);
          ar.renderer = null;
        }
        

      doDispose(ar.scene);

      function doDispose(obj) {
        if (obj !== null) {
          for (var i = 0; i < obj.children.length; i++) {
            doDispose(obj.children[i]);
          }
          if (obj.geometry) {
            obj.geometry.dispose();
            obj.geometry = undefined;
          }
          if (obj.material) {
            if (obj.material instanceof THREE.MeshFaceMaterial) {
              $.each(obj.material.materials, function(idx, o) {
                if (!o) return;
                if (o.map)          
                {
                  o.map.dispose();
                  o.map = undefined;
                  delete o.map;
                }
                o.dispose();
              });
            } else {
              obj.material.dispose();
            }
          }
          if(obj.dispose) {
            obj.dispose();
          }
        }
        obj = undefined;
      }

      ar.scene = null;

      disposeObject(ar);
      ar = undefined;
    };

    ar.cartoon = function(type){
      if (type == "overview"){
        var position = {x:0,y:3000,z:0};
        var target = {x:0,y:0,z:-1};
        ar.tweenCamera(position, target);
      }

      if (type == "veilview"){
        var position = {x:-3000,y:3000,z:-3000};
        var target = {x:0,y:0,z:0};
        ar.tweenCamera(position, target);
      }
    };

    ar.tweenCamera = function tweenCamera(position, target){
      //TWEEN.removeAll();

      new TWEEN.Tween(ar.camera.position).to({
        x: position.x,
        y: position.y,
        z: position.z
      },3000).easing(TWEEN.Easing.Linear.None).onUpdate(function () {
        ar.camera.lookAt(target);
      }).onComplete(function () {
      }).start();
    };

    ar.getShapeByMesh = function (mesh){
      if (!mesh) return;

      var obj = mesh;
      while(!(obj.parent instanceof THREE.Scene)){
        obj = obj.parent;
      }

      var selected;
      ar.shape3Ds.forEach(function(shp){
        if (shp.mesh === obj){
          selected = shp;
        }
      });

      return selected;
    };

    ar.loadUnits = function(){
      ar.units = [
        {
          name : "floor",
          buildFloor: function(param){
            //因为SVG无法使用底图（只能使用UV贴图），作为地板非常难看。
            //这里取消平面自动地板生成功能（可生成不规则地板）限制为仅能使用矩形地板（使用BOX模拟）
            //所以下面代码注释掉：
            //var floorG = ar.transformSVGPath(param.path);
            //var planeMesh = ar.createShape(floorG, 0xdddddd, 0, 0, 0, Math.PI/2, 0, 0, 1);
            //group.add(planeMesh);
            //planeMesh.geometry.center();

            var tileSize = 64;

            var floorTexture = new THREE.TextureLoader().load(param.floorTexture);
            floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
            floorTexture.repeat.set( param.floorWidth / tileSize, param.floorHeight / tileSize );

            var floorMaterial = new THREE.MeshPhongMaterial( {
              map: floorTexture, side: THREE.DoubleSide} );

            var floorGeometry = new THREE.PlaneGeometry(param.floorWidth, param.floorHeight,1,1);
            var floor = new THREE.Mesh(floorGeometry, floorMaterial);
            floor.position.y = -0.5;
            floor.rotation.x = Math.PI / 2;

            floor.receiveShadow = true;
            return floor;
          },
          create: function (param){
            //create an empty container
            var group = new THREE.Object3D();

            var floor = this.buildFloor(param);
            group.add(floor);

            //get enclosure lines


            var lines = [];

            var lineX1 = {};
            lineX1.start = {x: -(param.floorWidth / 2), y:0, z: -(param.floorHeight / 2)};
            lineX1.end = {x: param.floorWidth / 2, y:0, z: -(param.floorHeight / 2)};
            lines.push(lineX1);

            var lineX2 = {};
            lineX2.start = {x: -(param.floorWidth / 2), y:0, z: param.floorHeight / 2};
            lineX2.end = {x: param.floorWidth / 2, y:0, z: param.floorHeight / 2};
            lines.push(lineX2);

            var lineX3 = {};
            lineX3.start = {x: -(param.floorWidth / 2), y:0, z: -(param.floorHeight / 2)};
            lineX3.end = {x: -(param.floorWidth / 2), y:0, z: param.floorHeight / 2};
            lines.push(lineX3);

            var lineX4 = {};
            lineX4.start = {x: param.floorWidth / 2, y:0, z: -(param.floorHeight / 2)};
            lineX4.end = {x: param.floorWidth / 2, y:0, z: param.floorHeight / 2};
            lines.push(lineX4);

            //build walls
            lines.forEach(function(line){
              var mold = ar.util.getMold(param.moldId);
              group.add(ar.util.buildWall(mold, line));
            });

            return group;
          }
        },{
          name : "door",
          create: function (param) {

            return ar.util.buildWallPart(param);
          }
          //},{
          //  name : "window",
          //  create: function (param) {
          //    return ar.util.buildWallPart(param);
          //  }
        },{
          name:"rack",
          create: function(param){

            var mold = ar.util.getMold(param.moldId);

            var faces = [];
            // order of faces: x+,x-,y+,y-,z+,z-
            var rightFace = ar.util.newFace(mold.faces.rightFace);
            faces.push(rightFace);
            var leftFace = ar.util.newFace(mold.faces.leftFace);
            faces.push(leftFace);
            var topFace = ar.util.newFace(mold.faces.topFace);
            faces.push(topFace);
            var bottomFace = ar.util.newFace(mold.faces.bottomFace);
            faces.push(bottomFace);
            var frontFace = ar.util.newFace(mold.faces.frontFace);
            faces.push(frontFace);
            var backFace = ar.util.newFace(mold.faces.backFace);
            faces.push(backFace);

            var cubeMaterials = new THREE.MeshFaceMaterial(faces);
            var cubeGeometry = new THREE.CubeGeometry(
              mold.size.width, mold.size.high, mold.size.depth);

            var cube = new THREE.Mesh(cubeGeometry, cubeMaterials);

            cube.position.x = param.position.x;
            cube.position.y = mold.size.high / 2 + param.aboveGround;
            cube.position.z = param.position.z;

            //if (param.angle > 0 )
              cube.rotateY( 0 - ar.util.radians(param.angle));
            cube.castShadow = true;
            return cube;
          }
        },{
          name:"line",
          create: function(param){

            var geometry = new THREE.Geometry();
            param.lines.forEach(function(line){
              geometry.vertices.push(new THREE.Vector3(
                line.start.x,
                line.start.y,
                line.start.z
              ));
              geometry.vertices.push(new THREE.Vector3(
                line.end.x,
                line.end.y,
                line.end.z
              ));
            });

            var m = new THREE.LineBasicMaterial({
              color: param.color,fog:true});

            var line = new THREE.Line(geometry, m);

            return line;
          }
        },{
          name:"flat",
          isFlat:true,
          create: function(param){
            var mold = ar.util.getMold(param.moldId);

            var obj = ar.util.flatObject(param, mold,param.position, parseFloat(param.aboveGround));

            return obj.mesh;
          }
        },{
          name:"wallPath",
          create: function(param){
            var group = new THREE.Object3D();
            var mold = ar.util.getMold(param.moldId);
            if (param.moldId !== "wallpath-null") 
            {
              param.lines.forEach(function(line){
                group.add(ar.util.buildWall(mold, line));
              });
            }

            //if (param.angle > 0 )
              group.rotateY( 0 - ar.util.radians(param.angle));
            return group;
          }
        },{
          name:"camera",
          create: function(param){
            //var transparentColor = 0xffffff;
            //var size = {x:64,y:64};
            //var imgurl = "img/3d/CCTV-icon.png";
            //
            //var obj = ar.util.flatObject(imgurl, transparentColor,
            //  size,param.position);
            //
            //return obj.mesh;

            var geometry = new THREE.SphereGeometry( 30, 16, 16 );
            var material = new THREE.MeshBasicMaterial( {
              map: THREE.ImageUtils.loadTexture('img/3d/global.jpg')});
            var sphere = new THREE.Mesh( geometry, material );
            sphere.position.x = param.position.x;
            sphere.position.y = param.position.y;
            sphere.position.z = param.position.z;
            return sphere;
          }
        }
      ];
    };

    ar.shape3DClass = {
      mesh: undefined,
      tws:[],
      defaultColors:[],
      update:function(status){
        if (status.state === this.alarmLevel) return;

        this.alarmLevel = status.state;

        var needRemove=null;

        this.tws.forEach(function(fso){
          if (fso.id === this.id)
          {
            fso.twarray.forEach(function(tw){
              tw.stop();  
            });
            needRemove = fso;
          }
        });
        this.tws = _.without(this.tws, needRemove);

        this.resetColor();

        if (this.alarmLevel == 0) return;
        this.shining(this.alarmLevel);
      },
      resetColor:function(){
        var that = this;
        if (that.mesh.material instanceof THREE.MultiMaterial)
        {
          var i=0;
          that.mesh.material.materials.forEach(
            function(m) {
              m.color = {r:1,g:1,b:1};
          });
        }
      },
      shining: function(alarmLevel){
        var that = this;
        var color = {r:1,g:1,b:1};
        switch(alarmLevel)
        {
          case "1":
            color={r:0,g:0,b:2};
            break;
          case "2":
            color={r:2,g:2,b:0};
            break;
          case "3":
            color={r:2, g: 1, b:0};
            break;
          case "4":
            color={r:2, g: 0, b:0};
            break;
          default:
        }

        if (that.mesh.material instanceof THREE.MultiMaterial)
        {
          var kso = {id:that.id,twarray:[]};
          that.mesh.material.materials.forEach(function(m){
            var tw = new TWEEN.Tween(m.color)
              .to(color, 3000)
              .repeat(Infinity)
              .easing(TWEEN.Easing.Quartic.InOut)
              .start();

            kso.twarray.push(tw);
          
          });
          that.tws.push(kso);
        }
      }
    };

    ar.util = {};
    ar.util.createShape = function ( shape, color, x, y, z, rx, ry, rz, s ) {
      // flat shape like svg

      var geometry = new THREE.ShapeGeometry( shape );
      var material = new THREE.MeshBasicMaterial({
        color: color,
        side: THREE.DoubleSide,
        overdraw: true
      });

      var mesh = new THREE.Mesh( geometry, material );
      mesh.position.set( x, y, z );
      mesh.rotation.set( rx, ry, rz );
      mesh.scale.set( s, s, s );

      return mesh;
    };

    ar.util.transformSVGPath = function (pathStr) {

      const DIGIT_0 = 48, DIGIT_9 = 57, COMMA = 44, SPACE = 32, PERIOD = 46,
        MINUS = 45;

      var path = new THREE.Shape();

      var idx = 1, len = pathStr.length, activeCmd,
        x = 0, y = 0, nx = 0, ny = 0, firstX = null, firstY = null,
        x1 = 0, x2 = 0, y1 = 0, y2 = 0,
        rx = 0, ry = 0, xar = 0, laf = 0, sf = 0, cx, cy;

      function eatNum() {
        var sidx, c, isFloat = false, s;
        // eat delims
        while (idx < len) {
          c = pathStr.charCodeAt(idx);
          if (c !== COMMA && c !== SPACE)
            break;
          idx++;
        }
        if (c === MINUS)
          sidx = idx++;
        else
          sidx = idx;
        // eat number
        while (idx < len) {
          c = pathStr.charCodeAt(idx);
          if (DIGIT_0 <= c && c <= DIGIT_9) {
            idx++;
            continue;
          }
          else if (c === PERIOD) {
            idx++;
            isFloat = true;
            continue;
          }

          s = pathStr.substring(sidx, idx);
          return isFloat ? parseFloat(s) : parseInt(s);
        }

        s = pathStr.substring(sidx);
        return isFloat ? parseFloat(s) : parseInt(s);
      }

      function nextIsNum() {
        var c;
        // do permanently eat any delims...
        while (idx < len) {
          c = pathStr.charCodeAt(idx);
          if (c !== COMMA && c !== SPACE)
            break;
          idx++;
        }
        c = pathStr.charCodeAt(idx);
        return (c === MINUS || (DIGIT_0 <= c && c <= DIGIT_9));
      }

      var canRepeat;
      activeCmd = pathStr[0];
      while (idx <= len) {
        canRepeat = true;
        switch (activeCmd) {
          // moveto commands, become lineto's if repeated
          case 'M':
            x = eatNum();
            y = eatNum();
            path.moveTo(x, y);
            activeCmd = 'L';
            break;
          case 'm':
            x += eatNum();
            y += eatNum();
            path.moveTo(x, y);
            activeCmd = 'l';
            break;
          case 'Z':
          case 'z':
            canRepeat = false;
            if (x !== firstX || y !== firstY)
              path.lineTo(firstX, firstY);
            break;
          // - lines!
          case 'L':
          case 'H':
          case 'V':
            nx = (activeCmd === 'V') ? x : eatNum();
            ny = (activeCmd === 'H') ? y : eatNum();
            path.lineTo(nx, ny);
            x = nx;
            y = ny;
            break;
          case 'l':
          case 'h':
          case 'v':
            nx = (activeCmd === 'v') ? x : (x + eatNum());
            ny = (activeCmd === 'h') ? y : (y + eatNum());
            path.lineTo(nx, ny);
            x = nx;
            y = ny;
            break;
          // - cubic bezier
          case 'C':
            x1 = eatNum(); y1 = eatNum();
          case 'S':
            if (activeCmd === 'S') {
              x1 = 2 * x - x2; y1 = 2 * y - y2;
            }
            x2 = eatNum();
            y2 = eatNum();
            nx = eatNum();
            ny = eatNum();
            path.bezierCurveTo(x1, y1, x2, y2, nx, ny);
            x = nx; y = ny;
            break;
          case 'c':
            x1 = x + eatNum();
            y1 = y + eatNum();
          case 's':
            if (activeCmd === 's') {
              x1 = 2 * x - x2;
              y1 = 2 * y - y2;
            }
            x2 = x + eatNum();
            y2 = y + eatNum();
            nx = x + eatNum();
            ny = y + eatNum();
            path.bezierCurveTo(x1, y1, x2, y2, nx, ny);
            x = nx; y = ny;
            break;
          // - quadratic bezier
          case 'Q':
            x1 = eatNum(); y1 = eatNum();
          case 'T':
            if (activeCmd === 'T') {
              x1 = 2 * x - x1;
              y1 = 2 * y - y1;
            }
            nx = eatNum();
            ny = eatNum();
            path.quadraticCurveTo(x1, y1, nx, ny);
            x = nx;
            y = ny;
            break;
          case 'q':
            x1 = x + eatNum();
            y1 = y + eatNum();
          case 't':
            if (activeCmd === 't') {
              x1 = 2 * x - x1;
              y1 = 2 * y - y1;
            }
            nx = x + eatNum();
            ny = y + eatNum();
            path.quadraticCurveTo(x1, y1, nx, ny);
            x = nx; y = ny;
            break;
          // - elliptical arc
          case 'A':
            rx = eatNum();
            ry = eatNum();
            xar = eatNum() * DEGS_TO_RADS;
            laf = eatNum();
            sf = eatNum();
            nx = eatNum();
            ny = eatNum();
            if (rx !== ry) {
              console.warn("Forcing elliptical arc to be a circular one :(",
                rx, ry);
            }
            // SVG implementation notes does all the math for us! woo!
            // http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
            // step1, using x1 as x1'
            x1 = Math.cos(xar) * (x - nx) / 2 + Math.sin(xar) * (y - ny) / 2;
            y1 = -Math.sin(xar) * (x - nx) / 2 + Math.cos(xar) * (y - ny) / 2;
            // step 2, using x2 as cx'
            var norm = Math.sqrt(
              (rx*rx * ry*ry - rx*rx * y1*y1 - ry*ry * x1*x1) /
              (rx*rx * y1*y1 + ry*ry * x1*x1));
            if (laf === sf)
              norm = -norm;
            x2 = norm * rx * y1 / ry;
            y2 = norm * -ry * x1 / rx;
            // step 3
            cx = Math.cos(xar) * x2 - Math.sin(xar) * y2 + (x + nx) / 2;
            cy = Math.sin(xar) * x2 + Math.cos(xar) * y2 + (y + ny) / 2;

            var u = new THREE.Vector2(1, 0),
              v = new THREE.Vector2((x1 - x2) / rx,
                (y1 - y2) / ry);
            var startAng = Math.acos(u.dot(v) / u.length() / v.length());
            if (u.x * v.y - u.y * v.x < 0)
              startAng = -startAng;

            // we can reuse 'v' from start angle as our 'u' for delta angle
            u.x = (-x1 - x2) / rx;
            u.y = (-y1 - y2) / ry;

            var deltaAng = Math.acos(v.dot(u) / v.length() / u.length());
            // This normalization ends up making our curves fail to triangulate...
            if (v.x * u.y - v.y * u.x < 0)
              deltaAng = -deltaAng;
            if (!sf && deltaAng > 0)
              deltaAng -= Math.PI * 2;
            if (sf && deltaAng < 0)
              deltaAng += Math.PI * 2;

            path.absarc(cx, cy, rx, startAng, startAng + deltaAng, sf);
            x = nx;
            y = ny;
            break;
          default:
            throw new Error("weird path command: " + activeCmd);
        }
        if (firstX === null) {
          firstX = x;
          firstY = y;
        }
        // just reissue the command
        if (canRepeat && nextIsNum())
          continue;
        activeCmd = pathStr[idx++];
      }

      return path;
    };

    ar.util.gradientTexture = function (){
      function generateMeterial() {

        var size = 512;

        // create canvas
        var canvas = document.createElement( 'canvas' );
        canvas.width = size;
        canvas.height = size;

        // get context
        var context = canvas.getContext( '2d' );

        // draw gradient
        context.rect( 0, 0, size, size );
        var gradient = context.createLinearGradient( 0, 0, 0, size );
        gradient.addColorStop(0, '#99ddff'); // light blue
        gradient.addColorStop(1, 'transparent'); // dark blue
        context.fillStyle = gradient;
        context.fill();

        var texture = new THREE.Texture( canvas );
        texture.needsUpdate = true;
        var material = new THREE.MeshBasicMaterial( {
          map: texture, transparent: true } );

        return material;
      }

      return generateMeterial();

    };

    ar.util.flatObject = function(param, mold, position,aboveGround){

      var material = ar.util.newFace(mold.face);

      var geometry = new THREE.PlaneGeometry( mold.size.width, mold.size.high, 1, 1 );

      var flat = new THREE.Mesh(geometry, material);

      flat.position.x = position.x;
      flat.position.y = mold.size.high / 2  + aboveGround;
      flat.position.z = position.z;

      var shp = _.extend({}, ar.shape3DClass);
      shp.mesh = flat;
      shp.isFlat = true;
      shp.id = _.uniqueId();
      ar.shape3Ds.push(shp);

      shp.config = param;

      return shp;
    };

    ar.util.buildWall = function(mold, segment){

      function updateLine(segment){
        if (segment.start.x === segment.end.x){
          segment.length = Math.abs(segment.end.z - segment.start.z);
          segment.direct = "Z";
        }
        if (segment.start.z === segment.end.z){
          segment.length = Math.abs(segment.end.x - segment.start.x);
          segment.direct = "X";
        }
        return segment;
      }

      var line = updateLine(segment);

      var sideMaterial = ar.util.newFace(mold.faces.sideFace,line.length);
      var wallMaterial = sideMaterial;
      var topMaterial = ar.util.newFace(mold.faces.topFace, line.length);

      var xlen,ylen,zlen,xm,ym,zm,px,py,pz;

      ylen = mold.size.high;
      py = ylen/2;

      if (line.direct === "X")
      {
        xlen = line.length + mold.size.width - 0.1;
        zlen = mold.size.width;
        zm = wallMaterial;
        ym = topMaterial;
        xm = sideMaterial;
        if (line.start.x < line.end.x)
          px = line.length/ 2 + line.start.x;
        if (line.start.x > line.end.x)
          px = line.start.x - line.length/2;
        pz = line.start.z;
      }

      if (line.direct === "Z")
      {
        zlen = line.length + mold.size.width / 2 - 0.1;
        xlen = mold.size.width;
        xm = wallMaterial;
        zm = sideMaterial;
        ym = topMaterial;
        if (line.start.z > line.end.z)
          pz = line.start.z - line.length / 2;
        if (line.start.z < line.end.z)
          pz = line.length /2 + line.start.z;
        px = line.start.x;
      }

      var wall = new THREE.Mesh(new THREE.CubeGeometry(xlen,ylen,zlen),
        new THREE.MeshFaceMaterial(
          [
            xm, // +x
            xm, // -x
            ym, // +y
            ym, // -y
            zm, // +z
            zm // -z
          ]));

      wall.position.x = px;
      wall.position.y = py;
      wall.position.z = pz;
      wall.castShadow = true;
      wall.receiveShadow = true;
      return wall;
    };

    ar.util.buildWallPart = function(param){
      var mold = ar.util.getMold(param.moldId);

      //var doorMaterial = ar.util.newFace(mold.faces.topFace);
      var frontMaterial = ar.util.newFace(mold.faces.frontFace);
      var backMaterial = ar.util.newFace(mold.faces.backFace);

      var sideMaterial = ar.util.newFace(mold.faces.sideFace);

      var xlen,ylen,zlen,xm1,xm2,ym1,ym2,zm1,zm2,px,py,pz;

      ylen = mold.size.high;
      py = mold.size.high /2 + param.position.y;

      if (param.direct === "X")
      {
        xlen = mold.size.width;
        zlen = mold.size.depth;
        zm1 = frontMaterial;
        zm2 = backMaterial;
        ym1 = sideMaterial;
        ym2 = sideMaterial;
        xm1 = sideMaterial;
        xm2 = sideMaterial;
        px = param.position.x;
        pz = param.position.z;
      }

      if (param.direct === "Z")
      {
        zlen = mold.size.width;
        xlen = mold.size.depth;
        xm1 = frontMaterial;
        xm2 = backMaterial;
        zm1 = sideMaterial;
        zm2 = sideMaterial;
        ym1 = sideMaterial;
        ym2 = sideMaterial;
        pz = param.position.z;
        px = param.position.x;
      }

      var door = new THREE.Mesh(new THREE.CubeGeometry(xlen,ylen,zlen),
        new THREE.MeshFaceMaterial(
          [
            xm1, // +x
            xm2, // -x
            ym1, // +y
            ym2, // -y
            zm1, // +z
            zm2 // -z
          ]));

      door.position.x = px;
      door.position.y = py;
      door.position.z = pz;

      return door;
    };

    ar.util.getMold = function(id){
      var res;
      molds.forEach(function(m){
        if (m.id === id) res = m;
      });

      return res;
    };

    ar.util.radians = function(degrees) {
      return degrees * Math.PI / 180;
    };

    ar.util.newFace = function(cfg, faceSize){

      var param = {};

      if (cfg.texture) {
        param.map = new THREE.TextureLoader().load( cfg.texture );

        if (cfg.tileWay){
          param.map.wrapS = param.map.wrapT = THREE.RepeatWrapping;
          var walltileSize = cfg.textureSize;

          if (cfg.tileWay == "H")
            param.map.repeat.set( faceSize / walltileSize, 1);

          if (cfg.tileWay == "T")
            param.map.repeat.set( faceSize / walltileSize, faceSize / walltileSize);

          if (cfg.tileWay == "V")
            param.map.repeat.set(1, faceSize / walltileSize);
        }
      }

      if (cfg.side) param.side = cfg.side;
      if (cfg.color) param.color = new THREE.Color(cfg.color);

      if (cfg.transparent) param.transparent = cfg.transparent;

      var material = new THREE.MeshPhongMaterial(param);

      if (cfg.opacity) {
        material.opacity = cfg.opacity;
      }
      else{
        material.opacity = 1;
      }
      if (material.opacity !== 1) material.depthWrite = false;

      return material;
    };

    ar.util.maskColor = function(mesh, color){
      if (!mesh) return;
      try {
        if (mesh.material instanceof THREE.MeshPhongMaterial)
        {
          mesh.material.emissive.setHex( color );
          //mesh.material.color.setHex( color );
        }

        if (mesh.material instanceof THREE.MultiMaterial)
        {
          mesh.material.materials.forEach(function(m){
            //m.color.setHex( color );
            m.emissive.setHex( color );
          });
        }        
      }
      catch(err) {
          
      }
    };

    ar.util.getMaskColor = function(mesh){
      if (!mesh) return;
      if (mesh.material instanceof THREE.MeshPhongMaterial)
      {
        return mesh.material.emissive.getHex();
      }

      if (mesh.material instanceof THREE.MultiMaterial)
      {
        return mesh.material.materials[0].emissive.getHex();
      }
    };

    ar.provider = {
      collectBinding : function(){
        var res = [];

        ar.shape3Ds.forEach(function(shp){
            if (shp.config.bindings.length > 0)
            {
              var pack = { id:shp.id, bs:shp.config.bindings};
              res.push(pack);
            }
        });

        return res;
      },
      start : function(){
        if (!ar.options.shell) return;

        var bindingSet = this.collectBinding();

        //http ask for result by interval
        this.stop = ar.options.shell.$interval(function() {
            //get data and refresh shapes status
            ar.options.shell.$srv.getData(bindingSet).then(function(data){
              ar.shape3Ds.forEach(function(shp){
                var status = _.find(data, function(item){
                  return item.id === shp.id;               
                });

                if (status) shp.update(status);
              });              
            });
        }, 5000);
      },
      dispose :function(){
        if (!ar.options.shell) return;
        if (this.stop)
          ar.options.shell.$interval.cancel(this.stop);

        ar.options.shell.$srv = undefined;
        ar.options.shell.$interval = undefined;
        ar.options.shell.$location = undefined;
        this.stop = undefined;
      }
    };
    /////////  create main code here  /////////
    ar.init(id);
    ar.loadUnits();
    if (config)
      ar.load(config);
    else
      ar.load();

    if (options)
      ar.options = _.extend(ar.options, options);

    //start 3D time line
    ar.animate();

    ar.provider.start();
    return ar;
  }
};