/*!
Hype EasyPad 1.07
copyright (c) 2020 RSWE. All rights reserved.
*/

/*
* Version-History
* 0.90 (Alpha) Initial release skeleton
* 0.91 Sanctioned Interface by client
* 0.92 State machine ready
* 0.93 PAN States and initial video state
* 0.94 Interface and corrections
* 0.95 Image viewer, refactoring and corrections
* 0.96 CEPH States
* 0.97 States reside now in StateMachineGenerator 
* 0.99 3D States
* 1.00 Beta, corrections before trial with client
* 1.01 Minimal corrections
* 1.02 Updates on Video Player
* 1.03 Internet Explorer 11 and Video Player
* 1.04 Updates on some states
* 1.05 Minor 3D State update, setMode in API
* 1.06 Minor corrections from client
* 1.07 Added US-Features
*/

if("HypeEasyPad" in window === false) window['HypeEasyPad'] = (function () {
		
	// hold our single hypeDocument API
	var _hypeDocument;
	// remember all symbols on current scene
	var _symbolsOnScene;
	// remember state history changes
	var _stateHistory = [];
	// language used in interface
	var _language = 'DE';
	// state shorthand and object
	var state = {};
	// current scene name
	var _currentStateName = '_START';
	// logging off by default
	var _log = false;
	// mode of application
	var _mode = 'web';
	// asset URL with trainling slash
	var _assetFolderBaseUrl = null;
	// simple interface tranformations
	var _interface = {}

	// fetch state from generator (later JSON or server if wanted)
	var stateMachine = StateMachineGenerator.asObject();


	/**
	* setHypeSingleton
	* @param {Object} singelton Hype API
	*/
	function setHypeDocumentSingleton(hypeDocumentSingelton) {
		_hypeDocument = hypeDocumentSingelton
	}

	/**
	* setAssetFolderBaseUrl
	* @param {String} asset URL with trainling slash
	*/
	function setAssetFolderBaseUrl(assetFolderBaseUrl) {
		_assetFolderBaseUrl = assetFolderBaseUrl;
	}

	/**
	* notifyWebKit
	* @param {Object} paramter for webkit instance
	*/
	function notifyWebkit(cmd, obj) {
		if(window.webkit) {
			window.webkit.messageHandlers[cmd].postMessage(obj);
		} else {
			log ('No webkit object found!');
		}
	}

	/**
	* notifyHype
	* @param {String} name of command
	* @param {Object} parameter as object
	*/
	function notifyHype(cmd, obj) {
		if (_hypeDocument) {
		
			switch(cmd) {
				case 'setMode':
					setMode(obj.mode);
					break;

				case 'setLanguage':
					setLanguage(obj.language);
					break;

				case 'gotoStateByName':
					gotoStateByName(obj.name);
					break;

				case 'redrawCurrentState':
					redrawCurrentState();
					break;

				case 'setExposureList':
					setExposureList(obj.list);
					break;

				case 'setUserInterfaceTransforms':
					setUserInterfaceTransforms(obj);
					break;
			}
			
		} else {
			log ('HypeDocument not initilized!');
		}
	}

	/* Most public and notfy functions */
	function enableLogging(bol){
		_log = (bol==true);
	}

	function redrawCurrentState() {
		if (_currentStateName) {
			gotoStateByName (_currentStateName);
		} else {
			log('Please provide a state name!')
		}
	}

	function setMode(mode) {
		_mode = mode.toUpperCase()=='IOS'? 'iOS':'web';
		redrawCurrentState();
	}

	function setLanguage(language) {
		_language = language.toUpperCase()=='DE'? 'DE':'EN';
		redrawCurrentState();
	}

	function setExposureList(list) {
		// 12.08.2020 US features allows for movies so preprocess
		Exposure_List_Videos = [];
		for (var i=0; i<list.length; i++) { 
			if(list[i].substring(list[i].length - 4).toLowerCase() == '.mp4') {
				var cleaned = list[i].substring(0, list[i].length - 4);
				Exposure_List_Videos.push(cleaned);
				list[i] = cleaned;
			}
		}
		Exposure_List = list;
		redrawCurrentState();
	}

	/* Hardcoded Aufnahmebereitschaft anhand von PDF "Übersicht Aufnahmen für EasyPad Simulator_2019-12-02.pdf" */
	var Exposure_List = [];
	var Exposure_List_Videos = [];		
	
	// setup up symbols based on name
	function symbolLoad(hypeDocument, element, event) {
		// short hands
		var symbolInstance = hypeDocument.getSymbolInstanceById(element.id);
		var symbolElement = symbolInstance.element();
		var symbolName = symbolInstance.symbolName();
		var symbolState = getSymbolStateDataByName(symbolName);
		//var runDefaults = true;
		//remove any click handler
		symbolElement.style.cursor = 'default';
		symbolElement.onclick = null;
		
		//remember this symbol if not a refresh cycle
		if (event.type!='refresh') {
			_symbolsOnScene.push(element);
		}
		// switch based on symbol name
		if (symbolState.hidden) {
			// hidden == true
			symbolElement.style.display = 'none';
		} else {
			// hidden != true
			symbolElement.style.display = 'block';
			
			if (symbolState.hasOwnProperty('play')){
				var timelineName = symbolState['play'] || 'timelineName';
				symbolInstance.startTimelineNamed(timelineName, hypeDocument.kDirectionForward)
			} else {
				symbolInstance.pauseTimelineNamed('timelineName');
			}

			// show (classname)
			if (symbolState.hasOwnProperty('show')) {
				displaySymbolGroupByClassname(symbolElement, symbolState.show);
			}

			// text
			if (symbolState.hasOwnProperty('text')) {
				setupTextDisplay(symbolElement, '.textDisplay', symbolState.text);
			}

			// exposureImage
			if (symbolState.hasOwnProperty('exposureImage')) {
				log('showing exposureImage', symbolState.exposureImage);
				var imageElm = symbolElement.querySelector('.exposureImage');
				imageElm.style.backgroundSize = 'contain';
				imageElm.style.backgroundPosition = 'center';
				imageElm.style.backgroundRepeat = 'no-repeat';
				_hypeDocument.setElementProperty(imageElm, 'background-image', _assetFolderBaseUrl+symbolState.exposureImage);
			}

			// exposureVideo
			if (symbolState.hasOwnProperty('exposureVideo')) {
				log('showing exposureVideo', symbolState.exposureVideo);
				var videoElm = symbolElement.querySelector('.exposureVideo video');
				var gotoAfterVideo = symbolState.gotoAfterVideo;
				videoElm.src = _assetFolderBaseUrl + symbolState.exposureVideo;
				
				// 12.08.2020 disabled auto close of videos "US" package
				// Addded play state toggle
				videoElm.onclick = function(){
					if (videoElm.paused) {
						if (!videoElm.ended) videoElm.play(); 
					} else { 
						videoElm.pause(); 
					}
				}

				videoElm.load();
			}

			// action 
			if (symbolState.hasOwnProperty('action')) {
				switch ((typeof symbolState.action == 'object'? symbolState.action.name : symbolState.action)){
					case 'showCurrentStateAsExposureImage': 
						setupClickHandler(symbolElement, function(){ 
							showExposureImage(_currentStateName) 
						}); 
						break;

					case 'showVideo':
						setupClickHandler(symbolElement, function(){ 
							showVideo(symbolState.video, symbolState.gotoAfterVideo) 
						}); 
						break;

					case 'showExposureVideo':
						setupClickHandler(symbolElement, function(){ 
							showExposureVideo(symbolState.video, symbolState.gotoAfterVideo) 
						}); 
						break;
				}
			}

			// goto
			if (symbolState.hasOwnProperty('goto') && symbolElement.onclick == null) {
				setupClickHandler(symbolElement, function(){ 
					gotoStateByName(symbolState['goto']);
				});
			}



		}
		return true;
	}

	function setupClickHandler(symbolElement, action){
		symbolElement.style.cursor = 'pointer';
		symbolElement.onclick = action;
	}

	function setupTextDisplay(symbolElement, selector, content){
		var elms = symbolElement.querySelectorAll(selector);
		[].slice.call(elms).forEach(function(elm){
			elm.innerHTML = content;
		});
	}

	function showExposureImage(name){
		if (Exposure_List.indexOf(name) != -1){
			if(Exposure_List_Videos.indexOf(name) != -1){
				showVideo(name, -1);
			} else {
				if (_mode == 'iOS') {
					notifyWebkit('showExposureImage', { 'name': name });
				} else {
					//dynamic state
					stateMachine['EXPOSURE'] = {
						_sceneName:		'IMAGE-VIEWER',
						'Image_Viewer':	{ exposureImage: name+'.jpg' },
						'Close':		{ goto: -1},
					}
					gotoStateByName('EXPOSURE');
				}
			}
		} else {
			log('The state '+name+' is not defined in the exposure image list!');
		}
	}

	function showVideo(name, gotoAfterVideo){
		/*if (_mode == 'iOS') {
			notifyWebkit('showVideo', { 'name': name });
		} else {*/
			//dynamic state
			stateMachine['EXPOSURE'] = {
				_sceneName:		'VIDEO-VIEWER',
				'Video_Viewer':	{ exposureVideo: name+'.mp4', gotoAfterVideo: gotoAfterVideo },
				'Close':		{ goto: gotoAfterVideo},
			}
			gotoStateByName('EXPOSURE');
		//}
	}

	function showExposureVideo(name, gotoAfterVideo){
		/*if (_mode == 'iOS') {
			notifyWebkit('showExposureVideo', { 'name': name+'_'+_language });
		} else {*/
			//dynamic state
			stateMachine['EXPOSURE'] = {
				_sceneName:		'VIDEO-VIEWER',
				'Video_Viewer':	{ exposureVideo: name+'_'+_language+'.mp4'},
				'Close':		{ goto: gotoAfterVideo},
			}
			if (gotoAfterVideo) stateMachine['EXPOSURE']['Video_Viewer']['gotoAfterVideo'] = gotoAfterVideo;
			gotoStateByName('EXPOSURE');
		//}
	}

	function displaySymbolGroupByClassname(symbolElement, classname){
		var symBaseSel = '#'+symbolElement.id+' > .HYPE_element_container '; 
		var elms = symbolElement.getElementsByClassName('HYPE_element');
		var extElm = symbolElement.getElementsByClassName(classname)[0];
		hideAllBut(elms, extElm);
	}

	/* helper */
	function hideAll (elms) {
		[].slice.call(elms).forEach(function(elm) { elm.style.display = 'none';});
	}
	
	function hideAllBut (elms, notElm) {
		for (var i=0;i<elms.length;i++){
			var elm = elms[i];
			elm.style.display = (notElm == elm) ? 'block' : 'none';
		}
		//[].slice.call(elms).forEach(function(elm) { console.log(elm); });
	}

	/* getter for immutable data */
	function getSymbolStateDataByName(symbolName){
		if (state.hasOwnProperty(symbolName)) {
			if (typeof state[symbolName] == 'string') {
				symbolName = state[symbolName];
			}
		}
		if (state.hasOwnProperty(symbolName)) {
			return state[symbolName];
		}	
		return {};
	}

	function getStateDataByName(name){
		if (stateMachine.hasOwnProperty(name)) {
			if (typeof stateMachine[name] == 'string') {
				log('getStateDataByName: Using state alias',stateMachine[name],'instead of',name);
				name = stateMachine[name];
			}
		}
		if (stateMachine.hasOwnProperty(name)) {
			return deepClone(stateMachine[name]);
		} else {
			log('getStateDataByName: State "', name, '" not found!');
			return {};
		}
	}

	function getStateDataInheritedByName(name){
		// fresh copy
		var newState = getStateDataByName(name);
		// inherit? only on layer deep!
		var inheritStates = newState.hasOwnProperty('_stateInherit')? newState._stateInherit.slice() : [];
		// inherit
		inheritStates.forEach(function (name){
			if (stateMachine.hasOwnProperty(name)){
				Object.assign(newState, getStateDataByName(name));
			}
		});
		// overlay in final step to ensure dominance new state data
		Object.assign(newState, getStateDataByName(name));
		//return
		return newState;
	}

	function deepClone(obj){
		return JSON.parse(JSON.stringify(obj));
	}

	/* state switcher */
	function gotoStateByName(name){
		// make sure we have a name
		if (!name){
			log('gotoStateByName: Please provide a name!');
			return;
		}
		// check if hype is initilized else store and wait
		if (!_hypeDocument){
			log('waiting for HypeEasyPad to load...');
			_currentStateName = name;
			return;
		}
		// handle numbers
		if(name < 0){
			name = _stateHistory[_stateHistory.length + (name-1)];
		}
		// check if we have the requested state
		if (stateMachine.hasOwnProperty(name)) {
			log('gotoStateByName', name);
		} else {
			log('gotoStateByName: State', name, 'not found!');
			return;
		}
		// remember current state name
		_currentStateName = name;
		// remember state name
		_stateHistory.push(name);
		// display for info
		location.hash = name;
		// refresh state with inheritance
		state = getStateDataInheritedByName(name);
		// Exposure button is managed independend of state to keep it flexible
		state['Text_Exposure'] = {
			text: (_language=='DE'? 'Aufnahmebereit' : 'Ready for exposure'),
		}
		// Check if we have a state that allows exposure
		if (Exposure_List.indexOf(name) != -1){
			state['Fernausloeser_oben_on'] = { action: 'showCurrentStateAsExposureImage', play:'timelineName'}
			state['Fernausloeser_oben'] = { hidden: true }
		} else {
			state['Fernausloeser_oben_on'] = { hidden: true }
			state['Button_Exposure'] = { hidden: true }
		}

		//jump to state
		if (_hypeDocument.currentSceneName() != state._sceneName){
			//load scene
			_hypeDocument.showSceneNamed(state._sceneName);
		} else {
			//refresh symbols manually type as refresh
			if (_symbolsOnScene) {
				[].slice.call(_symbolsOnScene).forEach(function(elm) { symbolLoad(_hypeDocument, elm, {type:'refresh'}) });
			}
		}
	}

	function log(){
		//if (_log) console.log.apply(this,arguments);
		if (_log) { // IE9-10 hack
			var logProxy = Function.prototype.bind.call(console.log, console);
			logProxy.apply(console, arguments);
		}
	}

	/* Hype callbacks */	
	function documentLoad(hypeDocument, element, event) {
		// set hypeDocument singleton API on HypeDocumentLoad
		setHypeDocumentSingleton(hypeDocument);
		redrawCurrentState();
		return true;
	}


	function setUserInterfaceTransforms(obj){
		_interface = obj;
	}

	function applyInterfaceSettings(name){
		var sceneElm = document.getElementById(_hypeDocument.currentSceneId());
		var elm = sceneElm.querySelector('.'+name);
		if( _interface[name] && elm){
			if (_interface[name]['top']) {
				var top = _hypeDocument.getElementProperty(elm, 'top');
				_hypeDocument.setElementProperty(elm, 'top', top+_interface[name]['top']);
			}
			if (_interface[name]['left']) {
				var left = _hypeDocument.getElementProperty(elm, 'left');
				_hypeDocument.setElementProperty(elm, 'left', left+_interface[name]['left']);
			}
			if (_interface[name]['scale']) {
				_hypeDocument.setElementProperty(elm, 'scaleX', _interface[name]['scale']);
				_hypeDocument.setElementProperty(elm, 'scaleY', _interface[name]['scale']);
			}
		}
	}
		
	function scenePrepare(hypeDocument, element, event) {
		_symbolsOnScene = [];
		//apply API transforms
		applyInterfaceSettings('EasyPad_Panel');
		applyInterfaceSettings('EasyPad_Remote');
		//
		return true;
	}

	/* Setup Hype callbacks */
	if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
	window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":documentLoad});
	window.HYPE_eventListeners.push({"type":"HypeScenePrepareForDisplay", "callback":scenePrepare});
	window.HYPE_eventListeners.push({"type":"HypeSymbolLoad", "callback":symbolLoad});

	/* Reveal Public interface to window['HypeEasyPad'] */
	return {
		version: '1.06',
		'setMode': setMode,
		'gotoStateByName': gotoStateByName,
		'notifyWebkit': notifyWebkit,
		'notifyHype': notifyHype,
		'setLanguage': setLanguage,
		'enableLogging': enableLogging,
		'setExposureList': setExposureList,
		'redrawCurrentState': redrawCurrentState,
		'setAssetFolderBaseUrl': setAssetFolderBaseUrl,
		'setUserInterfaceTransforms': setUserInterfaceTransforms,
	};
})();