From: Calin Crisan <ccrisan@gmail.com>
Date: Mon, 19 Aug 2013 11:31:24 +0000 (+0300)
Subject: added various UI effects and improvements
X-Git-Url: http://www.vanbest.org/gitweb/?a=commitdiff_plain;h=204f88a9ca97bce084af0fdc40ceb01944a72a17;p=motioneye-debian

added various UI effects and improvements
---

diff --git a/static/js/base-site.js b/static/js/base-site.js
index 3cff20d..7891d8c 100644
--- a/static/js/base-site.js
+++ b/static/js/base-site.js
@@ -50,7 +50,124 @@ function initUI() {
     makeTimeValidator($('#saturdayFrom'));
     makeTimeValidator($('#saturdayTo'))
     makeTimeValidator($('#sundayFrom'));
-    makeTimeValidator($('#sundayTo'))
+    makeTimeValidator($('#sundayTo'));
+    
+    $('#motionEyeSwitch').change(updateSettingsUI);
+    $('#showAdvancedSwitch').change(updateSettingsUI);
+    $('#storageDeviceSelect').change(updateSettingsUI);
+    $('#autoBrightnessSwitch').change(updateSettingsUI);
+    $('#leftTextSelect').change(updateSettingsUI);
+    $('#rightTextSelect').change(updateSettingsUI);
+    $('#captureModeSelect').change(updateSettingsUI);
+    $('#autoNoiseDetectSwitch').change(updateSettingsUI);
+    $('#videoDeviceSwitch').change(updateSettingsUI);
+    $('#textOverlaySwitch').change(updateSettingsUI);
+    $('#videoStreamingSwitch').change(updateSettingsUI);
+    $('#stillImagesSwitch').change(updateSettingsUI);
+    $('#motionMoviesSwitch').change(updateSettingsUI);
+    $('#motionNotificationsSwitch').change(updateSettingsUI);
+    $('#workingScheduleSwitch').change(updateSettingsUI);
+}
+
+function updateSettingsUI() {
+    var objs = $('tr.settings-item, div.advanced-setting, table.advanced-setting, div.settings-section-title, table.settings');
+    
+    function markHide() {
+        this._hide = true;
+    }
+    
+    function unmarkHide() {
+        this._hide = false;
+    }
+    
+    objs.each(unmarkHide);
+    
+    /* general enable switch */
+    var motionEyeEnabled = $('#motionEyeSwitch').get(0).checked;
+    if (!motionEyeEnabled) {
+        objs.not($('#motionEyeSwitch').parents('div').get(0)).each(markHide);
+    }
+    
+    /* advanced settings */
+    var showAdvanced = $('#showAdvancedSwitch').get(0).checked;
+    if (!showAdvanced) {
+        $('tr.advanced-setting, div.advanced-setting, table.advanced-setting').each(markHide);
+    }
+    
+    /* storage device */
+    if ($('#storageDeviceSelect').val() === 'local-disk') {
+        $('#networkServerEntry').parents('tr:eq(0)').each(markHide);
+        $('#networkUsernameEntry').parents('tr:eq(0)').each(markHide);
+        $('#networkPasswordEntry').parents('tr:eq(0)').each(markHide);
+        $('#networkShareNameEntry').parents('tr:eq(0)').each(markHide);
+    }
+    
+    /* auto brightness */
+    if ($('#autoBrightnessSwitch').get(0).checked) {
+        $('#brightnessSlider').parents('tr:eq(0)').each(markHide);
+    }
+    
+    /* text */
+    if ($('#leftTextSelect').val() !== 'custom-text') {
+        $('#leftTextEntry').parents('tr:eq(0)').each(markHide);
+    }
+    if ($('#rightTextSelect').val() !== 'custom-text') {
+        $('#rightTextEntry').parents('tr:eq(0)').each(markHide);
+    }
+    
+    /* still images capture mode */
+    if ($('#captureModeSelect').val() !== 'interval-snapshots') {
+        $('#snapshotIntervalEntry').parents('tr:eq(0)').each(markHide);
+    }
+    
+    /* auto noise level */
+    if ($('#autoNoiseDetectSwitch').get(0).checked) {
+        $('#noiseLevelSlider').parents('tr:eq(0)').each(markHide);
+    }
+    
+    /* video device switch */
+    if (!$('#videoDeviceSwitch').get(0).checked) {
+        $('#videoDeviceSwitch').parent().nextAll('div.settings-section-title, table.settings').each(markHide);
+    }
+    
+    /* text overlay switch */
+    if (!$('#textOverlaySwitch').get(0).checked) {
+        $('#textOverlaySwitch').parent().next('table.settings').find('tr.settings-item').each(markHide);
+    }
+    
+    /* video streaming switch */
+    if (!$('#videoStreamingSwitch').get(0).checked) {
+        $('#videoStreamingSwitch').parent().next('table.settings').find('tr.settings-item').each(markHide);
+    }
+    
+    /* still images switch */
+    if (!$('#stillImagesSwitch').get(0).checked) {
+        $('#stillImagesSwitch').parent().next('table.settings').find('tr.settings-item').each(markHide);
+    }
+    
+    /* motion movies switch */
+    if (!$('#motionMoviesSwitch').get(0).checked) {
+        $('#motionMoviesSwitch').parent().next('table.settings').find('tr.settings-item').each(markHide);
+    }
+    
+    /* motion notifications switch */
+    if (!$('#motionNotificationsSwitch').get(0).checked) {
+        $('#motionNotificationsSwitch').parent().next('table.settings').find('tr.settings-item').each(markHide);
+    }
+    
+    /* working schedule switch */
+    if (!$('#workingScheduleSwitch').get(0).checked) {
+        $('#workingScheduleSwitch').parent().next('table.settings').find('tr.settings-item').each(markHide);
+    }
+    
+    objs.each(function () {
+        if (this._hide) {
+            $(this).hide(200);
+        }
+        else {
+            $(this).show(200);
+        }
+    });
 }
 
 $(document).ready(function () {
@@ -68,4 +185,5 @@ $(document).ready(function () {
     }).click();
     
     initUI();
+    updateSettingsUI();
 });
diff --git a/templates/base-site.html b/templates/base-site.html
index dcf8f3e..eadbafb 100644
--- a/templates/base-site.html
+++ b/templates/base-site.html
@@ -35,105 +35,105 @@
             <div class="settings-container">
                 <div class="settings-section-title"><input type="checkbox" class="styled section" id="motionEyeSwitch">General Settings</div>
                 <table class="settings">
-                    <tr>
+                    <tr class="settings-item">
                         <td class="settings-item-label"><span class="settings-item-label">Show Advanced Settings</span></td>
                         <td class="settings-item-value"><input type="checkbox" class="styled general" id="showAdvancedSwitch"></td>
                         <td><span class="help-mark" title="enable this to be able to access all the advanced settings">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="settings-item">
                         <td class="settings-item-label"><span class="settings-item-label">motionEye Username</span></td>
                         <td class="settings-item-value"><input type="text" class="styled general" id="motionEyeUsernameEntry"></td>
                         <td><span class="help-mark" title="the username supplied when accessing motionEye">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="settings-item">
                         <td class="settings-item-label"><span class="settings-item-label">motionEye Password</span></td>
                         <td class="settings-item-value"><input type="password" class="styled general" id="motionEyePasswordEntry"></td>
                         <td><span class="help-mark" title="the password that protects the access to motionEye">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td colspan="100"><div class="settings-item-separator"></div></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Storage Device</span></td>
                         <td class="settings-item-value">
                             <select class="styled general" id="storageDeviceSelect">
-                                <option>Local Disk</option>
-                                <option>Network Share</option>
+                                <option value="local-disk">Local Disk</option>
+                                <option value="network-share">Network Share</option>
                             </select>
                         </td>
                         <td><span class="help-mark" title="indicates the storage device where the image and video files will be saved">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Network Server</span></td>
                         <td class="settings-item-value"><input type="text" class="styled general" id="networkServerEntry"></td>
                         <td><span class="help-mark" title="the address of the network server (IP address or hostname)">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Share Username</span></td>
                         <td class="settings-item-value"><input type="text" class="styled general" id="networkUsernameEntry"></td>
                         <td><span class="help-mark" title="the username to be supplied when accessing the network share (leave empty if no username is required)">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Share Password</span></td>
                         <td class="settings-item-value"><input type="text" class="styled general" id="networkPasswordEntry"></td>
                         <td><span class="help-mark" title="the password required by the network share (leave empty if no password is required)">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Share Name</span></td>
                         <td class="settings-item-value"><input type="text" class="styled general" id="networkShareNameEntry"></td>
                         <td><span class="help-mark" title="the name of the network share">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Root Directory</span></td>
                         <td class="settings-item-value"><input type="text" class="styled general" id="rootDirectoryEntry"></td>
                         <td><span class="help-mark" title="the root path (on the selected storage device) where the files will be saved">?</span></td>
                     </tr>
                 </table>
                 
-                <div class="settings-section-title"><input type="checkbox" class="styled section">Video Device</div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section" id="videoDeviceSwitch">Video Device</div>
                 <table class="settings">
-                    <tr>
+                    <tr class="settings-item">
                         <td class="settings-item-label"><span class="settings-item-label">Camera Name</span></td>
                         <td class="settings-item-value"><input type="text" class="styled device" id="deviceNameEntry" placeholder="camera name..."></td>
                         <td><span class="help-mark" title="an alias for this camera device">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td colspan="100"><div class="settings-item-separator"></div></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Light Switch Detection</span></td>
                         <td class="settings-item-value"><input type="checkbox" class="styled device" id="lightSwitchDetectSwitch"></td>
                         <td><span class="help-mark" title="enable this if you want sudden changes in light to not be treated as motion">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Automatic Brightness</span></td>
                         <td class="settings-item-value"><input type="checkbox" class="styled device" id="autoBrightnessSwitch"></td>
                         <td><span class="help-mark" title="enables software automatic brightness (not needed for most cameras)">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Brightness</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled device" id="brightnessSlider"></td>
                         <td><span class="help-mark" title="sets a desired brightness level for this camera">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Contrast</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled device" id="contrastSlider"></td>
                         <td><span class="help-mark" title="sets a desired contrast level for this camera">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Saturation</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled device" id="saturationSlider"></td>
                         <td><span class="help-mark" title="sets a desired saturation (color) level for this camera">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Hue</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled device" id="hueSlider"></td>
                         <td><span class="help-mark" title="sets a desired hue (color) for this camera">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td colspan="100"><div class="settings-item-separator"></div></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Video Resolution</span></td>
                         <td class="settings-item-value">
                             <select class="video-resolution styled device" id="resolutionSelect">
@@ -143,7 +143,7 @@
                         </td>
                         <td><span class="help-mark" title="the video resolution (larger values yield better quality but require larger storage space and bandwidth)">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Video Rotation</span></td>
                         <td class="settings-item-value">
                             <select class="video-resolution styled device" id="rotationSelect">
@@ -155,97 +155,97 @@
                             <td><span class="help-mark" title="use this to rotate the captured image, if your camera is not positioned correctly">?</span></td>
                         </td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Frame Rate</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled device" id="framerateSlider"></td>
                         <td><span class="help-mark" title="sets the number of frames captured by the camera every second (higher values yield smoother videos but require larger storage space and bandwidth)">?</span></td>
                     </tr>
                 </table>
 
-                <div class="settings-section-title"><input type="checkbox" class="styled section">Text Overlay</div>
-                <table class="settings">
-                    <tr class="advanced-setting">
+                <div class="settings-section-title advanced-setting"><input type="checkbox" class="styled section" id="textOverlaySwitch">Text Overlay</div>
+                <table class="settings advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Left Text</span></td>
                         <td class="settings-item-value">
                             <select class="styled text-overlay" id="leftTextSelect">
-                                <option>Camera Name</option>
-                                <option>Timestamp</option>
-                                <option>Custom Text</option>
+                                <option value="camera-name">Camera Name</option>
+                                <option value="timestamp">Timestamp</option>
+                                <option value="custom-text">Custom Text</option>
                             </select>
                         </td>
                         <td><span class="help-mark" title="sets the text displayed on the movies and images, on the lower left corner">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"></td>
                         <td class="settings-item-value"><input type="text" class="styled text-overlay" id="leftTextEntry" placeholder="custom text..."></td>
                         <td><span class="help-mark" title="sets a custom left text; the following special tokens are accepted: %Y = year, %m = month, %d = date, %H = hour, %M = minute, %S = second, %T = HH:MM:SS, %q = frame number, \n = new line">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Right Text</span></td>
                         <td class="settings-item-value">
                             <select class="styled text-overlay" id="rightTextSelect">
-                                <option>Camera Name</option>
-                                <option>Timestamp</option>
-                                <option>Custom Text</option>
+                                <option value="camera-name">Camera Name</option>
+                                <option value="timestamp">Timestamp</option>
+                                <option value="custom-text">Custom Text</option>
                             </select>
                         </td>
                         <td><span class="help-mark" title="sets the text displayed on the movies and images, on the lower right corner">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"></td>
                         <td class="settings-item-value"><input type="text" class="styled text-overlay" id="rightTextEntry" placeholder="custom text..."></td>
                         <td><span class="help-mark" title="sets a custom right text; the following special tokens are accepted: %Y = year, %m = month, %d = date, %H = hour, %M = minute, %S = second, %T = HH:MM:SS, %q = frame number, \n = new line">?</span></td>
                     </tr>
                 </table>
 
-                <div class="settings-section-title"><input type="checkbox" class="styled section">Video Streaming</div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section" id="videoStreamingSwitch">Video Streaming</div>
                 <table class="settings">
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Streaming Frame Rate</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled streaming" id="streamingFramerateSlider"></td>
                         <td><span class="help-mark" title="sets the number of frames transmitted every second on the live streaming">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Streaming Quality</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled streaming" id="streamingQualitySlider"></td>
                         <td><span class="help-mark" title="sets the live streaming quality (higher values yield a better video quality but require more bandwidth)">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Motion Optimization</span></td>
                         <td class="settings-item-value"><input type="checkbox" class="styled streaming" id="motionOptimizationSwitch"></td>
                         <td><span class="help-mark" title="enable this if you want a lower frame rate for the live streaming while no motion is detected">?</span></td>
                     </tr>
                 </table>
                 
-                <div class="settings-section-title"><input type="checkbox" class="styled section">Still Images</div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section" id="stillImagesSwitch">Still Images</div>
                 <table class="settings">
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Image File Name</span></td>
                         <td class="settings-item-value"><input type="text" class="styled still-images" id="imageFileNameEntry" placeholder="file name pattern..."></td>
                         <td><span class="help-mark" title="sets the name pattern for the image (JPEG) files; the following special tokens are accepted: %Y = year, %m = month, %d = date, %H = hour, %M = minute, %S = second, %q = frame number, / = subfolder">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Image Quality</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled still-images" id="imageQualitySlider"></td>
                         <td><span class="help-mark" title="sets the JPEG image quality (higher values yield a better image quality but require more storage space)">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Capture Mode</span></td>
                         <td class="settings-item-value">
                             <select class="styled still-images" id="captureModeSelect">
-                                <option>Motion Triggered</option>
-                                <option>Automated Snapshots</option>
-                                <option>All Frames</option>
+                                <option value="motion-triggered">Motion Triggered</option>
+                                <option value="interval-snapshots">Interval Snapshots</option>
+                                <option value="all-frames">All Frames</option>
                             </select>
                         </td>
                         <td><span class="help-mark" title="sets the image capture mode: Motion Triggered = an image captured whenever motion is detected, Automated Snapshots = an image captured every x seconds, All Frames = saves each frame into an image file">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Snapshot Interval</span></td>
                         <td class="settings-item-value"><input type="text" class="styled number still-images" id="snapshotIntervalEntry"><span class="settings-item-unit">seconds</span></td>
                         <td><span class="help-mark" title="sets the interval (in seconds) for the automated snapshots">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="settings-item">
                         <td class="settings-item-label"><span class="settings-item-label">Preserve Images</span></td>
                         <td class="settings-item-value">
                             <select class="styled still-images" id="preserveImagesSelect">
@@ -260,19 +260,19 @@
                     </tr>
                 </table>
                 
-                <div class="settings-section-title"><input type="checkbox" class="styled section">Motion Movies</div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section" id="motionMoviesSwitch">Motion Movies</div>
                 <table class="settings">
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Movie File Name</span></td>
                         <td class="settings-item-value"><input type="text" class="styled motion-movies" id="movieFileNameEntry" placeholder="file name pattern..."></td>
                         <td><span class="help-mark" title="sets the name pattern for the movie (MPEG) files; the following special tokens are accepted: %Y = year, %m = month, %d = date, %H = hour, %M = minute, %S = second, %q = frame number, / = subfolder">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Movie Quality</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled motion-movies" id="movieQualitySlider"></td>
                         <td><span class="help-mark" title="sets the MPEG video quality (higher values yield a better video quality but require more storage space)">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="settings-item">
                         <td class="settings-item-label"><span class="settings-item-label">Preserve Movies</span></td>
                         <td class="settings-item-value">
                             <select class="styled motion-movies" id="preserveMoviesSelect">
@@ -287,65 +287,65 @@
                     </tr>
                 </table>
                 
-                <div class="settings-section-title">Motion Detection</div>
-                <table class="settings">
-                    <tr class="advanced-setting">
+                <div class="settings-section-title advanced-setting">Motion Detection</div>
+                <table class="settings advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Show Frame Changes</span></td>
                         <td class="settings-item-value"><input type="checkbox" class="styled motion-detection" id="showFrameChangesSwitch"></td>
                         <td><span class="help-mark" title="if this is enabled, frame changes (number of pixels as well as the changed area) are shown on the video; temporarily enable this option to help adjust the motion detection parameters">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Frame Change Threshold</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled motion-detection" id="frameChangeThresholdSlider"></td>
                         <td><span class="help-mark" title="indicates the minimal number of pixels that must change between to frames in order for motion to be detected (smaller values give a more sensitive detection, but are prone to false positives)">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Automatic Noise Detection</span></td>
                         <td class="settings-item-value"><input type="checkbox" class="styled motion-detection" id="autoNoiseDetectSwitch"></td>
                         <td><span class="help-mark" title="enable this to automatically adjust the noise level">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Noise Level</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled motion-detection" id="noiseLevelSlider"></td>
                         <td><span class="help-mark" title="manually sets the noise level to a fixed value">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td colspan="100"><div class="settings-item-separator"></div></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Motion Gap</span></td>
                         <td class="settings-item-value"><input type="text" class="number styled motion-detection" id="gapEntry"><span class="settings-item-unit">seconds</span></td>
                         <td><span class="help-mark" title="sets the number of seconds of silence (i.e. no motion) that mark the end of a motion event">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Captured Before</span></td>
                         <td class="settings-item-value"><input type="text" class="number styled motion-detection" id="preCaptureEntry"><span class="settings-item-unit">frames</span></td>
                         <td><span class="help-mark" title="sets the number of frames to be captured (and included in the movie) before a motion event is detected">?</span></td>
                     </tr>
-                    <tr class="advanced-setting">
+                    <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Captured After</span></td>
                         <td class="settings-item-value"><input type="text" class="number styled motion-detection" id="postCaptureEntry"><span class="settings-item-unit">frames</span></td>
                         <td><span class="help-mark" title="sets the number of frames to be captured (and included in the movie) after a motion event is detected">?</span></td>
                     </tr>
                 </table>
                 
-                <div class="settings-section-title"><input type="checkbox" class="styled section">Motion Notifications</div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section" id="motionNotificationsSwitch">Motion Notifications</div>
                 <table class="settings">
-                    <tr>
+                    <tr class="settings-item">
                         <td class="settings-item-label"><span class="settings-item-label">Email Address</span></td>
                         <td class="settings-item-value"><input type="text" class="styled notifications" id="emailAddressEntry" placeholder="email address..."></td>
                         <td><span class="help-mark" title="email addresses (separated by comma) that are added here will receive notifications whenever a motion event is detected (leave empty to disable email notifications)">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="settings-item">
                         <td class="settings-item-label"><span class="settings-item-label">Phone Number</span></td>
                         <td class="settings-item-value"><input type="text" class="styled notifications" id="phoneNumberEntry" placeholder="phone number..."></td>
                         <td><span class="help-mark" title="phone numbers (separated by comma) that are added here will receive SMS notifications whenever a motion event is detected (leave empty to disable SMS notifications)">?</span></td>
                     </tr>
                 </table>
 
-                <div class="settings-section-title"><input type="checkbox" class="styled section">Working Schedule</div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section" id="workingScheduleSwitch">Working Schedule</div>
                 <table class="settings">
-                    <tr>
+                    <tr class="settings-item">
                         <td class="settings-item-label"><span class="settings-item-label">Monday</span></td>
                         <td class="settings-item-value">
                             <span class="settings-item-unit">from</span><input type="text" class="styled working-schedule time" id="mondayFrom">
@@ -353,7 +353,7 @@
                         </td>
                         <td><span class="help-mark" title="sets the working schedule time interval for Mondays">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="settings-item">
                         <td class="settings-item-label"><span class="settings-item-label">Tuesday</span></td>
                         <td class="settings-item-value">
                             <span class="settings-item-unit">from</span><input type="text" class="styled working-schedule time" id="tuesdayFrom">
@@ -361,7 +361,7 @@
                         </td>
                         <td><span class="help-mark" title="sets the working schedule time interval for Tuesdays">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="settings-item">
                         <td class="settings-item-label"><span class="settings-item-label">Wednesday</span></td>
                         <td class="settings-item-value">
                             <span class="settings-item-unit">from</span><input type="text" class="styled working-schedule time" id="wednesdayFrom">
@@ -369,7 +369,7 @@
                         </td>
                         <td><span class="help-mark" title="sets the working schedule time interval for Wednesdays">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="settings-item">
                         <td class="settings-item-label"><span class="settings-item-label">Thursday</span></td>
                         <td class="settings-item-value">
                             <span class="settings-item-unit">from</span><input type="text" class="styled working-schedule time" id="thursdayFrom">
@@ -377,7 +377,7 @@
                         </td>
                         <td><span class="help-mark" title="sets the working schedule time interval for Thursdays">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="settings-item">
                         <td class="settings-item-label"><span class="settings-item-label">Friday</span></td>
                         <td class="settings-item-value">
                             <span class="settings-item-unit">from</span><input type="text" class="styled working-schedule time" id="fridayFrom">
@@ -385,7 +385,7 @@
                         </td>
                         <td><span class="help-mark" title="sets the working schedule time interval for Friday">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="settings-item">
                         <td class="settings-item-label"><span class="settings-item-label">Saturday</span></td>
                         <td class="settings-item-value">
                             <span class="settings-item-unit">from</span><input type="text" class="styled working-schedule time" id="saturdayFrom">
@@ -393,7 +393,7 @@
                         </td>
                         <td><span class="help-mark" title="sets the working schedule time interval for Saturday">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="settings-item">
                         <td class="settings-item-label"><span class="settings-item-label">Sunday</span></td>
                         <td class="settings-item-value">
                             <span class="settings-item-unit">from</span><input type="text" class="styled working-schedule time" id="sundayFrom">