<krpano version="1.20.9">

//HAMID Search plugin
	<layer name="fuzzysearch_placeholder" align="topright" type="container" alpha="1"
	x="165"
	y="46"
	zorder="9"
	width.normal="30%"
	width.mobile="50%"
	keep="true"
	scalechildren="true"
	onhover="showtext(Search for a shop,DEFAULT_search)" 
		   />

	<plugin name="fuzzysearch"
			url="%SWFPATH%/plugins/fuzzysearch.js?2"
			keep="true"
			devices="html5"
			width="100%"
			x="0"
			y="0"
			align="topright"
			parent="fuzzysearch_placeholder"
			include_jquery="true"
			auto_generate_scenes_list="false"
			group_scenes="false"
			theme="style_01"
			font_size="13"
			font_name="Primary"
			textcolor="0x000000"
			bgcolor="0xffffff"
			bgalpha="1"
			bordercolor="0xaaaaaa"
			borderalpha="1"
			selected_item_textcolor="0x000000"
			selected_item_bgcolor="0xf2f2f2"
			selected_item_bgalpha="1"
			button_bgcolor="0xed143d"
			button_bgalpha="1"
			button_textcolor="0xffffff"
			categorybgcolor="0xeeeeee"
			categorybgalpha="1"
			categorytextcolor="0xaaaaaa"
			maxheight="200px"
			text_direction="ltr"
			placeholder="Enter a shop name or ID"
			onInitialized="get_data_from_api()"
	/>



//HAMID FETCH SHOP HS DATA
	
	<action name="get_data_from_api" type="Javascript"><![CDATA[
			var url = "https://www.vicinity.atomic3d.com.au/api.php";
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader('Authorization', 'Basic WjgxdHBIcTlXS3dPQU1zWHZyVVRsQ0F5YU05YU9zamY6MlMybkFqRTg4RXZUY25uUw==');
xhr.setRequestHeader('Accept', '*/*');

var formData = new FormData()
formData.append('url', "https://api.vicinity.com.au/oauth/accesstoken?grant_type=client_credentials");
xhr.send(formData);
xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        var response = JSON.parse(this.response);
        var token = response.access_token;
        getData(token);
    }
};

function getData(token) {
    var url = "https://www.vicinity.atomic3d.com.au/api.php";
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.setRequestHeader('Authorization', "Bearer " + token);

    var formData = new FormData();
	if(krpano.get("mall_name")!=null)
		formData.append('url', 'https://api.vicinity.com.au/v3/leasing-digital-info?filter=centre_name=="' + krpano.get("mall_name") + '"');
	else
		formData.append('url', 'https://api.vicinity.com.au/v3/leasing-digital-info?filter=centre_key==' + krpano.get("centre_key") + '');
    
	formData.append('method', "GET");
    xhr.send(formData);
    xhr.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            var response = JSON.parse(this.response);
            var data = response.data;
            var arraySize = data.length;
            var tempArray = [];
            //set data for search
            var searchData = [];
            for(var i = 0; i < arraySize; i++){
                tempArray[data[i].unit_key] = data[i];
                searchData.push(data[i]);
            }
            console.log("tempArray",tempArray);
            
			/*
			// https://data.page/json/csv
			var ExcelArray = [];
			var arraySize = search_date.length;
			for(var i = 0; i < arraySize; i++){
				ExcelArray.push([search_date[i].unit_key,search_date[i].unit_code,search_date[i].leasing_tenant,search_date[i].category,search_date[i].floor]);
			}
			console.log("ExcelArray",ExcelArray);
			console.log(JSON.stringify(ExcelArray));
			*/
			
            window.mal_data = tempArray;
            window.search_date = searchData;
            
            krpano.call("set_hotspot_data()");

            /*set fuzzy search*/
            var scenes = krpano.get('scene').getArray();
            var scenesArraySize = scenes.length;
            var shopsInScene = [];
            for (var i = 0; i < scenesArraySize; i++) {
				//console.log('scenes[i]', scenes[i]);
                if (!scenes[i].shops) {
                    continue;
                }

                try {
                    var shops = scenes[i].shops;
                    var shopsArray = shops.split(',');
                    for (var index in shopsArray) {
                        shopsInScene.push(parseInt(shopsArray[index]));
                    }
                } catch (e) {

                }
            }
			
			var shopInService = [];
    var shopInXml = [];
    window.added_item = [];
            for (var i = 0; i < arraySize; i++) {
                if (shopsInScene.includes(data[i].unit_key) && !(data[i].unit_key in added_item)) {
					added_item[data[i].unit_key] = true;
                    krpano.call('plugin[fuzzysearch].addItem("' + data[i].unit_code + '","jscall(find_shop(' + i + '))")');
                    krpano.call('plugin[fuzzysearch].addItem("' + data[i].leasing_tenant  + '","jscall(find_shop(' + i + '))")');
                }else{
                    //console.log('not include data => ', json.data[i].unit);
					shopInService.push(data[i].unit_key)
                }
            }
			
			var keyArray = Object.keys(tempArray);
			for(var index in shopsInScene){			
        if(!keyArray.includes(shopsInScene[index].toString())){
            shopInXml.push(shopsInScene[index]);
			console.log('****',shopsInScene[index]);
        }
    }
    
    console.log('shop in api', JSON.stringify(shopInService));
    console.log('shop in xml', JSON.stringify(shopInXml));


            window.find_shop = function(searchKey, data2) {
                try {
                    var data = window.search_date[searchKey];
                    var scenes = krpano.get('scene').getArray();
                    var arraySize = scenes.length;
                    var sceneFound = false;
                    for (var i = 0; i < arraySize; i++) {
                        if (!scenes[i].shops) {
                            continue;
                        }

                        try {
                            var shops = scenes[i].shops;
                            var shopsArray = shops.split(',');
                            for (var index in shopsArray) {
                                if (parseInt(shopsArray[index]) === data.unit_key) {
                                    var sceneName = scenes[i].name;

                                    krpano.call('loadscene("' + sceneName + '", null, MERGE, BLEND(1))');

                                    var hotspots = krpano.get('hotspot').getArray();
                                    for (var hotspotIndex in hotspots) {
                                        if (parseInt(hotspots[hotspotIndex].unit_key) === data.unit_key) {
                                            var name = hotspots[hotspotIndex].name;
                                            krpano.call('looktohotspot("' + name + '","90")');
                                        }
                                    }

                                    sceneFound = true;
                                    break;
                                }
                            }

                            if (sceneFound) {
                                break;
                            }
                        } catch (e) {
                            console.log('error slave', e.message);
                        }
                    }
                } catch (e) {
                    console.log('error master', e.message);
                }
            }
        }
    };
}
		


	]]></action>

	<events onnewpano="set_hotspot_data();" keep="true"></events>

	<style name="shop_unset"></style>

	<action name="set_hotspot_data" type="Javascript"><![CDATA[
	  if(window.mal_data){
		var hotspots = krpano.get("hotspot").getArray();
		var arraySize = hotspots.length;
		for(var i = 0; i< arraySize; i++){
			if(hotspots[i].style === 'shop_unset'){
			  try{
                console.log(hotspots[i].unit_key);
				var dataItem = window.mal_data[hotspots[i].unit_key];
				// krpano.set("hotspot["+hotspots[i].name+"].title", dataItem.retailer);
				krpano.set("hotspot["+hotspots[i].name+"].title", dataItem.unit_key);
				krpano.call("hotspot["+hotspots[i].name+"].loadstyle(shop)");
			  }catch(error){
				//console.log('error in array', error);
			  }
			}
			
			if(hotspots[i].style === 'shop'){
            try{
                //console.log("set hotpspot title",hotspots[i].unit_key);
                var dataItem = window.mal_data[hotspots[i].unit_key];
                // krpano.set("hotspot["+hotspots[i].name+"].title", dataItem.retailer);
                // krpano.set("hotspot["+hotspots[i].name+"].title", dataItem.unit_code);
				if(dataItem.leasing_tenant=="" || dataItem.leasing_tenant==null || dataItem.leasing_tenant==undefined)
					dataItem.leasing_tenant = "---";
                krpano.set("hotspot["+hotspots[i].name+"].title", dataItem.leasing_tenant.replace("[","&#91;").replace("]","&#93;"));
                krpano.set("hotspot["+hotspots[i].mytext+"].html", dataItem.leasing_tenant.replace("[","&#91;").replace("]","&#93;"));
            }catch(error){
                //console.log('error in array', error);
            }
        }
		  }
		}
	]]></action>
	
// Temporary style for hotspots - added by Hamid on 2021-05-05
<style name="skin_hotspotstyle" url="vtourskin_hotspot.png" edge="center" align="center" distorted="false"
	   tooltip=""
	   linkedscene=""
	   linkedscene_lookat=""
	   onclick="skin_hotspotstyle_click();"
	   depth="1000"
	   scale="0.5"
	   onover.addevent="tween(scale,0.5);"
	   onout.addevent="tween(scale,0.5);"
	   onloaded.addevent="skin_hotspotstyle_setup();"
	   onloaded="add_all_the_time_tooltip();"
	   />
<action name="add_all_the_time_tooltip">
txtadd(tooltipname, 'tooltip_', get(name));
addplugin(get(tooltipname)); txtadd(plugin[get(tooltipname)].parent, 'hotspot[',get(name),']');
set(plugin[get(tooltipname)].url,'%SWFPATH%/plugins/textfield.swf');
set(plugin[get(tooltipname)].align,center);
set(plugin[get(tooltipname)].edge,center);
set(plugin[get(tooltipname)].x,0); 
set(plugin[get(tooltipname)].y,0);
set(plugin[get(tooltipname)].width,200);
set(plugin[get(tooltipname)].autoheight,true);
set(plugin[get(tooltipname)].background,false);
set(plugin[get(tooltipname)].border,false);
set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:16px;');
set(plugin[get(tooltipname)].textshadow,1); set(plugin[get(tooltipname)].textshadowrange,6.0); set(plugin[get(tooltipname)].textshadowangle,90);
copy(plugin[get(tooltipname)].html,hotspot[get(name)].unit_key);
set(plugin[get(tooltipname)].enabled,false);
</action>


<action name="popup" type="Javascript" protect="true"><![CDATA[
// Start edit by Hamid - 2021-05-03 -------------------------------------------------------------
var content = "";
try {
    var item = window.mal_data[krpano.get("hotspot[" + args[1] + "].unit_key")];
    if (item) {
        //content += "<h1>" + item.retailer + "<span class='shopid'>"+item.unit_code+"</span></h1>";
        content += "<h1>" + item.leasing_tenant + "</h1>";
        content += "<p>";
        content += '<ul class="shoplist">';
        content += '<li class="category">' + item.category + '</li>';
        content += '<li class="area">' + item.gla + '</li>';
        content += '<li class="level">' + item.floor + '</li>';
        content += '<li class="shopid">' + item.unit_code + '</li>';
        try {
            if (item.controls) {
                for (var index in item.controls) {
                    var listItem = item.controls[index];
                    var nameClass =  listItem.name.replace(' ', '').toLowerCase();
                    content += '<li class="' + nameClass + '">' + '<a target="_blank" href="' + listItem.url + '">Download</a></li>';
                }
            }
        } catch (e) {

        }
        content += '</ul>';
        content += '</p>';
    }
} catch (error) {
    console.log('error***', error);
}
// End edit by Hamid - 2021-05-03 -------------------------------------------------------------

let scroller = document.getElementById("scroller");
let inner_scroller = document.getElementById("inner_scroller");

// Start edit by Hamid - 2021-05-03 -------------------------------------------------------------
// let datacontent = '<div class="text_content">' + krpano.get("data["+args[1]+"].content")+ '</div>';
let datacontent = '<div class="text_content">' + content + '</div>';
// End edit by Hamid - 2021-05-03 -------------------------------------------------------------

let dataimg = krpano.get("hotspot["+args[1]+"].picture");
let datavid = krpano.get("hotspot["+args[1]+"].video");
if(dataimg){
var a = dataimg.split("|"),i;
for (i = 0; i < a.length; i++) {
	if (!imgcontent) {
		var imgcontent = '<li><img src="' + a[i] +'"/></li>' 
	}
	else{
		imgcontent += '<li><img src="' + a[i] +'"/></li>' 
		}
}
datacontent = datacontent
let scrollercontent = '<div class="callbacks_container"><ul class="rslides" id="slider">'+imgcontent+'</ul></div>'
 datacontent = scrollercontent+datacontent;
}
if(datavid){
let scrollercontent = '<video width="100%" autoplay><source src="'+datavid+'" type="video/mp4">Your browser does not support the video tag.</video>'
datacontent = scrollercontent+datacontent;
}
inner_scroller.innerHTML = datacontent;
if(dataimg){
let SliderElem = document.querySelector("#slider");
let img = SliderElem.querySelector('img')

function loaded() {
krpano.call('resize_html_div()')
}

if (img.complete) {
  loaded();
} else {
  img.addEventListener('load', loaded);
}
}
krpano.call("show_html_div()");
]]></action>

</krpano>
