/**
 * tmesschat.js — web chat widget for Taleoi.
 * Calls /tmesschat (same API as the Android app).
 * Integrates with the socket signaling server for real-time delivery.
 */
(function ($) {
  'use strict';

  // ── Config ──────────────────────────────────────────────────────────────────
  var API_URL    = '/tmesschat';
  // No explicit :3001 — the Node signaling server only speaks plain (non-TLS) HTTP on that raw
  // port; the default HTTPS port goes through the nginx reverse proxy that actually terminates
  // TLS and forwards to it, same as the Android app's AppConstants.SOCKET_URL. Hitting :3001
  // directly with https/wss fails the TLS handshake every time (confirmed via curl — plain TCP
  // connects fine, but "SSL routines::wrong version number" since the server there isn't TLS).
  var SOCKET_URL = 'https://www.taleoi.com';
  var FILES_BASE = 'https://www.taleoi.com/sites/default/files/';
  var POLL_MS    = 5000;
  var LOC_LABEL  = 'Shared location';

  // Client-side pre-upload compression — keeps chat images snappy on slow connections
  // and under the server's 8MB ceiling (see tmesschat_handler() opc 11I).
  var COMPRESS_THRESHOLD = 1024 * 1024; // only compress files bigger than this (1MB)
  var COMPRESS_MAX_DIM   = 1600;        // longest side, in px, after resize
  var COMPRESS_QUALITY   = 0.8;

  // Inline reply/forward markers — identical to the Android app constants.
  // Written as Unicode escape sequences to avoid raw control character bytes.
  var REPLY_MARKER = '\u0002R\u001F';
  var FWD_MARKER   = '\u0002F\u001F';
  var LOC_MARKER   = '\u0002L\u001F';
  var META_SEP     = '\u001F';
  var META_ETX     = '\u0003';

  // ── State ───────────────────────────────────────────────────────────────────
  var userId     = '0';
  var myName     = '';
  var activeCid  = null;
  var activeUid  = null;
  var activeName = null;
  var activeGid  = null;  // set instead of activeCid when a GROUP conversation is open
  var allRooms   = {};   // cid → room object from API
  var allMsgs    = {};   // cid → messages array (newest-first, as returned by API)
  var unreadCids = {};   // cid → true when a new message arrived while chat was not open
  var socket     = null;
  var pollTimer  = null;
  var isOpen     = false;
  var isTyping   = false;
  var typingTimer = null;
  var loaded     = false;

  // Groups (tc_group / tc_group_member / tc_group_message) — fully parallel to the 1:1 state
  // above, exactly like the Android app: never touches tc_chatroom/tc_chatmsm, comes entirely
  // from the signaling server's group-* socket events (there is no Drupal/HTTP path for groups
  // at all, unlike 1:1 chat's /tmesschat polling).
  var allGroups    = {}; // gid → group object (name, pictureUrl, updated, unreadCount, lastMessage, ...)
  var allGroupMsgs = {}; // gid → messages array (newest-first)
  var pendingGroupImage = null; // { gid, localId } for the in-flight group image send, if any

  // ── Bootstrap (Drupal.behaviors + legacy ready fallback) ────────────────────
  function init() {
    if ($('#tc-bar').data('tc-init')) return;
    userId = $('#tc-userid').val() || '0';
    myName = $('#tc-username').val() || '';
    if (!userId || userId === '0') return;
    $('#tc-bar').data('tc-init', true);

    bindUI();
    initSocket();
    firstLoad();

    window._tcOpenRoom = function (cid, uid, name) {
      if (!isOpen) { togglePanel(); }
      openChat(String(cid), String(uid), String(name));
    };
  }

  if (typeof Drupal !== 'undefined' && Drupal.behaviors) {
    Drupal.behaviors.tmesschat = { attach: function () { init(); } };
  } else {
    $(document).ready(init);
  }

  // ── Socket ──────────────────────────────────────────────────────────────────
  function initSocket() {
    if (typeof io === 'undefined') return;
    try {
      socket = io(SOCKET_URL, { transports: ['websocket', 'polling'] });
      window._tcSocket = socket; // debug hook — inspect from the browser console as needed
      socket.on('connect', function () {
        socket.emit('join', userId, myName);
        // One-shot bulk sync on every (re)connect — mirrors MyServiceZ's EVENT_CONNECT hook in
        // the Android app, since there's no HTTP polling fallback for groups to lean on.
        socket.emit('group-list', { uid: userId });
      });
      socket.on('receive-message', function (data) {
        onSocketMessage(data);
      });

      socket.on('group-list', function (data) {
        processGroups(data && data.groups);
        if (isOpen) renderRooms();
      });
      socket.on('group-created', function (snapshot) { onGroupSnapshot(snapshot); });
      socket.on('group-updated', function (snapshot) { onGroupSnapshot(snapshot); });
      socket.on('group-member-added', function (snapshot) { onGroupSnapshot(snapshot); });
      socket.on('group-member-removed', function (snapshot) { onGroupSnapshot(snapshot); });
      socket.on('group-removed-you', function (data) { onGroupGone(data); });
      socket.on('group-deleted', function (data) { onGroupGone(data); });
      socket.on('group-message', function (data) { onGroupSocketMessage(data); });
      socket.on('group-history', function (data) { onGroupHistory(data); });
      socket.on('group-message-error', function (data) { onGroupMessageError(data); });
    } catch (e) {
      socket = null;
    }
  }

  // Every group-create/update/member-added/member-removed broadcast carries the same full
  // snapshot shape ({gid, name, description, pictureUrl, creatorUid, updated, members:[...]})
  // — mirrors MyServiceZ.upsertGroupFromSnapshot(). lastMessage/unreadCount aren't part of a
  // snapshot (those only ever come from group-list/group-message), so they're preserved from
  // whatever's already cached.
  function onGroupSnapshot(snapshot) {
    if (!snapshot || !snapshot.gid) return;
    var gid = String(snapshot.gid);
    var existing = allGroups[gid] || {};
    var myRole = 'member';
    (snapshot.members || []).forEach(function (m) {
      if (String(m.uid) === String(userId)) myRole = m.role;
    });
    allGroups[gid] = {
      gid: gid,
      name: snapshot.name || '',
      description: snapshot.description || '',
      pictureUrl: snapshot.pictureUrl || '',
      creatorUid: snapshot.creatorUid || '',
      role: myRole,
      updated: snapshot.updated || existing.updated || 0,
      memberCount: (snapshot.members || []).length,
      unreadCount: existing.unreadCount || 0,
      lastMessage: existing.lastMessage || null
    };
    if (isOpen) renderRooms();
  }

  function onGroupGone(data) {
    if (!data || !data.gid) return;
    var gid = String(data.gid);
    delete allGroups[gid];
    delete allGroupMsgs[gid];
    if (activeGid === gid) {
      activeGid = null;
      $('#tc-chat-view').addClass('tc-hidden');
      $('#tc-rooms-view').removeClass('tc-hidden');
    }
    if (isOpen) renderRooms();
  }

  function processGroups(groups) {
    if (!groups) return;
    groups.forEach(function (g) {
      var gid = String(g.gid);
      allGroups[gid] = {
        gid: gid,
        name: g.name || '',
        description: g.description || '',
        pictureUrl: g.pictureUrl || '',
        creatorUid: g.creatorUid || '',
        role: g.role || 'member',
        updated: g.updated || 0,
        memberCount: g.memberCount || 0,
        unreadCount: g.unreadCount || 0,
        lastMessage: g.lastMessage || null
      };
    });
  }

  function onGroupHistory(data) {
    if (!data || !data.gid) return;
    var gid = String(data.gid);
    if (activeGid !== gid) return;
    var msgs = data.messages || [];
    if (!allGroupMsgs[gid]) allGroupMsgs[gid] = [];
    var known = {};
    allGroupMsgs[gid].forEach(function (m) { known[String(m.id)] = true; });
    msgs.forEach(function (m) {
      if (!known[String(m.id)]) { allGroupMsgs[gid].push(m); known[String(m.id)] = true; }
    });
    allGroupMsgs[gid].sort(function (a, b) { return parseInt(b.id, 10) - parseInt(a.id, 10); });
    renderGroupMessages(gid);
  }

  function onGroupSocketMessage(data) {
    var gid = String(data.gid);
    var msg = {
      id: data.id,
      whosend: String(data.whosend),
      senderName: data.senderName || '',
      msm: data.msm || '',
      urlima: data.urlima || '',
      urlaudi: data.urlaudi || '',
      created: data.created || Math.floor(Date.now() / 1000)
    };

    if (!allGroupMsgs[gid]) allGroupMsgs[gid] = [];

    // Drop the optimistic "Sending…" placeholder this message confirms (image sends
    // only — see sendGroupImage()); text messages never add one in the first place.
    if (data.localId) {
      allGroupMsgs[gid] = allGroupMsgs[gid].filter(function (m) { return m.localId !== data.localId; });
      if (pendingGroupImage && pendingGroupImage.localId === data.localId) {
        pendingGroupImage = null;
        $('#tc-img-btn').removeAttr('disabled');
      }
    }

    var exists = false;
    for (var i = 0; i < allGroupMsgs[gid].length; i++) {
      if (String(allGroupMsgs[gid][i].id) === String(msg.id)) { exists = true; break; }
    }
    if (!exists) allGroupMsgs[gid].unshift(msg);

    var isMine = String(msg.whosend) === String(userId);
    if (allGroups[gid]) {
      allGroups[gid].lastMessage = { id: msg.id, whosend: msg.whosend, msm: msg.msm, urlima: msg.urlima, urlaudi: msg.urlaudi, created: msg.created };
      allGroups[gid].updated = msg.created;
      if (!isMine && !(activeGid === gid && isOpen)) {
        allGroups[gid].unreadCount = (allGroups[gid].unreadCount || 0) + 1;
      }
    }

    if (activeGid === gid && isOpen) {
      renderGroupMessages(gid);
    } else {
      updateBadge();
    }
    if (isOpen) renderRooms();

    if (document.hidden && !isMine) {
      var groupName = allGroups[gid] ? allGroups[gid].name : '';
      showNotif(groupName || 'New group message', parseDisplayText(msg.msm));
    }
  }

  function onSocketMessage(data) {
    var cid = String(data.chatId);
    var msg = {
      id:        data.id,
      whosend:   String(data.from),
      msm:       data.message || '',
      urlima:    data.urlima  || '',
      urlaudi:   data.urlaudi || '',
      timestamp: new Date().toISOString().replace('T', ' ').substr(0, 19)
    };

    if (!allMsgs[cid]) allMsgs[cid] = [];
    var exists = false;
    for (var i = 0; i < allMsgs[cid].length; i++) {
      if (String(allMsgs[cid][i].id) === String(msg.id)) { exists = true; break; }
    }
    if (!exists) allMsgs[cid].unshift(msg);

    if (activeCid === cid && isOpen) {
      renderMessages(cid);
    } else {
      unreadCids[cid] = true;
      updateBadge();
    }

    if (allRooms[cid]) {
      allRooms[cid]._lastMsg = msg;
    }
    if (isOpen) renderRooms();

    if (document.hidden) {
      var roomName = allRooms[cid] ? allRooms[cid]._dispName || '' : '';
      showNotif(roomName || 'New message', parseDisplayText(msg.msm));
    }
  }

  // ── UI bindings ─────────────────────────────────────────────────────────────
  function bindUI() {
    $('#tc-bar').click(togglePanel);

    $('#tc-back').click(function () {
      if (activeGid && socket && socket.connected) {
        socket.emit('group-close', { gid: parseInt(activeGid, 10) });
      }
      activeCid  = null;
      activeGid  = null;
      activeUid  = null;
      activeName = null;
      $('#tc-chat-view').addClass('tc-hidden');
      $('#tc-rooms-view').removeClass('tc-hidden');
      renderRooms();
    });

    $('#tc-input').keypress(function (e) {
      if (e.which === 13) { e.preventDefault(); activeGid ? sendGroupMessage() : sendMessage(); }
    });

    $('#tc-input').bind('input', function () {
      isTyping = true;
      clearTimeout(typingTimer);
      typingTimer = setTimeout(function () { isTyping = false; }, 3000);
    });

    $('#tc-send').click(function () { activeGid ? sendGroupMessage() : sendMessage(); });

    $('#tc-img-btn').click(function () { $('#tc-img-input').click(); });

    $('#tc-img-input').bind('change', function () {
      var file = this.files && this.files[0];
      this.value = '';
      if (!file) return;
      if (activeGid) { sendGroupImage(file); } else { sendImage(file); }
    });
  }

  function togglePanel() {
    isOpen = !isOpen;
    if (isOpen) {
      $('#tc-panel').removeClass('tc-hidden');
      $('#tc-bar-toggle').text('▼');
      if (loaded) renderRooms();
      startPolling();
    } else {
      $('#tc-panel').addClass('tc-hidden');
      $('#tc-bar-toggle').text('▲');
      stopPolling();
    }
  }

  // ── First load (888X) ───────────────────────────────────────────────────────
  function firstLoad() {
    post({ opc: '888X', userid: userId }).then(function (resp) {
      loaded = true;
      if (resp && resp.resultx) {
        var rex = resp.resultx.rex;
        if (rex && rex !== '' && typeof rex === 'object') {
          processRooms(rex);
        }
      }
      if (isOpen) renderRooms();
    });
  }

  // ── Polling ─────────────────────────────────────────────────────────────────
  function startPolling() {
    if (pollTimer) return;
    pollTimer = setInterval(function () {
      var opc = '8XZ';
      if (activeCid) opc = isTyping ? '8XWZ' : '8XRZ';
      post({ opc: opc, userid: userId, cid: activeCid || '0', last_seen: '0' })
        .then(function (resp) {
          if (!resp || !resp.resultx) return;
          var rex = resp.resultx.rex;
          if (rex && rex !== '' && typeof rex === 'object') {
            processRooms(rex);
            if (isOpen) {
              renderRooms();
              if (activeCid) renderMessages(activeCid);
            }
          }
        });
    }, POLL_MS);
  }

  function stopPolling() {
    clearInterval(pollTimer);
    pollTimer = null;
  }

  // ── Process API room data ────────────────────────────────────────────────────
  function processRooms(rooms) {
    if (!rooms) return;
    Object.keys(rooms).forEach(function (k) {
      var room = rooms[k];
      var cid  = String(room.id);
      var uids   = (room.uids      || '').split('-');
      var names  = (room.usernames || '').split('-');
      var isFirst = (uids[0] === String(userId));
      room._dispName  = isFirst ? (names[1] || '') : (names[0] || '');
      room._recipUid  = isFirst ? (uids[1]  || '') : (uids[0]  || '');
      allRooms[cid] = room;

      if (room.messages && room.messages.length) {
        if (!allMsgs[cid]) allMsgs[cid] = [];
        var known = {};
        allMsgs[cid].forEach(function (m) { known[String(m.id)] = true; });
        room.messages.forEach(function (m) {
          if (!known[String(m.id)]) {
            allMsgs[cid].push(m);
            known[String(m.id)] = true;
          }
        });
        allMsgs[cid].sort(function (a, b) {
          return parseInt(b.id, 10) - parseInt(a.id, 10);
        });
        room._lastMsg = allMsgs[cid][0] || null;
      }
    });
  }

  // ── Render room list (1:1 rooms + groups, merged and sorted by recency together) ──────────
  // Mirrors FragmentChatRoom's merged list in the Android app — groups aren't a second-class
  // list bolted on separately, they're interleaved with 1:1 conversations by last-activity time.
  function renderRooms() {
    var $list = $('#tc-rooms-list');

    var items = [];
    Object.keys(allRooms).forEach(function (k) {
      var room = allRooms[k];
      var msgs = allMsgs[String(room.id)];
      var ts = (msgs && msgs[0]) ? msgs[0].timestamp : '0';
      items.push({ type: 'room', sortKey: ts, data: room });
    });
    Object.keys(allGroups).forEach(function (k) {
      var group = allGroups[k];
      items.push({ type: 'group', sortKey: unixToDbTimestamp(group.updated || 0), data: group });
    });

    items.sort(function (a, b) {
      return b.sortKey > a.sortKey ? 1 : (b.sortKey < a.sortKey ? -1 : 0);
    });

    if (!items.length) {
      $list.html('<div class="tc-empty">No conversations yet</div>');
      return;
    }

    var html = '';
    items.forEach(function (item) {
      html += (item.type === 'group') ? renderGroupRow(item.data) : renderRoomRow(item.data);
    });

    $list.html(html);

    $list.find('.tc-room[data-type="room"]').click(function () {
      openChat(
        String($(this).data('cid')),
        String($(this).data('uid')),
        String($(this).data('name'))
      );
    });
    $list.find('.tc-room[data-type="group"]').click(function () {
      openGroupChat(String($(this).data('gid')), String($(this).data('name')));
    });
  }

  function renderRoomRow(room) {
    var cid    = String(room.id);
    var disp   = room._dispName  || '';
    var recip  = room._recipUid  || '';
    var online = (room.online    || '0-0').split('-');
    var uids   = (room.uids      || '').split('-');
    var msgs   = allMsgs[cid]   || [];
    var lastMsg = msgs[0]        || null;

    var theirIdx = (uids[0] === String(userId)) ? 1 : 0;
    var theirOnl = online[theirIdx] || '0';
    var onlClass = theirOnl === '2' ? 'tc-typing' : (theirOnl === '1' ? 'tc-online' : '');
    var onlLabel = theirOnl === '2' ? 'typing…'   : (theirOnl === '1' ? 'online'    : '');

    var preview = '';
    if (lastMsg) {
      preview = parseDisplayText(lastMsg.msm);
      if (!preview) {
        if (lastMsg.urlima  && lastMsg.urlima.indexOf('public://') >= 0)  preview = '📷';
        else if (lastMsg.urlaudi && lastMsg.urlaudi.indexOf('public://') >= 0) preview = '🎵';
      }
      if (String(lastMsg.whosend) === String(userId)) preview = 'You: ' + preview;
    }

    var timeStr = lastMsg ? fmtTime(lastMsg.timestamp) : '';
    var unread  = unreadCids[cid] ||
                  (String(room.ulast) !== String(userId) && room.status === '0');
    var active  = (activeCid === cid && !activeGid);

    return '<div class="tc-room' + (active ? ' tc-active' : '') + '"'
         + ' data-type="room"'
         + ' data-cid="'  + escAttr(cid)   + '"'
         + ' data-uid="'  + escAttr(recip) + '"'
         + ' data-name="' + escAttr(disp)  + '">'
         + '<div class="tc-room-avatar">' + escHtml((disp || '?').charAt(0).toUpperCase()) + '</div>'
         + '<div class="tc-room-info">'
         +   '<div class="tc-room-top">'
         +     '<span class="tc-room-name">'  + escHtml(disp)    + '</span>'
         +     (onlLabel ? '<span class="tc-room-online ' + onlClass + '">' + escHtml(onlLabel) + '</span>' : '')
         +     '<span class="tc-room-time">'  + escHtml(timeStr) + '</span>'
         +   '</div>'
         +   '<div class="tc-room-bottom">'
         +     '<span class="tc-room-preview">' + escHtml(preview) + '</span>'
         +     (unread ? '<span class="tc-unread-dot"></span>' : '')
         +   '</div>'
         + '</div>'
         + '</div>';
  }

  // Same .tc-room skeleton as renderRoomRow (avatar/info/top/bottom) so a group row matches the
  // 1:1 rows visually — data-type="group" + data-gid instead of data-cid/data-uid is what the
  // click-delegation in renderRooms() switches on. No online/typing indicator (doesn't apply to
  // a group), and the avatar is a rounded square instead of a circle as the only visual cue
  // distinguishing a group from a person, mirroring common chat-app convention.
  function renderGroupRow(group) {
    var gid = group.gid;
    var name = group.name || '';
    var lastMsg = group.lastMessage;

    var preview = '';
    if (lastMsg) {
      preview = parseDisplayText(lastMsg.msm);
      if (!preview) {
        if (lastMsg.urlima  && lastMsg.urlima.indexOf('public://') >= 0)  preview = '📷';
        else if (lastMsg.urlaudi && lastMsg.urlaudi.indexOf('public://') >= 0) preview = '🎵';
      }
      if (String(lastMsg.whosend) === String(userId)) preview = 'You: ' + preview;
    } else {
      preview = 'No messages yet';
    }

    var timeStr = group.updated ? fmtTime(unixToDbTimestamp(group.updated)) : '';
    var unread  = group.unreadCount > 0;
    var active  = activeGid === gid;

    return '<div class="tc-room' + (active ? ' tc-active' : '') + '"'
         + ' data-type="group"'
         + ' data-gid="'  + escAttr(gid)  + '"'
         + ' data-name="' + escAttr(name) + '">'
         + '<div class="tc-room-avatar tc-group-avatar">' + escHtml((name || '?').charAt(0).toUpperCase()) + '</div>'
         + '<div class="tc-room-info">'
         +   '<div class="tc-room-top">'
         +     '<span class="tc-room-name">'  + escHtml(name)    + '</span>'
         +     '<span class="tc-room-time">'  + escHtml(timeStr) + '</span>'
         +   '</div>'
         +   '<div class="tc-room-bottom">'
         +     '<span class="tc-room-preview">' + escHtml(preview) + '</span>'
         +     (unread ? '<span class="tc-unread-dot"></span>' : '')
         +   '</div>'
         + '</div>'
         + '</div>';
  }

  // ── Open a chat ──────────────────────────────────────────────────────────────
  function openChat(cid, uid, name) {
    activeCid  = cid;
    activeGid  = null;
    activeUid  = uid;
    activeName = name;
    delete unreadCids[cid];
    updateBadge();

    $('#tc-chat-name').text(name);
    $('#tc-chat-online').text('');
    $('#tc-img-btn').show();
    $('#tc-rooms-view').addClass('tc-hidden');
    $('#tc-chat-view').removeClass('tc-hidden');
    renderMessages(cid);
    $('#tc-input').focus();
  }

  // ── Open a group chat ────────────────────────────────────────────────────────
  // Parallel to openChat() — group image sending goes through sendGroupImage() (socket-based,
  // no HTTP upload endpoint); audio still has no send control in this web widget.
  function openGroupChat(gid, name) {
    activeGid  = gid;
    activeCid  = null;
    activeUid  = null;
    activeName = name;
    if (allGroups[gid]) allGroups[gid].unreadCount = 0;
    updateBadge();

    $('#tc-chat-name').text(name);
    $('#tc-chat-online').text('');
    $('#tc-img-btn').show();
    $('#tc-rooms-view').addClass('tc-hidden');
    $('#tc-chat-view').removeClass('tc-hidden');
    renderGroupMessages(gid);
    $('#tc-input').focus();

    if (socket && socket.connected) {
      var gidNum = parseInt(gid, 10);
      socket.emit('group-open', { gid: gidNum, uid: userId });
      socket.emit('group-history', { gid: gidNum, uid: userId });
    }
  }

  // ── Render messages ──────────────────────────────────────────────────────────
  function renderMessages(cid) {
    var msgs  = allMsgs[cid] || [];
    var $el   = $('#tc-msgs');
    var order = msgs.slice().reverse();
    $el.html(order.map(renderMsg).join(''));
    $el.scrollTop($el[0].scrollHeight);
  }

  function renderMsg(msg) {
    var isMe   = String(msg.whosend) === String(userId);
    var side   = isMe ? 'tc-out' : 'tc-in';
    var parsed = parseInlineMeta(msg.msm || '');
    var text   = parsed.text;
    var meta   = parsed.meta;
    var isSalt = (text.length === 18 && text.indexOf(' ') < 0);

    var metaHtml = '';
    if (meta && meta.type === 'fwd') {
      metaHtml = '<div class="tc-meta tc-fwd">&#x21AA; Forwarded from ' + escHtml(meta.sender) + '</div>';
    } else if (meta && meta.type === 'reply') {
      metaHtml = '<div class="tc-meta tc-reply">'
               + '<span class="tc-reply-user">' + escHtml(meta.sender) + '</span>'
               + '<span class="tc-reply-text">'  + escHtml(meta.orig)  + '</span>'
               + '</div>';
    }

    var body = '';
    if (msg.urlima === '_loading_') {
      body += '<div class="tc-text tc-img-uploading">&#128247; Sending…</div>';
    } else if (msg.urlima && msg.urlima.indexOf('public://') >= 0) {
      var src = msg.urlima.replace('public://', FILES_BASE);
      body += '<img class="tc-img" src="' + escAttr(src) + '" loading="lazy">';
    }
    if (msg.urlaudi && msg.urlaudi.indexOf('public://') >= 0) {
      var asrc = msg.urlaudi.replace('public://', FILES_BASE);
      body += '<audio class="tc-audio" controls><source src="' + escAttr(asrc) + '" type="audio/mp4"></audio>';
    }
    if (meta && meta.type === 'loc') {
      body += locationLinkHtml(meta.lat, meta.lng);
    } else if (!isSalt && text) {
      body += '<div class="tc-text">' + linkifyText(escHtml(text)) + '</div>';
    }

    var time = fmtTime(msg.timestamp || '');

    return '<div class="tc-msg ' + side + '">'
         + metaHtml + body
         + '<span class="tc-time">' + escHtml(time) + '</span>'
         + '</div>';
  }

  // ── Render group messages ────────────────────────────────────────────────────
  function renderGroupMessages(gid) {
    var msgs  = allGroupMsgs[gid] || [];
    var $el   = $('#tc-msgs');
    var order = msgs.slice().reverse();
    $el.html(order.map(renderGroupMsg).join(''));
    $el.scrollTop($el[0].scrollHeight);
  }

  // Same shape as renderMsg(), plus a sender-name label on incoming bubbles — unlike a 1:1
  // conversation, "not me" doesn't tell you who actually sent it. Reuses the identical
  // urlima/urlaudi rendering, so images/audio sent from the Android app (or sendGroupImage()
  // here) display correctly. Audio still has no send control in this web widget.
  function renderGroupMsg(msg) {
    var isMe   = String(msg.whosend) === String(userId);
    var side   = isMe ? 'tc-out' : 'tc-in';
    var parsed = parseInlineMeta(msg.msm || '');
    var text   = parsed.text;
    var meta   = parsed.meta;
    var isSalt = (text.length === 18 && text.indexOf(' ') < 0);

    var senderHtml = '';
    if (!isMe) {
      senderHtml = '<div class="tc-group-sender">' + escHtml(msg.senderName || msg.whosend) + '</div>';
    }

    var metaHtml = '';
    if (meta && meta.type === 'fwd') {
      metaHtml = '<div class="tc-meta tc-fwd">&#x21AA; Forwarded from ' + escHtml(meta.sender) + '</div>';
    } else if (meta && meta.type === 'reply') {
      metaHtml = '<div class="tc-meta tc-reply">'
               + '<span class="tc-reply-user">' + escHtml(meta.sender) + '</span>'
               + '<span class="tc-reply-text">'  + escHtml(meta.orig)  + '</span>'
               + '</div>';
    }

    var body = '';
    if (msg.urlima === '_loading_') {
      body += '<div class="tc-text tc-img-uploading">&#128247; Sending…</div>';
    } else if (msg.urlima && msg.urlima.indexOf('public://') >= 0) {
      var src = msg.urlima.replace('public://', FILES_BASE);
      body += '<img class="tc-img" src="' + escAttr(src) + '" loading="lazy">';
    }
    if (msg.urlaudi && msg.urlaudi.indexOf('public://') >= 0) {
      var asrc = msg.urlaudi.replace('public://', FILES_BASE);
      body += '<audio class="tc-audio" controls><source src="' + escAttr(asrc) + '" type="audio/mp4"></audio>';
    }
    if (meta && meta.type === 'loc') {
      body += locationLinkHtml(meta.lat, meta.lng);
    } else if (!isSalt && text) {
      body += '<div class="tc-text">' + linkifyText(escHtml(text)) + '</div>';
    }

    var time = fmtTime(unixToDbTimestamp(msg.created || 0));

    return '<div class="tc-msg ' + side + '">'
         + senderHtml + metaHtml + body
         + '<span class="tc-time">' + escHtml(time) + '</span>'
         + '</div>';
  }

  // ── Send (opc 11) ────────────────────────────────────────────────────────────
  function sendMessage() {
    var text = $.trim($('#tc-input').val());
    if (!text || !activeCid) return;
    $('#tc-input').val('').focus();
    isTyping = false;

    post({ opc: '11', userid: userId, cid: activeCid, msm: text, fid: '0' })
      .then(function (resp) {
        if (!resp) return;
        var ok = (resp.resp === 3 || resp.resp === '3' ||
                  resp.resp === 11 || resp.resp === '11');
        if (!ok) return;

        var msg = {
          id:        resp.lastmid || String(Date.now()),
          whosend:   String(userId),
          msm:       text,
          urlima:    '',
          urlaudi:   '',
          timestamp: new Date().toISOString().replace('T', ' ').substr(0, 19)
        };
        if (!allMsgs[activeCid]) allMsgs[activeCid] = [];
        allMsgs[activeCid].unshift(msg);
        renderMessages(activeCid);

        if (socket && socket.connected) {
          socket.emit('send-message', {
            id:      resp.lastmid,
            chatId:  activeCid,
            from:    String(userId),
            to:      String(activeUid),
            message: text,
            type:    'text'
          });
        }
      });
  }

  // ── Send group message ───────────────────────────────────────────────────────
  // Purely socket-based — group-message-send both persists (tc_group_message, via the
  // signaling server) and delivers, unlike 1:1's HTTP-then-socket-notify split. The server
  // echoes the message back to the sender too (see group-message-send in signaling-server-2.js),
  // so onGroupSocketMessage() is what actually appends it here — no optimistic local insert.
  function sendGroupMessage() {
    var text = $.trim($('#tc-input').val());
    if (!text || !activeGid) return;
    if (!socket || !socket.connected) return;
    $('#tc-input').val('').focus();
    isTyping = false;

    socket.emit('group-message-send', {
      gid:     parseInt(activeGid, 10),
      from:    userId,
      message: text,
      type:    'text',
      localId: 'web-' + Date.now() + '-' + Math.random().toString(36).substr(2, 8)
    });
  }

  // ── Send group image (group-message-send, type:"image") ─────────────────────
  // Unlike 1:1 (HTTP upload then socket notify), groups have no HTTP upload endpoint —
  // the server expects the raw file as a base64 string on the same socket event used for
  // text (see group-message-send in signaling-server-2.js), and does its own resize/compress
  // (sharp, 1024x1024 max, jpeg75) server-side before writing it and echoing "group-message"
  // back to every member including the sender. That echo is what onGroupSocketMessage() uses
  // to both confirm this optimistic placeholder (matched by localId) and actually display it.
  function sendGroupImage(file) {
    if (!activeGid) return;
    if (!socket || !socket.connected) return;
    if (pendingGroupImage) return; // one at a time — button is disabled meanwhile anyway

    var gid     = activeGid;
    var localId = 'web-img-' + Date.now() + '-' + Math.random().toString(36).substr(2, 8);
    pendingGroupImage = { gid: gid, localId: localId };

    if (!allGroupMsgs[gid]) allGroupMsgs[gid] = [];
    allGroupMsgs[gid].unshift({
      id: localId, localId: localId, whosend: String(userId), senderName: myName,
      msm: '', urlima: '_loading_', urlaudi: '', created: Math.floor(Date.now() / 1000)
    });
    renderGroupMessages(gid);
    $('#tc-img-btn').attr('disabled', 'disabled');

    // Safety net — if the server/socket never answers at all (disconnect mid-flight etc.),
    // don't leave "Sending…" stuck forever (see the 1:1 image-send bug this mirrors).
    var timeoutId = setTimeout(function () { onGroupMessageError({}); }, 20000);

    compressImageIfNeeded(file, function (uploadFile) {
      var reader = new FileReader();
      reader.onload = function () {
        clearTimeout(timeoutId);
        if (!pendingGroupImage || pendingGroupImage.localId !== localId) return; // already cleared
        var base64 = (reader.result || '').split(',')[1] || '';
        if (!base64 || !socket || !socket.connected) { onGroupMessageError({}); return; }
        socket.emit('group-message-send', {
          gid:      parseInt(gid, 10),
          from:     userId,
          message:  '',
          type:     'image',
          filedata: base64,
          localId:  localId
        });
      };
      reader.onerror = function () {
        clearTimeout(timeoutId);
        onGroupMessageError({});
      };
      reader.readAsDataURL(uploadFile);
    });
  }

  // Clears whatever group image send is currently in flight — used both for explicit
  // "group-message-error" replies (bad file, not a member, rate-limited) and the
  // client-side timeout above. Doesn't distinguish by localId: only one send is ever
  // in flight at a time (the button is disabled meanwhile), so there's nothing to match.
  function onGroupMessageError(data) {
    if (!pendingGroupImage) return;
    var gid     = pendingGroupImage.gid;
    var localId = pendingGroupImage.localId;
    pendingGroupImage = null;
    $('#tc-img-btn').removeAttr('disabled');
    if (allGroupMsgs[gid]) {
      allGroupMsgs[gid] = allGroupMsgs[gid].filter(function (m) { return m.localId !== localId; });
    }
    if (activeGid === gid && isOpen) renderGroupMessages(gid);
    if (data && data.error) { console.warn('group image send failed:', data.error); }
  }

  // Resizes/re-encodes as JPEG when a file exceeds COMPRESS_THRESHOLD. Skips GIFs —
  // redrawing to canvas would flatten an animated GIF to a single static frame.
  // Falls back to the original file untouched if decoding/encoding fails for any reason.
  function compressImageIfNeeded(file, callback) {
    if (file.size <= COMPRESS_THRESHOLD || file.type === 'image/gif') {
      callback(file);
      return;
    }

    var img = new Image();
    var url = URL.createObjectURL(file);

    img.onload = function () {
      URL.revokeObjectURL(url);

      var scale  = Math.min(1, COMPRESS_MAX_DIM / Math.max(img.width, img.height));
      var canvas = document.createElement('canvas');
      canvas.width  = Math.round(img.width  * scale);
      canvas.height = Math.round(img.height * scale);
      canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);

      canvas.toBlob(function (blob) {
        callback(blob || file, !!blob);
      }, 'image/jpeg', COMPRESS_QUALITY);
    };
    img.onerror = function () {
      URL.revokeObjectURL(url);
      callback(file);
    };
    img.src = url;
  }

  // ── Send image (opc 11I) ─────────────────────────────────────────────────────
  function sendImage(file) {
    if (!activeCid) return;

    var tempId = '_img_' + Date.now();
    if (!allMsgs[activeCid]) allMsgs[activeCid] = [];
    allMsgs[activeCid].unshift({
      id: tempId, whosend: String(userId), msm: '', urlima: '_loading_',
      urlaudi: '', timestamp: new Date().toISOString().replace('T', ' ').substr(0, 19)
    });
    renderMessages(activeCid);
    // .attr()/.removeAttr(), not .prop() — this site's jQuery predates 1.6 (which is
    // when .prop() was introduced), and every other call in this file sticks to
    // pre-1.6-safe APIs already.
    $('#tc-img-btn').attr('disabled', 'disabled');

    compressImageIfNeeded(file, function (uploadFile, wasCompressed) {
      var form = new FormData();
      form.append('opc',    '11I');
      form.append('userid', String(userId));
      form.append('cid',    activeCid);
      form.append('image',  uploadFile, wasCompressed ? 'upload.jpg' : file.name);

      fetch(API_URL, { method: 'POST', body: form })
        .then(function (r) { return r.ok ? r.json() : null; })
        .then(function (resp) {
          allMsgs[activeCid] = allMsgs[activeCid].filter(function (m) { return m.id !== tempId; });
          if (resp && (resp.resp === 3 || resp.resp === '3') && resp.urlima) {
            var msg = {
              id:        resp.lastmid || String(Date.now()),
              whosend:   String(userId),
              msm:       '',
              urlima:    resp.urlima,
              urlaudi:   '',
              timestamp: new Date().toISOString().replace('T', ' ').substr(0, 19)
            };
            allMsgs[activeCid].unshift(msg);
            if (socket && socket.connected) {
              socket.emit('send-message', {
                id:      resp.lastmid,
                chatId:  activeCid,
                from:    String(userId),
                to:      String(activeUid),
                message: '',
                urlima:  resp.urlima,
                type:    'image'
              });
            }
          }
          renderMessages(activeCid);
        })
        .catch(function () {
          allMsgs[activeCid] = allMsgs[activeCid].filter(function (m) { return m.id !== tempId; });
          renderMessages(activeCid);
        })
        .then(function () { $('#tc-img-btn').removeAttr('disabled'); });
    });
  }

  // ── Inline meta parser ────────────────────────────────────────────────────────
  function parseInlineMeta(raw) {
    if (!raw) return { text: '', meta: null };

    if (raw.substr(0, FWD_MARKER.length) === FWD_MARKER) {
      var end = raw.indexOf(META_ETX);
      if (end < 0) return { text: raw, meta: null };
      var sender = raw.substring(FWD_MARKER.length, end);
      return { text: raw.substring(end + 1), meta: { type: 'fwd', sender: sender } };
    }

    if (raw.substr(0, REPLY_MARKER.length) === REPLY_MARKER) {
      var rend   = raw.indexOf(META_ETX);
      if (rend < 0) return { text: raw, meta: null };
      var parts  = raw.substring(REPLY_MARKER.length, rend);
      var sep    = parts.indexOf(META_SEP);
      var rsender = sep >= 0 ? parts.substring(0, sep)  : parts;
      var orig    = sep >= 0 ? parts.substring(sep + 1) : '';
      return { text: raw.substring(rend + 1), meta: { type: 'reply', sender: rsender, orig: orig } };
    }

    // Shared location — same "lat" + META_SEP + "lng" encoding the Android app writes
    // (see LOC_MARKER / sendLocationMessage() in ActivityChat.java). No trailing text.
    if (raw.substr(0, LOC_MARKER.length) === LOC_MARKER) {
      var lend = raw.indexOf(META_ETX);
      if (lend < 0) return { text: raw, meta: null };
      var coords = raw.substring(LOC_MARKER.length, lend);
      var lsep   = coords.indexOf(META_SEP);
      var lat    = lsep >= 0 ? coords.substring(0, lsep)  : coords;
      var lng    = lsep >= 0 ? coords.substring(lsep + 1) : '';
      return { text: raw.substring(lend + 1), meta: { type: 'loc', lat: lat, lng: lng } };
    }

    return { text: raw, meta: null };
  }

  function parseDisplayText(msm) {
    var p = parseInlineMeta(msm || '');
    var t = p.text;
    if (p.meta && p.meta.type === 'loc') return '📍 ' + LOC_LABEL;
    if (t.length === 18 && t.indexOf(' ') < 0) return '';
    return (p.meta ? (p.meta.type === 'fwd' ? '↪ ' : '↩ ') : '') + t;
  }

  // ── Badge & notifications ─────────────────────────────────────────────────────
  function updateBadge() {
    var n = Object.keys(unreadCids).length;
    Object.keys(allGroups).forEach(function (k) {
      if (allGroups[k].unreadCount > 0) n++;
    });
    var $b = $('#tc-badge');
    if (n > 0) { $b.text(n).removeClass('tc-hidden'); }
    else        { $b.addClass('tc-hidden'); }
  }

  function showNotif(title, body) {
    if (!('Notification' in window)) return;
    if (Notification.permission === 'granted') {
      new Notification(title, {
        body: body || '',
        icon: 'https://www.taleoi.com/sites/default/files/taleoi.ico'
      });
    } else if (Notification.permission === 'default') {
      Notification.requestPermission();
    }
  }

  // ── HTTP ──────────────────────────────────────────────────────────────────────
  function post(params) {
    var form = new FormData();
    Object.keys(params).forEach(function (k) { form.append(k, String(params[k])); });
    return fetch(API_URL, { method: 'POST', body: form })
      .then(function (r) { return r.ok ? r.json() : null; })
      .catch(function () { return null; });
  }

  // ── Helpers ───────────────────────────────────────────────────────────────────
  // Group timestamps (tc_group.updated, tc_group_message.created) are unix seconds, unlike
  // 1:1's "YYYY-MM-DD HH:MM:SS" strings — converts to that same shape (local time) so both can
  // share fmtTime() and the plain string comparison renderRooms() sorts by.
  // Formatted with UTC getters, not local — fmtTime() (below) always treats this
  // "YYYY-MM-DD HH:MM:SS" shape as UTC (appending 'Z' before parsing), matching the raw
  // DB timestamp strings 1:1 chat passes it directly. Using local getters here would hand
  // fmtTime() an already-local time it then re-shifts by the viewer's UTC offset again.
  function unixToDbTimestamp(unixSec) {
    if (!unixSec) return '0';
    var d = new Date(unixSec * 1000);
    function pad(n) { return (n < 10 ? '0' : '') + n; }
    return d.getUTCFullYear() + '-' + pad(d.getUTCMonth() + 1) + '-' + pad(d.getUTCDate()) + ' '
         + pad(d.getUTCHours()) + ':' + pad(d.getUTCMinutes()) + ':' + pad(d.getUTCSeconds());
  }

  function fmtTime(ts) {
    if (!ts) return '';
    // DB timestamps are plain "YYYY-MM-DD HH:MM:SS" in UTC (MySQL TIMESTAMP column).
    // Without a trailing 'Z', the JS Date parser treats a date-TIME string (unlike a
    // date-only string) as local time, not UTC — silently shifting displayed times by
    // the viewer's UTC offset. The 'Z' forces correct UTC interpretation.
    var d = new Date(ts.replace(' ', 'T') + 'Z');
    if (isNaN(d.getTime())) return '';
    var now = new Date();
    if (d.toDateString() === now.toDateString()) {
      return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    }
    return (d.getMonth() + 1) + '/' + d.getDate();
  }

  function escHtml(s) {
    return String(s == null ? '' : s)
      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
  }

  function escAttr(s) { return escHtml(s); }

  // Wraps http(s) URLs in a message's already-escaped text with clickable links. Must run
  // AFTER escHtml() — matching against the escaped string is safe since escaping never
  // introduces whitespace inside a URL run, and the entities it does introduce (e.g. "&amp;"
  // for a literal "&" in a query string) are exactly what a browser expects inside an href
  // attribute anyway. target="_blank" + rel="noopener noreferrer" so following a link never
  // navigates away from (or exposes window.opener to) the page the chat widget is floating on.
  function linkifyText(escapedText) {
    return escapedText.replace(/https?:\/\/[^\s<]+/g, function (url) {
      var trail = '';
      var m = url.match(/[.,!?:;)\]}'"]+$/);
      if (m) { trail = m[0]; url = url.slice(0, -trail.length); }
      if (!url) return trail;
      return '<a href="' + url + '" target="_blank" rel="noopener noreferrer" class="tc-link">' + url + '</a>' + trail;
    });
  }

  // A shared location (LOC_MARKER — see parseInlineMeta()) renders as a tappable card
  // linking to Google Maps, matching how the Android app opens a geo: intent for the
  // same coordinates. Uses an https:// maps URL instead since geo: isn't reliably
  // clickable in desktop browsers.
  function locationLinkHtml(lat, lng) {
    var mapUrl = 'https://www.google.com/maps?q=' + encodeURIComponent(lat) + ',' + encodeURIComponent(lng);
    return '<a class="tc-location" href="' + escAttr(mapUrl) + '" target="_blank" rel="noopener noreferrer">'
         + '&#128205; ' + escHtml(LOC_LABEL) + '</a>';
  }

})(jQuery);


<!DOCTYPE html>
<!--[if IEMobile 7]><html class="iem7"  lang="en" dir="ltr"><![endif]-->
<!--[if lte IE 6]><html class="lt-ie9 lt-ie8 lt-ie7"  lang="en" dir="ltr"><![endif]-->
<!--[if (IE 7)&(!IEMobile)]><html class="lt-ie9 lt-ie8"  lang="en" dir="ltr"><![endif]-->
<!--[if IE 9]><html class="lt-ie9"  lang="en" dir="ltr"><![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--><html  lang="en" dir="ltr" prefix="content: http://purl.org/rss/1.0/modules/content/ dc: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/ rdfs: http://www.w3.org/2000/01/rdf-schema# sioc: http://rdfs.org/sioc/ns# sioct: http://rdfs.org/sioc/types# skos: http://www.w3.org/2004/02/skos/core# xsd: http://www.w3.org/2001/XMLSchema#"><!--<![endif]-->

<head>
  <meta charset="utf-8" />
<link rel="shortcut icon" href="https://www.taleoi.com/sites/default/files/taleoi.ico" type="image/vnd.microsoft.icon" />
<link rel="apple-touch-icon" href="https://www.taleoi.com/sites/default/files/tlog.png" type="image/png" />
<link rel="apple-touch-icon-precomposed" href="https://www.taleoi.com/sites/default/files/tlog.png" type="image/png" />
<meta name="description" content="La reconstrucción del puente de la avenida Alfonso López empezará este mes" />
<meta name="generator" content="Drupal 7 (https://www.drupal.org)" />
<link rel="canonical" href="https://www.taleoi.com/colombia/iniciaria-mes-reconstruccion-puente-avenida-alfonso-lopez-202509-40587" />
<link rel="shortlink" href="https://www.taleoi.com/node/40587" />
<meta property="og:site_name" content="taleoi.com" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Iniciaría este mes la reconstrucción del puente de la avenida Alfonso López" />
<meta property="og:url" content="https://www.taleoi.com/colombia/iniciaria-mes-reconstruccion-puente-avenida-alfonso-lopez-202509-40587" />
<meta property="og:description" content="La reconstrucción del puente de la avenida Alfonso López empezará este mes" />
<meta property="og:updated_time" content="2025-09-05T07:32:23-05:00" />
<meta property="og:image" content="https://www.taleoi.com/sites/default/files/noticias/imagen/whatsapp-image-2025-07-01-at-10.31.22-am-scaled.jpeg" />
<meta property="og:image:url" content="https://www.taleoi.com/sites/default/files/noticias/imagen/whatsapp-image-2025-07-01-at-10.31.22-am-scaled.jpeg" />
<meta property="article:published_time" content="2025-09-05T07:31:57-05:00" />
<meta property="article:modified_time" content="2025-09-05T07:32:23-05:00" />
  <title>Iniciaría este mes la reconstrucción del puente de la avenida Alfonso López | taleoi.com</title>

<!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> -->
<!-- <meta charset="utf-8"> -->

<!-- <meta name="google-site-verification" content="HqY8cMYKFJy2llff1rJ5_3g-mh6tN-HDChFKTy_I-98"> -->
<!-- <meta name="alexaVerifyID" content="nOY6rS4KWqy18QAIh6gSQ_mW_YY" /> -->
<!-- <meta name="keywords"content="nOY6rS4KWqy18QAIh6gSQ_mW_YY" /> --> 
      <meta name="MobileOptimized" content="width">
    <meta name="HandheldFriendly" content="true">
 <!--   <meta name="viewport" content="width=device-width"> -->
 <meta name="viewport" content="width=device-width,user-scalable=no" /> 

    <meta http-equiv="content-type"  content="text/html;charset=UTF-8">
  <link rel="stylesheet" href="https://www.taleoi.com/sites/default/files/css/css_lQaZfjVpwP_oGNqdtWCSpJT1EMqXdMiU84ekLLxQnc4.css" media="all" />
<link rel="stylesheet" href="https://www.taleoi.com/sites/default/files/css/css_TUm03aP9NnVEBU0oQx-pvxhMT-EkILEkVN1W5pI9D_U.css" media="all" />
<link rel="stylesheet" href="https://www.taleoi.com/sites/default/files/css/css_cFG0kL-PheZOgzGNpUWz7C6QdiinJ0w-CO1QrpQptTA.css" media="all" />
<link rel="stylesheet" href="https://www.taleoi.com/sites/default/files/css/css_hmoz5OohgW1eP68ll4FGdFcfOkWMiTjFWZ0rYi2EOz0.css" media="all" />
<link rel="stylesheet" href="https://www.taleoi.com/sites/default/files/css/css_47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU.css" media="print" />
  <script src="https://www.taleoi.com/sites/default/files/js/js_YD9ro0PAqY25gGWrTki6TjRUG8TdokmmxjfqpNNfzVU.js"></script>
<script>jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","setHasJsCookie":0,"ajaxPageState":{"theme":"leticiahoy","theme_token":"6412UHyb-mjsuALFu5lc0u30PQUjOp_BBRxS4LTSjWM","css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"sites\/all\/modules\/calendar\/css\/calendar_multiday.css":1,"modules\/comment\/comment.css":1,"modules\/field\/theme\/field.css":1,"sites\/all\/modules\/format_currency\/format_currency.css":1,"modules\/node\/node.css":1,"sites\/all\/modules\/bk19-office_hours\/office_hours.css":1,"modules\/poll\/poll.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/youtube\/css\/youtube.css":1,"sites\/all\/modules\/views\/css\/views.css":1,"sites\/all\/modules\/ckeditor\/css\/ckeditor.css":1,"sites\/all\/modules\/ctools\/css\/ctools.css":1,"sites\/all\/modules\/panels\/css\/panels.css":1,"sites\/all\/modules\/rate\/rate.css":1,"sites\/all\/modules\/video\/css\/video.css":1,"sites\/all\/modules\/panels\/plugins\/layouts\/flexible\/flexible.css":1,"sites\/all\/modules\/rate\/templates\/thumbs-up-down\/thumbs-up-down.css":1,"public:\/\/ctools\/css\/96144906d666fcfc8b8faf3142b84160.css":1,"sites\/all\/themes\/leticiahoy\/system.menus.css":1,"sites\/all\/themes\/leticiahoy\/system.messages.css":1,"sites\/all\/themes\/leticiahoy\/system.theme.css":1,"sites\/all\/themes\/leticiahoy\/css\/styles.css":1,"sites\/all\/themes\/leticiahoy\/print.css":1},"js":{"sites\/all\/libraries\/jquery\/jquery-1.10.2.min.js":1,"sites\/all\/libraries\/masonry\/jquery.masonry.min.js":1,"sites\/all\/modules\/jqmulti\/js\/switch.js":1,"sites\/all\/modules\/entityreference\/js\/entityreference.js":1,"sites\/all\/modules\/tmessx\/js\/tmessx.js":1,"sites\/all\/modules\/ttransport\/js\/ttransport.js":1,"sites\/all\/modules\/auto_upload\/auto_upload.js":1,"sites\/all\/modules\/video\/js\/video.js":1,"sites\/all\/modules\/rate\/rate.js":1,"sites\/all\/themes\/leticiahoy\/js\/script.js":1,"sites\/all\/themes\/leticiahoy\/js\/tiktok-videos.js":1,"misc\/jquery.js":1,"misc\/jquery-extend-3.4.0.js":1,"misc\/jquery-html-prefilter-3.5.0-backport.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1}},"jcarousel":{"ajaxPath":"\/jcarousel\/ajax\/views"},"rate":{"basePath":"\/rate\/vote\/js","destination":"node\/40587"}});</script>


<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-133836742-1"></script> 
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-133836742-1');
</script>
<script async custom-element="amp-auto-ads"
        src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6453347546716692"
     crossorigin="anonymous"></script>

      <!-- [if lt IE 9] -->
    <script src="/sites/all/themes/zen/js/html5-respond.js"></script>
    <!-- [endif]-->
     <link rel="stylesheet" href="/sites/all/modules/tmessx/css/tmessx.css">
</head>
<body class="html not-front not-logged-in no-sidebars page-node page-node- page-node-40587 node-type-noticia section-colombia page-panels" >
<amp-auto-ads type="adsense"
        data-ad-client="ca-pub-6453347546716692">
</amp-auto-ads>
      
<input type='hidden' id='userid' value='0'/>
<div id="page">
     <div class="header-top"> <div class="logoinv" >
         </div></div>

  <header class="header" id="header" >

<h1 class="logo-leticiahoy" id="leticiahoy2012">
       <span style="display: none !important">Social Tabatinga Leticia Iquitos - TALEOI.COM</span>
    </h1>

  
    
    
      <div class="header__region region region-header">
    <div id="block-block-78" class="block block-block first last odd">

      
  <style type="text/css">
/* ── Container ───────────────────────────────────────────────────────────── */
.menuappcont {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}
#block-block-78 { margin: 0; }

/* ── Top strip: logo + mobile search ────────────────────────────────────── */
.menuappconttop {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 14px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
.logoapp {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.menu-logo img {
  height: 28px;
  width: auto;
  display: block;
}

/* ── Nav pill bar ────────────────────────────────────────────────────────── */
.menuapp {
  max-width: 560px;
  margin: 0 auto;
  height: 66px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #fff;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 6px 24px rgba(0,0,0,.11), 0 2px 6px rgba(0,0,0,.06);
  border: none;
}

/* ── Nav items ───────────────────────────────────────────────────────────── */
.itemx {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 52px;
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.22s ease, transform 0.22s ease;
}
.itemx:hover {
  background: #fff3ec;
  transform: translateY(-4px);
}

/* Link fills the item and stacks icon + label */
.itemx a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  text-decoration: none;
  border-radius: inherit;
}

/* Icon */
.itemx img {
  height: 26px;
  width: 26px;
  object-fit: contain;
  display: block;
  transition: transform 0.22s ease, filter 0.22s ease;
}
.itemx:hover img {
  transform: scale(1.1);
}

/* Label */
.nav-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: #c8c8c8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: color 0.22s;
  white-space: nowrap;
}
.itemx:hover .nav-label { color: #FF4500; }

/* Active dot: hidden by default, shown on active item */
.itemx::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #FF4500;
  transition: transform 0.22s ease;
}

/* ── Active states (keyed off Drupal body classes) ───────────────────────── */
/* Orange icon filter — converts near-black icons to #FF4500 */
.front .item-menu1,
.page-videos .item-menu2,
.not-front.form-single-submit-processed:not(.page-world-locals) .item-menu3,
.page-world-locals .item-menu4,
.page-periodico .item-menu5 {
  background: #fff3ec;
}
.front .item-menu1 img,
.page-videos .item-menu2 img,
.not-front.form-single-submit-processed:not(.page-world-locals) .item-menu3 img,
.page-world-locals .item-menu4 img,
.page-periodico .item-menu5 img {
  filter: brightness(0) saturate(100%) invert(38%) sepia(98%) saturate(2100%) hue-rotate(3deg) brightness(108%) contrast(107%);
}
.front .item-menu1 .nav-label,
.page-videos .item-menu2 .nav-label,
.not-front.form-single-submit-processed:not(.page-world-locals) .item-menu3 .nav-label,
.page-world-locals .item-menu4 .nav-label,
.page-periodico .item-menu5 .nav-label {
  color: #FF4500;
}
/* Show dot on active item */
.front .item-menu1::after,
.page-videos .item-menu2::after,
.not-front.form-single-submit-processed:not(.page-world-locals) .item-menu3::after,
.page-world-locals .item-menu4::after,
.page-periodico .item-menu5::after {
  transform: translateX(-50%) scale(1);
}

/* ── Mobile search: hidden on desktop ───────────────────────────────────── */
.autocompletecont1 { display: none; }

/* ── Autocomplete dropdown (mobile) ─────────────────────────────────────── */
.autocomplete { position: relative; }
.autocomplete-items {
  position: absolute;
  z-index: 9999;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.13);
  overflow: hidden;
}
.autocomplete-items div {
  padding: 10px 14px;
  cursor: pointer;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
  font-size: 13px;
  color: #333;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.autocomplete-items div:last-child { border-bottom: none; }
.autocomplete-items div:hover { background: #fff8f5; color: #FF4500; }
.autocomplete-active { background: #fff3ec !important; color: #FF4500 !important; }

/* ── Mobile overrides ────────────────────────────────────────────────────── */
@media only screen and (max-width: 940px) {
  .admin-menu #page { margin-top: 40px; }

  .menuappcont { height: auto; }

  .menuappconttop {
    padding: 8px 12px;
    gap: 10px;
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
  }
  .menu-logo img { height: 26px; }

  .autocompletecont1 {
    display: flex;
    flex: 1;
    min-width: 0;
  }
  .autocompletecont1 form {
    display: flex;
    align-items: center;
    width: 100%;
  }
  /* Hide legacy globe icon paragraph */
  .autocompletecont1 p { display: none !important; }

  .autocomplete { flex: 1; min-width: 0; }

  /* Search text input */
  #citiesInput {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1.5px solid #e0e0e0 !important;
    border-right: none !important;
    border-radius: 20px 0 0 20px !important;
    padding: 8px 14px !important;
    height: 36px !important;
    font-size: 12px !important;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    background: #f8f9fb !important;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
  }
  #citiesInput:focus {
    border-color: #FF4500 !important;
    background: #fff !important;
  }

  /* Go button */
  .autocompletecont1 input[type=button] {
    flex-shrink: 0;
    background: #FF4500 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 20px 20px 0 !important;
    padding: 0 16px !important;
    height: 36px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    cursor: pointer;
    width: auto !important;
    float: none !important;
    transition: background 0.15s;
  }
  .autocompletecont1 input[type=button]:hover {
    background: #e03e00 !important;
  }

  /* Full-width nav bar on mobile */
  .menuapp {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0;
    height: 58px;
    padding: 6px 4px;
    box-shadow: 0 -1px 0 #eee, 0 2px 8px rgba(0,0,0,.07);
  }
  .itemx { flex: 1; width: auto; }
}
</style>

<div class="menuappcont">
  <div class="menuappconttop">
    <div class="logoapp">
      <a alt="mundo world muro" class="menu-logo" href="/taleoi" title="Taleoi">
        <img alt="Taleoi" height="29" src="/sites/all/themes/leticiahoy/images/taleoitextx.png" width="83" />
      </a>
    </div>
    <div class="autocompletecont1">
      <form autocomplete="off" style="width:100%;">
        <div class="autocomplete">
          <input id="citiesInput" placeholder="Tabatinga, Leticia, Lima, Bogota, Iquitos…" type="text" />
        </div>
        <input onclick="myFunction()" type="button" value="Go" />
      </form>
    </div>
  </div>
  <div class="menuapp">
    <div class="itemx item-menu1">
      <a alt="mundo world muro" class="menu-world" href="/" title="World Mundo">
        <img alt="World" height="30" src="/sites/all/themes/leticiahoy/images/worldx.png" width="30" />
        <span class="nav-label">World</span>
      </a>
    </div>
    <div class="itemx item-menu2">
      <a alt="videos" class="menu-videos" href="/videos" title="Videos">
        <img alt="Video" height="30" src="/sites/all/themes/leticiahoy/images/play.png" width="30" />
        <span class="nav-label">Video</span>
      </a>
    </div>
    <div class="itemx item-menu3">
      <a alt="home inicio" class="menu-home" href="/user" title="Inicio">
        <img alt="Inicio" height="30" src="/sites/all/themes/leticiahoy/images/home.png" width="30" />
        <span class="nav-label">Inicio</span>
      </a>
    </div>
    <div class="itemx item-menu4">
      <a alt="market tienda" class="menu-market" href="/world/locals" title="Market">
        <img alt="Market" height="30" src="/sites/all/themes/leticiahoy/images/marketx.png" width="30" />
        <span class="nav-label">Market</span>
      </a>
    </div>
    <div class="itemx item-menu5">
      <a alt="News Noticias" class="menu-wallet" href="/periodico" title="Noticias">
        <img alt="News" height="30" src="/sites/all/themes/leticiahoy/images/news.png" width="30" />
        <span class="nav-label">News</span>
      </a>
    </div>
  </div>
</div>

<script type="text/javascript">

        var ki = "";
        var cities = ["Tabatinga","Leticia","Lima","Iquitos","Manaus","Santa Rosa","Rio de Janeiro","Brasilia","Santarem","Benjamin Constant","Cali","Pereira","VillaMaria","Cartagena","Medellin","Barranquilla","Bogota","Santa Marta","Pereira","Armenia","Manizales","Taganga","Palomino"
        ,"Puerto Nariño","Madrid","New York","Atlanta","Boston","Los Angeles","Brasil","Peru","Brazil","Germany","Alemania","United States","USA","Barcelona","Callao","Arequipa","Colombia","Berlin","Argentina","Buenos Aires","Cordoba","Rosario","Mar del Plata","Corrientes"];

	function myFunction (){
               if(ki.indexOf('Leticia') !== -1 || ki.indexOf('Bogota') !== -1 || ki.indexOf('Cali') !== -1  || ki.indexOf('Pereira') !== -1 || ki.indexOf('VillaMaria')  !== -1 ||   ki.indexOf('Cartagena') !== -1  || ki.indexOf('Medellin') !== -1  || ki.indexOf('Barranquilla') !== -1 || ki.indexOf('Puerto Nariño')  !== -1 || ki.indexOf('Pereira') !== -1  || ki.indexOf('Armenia') !== -1 || ki.indexOf('Manizales')  !== -1  || ki.indexOf('Santa Marta')  !== -1 || ki.indexOf('Palomino')  !== -1){
                        window.location.href = "https://www.taleoi.com/world/co/"+ki.toLowerCase();
               }else if(ki.indexOf('Rio de Janeiro') !== -1  || ki.indexOf('Tabatinga') !== -1  || ki.indexOf('Manaus') !== -1 || ki.indexOf('Brasilia') !== -1 ||  ki.indexOf('Benjamin Constant') !== -1 ||  ki.indexOf('Santarem') !== -1){
                        window.location.href = "https://www.taleoi.com/world/br/"+ki.toLowerCase();
               }else if(ki.indexOf('Buenos Aires') !== -1  || ki.indexOf('Cordoba') !== -1 || ki.indexOf('Rosario') !== -1 ||  ki.indexOf('Mar del Plata') !== -1 ||  ki.indexOf('Corrientes') !== -1){
                        window.location.href = "https://www.taleoi.com/world/ar/"+ki.toLowerCase();
               }else if(ki.indexOf('Santa Rosa') !== -1  || ki.indexOf('Iquitos') !== -1 || ki.indexOf('Caballococha') !== -1 || ki.indexOf('Lima') !== -1 || ki.indexOf('Arequipa') !== -1 || ki.indexOf('Pucallpa') !== -1 || ki.indexOf('Callao') !== -1){
                        window.location.href = "https://www.taleoi.com/world/pe/"+ki.toLowerCase();
               }else if(ki.indexOf('New York') !== -1 || ki.indexOf('Atlanta') !== -1  || ki.indexOf('Boston') !== -1 || ki.indexOf('Miami') !== -1 ||  ki.indexOf('Los Angeles') !== -1){
                        window.location.href = "https://www.taleoi.com/world/us/"+ki.toLowerCase();
               }else if(ki.indexOf('Barcelona') !== -1 || ki.indexOf('Madrid') !== -1 ){
                        window.location.href = "https://www.taleoi.com/world/es/"+ki.toLowerCase();
               }else if(ki.indexOf('Berlin') !== -1){
                        window.location.href = "https://www.taleoi.com/world/de/"+ki.toLowerCase();
               }else if(ki.indexOf('Colombia') !== -1  ){
                        window.location.href = "https://www.taleoi.com/world/co/";
               }else if(ki.indexOf('Peru') !== -1){
                        window.location.href = "https://www.taleoi.com/world/pe/";
               }else if(ki.indexOf('España') !== -1 || ki.indexOf('Spain') !== -1 ){
                        window.location.href = "https://www.taleoi.com/world/es/";
               }else if(ki.indexOf('Italia') !== -1 || ki.indexOf('Italy') !== -1 ){
                        window.location.href = "https://www.taleoi.com/world/it/";
               }else if(ki.indexOf('Germany') !== -1 || ki.indexOf('Alemania') !== -1 ){
                        window.location.href = "https://www.taleoi.com/world/de/";
               }else if(ki.indexOf('United States') !== -1 || ki.indexOf('USA') !== -1){
                        window.location.href = "https://www.taleoi.com/world/us/";
               }else if(ki.indexOf('Brazil') !== -1 || ki.indexOf('Brasil') !== -1){
                        window.location.href = "https://www.taleoi.com/world/br/";
               }else if(ki.indexOf('Argentina') !== -1 ){
                        window.location.href = "https://www.taleoi.com/world/ar/";
               }else{
               window.location.replace("https://www.taleoi.com/world/");
               }
	}

      function autocomplete(inp, arr) {
      var currentFocus;
	  inp.addEventListener("input", function(e) {
	      var a, b, i, val = this.value;
	      closeAllLists();
	      if (!val) { return false;}
	      currentFocus = -1;
	      a = document.createElement("DIV");
	      a.setAttribute("id", this.id + "autocomplete-list");
	      a.setAttribute("class", "autocomplete-items");
	      this.parentNode.appendChild(a);
	      for (i = 0; i < arr.length; i++) {
		if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
		  b = document.createElement("DIV");
		  b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
		  b.innerHTML += arr[i].substr(val.length);
		  b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
		      b.addEventListener("click", function(e) {
		      inp.value = this.getElementsByTagName("input")[0].value;
                      ki = inp.value+"";
		      closeAllLists();
		  });
		  a.appendChild(b);
		}
	      }
	  });

	  inp.addEventListener("keydown", function(e) {
	      var x = document.getElementById(this.id + "autocomplete-list");
	      if (x) x = x.getElementsByTagName("div");
	      if (e.keyCode == 40) {
		currentFocus++;
		addActive(x);
	      } else if (e.keyCode == 38) {
		currentFocus--;
		addActive(x);
	      } else if (e.keyCode == 13) {
		e.preventDefault();
		if (currentFocus > -1) {
		  if (x) x[currentFocus].click();
		}
	      }
	  });

      function addActive(x) {
	    if (!x) return false;
	    removeActive(x);
	    if (currentFocus >= x.length) currentFocus = 0;
	    if (currentFocus < 0) currentFocus = (x.length - 1);
	    x[currentFocus].classList.add("autocomplete-active");
	  }
       function removeActive(x) {
	    for (var i = 0; i < x.length; i++) {
	      x[i].classList.remove("autocomplete-active");
	    }
	  }
       function closeAllLists(elmnt) {
	    var x = document.getElementsByClassName("autocomplete-items");
	    for (var i = 0; i < x.length; i++) {
	      if (elmnt != x[i] && elmnt != inp) {
	        x[i].parentNode.removeChild(x[i]);
	       }
	    }
	}
	document.addEventListener("click", function (e) {
	   // closeAllLists(e.target);
	});
}

autocomplete(document.getElementById("citiesInput"), cities);
</script>
</div>
  </div>

  </header>

  <div id="main">

    <div id="content" class="column" role="main">
                  <a id="main-content"></a>
                                                


<div class="panel-flexible panels-flexible-2 clearfix" >
<div class="panel-flexible-inside panels-flexible-2-inside">
<div class="panels-flexible-row panels-flexible-row-2-1 panels-flexible-row-first clearfix ">
  <div class="inside panels-flexible-row-inside panels-flexible-row-2-1-inside panels-flexible-row-inside-first clearfix">
<div class="panels-flexible-region panels-flexible-region-2-top panels-flexible-region-first panels-flexible-region-last ">
  <div class="inside panels-flexible-region-inside panels-flexible-region-2-top-inside panels-flexible-region-inside-first panels-flexible-region-inside-last">
  </div>
</div>
  </div>
</div>
<div class="panels-flexible-row panels-flexible-row-2-main-row panels-flexible-row-last clearfix">
  <div class="inside panels-flexible-row-inside panels-flexible-row-2-main-row-inside panels-flexible-row-inside-last clearfix">
<div class="panels-flexible-region panels-flexible-region-2-izquierda panels-flexible-region-first Columna-node-left">
  <div class="inside panels-flexible-region-inside panels-flexible-region-2-izquierda-inside panels-flexible-region-inside-first">
<div class="panel-pane pane-block pane-block-77" >
  
      
  
  <style type="text/css">
/* ── Search card wrapper ─────────────────────────────────────────────────── */
.autocompletecontf {
  width: 100%;
  margin-bottom: 14px;
}

.autocompletecontf form {
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,.09), 0 1px 3px rgba(0,0,0,.06);
  overflow: visible;
  height: auto;
}

/* ── Autocomplete wrapper (input container) ──────────────────────────────── */
.autocompletef {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* ── Text input ──────────────────────────────────────────────────────────── */
#citiesInputf {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1.5px solid #e8e8e8 !important;
  border-right: none !important;
  border-radius: 24px 0 0 24px !important;
  padding: 10px 16px !important;
  height: 42px !important;
  font-size: 13px !important;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  background: #f8f9fb !important;
  color: #333 !important;
  outline: none !important;
  transition: border-color 0.18s, background 0.18s;
}
#citiesInputf::placeholder {
  color: #bbb;
  font-size: 12px;
}
#citiesInputf:focus {
  border-color: #FF4500 !important;
  background: #fff !important;
}

/* ── Go button ───────────────────────────────────────────────────────────── */
.autocompletecontf input[type=button] {
  flex-shrink: 0;
  background: #FF4500 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 24px 24px 0 !important;
  padding: 0 20px !important;
  height: 42px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  letter-spacing: 0.3px;
  cursor: pointer;
  width: auto !important;
  float: none !important;
  transition: background 0.18s;
}
.autocompletecontf input[type=button]:hover {
  background: #e03e00 !important;
}

/* ── Autocomplete dropdown ───────────────────────────────────────────────── */
.autocompletef-items {
  position: absolute;
  z-index: 9999;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.13);
  overflow: hidden;
}
.autocompletef-items div {
  padding: 10px 16px;
  cursor: pointer;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
  font-size: 13px;
  color: #333;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: background 0.12s, color 0.12s;
}
.autocompletef-items div:last-child {
  border-bottom: none;
}
.autocompletef-items div:hover {
  background: #fff8f5;
  color: #FF4500;
}
.autocompletef-active {
  background: #fff3ec !important;
  color: #FF4500 !important;
}
</style>

<div class="autocompletecontf">
  <form autocomplete="off">
    <div class="autocompletef">
      <input id="citiesInputf" placeholder="Tabatinga, Leticia, Lima, Bogota, Iquitos…" type="text" value="" />
    </div>
    <input onclick="myFunctionf()" type="button" value="Go" />
  </form>
</div>

<script type="text/javascript">

var ki = "";
var cities = ["Tabatinga","Leticia","Lima","Iquitos","Manaus","Santa Rosa","Rio de Janeiro","Brasilia","Santarem","Benjamin Constant","Cali","Pereira","VillaMaria","Cartagena","Medellin","Barranquilla","Bogota","Santa Marta","Pereira","Armenia","Manizales","Taganga","Palomino"
,"Puerto Nariño","Madrid","New York","Atlanta","Boston","Los Angeles","Brasil","Peru","Brazil","Germany","Alemania","United States","USA","Barcelona","Callao","Arequipa","Colombia","Berlin","Argentina","Buenos Aires","Cordoba","Rosario","Mar del Plata","Corrientes"];

function myFunctionf() {
  if(ki.indexOf('Leticia') !== -1 || ki.indexOf('Bogota') !== -1 || ki.indexOf('Cali') !== -1 || ki.indexOf('Pereira') !== -1 || ki.indexOf('VillaMaria') !== -1 || ki.indexOf('Cartagena') !== -1 || ki.indexOf('Medellin') !== -1 || ki.indexOf('Barranquilla') !== -1 || ki.indexOf('Puerto Nariño') !== -1 || ki.indexOf('Armenia') !== -1 || ki.indexOf('Manizales') !== -1 || ki.indexOf('Santa Marta') !== -1 || ki.indexOf('Taganga') !== -1 || ki.indexOf('Palomino') !== -1){
    window.location.href = "https://www.taleoi.com/world/co/"+ki.toLowerCase();
  }else if(ki.indexOf('Rio de Janeiro') !== -1 || ki.indexOf('Tabatinga') !== -1 || ki.indexOf('Manaus') !== -1 || ki.indexOf('Brasilia') !== -1 || ki.indexOf('Benjamin Constant') !== -1 || ki.indexOf('Santarem') !== -1){
    window.location.href = "https://www.taleoi.com/world/br/"+ki.toLowerCase();
  }else if(ki.indexOf('Buenos Aires') !== -1 || ki.indexOf('Cordoba') !== -1 || ki.indexOf('Rosario') !== -1 || ki.indexOf('Mar del Plata') !== -1 || ki.indexOf('Corrientes') !== -1){
    window.location.href = "https://www.taleoi.com/world/ar/"+ki.toLowerCase();
  }else if(ki.indexOf('Santa Rosa') !== -1 || ki.indexOf('Iquitos') !== -1 || ki.indexOf('Caballococha') !== -1 || ki.indexOf('Lima') !== -1 || ki.indexOf('Arequipa') !== -1 || ki.indexOf('Pucallpa') !== -1 || ki.indexOf('Callao') !== -1){
    window.location.href = "https://www.taleoi.com/world/pe/"+ki.toLowerCase();
  }else if(ki.indexOf('New York') !== -1 || ki.indexOf('Atlanta') !== -1 || ki.indexOf('Boston') !== -1 || ki.indexOf('Miami') !== -1 || ki.indexOf('Los Angeles') !== -1){
    window.location.href = "https://www.taleoi.com/world/us/"+ki.toLowerCase();
  }else if(ki.indexOf('Barcelona') !== -1 || ki.indexOf('Madrid') !== -1){
    window.location.href = "https://www.taleoi.com/world/es/"+ki.toLowerCase();
  }else if(ki.indexOf('Berlin') !== -1){
    window.location.href = "https://www.taleoi.com/world/de/"+ki.toLowerCase();
  }else if(ki.indexOf('Colombia') !== -1){
    window.location.href = "https://www.taleoi.com/world/co/";
  }else if(ki.indexOf('Peru') !== -1){
    window.location.href = "https://www.taleoi.com/world/pe/";
  }else if(ki.indexOf('España') !== -1 || ki.indexOf('Spain') !== -1){
    window.location.href = "https://www.taleoi.com/world/es/";
  }else if(ki.indexOf('Italia') !== -1 || ki.indexOf('Italy') !== -1){
    window.location.href = "https://www.taleoi.com/world/it/";
  }else if(ki.indexOf('Germany') !== -1 || ki.indexOf('Alemania') !== -1){
    window.location.href = "https://www.taleoi.com/world/de/";
  }else if(ki.indexOf('United States') !== -1 || ki.indexOf('USA') !== -1){
    window.location.href = "https://www.taleoi.com/world/us/";
  }else if(ki.indexOf('Brazil') !== -1 || ki.indexOf('Brasil') !== -1){
    window.location.href = "https://www.taleoi.com/world/br/";
  }else if(ki.indexOf('Argentina') !== -1){
    window.location.href = "https://www.taleoi.com/world/ar/";
  }else{
    window.location.replace("https://www.taleoi.com/world/");
  }
}

function autocompletef(inp, arr) {
  var currentFocus;

  inp.addEventListener("input", function(e) {
    var a, b, i, val = this.value;
    closeAllLists();
    if (!val) { return false; }
    currentFocus = -1;
    a = document.createElement("DIV");
    a.setAttribute("id", this.id + "autocompletef-list");
    a.setAttribute("class", "autocompletef-items");
    this.parentNode.appendChild(a);
    for (i = 0; i < arr.length; i++) {
      if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
        b = document.createElement("DIV");
        b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
        b.innerHTML += arr[i].substr(val.length);
        b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
        b.addEventListener("click", function(e) {
          inp.value = this.getElementsByTagName("input")[0].value;
          ki = inp.value + "";
          closeAllLists();
        });
        a.appendChild(b);
      }
    }
  });

  inp.addEventListener("keydown", function(e) {
    var x = document.getElementById(this.id + "autocompletef-list");
    if (x) x = x.getElementsByTagName("div");
    if (e.keyCode == 40) {
      currentFocus++;
      addActive(x);
    } else if (e.keyCode == 38) {
      currentFocus--;
      addActive(x);
    } else if (e.keyCode == 13) {
      e.preventDefault();
      if (currentFocus > -1) {
        if (x) x[currentFocus].click();
      }
    }
  });

  function addActive(x) {
    if (!x) return false;
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    x[currentFocus].classList.add("autocompletef-active");
  }

  function removeActive(x) {
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocompletef-active");
    }
  }

  function closeAllLists(elmnt) {
    var x = document.getElementsByClassName("autocompletef-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }

  document.addEventListener("click", function(e) {
    if (document.getElementById("citiesInputf").value != "") {
      myFunctionf();
    }
  });
}

autocompletef(document.getElementById("citiesInputf"), cities);

</script>
  
  </div>
<div class="panel-pane pane-views pane-noticias-inicio" >
  
        <h2 class="pane-title">Últimas Noticias</h2>
    
  
  <div class="view view-noticias-inicio view-id-noticias_inicio view-display-id-block_16 ultimas-noticias view-dom-id-517c722c39f3b776a29b0f9fbbe8461d">
        
  
  
      <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first">
      
  <div class="views-field views-field-title">        <span class="field-content"><a href="/internacional/farmacos-comunes-pueden-alterar-forma-permanente-microbioma-intestinal-202608-43358">Fármacos comunes pueden alterar de forma permanente el microbioma intestinal</a></span>  </div>  
  <div class="views-field views-field-term-node-tid">        <span class="field-content"><a href="/noticias/medicamentos">Medicamentos</a>  <a href="/noticias/salud">Salud</a></span>  </div>  </div>
  <div class="views-row views-row-2 views-row-even">
      
  <div class="views-field views-field-title">        <span class="field-content"><a href="/tecnologia/dispositivos-inteligentes-bienestar-dominan-mercado-hardware-202608-43357">Dispositivos inteligentes y de bienestar dominan el mercado de hardware</a></span>  </div>  
  <div class="views-field views-field-term-node-tid">        <span class="field-content"><a href="/noticias/dispositivos">Dispositivos</a></span>  </div>  </div>
  <div class="views-row views-row-3 views-row-odd">
      
  <div class="views-field views-field-title">        <span class="field-content"><a href="/entretenimiento/sabrina-vargas-representa-leticia-miss-universe-colombia-202608-43325">Sabrina Vargas representa a Leticia en el Miss Universe Colombia</a></span>  </div>  
  <div class="views-field views-field-term-node-tid">        <span class="field-content"><a href="/noticias/miss-universo">Miss Universo</a>  <a href="/noticias/mujeres">Mujeres</a>  <a href="/noticias/reinados">Reinados</a></span>  </div>  </div>
  <div class="views-row views-row-4 views-row-even">
      
  <div class="views-field views-field-title">        <span class="field-content"><a href="/amazonas/refuerzan-monitoreo-ambiental-social-amazonia-colombiana-202608-43323">Refuerzan monitoreo ambiental y social en la Amazonía colombiana</a></span>  </div>  
  <div class="views-field views-field-term-node-tid">        <span class="field-content"><a href="/noticias/vigilancia">Vigilancia</a></span>  </div>  </div>
  <div class="views-row views-row-5 views-row-odd views-row-last">
      
  <div class="views-field views-field-title">        <span class="field-content"><a href="/amazonas/operacao-seguranca-no-rio-solimoes-desarticula-rede-pirataria-fluvial-202608-43322">Operação de segurança no Rio Solimões desarticula rede de pirataria fluvial</a></span>  </div>  
  <div class="views-field views-field-term-node-tid">        <span class="field-content"><a href="/noticias/piratas">Piratas</a></span>  </div>  </div>
    </div>
  
  
  
  
  
  
</div>
  
  </div>
  </div>
</div>
<div class="panels-flexible-region panels-flexible-region-2-center Node-content">
  <div class="inside panels-flexible-region-inside panels-flexible-region-2-center-inside">
<div class="panel-pane pane-token pane-node-created" >
  
      
  
  Fri, 09/05/2025 - 07:31
  
  </div>
<div class="panel-pane pane-node-title" >
  
      
  
  <h1>Iniciaría este mes la reconstrucción del puente de la avenida Alfonso López</h1>

  
  </div>
<div class="panel-pane pane-entity-field pane-node-field-categoria-noticia" >
  
      
  
  <div class="field field-name-field-categoria-noticia field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/colombia" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Colombia</a></div></div></div>
  
  </div>
<div class="panel-pane pane-node-author" >
  
      
  
  <a href="/taleoicolombia" title="View user profile." class="username" xml:lang="" about="/taleoicolombia" typeof="sioc:UserAccount" property="foaf:name" datatype="">taleoicolombia</a>
  
  </div>
<div class="panel-pane pane-entity-field pane-node-field-image" >
  
      
  
  <div class="field field-name-field-image field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="https://www.taleoi.com/sites/default/files/styles/node_principal/public/noticias/imagen/whatsapp-image-2025-07-01-at-10.31.22-am-scaled.jpeg?itok=g_A_ctv_" width="566" height="350" alt="image for Iniciaría este mes la reconstrucción del puente de la avenida Alfonso López" title="Iniciaría este mes la reconstrucción del puente de la avenida Alfonso López" /></div></div></div>
  
  </div>
<div class="panel-pane pane-entity-field pane-node-body" >
  
      
  
  <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>Este mes inicia la reconstrucción del puente de la avenida Alfonso López</p>
<p>La Administración municipal de Villavicencio confirmó que las obras de reconstrucción del pontón ubicado sobre el caño Parrado, en la Avenida Alfonso López, iniciarían antes del primero de octubre y se extenderán por un periodo de ocho meses.</p>
<p>El anuncio fue hecho por el alcalde Alexander Baquero durante una reunión con comerciantes de los sectores de Cielos Abiertos, Villa Julia, San Andresito y zonas aledañas, quienes han sufrido las consecuencias económicas y de movilidad tras la caída de esta estructura.</p>
<p>En el encuentro, el mandatario estuvo acompañado del secretario de Infraestructura, Mario Castro, y del gerente del Centro, Juan Camilo Salas, quienes detallaron que ya se encuentran listos los estudios y diseños de la obra. La financiación, precisaron, se ejecutará de manera conjunta entre la Administración Municipal de Villavicencio y la Agencia para la Infraestructura del Meta.</p>
<p>“Se trata de la construcción de un nuevo pontón, con una inversión que garantizará la recuperación de la movilidad y la reactivación económica del sector”, explicó Salas.</p>
<p>Durante la socialización también se presentó el proyecto de modernización del alumbrado público en el corredor comprendido entre Cielos Abiertos y Villa Julia. La empresa Alborada expuso los alcances y costos de la intervención, que busca mejorar la seguridad y aportar a la dinamización del comercio en esta zona estratégica de la capital del Meta.</p>
<p>Fuente:   <a href="https://periodicodelmeta.com/obras-de-reconstruccion-del-puente-de-la-avenida-alfonso-lopez-empezarian-este-mes/" rel="nofollow" target="_blank"> periodicodelmeta.com </a><a rel="nofollow"> </a></p>
</div></div></div>
  
  </div>
<div class="panel-pane pane-rate-widget" >
  
        <h2 class="pane-title">Likes</h2>
    
  
  <div class="rate-widget-1 rate-widget clear-block rate-average rate-widget-thumbs_up_down rate-9bfc5c91f63cc6724f5b8ef69baedeb4 rate-node-40587-1-1" id="rate-node-40587-1-1">

<ul>
  <li class="thumb-up">
    <a class="rate-button rate-thumbs-up-down-btn-up" id="rate-button-1" rel="nofollow" href="/colombia/iniciaria-mes-reconstruccion-puente-avenida-alfonso-lopez-202509-40587?rate=UNQCYn47SZWim70WxboaU7avyTzA_DjxQZzXYcWF9oo" title="up">up</a>    <div class="percent">50%</div>
  </li>
  <li class="thumb-down">
    <a class="rate-button rate-thumbs-up-down-btn-down" id="rate-button-2" rel="nofollow" href="/colombia/iniciaria-mes-reconstruccion-puente-avenida-alfonso-lopez-202509-40587?rate=9Z8DaWjmlSgnDonJCrkS-67mF0mke1AcFSW5DeOQaec" title="down">down</a>    <div class="percent">50%</div>
  </li>
</ul>
</div>
  
  </div>
<div class="panel-pane pane-views pane-muro" >
  
      
  
  <div class="view view-muro view-id-muro view-display-id-block_4 view-dom-id-559eefdb2febdf7da650b6853727dfeb">
        
  
  
      <div class="view-content">
                    <li class="views-row views-row-1 views-row-odd views-row-first views-row-last">  
  <div class="views-field views-field-value-1">    <span class="views-label views-label-value-1">Likes</span>    <span class="field-content">0</span>  </div></li>
      





    </div>
  
  
  
  
  
  
</div>
  
  </div>
<div class="panel-pane pane-block pane-block-7" >
  
      
  
  <div class="compartelo">
	Compartelo en:</div>
<div>

<a class="compatir-item"  target="_blank" href="http://www.facebook.com/sharer.php?u=https://www.taleoi.com/node/40587">
<img alt="Logo Facebook"  src="/sites/all/themes/leticiahoy/images/facebook.gif"  > </a> <a target="_blank" class="compatir-item" href="https://twitter.com/intent/tweet?url=https://www.taleoi.com/node/40587"><img alt="twitter-share"  src="/sites/all/themes/leticiahoy/images/twitter.gif"  ></a></div>
  
  </div>
<div class="panel-pane pane-node-comment-form" >
  
        <h2 class="pane-title">Agregar comentario</h2>
    
  
  <a href="/user/login?destination=node/40587%23comment-form">Log in</a> or <a href="/user/register?destination=node/40587%23comment-form">register</a> to post comments
  
  </div>
  </div>
</div>
<div class="panels-flexible-region panels-flexible-region-2-derecha panels-flexible-region-last Columna-node-right">
  <div class="inside panels-flexible-region-inside panels-flexible-region-2-derecha-inside panels-flexible-region-inside-last">
  </div>
</div>
  </div>
</div>
</div>
</div>
          </div>

    <div id="navigation">

      
      
    </div>

    
    
  </div>

  
</div>

  <script src="https://www.taleoi.com/sites/default/files/js/js__qYzmo6NMc-CoseU2xajiE4eLa1R4-aoDFn7DUvIMog.js"></script>
<script src="https://www.taleoi.com/sites/default/files/js/js_AImMx76lVl57bN0XunuBZT0318MPWRss7BGmpSMvb94.js"></script>
<script src="https://www.taleoi.com/sites/default/files/js/js_mw06s-gYd-ANxp8zZ_N-xVkvD8F3Tf5OMGUGwU-H6zY.js"></script>
<script src="https://www.taleoi.com/sites/default/files/js/js_ZOQQMZqGzb8CdZhCNgmh45JP9ZfOvhCjprRQZPzYcog.js"></script>
<script src="https://www.taleoi.com/sites/default/files/js/js_aAyPmEiwUvKeiBzlQoHw1n9iInbExX3sW9nXMX0Z_dc.js"></script>
<script src="https://www.taleoi.com/sites/default/files/js/js_vi-XAPyK8h5Q_R8qCWqSb6GHanY2UE16KcfWswb2-jg.js"></script>
</body>
</html>