navigator.html

<div class="navigator">
	<div class="panel panel-default">
		<div class="panel-heading btn-group projectTabs" data-toggle="buttons" style="padding: 0; width: 100%">
			<label class="btnProjectTree btn btn-default active">
				<input checked="checked" type="radio" name="options"/> Tree
			</label>
			<label class="btnTypes btn btn-default">
				<input type="radio" name="options"/> Types
			</label>
			<label class="btnLayers btn btn-default">
				<input type="radio" name="options"/> Layers
			</label>
			<label class="btnClassifications btn btn-default">
				<input type="radio" name="options"/> Classifications
			</label>
			<label class="btnProperties btn btn-default">
				<input type="radio" name="options"/> Properties
			</label>
			<label class="btnQuery btn btn-default">
				<input type="radio" name="options"/> Query
			</label>
		</div>
		<div class="panel-body sidespanWrapper">
			<div class="sidespan">
				<div class="projectTreeWrapper"></div>
				<div class="propertiesWrapper ih"></div>
				<div class="classificationWrapper ih"></div>
				<div class="typesWrapper ih"></div>
				<div class="layersWrapper ih"></div>
				<div class="queryWrapper ih"></div>
			</div>
		</div>
	</div>
</div>
<script>
function Navigator(containerDiv, parent) {
	var o = this;
	
	this.load = function(){
		var promise = new BimServerApiPromise();
		promise.chain(load(containerDiv.find(".projectTreeWrapper"), "projecttree.html", function(){
			o.projecttree = new ProjectTree($(this), parent, {}, o.selectedObject);
			o.sidespan = o.projecttree;
			return o.projecttree.load();
		}));
		promise.chain(load(containerDiv.find(".typesWrapper"), "types.html", function(){
			o.types = new Types($(this), parent);
		}));
		promise.chain(load(containerDiv.find(".layersWrapper"), "layers.html", function(){
			o.layers = new Layers($(this), parent);
		}));
		promise.chain(load(containerDiv.find(".classificationWrapper"), "classifications.html", function(){
			o.classifications = new Classifications($(this), parent);
		}));
		promise.chain(load(containerDiv.find(".propertiesWrapper"), "properties.html", function(){
			o.properties = new Properties($(this), parent, o.selectedObject);
		}));
		promise.chain(load(containerDiv.find(".queryWrapper"), "query2.html", function(){
			o.query = new Query2($(this), parent, o.selectedObject);
		}));
		
		return promise;
	};

	this.resize = function(){
		var resizeBtn = $(".btnResize");
		var fullscreen = resizeBtn.size() > 0 && !resizeBtn.hasClass("glyphicon-resize-full");
		var width = $(window).width() / 3 - 41;
		var height = ($(window).height() - $(".navbar").outerHeight() - $(".navbar-header").outerHeight() - containerDiv.find(".navigator .panel-heading").outerHeight() + 33) + (fullscreen ? 113 : 0);
		containerDiv.find(".sidespanWrapper").width(width + "px");
		$(".navigator").height(height + "px");
		$(".sidespanWrapper").height((height - 2 - $(".panel-heading.btn-group.projectTabs").outerHeight()) + "px");
	};

	this.showProjectTree = function(){
		if (o.sidespan != null) {
			o.sidespan.hide();
		}
		o.sidespan = o.projecttree;
		o.sidespan.show();
	};

	this.showProperties = function(){
		if (o.sidespan != null) {
			o.sidespan.hide();
		}
		o.sidespan = o.properties;
		o.sidespan.show();
	};

	this.showTypes = function(){
		if (o.sidespan != null) {
			o.sidespan.hide();
		}
		o.sidespan = o.types;
		o.sidespan.show();
	};
	
	this.showLayers = function(){
		if (o.sidespan != null) {
			o.sidespan.hide();
		}
		o.sidespan = o.layers;
		o.sidespan.show();
	};

	this.showQuery = function(){
		if (o.sidespan != null) {
			o.sidespan.hide();
		}
		o.sidespan = o.query;
		o.sidespan.show();
	};
	
	this.showClassifications = function(){
		if (o.sidespan != null) {
			o.sidespan.hide();
		}
		o.sidespan = o.classifications;
		o.sidespan.show();
	};
	
	containerDiv.find(".btnProjectTree").click(o.showProjectTree);
	containerDiv.find(".btnProperties").click(o.showProperties);
	containerDiv.find(".btnTypes").click(o.showTypes);
	containerDiv.find(".btnLayers").click(o.showLayers);
	containerDiv.find(".btnClassifications").click(o.showClassifications);
	containerDiv.find(".btnQuery").click(o.showQuery);
}
</script>