if (location.protocol != 'https:') {
	var protoc = 'http:';
} else {
	var protoc = 'https:';
}
var $ = jQuery;
var host = 'chat.siakapkeli.my';
var room = window.location.hostname+window.location.pathname;
console.log('room is: '+room);

var chatid;
var totalcomment = 0;
var nameHasChanged = false;
loadcss(protoc+'//'+host+'/style5.css');
function loadEvent() {
	socket.on('total',function(data){
		$('#chat_total').html(data);
	});

	socket.on('message',function(data){
		var senderid = data.from;
		var name = data.nickname;
		var message = data.message;
		if (senderid == chatid) { var from = 'me'; } else { var from = 'other'; }
		let scrollMark = autoscroll();
		$('#livechat').append("<div class='chat-item'><div withinsession from='"+from+"' chatid='"+senderid+"'><div class='chat-message'><span class='chat-name chat-info'>"+name+"</span>:&nbsp;"+message+"</div></div></div>");
		if(scrollMark == true) {
			$('#livechatcontainer').scrollTop($("#livechatcontainer").prop("scrollHeight")-$("#livechatcontainer").height());
			scrollMark = false;
		}
		viewallbutton();
	});

	socket.on('history',function(data){
		var current = Object.keys(data).length;
		for (i = 1; i <= current; i++) {
			var senderid = data[i].sender.chat_id;
			var name = data[i].sender.name;
			var message = data[i].message;
			if (senderid == chatid) { var from = 'me'; } else { var from = 'other'; }
			$('#livechat').append("<div class='chat-item'><div from='"+from+"' chatid='"+senderid+"'><div class='chat-message'><span class='chat-name chat-info'>"+name+"</span>:&nbsp;"+message+"</div></div></div>");
		}
		viewallbutton();
	})

	socket.on('name',function(name){
		$('[withinsession][chatid="'+name.chatid+'"] .chat-name').html(name.name);
	});

	socket.on('disconnect',function() {
		console.log('disconnected');
		$('#disconnected').show();
	});

	socket.on('connect', function () {
		console.log('connected')
		loadChat();
	});
}
if ((window.location.pathname.split('/').length == 6) && (jQuery(window).width() <= 579)) {
	var socket = io.connect(protoc+'//'+host);
	loadEvent();


	function loadChat() {
		socket.emit('register',function(confirmation) {
			if (confirmation) {
				chatid = confirmation.chatid;
				nameHasChanged = confirmation.changeName;
				socket.emit('join',room);
				$('#skchat').remove();

				var backdrop = '<div id="skchatbackdrop" style="position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: black;opacity: 0.8; display:none; z-index: 100;"></div>';
				var namelabel = '<label style="color: #999;">Tetapkan nama anda</label>';
				var nameerror = '<div id="nameerror" style="color: red;font-size: 12px;margin-bottom: 7px;margin-top: -3px; display: none;">Ralat pada nama, hanya terima abjad, ruang, &amp; nombor sahaja.</div>'
				var nameeditor = '<input id="nameeditor" type="text" placeholder="Nama anda" style="border-radius: 15px;">';
				var namebuttonok = '<button type="submit" id="setname" style="margin-right: 5px;height: 34px;background: #0288d1;border: none;color: white;border-radius: 15px;padding: 0 10px;font-size: 12px;font-weight: bold;width: 70px;">OK</button>';
				var namebuttoncancel = '<button type="button" id="cancelname" style="margin-right: 5px;height: 34px;background: #32ADAD;border: none;color: white;border-radius: 15px;padding: 0 10px;font-size: 12px;font-weight: bold;width: 70px;">Batal</button>';
				var namebuttonholder = '<div style="text-align: right;margin-top: 7px;">'+namebuttonok+namebuttoncancel+'</div>';
				var nameholder = '<div id="newname" style="position: fixed;left: 15px;right: 15px;background: white;bottom: 195px;padding: 15px;border-radius: 3px;box-shadow: 1px 1px 2px 0px #cdd0d6;border: 1px solid #cdd0d6; display: none; z-index: 101"><form id="nameform">'+namelabel+nameerror+nameeditor+namebuttonholder+'</form></div>';
				var changename = nameholder;






				var disconnected = '<div id="disconnected"></div>'
				var livechatholder = '<div id="livechatholder"><span id="livechat"></span></div>';
				var viewallbutton = '<div id="viewallbutton">Lihat semua (<span id="totalcomment"></span>)</div>'
				var livechattopcontainer = '<div id="livechattopcontainer"><div id="closebutton" style="display: inline-block;">Tutup</div></div>';
				var livechatcontainer = "<div id='livechatcontainer'>"+viewallbutton+livechatholder+"</div>";
				var counter = '<span id="chat_total">0</span>';
				var chatnamebutton = '<button id="namebutton">Nama</button>';
				var chatsend = '<button id="chatsend">Hantar</button>';
				var chatbox = '<input autocomplete="off" type="text" placeholder="Komen anda tentang isu ini" id="chateditor">';
				var chaticon = "<i class='fa fa-users'>"+counter+"</i>"
				var container = "<div id='skchat'>"+backdrop+changename+"<div style='flex: 0 0 auto;'>"+chaticon+"</div><form id='chatform' style='display: flex; flex: 1 1 auto;'><div style='flex: 1 1 auto;'>"+chatbox+"</div><div style='flex: 0 0 auto;'>"+chatsend+"</div></form><div style='flex: 0 0 auto;'>"+chatnamebutton+"</div>"+livechattopcontainer+livechatcontainer+disconnected+"</div>";
				$('body').append(container);

				$('#chatform').submit(function(event) {
					if ($('#chateditor').val() != '') {
						if (nameHasChanged == true) {
							var message = $('#chateditor').val();
							$('#chateditor').val('');
							socket.emit('message',{room: room, message: message});
						} else {
							opennamedialog();
						}
					}

					event.preventDefault();
				});

				$('#nameform').submit(function(event) {
					let val = $('#nameeditor').val();
					val = val.replace(/ +(?= )/g,'');
					val = val.trim();
						if ((validateName(val) == true) && (val != '')) {
							$('#nameeditor').val('');	
							socket.emit('name',val);
							closenamedialog();
							nameHasChanged = true;
						} else {
							$('#nameerror').show();
						}
					event.preventDefault();
				});

				$('#namebutton').click(function() {
					opennamedialog();
				});

				$('#cancelname').click(function(){
					closenamedialog();
				})

				$('#viewallbutton').click(function(){
					$('#livechatcontainer').addClass('viewall');
					$('#livechattopcontainer').addClass('viewall');
					$('#livechatcontainer').scrollTop($("#livechatcontainer").prop("scrollHeight")-$("#livechatcontainer").height());
				})

				$('#closebutton').click(function(){
					$('#livechatcontainer').removeClass('viewall');
					$('#livechattopcontainer').removeClass('viewall');
				})

			}
		});

}

function viewallbutton() {
	let total = $('#livechat>div').length;
	if (total > 2) {
		let posTop = $('#livechatholder').height()-5;
		let posLeft = $('#livechat div:nth-last-child(2)').position().left+3;
		$('#viewallbutton').css('bottom',posTop).css('left',posLeft).addClass('show');
		$('#livechatcontainer #totalcomment').text(total);
	}
}

function opennamedialog() {
	$('#nameerror').hide();
	$('#skchatbackdrop').show();
	$('#newname').show();
	$("#nameeditor").focus();
}


function closenamedialog() {
	$('#skchatbackdrop').hide();
	$('#newname').hide();
	$('#nameeditor').blur();
}

function autoscroll() {
	if ($('#livechatcontainer').hasClass('viewall')) {
		let scroll = $('#livechatcontainer').scrollTop();
		let maxscroll = ($("#livechatcontainer").prop("scrollHeight")-$("#livechatcontainer").height());
		if ($('#livechatcontainer').scrollTop()==$("#livechatcontainer").prop("scrollHeight")-$("#livechatcontainer").height()) {
			return true;
		}
	}
}

$(window).on("focus", function(e) {
	if (socket.connected == false) {
		socket.disconnect();
		console.log('connecting after diconnect');
		socket = io.connect(protoc+'//'+host);
		loadEvent();
	}
});

function validateName(val){
	var reg = /^[A-Za-z\d\s]+$/;
	return reg.test(val);
}

}


jQuery.loadScript = function (url, callback) {
	jQuery.ajax({
		url: url,
		dataType: 'script',
		success: callback,
		async: true,
		xhrFields: {
			withCredentials: true
		},
		beforeSend: function (request) {                
			request.withCredentials = true;
			request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
			request.setRequestHeader("Access-Control-Allow-Origin", "https://siakapkeli.my");
		},
		crossDomain: true,
	});
};

function loadcss(url) {
	var head = document.getElementsByTagName('head')[0],
	link = document.createElement('link');
	link.type = 'text/css';
	link.rel = 'stylesheet';
	link.href = url;
	head.appendChild(link);
	return link;
}