var poiId = 1969539;
var viewer;
var _panoramaId = 0;
var poiThumbs = null;

function AddPlayer()
{
   var customUI = new EveryScape.Viewer.CustomUI();
	// Map Info hide
   //customUI.hideActiveElementType(EveryScape.Viewer.ActiveElementType.POI);
   customUI.customizeExploreMessage("画面を上下左右にドラッグして操作することができます。");
   customUI.customizePanoSynth(
		{ borderColor:0xff3f1b, borderAlpha:0.5, borderWidth: 2, backgroundAlpha:0 },
		{ borderColor:0xff3f1b, borderAlpha:1, borderWidth: 2, backgroundAlpha:0 },
		{ show: "Show", hide: "Hide" }
	);

	// CUSTOMIZE TOOLBAR
    customUI.customizeToolbarFinder(EveryScape.Viewer.FinderVisibility.ON, 10, { thumbnailBorderColor: 0xffffff}, EveryScape.Viewer.FinderContentType.CUSTOM);

	// Loading Webscape hide
	//customUI.disableDefaultPreloader();


	// Parts custom SLINK
	//customUI.customizeIcon( EveryScape.Viewer.Icon.Panorama.Slink.Up, "images/slink.png", {x:45, y:30});
	//customUI.customizeIcon( EveryScape.Viewer.Icon.Panorama.Slink.Over, "images/slink_over.png", {x:45, y:30});
	//customUI.customizeIcon( EveryScape.Viewer.Icon.Panorama.Slink.Down, "images/slink_over.png", {x:45, y:30});

	viewer = EveryScape.installViewer(
	{
		 container:"Viewer", 
		 type:EveryScape.Viewer.Type.FULL,
		 panningType:EveryScape.Viewer.PanoramaViewControlType.DRAG,
		 ui: customUI
	}, {panorama :{poiId:poiId}}, {});

	EveryScape.Application.bind(EveryScape.Viewer.Events.LOAD, viewer, function() 
	{
		if (EveryScape.doesExist(poiId))
		{
			// Parts custom THUMBNAIL SIZE
			EveryScape.Application.getDropoffs({poi:{poiId:poiId}}, {width:43, height:30}, PoiThumbnailsLoaded);
		}
		viewer.setDriveMode(EveryScape.Viewer.DriveMode.AUTO);
	});

	EveryScape.Application.bind(EveryScape.Viewer.Events.Finder.CUSTOMITEMCLICK, viewer, function(res) 
	{
		var itemId = res.data.itemId;
		try
		{
			var thumb = poiThumbs[itemId];
			loadPano(thumb.PanoramaId, thumb.Yaw, thumb.Pitch);
		}
		catch (e) {}
	});
}


function PoiThumbnailsLoaded(thumbs) 
{
	poiThumbs = thumbs;
	// add each thumbnail to the finder
	for (var i=0; i<thumbs.length; i++)
	{
		var thumb = thumbs[i];
		viewer.addCustomFinderItem({id:i, thumbnailUrl:thumb.ThumbnailUri, thumbnailName:thumb.Name});	
	}
}
	
function loadPano(panoramaId, yaw, pitch)
{
	viewer.loadPanorama({panorama:{panoramaId:panoramaId}, lookDirection:{yaw:yaw, pitch:pitch}});
}

window.onload = function()
{
	AddPlayer();
};