diff --git a/website/o3dv/sidebar.js b/website/o3dv/sidebar.js
index edfc4a5..4c1df2b 100644
--- a/website/o3dv/sidebar.js
+++ b/website/o3dv/sidebar.js
@@ -38,80 +38,120 @@ OV.Sidebar = class
         return this.visible;
     }
 
-    AddProperties (properties)
+    CreatePropertyTable ()
     {
-        function AddProperty (table, property)
-        {
-            let row = $('<tr>').appendTo (table);
-            let nameColum = $('<td>').addClass ('ov_property_table_name').appendTo (row);
-            let valueColumn = $('<td>').addClass ('ov_property_table_value').appendTo (row);
-            nameColum.html (property.name + ':').attr ('title', property.name);
-            let valueText = null;
-            if (property.type === OV.PropertyType.Text) {
-                valueText = property.value;
-            } else if (property.type === OV.PropertyType.Integer) {
-                valueText = property.value.toLocaleString ();
-            } else if (property.type === OV.PropertyType.Number) {
-                valueText = property.value.toLocaleString (undefined, {
-                    minimumFractionDigits: 2,
-                    maximumFractionDigits: 2
-                });
-            } else if (property.type === OV.PropertyType.Percent) {
-                valueText = parseInt (property.value * 100, 10).toString () + '%';
-            } else if (property.type === OV.PropertyType.Color) {
-                let hexString = '#' + OV.ColorToHexString (property.value);
-                let colorCircle = OV.CreateInlineColorCircle (property.value);
-                colorCircle.appendTo (valueColumn);
-                $('<span>').html (hexString).appendTo (valueColumn);
-            }
-            if (valueText !== null) {
-                valueColumn.html (valueText).attr ('title', valueText);
-            }
-        }
-
         this.Clear ();
         let table = $('<table>').addClass ('ov_property_table').appendTo (this.contentDiv);
-        for (let i = 0; i < properties.length; i++) {
-            let property = properties[i];
-            AddProperty (table, property);
-        }
-
-        this.Resize ();
+        return table;
     }
 
+    AddProperty (table, property)
+    {
+        let row = $('<tr>').appendTo (table);
+        let nameColum = $('<td>').addClass ('ov_property_table_name').appendTo (row);
+        let valueColumn = $('<td>').addClass ('ov_property_table_value').appendTo (row);
+        nameColum.html (property.name + ':').attr ('title', property.name);
+        this.DisplayPropertyValue (property, valueColumn);
+    }
+
+    AddCalculatedProperty (table, name, calculateValue)
+    {
+        let row = $('<tr>').appendTo (table);
+        let nameColum = $('<td>').addClass ('ov_property_table_name').appendTo (row);
+        let valueColumn = $('<td>').addClass ('ov_property_table_value').appendTo (row);
+        nameColum.html (name + ':').attr ('title', name);
+
+        let obj = this;
+        let calculateButton = $('<div>').addClass ('ov_property_table_button').html ('Calculate...').appendTo (valueColumn);
+        calculateButton.click (function () {
+            valueColumn.empty ();
+            valueColumn.html ('Please wait...');
+            OV.RunTaskAsync (function () {
+                let propertyValue = calculateValue ();
+                if (propertyValue === null) {
+                    valueColumn.html ('-');
+                } else {
+                    obj.DisplayPropertyValue (propertyValue, valueColumn);
+                }
+            });
+        });
+    }
+
+    DisplayPropertyValue (property, targetDiv)
+    {
+        targetDiv.empty ();
+        let valueText = null;
+        if (property.type === OV.PropertyType.Text) {
+            valueText = property.value;
+        } else if (property.type === OV.PropertyType.Integer) {
+            valueText = property.value.toLocaleString ();
+        } else if (property.type === OV.PropertyType.Number) {
+            valueText = property.value.toLocaleString (undefined, {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2
+            });
+        } else if (property.type === OV.PropertyType.Percent) {
+            valueText = parseInt (property.value * 100, 10).toString () + '%';
+        } else if (property.type === OV.PropertyType.Color) {
+            let hexString = '#' + OV.ColorToHexString (property.value);
+            let colorCircle = OV.CreateInlineColorCircle (property.value);
+            colorCircle.appendTo (targetDiv);
+            $('<span>').html (hexString).appendTo (targetDiv);
+        }
+        if (valueText !== null) {
+            targetDiv.html (valueText).attr ('title', valueText);
+        }
+    }
+    
     AddElementProperties (element)
     {
-        let properties = [];
-        properties.push (new OV.Property (OV.PropertyType.Integer, 'Vertex Count', element.VertexCount ()));
-        properties.push (new OV.Property (OV.PropertyType.Integer, 'Triangle Count', element.TriangleCount ()));
+        this.Clear ();
+        let table = this.CreatePropertyTable ();
         let boundingBox = OV.GetBoundingBox (element);
         let size = OV.SubCoord3D (boundingBox.max, boundingBox.min);
-        properties.push (new OV.Property (OV.PropertyType.Number, 'Size X', size.x));
-        properties.push (new OV.Property (OV.PropertyType.Number, 'Size Y', size.y));
-        properties.push (new OV.Property (OV.PropertyType.Number, 'Size Z', size.z));
-        this.AddProperties (properties);
+        this.AddProperty (table, new OV.Property (OV.PropertyType.Integer, 'Vertex Count', element.VertexCount ()));
+        this.AddProperty (table, new OV.Property (OV.PropertyType.Integer, 'Triangle Count', element.TriangleCount ()));
+        this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size X', size.x));
+        this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size Y', size.y));
+        this.AddProperty (table, new OV.Property (OV.PropertyType.Number, 'Size Z', size.z));
+        this.AddCalculatedProperty (table, 'Volume', function () {
+            const volume = OV.CalculateVolume (element);
+            if (volume === null) {
+                return null;
+            }
+            return new OV.Property (OV.PropertyType.Number, null, volume);
+        });
+        this.AddCalculatedProperty (table, 'Surface Area', function () {
+            const volume = OV.CalculateSurfaceArea (element);
+            if (volume === null) {
+                return null;
+            }
+            return new OV.Property (OV.PropertyType.Number, null, volume);
+        });
+        this.Resize ();
     }
 
     AddMaterialProperties (material)
     {
-        function AddTextureMap (properties, name, map)
+        function AddTextureMap (obj, table, name, map)
         {
             if (map === null || map.name === null) {
                 return;
             }
             let fileName = OV.GetFileName (map.name);
-            properties.push (new OV.Property (OV.PropertyType.Text, name, fileName));
+            obj.AddProperty (table, new OV.Property (OV.PropertyType.Text, name, fileName));
         }
 
-        let properties = [];
-        properties.push (new OV.Property (OV.PropertyType.Color, 'Color', material.diffuse));
-        properties.push (new OV.Property (OV.PropertyType.Percent, 'Opacity', material.opacity));
-        AddTextureMap (properties, 'Diffuse Map', material.diffuseMap);
-        AddTextureMap (properties, 'Specular Map', material.specularMap);
-        AddTextureMap (properties, 'Bump Map', material.bumpMap);
-        AddTextureMap (properties, 'Normal Map', material.normalMap);
-        AddTextureMap (properties, 'Emissive Map', material.emissiveMap);      
-        this.AddProperties (properties);
+        this.Clear ();
+        let table = this.CreatePropertyTable ();
+        this.AddProperty (table, new OV.Property (OV.PropertyType.Color, 'Color', material.diffuse));
+        this.AddProperty (table, new OV.Property (OV.PropertyType.Percent, 'Opacity', material.opacity));
+        AddTextureMap (this, table, 'Diffuse Map', material.diffuseMap);
+        AddTextureMap (this, table, 'Specular Map', material.specularMap);
+        AddTextureMap (this, table, 'Bump Map', material.bumpMap);
+        AddTextureMap (this, table, 'Normal Map', material.normalMap);
+        AddTextureMap (this, table, 'Emissive Map', material.emissiveMap);      
+        this.Resize ();
     }    
 
     Resize ()
diff --git a/website/o3dv/website.css b/website/o3dv/website.css
index b66d322..204759c 100644
--- a/website/o3dv/website.css
+++ b/website/o3dv/website.css
@@ -684,6 +684,12 @@ table.ov_property_table td.ov_property_table_value
 	text-align: right;
 }
 
+table.ov_property_table div.ov_property_table_button
+{
+	color: #3393bd;
+	cursor: pointer;
+}
+
 div.ov_thin_scrollbar
 {
 	scrollbar-color: #cccccc transparent;