jquery.earth-3d.js

/*
  jquery.earth3d.js

  jQuery ui plugin that allow you to draw a beautiful 3d spinning earth on canvas

  Author: Sebastien Drouyer

  Based on the amazing sphere.js plug of Sam Hasler

  Licensed under the MIT license (MIT-LICENSE.txt)

  http://sdrdis.github.com/jquery.earth-3d/



  Depends:
    ui.core.js




  Options:
    * texture: texture map used by the planet

    * sphere: rotation and size of the planet

    * defaultSpeed: default spinning speed of the planet

    * backToDefaultTime: time (in ms) to return by to default speed when planet is dragged

    * locations: locations to display on the planet:
      * Each position must have a key, an alpha and delta position (or x and y if you want to display a static location).
        Any additional key can be reached via callbacks functions
        Example:
          {
            obj1: {
              alpha: Math.PI / 4,
              delta: 0,
              name: 'location 1'
            }
          }

    * paths: paths and flights to display over the planet:
       Each path must have a key, an origin and a destination. The values are the location's key.
       You can, if you want to, define flights on these paths.
       Each flight has a key, a destination (the location's key) and a position.
       The position is the progress a fleet has made on its path.
       Any additional key can be reach via callbacks functions.
       Example:
        {
          path: {
            origin: 'obj1',
            destination: 'obj2',
            flights: {
              flight: {
                position: 0.25,
                destination: 'obj2',
                name: 'Flight 1'
              },
              flight2: {
                position: 0.25,
                destination: 'obj1',
                name: 'Flight 2'
              }
            }
          }
        }

    * flightsCanvas: Dom element which is a canvas and where the flights and paths are drawn

    * dragElement: Dom element where we catch the mouse drag

    * locationsElement: Dom elements where the locations are drawn

    * flightsCanvasPosition: position of the flight canvas (can be use if you have some gap between your planet and your flights

    * pixelRadiusMultiplier: (TEMPORARY) used by the getSphereRadiusInPixel (see the functions)

    * onInitLocation: callback function which allows you to define what to do when the locations are initialized
      * Parameters:
        * location: location (coming from locations option)
        * widget: earth3d widget object

    * onShowLocation: callback function which allows you to define what to do when a location becomes visible (was behind the planet and is now in front of it)
      * Parameters:
        * location: location (coming from locations option)
        * x: 2d left position
        * y: 2d top position
        * widget: earth3d widget object

    * onRefreshLocation: callback function which allows you to define what to do when a location is refreshed (it moves)
      * Parameters:
        * location: location (coming from locations option)
        * x: 2d left position
        * y: 2d top position
        * widget: earth3d widget object

    * onHideLocation: callback function which allows you to define what to do when a location becomes invisible (was in front of the planet and is now behind it)
      * Parameters:
        * location: location (coming from locations option)
        * x: 2d left position
        * y: 2d top position
        * widget: earth3d widget object

    * onInitFlight: callback function which allows you to define what to do when the flights are initialized
      * Parameters:
        * flight: flight (coming from flights option)
        * widget: earth3d widget object

    * onShowFlight: callback function which allows you to define what to do when a flight becomes visible (was behind the planet and is now in front of it)
      * Parameters:
        * flight: flight (coming from flights option)
        * widget: earth3d widget object

    * onRefreshFlight: callback function which allows you to define what to do when a flight is refreshed (it moves)
      * Parameters:
        * flight: flight (coming from flights option)
        * x: 2d left position
        * y: 2d top position
        * widget: earth3d widget object

    * onHideFlight: callback function which allows you to define what to do when a flight becomes invisible (was in front of the planet and is now behind it)
      * Parameters:
        * flight: flight (coming from flights option)
        * widget: earth3d widget object






  Functions

    * getSphereRadiusInPixel: function which allows you to get the sphere radius in pixel
      /!| WARNING: this function needs to be refactored, since I didn't find out (my maths courses are far away) how to
      get the exact value. I did a basic linear regression, but it is not exact, and you will have to change the pixelRadiusMultiplier
      option to get the correct value

    * destroy: use this function when you want to destroy the object. It will throw a cancel animation frame, so the
      CPU won't be used anymore.

    * changePaths: use this function when you want to update paths and flights (options on widget)
      it will add the callback functions support

 */
var earth3d;
(function($) {
  $.widget('ui.earth3d', {
    options: {
      texture: 'images/earth1024x1024.jpg',
      sphere: {
        tilt: 0,
        turn: 0,
        r: 10
      },
      defaultSpeed: 20,
      backToDefaultTime: 4000,
      locations: {
      },
      paths: {
      },
      flightsCanvas: null,
      dragElement: null,
      locationsElement: null,
      flightsCanvasPosition: {
        x: 0,
        y: 0
      },
      tiling: {horizontal: 1, vertical: 1},
      pixelRadiusMultiplier: 0.97,
      onInitLocation: function(location, widget) {
        var $elem = $('<div class="location"></div>');
        $elem.appendTo(widget.options.locationsElement);
        $elem.click(function() {
            alert('Clicked on ' + location.name);
        });
        location.$element = $elem;
      },
      onShowLocation: function(location, x, y) {
        location.$element.show();
      },
      onRefreshLocation: function(location, x, y) {
        //console.log(x, y);
        location.$element.css({
          left: x,
          top: y
        });
      },
      onHideLocation: function(location, x, y) {
        location.$element.hide();
      },
      onDeleteLocation: function(location) {
        location.$element.remove();
      },
      onInitFlight: function(flight, widget) {
        var $elem = $('<div class="flight"></div>');
        $elem.appendTo(widget.options.locationsElement);
        $elem.click(function() {
          alert('Clicked on ' + flight.name);
        });
        flight.$element = $elem;
      },
      onShowFlight: function(flight) {
        flight.$element.show();
      },
      onRefreshFlight: function(flight, x, y, angle, widget) {
        flight.$element.css({
          left: x,
          top: y,
          '-webkit-transform':'rotate(' + ((angle + Math.PI / 2) * 360 / (2 * Math.PI)) + 'deg)',
          '-moz-transform':'rotate(' + ((angle + Math.PI / 2) * 360 / (2 * Math.PI)) + 'deg)',
          '-o-transform':'rotate(' + ((angle + Math.PI / 2) * 360 / (2 * Math.PI)) + 'deg)'
        });
      },
      onHideFlight: function(flight) {
        flight.$element.hide();
      },
      onDeleteFlight: function(flight) {
        flight.$element.remove();
      }
    },
    earth: null,
    posVar: 24 * 3600 * 1000,
    lastMousePos: null,
    lastSpeed: null,
    lastTime: null,
    lastTurnByTime: null,
    textureWidth: null,
    textureHeight: null,
    obj: null,
    flightsCtx: null,
    renderAnimationFrameId: null,
    mousePressed: null,

    _create: function() {
      earth3d = this;
      var self = this;
      this.obj = $('div');
      if (this.options.flightsCanvas !== null) {
        this.flightsCtx = this.options.flightsCanvas[0].getContext('2d');
      }
      createSphere(this.element[0], this.options.texture, function(earth, textureWidth, textureHeight) { self._onSphereCreated(earth, textureWidth, textureHeight); }, this.options.tiling);
      if (this.options.dragElement !== null) {
      this.options.dragElement
        .bind('mousedown vmousedown', function(e) {
          self._mouseDragStart(e);
          self.mousePressed = true;
        })
        .bind('mouseup vmouseup', function(e) {
          self._mouseDragStop(e);
          self.mousePressed = false;
        })
        .bind('mousemove vmousemove', function(e){
          if (self.mousePressed) {
            self._mouseDrag(e);
          }
        });
      }
      this._initLocations();
      this._initFlights();
    },

    _initLocations: function() {
      for (var key in this.options.locations) {
        var location = this.options.locations[key];
        location.visible = true;
        this.options.onInitLocation(location, this);
      }
    },

    _initFlights: function() {
      for (var key in this.options.paths) {
        var path = this.options.paths[key];
        for (var key in path.flights) {
          path.flights[key].visible = true;
          this.options.onInitFlight(path.flights[key], this);
        }
      }
    },

    getSphereRadiusInPixel: function() {
      return this.earth.getRadius() / 2;
    },

    _onSphereCreated: function(earth, textureWidth, textureHeight) {
      var self = this;
      this.textureWidth = textureWidth;
      this.textureHeight = textureHeight;
      this.earth = earth;
      this.earth.init(this.options.sphere);
      this.earth.turnBy = function(time) { return self._turnBy(time); };

      var renderAnimationFrame = function(/* time */ time) {
        /* time ~= +new Date // the unix time */
        earth.renderFrame(time);
        self._renderAnimationFrame(time);
        self.renderAnimationFrameId = window.requestAnimationFrame(renderAnimationFrame);
      };
      this.renderAnimationFrameId = window.requestAnimationFrame(renderAnimationFrame);
    },

    destroy: function() {
      window.cancelAnimationFrame(this.renderAnimationFrameId);
    },

    _renderAnimationFrame: function(time) {


      var ry=90+this.options.sphere.tilt;
      var rz=180+this.options.sphere.turn;

      var RY = (90-ry);
      var RZ = (180-rz);
      var RX = 0,RY,RZ;

      var rx=RX*Math.PI/180;
      var ry=RY*Math.PI/180;
      var rz=RZ*Math.PI/180;
      //console.log(rx, ry, rz);
      var r = this.getSphereRadiusInPixel();

      var center = {
        x: this.element.width() / 2,
        y: this.element.height() / 2
      }

      for (var key in this.options.locations) {
        var location = this.options.locations[key];

        if (typeof location.delta === 'undefined') {
          location.flatPosition = {x: location.x, y: location.y};
          this.options.onRefreshLocation(location, location.x, location.y, this);
          continue;
        }

        /*
          WARNING: calculation of alphaAngle and deltaAngle is not exact
          I had to create the _calibrated functions to modify the deltaAngle to make the result look good on
          a spinning planet without rotation. It will totally bug with rotation!
        * */
        var progression = (((this.posVar + this.textureWidth * location.delta / (2 * Math.PI)) % this.textureWidth) / this.textureWidth);
        var alphaAngle = progression * 2 * Math.PI;
        var deltaAngle = this._calibrated(progression, location.alpha) * 2 * Math.PI;


        var objAlpha = ry + location.alpha - Math.sin(alphaAngle / 2) * 0.15 * (location.alpha - Math.PI / 2) / (Math.PI / 4);
        var objDelta = rz + deltaAngle;

        var a = this._orbitalTo3d(objAlpha, objDelta, r);

        var flatPosition = this._orthographicProjection(a);

        if (a.x < 0 && !location.visible) {
          this.options.onShowLocation(location, flatPosition.x, flatPosition.y, this);
        }
        if (a.x > 0 && location.visible) {
          this.options.onHideLocation(location, flatPosition.x, flatPosition.y, this);
        }
        this.options.onRefreshLocation(location, flatPosition.x, flatPosition.y, this);

        location.visible = a.x < 0;
        location.position = a;
        location.flatPosition = flatPosition;
        location.rAlpha = objAlpha;
        location.rDelta = objDelta;

      }

      if (this.flightsCtx !== null) {
        this.flightsCtx.clearRect(0, 0, this.options.flightsCanvas.width(), this.options.flightsCanvas.height());
        for (var key in this.options.paths) {
          this._drawPath(this.options.paths[key], center, r);
        }
      }
    },



    _line_circle_intersection: function(A, B, C, r) {
      var d = {
        x: B.x - A.x,
        y: B.y - A.y
      };

      var f = {
        x: A.x - C.x,
        y: A.y - C.y
      };

      var a = this._dot(d, d);
      var b = 2 * this._dot(f, d);
      var c = this._dot(f, f) - r * r;

      var discriminant = b * b - 4 * a * c;
      if (discriminant < 0) {
        return false;
      } else {
        discriminant = Math.sqrt(discriminant);
        var t1 = (-b + discriminant) / (2 * a);
        var t2 = (-b - discriminant) / (2 * a);


        var sols = [];

        if (t1 >= 0 && t1 <= 1) {
          sols.push({
            x:A.x + t1 * d.x,
            y:A.y + t1 * d.y
          });
        }

        if (t2 >= 0 && t2 <= 1) {
          sols.push({
            x:A.x + t2 * d.x,
            y:A.y + t2 * d.y
          });
        }

        return sols;
      }
    },

    _dot: function(A, B) {
      return A.x * B.x + A.y * B.y;
    },

    _drawPath: function(path, center, r) {


      var originLocation = this.options.locations[path.origin];
      var destinationLocation = this.options.locations[path.destination];

      var dotSize = 50;
      var spacing = 0.15;

      if (typeof originLocation.delta === 'undefined' || typeof destinationLocation.delta === 'undefined') {
        var pathVisible = originLocation.visible && destinationLocation.visible;
        if (pathVisible) {


          var flatDistance = this._distance(originLocation.flatPosition, destinationLocation.flatPosition);

          var nb = flatDistance * 0.9 / 20;
          // WARNING: we are drawing the paths on canvas, intensively using CPU. Could we gain by instead using SVG or the DOM ?
          for (var i = 0; i < nb; i++) {


            var fromFlatPosition = {
              x: ((nb - i) / nb) * originLocation.flatPosition.x + (i / nb) * destinationLocation.flatPosition.x,
              y: ((nb - i) / nb) * originLocation.flatPosition.y + (i / nb) * destinationLocation.flatPosition.y
            };

            var toFlatPosition = {
              x: Math.max(((nb - (i + 1)) / nb), 0) * originLocation.flatPosition.x + Math.min(((i + 1) / nb), 1) * destinationLocation.flatPosition.x,
              y: Math.max(((nb - (i + 1)) / nb), 0) * originLocation.flatPosition.y + Math.min(((i + 1) / nb), 1) * destinationLocation.flatPosition.y
            };

            var diff = {
              x: fromFlatPosition.x - toFlatPosition.x,
              y: fromFlatPosition.y - toFlatPosition.y,
              z: fromFlatPosition.z - toFlatPosition.z
            };

            fromFlatPosition.x -= diff.x * spacing;
            fromFlatPosition.y -= diff.y * spacing;
            fromFlatPosition.z -= diff.z * spacing;
            toFlatPosition.x += diff.x * spacing;
            toFlatPosition.y += diff.y * spacing;
            toFlatPosition.z += diff.z * spacing;


            this.flightsCtx.lineWidth = 3;
            this.flightsCtx.beginPath();
            this.flightsCtx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
            this.flightsCtx.moveTo(fromFlatPosition.x + this.options.flightsCanvasPosition.x, fromFlatPosition.y + this.options.flightsCanvasPosition.y);
            this.flightsCtx.lineTo(toFlatPosition.x + this.options.flightsCanvasPosition.x, toFlatPosition.y + this.options.flightsCanvasPosition.y);
            this.flightsCtx.stroke();

          }

        }



        for (var key in path.flights) {
          var flight = path.flights[key];

          var position = flight.destination == path.destination ? flight.position : (1 - flight.position);


          var flightFlatPosition = {
            x: (1 - position) * originLocation.flatPosition.x + position * destinationLocation.flatPosition.x,
            y: (1 - position) * originLocation.flatPosition.y + position * destinationLocation.flatPosition.y
          };

          if (!flight.visible && pathVisible) {
            this.options.onShowFlight(flight, this);
            flight.visible = true;
          }

          if (flight.visible && !pathVisible) {
            this.options.onHideFlight(flight, this);
            flight.visible = false;
          }

          var angle = Math.atan2(destinationLocation.flatPosition.y - originLocation.flatPosition.y, destinationLocation.flatPosition.x - originLocation.flatPosition.x) + (flight.destination == path.destination ? 0 : Math.PI);
          //console.log(flightAheadFlatPosition.y - flightFlatPosition.y);

          this.options.onRefreshFlight(flight, flightFlatPosition.x, flightFlatPosition.y, angle, this);
        }


        return;
      }

      var locationsDistance = this._distance(originLocation.position, destinationLocation.position);


      var middlePosition = {
        x: 0,
        y: 0,
        z: 0
      };


      var radius = this._distance(originLocation.position, middlePosition);

      var originP = {
        delta: Math.atan2((originLocation.position.y - middlePosition.y), (originLocation.position.x - middlePosition.x)),
        alpha: Math.acos((originLocation.position.z - middlePosition.z) / radius)
      };

      var destinationP = {
        delta: Math.atan2((destinationLocation.position.y - middlePosition.y), (destinationLocation.position.x - middlePosition.x)),
        alpha: Math.acos((destinationLocation.position.z - middlePosition.z) / radius)
      };



      if (Math.abs(originP.delta - destinationP.delta) > Math.PI) {
        if ((originP.delta - destinationP.delta) > Math.PI) {
          originP.delta -= 2 * Math.PI;
        } else {
          originP.delta += 2 * Math.PI;
        }
      }

      if (path.sens) {
        if (((originP.delta - destinationP.delta) > 0 ? 1 : -1) != path.sens) {
          if (Math.abs(originP.delta - destinationP.delta) > Math.PI / 2) {
            originP.delta += path.sens * 2 * Math.PI;
          }
        }
      } else {
        path.sens = (originP.delta - destinationP.delta) > 0 ? 1 : -1;
      }


      if (!path.nb) {
        path.nb = Math.round(((locationsDistance / (2 * r)) * Math.PI * 2 * r + (1 - (locationsDistance / (2 * r))) * locationsDistance) / dotSize);
      }
      var nb = path.nb;
      var maxDistance = 1.2;
      for (var i = 0; i < nb; i++) {
        var fromP = {
          alpha: ((nb - i) / nb) * originP.alpha + (i / nb) * destinationP.alpha,
          delta: ((nb - i) / nb) * originP.delta + (i / nb) * destinationP.delta
        };

        var toP = {
          alpha: ((nb - 1 - i) / nb) * originP.alpha + ((i + 1) / nb) * destinationP.alpha,
          delta: ((nb - 1 - i) / nb) * originP.delta + ((i + 1) / nb) * destinationP.delta
        };
        //console.log(i, fromP.alpha, fromP.delta, toP.alpha, toP.delta);

        var fromPosition = this._orbitalTo3d(fromP.alpha, fromP.delta, -(Math.sin(Math.PI * i / nb) * (maxDistance - 1) + 1) * radius);
        var toPosition = this._orbitalTo3d(toP.alpha, toP.delta, -(Math.sin(Math.PI * (i + 1) / nb) * (maxDistance - 1) + 1) * radius);
        var diff = {
          x: fromPosition.x - toPosition.x,
          y: fromPosition.y - toPosition.y,
          z: fromPosition.z - toPosition.z
        };



        fromPosition.x -= diff.x * spacing;
        fromPosition.y -= diff.y * spacing;
        fromPosition.z -= diff.z * spacing;
        toPosition.x += diff.x * spacing;
        toPosition.y += diff.y * spacing;
        toPosition.z += diff.z * spacing;


        fromPosition.x += middlePosition.x;
        fromPosition.y += middlePosition.y;
        fromPosition.z += middlePosition.z;
        toPosition.x += middlePosition.x;
        toPosition.y += middlePosition.y;
        toPosition.z += middlePosition.z;



        var fromFlatPosition = this._orthographicProjection(fromPosition);
        var toFlatPosition = this._orthographicProjection(toPosition);

        var fromDistanceCenter = this._distance(fromFlatPosition, center);
        var toDistanceCenter = this._distance(toFlatPosition, center);

        var fromVisible = true;
        var toVisible = true;
        if (fromPosition.x > 0) {
          if (fromDistanceCenter <= r) {
            fromVisible = false;
          }
        }

        if (toPosition.x > 0) {
          if (toDistanceCenter <= r) {
            toVisible = false;
          }
        }

        //console.log(i, fromVisible, toVisible);

        if (!fromVisible && !toVisible) {
          continue;
        }

        if (!fromVisible) {
          var intersection = this._line_circle_intersection(fromFlatPosition, toFlatPosition, center, r);
          if (intersection.length == 0) {
            continue;
          }
          fromFlatPosition = intersection[0];
        }

        if (!toVisible) {
          var intersection = this._line_circle_intersection(fromFlatPosition, toFlatPosition, center, r);
          if (intersection.length == 0) {
            continue;
          }
          toFlatPosition = intersection[0];
        }



        this.flightsCtx.lineWidth = 3;
        this.flightsCtx.beginPath();
        this.flightsCtx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
        this.flightsCtx.moveTo(fromFlatPosition.x + this.options.flightsCanvasPosition.x, fromFlatPosition.y + this.options.flightsCanvasPosition.y);
        this.flightsCtx.lineTo(toFlatPosition.x + this.options.flightsCanvasPosition.x, toFlatPosition.y + this.options.flightsCanvasPosition.y);
        this.flightsCtx.stroke();

      }

      for (var key in path.flights) {
        var flight = path.flights[key];

        var position = flight.destination == path.destination ? flight.position : (1 - flight.position);
        var positionAhead = flight.destination == path.destination ? (flight.position + 0.01) : (1 - (flight.position + 0.01));

        var flightP = {
          alpha: (1 - position) * originP.alpha + position * destinationP.alpha,
          delta: (1 - position) * originP.delta + position * destinationP.delta
        };

        var flightAheadP = {
          alpha: (1 - positionAhead) * originP.alpha + positionAhead * destinationP.alpha,
          delta: (1 - positionAhead) * originP.delta + positionAhead * destinationP.delta
        };

        var flightPosition = this._orbitalTo3d(flightP.alpha, flightP.delta, -(Math.sin(Math.PI * position) * (maxDistance - 1) + 1) * radius);
        var flightAheadPosition = this._orbitalTo3d(flightAheadP.alpha, flightAheadP.delta, -(Math.sin(Math.PI * positionAhead) * (maxDistance - 1) + 1) * radius);

        flightPosition.x += middlePosition.x;
        flightPosition.y += middlePosition.y;
        flightPosition.z += middlePosition.z;
        flightAheadPosition.x += middlePosition.x;
        flightAheadPosition.y += middlePosition.y;
        flightAheadPosition.z += middlePosition.z;

        var flightFlatPosition = this._orthographicProjection(flightPosition);
        var flightAheadFlatPosition = this._orthographicProjection(flightAheadPosition);

        var flightDistanceCenter = this._distance(flightFlatPosition, center);

        if (!flight.visible && (flightPosition.x < 0 || flightDistanceCenter > r)) {
          this.options.onShowFlight(flight, this);
          flight.visible = true;
        }

        if (flight.visible && (flightPosition.x > 0 && flightDistanceCenter < r)) {
          this.options.onHideFlight(flight, this);
          flight.visible = false;
        }

        var angle = Math.atan2(flightAheadFlatPosition.y - flightFlatPosition.y, flightAheadFlatPosition.x - flightFlatPosition.x);
        //console.log(flightAheadFlatPosition.y - flightFlatPosition.y);

        this.options.onRefreshFlight(flight, flightFlatPosition.x, flightFlatPosition.y, angle, this);
      }

    },

    _distance: function(A, B) {
      if (A.z) {
        return Math.sqrt(
          (A.x - B.x) * (A.x - B.x) +
            (A.y - B.y) * (A.y - B.y) +
            (A.z - B.z) * (A.z - B.z)
        );
      } else {
        return Math.sqrt(
          (A.x - B.x) * (A.x - B.x) +
            (A.y - B.y) * (A.y - B.y)
        );
      }
    },

    // WARNING: temporary function to make the locations look good on a spinning planet without rotation
    _calibrated: function(x, alpha) {
      var calib = 0.3 + 0.15 * Math.abs(alpha - Math.PI / 2) / (Math.PI / 4);
      //console.log(calib);
      var y = calib * (4 * (x - 0.5) * (x - 0.5) * (x - 0.5) + 0.5) + (1 - calib) * x;
      return y;
    },


    /* WARNING:
      Obviously there is something wrong with _orbitalTo3d and _orthographicProjection, since
      I can't get a descent display of locations when the planet is rotated. That's why I had to create the _calibrated
      function in the first place. I didn't have time to look precisely into it, and I probably don't know enough math.

      I leaved the _3dProjection function I found on wikipedia but is not working. (I might not have correctly understood / write it)
     */
    _orbitalTo3d: function(alpha, delta, r) {
      return {
        x: -r * Math.sin(alpha) * Math.cos(delta),
        y: -r * Math.sin(alpha) * Math.sin(delta),
        z: -r * Math.cos(alpha)
      };
    },

    _orthographicProjection: function(position) {
      return {x: position.y + this.element.width() / 2, y: position.z + this.element.height() / 2};
    },

    _3dProjection: function(a, c, delta, e) {
      // Wikipedia is your friend :) : http://en.wikipedia.org/wiki/3D_projection
      var d = {x: 0, y: 0, z: 0};
      d.x = Math.cos(delta.y) * (Math.sin(delta.z) * (a.y - c.y) + Math.cos(delta.z) * (a.x - c.x)) - Math.sin(delta.y) * (a.z - c.z);
      d.y = Math.sin(delta.x) * (Math.cos(delta.y) * (a.z - c.z) + Math.sin(delta.y) * (Math.sin(delta.z) * (a.y - c.y) + Math.cos(delta.z) * (a.x - c.x)))
        + Math.cos(delta.x) * (Math.cos(delta.z) * (a.y - c.y) - Math.sin(delta.z) * (a.x - c.x))
      d.z = Math.cos(delta.x) * (Math.cos(delta.y) * (a.z - c.z) + Math.sin(delta.y) * (Math.sin(delta.z) * (a.y - c.y) + Math.cos(delta.z) * (a.x - c.x)))
        - Math.sin(delta.x) * (Math.cos(delta.z) * (a.y - c.y) - Math.sin(delta.z) * (a.x - c.x));

      return {
        x: d.z, //(d.x - e.x) * (e.y / d.y),
        y: d.y //(d.z - e.z) * (e.y / d.y)
      };
    },

    _mouseDragStart: function(e) {
      this.lastMousePos = e.clientX;
      this.lastSpeed = null;
    },

    _mouseDrag: function(e) {
      this.lastSpeed = (e.clientX - this.lastMousePos);
      this.posVar = this.posVar - this.lastSpeed;
      this.lastMousePos = e.clientX;
    },
    _mouseDragStop: function(e) {
      this.lastMousePos = null;
      this.lastTime = null;
    },

    _turnBy: function(time) {
      if (this.lastTurnByTime === null) {
        this.lastTurnByTime = time;
      }
      var timeDiff = (time - this.lastTurnByTime) / 1000;
      if (this.lastMousePos === null) {
        if (this.lastSpeed !== null) {
          if (this.lastTime === null) {
            this.lastTime = time;
          }
          if (this.options.backToDefaultTime + this.lastTime - time < 0) {
            this.lastSpeed = null;
          } else {
            var backToDef = (this.options.backToDefaultTime + this.lastTime - time) / this.options.backToDefaultTime;
            this.posVar -= this.lastSpeed * backToDef + (this.options.defaultSpeed * timeDiff) * (1 - backToDef);
          }
        } else {
          this.posVar -= this.options.defaultSpeed * timeDiff;
        }
      }
      this.lastTurnByTime = time;
      return this.posVar;
    },

    _getQBezierValue: function (t, p1, p2, p3) {
      var iT = 1 - t;
      return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;
    },

    _getQBezierDerivation: function(t, p1, p2, p3) {
      return (2 * p1 - 4 * p2 + 2 * p3) * t + 2 * p2 - 2 * p1;
    },

    _getQBezierAngle: function(startX, startY, cpX, cpY, endX, endY, position) {
      var x = this._getQBezierDerivation(position, startX, cpX, endX);
      var y = this._getQBezierDerivation(position, startY, cpY, endY);
      return Math.atan2(y, x);
    },

    _getQuadraticCurvePoint: function(startX, startY, cpX, cpY, endX, endY, position) {
      return {
        x:  this._getQBezierValue(position, startX, cpX, endX),
        y:  this._getQBezierValue(position, startY, cpY, endY),
        angle: this._getQBezierAngle(startX, startY, cpX, cpY, endX, endY, position)
      };
    },

    changeLocations: function(locations) {
      for (var key in this.options.locations) {
        this.options.onDeleteLocation(this.options.locations[key], this);
      }
      this.options.locations = locations;
      this._initLocations();
    },

    changePaths: function(paths) {
      for (var key in this.options.paths) {
        var path = this.options.paths[key];
        for (var keyFlight in path.flights) {
          var flight = path.flights[keyFlight];
          this.options.onDeleteFlight(flight, this);
        }
      }
      this.options.paths = paths;
      this._initFlights();
    }

  });

})($);