<style>
.chat-container {
    z-index: 8;
}
</style>
<?php 
$avatar = $wo['chat']['page']['avatar'];
$name = $wo['chat']['page']['page_name'];
if ($wo['chat']['page']['is_page_onwer'] == 1) {
	$avatar = $wo['chat']['user']['avatar'];
	$name = $wo['chat']['user']['name'];
} ?>
<div class="chat-wrapper chat_page_<?php echo $wo['chat']['page']['page_id'];?>" id="chat_page_<?php echo $wo['chat']['page']['page_id'];?>">
	<div style="background:<?php echo $wo['chat']['color']; ?>" class="online-toggle">
		<div class="cht_tg_left_prt" onclick="javascript:$('.chat-tab-container-<?php echo $wo['chat']['user']['user_id'];?>').slideToggle(100);">
			<?php if ($wo['chat']['page']['is_page_onwer'] == 1) { ?>
			<a style="color:#fff;" href="<?php echo $wo['chat']['user']['url'];?>" data-ajax="?link1=timeline&u=<?php echo $wo['chat']['user']['username'];?>"> 
				<?php if ($wo['chat']['page']['is_page_onwer'] == 1) { ?>
					<span class="chat-tab-status <?php echo (Wo_IsOnline($wo['chat']['user']['user_id']) === true) ? 'active' : ''; ?>">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>
					</span>
				<?php } ?>
				<?php echo mb_substr($name, 0, 13, "UTF-8");?>
			</a>
			<?php }else{ ?>
			<a style="color:#fff;" href="<?php echo $wo['chat']['page']['url'];?>" data-ajax="?link1=timeline&u=<?php echo $wo['chat']['page']['page_name'];?>">
				<?php echo mb_substr($name, 0, 13, "UTF-8");?>
			</a>
			<?php } ?>
		</div>
		
		<img class="cht_hd_avtr" src="<?php echo $avatar;?>" alt="<?php echo $name;?>" />
		
		<div class="cht_tg_right_prt">
			<span class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z"></path></svg>
				</a>
				<ul class="dropdown-menu dropdown-menu-right clearfix" role="menu">
					<li class="dropdown-submenu chat_dd_sub_<?php echo $wo['chat']['user']['user_id'];?>">
						<a href="javascript:void(0);" class="change_color dropdown-toggle" data-toggle="dropdown" aria-expanded="true" role="button">
							<i class="fa fa-circle select-color" aria-hidden="true" style="color: <?php echo $wo['chat']['color']; ?>"></i> <?php echo $wo['lang']['change_color'];?>
						</a>
						<ul class="dropdown-menu dropdown-menu-right change_color_ddmenu" role="menu">
							<div class="chat-colors-cont text-center">
								<?php foreach ($wo['colors'] as $key => $color) {?>
									<a class="chat-color" data-chat-color="<?php echo $color; ?>"  data-recipient-u-id="<?php echo $wo['chat']['user']['user_id'];?>" style="color: <?php echo $color; ?>;" page_id="<?php echo $wo['chat']['page']['page_id'];?>"><i class="fa fa-circle" aria-hidden="true"></i></a>
								<?php } ?>
							</div>
						</ul>
					</li>
					<li><a class="white page_chat_tab_<?php echo $wo['chat']['page']['page_id'];?>" href="<?php echo Wo_SeoLink("index.php?link1=messages&user=" . $wo['chat']['to_id']);?>&page=<?php echo $wo['chat']['page']['page_id'];?>" target="_blank" onclick="Wo_CloseChat(<?php echo $wo['chat']['page']['page_id'];?>,'page');"><?php echo $wo['lang']['open_in_new_tab'];?></a></li>
				</ul>
			</span>
			<svg class="pointer  page_chat_tab_<?php echo $wo['chat']['page']['page_id'];?>" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" onclick="Wo_CloseChat(<?php echo $wo['chat']['page']['page_id'];?>,'page')"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>
		</div>
	</div>

	<div class="chat-tab-container chat-tab-container-<?php echo $wo['chat']['user']['user_id'];?> chat-tab-box-<?php echo $wo['chat']['user']['user_id'];?>">
		<div class="chat-messages-wrapper page-messages-wrapper-<?php echo $wo['chat']['page']['page_id'];?>">
			<div class="chat-messages">
				<?php if (count($wo['chat']['page']['messages']) > 0): ?>
					<?php foreach ($wo['chat']['page']['messages'] as $wo['chatMessage']): ?>
						<?php echo Wo_LoadPage('chat/page-chat-list'); ?>
					<?php endforeach; ?>
				<?php else: ?>
					<p class="no_message" id="no_messages_<?php echo $wo['chat']['page']['page_id'];?>"><?php echo $wo['lang']['no_messages']; ?></p>
				<?php endif; ?>
			</div>
			<div class="clear"></div>
		</div>
		<div class="chat-textarea btn-group">
			<form  action="#" id="hren" class="page-chat-sending-<?php echo $wo['chat']['page']['page_id'];?>">
				<div class="loading_cont">
					<div class="loading hidden"></div>
				</div>
				<div class="sun_chat_bottom">
					<textarea name="textSendMessage" id="sendMessage" class="form-control" cols="10" rows="5" placeholder="<?php echo $wo['lang']['write_something'];?>"  onkeydown="Wo_SubmitChatPageForm(event, <?php echo $wo['chat']['page']['page_id'];?>);" dir="auto" ></textarea>
					<div class="dropup chat_optns">
						<span class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
							<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" fill="currentColor"></path></svg>
						</span>
						<ul class="emo-container dropdown-menu dropdown-menu-right" role="menu">
							<?php  
								foreach ($wo['emo'] as $code => $name) {
									$code   = $code;
									$type   = 'page';
									echo  '<span onclick="Wo_AddEmoToGroup(\'' . $code . '\', ' . $wo['chat']['page']['page_id'] . ',\'' . $type . '\');"><i class="pointer twa-lg twa twa-' . $name . '"></i></span>'; 
								} 
							?>
						</ul>
					</div>
					<div class="dropup chat_optns">
						<span class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
							<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" fill="currentColor"></path></svg>
						</span>
						<ul class="dropdown-menu dropdown-menu-right sun_chat_dopts_menu sun_cht_dd_menu_<?php echo $wo['chat']['user']['user_id'];?>" role="menu">
							<li>
								<a href="javascript:void(0);" class="btn btn-file" id="progressIcon">
									<?php if($wo['config']['fileSharing'] == 1) { ?>
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#6bcfef" d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" /></svg>
										<p><?php echo $wo['lang']['files'];?></p>
										<input type="file" id="sendMessasgeFile" name="sendMessageFile" class="pointer"  onchange="Wo_SubmitChatPageForm(event,<?php echo $wo['chat']['page']['page_id'];?>);"/>
									<?php } else { ?>
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#4db3f6" d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" /></svg>
										<p><?php echo $wo['lang']['image'];?></p>
										<input type="file" id="sendMessasgeFile" name="sendMessageFile"  onchange="Wo_SubmitChatPageForm(event,<?php echo $wo['chat']['page']['page_id'];?>);" accept="image/x-png, image/gif, image/jpeg"  />
									<?php } ?>
								</a>
							</li>
							<?php if ($wo['config']['audio_upload'] == 1) { ?>
							<li>
								<a href="javascript:void(0);" class="btn btn-file record-chat-audio" onclick="function_record(this)" data-record="0"  data-chat-tab="<?php echo $wo['chat']['user']['user_id'];?>">
									<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ff3a55" d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z" /></svg>
									<p><?php echo $wo['lang']['voice'];?></p>
								</a>
							</li>
							<?php } ?>
							<?php if ($wo['config']['stickers'] == 1): ?>
								<li class="dropdown-submenu sun_cht_dd_menu_sub_<?php echo $wo['chat']['user']['user_id'];?>" id="chat-gifs">
									<a href="javascript:void(0);" class="btn btn-file dropdown-toggle" data-toggle="dropdown" aria-expanded="true" role="button">
										<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24" fill="#9d87d2"><path d="M15.5,2C18,2 20,4 20,6.5C20,7.38 19.75,8.21 19.31,8.9L22.39,12L21,13.39L17.88,10.32C17.19,10.75 16.37,11 15.5,11C13,11 11,9 11,6.5C11,4 13,2 15.5,2M15.5,4A2.5,2.5 0 0,0 13,6.5A2.5,2.5 0 0,0 15.5,9A2.5,2.5 0 0,0 18,6.5A2.5,2.5 0 0,0 15.5,4M7.5,14.5L4,19H18L13.5,13L10,17.5L7.5,14.5M20,20A2,2 0 0,1 18,22H4A2,2 0 0,1 2,20V6A2,2 0 0,1 4,4H9.5C9.18,4.77 9,5.61 9,6.5A6.5,6.5 0 0,0 15.5,13C16.18,13 16.84,12.89 17.46,12.7L20,15.24V20Z"></path></svg>
										<p><?php echo $wo['lang']['gif'];?></p>
									</a>
									<ul class="dropdown-menu drop-up" role="menu" onclick="event.stopPropagation()">
										<li>
											<div class="w100" id="chat-box-stickers">
												<input type="text" class="form-control" placeholder="<?php echo $wo['lang']['search'] ?> GIFs" onkeyup="Wo_GetChatStickers(this)" data-user-id="<?php echo($wo['chat']['user']['user_id']) ?>">
												<div id="chat-box-stickers-cont-<?php echo($wo['chat']['user']['user_id']) ?>" class="chat-box-stickers-cont"></div>
											</div>
										</li>
									</ul>
								</li>
							<?php endif; ?>
							<?php if ($wo['config']['stickers_system'] == 1): ?>
								<li class="dropdown-submenu sun_cht_dd_menu_sub_<?php echo $wo['chat']['user']['user_id'];?>" id="chat-sticker-system">
									<a href="javascript:void(0);" class="btn btn-file dropdown-toggle" data-toggle="dropdown" aria-expanded="true" role="button">
										<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24" fill="#31a38c"><path d="M5.5,2C3.56,2 2,3.56 2,5.5V18.5C2,20.44 3.56,22 5.5,22H16L22,16V5.5C22,3.56 20.44,2 18.5,2H5.5M5.75,4H18.25A1.75,1.75 0 0,1 20,5.75V15H18.5C16.56,15 15,16.56 15,18.5V20H5.75A1.75,1.75 0 0,1 4,18.25V5.75A1.75,1.75 0 0,1 5.75,4M14.44,6.77C14.28,6.77 14.12,6.79 13.97,6.83C13.03,7.09 12.5,8.05 12.74,9C12.79,9.15 12.86,9.3 12.95,9.44L16.18,8.56C16.18,8.39 16.16,8.22 16.12,8.05C15.91,7.3 15.22,6.77 14.44,6.77M8.17,8.5C8,8.5 7.85,8.5 7.7,8.55C6.77,8.81 6.22,9.77 6.47,10.7C6.5,10.86 6.59,11 6.68,11.16L9.91,10.28C9.91,10.11 9.89,9.94 9.85,9.78C9.64,9 8.95,8.5 8.17,8.5M16.72,11.26L7.59,13.77C8.91,15.3 11,15.94 12.95,15.41C14.9,14.87 16.36,13.25 16.72,11.26Z"></path></svg>
										<p><?php echo $wo['lang']['stickers'];?></p>
									</a>
									<ul class="dropdown-menu drop-up" style="left: -95px;width: 251px;bottom: 20px;" role="menu">
										<li>
											<div class="w100" id="chat-box-internal-stickers">
												<div id="chat-box-stickers-cont">
												<?php 
													$stickers_system = Wo_GetAllStickers(50000);
													if( count( $stickers_system ) > 0 ){
														foreach ($stickers_system as $wo['stickerlist']) {
															echo '<img alt="gif" src="'. Wo_GetMedia( $wo['stickerlist']['media_file'] ).'" data-gif="'.Wo_GetMedia( $wo['stickerlist']['media_file'] ).'" onclick="Wo_ChatSticker(this);" data-user-id="'.$wo['chat']['user']['user_id'].'" autoplay loop>';
														}
													}else{
														echo '<p class="no_chat_gifs_found"><i class="fa fa-frown-o"></i> '. $wo['lang']['no_result'] .'</p>';
													}
												?>
												</div>
											</div>
										</li>
									</ul>
								</li>
							<?php endif; ?>
						</ul>
					</div>
				</div>
				<div class="w-10 chat-btns-w">
					<span data-chat-rtime="<?php echo $wo['chat']['user']['user_id'];?>" class="record_timei hidden">00:00</span>
				</div>
				<input type="hidden" id="color" value="<?php echo $wo['chat']['color'];?>" />
				<input type="hidden" name="message-record" class="message-record" >
				<input type="hidden" name="media-name" class="media-name" >
				<input type="hidden" name="chatSticker" id='chatSticker_page_<?php echo $wo['chat']['user']['user_id'];?>'>
			</form>
		</div>
	</div>
</div>

<script type="text/javascript">
jQuery(document).ready(function($) {
	var chat_messages_wrapper = $('.page-messages-wrapper-<?php echo $wo['chat']['page']['page_id'];?>');

	$('[data-toggle="tooltip"]').tooltip(); 
    var main_hash_id = $('.main_session').val();
    $('.emo-btn-<?php echo $wo['chat']['page']['page_id'];?>').click(function () {
        $('.emo-group-container-<?php echo $wo['chat']['page']['page_id'];?>').toggle();
    });

    $(".chat-colors-cont a").click(function(event) {
      var recipient_id = $(this).attr('data-recipient-u-id');
      var page_id = $(this).attr('page_id');
      $.ajax({
        url:  Wo_Ajax_Requests_File(),
        type: 'get',
        data:{f:'chat',s:'set-chat-color',color:$(this).attr('data-chat-color'),recipient_user:recipient_id,page_id:page_id},
        dataType: 'json',
        success: function(data){
          if (data['status'] == 200) {
             $(".chat_page_" + page_id).find('.online-toggle, .outgoing').css('background', data['color']);
             $(".chat_page_" + page_id).find('.online-toggle, .outgoing').css('color', '#fff');
             $(".chat_page_" + page_id).find('.select-color').css('color', data['color']);
             $(".chat_page_" + page_id).find('#color').val(data['color']);
             $(".text-sender-container .red-list").css('background', data.color);
             $(".text-sender-container .btn-file").css('background', data.color);
             $(".text-sender-container .btn-file").css('border-color', data.color);
          }
        }
      });
    });

    var page_inter = setInterval(function(){
	  var last_group_message = ($("[data-page-tmessage-id]").length > 0) ? $("[data-page-tmessage-id]").last().attr('data-page-tmessage-id') : 0;
	  $.ajax({
	    url: Wo_Ajax_Requests_File(),
	    type: 'GET',
	    dataType: 'json',
	    data: {f: 'chat',s:'get_new_page_messages',message_id:last_group_message,page_id:'<?php echo $wo['chat']['page']['page_id'];?>'},
	  })
	  .done(function(data) {
	    if (data.status == 200) {
	      if ($(".page-messages-wrapper-<?php echo $wo['chat']['page']['page_id'];?>").find('.no_message').length > 0) {
	        $(".page-messages-wrapper-<?php echo $wo['chat']['page']['page_id'];?>").find('.chat-messages').html(data.html);
	      }else{
	        $(".page-messages-wrapper-<?php echo $wo['chat']['page']['page_id'];?>").find('.chat-messages').append(data.html);
	      }
	      
	      chat_messages_wrapper.scrollTop(chat_messages_wrapper[0].scrollHeight);
	    }
	  })
	  .fail(function() {
	    console.log("error");
	  })
	},5000);

	$(document).on('click', '.page_chat_tab_<?php echo $wo['chat']['page']['page_id'];?>', function(event) {
		clearInterval(page_inter);
	});



	
	chat_messages_wrapper.scrollTop(chat_messages_wrapper[0].scrollHeight);
	$('.page-chat-sending-<?php echo $wo['chat']['page']['page_id'];?>').ajaxForm({
	    url: Wo_Ajax_Requests_File() + '?f=chat&s=send_message&page_id=<?php echo $wo['chat']['page']['page_id'];?>&from_id=<?php echo $wo['chat']['from_id'];?>&to_id=<?php echo $wo['chat']['to_id'];?>&hash=' + main_hash_id,
	    type:"POST",
	    uploadProgress: function() {
		  $('form.page-chat-sending-<?php echo $wo['chat']['page']['page_id'];?>').find('.ball-pulse').fadeIn(100);
	    },
	    success: function(data) {
	    	$('form.page-chat-sending-<?php echo $wo['chat']['page']['page_id'];?>').find('input.message-record').val('');   
            $('form.page-chat-sending-<?php echo $wo['chat']['page']['page_id'];?>').find('input.media-name').val('');
            $("#chatSticker_page_<?php echo $wo['chat']['user']['user_id'];?>").val('');
            $("#chat-gifs").removeClass('open');
	        if (data.status == 200) {

	          if ($('#no_messages_<?php echo $wo['chat']['page']['page_id'];?>').length > 0) {
	            $(".page-messages-wrapper-<?php echo $wo['chat']['page']['page_id'];?>").find('.chat-messages').html(data.html);
	          }
	          else{
	            $(".page-messages-wrapper-<?php echo $wo['chat']['page']['page_id'];?>").find('.chat-messages').append(data.html);
	          }
	          if (data.invalid_file == 1) {
	              $("#invalid_file").modal('show');
	              Wo_Delay(function(){
	                $("#invalid_file").modal('hide');
	              },3000);
	              
	          }
	          if (data.invalid_file == 2) {
	              $("#file_not_supported").modal('show');
	              Wo_Delay(function(){
	                $("#file_not_supported").modal('hide');
	              },3000);
	          }
	          if (data.file == true) {
	            $('form.page-chat-sending-<?php echo $wo['chat']['page']['page_id'];?>').find('.ball-pulse').fadeOut(100);
	          }
	          
	        }
	        else if(data.status == 500 && data.invalid_file == 1){
	          $("#invalid_file").modal('show');
	              Wo_Delay(function(){
	                $("#invalid_file").modal('hide');
	          },3000);
	          $('form.page-chat-sending-<?php echo $wo['chat']['page']['page_id'];?>').find('.ball-pulse').fadeOut(100);
	        }
	        else if(data.status == 500 && data.invalid_file == 2){
	          $("#file_not_supported").modal('show');
	              Wo_Delay(function(){
	                $("#file_not_supported").modal('hide');
	          },3000);
	          $('form.page-chat-sending-<?php echo $wo['chat']['page']['page_id'];?>').find('.ball-pulse').fadeOut(100);
	        }
	        $(".chat_page_<?php echo $wo['chat']['page']['page_id'];?>").find('#sendMessasgeFile').val('');
	        $(".chat_page_<?php echo $wo['chat']['page']['page_id'];?>").find('textarea').val('');
	        setTimeout(function() {
	              chat_messages_wrapper.scrollTop(chat_messages_wrapper[0].scrollHeight);
	        }, 100);

	    }

	});






});


function Wo_SubmitChatPageForm(e, id) {
	document.title = document_title;
	chat_tab_container = $('.chat_main_' + id);
	if (e.keyCode == 13 && e.shiftKey == 0 || $("#sendMessasgeFile").val() != '') {
	    e.preventDefault();
	    Wo_RegisterTabMessage(id,'page');
	}
}

function Wo_ChatSticker(self){
  if (!self) {
    return false;
  }
  $('#chatSticker_page_'+$(self).attr('data-user-id')).val($(self).attr('data-gif'));
  $('.page-chat-sending-<?php echo $wo['chat']['page']['page_id'];?>').submit();
  $("#chat-sticker-system").removeClass("open");
}




$(document).ready(function(){
	$('.sun_cht_dd_menu_<?php echo $wo['chat']['user']['user_id'];?>').on("click", function(e){
    e.stopPropagation();
  });
  $('.sun_cht_dd_menu_sub_<?php echo $wo['chat']['user']['user_id'];?> .dropdown-toggle, .chat_dd_sub_<?php echo $wo['chat']['user']['user_id'];?> a.dropdown-toggle').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});


function escapeHTML(string) {
    var pre = document.createElement('pre');
    var text = document.createTextNode( string );
    pre.appendChild(text);
    return pre.innerHTML;
}



function Wo_GetChatStickers(self){
  if (!self) {
    return false;
  }
  keyword = $(self).val();
  var chat_gif_loading =  '\
  <div class="sk-circle">\
    <div class="sk-circle1 sk-child"></div>\
    <div class="sk-circle2 sk-child"></div>\
    <div class="sk-circle3 sk-child"></div>\
    <div class="sk-circle4 sk-child"></div>\
    <div class="sk-circle5 sk-child"></div>\
    <div class="sk-circle6 sk-child"></div>\
    <div class="sk-circle7 sk-child"></div>\
    <div class="sk-circle8 sk-child"></div>\
    <div class="sk-circle9 sk-child"></div>\
    <div class="sk-circle10 sk-child"></div>\
    <div class="sk-circle11 sk-child"></div>\
    <div class="sk-circle12 sk-child"></div>\
  </div>';
  $('#chat-box-stickers-cont-'+$(self).attr('data-user-id')).html(chat_gif_loading);
  Wo_Delay(function(){
    $.ajax({
      url: 'https://api.giphy.com/v1/gifs/search?',
      type: 'GET',
      dataType: 'json',
      data: {q:keyword,api_key:'<?php echo $wo['config']['giphy_api'];?>',limit:15},
    })
    .done(function(data) {
      if (data.meta.status == 200 && data.data.length > 0) {
        $('#chat-box-stickers-cont-'+$(self).attr('data-user-id')).empty();
        for (var i = 0; i < data.data.length; i++) {
          appended = true;
          if (appended == true) {
              appended = false;
            $('#chat-box-stickers-cont-'+$(self).attr('data-user-id')).append($('<img alt="gif" src="'+data.data[i].images.fixed_height_small.url+'" data-gif="' + data.data[i].images.fixed_height.url + '" onclick="Wo_ChatSticker(this)" data-user-id="'+$(self).attr('data-user-id')+'" autoplay loop>'));
            appended = true;
          } 
        }
      }
      else{
        $('#chat-box-stickers-cont-'+$(self).attr('data-user-id')).html('<p class="no_chat_gifs_found"><i class="fa fa-frown-o"></i> <?php echo $wo['lang']['no_result']; ?></p>');
      }
    })
    .fail(function() {
      console.log("error");
    })
  },1000);
}


function function_record(self) {
	audio_context          = new AudioContext;
    var _SELF = $(self);
    if (!localstream) {
      Wo_CreateUserMedia(); 
    }
    Wo_Delay(function(){
      if(recorder && _SELF.attr('data-record') == 0 && Wo_IsRecordingBufferClean() && $("[data-record='1']").length == 0) {
        Wo_CleanRecordNodes();
        recording_time = $("span[data-chat-rtime='" + _SELF.attr('data-chat-tab') + "']");
        recording_node = "chat";
        chat_tab       = _SELF.attr('data-chat-tab');
        _SELF.attr('data-record','1').html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M9,9H15V15H9" /></svg><p><?php echo $wo["lang"]["stop"];?></p>');  
        Wo_startRecording();
      }

      else if(recorder && _SELF.attr('data-record') == 1 && $("[data-record='1']").length == 1){
       Wo_stopRecording();
       _SELF.html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20.37,8.91L19.37,10.64L7.24,3.64L8.24,1.91L11.28,3.66L12.64,3.29L16.97,5.79L17.34,7.16L20.37,8.91M6,19V7H11.07L18,11V19A2,2 0 0,1 16,21H8A2,2 0 0,1 6,19Z" /></svg><p><?php echo $wo["lang"]["delete"];?></p>').attr('data-record','2');     
      }

      else if(recorder && _SELF.attr('data-record') == 2){
       Wo_CleanRecordNodes();
       Wo_StopLocalStream();
       _SELF.html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z" /></svg><p><?php echo $wo["lang"]["voice"];?></p>').attr('data-record','0');  
      }

      else{
        return false;
      }
    },500);
}

</script>