namespace App {
  
  console.clear();
  const log = _.bind(console.log, console);
  
  var baseURL = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/81395/"
  
  var isDirty = false;
  
  var $window = $(window);
  var $clear  = $("#clear");
  var $play   = $("#play");
  var $text   = $("#text");
    
  $text.val(`GSAP &\nPaper.js\n🔥😍😁😀😎😀🙃😜😁`);
  
  // paper.install(this);
  paper.setup("canvas");
  
  var project = paper.project;
  var view = paper.view;
  
  var padding = 25;
  
  var baseStyle = {
    font: "alpha_echoregular",
    fillColor: "#333",
    blendMode: "color-burn",      
    shadowBlur: 0.5,
    shadowColor: new paper.Color(0, 0, 0, 0.75),
    shadowOffset: new paper.Point(0.3, 0.3)
  };
    
  var styles = [            
    _.defaults({ fillColor: "#009688" }, baseStyle),
    _.defaults({ fillColor: "#9c27b0" }, baseStyle),
    _.defaults({ fillColor: "#244191" }, baseStyle), 
    _.defaults({ fillColor: "#ac286e" }, baseStyle),   
    _.defaults({ fillColor: "#4d4b4c" }, baseStyle),       
    _.defaults({ fillColor: "#e8405d" }, baseStyle),
    _.defaults({ fillColor: "#2196f3" }, baseStyle),
  ];
  
  var numStyles = styles.length;
     
  var bounds = new paper.Rectangle({
    size: view.size.subtract(padding * 2),
    center: view.center
  });
      
  var raster = new paper.Raster(baseURL + "grunge-paper-bg.jpg?v=1");
  raster.onLoad = function() {
    raster.fitBounds(view.bounds, true);
    onLoad();
  }
  
  var layer = new paper.Layer({
    applyMatrix: false
  });
  
  var groups = [];
  
  view.on({ resize, frame });
  // $window.on("load", onLoad);
    
  function init() {
    
    layer.removeChildren();
        
    var text = _.compact(_.trim($text.val()).split(/\n\n/gm));
           
    groups = _.map(text, createTextGroup);
        
    if (!groups.length) return;
        
    _.forEach(groups, group => {
      
      var bounds = group.bounds;
            
      var rect = new paper.Path.Rectangle({
        point: bounds.point,
        size: bounds.size,
        selected: true
      });
    });
    
    fitView();
  }
    
  function createTextGroup(text, index) {
        
    var style = styles[index % numStyles];
    var group = new paper.Group(style);
    
    var prev  = group.previousSibling;
    var point = prev ? prev.bounds.bottomRight : new paper.Point(padding, padding);
    
    var lines = _.compact(_.split(text, /\n/gm));
           
    _.forEach(lines, line => {
      
      var lineItem = createLineText(line, point, style);
      group.addChild(lineItem);
      point = new paper.Point(point.x, point.y + lineItem.bounds.height);
    });
    
    if (group.previousSibling) {
      group.pivot = group.parentToLocal(group.bounds.topLeft);
      group.position = prev.bounds.bottomRight;
    }
    
    return group;
  }
    
  function createLineText(text, point, style) {
    
    var group = new paper.Group();
    var words = _.split(text, " ").filter(txt => !!_.trim(txt));    
    var last  = _.last(words);
    
    _.forEach(words, word => {
      
      var pad = word === last ? " " : "";      
      var wordItem = createWordText(" " + word + pad, point, style);
      group.addChild(wordItem);
      point = new paper.Point(point.x + wordItem.bounds.width, point.y);
    });
        
    return group;
  }
  
  function createWordText(text, point, style) {
    
    var config = _.defaults({
      point: point,
      content: text
    }, style);
    
    return new paper.PointText(config);
  }
  
  function fitView() {
        
    var w1 = bounds.size.width;
    var h1 = bounds.size.height;
    
    var w2 = layer.bounds.size.width;
    var h2 = layer.bounds.size.height;
    
    var sx = w1 / w2;
    var sy = h1 / h2;
    
    var scale = Math.min(sx, sy);
        
    if (!_.isFinite(scale)) {
      scale = 1;
    }
    
    TweenLite.to(layer.bounds, 0.2, {
      x: padding,
      y: padding,
      width:  Math.max(w2 * scale, 1),
      height: Math.max(h2 * scale, 1)
    });
  }
  
  function resize() {
    
    bounds.size = view.size.subtract(padding * 2);
    bounds.center = view.center;    
    raster.fitBounds(view.bounds, true);    
    fitView();
  }
  
  function clearText() {
    $text.val("");
    isDirty = true;
  }
  
  function frame() {
    
    if (isDirty) {
      init();
      isDirty = false;
    }
  }
  
  function input() { 
    isDirty = true;
  }
  
  function onLoad() {
        
    $(".temp-element").remove();    
    $text.on("input", input);
    $clear.click(clearText);
    isDirty = true;
  }
}