/*global document*/
'use strict';

var fs = require('fs');
var hyperglue = require('hyperglue');
var locationTracker = require('./location-tracker');
var animate = require('./animate');
var color = require('./color');
var message = require('./message');

var html = fs.readFileSync(__dirname + '/screen-navigate.html', 'utf8');


exports.create = function (parent, shape, opts, next) {
  var doc = hyperglue(html, {});
  if (opts.compass === false) {
    doc.querySelector('.compass').style.display = 'none';
  }
  if (opts.distance === false) {
    doc.querySelector('.distance').style.display = 'none';
    doc.querySelector('.accuracy').style.display = 'none';
  }
  parent.appendChild(doc);

  var sx = shape.center.latitude;
  var sy = shape.center.longitude;
  var mx, my, deg;
  var lastPos;
  var visible = false;
  var animating = false;
  var arrow = doc.querySelector('.arrow');

  function updateArrow() {
    // http://www.movable-type.co.uk/scripts/latlong.html
    mx = lastPos.latitude;
    my = lastPos.longitude;
    var wy = sy - my;
    var x = Math.cos(mx) * Math.sin(sx)
      - Math.sin(mx) * Math.cos(sx) * Math.cos(wy);
    var y = Math.sin(wy) * Math.cos(sx);
    var d = Math.atan2(x, y) * 180 / Math.PI;
    var transform = 'rotate(' + Math.round(d - deg + 180) + 'deg)';
    arrow.style.transform = transform;
    arrow.style.webkitTransform = transform;
    if (!visible) {
      visible = true;
      animating = true;
      arrow.style.visibility = 'visible';
      animate(arrow, 'zoomIn', function () {
        animating = false;
        updateArrow();
      });
    }
  }

  var tracker = locationTracker.create();
  var makeColor = opts.colorSteps ? color(opts.colorSteps) : null;

  function updatePosition() {
    var distance = shape.distance(lastPos);
    if (opts.distance !== false) {
      hyperglue(doc, {
        '.distance': distance + ' m',
        '.accuracy': Math.round(lastPos.accuracy) + ' m'
      });
    }
    if (deg !== undefined) {
      updateArrow();
    }
    if (makeColor) {
      document.documentElement.style.backgroundColor = makeColor(distance);
    }
    if (shape.within(lastPos)) {
      tracker.destroy();
      next();
    }
  }

  var msg;

  tracker.on('position', function (pos) {
    lastPos = pos;
    if (animating) {
      return;
    }
    if (pos.accuracy > 20) {
      if (!msg) {
        visible = false;
        arrow.style.visibility = 'hidden';
        document.documentElement.style.backgroundColor = 'transparent';
        animating = true;
        msg = message.create(doc, 'Signal', function () {
          animating = false;
        });
      }
      return;
    }
    if (msg) {
      animating = true;
      msg.destroy(function () {
        animating = false;
        msg = null;
        updatePosition();
      });
    } else {
      updatePosition();
    }
  });

  if (opts.compass !== false) {
    tracker.on('heading', function (heading) {
      if (!heading) {
        return;
      }
      deg = heading;
      if (lastPos && !msg && !animating) {
        updateArrow();
      }
    });
  }
};

@@ -322,16 +322,129 @@
 tf8');%0A%0A
+var POSITION_ERRORS = %7B%0A  '1': 'Permission Denied',%0A  '2': 'Position Unavailable',%0A  '3': 'Position Timeout'%0A%7D;%0A%0A
 %0Aexports
@@ -498,19 +498,22 @@
 %7B%0A  var 
-doc
+screen
  = hyper
@@ -556,35 +556,38 @@
 == false) %7B%0A    
-doc
+screen
 .querySelector('
@@ -658,27 +658,30 @@
 alse) %7B%0A    
-doc
+screen
 .querySelect
@@ -724,19 +724,22 @@
 e';%0A    
-doc
+screen
 .querySe
@@ -807,19 +807,22 @@
 ndChild(
-doc
+screen
 );%0A%0A  va
@@ -982,19 +982,22 @@
 arrow = 
-doc
+screen
 .querySe
@@ -1967,19 +1967,22 @@
 perglue(
-doc
+screen
 , %7B%0A    
@@ -2314,14 +2314,61 @@
     
+ animate(screen, 'flash', %7B iterationCount: 3 %7D,
  next
-(
 );%0A 
@@ -2395,159 +2395,37 @@
 %0A%0A  
-tracker.on('position', function (pos) %7B%0A    lastPos = pos;%0A    if (animating) %7B%0A      return;%0A    %7D%0A    if (pos.accuracy %3E 20) %7B%0A      if (!msg
+function showMessage(text
 ) %7B%0A
-    
     
@@ -2437,28 +2437,24 @@
 le = false;%0A
-    
     arrow.st
@@ -2484,20 +2484,16 @@
 n';%0A    
-  
-  
 document
@@ -2548,20 +2548,16 @@
 arent';%0A
-    
     anim
@@ -2570,20 +2570,16 @@
 = true;%0A
-    
     msg 
@@ -2599,20 +2599,93 @@
 ate(
-doc, 'Signal
+screen, text, function () %7B%0A      animating = false;%0A    %7D);%0A  %7D%0A%0A  tracker.on('error
 ', f
@@ -2689,32 +2689,35 @@
 , function (
+err
 ) %7B%0A    
       animat
@@ -2708,42 +2708,400 @@
     
-      animating = false;%0A        %7D
+var text = POSITION_ERRORS%5Berr.code%5D %7C%7C 'Position Error';%0A    animating = true;%0A    if (msg) %7B%0A      msg.destroy(function () %7B%0A        showMessage(text);%0A      %7D);%0A    %7D else %7B%0A      showMessage(text);%0A    %7D%0A  %7D);%0A%0A  tracker.on('position', function (pos) %7B%0A    lastPos = pos;%0A    if (animating) %7B%0A      return;%0A    %7D%0A    if (pos.accuracy %3E 20) %7B%0A      if (!msg) %7B%0A        showMessage('Signal'
 );%0A 

Handle geo location errors