var mobile_translate_menu = document.getElementById('google-translate-mobile');
var mtm_select = mobile_translate_menu.querySelector('select');
var mtm_placeholder = mobile_translate_menu.querySelector('.sel__placeholder');
var oco_hed = document.querySelector('.oco-hed');
var hide_translate_button = document.getElementById('hide-translate');
var see_more_button = document.getElementById('oc-google-translate-see-more');
var translate_full_menu = document.getElementById('oc-translate-full-menu');
var close_full_menu_button = document.getElementById('close-translate-menu');
var body = document.querySelector('body');

function ocGetCurrentLang(default_lang = null) {
	var key_value = document['cookie'].match('(^|;) ?googtrans=([^;]*)(;|$)');
	return key_value ? key_value[2].split('/')[2] : default_lang;
}

function ocIsTranslationMenuHidden() {
	var key_value = document['cookie'].match('octhide=([^;]*)');
	return (key_value && key_value[1] == '1');
}

function ocGTranslateFireEvent(element,event) {
	try {
		if(document.createEventObject) {
			var evt = document.createEventObject();
			element.fireEvent('on'+event,evt);
		} else {
			var evt = document.createEvent('HTMLEvents');
			evt.initEvent(event,true,true);
			element.dispatchEvent(evt);
		}
	} catch(e) {}
}

function ocSplitLanguagePair(lang_pair) {
	if(!lang_pair) return null;
	if(lang_pair.value) lang_pair = lang_pair.value;
	if(!lang_pair) return null;
	return lang_pair.split('|');
}

window.ocGTranslate = function(lang_pair) {	
	showFullTranslationMenu(false);

	var slp = ocSplitLanguagePair(lang_pair);
	if(!slp) return;

	var current_language = ocGetCurrentLang('id');
	if(slp[1] == current_language) {
		setActiveLanguageLinkClass(current_language);
		return;
	}

	var google_te_combo = document.querySelector('select.goog-te-combo');
	var gte = document.getElementById('oc-google-translate-element');

	if(gte == null || gte.innerHTML.length == 0 || google_te_combo.length == 0 || google_te_combo.innerHTML.length == 0) {
		setTimeout(function(){ window.ocGTranslate(lang_pair); }, 500);
	} else { 
		google_te_combo.value = slp[1];
		ocGTranslateFireEvent(google_te_combo, 'change');
		ocGTranslateFireEvent(google_te_combo, 'change'); 
	}

	setActiveLanguageLinkClass(slp[1]);
	window.postMessage('translation-change', '*');
}

function setActiveLanguageLinkClass(current_language) {
	if(!current_language) current_language = 'id';
	var lang_class = 'lang-' + current_language;
	var links = document.querySelectorAll('a.glink');
	links.forEach(function(link) {
		if(link.classList.contains(lang_class)) {
			link.classList.add('active');
		} else {
			link.classList.remove('active');
		}
	});

	mtm_select.value = current_language;
	mtm_placeholder.textContent = current_language.toUpperCase();
	setActiveMobileMenuItem(current_language);
}

function getParameterByName(name, url = window.location.href) {
	name = name.replace(/[\[\]]/g, '\\$&');
	var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
	results = regex.exec(url);
	if (!results) return '';
	if (!results[2]) return '';
	return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

function showFullTranslationMenu(show) {
	if(show) {
		body.classList.add('translation-full-menu-active');
		// prevent the click event from hitting our new click handler, by introducing a slight delay
		setTimeout(function() { window.addEventListener('click', googleTranslateFullMenuClickHandler); }, 500);
		window.addEventListener('keydown', googleTranslateFullMenuEscapeHandler);
	} else {
		body.classList.remove('translation-full-menu-active');
		window.removeEventListener('click', googleTranslateFullMenuClickHandler);
		window.removeEventListener('keydown', googleTranslateFullMenuEscapeHandler);
	}
}

function setActiveMobileMenuItem(lang_code) {
	mobile_translate_menu.querySelectorAll('.sel__box__option.active').forEach(function(active_option) {
		active_option.classList.remove('active');
	});
	mobile_translate_menu.querySelector('.sel__box__option[data-lang-code=' + lang_code + ']').classList.add('active');
	showFullTranslationMenu(false);
}

function initGoogleTranslateMobile() {
	var options = mtm_select.querySelectorAll('option');
	options.forEach((option,  idx) => {
		if(idx == 0) {
			mtm_placeholder.textContent = option.text;
		}
	});
	mobile_translate_menu.addEventListener('click', function(e) {
		showFullTranslationMenu(true);
	});
}
initGoogleTranslateMobile();

function googleTranslateFullMenuEscapeHandler(e) {
	if(e.keyCode == 27) {
		showFullTranslationMenu(false);
	}
}
function googleTranslateFullMenuClickHandler(e) {
	showFullTranslationMenu(false);
}

var sel_box_options = mobile_translate_menu.querySelectorAll('.sel__box__option');
sel_box_options.forEach(function(option) {
	option.addEventListener('click', function(e) {
		var lang_code = this.getAttribute('data-lang-code');
		mtm_placeholder.textContent = lang_code.toUpperCase();
		mtm_select.value = lang_code;
		window.ocGTranslate('id|' + this.getAttribute('data-lang-code'));
	});
});

var browser_lang = (navigator.languages) ? navigator.languages[0] : (navigator.language || navigator.userLanguage);
if(browser_lang) {	
	// The only Google Translate Language Codes supported with a hyphen are zh-CN and zh-TW
	// Google Translate also supports zh in lieu of zh-CN, so the only hyphenated code we need to 
	// preserve is zh-TW.  Every other language code for Google Translate is hyphenless.
	if(browser_lang.includes('-')) {
		if(browser_lang !== 'zh-TW') {
			browser_lang = browser_lang.split('-')[0];
		}
	}
	var top_menu_link = document.querySelector('.oc-translate-wrapper a.glink[data-language="' + browser_lang + '"]');
	if(top_menu_link) {
		var parent = top_menu_link.parentNode;
		var first = parent.querySelector('a.glink');
		if(first.getAttribute('data-language') !== top_menu_link.getAttribute('data-language')) {
			top_menu_link.remove();
			parent.insertBefore(top_menu_link, first);	
		}
	} else {
		var full_menu_link = document.querySelector('#oc-translate-full-menu a.glink[data-language="' + browser_lang + '"]');
		if(full_menu_link) {			
			var first = document.querySelector('.oc-translate-wrapper a.glink');
			var parent = first.parentNode;
			var top_menu_link = full_menu_link.cloneNode(true);
			parent.insertBefore(top_menu_link, first);
		}
	}
}

var initial_lang = getParameterByName('translate');
if(!initial_lang) {
	initial_lang = ocGetCurrentLang();
}
if(initial_lang) {
	window.ocGTranslate('id|' + initial_lang);
} else {
	setActiveLanguageLinkClass(ocGetCurrentLang('id'));
}

if(!ocIsTranslationMenuHidden()) {
	hide_translate_button.parentNode.classList.remove('hidden');
	hide_translate_button.addEventListener('click', function() {
		hide_translate_button.parentNode.classList.add('hidden');
		document.cookie = "octhide=1;";
	});
}

see_more_button.addEventListener('click', function(e) {
	showFullTranslationMenu(true);
});
close_full_menu_button.addEventListener('click', function(e) {
	showFullTranslationMenu(false);
});