var Grid = (function(){

  var Grid = function(opt){
    var horizontal = this.horizontal = []
    var vertical = this.vertical = []
    var x, xmin, xmax
    var y, ymin, ymax
    var dx = opt.strokeWidth + opt.side
    var dy = dx
    var i
    var s

    opt = this.opt = defaults(opt, {
      bg: "#ffffff",
      stroke: "#000000",
      strokeWidth: 2,
      side: 10,
      delay: 0,
      shuffleDelay: false,
      randomizeDelay: false,
      duration: 500,
      width: 300,
      height: 300,
      halign: "left",
      valign: "top",
      snap: null,
    })
    if (typeof opt.stroke == 'string') opt.stroke = [opt.stroke]
    if (typeof opt.delay == 'string') opt.delay = [opt.delay]
    
    if (opt.snap) {
      s = this.snap = opt.snap
    } else { 
      s = this.snap = Snap(opt.width, opt.height)
      s.attr({ viewBox: "0 0 " + opt.width + " " + opt.height })
    }

    switch (opt.halign) {
      case "right":
        ymin = opt.height % dy
        ymax = opt.height + 1
        break
      default:
      case "left":
        ymin = 0
        ymax = opt.height
        break
    }

    switch (opt.valign) {
      case "bottom":
        xmin = opt.width % dx
        xmax = opt.width + 1
        break
      default:
      case "top":
        xmin = 0
        xmax = opt.width
        break
    }
    
    this.bg = s.rect(0, 0, "100%", "100%").attr({ fill: opt.bg })
    
    this.pos = {
      dx: dx, xmin: xmin, xmax: xmax,
      dy: dy, ymin: ymin, ymax: ymax,
    }

    for (i = 0, x = xmin; x < xmax; x += dx, i++) {
      vertical.push( s.path().attr({
        strokeWidth: opt.strokeWidth,
        stroke: opt.stroke[ i % opt.stroke.length ],
      }) )
    }
    for (i = 0, y = ymin; y < ymax; y += dy, i++) {
      horizontal.push( s.path().attr({
        strokeWidth: opt.strokeWidth,
        stroke: opt.stroke[ i % opt.stroke.length ],
      }) )
    }
  }
  
  Grid.prototype.animate = function(opt, cb){
    opt = defaults(opt, {
      h: "right",
      v: "down",
    })
    var duration = this.opt.duration
    var height = this.opt.height, width = this.opt.width
    var x = this.pos.xmin, y = this.pos.ymin
    var right = opt.h == "right"
    var down = opt.v == "down"
    
    this.vertical.forEach(function(p, i){
      var start_path, end_path
      if (down) {
        start_path = vpath( x, 0, 0 )
        end_path = vpath( x, 0, height )
      }
      else {
        start_path = vpath( x, height, 0 )
        end_path = vpath( x, height, -height )
      }
      var delay = this.opt.randomizeDelay
        ? choice(this.opt.delay)
        : this.opt.delay[i % this.opt.delay.length]
      p.attr({ d: start_path })
      setTimeout(function(){
        p.animate({ d: end_path }, duration)
      }, delay)
      x += this.pos.dx
    }.bind(this))

    this.horizontal.forEach(function(p, i){
      var start_path, end_path
      if (right) {
        start_path = hpath( 0, y, 0 )
        end_path = hpath( 0, y, width )
      }
      else {
        start_path = hpath( width, y, 0 )
        end_path = hpath( width, y, -width )
      }

      var delay
      if (this.opt.shuffleDelay) {
        delay = randrange.apply(null, this.opt.delay)
      }
      else if (this.opt.randomizeDelay) {
        delay = choice(this.opt.delay)
      }
      else {
        delay = this.opt.delay[i % this.opt.delay.length]
      }
      p.attr({ d: start_path })
      setTimeout(function(){
        p.animate({ d: end_path }, duration)
      }, delay)
      y += this.pos.dy
    }.bind(this))
    
    var max_delay = Math.max.apply(Math, this.opt.delay)
    cb && setTimeout(cb, this.opt.duration + max_delay + 20)
  }
  
  function hpath (x, y, w) {
    return "M" + x + " " + y + "h" + w
  } 
  function vpath (x, y, w) {
    return "M" + x + " " + y + "v" + w
  } 

  return Grid
})()