/*
* Snap.svg Display Ad
* Built using Snap.svg (snapsvg.io) @Snapsvg
* Design by Yohei Shimomae @yoheis 
* & CJ Gammon @cjgammon
*/

/**
 * Defines the Flat Surface Shader namespace.
 * @author Matthew Wagerfield
 */
FSS = {
  FRONT  : 0,
  BACK   : 1,
  DOUBLE : 2,
  SVGNS  : 'http://www.w3.org/2000/svg'
};

/**
 * @class Array
 * @author Matthew Wagerfield
 */
FSS.Array = typeof Float32Array === 'function' ? Float32Array : Array;

/**
 * @class Utils
 * @author Matthew Wagerfield
 */
FSS.Utils = {
  isNumber: function(value) {
    return !isNaN(parseFloat(value)) && isFinite(value);
  }
};

/**
 * Request Animation Frame Polyfill.
 * @author Paul Irish
 * @see https://gist.github.com/paulirish/1579671
 */
(function() {

  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];

  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame  = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function(callback, element) {
      var currentTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currentTime - lastTime));
      var id = window.setTimeout(function() {
        callback(currentTime + timeToCall);
      }, timeToCall);
      lastTime = currentTime + timeToCall;
      return id;
    };
  }

  if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
  }

}());

/**
 * @object Math Augmentation
 * @author Matthew Wagerfield
 */
Math.PIM2 = Math.PI*2;
Math.PID2 = Math.PI/2;
Math.randomInRange = function(min, max) {
  return min + (max - min) * Math.random();
};
Math.clamp = function(value, min, max) {
  value = Math.max(value, min);
  value = Math.min(value, max);
  return value;
};

/**
 * @object Vector3
 * @author Matthew Wagerfield
 */
FSS.Vector3 = {
  create: function(x, y, z) {
    var vector = new FSS.Array(3);
    this.set(vector, x, y, z);
    return vector;
  },
  clone: function(a) {
    var vector = this.create();
    this.copy(vector, a);
    return vector;
  },
  set: function(target, x, y, z) {
    target[0] = x || 0;
    target[1] = y || 0;
    target[2] = z || 0;
    return this;
  },
  setX: function(target, x) {
    target[0] = x || 0;
    return this;
  },
  setY: function(target, y) {
    target[1] = y || 0;
    return this;
  },
  setZ: function(target, z) {
    target[2] = z || 0;
    return this;
  },
  copy: function(target, a) {
    target[0] = a[0];
    target[1] = a[1];
    target[2] = a[2];
    return this;
  },
  add: function(target, a) {
    target[0] += a[0];
    target[1] += a[1];
    target[2] += a[2];
    return this;
  },
  addVectors: function(target, a, b) {
    target[0] = a[0] + b[0];
    target[1] = a[1] + b[1];
    target[2] = a[2] + b[2];
    return this;
  },
  addScalar: function(target, s) {
    target[0] += s;
    target[1] += s;
    target[2] += s;
    return this;
  },
  subtract: function(target, a) {
    target[0] -= a[0];
    target[1] -= a[1];
    target[2] -= a[2];
    return this;
  },
  subtractVectors: function(target, a, b) {
    target[0] = a[0] - b[0];
    target[1] = a[1] - b[1];
    target[2] = a[2] - b[2];
    return this;
  },
  subtractScalar: function(target, s) {
    target[0] -= s;
    target[1] -= s;
    target[2] -= s;
    return this;
  },
  multiply: function(target, a) {
    target[0] *= a[0];
    target[1] *= a[1];
    target[2] *= a[2];
    return this;
  },
  multiplyVectors: function(target, a, b) {
    target[0] = a[0] * b[0];
    target[1] = a[1] * b[1];
    target[2] = a[2] * b[2];
    return this;
  },
  multiplyScalar: function(target, s) {
    target[0] *= s;
    target[1] *= s;
    target[2] *= s;
    return this;
  },
  divide: function(target, a) {
    target[0] /= a[0];
    target[1] /= a[1];
    target[2] /= a[2];
    return this;
  },
  divideVectors: function(target, a, b) {
    target[0] = a[0] / b[0];
    target[1] = a[1] / b[1];
    target[2] = a[2] / b[2];
    return this;
  },
  divideScalar: function(target, s) {
    if (s !== 0) {
      target[0] /= s;
      target[1] /= s;
      target[2] /= s;
    } else {
      target[0] = 0;
      target[1] = 0;
      target[2] = 0;
    }
    return this;
  },
  cross: function(target, a) {
    var x = target[0];
    var y = target[1];
    var z = target[2];
    target[0] = y*a[2] - z*a[1];
    target[1] = z*a[0] - x*a[2];
    target[2] = x*a[1] - y*a[0];
    return this;
  },
  crossVectors: function(target, a, b) {
    target[0] = a[1]*b[2] - a[2]*b[1];
    target[1] = a[2]*b[0] - a[0]*b[2];
    target[2] = a[0]*b[1] - a[1]*b[0];
    return this;
  },
  min: function(target, value) {
    if (target[0] < value) { target[0] = value; }
    if (target[1] < value) { target[1] = value; }
    if (target[2] < value) { target[2] = value; }
    return this;
  },
  max: function(target, value) {
    if (target[0] > value) { target[0] = value; }
    if (target[1] > value) { target[1] = value; }
    if (target[2] > value) { target[2] = value; }
    return this;
  },
  clamp: function(target, min, max) {
    this.min(target, min);
    this.max(target, max);
    return this;
  },
  limit: function(target, min, max) {
    var length = this.length(target);
    if (min !== null && length < min) {
      this.setLength(target, min);
    } else if (max !== null && length > max) {
      this.setLength(target, max);
    }
    return this;
  },
  dot: function(a, b) {
    return a[0]*b[0] + a[1]*b[1] + a[2]*b[2];
  },
  normalise: function(target) {
    return this.divideScalar(target, this.length(target));
  },
  negate: function(target) {
    return this.multiplyScalar(target, -1);
  },
  distanceSquared: function(a, b) {
    var dx = a[0] - b[0];
    var dy = a[1] - b[1];
    var dz = a[2] - b[2];
    return dx*dx + dy*dy + dz*dz;
  },
  distance: function(a, b) {
    return Math.sqrt(this.distanceSquared(a, b));
  },
  lengthSquared: function(a) {
    return a[0]*a[0] + a[1]*a[1] + a[2]*a[2];
  },
  length: function(a) {
    return Math.sqrt(this.lengthSquared(a));
  },
  setLength: function(target, l) {
    var length = this.length(target);
    if (length !== 0 && l !== length) {
      this.multiplyScalar(target, l / length);
    }
    return this;
  }
};

/**
 * @object Vector4
 * @author Matthew Wagerfield
 */
FSS.Vector4 = {
  create: function(x, y, z, w) {
    var vector = new FSS.Array(4);
    this.set(vector, x, y, z);
    return vector;
  },
  set: function(target, x, y, z, w) {
    target[0] = x || 0;
    target[1] = y || 0;
    target[2] = z || 0;
    target[3] = w || 0;
    return this;
  },
  setX: function(target, x) {
    target[0] = x || 0;
    return this;
  },
  setY: function(target, y) {
    target[1] = y || 0;
    return this;
  },
  setZ: function(target, z) {
    target[2] = z || 0;
    return this;
  },
  setW: function(target, w) {
    target[3] = w || 0;
    return this;
  },
  add: function(target, a) {
    target[0] += a[0];
    target[1] += a[1];
    target[2] += a[2];
    target[3] += a[3];
    return this;
  },
  multiplyVectors: function(target, a, b) {
    target[0] = a[0] * b[0];
    target[1] = a[1] * b[1];
    target[2] = a[2] * b[2];
    target[3] = a[3] * b[3];
    return this;
  },
  multiplyScalar: function(target, s) {
    target[0] *= s;
    target[1] *= s;
    target[2] *= s;
    target[3] *= s;
    return this;
  },
  min: function(target, value) {
    if (target[0] < value) { target[0] = value; }
    if (target[1] < value) { target[1] = value; }
    if (target[2] < value) { target[2] = value; }
    if (target[3] < value) { target[3] = value; }
    return this;
  },
  max: function(target, value) {
    if (target[0] > value) { target[0] = value; }
    if (target[1] > value) { target[1] = value; }
    if (target[2] > value) { target[2] = value; }
    if (target[3] > value) { target[3] = value; }
    return this;
  },
  clamp: function(target, min, max) {
    this.min(target, min);
    this.max(target, max);
    return this;
  }
};

/**
 * @class Color
 * @author Matthew Wagerfield
 */
FSS.Color = function(hex, opacity) {
  this.rgba = FSS.Vector4.create();
  this.hex = hex || '#000000';
  this.opacity = FSS.Utils.isNumber(opacity) ? opacity : 1;
  this.set(this.hex, this.opacity);
};

FSS.Color.prototype = {
  set: function(hex, opacity) {
    hex = hex.replace('#', '');
    var size = hex.length / 3;
    this.rgba[0] = parseInt(hex.substring(size*0, size*1), 16) / 255;
    this.rgba[1] = parseInt(hex.substring(size*1, size*2), 16) / 255;
    this.rgba[2] = parseInt(hex.substring(size*2, size*3), 16) / 255;
    this.rgba[3] = FSS.Utils.isNumber(opacity) ? opacity : this.rgba[3];
    return this;
  },
  hexify: function(channel) {
    var hex = Math.ceil(channel*255).toString(16);
    if (hex.length === 1) { hex = '0' + hex; }
    return hex;
  },
  format: function() {
    var r = this.hexify(this.rgba[0]);
    var g = this.hexify(this.rgba[1]);
    var b = this.hexify(this.rgba[2]);
    this.hex = '#' + r + g + b;
    return this.hex;
  }
};

/**
 * @class Object
 * @author Matthew Wagerfield
 */
FSS.Object = function() {
  this.position = FSS.Vector3.create();
};

FSS.Object.prototype = {
  setPosition: function(x, y, z) {
    FSS.Vector3.set(this.position, x, y, z);
    return this;
  }
};

/**
 * @class Light
 * @author Matthew Wagerfield
 */
FSS.Light = function(ambient, diffuse) {
  FSS.Object.call(this);
  this.ambient = new FSS.Color(ambient || '#FFFFFF');
  this.diffuse = new FSS.Color(diffuse || '#FFFFFF');
  this.ray = FSS.Vector3.create();
};

FSS.Light.prototype = Object.create(FSS.Object.prototype);

/**
 * @class Vertex
 * @author Matthew Wagerfield
 */
FSS.Vertex = function(x, y, z) {
  this.position = FSS.Vector3.create(x, y, z);
};

FSS.Vertex.prototype = {
  setPosition: function(x, y, z) {
    FSS.Vector3.set(this.position, x, y, z);
    return this;
  }
};

/**
 * @class Triangle
 * @author Matthew Wagerfield
 */
FSS.Triangle = function(a, b, c, s, material) {
  this.a = a || new FSS.Vertex();
  this.b = b || new FSS.Vertex();
  this.c = c || new FSS.Vertex();
  this.vertices = [this.a, this.b, this.c];
  this.u = FSS.Vector3.create();
  this.v = FSS.Vector3.create();
  this.centroid = FSS.Vector3.create();
  this.normal = FSS.Vector3.create();
  this.material = material || new FSS.Material();this.color = new FSS.Color();
  this.polygon = s.polygon();
  this.polygon.attr({
    'stroke-linejoin': 'round',
	'stroke-miterlimit': 1,
	'stroke-width': 1
  });

  this.computeCentroid();
  this.computeNormal();
};

FSS.Triangle.prototype = {
  computeCentroid: function() {
    this.centroid[0] = this.a.position[0] + this.b.position[0] + this.c.position[0];
    this.centroid[1] = this.a.position[1] + this.b.position[1] + this.c.position[1];
    this.centroid[2] = this.a.position[2] + this.b.position[2] + this.c.position[2];
    FSS.Vector3.divideScalar(this.centroid, 3);
    return this;
  },
  computeNormal: function() {
    FSS.Vector3.subtractVectors(this.u, this.b.position, this.a.position);
    FSS.Vector3.subtractVectors(this.v, this.c.position, this.a.position);
    FSS.Vector3.crossVectors(this.normal, this.u, this.v);
    FSS.Vector3.normalise(this.normal);
    return this;
  }
};

/**
 * @class Geometry
 * @author Matthew Wagerfield
 */
FSS.Geometry = function() {
  this.vertices = [];
  this.triangles = [];
  this.dirty = false;
};

FSS.Geometry.prototype = {
  update: function() {
    if (this.dirty) {
      var t,triangle;
      for (t = this.triangles.length - 1; t >= 0; t--) {
        triangle = this.triangles[t];
        triangle.computeCentroid();
        triangle.computeNormal();
      }
      this.dirty = false;
    }
    return this;
  }
};

/**
 * @class Plane
 * @author Matthew Wagerfield
 */
FSS.Plane = function(width, height, segments, slices, s, material) {
  FSS.Geometry.call(this);
  this.width = width || 100;
  this.height = height || 100;
  this.segments = segments || 4;
  this.slices = slices || 4;
  this.segmentWidth = this.width / this.segments;
  this.sliceHeight = this.height / this.slices;

  // Cache Variables
  var x, y, v0, v1, v2, v3,
      vertex, triangle, vertices = [],
      offsetX = this.width * -0.5,
      offsetY = this.height * 0.5;

  // Add Vertices
  for (x = 0; x <= this.segments; x++) {
    vertices.push([]);
    for (y = 0; y <= this.slices; y++) {
      vertex = new FSS.Vertex(offsetX + x*this.segmentWidth, offsetY - y*this.sliceHeight);
      vertices[x].push(vertex);
      this.vertices.push(vertex);
    }
  }

  // Add Triangles
  for (x = 0; x < this.segments; x++) {
    for (y = 0; y < this.slices; y++) {
      v0 = vertices[x+0][y+0];
      v1 = vertices[x+0][y+1];
      v2 = vertices[x+1][y+0];
      v3 = vertices[x+1][y+1];
      t0 = new FSS.Triangle(v0, v1, v2, s, material);
      t1 = new FSS.Triangle(v2, v1, v3, s, material);
      this.triangles.push(t0, t1);
    }
  }
};

FSS.Plane.prototype = Object.create(FSS.Geometry.prototype);

/**
 * @class Material
 * @author Matthew Wagerfield
 */
FSS.Material = function(ambient, diffuse) {
  this.ambient = new FSS.Color(ambient || '#444444');
  this.diffuse = new FSS.Color(diffuse || '#FFFFFF');
  this.slave = new FSS.Color();
};

/**
 * @class Mesh
 * @author Matthew Wagerfield
 */
FSS.Mesh = function(geometry, material) {
  FSS.Object.call(this);
  this.geometry = geometry || new FSS.Geometry();
  this.material = material || new FSS.Material();
  this.side = FSS.FRONT;
  this.visible = true;
};

FSS.Mesh.prototype = Object.create(FSS.Object.prototype);

FSS.Mesh.prototype.update = function(lights, calculate) {
  var t,triangle, l,light, illuminance;

  // Update Geometry
  this.geometry.update();

  // Calculate the triangle colors
  if (calculate) {

    // Iterate through Triangles
    for (t = this.geometry.triangles.length - 1; t >= 0; t--) {
      triangle = this.geometry.triangles[t];

      // Reset Triangle Color
      FSS.Vector4.set(triangle.color.rgba);

      // Iterate through Lights
      for (l = lights.length - 1; l >= 0; l--) {
        light = lights[l];

        // Calculate Illuminance
        FSS.Vector3.subtractVectors(light.ray, light.position, triangle.centroid);
        FSS.Vector3.normalise(light.ray);
        illuminance = FSS.Vector3.dot(triangle.normal, light.ray);
        if (this.side === FSS.FRONT) {
          illuminance = Math.max(illuminance, 0);
        } else if (this.side === FSS.BACK) {
          illuminance = Math.abs(Math.min(illuminance, 0));
        } else if (this.side === FSS.DOUBLE) {
          illuminance = Math.max(Math.abs(illuminance), 0);
        }

        // Calculate Ambient Light
        FSS.Vector4.multiplyVectors(triangle.material.slave.rgba, triangle.material.ambient.rgba, light.ambient.rgba);
        FSS.Vector4.add(triangle.color.rgba, triangle.material.slave.rgba);

        // Calculate Diffuse Light
        FSS.Vector4.multiplyVectors(triangle.material.slave.rgba, triangle.material.diffuse.rgba, light.diffuse.rgba);
        FSS.Vector4.multiplyScalar(triangle.material.slave.rgba, illuminance);
        FSS.Vector4.add(triangle.color.rgba, triangle.material.slave.rgba);
      }

      // Clamp & Format Color
      FSS.Vector4.clamp(triangle.color.rgba, 0, 1);
    }
  }
  return this;
};

/**
 * @class Scene
 * @author Matthew Wagerfield
 */
FSS.Scene = function() {
  this.meshes = [];
  this.lights = [];
};

FSS.Scene.prototype = {
  add: function(object) {
    if (object instanceof FSS.Mesh && !~this.meshes.indexOf(object)) {
      this.meshes.push(object);
    } else if (object instanceof FSS.Light && !~this.lights.indexOf(object)) {
      this.lights.push(object);
    }
    return this;
  },
  remove: function(object) {
    if (object instanceof FSS.Mesh && ~this.meshes.indexOf(object)) {
      this.meshes.splice(this.meshes.indexOf(object), 1);
    } else if (object instanceof FSS.Light && ~this.lights.indexOf(object)) {
      this.lights.splice(this.lights.indexOf(object), 1);
    }
    return this;
  }
};

/**
 * @class Renderer
 * @author Matthew Wagerfield
 */
FSS.Renderer = function() {
  this.width = 0;
  this.height = 0;
  this.halfWidth = 0;
  this.halfHeight = 0;
};

FSS.Renderer.prototype = {
  setSize: function(width, height) {
    if (this.width === width && this.height === height) return;
    this.width = width;
    this.height = height;
    this.halfWidth = this.width * 0.5;
    this.halfHeight = this.height * 0.5;
    return this;
  },
  clear: function() {
    return this;
  },
  render: function(scene) {
    return this;
  }
};

/**
 * @class SVG Renderer
 * @author Matthew Wagerfield
 */
FSS.SVGRenderer = function(s) {
  FSS.Renderer.call(this);
  this.element = s.g();
};

FSS.SVGRenderer.prototype = Object.create(FSS.Renderer.prototype);

FSS.SVGRenderer.prototype.setSize = function(width, height) {
  FSS.Renderer.prototype.setSize.call(this, width, height);
  return this;
};

FSS.SVGRenderer.prototype.clear = function() {
  FSS.Renderer.prototype.clear.call(this);
  for (var i = this.element.childNodes.length - 1; i >= 0; i--) {
    this.element.removeChild(this.element.childNodes[i]);
  }
  return this;
};

FSS.SVGRenderer.prototype.render = function(scene) {
  FSS.Renderer.prototype.render.call(this, scene);
  var m,mesh, t,triangle, points, style;

  // Update Meshes
  for (m = scene.meshes.length - 1; m >= 0; m--) {
    mesh = scene.meshes[m];
    if (mesh.visible) {
      mesh.update(scene.lights, true);

      // Render Triangles
      for (t = mesh.geometry.triangles.length - 1; t >= 0; t--) {
        triangle = mesh.geometry.triangles[t];

		if (triangle.polygon.parent() !== this.element) {
			this.element.append(triangle.polygon);
		}
		
        points  = this.formatPoint(triangle.a)+' ';
        points += this.formatPoint(triangle.b)+' ';
        points += this.formatPoint(triangle.c);
        style = this.formatStyle(triangle.color.format());
		
		triangle.polygon.attr({
			points: points,
			style: style,
      fill: triangle.color.format()
    });
      }
    }
  }
  return this;
};

FSS.SVGRenderer.prototype.formatPoint = function(vertex) {
  return (this.halfWidth+vertex.position[0])+','+(this.halfHeight-vertex.position[1]);
};

FSS.SVGRenderer.prototype.formatStyle = function(color) {
  var style = 'fill:'+color+';';
  style += 'stroke:'+color+';';
  return style;
};


/**
* Banner Ad Classes
**/

/**
 * @class Heart
 * @author CJ Gammon
 */
var Heart = function (s, x, y) {var instance = this,
			heart,
			heartMatrix,
			totalMaskVertices = 50;
		
		this.el = s.select("#heart");
		heart = this.el.select('#heart-shape');
		
		instance.maskElement = s.path(getPath(totalMaskVertices));		
		instance.el.attr({
			clipPath: instance.maskElement
		});
		
		this.animFill = function (f, dur) {
			heart.animate({
				fill: f
			}, 200);
		}
		
		this.setFill = function (f, dur) {
			heart.attr({
				fill: f
			}, 200);
		}
		
		this.animScale = function (scale, dur) {
			dur = dur ? dur : 300;
			
			this.matrix = new Snap.Matrix();
			this.matrix.translate(x, y);
			this.matrix.scale(scale);
			this.el.animate({
				transform: this.matrix.toTransformString()
			}, dur, mina.bounce);
		}
		
		this.setScale = function (scale, dur) {
			dur = dur ? dur : 300;
			
			this.matrix = new Snap.Matrix();
			this.matrix.translate(x, y);
			this.matrix.scale(scale, scale, 0, 0);
			this.el.attr({
				transform: this.matrix.toTransformString()
			});
			
		}
		
		this.mask = function () {
			var n = totalMaskVertices;
			
			instance.maskElement.attr({
				d: getPath(n)
			});
			
			function updatePath() {
				n -= 1;
				instance.maskElement.attr({
					d: getPath(n)
				});
				
				if (n > 0) {
					setTimeout(updatePath, 10);
				}
			}
		
			setTimeout(updatePath, 10);
		}
		
		this.unmask = function () {
			instance.maskElement.attr({
				d: getPath(totalMaskVertices)
			});
		}
		
		function getPath(n) {
			var pathString,
				i,
				_x,
				_y;
			
			pathString = "M0 0";
			
			for (i = 0; i < n + 1; i += 1) {
				a = 2 * Math.PI * i / totalMaskVertices;
                a += Math.PI;

				_x = Math.sin(a) * 50;
				_y = Math.cos(a) * 50;
				
				pathString += "L" + _x + " " + _y;
			}
			
			pathString += "Z";
			return pathString;
		}
	}

/**
 * @class Device
 * @author CJ Gammon
 */
var Device = function (s, x, y) {
		var instance = this;
		
		this.el = s.g();
		this.matrix = new Snap.Matrix();
		this.matrix.translate(x, y);
		this.el.transform(this.matrix.toTransformString());
		
		this.keyboardMatrix = new Snap.Matrix();
		this.keyboardMatrix.translate(0, 70);
		
		instance.maskElement = s.polygon();
		instance.maskElement.toDefs();
		
		addBack();
		addScreen();
		//addGloss();
		addKeyboard();
		
		function addBack() {
			instance.back = s.rect(0, 0, 0, 0);
			instance.back.attr({
				fill: '#696969'
			});

			instance.el.append(instance.back);	
		}
		
		function addScreen() {
			instance.scr = s.rect(0, 0, 0, 0);
			instance.scr.attr({
				fill: "#09ae8a"
			});

			instance.el.append(instance.scr);
		}
		
		function addKeyboard() {
			var p1,
				p2;
				
			instance.keyboard = s.g();
			instance.keyboard.transform(instance.keyboardMatrix.toTransformString());
			
			p1 = s.polygon('-103.324,0 -135.324,32 136.676,32 104.676,0 ');
			p1.attr({
				fill: '#818181'
			});
			
			p2 = s.polygon('127.774,40 -128.226,40 -136.226,32 135.774,32 ');
			p2.attr({
				fill: '#676767'
			});
			
			instance.keyboard.append(p1);
			instance.keyboard.append(p2);
			instance.el.append(instance.keyboard);
		}
		
		function addGloss() {
			instance.gl = s.rect(0, 0, 0, 0);
			instance.gl.attr({
				opacity: 0.2,
				fill: "white",
				clipPath: instance.maskElement
			});
			
			instance.el.append(instance.gl);
		}
		
		this.hideKeyboard = function () {
			this.keyboardMatrix = new Snap.Matrix();
			instance.keyboardMatrix.translate(0, 50);
			instance.keyboardMatrix.scale(0.01, 0.01, 0, 0);
			instance.keyboard.animate({
				opacity: 0,
				transform: instance.keyboardMatrix.toTransformString()
			}, 100);
		}
		
		this.showKeyboard = function () {
			this.keyboardMatrix = new Snap.Matrix();
			instance.keyboardMatrix.translate(0, 70);
			instance.keyboardMatrix.scale(1, 1, 0, 0);
			instance.keyboard.attr({
				opacity: 1,
				transform: instance.keyboardMatrix.toTransformString()
			});
		}
		
		this.setScreen = function(w, h) {
			this.scr.attr({
				x: -w / 2,
				y: -h / 2,
				width: w,
				height: h
			});
		}
		
		this.setBack = function (w, h) {
			this.back.attr({
				x: -w / 2,
				y: -h / 2,
				width: w,
				height: h
			});
		}
		
		this.setScale = function (scale) {
			this.matrix.scale(scale, scale, 0, 0);
			this.el.transform(this.matrix.toTransformString());
		}
		
		this.animScreen = function(w, h) {
			this.scr.animate({
				x: -w / 2,
				y: -h / 2,
				width: w,
				height: h
			}, 100);
		}
		
		this.animBack = function (w, h) {
			this.back.animate({
				x: -w / 2,
				y: -h / 2,
				width: w,
				height: h
			}, 100);
		}
		
		this.animRotation = function (r) {
			instance.matrix.rotate(r, 0, 0);
					
			instance.el.animate({
				transform: instance.matrix.toTransformString()
			}, 100, mina.easeIn);
		}
		
		this.animScale = function (scale, dur, ease) {
			dur = dur ? dur : 100;
			ease = ease ? ease : mina.easeout;
			
			this.matrix.scale(scale, scale, 0, 0);
			this.el.animate({
				transform: this.matrix.toTransformString()
			}, dur, ease);
		}
		
		this.animOpacity = function (opacity, dur) {
			dur = dur ? dur : 200;
			
			this.el.animate({
				opacity: opacity
			}, dur);
		}
		
		this.setOpacity = function (opacity) {			
			this.el.attr({
				opacity: opacity
			});
		}
}

/**
 * @class Burst
 * @author CJ Gammon
 */
var Burst = function (s, x, y) {
		var instance = this,
			polygons,
			mask,
			maskCircle,
			maskBg;
		
		this.el = s.select("#burst");
		
		mask = s.g();
		mask.toDefs();
		
		maskBg = s.rect(-200, -200, 400, 400);
		maskBg.attr({
			fill: 'white'
		});
		mask.append(maskBg);
		
		maskCircle = s.circle(0, 0, 30);
		mask.append(maskCircle);
		
		this.el.attr({
			mask: mask
		});
		
		this.anim = function () {
			this.el.animate({
				opacity: 1
			}, 100);
			
			maskCircle.animate({
				transform: 'scale(6)'
			}, 300);
			
			setTimeout(function () {
				instance.el.animate({
					opacity: 0
				}, 100);
			}, 300)
		}
		
		this.reset = function () {
			maskCircle.attr({
				transform: 'scale(1)'
			});
		}
	}

/**
 * @class Mesh
 * @author CJ Gammon
 */
var Mesh = function (s, container, colorA, colorB) {
		var instance = this,
			_width = 440,
			_height = 440,
			now,
			start = Date.now(),
			renderer,
			scene,
			geometry,
			material,
			mesh,
			light;
		
		instance.animating = false;
		
		instance.init = function () {
			renderer = new FSS.SVGRenderer(s);
			renderer.setSize(_width, _height);
			renderer.element.transform('translate(-20, -20)'); //keep edges from showing
			
			instance.el = renderer.element;
			
			container.append(renderer.element);

			scene = new FSS.Scene();
			material = new FSS.Material(colorA, colorB);
		  geometry = new FSS.Plane(_width, _height, 10, 10, s, material);
			mesh = new FSS.Mesh(geometry, material);
			scene.add(mesh);

			light = new FSS.Light('#eeeeee', '#eeeeee');
			light.setPosition(300*Math.sin(0.001), 200*Math.cos(0.0005), 100);
			scene.add(light);

			now = Date.now() - start;

			tweakMesh();
			distortMesh();			
			renderer.render(scene);
		}
		
		instance.start = function () {
			instance.animating = true;
			animate();
		}
		
		instance.stop = function () {
			instance.animating = false;
		}
		
		instance.setColor = function (colorA, colorB) {
			var i;
			
			material = new FSS.Material(colorA, colorB);
			
			for (i = geometry.triangles.length - 1; i > -1; i -= 1) {	
				geometry.triangles[i].material = material;
			}
			
			animate();
		}
		
		instance.rippleColor = function (colorA, colorB) {
			var i;
			
			material = new FSS.Material(colorA, colorB);

			function colorTriangle(j) {
				geometry.triangles[j].material = material;

				if (j == 0) {
					setTimeout(function () {
						animate();
					}, 10); //force clear
				}
			}

			for (i = geometry.triangles.length - 1; i > -1; i -= 1) {								
				var speed = 200 + Math.sin(0.1 + Math.abs(geometry.triangles[i].centroid[0] / geometry.triangles[i].centroid[1])) * 100;
				setTimeout(colorTriangle, speed * 2, i);
			}			
		}
		
		
		function tweakMesh() {
			var v, vertex;
			
			for (v = geometry.vertices.length - 1; v >= 0; v--) {
			      vertex = geometry.vertices[v];
			      vertex.anchor = FSS.Vector3.clone(vertex.position);
			      vertex.step = FSS.Vector3.create(
			        Math.randomInRange(0.2, 1.0),
			        Math.randomInRange(0.2, 1.0),
			        Math.randomInRange(0.2, 1.0)
			      );
				vertex.time = Math.randomInRange(0, Math.PIM2);
			}
		}
		
		function distortMesh() {
			var v,
				vertex,
				ox, oy, oz,
				offset = 10 / 2;
			
			for (v = geometry.vertices.length - 1; v >= 0; v--) {
		      vertex = geometry.vertices[v];
		      ox = Math.sin(vertex.time + vertex.step[0] * now * 0.002);
		      oy = Math.cos(vertex.time + vertex.step[1] * now * 0.002);
		      oz = Math.sin(vertex.time + vertex.step[2] * now * 0.002);
		      FSS.Vector3.set(vertex.position,
		        0.2 * geometry.segmentWidth * ox,
		        0.1 * geometry.sliceHeight * oy,
		        0.7 * offset * oz - offset);
		      FSS.Vector3.add(vertex.position, vertex.anchor);
		    }

		    geometry.dirty = true;
		}
	
		function animate() {
			now = Date.now() - start;
			
			if (mobilecheck() !== true) {
				distortMesh();
			}
			
			renderer.render(scene);
			
			if (instance.animating !== false) {
				requestAnimationFrame(animate);
			}
		}
		
		instance.init();
	}

/**
 * @class Logo
 * @author CJ Gammon
 */
var Logo = function (s) {
		var instance = this,
			logo,
			parts = [
				['top', 0, 20], 
				['left', 20, 0], 
				['bottom', 0, -20],
				['right', -20, 0]
			],
			components = [],
			i = 0,
			k = 0,
			isLogoAnimated = false,
			isCrocAnimated = false,
			isCroc2Animated = false;
		
		logo = s.select("#snap-logo");

		for (i = 0; i < parts.length; i++) {
			var el = parts[i]
			elid = el[0];
			element = logo.select("#snap-logo-" + elid);
			element.attr({opacity:0, transform: "t" + (el[1]) + "," + (el[2])});
		    components.push(element);
		}

		function animateEach() {
			if (!components[k]) {
				return;
			}
		    components[k].animate({ 
		        transform: "t" + (0) + "," + (0),
		        opacity: 1
		    }, 250, mina.easeout);
			setTimeout(animateEach, 150);
			k++;
		};
		
		this.animate = function () {
			setTimeout(animateEach, 150);
		}
		
		this.show = function () {
			var i;
			
			for (i = 0; i < components.length; i += 1) {
				components[i].attr({ 
			    	transform: "t" + (0) + "," + (0),
			    	opacity: 1
			    });
			}
		    
		}
	};

/**
 * @class App
 * @author CJ Gammon
 */
var App = function () {
  var instance = this;
		
		this.started = false;
				
		this.init = function () {
			var timeline,
				ad,
				s,
				cover,
				device,
				heart,
				burst,
				screen1,
				text1,
				text2,
				text3,
				text4,
				resolveScreen,
				logo,
				meshA,
				meshAContainer,
				replaycount = 0,
        replayBtn,
				WIDTH = 400,
				HEIGHT = 400,
				WHITE = "#ffffff",
				GREEN = "#09ae8a";
			
			this.started = true;
			
			ad = document.getElementById('ad');
			s = new Snap("#ad");
			cover = s.select('#cover');
			meshAContainer = s.select('#meshAContainer');
			screen1 = s.select('#screen1');
			text1 = s.select('#text1');
			text2 = s.select('#text2');
			text3 = s.select('#text3');
			text4 = s.select('#text4');
			replayBtn = s.select('#replay-btn');
			resolveScreen = s.select('#resolve');
			logo = new Logo(s);
			
			//handle_RESIZE();
      //window.addEventListener('resize', handle_RESIZE);
			ad.addEventListener('click', handle_CLICK);			
			replayBtn.click(replay_CLICK);
			
			addMeshA();	
			cover.remove();
			addHeart();
			addComputer();
			addBurst();
			
			function addHeart() {
				heart = new Heart(s, WIDTH / 2, HEIGHT / 2);
			}
			
			function addComputer() {
				device = new Device(s, WIDTH / 2, HEIGHT / 2);
				device.setScreen(192, 112);
				device.setBack(208, 148);
				device.setScale(0.1);
				text2.after(device.el);
			}
			
			function addBurst() {
				burst = new Burst(s);
			}
			
			function addMeshA() {
				meshA = new Mesh(s, meshAContainer, '#afafaf', '#afafaf');
			}
			
			function addMeshB() {
				meshA.el.remove();
				meshB = new Mesh(s, meshBContainer, '#09ae8a', '#777777');
			}
			
			function showMeshB() {
				if (mobilecheck() !== true) {
					meshB.start();
				}
			}
			
			function showComputer() {
				text1.animate({y: 80}, 100);
				text2.animate({y: 350}, 100);
				device.animScale(10, 300, mina.bounce);
				heart.animFill(WHITE);
			}
			
			function toTablet() {
				device.animRotation(-90);	
				device.animScreen(76, 100);
				device.animBack(92, 132);
				heart.animScale(0.5, 200);				
			}
			
			function toPhone() {
				device.hideKeyboard();
				device.animScreen(48, 76);
				device.animBack(56, 100);
				heart.animScale(0.3);
			}
			
			function rotate() {
				device.animRotation(90);
				heart.animScale(0.4);
			}
			
			function zoom() {
				meshA.stop();
				device.animScale(10, 600);
				heart.animScale(4, 600);
				burst.anim();
			}
			
			function greenMesh() {
				
				meshA.setColor('#09ae8a', '#777777');
				
				if (mobilecheck() !== true) {
					meshA.start();
				}
				
				device.animOpacity(0, 200);
				screen1.animate({
					opacity: 0
				}, 100);
			}
			
			function maskReveal() {
				heart.mask();
			}
			
			function showText3() {
				device.setScale(0.01);
				text3.animate({
					opacity: 1
				}, 200);
			}
			
			function hideText3() {
				text3.animate({
					opacity: 0
				}, 200);
				
				if (mobilecheck() !== true) {
					meshA.rippleColor('#afafaf', '#afafaf');
				} else {
					meshA.setColor('#afafaf', '#afafaf');
				}
			}
			
			function resolve() {
				resolveScreen.animate({
					opacity: 1
				}, 200);
			}
			
			function stop() {
				logo.animate();
				meshA.stop();
			}
			
			function reset() {
				resolveScreen.attr({
					opacity: 0
				});		
				
				screen1.attr({
					opacity: 1
				});
				
				text1.attr({y: 130});
				text2.attr({y: 300});
				
				heart.setScale(1);
				heart.setFill('#0DAE8A');
				heart.unmask();
				device.setOpacity(1);
				device.setScreen(192, 112);
				device.setBack(208, 148);
				device.showKeyboard();
				meshA.start();
				burst.reset();
			}
			
			function replay_CLICK(e) {
				e.stopPropagation();
				
				replaycount += 1;
				//ga('send', 'event', 'button', 'click', 'replay', replaycount);
				reset();
				run();
			}
			
			function handle_CLICK(e) {
				//ga('send', 'event', 'button', 'click', 'ad');
				top.window.location.href = 'http://snapsvg.io/';
			}
			
			function handle_RESIZE() {
				var _w = window.innerWidth,
					scale = _w / 400;
				
				ad.style.webkitTransform = 'scale(' + scale + ')';
				ad.style.MozTransform = 'scale(' + scale + ')';
				ad.style.msTransform = 'scale(' + scale + ')';
				ad.style.oTransform = 'scale(' + scale + ')';
				ad.style.transform = 'scale(' + scale + ')';
				
			}
			
			function run() {
				if (mobilecheck() !== true) {
					meshA.start();
				}
				setTimeout(showComputer, 2000);
				setTimeout(toPhone, 3000);
				setTimeout(rotate, 4000);
				setTimeout(toTablet, 5000);
				setTimeout(zoom, 6000);
				setTimeout(greenMesh, 6300);
				setTimeout(maskReveal, 6700);
				setTimeout(showText3, 7000);
				setTimeout(hideText3, 10000);
				setTimeout(resolve, 10500);
				setTimeout(stop, 10900);
			}
			
			function basic() {
				screen1.attr({opacity: 0});
				heart.el.attr({opacity: 0});
				replayBtn.attr({opacity: 0});
				logo.show();
				text4.select('tspan').attr({opacity: 0});
				text4.select('tspan:nth-child(2)').attr({y: 120});
				resolveScreen.attr({opacity: 1});
			}
			
			run();
		}
}

window.mobilecheck = function () {
   return false; 
};

var app = new App();
app.init();


//legal info

//============================================================
//
// Copyright (C) 2013 Matthew Wagerfield
//
// Twitter: https://twitter.com/mwagerfield
//
// Permission is hereby granted, free of charge, to any
// person obtaining a copy of this software and associated
// documentation files (the "Software"), to deal in the
// Software without restriction, including without limitation
// the rights to use, copy, modify, merge, publish, distribute,
// sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do
// so, subject to the following conditions:
//
// The above copyright notice and this permission notice
// shall be included in all copies or substantial portions
// of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY
// OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
// LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
// EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
// FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
// AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
// OR OTHER DEALINGS IN THE SOFTWARE.
//
//============================================================