<!doctype html>

<html>

    <head>

    	<meta charset="utf-8" />

    	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

        <title>Facebook Style Popup Design</title>

        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

        <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">



        <link href="css/animate.min.css">

        

        <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">

        <link rel="stylesheet" type="text/css" href="css/quickstyle.css" />

        <link rel="stylesheet" type="text/css" href="css/style-document.css" />





        <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />

		<link rel="stylesheet" type="text/css" href="css/icons.css" />



		<script src="js/modernizr.custom.js"></script>



         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

         <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

         <script src="js/drag-arrange.js"></script>

         <script src="https://draggabilly.desandro.com/draggabilly.pkgd.js"></script>

         

    </head>

    <body>



	    <div class="out_chat_container">

	    	

	    	<div class="chat_container" style="padding: 0; ">	





				<div class="out-group-bubble">

					<div class="group-bubble">



					  	<div class="bubble-sub group-bubble-chat pdLR5"  id="0">

					  		

					  		<div class="bubble drag-me">

					  			<div class="messageSwait">

						  			5+

						  		</div>



					  			<figure>

					  				<img src="images/2.png" />

					  			</figure>

					  		</div>

					  	</div>



					  	<div class="bubble-sub"  id="1">

					  		<div class="bubble" >

					  			<div class="messageSwait">

						  			5+

						  		</div>

					  			<figure>

					  				<img src="images/3.png" style="display: block; height: 100%; width: 100%;">

					  			</figure>

					  		</div>

					  	</div>

					  	

					</div>

				</div>



				<div class="chat">

					<div class="chat-main-admin">

						<div class="head-chat">

				    		<div class="head-chat-search">

				    			<button type="button">

				    				<svg class="h25px block btn-serch" viewBox="0 0 488.4 488.4"> <path d="M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6    s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2    S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7    S381.9,104.65,381.9,203.25z" data-original="#000000" class="active-path" data-old_color="#000" fill="#327ebb"/> </svg>



				    				<svg class="h25px none btn-back" viewBox="0 0 32.635 32.635"><g><g> <path d="M32.135,16.817H0.5c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h31.635c0.276,0,0.5,0.224,0.5,0.5   S32.411,16.817,32.135,16.817z" data-original="#000000" class="active-path" data-old_color="#000" fill="#327ebb"/> <path d="M13.037,29.353c-0.128,0-0.256-0.049-0.354-0.146L0.146,16.669C0.053,16.575,0,16.448,0,16.315s0.053-0.26,0.146-0.354   L12.684,3.429c0.195-0.195,0.512-0.195,0.707,0s0.195,0.512,0,0.707L1.207,16.315l12.184,12.184c0.195,0.195,0.195,0.512,0,0.707   C13.293,29.304,13.165,29.353,13.037,29.353z" data-original="#000000" class="active-path" data-old_color="#000" fill="#327ebb"/> </g></g> </svg>

				    			</button>

				    			<form class="search-input" autocomplete="off">

				    				<input type="text" name="search" placeholder="Find friends, messages ..."  readonly />

				    			</form>

				    			

			    			</div>

				    	</div>

				    	<div class="content-chat">

				    		<ul>

				    			<li>

				    				<button type="button">

				    					<div class="content-chat-main">

					    					<div class="content-chat-main-img">

					    						<figure>

									  				<img src="images/9.jpg" style="display: block; height: 150%; width: 150%;">

									  			</figure>

					    					</div>

					    					<div class="content-chat-main-info">

					    						<div class="content-chat-main-info-title">

					    							<h2 class="bold">NiKen</h2>

					    							<!-- <p>30 Phút</p> -->

					    						</div>

					    						<p>Manager</p>

					    					</div>

					    				</div>

				    				</button>

				    			</li>

				    			<li>

				    				<button type="button">

				    					<div class="content-chat-main">

					    					<div class="content-chat-main-img">

					    						<figure>

									  				<img src="images/7.png" style="display: block; height: 150%; width: 150%;">

									  			</figure>

					    					</div>

					    					<div class="content-chat-main-info">

					    						<div class="content-chat-main-info-title">

					    							<h2 class="bold">NiKen</h2>

					    							<!-- <p>30 Phút</p> -->

					    						</div>

					    						<p>Manager</p>

					    					</div>

					    				</div>

				    				</button>

				    			</li>

				    			<li>

				    				<button type="button">

				    					<div class="content-chat-main">

					    					<div class="content-chat-main-img">

					    						<figure>

									  				<img src="images/8.jpg" style="display: block; height: 150%; width: 150%;">

									  			</figure>

					    					</div>

					    					<div class="content-chat-main-info">

					    						<div class="content-chat-main-info-title">

					    							<h2 class="bold">NiKen</h2>

					    							<!-- <p>30 Phút</p> -->

					    						</div>

					    						<p>Manager</p>

					    					</div>

					    				</div>

				    				</button>

				    			</li>



				    			

				    		</ul>



				    	</div>

					</div>

				    <div class="chat-main-user none">

				    	<div class="head-chat">

				    		<div class="head-chat-info">

			    				<h2 class="fz16 pdLR10">Name</h2>

			    				<!-- <p class="fz12 pdLR10">Thời gian truy cập</p> -->

			    			</div>

			    			<div class="head-chat-setting">

			    				<p style="color: #fff; padding:0 10px; cursor: pointer;">

			    					<svg class="h25px" viewBox="0 0 512 512" > <circle cx="256" cy="256" r="64" data-original="#000000" class="active-path" data-old_color="#327ebb" fill="#327ebb"/> <circle cx="256" cy="448" r="64" data-original="#000000" class="active-path" data-old_color="#327ebb" fill="#327ebb"/> <circle cx="256" cy="64" r="64" data-original="#000000" class="active-path" data-old_color="#327ebb" fill="#327ebb"/> </svg>

			    				</p>

			    				<div class="head-chat-setting-mode">

			    					<div class="head-chat-setting-mode-noti">

			    						<h2>Notification</h2>

				    					<div class="checkedbox-toggle-1 right">

		                                    <input type="checkbox" name="isnotification" ng-change="changeSetting()" ng-model="currentsetting.isnotification" ng-true-value="'1'" ng-false-value="'0'" class="ng-valid ng-dirty ng-valid-parse ng-touched">

		                                    <i></i>

		                                    <span></span>

		                                </div>

			    					</div>

			    					<div class="separator-right"></div>



			    					<div class="head-chat-setting-mode-noti">

	                                    <h2>Sound Setting</h2>

	                                    <div class="checkedbox-toggle-1 right">

		                                    <input type="checkbox" name="isnotification" ng-change="changeSetting()" ng-model="currentsetting.isnotification" ng-true-value="'1'" ng-false-value="'0'" class="ng-valid ng-dirty ng-valid-parse ng-touched">

		                                    <i></i>

		                                    <span></span>

		                                </div>

	                                </div>

	                                <div class="bg-white pd10 mgT10 max-h1200px scrollbar">

									    <!-- ngRepeat: item in sounds -->

									    <div class="mgB5 ng-scope" ng-repeat="item in sounds">

									        <div class="radio-field-2 mgR3">

									            <input class="ng-pristine ng-untouched ng-valid" name="rdSound" ng-change="changeSetting()" ng-model="$parent.currentsetting.sound_id" type="radio" value="1">

									                <i>

									                </i>

									            </input>

									        </div>

									        <span class="label-1 ng-binding">

									            Ding

									        </span>

									    </div>

									    <!-- end ngRepeat: item in sounds -->

									    <div class="mgB5 ng-scope" ng-repeat="item in sounds">

									        <div class="radio-field-2 mgR3">

									            <input class="ng-pristine ng-untouched ng-valid" name="rdSound" ng-change="changeSetting()" ng-model="$parent.currentsetting.sound_id" type="radio" value="2">

									                <i>

									                </i>

									            </input>

									        </div>

									        <span class="label-1 ng-binding">

									            Jump

									        </span>

									    </div>

									    <!-- end ngRepeat: item in sounds -->

									    <div class="mgB5 ng-scope" ng-repeat="item in sounds">

									        <div class="radio-field-2 mgR3">

									            <input class="ng-pristine ng-untouched ng-valid" name="rdSound" ng-change="changeSetting()" ng-model="$parent.currentsetting.sound_id" type="radio" value="3">

									                <i>

									                </i>

									            </input>

									        </div>

									        <span class="label-1 ng-binding">

									            Hangout

									        </span>

									    </div>

									    <!-- end ngRepeat: item in sounds -->

									    <div class="mgB5 ng-scope" ng-repeat="item in sounds">

									        <div class="radio-field-2 mgR3">

									            <input class="ng-pristine ng-untouched ng-valid" name="rdSound" ng-change="changeSetting()" ng-model="$parent.currentsetting.sound_id" type="radio" value="5">

									                <i>

									                </i>

									            </input>

									        </div>

									        <span class="label-1 ng-binding">

									            Facebook

									        </span>

									    </div>

									    <!-- end ngRepeat: item in sounds -->

									    <div class="mgB5 ng-scope" ng-repeat="item in sounds">

									        <div class="radio-field-2 mgR3">

									            <input class="ng-pristine ng-untouched ng-valid" name="rdSound" ng-change="changeSetting()" ng-model="$parent.currentsetting.sound_id" type="radio" value="6">

									                <i>

									                </i>

									            </input>

									        </div>

									        <span class="label-1 ng-binding">

									            Xylophone

									        </span>

									    </div>

									    <!-- end ngRepeat: item in sounds -->

									    <div class="mgB5 ng-scope" ng-repeat="item in sounds">

									        <div class="radio-field-2 mgR3">

									            <input class="ng-pristine ng-untouched ng-valid" name="rdSound" ng-change="changeSetting()" ng-model="$parent.currentsetting.sound_id" type="radio" value="4">

									                <i>

									                </i>

									            </input>

									        </div>

									        <span class="label-1 ng-binding">

									            Iphone

									        </span>

									    </div>

									    <!-- end ngRepeat: item in sounds -->

									    <div class="mgB5 ng-scope" ng-repeat="item in sounds">

									        <div class="radio-field-2 mgR3">

									            <input class="ng-pristine ng-untouched ng-valid" name="rdSound" ng-change="changeSetting()" ng-model="$parent.currentsetting.sound_id" type="radio" value="7">

									                <i>

									                </i>

									            </input>

									        </div>

									        <span class="label-1 ng-binding">

									            Attention Bell

									        </span>

									    </div>

									    <!-- end ngRepeat: item in sounds -->

									    <div class="mgB5 ng-scope" ng-repeat="item in sounds">

									        <div class="radio-field-2 mgR3">

									            <input class="ng-pristine ng-untouched ng-valid" name="rdSound" ng-change="changeSetting()" ng-model="$parent.currentsetting.sound_id" type="radio" value="8">

									                <i>

									                </i>

									            </input>

									        </div>

									        <span class="label-1 ng-binding">

									            Long Whistle

									        </span>

									    </div>

									    <!-- end ngRepeat: item in sounds -->

									    <div class="mgB5 ng-scope" ng-repeat="item in sounds">

									        <div class="radio-field-2 mgR3">

									            <input class="ng-pristine ng-untouched ng-valid" name="rdSound" ng-change="changeSetting()" ng-model="$parent.currentsetting.sound_id" type="radio" value="9">

									                <i>

									                </i>

									            </input>

									        </div>

									        <span class="label-1 ng-binding">

									            Notification 1

									        </span>

									    </div>

									    <!-- end ngRepeat: item in sounds -->

									    <div class="mgB5 ng-scope" ng-repeat="item in sounds">

									        <div class="radio-field-2 mgR3">

									            <input class="ng-pristine ng-untouched ng-valid" name="rdSound" ng-change="changeSetting()" ng-model="$parent.currentsetting.sound_id" type="radio" value="10">

									                <i>

									                </i>

									            </input>

									        </div>

									        <span class="label-1 ng-binding">

									            Notification 2

									        </span>

									    </div>

									    <!-- end ngRepeat: item in sounds -->

									    <div class="mgB5 ng-scope" ng-repeat="item in sounds">

									        <div class="radio-field-2 mgR3">

									            <input class="ng-pristine ng-untouched ng-valid" name="rdSound" ng-change="changeSetting()" ng-model="$parent.currentsetting.sound_id" type="radio" value="11">

									                <i>

									                </i>

									            </input>

									        </div>

									        <span class="label-1 ng-binding">

									            Notification 3

									        </span>

									    </div>

									    <!-- end ngRepeat: item in sounds -->

									    <div class="mgB5 ng-scope" ng-repeat="item in sounds">

									        <div class="radio-field-2 mgR3">

									            <input class="ng-pristine ng-untouched ng-valid" name="rdSound" ng-change="changeSetting()" ng-model="$parent.currentsetting.sound_id" type="radio" value="12">

									                <i>

									                </i>

									            </input>

									        </div>

									        <span class="label-1 ng-binding">

									            Old Apple

									        </span>

									    </div>

									    <!-- end ngRepeat: item in sounds -->

									    <div class="mgB5 ng-scope" ng-repeat="item in sounds">

									        <div class="radio-field-2 mgR3">

									            <input class="ng-pristine ng-untouched ng-valid" name="rdSound" ng-change="changeSetting()" ng-model="$parent.currentsetting.sound_id" type="radio" value="13">

									                <i>

									                </i>

									            </input>

									        </div>

									        <span class="label-1 ng-binding">

									            Quick Whistle

									        </span>

									    </div>

									    <!-- end ngRepeat: item in sounds -->

									    <div class="mgB5 ng-scope" ng-repeat="item in sounds">

									        <div class="radio-field-2 mgR3">

									            <input class="ng-pristine ng-untouched ng-valid" name="rdSound" ng-change="changeSetting()" ng-model="$parent.currentsetting.sound_id" type="radio" value="14">

									                <i>

									                </i>

									            </input>

									        </div>

									        <span class="label-1 ng-binding">

									            Sonic Ring

									        </span>

									    </div>

									    <!-- end ngRepeat: item in sounds -->

									    <div class="mgB5 ng-scope" ng-repeat="item in sounds">

									        <div class="radio-field-2 mgR3">

									            <input class="ng-pristine ng-untouched ng-valid" name="rdSound" ng-change="changeSetting()" ng-model="$parent.currentsetting.sound_id" type="radio" value="15">

									                <i>

									                </i>

									            </input>

									        </div>

									        <span class="label-1 ng-binding">

									            Xbox Achievement

									        </span>

									    </div>

									    <!-- end ngRepeat: item in sounds -->

									</div>

			    				</div>



			    			</div>

				    	</div>

				    	<div class="content-chat">

				    		<ul class="chat-thread">

						      	<li class="message-mit">

							      	<div class="content-chat">

							      		<div class="content-chat-sub">

							      			<p>Hi Codepen 1! Hi Codepen 1! Hi Codepen 1! Hi Codepen 1!</p>

								      		<p>Hi Codepen 1! Hi Codepen 1! Hi Codepen 1!</p>

								      		<p>Hi Codepen 1! Hi Codepen 1!</p>

								      		<p>Hi Codepen 1! </p>

								      		<i class="time-chat" style="text-align: right;">05/12/2019 14:01:58 pm</i>

							      		</div>

							      	</div>

							      	

							      	<div class="name w35px h35px text-right mgL10">

							      		<i class="icon circle sdw-gray w35px h35px mgT5">

							      			<img class="full circle" src="images/1.png" />

							      		</i>

							      	</div>

						      	</li>



						      	<li class="message-dest">

							      	<div class="name w35px h35px text-right mgR10">

							      		<i class="icon circle sdw-gray w35px h35px mgT5">

							      			<img class="full circle" src="images/5.jpg" />

							      		</i>

							      	</div>



							      	<div class="content-chat">

							      		<div class="content-chat-sub">

								      		<p>Hi, what are you going to do today?</p>

								      		<i class="time-chat">05/12/2019 14:01:59 pm</i>

								      	</div>

								      	

							      	</div>

						      	</li>



						      	<li class="message-mit">

							      	<div class="content-chat">

							      		<div class="content-chat-sub">

							      			<p>Hi Codepen 1! Hi Codepen 1! Hi Codepen 1! Hi Codepen 1!</p>

								      		<p>Hi Codepen 1! Hi Codepen 1! Hi Codepen 1!</p>

								      		<p>Hi Codepen 1! Hi Codepen 1!</p>

								      		<p>Hi Codepen 1! </p>

								      		<i class="time-chat" style="text-align: right;">05/12/2019 14:01:58 pm</i>

							      		</div>

							      	</div>

							      	

							      	<div class="name w35px h35px text-right mgL10">

							      		<i class="icon circle sdw-gray w35px h35px mgT5">

							      			<img class="full circle" src="images/1.png" />

							      		</i>

							      	</div>

						      	</li>



						      	<li class="message-dest">

							      	<div class="name w35px h35px text-right mgR10">

							      		<i class="icon circle sdw-gray w35px h35px mgT5">

							      			<img class="full circle" src="images/5.jpg" />

							      		</i>

							      	</div>



							      	<div class="content-chat">

							      		<div class="content-chat-sub">

								      		<p>Hi, what are you going to do today?</p>

								      		<i class="time-chat">05/12/2019 14:01:59 pm</i>

								      	</div>

								      	

							      	</div>

						      	</li>

						      	<li class="message-mit">

							      	<div class="content-chat">

							      		<div class="content-chat-sub">

							      			<p>Hi Codepen 1! Hi Codepen 1! Hi Codepen 1! Hi Codepen 1!</p>

								      		<p>Hi Codepen 1! Hi Codepen 1! Hi Codepen 1!</p>

								      		<p>Hi Codepen 1! Hi Codepen 1!</p>

								      		<p>Hi Codepen 1! </p>

								      		<i class="time-chat" style="text-align: right;">05/12/2019 14:01:58 pm</i>

							      		</div>

							      	</div>

							      	

							      	<div class="name w35px h35px text-right mgL10">

							      		<i class="icon circle sdw-gray w35px h35px mgT5">

							      			<img class="full circle" src="images/1.png" />

							      		</i>

							      	</div>

						      	</li>



						      	<li class="message-dest">

							      	<div class="name w35px h35px text-right mgR10">

							      		<i class="icon circle sdw-gray w35px h35px mgT5">

							      			<img class="full circle" src="images/5.jpg" />

							      		</i>

							      	</div>



							      	<div class="content-chat">

							      		<div class="content-chat-sub">

								      		<p>Hi, what are you going to do today?</p>

								      		<i class="time-chat">05/12/2019 14:01:59 pm</i>

								      	</div>

								      	

							      	</div>

						      	</li>

						      	<li class="message-mit">

							      	<div class="content-chat">

							      		<div class="content-chat-sub">

							      			<p>Hi Codepen 1! Hi Codepen 1! Hi Codepen 1! Hi Codepen 1!</p>

								      		<p>Hi Codepen 1! Hi Codepen 1! Hi Codepen 1!</p>

								      		<p>Hi Codepen 1! Hi Codepen 1!</p>

								      		<p>Hi Codepen 1! </p>

								      		<i class="time-chat" style="text-align: right;">05/12/2019 14:01:58 pm</i>

							      		</div>

							      	</div>

							      	

							      	<div class="name w35px h35px text-right mgL10">

							      		<i class="icon circle sdw-gray w35px h35px mgT5">

							      			<img class="full circle" src="images/1.png" />

							      		</i>

							      	</div>

						      	</li>



						      	<li class="message-dest">

							      	<div class="name w35px h35px text-right mgR10">

							      		<i class="icon circle sdw-gray w35px h35px mgT5">

							      			<img class="full circle" src="images/5.jpg" />

							      		</i>

							      	</div>



							      	<div class="content-chat">

							      		<div class="content-chat-sub">

								      		<p>Hi, what are you going to do today?</p>

								      		<i class="time-chat">05/12/2019 14:01:59 pm</i>

								      	</div>

								      	

							      	</div>

						      	</li>



						      

						      

						      <!-- <li class="">

						      	



						      	<div class="content-chat-sub message-mit loading">

						      		<i class="material-icons">lens</i>

							      	<i class="material-icons">lens</i>

							      	<i class="material-icons">lens</i>

						      	</div>

						      	<div class="name pdLR10 w50px text-right">

						      		<i class="icon circle sdw-gray w35px h35px mgT5">

						      			<img class="full circle" src="images/1.png" />

						      		</i>

						      	</div>

						      </li> -->

						    </ul>



				    	</div>

					    <div class="footer-chat">

					    	<div class="footer-chat-icon">

					    		<button type="button">	

					    			<svg class="h25px" viewBox="0 0 368 368"> <path d="M261.336,226.04c-3.296-2.952-8.36-2.664-11.296,0.624C233.352,245.312,209.288,256,184,256 c-25.28,0-49.352-10.688-66.04-29.336c-2.952-3.288-8-3.576-11.296-0.624c-3.296,2.944-3.568,8-0.624,11.296 C125.76,259.368,154.176,272,184,272c29.832,0,58.248-12.64,77.96-34.664C264.904,234.04,264.624,228.984,261.336,226.04z" fill="#327ebb"/> <path d="M184,0C82.544,0,0,82.544,0,184s82.544,184,184,184s184-82.544,184-184S285.456,0,184,0z M184,352 c-92.64,0-168-75.36-168-168S91.36,16,184,16s168,75.36,168,168S276.64,352,184,352z" fill="#327ebb"/> <path d="M248,128c-22.056,0-40,17.944-40,40c0,4.416,3.584,8,8,8c4.416,0,8-3.584,8-8c0-13.232,10.768-24,24-24s24,10.768,24,24 c0,4.416,3.584,8,8,8c4.416,0,8-3.584,8-8C288,145.944,270.056,128,248,128z" fill="#327ebb"/> <path d="M144,168c0,4.416,3.584,8,8,8s8-3.584,8-8c0-22.056-17.944-40-40-40c-22.056,0-40,17.944-40,40c0,4.416,3.584,8,8,8 s8-3.584,8-8c0-13.232,10.768-24,24-24S144,154.768,144,168z" fill="#327ebb"/> </svg>

					    		</button>

				    		</div>

					    	<div style="flex: 1">

					    		<input class="input content-measse-chat" type="text" onchange="changeinputmeasse()">

					    	</div>

					    	<div class="group-file-voice-img">

					    		<button type="button" class="send-measse">

					    			<svg class="h25px" viewBox="0 0 448.011 448.011" > <path d="M438.731,209.463l-416-192c-6.624-3.008-14.528-1.216-19.136,4.48c-4.64,5.696-4.8,13.792-0.384,19.648l136.8,182.4    l-136.8,182.4c-4.416,5.856-4.256,13.984,0.352,19.648c3.104,3.872,7.744,5.952,12.448,5.952c2.272,0,4.544-0.48,6.688-1.472    l416-192c5.696-2.624,9.312-8.288,9.312-14.528S444.395,212.087,438.731,209.463z" data-original="#000000" class="active-path" data-old_color="#327ebb" fill="#327ebb"/></svg>

					    		</button>



					    		<button type="button" class="no-send-measse">

					    			<svg class="h25px" viewBox="0 0 417.416 417.416"><g><path d="M392.526,38.439c-16.077-16.076-37.451-24.93-60.187-24.93s-44.11,8.854-60.187,24.93L19.295,291.297  c-25.727,25.727-25.727,67.587,0,93.314c12.863,12.863,29.76,19.295,46.657,19.295c16.896,0,33.793-6.432,46.656-19.295  l199.146-199.146c18.247-18.247,18.247-47.937,0-66.185c-18.247-18.247-47.938-18.247-66.185,0l-127.94,127.939  c-3.905,3.905-3.905,10.237,0,14.143s10.238,3.905,14.142,0l127.94-127.939c10.448-10.449,27.451-10.449,37.899,0  c10.449,10.449,10.449,27.451,0,37.9L98.467,370.469c-17.929,17.928-47.101,17.929-65.03,0  c-8.685-8.685-13.468-20.232-13.468-32.515s4.783-23.83,13.468-32.515L286.294,52.582c12.299-12.299,28.651-19.072,46.045-19.072  s33.746,6.773,46.044,19.072c25.389,25.389,25.389,66.7,0,92.089L196.731,326.323c-3.905,3.905-3.905,10.237,0,14.143  s10.237,3.905,14.143,0l181.652-181.652C425.712,125.626,425.712,71.626,392.526,38.439z" data-original="#000000" class="active-path" data-old_color="#151212" fill="#327ebb" /></g> </svg>

					    		</button>



					    		<button type="button" class="no-send-measse">

					    			<svg class="h25px" viewBox="0 0 489.4 489.4"><g><g> <g> <path d="M0,437.8c0,28.5,23.2,51.6,51.6,51.6h386.2c28.5,0,51.6-23.2,51.6-51.6V51.6c0-28.5-23.2-51.6-51.6-51.6H51.6    C23.1,0,0,23.2,0,51.6C0,51.6,0,437.8,0,437.8z M437.8,464.9H51.6c-14.9,0-27.1-12.2-27.1-27.1v-64.5l92.8-92.8l79.3,79.3    c4.8,4.8,12.5,4.8,17.3,0l143.2-143.2l107.8,107.8v113.4C464.9,452.7,452.7,464.9,437.8,464.9z M51.6,24.5h386.2    c14.9,0,27.1,12.2,27.1,27.1v238.1l-99.2-99.1c-4.8-4.8-12.5-4.8-17.3,0L205.2,333.8l-79.3-79.3c-4.8-4.8-12.5-4.8-17.3,0    l-84.1,84.1v-287C24.5,36.7,36.7,24.5,51.6,24.5z" data-original="#000000" class="active-path" data-old_color="#0E0C0C" fill="#327ebb"/> <path d="M151.7,196.1c34.4,0,62.3-28,62.3-62.3s-28-62.3-62.3-62.3s-62.3,28-62.3,62.3S117.3,196.1,151.7,196.1z M151.7,96    c20.9,0,37.8,17,37.8,37.8s-17,37.8-37.8,37.8s-37.8-17-37.8-37.8S130.8,96,151.7,96z" data-original="#000000" class="active-path" data-old_color="#0E0C0C" fill="#327ebb"/> </g> </g></g> </svg>

					    		</button>

					    		

					    	</div>

					    </div>

				    </div>

			  	</div>

			</div>



			<div id="drop-area" class="drop-area" style="z-index: 99999999">

				<div class="drop-area__item">

					<i class="fa fa-times" aria-hidden="true"></i>

				</div>

			</div>

			

	    </div>

	    

    </body>

    <script>



		$(".chat_container .group-bubble").draggable();

		$('.bubble-sub').removeClass('order1');

		$("div.chat_container").on('click', 'div.bubble', function() {

		   	var sumChatHead = $('.chat_container .group-bubble .bubble').length;



			if($(this).hasClass('haschoose')){

				$('.bubble-sub').removeClass('order1');



				$('.group-bubble').removeClass('position_unset').css('width', 65);

				$('.group-bubble .bubble-sub').removeClass('position_unset').removeClass('pdLR5');

				



				$(this).closest('.out-group-bubble').siblings('.chat').removeClass('clicktoggle');	



				$(this).closest('.group-bubble').find('.group-bubble-chat').css('display','none')



				$(this).removeClass('haschoose');



				$(this).closest('.bubble-sub').addClass('order1');

				$('.draggable-element').unbind();

				$('.bubble-sub').removeClass('draggable-element');

				

			}else{

				// $('.bubble-sub').removeClass('order0');

				$('.bubble').removeClass('haschoose');

				$('.bubble-sub').removeClass('z-index9');



				$('.group-bubble').addClass('position_unset').css('width', sumChatHead * 75);

				$('.group-bubble .bubble-sub').addClass('position_unset').addClass('pdLR5');



				// $('.bubble-sub').addClass('order0');

				// $(this).closest('.bubble-sub').removeClass('order1');

				// $('.bubble-sub').removeClass('order1');



				$(this).closest('.out-group-bubble').siblings('.chat').addClass('clicktoggle');

				$(this).closest('.out-group-bubble').siblings('.chat').find('.chat-main-user').removeClass('none').siblings('.chat-main-admin').addClass('none');





				$(this).closest('.group-bubble').find('.group-bubble-chat').css('display','block');

				



				$(this).closest('.bubble-sub').addClass('z-index9');

				// $(this).closest('.bubble-sub').addClass('order0').removeClass('order1');;

				$(this).addClass('haschoose');





				$(this).closest('.group-bubble').find('.group-bubble-chat').removeClass('draggable-element').unbind();

				$('.bubble-sub').addClass('draggable-element');

				$('.draggable-element').arrangeable();

				

			}	

			

		});



		$("div.chat_container").on('click', 'div.group-bubble-chat', function() {

			$(this).closest('.out-group-bubble').siblings('.chat').find('.chat-main-admin').removeClass('none').siblings('.chat-main-user').addClass('none');

		})



		var isMoving = false;

		var isdragging = false;

		var chatMode = false;



		// $( ".bubble-sub" ).bind( "mousedown" , function () {

 

		// 	isdragging = false;

		//   	console.log("move");

		//   	$('.drop-area').addClass('show');

		 

		// });

		 



		$(".group-bubble").mousedown(function(){

		  isdragging = false;

		  console.log("move");

		  $('.drop-area').addClass('show');

		  

		});

		$(".bubble-sub").mousedown(function(){

		  isdragging = false;

		  console.log("move");

		  $('.drop-area').addClass('show');

		  

		});



		$(".bubble").mousedown(function(){

		  isdragging = false;

		  console.log("move");

		  $('.drop-area').addClass('show');

		  

		});

		// $('#drop-area').mousemove(function(){

		// 	alert('xóa');

		// });



		$('#drop-area').mouseup(function(){

			alert('delete');

		});



		$(".group-bubble").mousemove(function(){

		  isdragging = true;

		  $(this).css("transition", "all 0s");

		  

		});



		



		$(".group-bubble").mouseup(function(e){

			e.preventDefault();

			var lastY = window.event.clientY;

			var lastX = window.event.clientX;

			var swidth = $( window ).width();

			 

			$('#drop-area').removeClass('show');

			if(isdragging){

			    if(chatMode){

			      chatMode = false;

			    }

			    

			    if(lastX > (swidth/2)){

			      $(this).css("top", lastY).css("left", (swidth-65) + "px").css("transition", "all 0.4s");

			    }else{

			      $(this).css("top", lastY).css("left", "0px").css("transition", "all 0.4s");

			    }

		  	}

		});



		

		$("div.head-chat-search").on('click', 'button', function() {

			$('.head-chat-search > button .btn-serch').toggleClass('block');

			$('.head-chat-search > button .btn-back').toggleClass('none');



			$(this).find('.btn-serch').toggleClass('none');

			$(this).find('.btn-back').toggleClass('block');



    		if($('.btn-back').hasClass('block')){

    			$(this).siblings('.search-input').find('input').removeAttr('readonly');

    		}else{

    			$(this).siblings('.search-input').find('input').attr('readonly','true');

    		}

		});



		$("form.search-input").on('click', 'input', function() {

			$(this).removeAttr('readonly');



			$('.head-chat-search > button .btn-serch').removeAttr('block');

			$('.head-chat-search > button .btn-back').removeClass('none');



			$(this).closest('.head-chat-search').find('button').find('.btn-serch').addClass('none');

			$(this).closest('.head-chat-search').find('button').find('.btn-back').addClass('block');



		});



		$("div.chat-main-admin div.content-chat").on('click', 'button', function() {

			var sumChatHead = $('.chat_container .group-bubble .bubble').length;

			

			$('.drop-area').removeClass('show');

			console.log(sumChatHead);



			if(sumChatHead > 4){

				// $(this).closest('.chat').siblings('.out-group-bubble').find('.group-bubble').find('#1').remove();

			}else{

				$('.group-bubble').addClass('position_unset').css('width', ( sumChatHead + 1) * 75);

				$(this).closest('.chat').siblings('.out-group-bubble').find('.group-bubble').append('<div id= '+ sumChatHead +' class="bubble-sub pdLR5 position_unset draggable-element ' + 'group-bubble-sub' + sumChatHead + '"  > <div class="bubble" > <div class="messageSwait"> 5+ </div> <figure> <img src="images/4.jpg" style="display: block; height: 100%; width: 100%;"> </figure> </div> </div>');

				

				$(this).closest('.chat').siblings('.out-group-bubble').find('.group-bubble').find('.group-bubble-sub'+sumChatHead+'').bind( "mousedown" , function () {

					// isdragging = false;

				  	$(this).closest('.out_chat_container').find('.drop-area').addClass('show');

				})

				$(this).closest('.chat').siblings('.out-group-bubble').find('.group-bubble').find('.group-bubble-sub'+sumChatHead+'').find('bubble').bind( "mousedown" , function () {

					// isdragging = false;

				  	$(this).closest('.out_chat_container').find('.drop-area').addClass('show');

				})



				

			}

		});



		$('.head-chat-setting > p').click(function(){

			$('.head-chat-setting-mode').toggle();

			// alert('hoale');

		});



		

    </script>



</html>