var isMobile = false;
var radarLayer = null;
var keymap = null;
$(document).ready(function() {
	var krpano = document.krpano;
    if ($('#ismobile-element').css('display') == 'none') {
        isMobile = true;
    }

    if (isMobile == true) {
        var mapBtn = $("#mapBtn");
        mapBtn.removeClass("active-button map-btn-active").addClass("inactive-button map-btn-inactive");
        
        krpano.call("skin_showthumbs(false);");
		
		$("#map").removeClass("show").addClass("hide");
    }
});


function mapBtnClick() {
    var map = $("#map");
    var mapBtn = $("#mapBtn");
    if (map.hasClass("hide")) {
		map.removeClass("hide").addClass("show");
        mapBtn.removeClass("inactive-button map-btn-inactive").addClass("active-button map-btn-active");
    } else {
        map.removeClass("show").addClass("hide");
        mapBtn.removeClass("active-button map-btn-active").addClass("inactive-button map-btn-inactive");
    }
}

function fullscreenBtn() {
    if (screenfull.enabled) {
        screenfull.toggle();
    }		
}


function helpBtnClick() {
    var helpWindow = $("#helpWindow");
    var helpBtn = $("#helpBtn");
	var krpano = document.krpano;
	var isIOS = krpano.get("device.ios");
	if(!isIOS){
		if (helpWindow.css("display") === "none") {
			helpWindow.show();
			helpBtn.removeClass("inactive-button help-btn-inactive").addClass("active-button help-btn-active");

		} else {
			helpWindow.hide();
			helpBtn.removeClass("active-button help-btn-active").addClass("inactive-button help-btn-inactive");
		}
	}
	else {
		window.open("https://123bim.com/User_guide_IOS.pdf");
	}
}

var isSound = true;

function soundBtnClick() {
    var soundBtn = $("#soundBtn");
    var krpano = document.krpano;
    if (isSound) {
        soundBtn.removeClass("active-button sound-btn-active").addClass("inactive-button sound-btn-inactive");
        krpano.call("stopsound(bgsnd);");
    } else {
        soundBtn.removeClass("inactive-button sound-btn-inactive").addClass("active-button sound-btn-active");
        krpano.call("playsound(bgsnd, 'sound.mp3', 0);");
    }
    isSound = !isSound;
}

function setTitle(t) {
    document.title = t;
    $("#titlebar").html(t);
}

function changeView(direction) {
    var krpano = document.krpano;
    if (direction === "right") {
        krpano.call("skin_nextscene_loop(+1);");
    } else {
        krpano.call("skin_nextscene_loop(-1);");
    }
}

function openLayesState() {

    document.getElementById("layersStates").classList.toggle("show-layers-states");
}

function thumbsBtnClick() {
    var krpano = document.krpano;
    krpano.call("skin_showthumbs();");

}

function vrBtnClick(){
	var krpano = document.krpano;
    krpano.call("webvr.enterVR()");
}

function openThumbs(isOpen) {

    var map = $("#map");
    var thumbBtn = $("#thumbBtn");
    if (isOpen === "true") {
        thumbBtn.removeClass("inactive-button-thumb thumb-btn-inactive").addClass("active-button-thumb thumb-btn-active");
        if (isMobile) {
            $('#point_title_bar').css('display', 'none');
            if (map.css("top") === "-1000px")
                map.attr('style', 'bottom:180px !important;top:-1000px!important;');
            else
                map.attr('style', 'bottom:180px !important;');
        } else {
            map.css("bottom", 170, "important");
        }

    } else {

        thumbBtn.removeClass("active-button-thumb thumb-btn-active").addClass(" inactive-button-thumb thumb-btn-inactive");
        if (isMobile) {
            $('#point_title_bar').css('display', 'inline-block');
            if (map.css("top") === "-1000px")
                map.attr('style', 'bottom:80px !important;top:-1000px!important;');
            else
                map.attr('style', 'bottom:80px !important;');
        } else {
            map.css("bottom", 50, "important");
        }

    }

}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");

        for (var i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show-layers-states')) {
                openDropdown.classList.remove('show-layers-states');
            }
        }
    }
}

function shareMobile() {
    var shareWindow = $("#share-window-mobile");

    if (shareWindow.css("display") === "none") {
        shareWindow.show();

    } else {
        shareWindow.hide();
    }
}

var stateButtonTpl = "<button onclick='setLayersState(\"%name%\");'>%name%</button>";

function loadStates(scene, defualtLayersState) {
    var layersStates = states[scene];
    var krpano = document.krpano;
    var currentState = krpano.get("state");
    if (defualtLayersState && currentState === null || currentState === undefined || !layersStates.contains(currentState)) {
        if (currentState != null && !layersStates.contains(currentState)) {
            showToast("The current alternative selected is not available for this point. The alternative has been automatically changed from '"+  currentState +"' to '" + defualtLayersState +"'.");
            krpano.set("state", layersStates[0]);
            currentState = layersStates[0];
        } else {
            krpano.set("state", defualtLayersState);
            currentState = defualtLayersState;
        }

    }

    var ls = $("#layersStates");
    if (ls.children().length > 0) {
        ls.children().remove();
    }


    for (i = 0; i < layersStates.length; i++) {
        $("#layersStates").prepend(stateButtonTpl.replace(/%name%/g, layersStates[i]));
    }

    if (currentState.length >= 18) {
        $("#currentState").html(currentState.substr(0, 18) + "..." + "<span class='tooltiptext'>" + currentState + "</span>");
    } else {
        $("#currentState").html(currentState);
    }

    //set Title
    var viewTitle = krpano.get("scene[" + krpano.get("xml.scene") + "].title");

    if (viewTitle.length >= 18) {
        $("#viewTitle").html(viewTitle.substr(0, 18) + "..." + "<span class='tooltiptext'>" + viewTitle + "</span>");
    } else {
        $("#viewTitle").html(viewTitle);
    }

    $("#point_title_bar").html(viewTitle);
}

function setLayersState(layersState) {
    var krpano = document.krpano;
	var hlookat = krpano.get("view.hlookat");
	var vlookat = krpano.get("view.vlookat");
	var fov = krpano.get("view.fov");	
    krpano.set("state", layersState);		
    krpano.call("loadscene(" + krpano.get("xml.scene") + ",0,null,KEEPVIEW|KEEPHOTSPOTS ,BLEND(1)");
    if (layersState.length >= 20) {
        $("#currentState").html(layersState.substr(0, 20) + "..." + "<span class='tooltiptext'>" + layersState + "</span>");
    } else {
        $("#currentState").html(layersState);
    }
	krpano.set("view.hlookat", hlookat);
	krpano.set("view.vlookat", vlookat);
	krpano.set("view.fov", fov);
	
	}

function getViewSettings(scene) {
    var ViewSettings = {
        ViewMode: Number(scene.viewmode),
        Camera: {
            FOV: Number(scene.fov),
            Up: JSON.parse(scene.up),
            Position: JSON.parse(scene.position),
            Target: JSON.parse(scene.target),
        }
    };

    return ViewSettings;
}

function updateRadar(fov, vlookat, hlookat, fovmin, fovmax) {

    var krpano = document.krpano;
    var selectedScene = krpano.get("scene[" + krpano.get("xml.scene") + "]");
    var viewSettings = getViewSettings(selectedScene);
    var camera = viewSettings.Camera;

    hlookat = hlookat % 360;
    if (hlookat < 0) hlookat += 360;

    var yaw = Math.toRadians(90 - vlookat);
    var pitch;
    if (viewSettings.ViewMode === 0) {
        pitch = Math.toRadians(hlookat * -1 + 180);
    } else {
        var frames = krpano.get("plugin[object].frames");
        var frame = Math.round((180 - (hlookat * -1 + 180)) / 360 * (frames - 1));
        pitch = frame / (frames - 1) * Math.PI * 2;
		yaw = Math.toRadians(90 - Number(selectedScene.vlookat));
    }

    var look = vec3.sub(vec3.create(), camera.Target, camera.Position);
    var dist = vec3.length(look);

    var q = quat.create();
    var rotatex = quat.rotateX(quat.create(), q, yaw);
    var rotatez = quat.rotateZ(quat.create(), q, pitch);
    quat.multiply(q, rotatez, rotatex);

    var up = vec3.fromValues(0, 1, 0);
    vec3.transformQuat(camera.Up, up, q);

    look = vec3.fromValues(0, 0, -1);
    vec3.transformQuat(look, look, q);
    vec3.scale(look, look, dist);

    camera.FOV = fov;
    if (viewSettings.ViewMode === 0)
        vec3.add(camera.Target, camera.Position, look);
    else
        vec3.sub(camera.Position, camera.Target, look);

    camera.FOV = fov;
    var VS = {
        ViewMode: viewSettings.ViewMode,
        Camera: {
            FOV: camera.FOV,
            Up: camera.Up,
            Position: camera.Position,
            Target: camera.Target,
        }
    };

    radarLayer.draw(VS);
}

function updateKeymap(){
	var krpano = document.krpano;
	var scene = krpano.get("scene[" + krpano.get("xml.scene") + "]");
	var position = JSON.parse(scene.position);
	var target = JSON.parse(scene.target);
	
	var component = $("#map");
	component.css("height", "200px");
	component.css("width", "380px");
	keymap.maximized = false; 
	keymap.updateSize();
	
	if (scene.viewmode === "0") {
		//pano
		geometry = new ol.geom.Point([position[0], position[1]]);
		keymap.getView().setCenter([position[0], position[1]]);
	} else {
		//flyover
		geometry = new ol.geom.Point([target[0], target[1]]);
		keymap.getView().setCenter([target[0], target[1]]);
	}
}

function krpanoLoadComplete() {
    var krpano = document.krpano;
    var modelBox = JSON.parse(krpano.get("skin_settings.modelbox"));
    var soundEnabled = JSON.parse(krpano.get("skin_settings.sound"));

    if (soundEnabled) {
        if (isMobile) {
            krpano.set("plugin[sound_mobile].visible", "true");
        } else {
            $("#soundBtn").show();
        }
        krpano.call("playsound(bgsnd, 'sound.mp3', 0);");
    } else {
        if (isMobile) {
            krpano.set("plugin[sound_mobile].visible", "false");
        } else {

            $("#soundBtn").hide();
        }
    }

	
	var helpWindow = $("#helpWindow");
	var helpBtn = $("#helpBtn");
	if (krpano.get("skin_settings.help_opened") == "true")
	{
		helpWindow.show();
        helpBtn.removeClass("inactive-button help-btn-inactive").addClass("active-button help-btn-active");
	}
	else
	{
		helpWindow.hide();
        helpBtn.removeClass("active-button help-btn-active").addClass("inactive-button help-btn-inactive");
	}
	
    var projectionName = 'RDV';

    var proj = new ol.proj.Projection({
        code: projectionName,
        units: 'm',
        extent: modelBox
    });

    var component = $("#map");

    var closemap = new app.KeyMapControl({
        html: "",
        cls: "closemap",
        tooltip: "Close",
        handler: function(evt) {
            var cmp_ = component;
            cmp_.removeClass("show").addClass("hide");
            var mapBtn = $("#mapBtn");
            mapBtn.removeClass("active-button map-btn-active").addClass("inactive-button map-btn-inactive");

        }
    });

    var maximize = new app.KeyMapControl({
        html: "",
        cls: "maximize",
        tooltip: "Maximize",
        handler: function(evt) {
            var cmp_ = component;
            if (!keymap.maximized) {
                cmp_.css("height", cmp_.parent().height() - 230);
                cmp_.css("width", "99.5%");
                keymap.maximized = true;
            } else {
                cmp_.css("height", "200px");
                cmp_.css("width", "380px");
                keymap.maximized = false;
            }
            keymap.updateSize();
        }
    });

    ol.proj.addProjection(proj);
    keymap = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }).extend(isMobile ? [closemap] : [maximize, closemap]),
        interactions: [
            new ol.interaction.DoubleClickZoom(),
            new ol.interaction.DragPan({
                kinetic: new ol.Kinetic(-0.005, 0.05, 100)
            }),
            new ol.interaction.PinchZoom(),
            new ol.interaction.MouseWheelZoom()
        ],
        layers: [new ol.layer.Tile({
            source: new ol.source.XYZ({
                maxZoom: 4,
                url: 'images/keymap/{z}/{x}.{y}.jpg',
                wrapX: false,
                projection: projectionName
            })
        })],
        target: 'map',
        view: new ol.View({
            center: [(modelBox[2] + modelBox[0]) / 2, (modelBox[3] + modelBox[1]) / 2],
            zoom: 0,
            projection: projectionName,
            maxZoom: 4,
            extent: modelBox
        })
    });
	keymap.maximized = false;

    var scenesCount = krpano.get("scene.count");
	var markers = [];
    for (i = 0; i < scenesCount; i++) {
        var scene = krpano.get("scene[" + i + "]");
        var position = JSON.parse(scene.position);
        var target = JSON.parse(scene.target);
        var geometry;

        if (scene.viewmode === "0") {
            //pano
            geometry = new ol.geom.Point([position[0], position[1]]);
            keymap.getView().setCenter([position[0], position[1]]);
			
			var iconStyle = new ol.style.Style({
				image: new ol.style.Icon(({
					anchor: [0.5, 34],
					anchorXUnits: 'fraction',
					anchorYUnits: 'pixels',
					opacity: 1,
					src: 'plugins/images/360.png'
				}))
			});
			
        } else {
            //flyover
            geometry = new ol.geom.Point([target[0], target[1]]);
            keymap.getView().setCenter([target[0], target[1]]);
			
			var iconStyle = new ol.style.Style({
				image: new ol.style.Icon(({
					anchor: [0.5, 34],
					anchorXUnits: 'fraction',
					anchorYUnits: 'pixels',
					opacity: 1,
					src: 'plugins/images/flyover.png'
				}))
			});
        }
		
        var markerFeature = new ol.Feature({
            "scene": scene
        });
		
        markerFeature.setStyle(iconStyle);
        markerFeature.setGeometry(geometry);
		
		markers.push(markerFeature);

        keymap.on('click', function(evt) {
            var feature = keymap.forEachFeatureAtPixel(evt.pixel,
                function(feature) {
                    return feature;
                });
            if (feature) {
                var scene = feature.get("scene");
                if (scene) {
                    var view = $(scene.content).attr("view", "")[0];
					var fovmin = 30;
					var	fovmax = 120;
                    krpano.call("loadscene(" + scene.name + ",view.fov=" + view.getAttribute("fov") + "&view.vlookat=" + view.getAttribute("vlookat") + "&view.hlookat=" + view.getAttribute("hlookat") + "&view.fovmin=" + fovmin + "&view.fovmax=" + fovmax + ",null,KEEPVIEW ,BLEND(1)");
                    radarLayer.draw(getViewSettings(scene));
                }
            }
        });
        
    }
	
	var markerSource = new ol.source.Vector({
		features: markers,
		wrapX: false
	});
	var markerLayer = new ol.layer.Vector({
		source: markerSource,
		name: "marker"
	});

	markerLayer.setZIndex(1);
	keymap.addLayer(markerLayer);	
		
    radarLayer = new Radar({
        name: "radar"
    });;
    radarLayer.setZIndex(0);
    keymap.addLayer(radarLayer);

}

function showToast(text) {
	var krpano = document.krpano;
	var isWebVr = krpano.get("webvr.isenabled");
    if(isWebVr){
		var message = text.split(".");
		var ansMessage = message[0];
		for(var i = 1 ; i < message.length; i++ ){
			ansMessage = ansMessage + ". [/br] " +message[i];  
		}
		krpano.call("show_toast(Info: [/br] "+ ansMessage +")");
	}
	else{
		$("#toastMessege").html(text);
		$("#toastWindow").show();
		setTimeout(function() {
			$("#toastWindow").hide();
		}, 6000);
	}
}

function getSceneId(){
	var krpano = document.krpano;
	var scene = krpano.get("scene[" + krpano.get("xml.scene") + "]");
	var id = scene.name.split('-')[1];
	krpano.set("scene_id", id.toUpperCase());	
}

function GenerateVRThumbs(){
	var krpano = document.krpano;
	var viewTitle = krpano.get("scene[" + krpano.get("xml.scene") + "].title");
	var layersStates = states[viewTitle];
	getSceneId();
	for(var i = 0 ;  i < layersStates.length ; i++)
	{
		var command = "generate_vr_thumbs(" + layersStates[i] + ");";
		krpano.call(command);
	}
}

function GetLookView(){
	var krpano = document.krpano;
	var hs = krpano.get("hotspot[skin_webvr_menu_states]");
	var h = hs.ath;
	var viewTitle = krpano.get("scene[" + krpano.get("xml.scene") + "].title");
	var layersStates = states[viewTitle];
	var between = krpano.get("style[thumb].between");
	krpano.set("lookath",h - ((layersStates.length -1) * (between * 0.5)));
}

function ReloadPageIOS(isIOS, hide){
	if(isIOS)
	{
		hide = hide === "true"; //convert string to boolean.
		var headerBar = $("#header_bar");
		var tBarBg = $("#tbar-background");
		var tBar = $("#tbar");
		if(hide)
		{
			headerBar.hide();
			tBarBg.hide();
			tBar.hide();
			document.getElementById("point_title_bar").style.visibility = "hidden"; 			
			var map = $("#map");
			var helpWindow = $("#helpWindow");
			var mapBtn = $("#mapBtn");
			var helpBtn = $("#helpBtn");			
			map.removeClass("show").addClass("hide");
			mapBtn.removeClass("active-button map-btn-active").addClass("inactive-button map-btn-inactive");
			helpWindow.hide();
			helpBtn.removeClass("active-button help-btn-active").addClass("inactive-button help-btn-inactive");
		}
		else
		{	
			headerBar.show();
			tBarBg.show();
			tBar.show();
			document.getElementById("point_title_bar").style.visibility = "visible"; 			
		}
	}
}