function resize() {
  let p = 400 / 944
  $('.container').each(function(i, el) {
    let height = $(this).height
    let width = $(this).width

    $(this).width = height * p;
  })
}

class Amount {
  constructor(elem) {
    this.elem = elem
    this.minus = elem.parent().find('.minus')
    this.plus = elem.parent().find('.plus')
    this.n = 0
    this.setup()
    this.max = 999
  }
  setup() {
    this.elem.val(0)
    this.plus.click((e) => {
      this.increment()
      this.print()
    })
    this.minus.click((e) => {
      this.decrement()
      this.print()
    })
    this.elem.change((e) => {
      this.n = parseInt(this.elem.val())
      this.print()
    })
    this.print()
  }
  enable_button(name) {
    this[name].removeClass('disabled')
    if (name == 'plus') {
      this[name].html('<i class="plus icon"></i>')
    }
    if (name == 'minus') {
      this[name].html('<i class="minus icon"></i>')
    }
  }
  disable_button(name) {
    this[name].addClass('disabled')
    this[name].html('')
  }
  check_limits() {
    this.enable_button('plus')
    this.enable_button('minus')
    if (this.n > this.max) {
      this.n = this.max
    }
    if (this.n == this.max) {
      this.disable_button('plus')
    }

    if (this.n < 0) {
      this.n = 0
    }
    if (this.n == 0) {
      this.disable_button('minus')
    }
  }
  increment() {
    this.n += 1
  }
  decrement() {
    this.n -= 1
  }
  get value() {
    return this.n
  }
  print() {
    this.check_limits()
    this.elem.val(this.n)
  }
}

class Colors {
  constructor(elem, changing = false) {
    this.color = {
      white: 'blanco',
      black: 'negro',
      blue: 'azul',
      green: 'verde',
      yellow: 'amarillo',
      orange: 'naranjo',
      red: 'rojo'
    }
    this.picked = 'blue'
    this.elem = elem
    this.input = elem.find('input[name="color"]')
    this.changing = null
    if (changing) {
      this.changing = elem.parent().parent().find('.column2 img')
    }
    this.setup()
  }
  setup() {
    this.elem.find('.circle').each((i, el) => {
      $(el).click((e) => {
        let color = $(el).attr('class').split(' ')[0]
        this.change_color(color)
      })
    })
    this.change_color('blue')
  }
  default_color_format(el) {
    $(el).removeClass('selected')
  }
  change_color(color) {
    this.picked = this.color[color]
    this.input.val(this.picked)
    this.elem.find('.circle').each((i, el) => {
      this.default_color_format(el)
    })
    this.elem.find('.' + color + '.circle').addClass('selected')
    if (this.changing != null) {
      this.changing.attr('src', './assets/images/' + this.picked + '.png')
    }
  }
}

let smtp = {
  Host: 'smtp.google.com',
  Username: 'rsalinas85@gmail.com',
  Password: 'salinas1234',
  From: 'ventas@3dstand.cl'
}

let sticky_form = {
  elem: $('.sticky form'),
  setup: function() {
    this.elem.submit((e) => {
      e.preventDefault()
      this.submit()
      return false
    })
  },
  submit: function() {
    console.debug('submit sticky')
  }
}
let cotiza_form = {
  elem: $('#corporativos form'),
  setup: function() {
    this.elem.submit((e) => {
      e.preventDefault()
      this.submit()
      return false
    })
    this.file = this.elem.find('input[type="file"]')
    this.elem.find('.file').click((e) => {
      this.file.trigger('click')
    })
  },
  submit: function() {
    let email = this.elem.find('[name="email"]').val()
    let data = new FormData(this.elem[0])
    let body = [
      'Nombre: ' + this.elem.find('[name="nombre"]').val(),
      'E-mail: ' + email,
      'Teléfono: ' + this.elem.find('[name="telefono"]').val(),
      '',
      'Color: ' + this.elem.find('[name="color"]').val(),
      'Cantidad: ' + this.elem.find('[name="cantidad"]').val(),
      this.elem.find('[name="mensaje"]').val()
    ]
    let content = {
      Host: smtp.Host,
      Username: smtp.Username,
      Password: smtp.Password,
      To: email,
      From: smtp.From,
      Subject: 'Cotizacion - ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
      Body: body.join('<br />'),
      Attachments: [
        {
          name: "Logo",
          data: data.get('archivo')
        }
      ]
    }
    console.debug(email)
    //Email.send()
  }
}
let conversemos_form = {
  elem: $('#contacto'),
  setup: function() {
    this.elem.submit((e) => {
      e.preventDefault()
      this.submit()
      return false
    })
  },
  submit: function() {
    let email = this.elem.find('[name="email"]').val()
    let body = [
      'Nombre: ' + this.elem.find('[name="nombre"]').val(),
      'E-mail: ' + email,
      '',
      this.elem.find('[name="mensaje"]').val()
    ]
    let content = {
      Host: smtp.Host,
      Username: smtp.Username,
      Password: smtp.Password,
      From: smtp.From,
      To: email,
      Subject: 'Contacto ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
      Body: body.join('<br />')
    }
  }
}

$(document).ready(function() {
  $('.menu.sticky').sticky()
  $('.column2 .sticky').sticky({
    context: '#column'
  })

  $('.shopping.cart').innerText = 0

  window.onresize = resize;

  let sticky_amount = new Amount($('.sticky .input input[name="cantidad"]'))
  let sticky_color = new Colors($('.sticky .colores'), true)
  sticky_form.setup()
  let cotiza_amount = new Amount($('#corporativos .input input[name="cantidad"]'))
  let cotiza_color = new Colors($('#corporativos .colores'))
  cotiza_form.setup()
  conversemos_form.setup()
})