let clientes = {
  clientes: [],
  current: 0,
  rows: 2,
  cols: 6,
  decreaseClientes: () => {
    $('#img_clientes').find('.row').find('.column:last-child').remove()
    clientes.current -= clientes.rows
    if (clientes.current < - clientes.cols * clientes.rows) {
      clientes.current = clientes.clientes.length - (clientes.cols - 1) * clientes.rows
    }
    n = clientes.current
    if (n < 0) {
      n = clientes.clientes.length + n
    }
    $('#img_clientes').find('.row:first-child').prepend(
      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[n])
    )
    $('#img_clientes').find('.row:last-child').prepend(
      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[n + 1])
    )
  },
  increaseClientes: () => {
    $('#img_clientes').find('.row').find('.column:first-child').remove()
    clientes.current += 2
    if (clientes.current > clientes.clientes.length - clientes.cols * clientes.rows) {
      clientes.current = - (clientes.cols - 1) * clientes.rows
    }
    $('#img_clientes').find('.row:first-child').append(
      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[clientes.current + (clientes.cols - 1) * clientes.rows])
    )
    $('#img_clientes').find('.row:last-child').append(
      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[clientes.current + clientes.cols * clientes.rows - 1])
    )
  },
  setup: () => {
    $('.ci .icon').css('cursor', 'pointer').click(function() {
      if ($(this).attr('class').indexOf('left') != -1) {
        clientes.decreaseClientes()
        return
      }
      clientes.increaseClientes()
    })
  }
}
let eventos = {
  eventos: [],
  current_tab: 'none',
  base_url: '',
  changeEventos: (filter) => {
    let grid = $('#eventos_cards')
    grid.html('')
    $.each(eventos.eventos, function(i, el) {
      if (filter != 'none' && el.servicio != filter) {
        return
      }
      console.debug(el.image)
      grid.append(
        $('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
          $('<div></div>').attr('class', 'ui basic segment').append(
            $('<a></a>').attr('href', eventos.base_url + '/evento/' + i).append(
              $('<div></div>').attr('class', 'ui image').append(el.image)
            ).append(
              $('<div></div>').attr('class', 'ui center aligned header').append(el.titulo).append(
                $('<br />')
              ).append(el.empresa)
            )
          )
        )
      )
    })
  },
  changeTab: (filter) => {
    $('.servicio.active').removeClass('active')
    $(".servicio[data-filter='" + filter + "']").addClass('active')
    eventos.current_tab = filter
  },
  resizeThumbs: () => {
    let thumbs = $('#eventos_cards .image img')
    thumbs.each((i, el) => {
      let src = $(el).attr('src')
      if (src == '#') {
        return
      }
      let w = el.width
      let h = el.height
      let parent = $(el).parent()
      let r = w / h
      if (r > 1) {
        $(el).height(parent.height())
        $(el).width(parent.height() * r)
      } else {
        $(el).width(parent.width())
        $(el).height(parent.width() / r)
      }
    })
  },
  setup: () => {
    eventos.resizeThumbs()
    $('.servicio').click(function(e) {
      e.preventDefault()
      let filter = $(this).attr('data-filter')
      if (filter == eventos.current_tab) {
        return
      }
      eventos.changeTab(filter)
      eventos.changeEventos(filter)
    })
  }
}
let testimonios = {
  testimonios: [],
  current_testimonio: 0,
  cambiar: (id) => {
    if (id == testimonios.current_testimonio) {
      return
    }
    $('#testimonio').html('').append(
      $('<p></p>').html(testimonios.testimonios[id].contenido)
    ).append(
      $('<div></div>').attr('class', 'ui header').html(testimonios.testimonios[id].emisor)
    )
    $('#marcador').find(".icon[data-id='" + testimonios.current_testimonio + "']").addClass('outline')
    $('#marcador').find(".icon[data-id='" + id + "']").removeClass('outline')
    $('#marcador').find('.icon.outline').css('cursor', 'pointer')
    $('#marcador').find('.icon:not(.outline)').css('cursor', 'default')
    testimonios.current_testimonio = id
  },
  setup: () => {
    $('#marcador').find('.icon').click(function() {
      let id = $(this).attr('data-id')
      testimonios.cambiar(id)
    })
    $('#marcador').find('.icon.outline').css('cursor', 'pointer')
  }
}