/// include: wayfinder-behaviour
var galleryContentURI = "$__content_uri__";
					
var galleryDoubleTapTime = 0.3
var galleryLastTapTime = 0
var galleryLastTapObj = null

var galleryAssets = [];
var galleryMenu = null;
var galleryTabs = [];

var galleryClickedButton = null;
var galleryWayfinderVisibility = false;
var galleryWayfinder = null;

function gallerySetup(args, mixAssets) {
    if(mixAssets == null || mixAssets.length === 0) {
        Web.request(galleryContentURI).get().parameter("format","json").exec(gallerySetupAssets);  
    } 
    else {
        for(var i = 0; i < mixAssets.length; i++) {
            var assetName = mixAssets[i].split("/").pop(); 
            var assetExtension = mixAssets[i].split('.').pop();           
            galleryAssets.push({	
                name: assetName, 
                extension: assetExtension,
                link: mixAssets[i], 
                reference: "asset"+i,
                loaded: false
            });
        }
    } 

  	galleryWayfinder = Behaviour.create("wayfinder").initalize();
}

function gallerySetupAssets(response){
    for(var i = 0; i < response.body.length; i++) {
        var assetExtension = response.body[i].link.split('.').pop();
        galleryAssets.push({	
            name: response.body[i].name, 
            extension: assetExtension,
            link: response.body[i].link, 
            reference: response.body[i].reference,
            loaded: false
        });
    }

    if (galleryAssets.length === 0) {
        var mixAssets = [	    "https://mixiplycontent.blob.core.windows.net/ryansumner/cat.jpg",
                                "https://mixiplycontent.blob.core.windows.net/ryansumner/Duck/Duck.gltf",
                                "https://mixiplycontent.blob.core.windows.net/ryansumner/tieFighter/tieFighter.gltf"];
    

        for(var i = 0; i < mixAssets.length; i++) {
            var assetName = mixAssets[i].split("/").pop(); 
            var assetExtension = mixAssets[i].link.split('.').pop();            
            galleryAssets.push({	
                name: assetName,
                extension: assetExtension, 
                link: mixAssets[i], 
                reference: "asset"+i,
                loaded: false
            });
        }
    }
}

function galleryStart(args) {
    galleryMenu = galleryConstructMenu();
  	galleryWayfinder.createWayfinder();
  	galleryWayfinder.setTargetPosition(galleryMenu.position); 
  	galleryWayfinder.getModel().setColor(Color.green).hide();
}

function galleryConstructMenu() {
    var menu = MixiplyObject.empty();

    galleryConstructSubMenu("Models", function(asset){
        return asset.extension.toLowerCase() == "gltf" || 
            asset.extension.toLowerCase() == "glb" ||
            asset.extension.toLowerCase() == "obj";            
    }).setParent(menu).show();

    galleryConstructSubMenu("Images", function(asset){
        return (asset.extension.toLowerCase() == "png" || asset.extension.toLowerCase() == "jpeg") &&
            asset.name != "header" &&
            asset.name != "rich text" &&
            !asset.link.includes("/render/");
    }).setParent(menu);

    galleryConstructSubMenu("Text", function(asset){
        return asset.extension.toLowerCase() == "png" &&
            (asset.name == "header" ||  asset.name == "rich text") &&
            asset.link.includes("/render/");
    }).setParent(menu);
  	
  	menu.setPosition(0.25,0,0.5).setScale(1.5,1.5,1.5).LookAt(Player.position);
  	
    gallerySwitchActiveTab(galleryTabs[0].tab);
    
  	return menu;
}

function galleryConstructSubMenu(subMenuName, filter) {
    var menu = MixiplyObject.empty();

    var subMenu = galleryCreateMenu(galleryAssets.filter(filter))
        .setParent(menu)

    var tab = galleryCreateMenuTab(subMenuName)
        .setParent(menu);

    galleryTabs.push({
        tab: tab,
        subMenu: subMenu
    });

    return menu;
}

function galleryCreateMenuTab(menuName){
    var menuTab = UI.text(menuName).setName(menuName)
    					.setLocalRotation(0,180,0)
    					.setCollidable(false);
  	UI.changeColor(menuTab, Color.black);
  	
  	var menuHitBox = Primitive.cube().setName(menuName+" hitBox")
    				.scaleToFill(0.167*menuName.length,0.35,0.0001)
    				.setParent(menuTab)
    				.setLocalPosition(0,0,0.01)
    				.setColor(new Color(171/255,115/255,142/255))
                    .onClickDown(function (hitInfo) {
						galleryClickedButton = hitInfo.hitObject;
                        hitInfo.hitObject.setColor(123/255,83/255,102/255);
        			})
    				.onClickUp(function (hitInfo) {
                      	if(hitInfo.hitObject == galleryClickedButton) {                           
							gallerySwitchActiveTab(hitInfo.hitObject.parent);
                            hitInfo.hitObject.setColor(new Color(171/255,115/255,142/255));                     	
                        }
                        galleryClickedButton = null;                                                
        			});
    
    menuTab.setScale(0.125, 0.125, 0.125);

    return menuTab
}

function gallerySwitchActiveTab(activeTab){
    for(var i = 0; i < galleryTabs.length; i++){
        if(galleryTabs[i].tab == activeTab){
            galleryTabs[i].subMenu.show();
            galleryRepositionTabs(galleryTabs[i].subMenu);
        } else {
            galleryTabs[i].subMenu.hide();
        }
    }
}

function galleryRepositionTabs(activeSubMenu){   
    for(var i = 0; i < galleryTabs.length; i++){            
        galleryTabs[i].tab.setLocalPosition((((galleryTabs.length - i) * 0.25) - (galleryTabs.length - 1) * 0.25), 
                                            ((activeSubMenu.childCount+1)*0.025)+0.01,
                                            0);        
    }
}

function galleryCreateMenu(list) {
    var menuList = MixiplyObject.empty();

    var maxItemNameLength = 0;
    for(var i = 0; i < list.length; i++) {
        var menuItem = galleryCreateMenuItem(list[i]);
        menuItem.setPosition(0, (-i+(list.length/2))*0.05, 0)
                .setParent(menuList);
        list[i].menuItem = menuItem;
        if(list[i].name.length > maxItemNameLength){ 
            maxItemNameLength = list[i].name.length;
        }
    }

    var firstItemYpos = (list.length/2)*0.05
    var lastItemYpos = (-(list.length-1)+(list.length/2))*0.05
    var diff = Math.abs(firstItemYpos - lastItemYpos)
  	var menuBG = Primitive.plane()
    				.scaleToFill(0.0168*maxItemNameLength,list.length*0.05,0.0001)
    				.setLocalPosition(0, firstItemYpos-(diff/2), -0.002)
    				.setLocalRotation(0,180,0)
    				.setColor(new Color(0.1,0.1,0.1))
    				.makeTwoSided()
                    .setParent(menuList);

    return menuList;
}

function galleryCreateMenuItem(asset) {  	
  	var menuElement = UI.text(asset.name)
                        .setName(asset.name)
    					.setLocalRotation(0,180,0)
  						.setScale(0.1,0.1,0.1)
    					.setCollidable(false);
  	UI.changeColor(menuElement, Color.white);
  	
  	var hitBox = Primitive.cube()
    				.scaleToFill(0.167*asset.name.length,0.35,0.0001)
    				.setParent(menuElement)
    				.setLocalPosition(0,0,0.01)
    				.setColor(new Color(171/255,115/255,142/255))
                    .onClickDown(function (hitInfo) {
						galleryClickedButton = hitInfo.hitObject;
                        hitInfo.hitObject.setColor(123/255,83/255,102/255);
        			})
    				.onClickUp(function (hitInfo) {
                      	if(hitInfo.hitObject == galleryClickedButton) {
                            hitInfo.hitObject.setColor(new Color(171/255,115/255,142/255));                          	
							galleryCreateAssetInstance(galleryFindAssetFromName(hitInfo.hitObject.parent.name));                    	
                        }                        
                        galleryClickedButton = null;
        			});
  	
  	return menuElement;
}

function galleryFindAssetFromName(assetName){
    var asset = null;
    for(var i = 0; i < galleryAssets.length; i++){
        if(galleryAssets[i].name == assetName) {
            asset = galleryAssets[i];
            break;
        }
    }
    return asset;
}

function galleryCreateAssetInstance(asset) {
    if (asset == null) { return null; }

  	if(!asset.loaded) {
  		galleryLoadAsset(asset);
      	return null;
    }
  	
  	var instance = Asset.create(asset.reference)
      	.setPosition(0.5,0,0.5)
    	.scaleToFit(0.5,0.5,0.5)
  		.onClickDown(function (hitInfo) {
			galleryDoubleClickCheck(instance, galleryEnableBox);
        })
    	.enableTransformBox()
    	.configTransformBox({ onClose: galleryOnCloseTransformBox });
    
  	return asset;
}

function galleryLoadAsset(asset) {
  	Asset.load(asset.link, asset.reference, function(url, assetReference) {
        asset.loaded = true;

        var instance = Asset.create(assetReference)
      	.setPosition(0.5,0,0.5)
    	.scaleToFit(0.5,0.5,0.5)
  		.onClickDown(function (hitInfo) {
			galleryDoubleClickCheck(instance, galleryEnableBox);
        })
    	.enableTransformBox()
    	.configTransformBox({ onClose: galleryOnCloseTransformBox });
    });
}

function galleryDoubleClickCheck(obj, func){
	if(galleryLastTapObj == obj) {
		if((Mixiply.currentTime - galleryLastTapTime) < galleryDoubleTapTime) {
          	func(obj);
		} else {
			galleryLastTapTime = Mixiply.currentTime;
		}
	} else {
		galleryLastTapObj = obj;
        galleryLastTapTime = Mixiply.currentTime;
	}  
}

function galleryEnableBox(obj) {
 	obj.enableTransformBox();
}

function galleryOnCloseTransformBox(mixiplyObject) {
	mixiplyObject.disableTransformBox();  	
}

function galleryUpdate() {
	if(galleryMenu != null) {
    	galleryMenu.lookAt(Player.position);
    }
  	
  	if(galleryWayfinder != null) {
    	galleryWayfinderCheck( galleryAngleDiff(Player.forward, Vector.subtract(galleryMenu.position, Player.position)) >= 60)      	
    }
}

function galleryOnClickHold(hitInfo) {
  	if(galleryClickedButton == null){ return; }
  	if(hitInfo.didHitObject) {
    	if(galleryClickedButton != hitInfo.hitObject) {
        	galleryClickedButton = null;
        }
    } 
  	else {
    	galleryClickedButton = null;
    }    
}

function galleryOnClickUp(hitInfo) {
  	if(galleryClickedButton == null){ return; }
  	if(galleryClickedButton != hitInfo.hitObject) {
      	galleryClickedButton.setColor(new Color(171/255,115/255,142/255));
    	galleryClickedButton = null;
    }    
}

function galleryAngleDiff(v1, v2) {
  	var numerator = Vector.dot(v1, v2)
  	var dominator = v1.magnitude * v2.magnitude
  	return Math.acos(numerator / dominator)*180/Math.PI
}

function galleryWayfinderCheck(bool) {
  	if(galleryWayfinderVisibility != bool) {
    	galleryWayfinderVisibility = bool;
    	galleryWayfinder.getModel().setVisible(bool);
  	}  
}