﻿
<krpano>


	//CALLOUT
<callout
		 size="15"
		 color="0xffffff"
		 rotate="45"
		 distancepopup="8"
		 min_fov="180"
		 max_fov="0"
		 line_lenght="60"
		 line_width="2"
		 shape="round"
		 circle_active_width="50"
		 animation="center_screen"
		 text_width="300"
		 callout_bg_border="0,0,0,2"
		 text_x="5"
		 css_title="color:#fff;font-size:20px;font-family:Lato;font-weight:400"
		 css_text="color:#fff;font-size:16px;text-shadow: 3px 3px 8px #000000;"
		 title_background="0x000000"
		 text_background=""
		 title_padding="7"
		 text_padding="10 10 0 0"
		 />

<style name="callout" callout="true" type="container" zorder="1" bgshadow="0 0 25 0x000000 1"
	size="calc:callout.size"
	color="calc:callout.color"
	initial_width="calc:callout.size"
	shape="calc:callout.shape"
	bgalpha="1"
	rotate="calc:callout.rotate"
	distancepopup="calc:callout.distancepopup"
	animation="calc:callout.animation"
	minfov="calc:callout.min_fov"
	maxfov="calc:callout.max_fov"
	line_lenght="calc:callout.line_lenght"
	line_width="calc:callout.line_width"
	circle_active_width="calc:callout.circle_active_width"
	text_width="calc:callout.text_width"
	callout_bg_border="calc:callout.callout_bg_border"
	text_x="calc:callout.text_x"
	css_title="calc:callout.css_title"
	css_text="calc:callout.css_text"
	title_background="calc:callout.title_background"
	text_background="calc:callout.text_background"
	title_padding="calc:callout.title_padding"
	text_padding="calc:callout.text_padding"

	onloaded="build_callout();"
	oncallout="animate_callout(get(callout_line), get(callout_line_vertical), get(callout_title), get(callout_text), get(line_lenght), get(shape), get(circle_active_width));"
	oncallin="animate_callin(get(callout_line), get(callout_line_vertical), get(shape), get(initial_width));"
/>

	<style name="callout_pulse" type="container" align="center" edge="center" bg="false" onloaded="pulse(get(name))" accuracy="1"/>
	<style name="callout_line" type="container" width="2" height="0" bgalpha="1" align="center" edge="bottom"/>
	<style name="callout_line_vertical" type="container" width="0" height="0" align="topright" edge="left" maskchildren="true" />
	<style name="callout_title" type="text" align="topleft" bg="false" enabled="false" bgalpha="0.5" onautosized="set(hotspot[get(phs)].ready,true);"/>
	<style name="callout_text" type="text" align="bottomleft"  bg="false" enabled="false" onautosized="set(hotspot[get(phs)].ready,true)"/>

<action name="build_callout" scope="local">
	copy(caller.bgcolor,caller.color);
	copy(caller.width,caller.size);
	copy(caller.height,caller.size);
	copy(caller.initial_width,caller.size);
	if(caller.shape == 'round', set(caller.bgroundedge,calc:caller.size);set(style[callout_pulse].bgroundedge,calc(caller.size * 2)));
	if(caller.shape == 'circle', set(caller.bgroundedge,calc:caller.size);set(style[callout_pulse].bgroundedge,calc(caller.size * 2)););
	if(caller.shape == 'square', set(caller.bgroundedge,0);set(style[callout_pulse].bgroundedge,0););

	txtadd(callout_pulse,'callout_pulse_',get(caller.name));
	addlayer(get(callout_pulse));
	copy(caller.callout_pulse,callout_pulse);
	layer[get(callout_pulse)].loadstyle(callout_pulse);
	txtadd(parentspot,'hotspot[',get(caller.name),']');
	copy(layer[get(callout_pulse)].parent,parentspot);
	copy(layer[get(callout_pulse)].width,caller.size);
	copy(layer[get(callout_pulse)].height,caller.size);
	set(layer[get(callout_pulse)].bgborder,calc:'6 ' + caller.color + ' 1');

	txtadd(callout_line,'callout_line_',get(caller.name));
	addlayer(get(callout_line));
	copy(caller.callout_line,callout_line);
	layer[get(callout_line)].loadstyle(callout_line);
	copy(layer[get(callout_line)].parent,parentspot);
	copy(layer[get(callout_line)].bgcolor,caller.color);
	copy(layer[get(callout_line)].width,caller.line_width);
	if(caller.shape == 'circle', set(layer[get(callout_line)].oy,calc:-(caller.size/2)));


	txtadd(callout_line_vertical,'callout_line_vertical_',get(caller.name));
	addlayer(get(callout_line_vertical));
	copy(caller.callout_line_vertical,callout_line_vertical);
	copy(layer[get(callout_line_vertical)].hs,caller.name);
	layer[get(callout_line_vertical)].loadstyle(callout_line_vertical);
	set(layer[get(callout_line_vertical)].rotate,calc:- caller.rotate);
	if(caller.callout_bg_alpha,
		copy(layer[get(callout_line_vertical)].bgcolor,caller.callout_bg_color);
		copy(layer[get(callout_line_vertical)].bgalpha,caller.callout_bg_alpha);
	);
	set(layer[get(callout_line_vertical)].bgborder,calc:caller.callout_bg_border + ' ' + caller.color + ' 1');
	if((caller.rotate LT 0) OR (caller.rotate GT 180),
		  set(layer[get(callout_line_vertical)].align,topleft);
		  set(layer[get(callout_line_vertical)].edge,right);
	);
	if(caller.rotate === 0,
		  set(layer[get(callout_line_vertical)].edge,bottomleft);
	);
	if(caller.rotate == 180,
		  set(layer[get(callout_line_vertical)].edge,topleft);
	);
	if(caller.rotate === 360,
		  set(layer[get(callout_line_vertical)].edge,bottomright);
	);
	if(caller.solo,
		  set(layer[get(callout_line_vertical)].edge,topright);
	set(layer[get(callout_line_vertical)].ox,20);
	set(layer[get(callout_line_vertical)].oy,-20);
	);
	txtadd(parentlayer,'layer[',get(callout_line),']');
	copy(layer[get(callout_line_vertical)].parent,parentlayer);

	if(caller.title,
	txtadd(callout_title,'callout_title_',get(caller.name));
	addlayer(get(callout_title));
	copy(layer[get(callout_title)].phs,caller.name);
	copy(caller.callout_title,callout_title);
	layer[get(callout_title)].loadstyle(callout_title);
	if(caller.title_background != null,copy(layer[get(callout_title)].bgcolor,caller.title_background);set(layer[get(callout_title)].bg,true););
	if(caller.title_padding,copy(layer[get(callout_title)].padding,caller.title_padding););
	copy(layer[get(callout_title)].x,caller.text_x);
	copy(layer[get(callout_title)].css,caller.css_title);
	if(caller.rotate LT 0 OR caller.rotate GT 180,
		  set(layer[get(callout_title)].align,topright);
	);
	txtadd(parentlayer2,'layer[',get(callout_line_vertical),']');
	copy(layer[get(callout_title)].parent,parentlayer2);
	copy(layer[get(callout_title)].html,caller.title);
	,
	set(caller.callout_title,'');
	);

	if(caller.content,
	txtadd(callout_text,'callout_text_',get(caller.name));
	addlayer(get(callout_text));
	copy(layer[get(callout_text)].phs,caller.name);
	copy(caller.callout_text,callout_text);
	layer[get(callout_text)].loadstyle(callout_text);
	if(caller.text_background,copy(layer[get(callout_text)].bgcolor,caller.text_background);set(layer[get(callout_text)].bg,true););
	if(caller.text_padding,copy(layer[get(callout_text)].padding,caller.text_padding););
	copy(layer[get(callout_text)].x,caller.text_x);
	copy(layer[get(callout_text)].width,caller.text_width);
	copy(layer[get(callout_text)].css,caller.css_text);
	if(caller.rotate LT 0 OR caller.rotate GT 180,
		  set(layer[get(callout_text)].align,bottomright);
			txtadd(layer[get(callout_text)].css,'text-align:right');
	);
	txtadd(parentlayer2,'layer[',get(callout_line_vertical),']');
	copy(layer[get(callout_text)].parent,parentlayer2);
	copy(layer[get(callout_text)].html,caller.content);
	,
	set(caller.callout_text,'');
	);

	if(caller.onclick,set(caller.bgcapture,true);set(layer[get(callout_line_vertical)].onclick,callwith(hotspot[get(hs)],onclick));set(layer[get(callout_line_vertical)].bgcapture,true););
	if(caller.animation == 'on_over',set(caller.bgcapture,true);set(caller.onover,oncallout);set(caller.onout,oncallin);set(caller.ondown,oncallout);set(caller.onup,oncallin););
	if(caller.animation == 'on_click',set(caller.bgcapture,true);set(caller.onclick,highlight_callout_hotspot(get(name)));set(events[callout_events].onmousedown,hide_callouts));

	set(events[callout_events].onviewchange,test_callout_hotspots_action());
</action>

<action name="animate_callout" protect="true">
copy(bk_zorder,zorder);
set(zorder,1000);
stoptween(layer[%1].height);
stoptween(layer[%2].width);
stoptween(layer[%2].height);
if(%6 == 'circle',set(bgalpha,0);set(bgborder,calc:'2 ' + color + ' 1');tween(width|height|bgroundedge,%7);tween(layer[get(callout_line)].oy,calc(-(%7/2))););
tween(layer[%1].height,%5,0.2,easeOutQuad,
	tween(layer[%2].height,calc(layer[%3].height + layer[%4].height),0.1,easeOutQuad,
		if(layer[%3].width GT layer[%4].width,
			tween(layer[%2].width,calc(layer[%3].width + layer[%3].x),0.4)
			,
			tween(layer[%2].width,calc(layer[%4].width + layer[%3].x),0.4)
		);
	);
);
set(layer[get(callout_pulse)].visible,false);
</action>

<action name="animate_callin" protect="true">
copy(zorder,bk_zorder);
delete(bk_zorder);
stoptween(layer[%1].height);
stoptween(layer[%2].width);
stoptween(layer[%2].height);
if(%3 == 'circle',tween(width|height|bgroundedge,%4,,,set(bgalpha,1);set(bgborder,0 0xffffff 1););tween(layer[get(callout_line)].oy,calc(-(%4/2))););
tween(layer[%2].width,0,0.2,,
	tween(layer[%2].height,0,0.15,easeOutQuad);
	tween(layer[%1].height,0,0.2,easeOutQuad);
	);
set(layer[get(callout_pulse)].visible,true);
</action>

<action name="pulse" protect="true">
tween(layer[%1].scale|layer[%1].alpha,3|0.0,2,,set(layer[%1].scale,1);set(layer[%1].alpha,1);pulse(%1));
</action>

<action name="pulse" protect="true">
tween(layer[%1].scale|layer[%1].alpha,3|0.0,2,,set(layer[%1].scale,1);set(layer[%1].alpha,1);pulse(%1));
</action>


<events name="callout_events" onloadcomplete="set(letspopup,true)" onremovepano="set(letspopup,false)" keep="true"/>

<action name="test_callout_hotspots_action">
if(stagewidth GT 800,test_callout_hotspots(),test_callout_hotspots_smallscreen());
</action>

<action name="test_callout_hotspots" protect="true">
	if(letspopup,
    for(set(i,0), i LT hotspot.count, inc(i),
		if(hotspot[get(i)].style == 'callout' AND hotspot[get(i)].animation == center_screen,
			if(view.fov LT hotspot[get(i)].minfov AND view.fov GT hotspot[get(i)].maxfov,
        		getlooktodistance(d, hotspot[get(i)].ath, hotspot[get(i)].atv);
        			if(d LT calc(view.fov / hotspot[get(i)].distancepopup),
           				highlight_callout_hotspot(get(i));
          				,
           				background_callout_hotspot(get(i));
          				);
			  ,
			  background_callout_hotspot(get(i));
			  );
		  );
		if(hotspot[get(i)].style == 'callout' AND hotspot[get(i)].animation == keep_opened,
			if(view.fov LT hotspot[get(i)].minfov AND view.fov GT hotspot[get(i)].maxfov,
        		getlooktodistance(d, hotspot[get(i)].ath, hotspot[get(i)].atv);
        			if(d LT calc(view.fov / hotspot[get(i)].distancepopup),
           				highlight_callout_hotspot(get(i));
          				);
			  );
		  );
	  );
	);
</action>

<action name="test_callout_hotspots_smallscreen">
if(letspopup,
set(nearest_hs_i,-1);
set(nearest_hs_d,10000);

for(set(i,0), i LT hotspot.count, inc(i),
	if(hotspot[get(i)].style == 'callout' AND hotspot[get(i)].animation == center_screen,
		if(view.fov LT hotspot[get(i)].minfov AND view.fov GT hotspot[get(i)].maxfov,
        	getlooktodistance(temp_d, hotspot[get(i)].ath, hotspot[get(i)].atv);

			if(temp_d LT nearest_hs_d,
				copy(nearest_hs_i,i);
				copy(nearest_hs_d,temp_d);
			);

			if(hotspot[get(i)].ishighlighted AND hotspot[get(i)].name != hotspot[get(nearest_hs_i)].name,background_callout_hotspot(get(hotspot[get(i)].name)));
		);
    );
);

if(nearest_hs_i GE 0 AND nearest_hs_d LT calc(view.fov / hotspot[get(nearest_hs_i)].distancepopup),
    highlight_callout_hotspot(get(hotspot[get(nearest_hs_i)].name));
);
);
</action>


<action name="hide_callouts" protect="true">
for(set(i,0), i LT hotspot.count, inc(i),
	if(hotspot[get(i)].animation == on_click,
		background_callout_hotspot(get(i));
	);
);
</action>


<action name="highlight_callout_hotspot" protect="true">
    if(hotspot[%1].ishighlighted != true AND hotspot[%1].ready,
		set(hotspot[%1].ishighlighted, true);
		callwith(hotspot[%1],oncallout);
     );
</action>

<action name="background_callout_hotspot" protect="true">
	if(hotspot[%1].ishighlighted,
    	set(hotspot[%1].ishighlighted, false);
		callwith(hotspot[%1],oncallin);
	);
</action>

	<action name="check_for_web_fonts_loading" autorun="preinit" type="Javascript" devices="html5"><![CDATA[
    function new_fonts_loaded()
    {
        var layers = krpano.get("layer").getArray();
        var hotspots = krpano.get("hotspot").getArray();

        var i;

        for (i=0; i < layers.length; i++)
        {
            if (layers[i]._istextfield)
            {
                // force an update by changing the vcenter setting two times
                layers[i].vcenter = !layers[i].vcenter;
                layers[i].vcenter = !layers[i].vcenter;
            }
        }

        for (i=0; i < hotspots.length; i++)
        {
            if (hotspots[i]._istextfield)
            {
                // force an update by changing the vcenter setting two times
                hotspots[i].vcenter = !hotspots[i].vcenter;
                hotspots[i].vcenter = !hotspots[i].vcenter;
            }
        }
    }

    if (document.fonts)
    {
        document.fonts.addEventListener("loadingdone", new_fonts_loaded, true);
    }
]]></action>
</krpano>