add gif region for a more dynamic region view

cefi.css

@@ -2,8 +2,17 @@
   text-align: center;
 }
 
-.navbar-collapse-cefi {
-  background-color: #51565b; /* Replace 'your-color' with the desired background color */
+.gifDemo {
+  width: 100%
+}
+/* .nav-tabs .dropdown-menu,
+.nav-tabs .dropdown-menu li,
+.tab .nav-tabs .active .dropdown-menu li a{
+  background-color: #edeff0 !important; 
+} */
+
+/* .navbar-collapse-cefi {
+  background-color: #51565b;
 }
 
 #cefinavbar.navbar ul.nav > li > a{
@@ -20,7 +29,7 @@
 #cefinavbar.navbar li.dropdown.open a.dropdown-toggle[aria-expanded="true"] {
   color: white !important; 
   background-color: transparent !important; 
-}
+} */
 
 #cookbookFrame {
   height: 3100px;

overview.html

@@ -3,25 +3,38 @@
 <link rel="stylesheet" href="overview_card.css">
 <link rel="stylesheet" href="cefi.css">
 
-<h2 class="headingCenter">Regions in CEFI</h2>
-<div class="container">
-  <div class="row">  
-    <div class="col-md-2 regionCol">
-      <input type="radio" class="radioRegionDemo" id="regionNWA" name="regionOptions" checked>
-      <label for="regionNWA">Northwest Atlantic</label>
-    </div>
-    <div class="col-md-3 regionCol">
-      <input type="radio" id="regionNEP" name="regionOptions">
-      <label for="regionNEP">Northeast Pacific (coming soon)</label>
-    </div>
+<h2 class="headingCenter">1 minute CEFI</h2>
+<p>
+  NOAA’s Climate, Ecosystems, and Fisheries Initiative (CEFI) focuses on creating an 
+  operational ocean modeling and decision support system. This system will cover 
+  <strong>various ocean regions, including the U.S. coastline,</strong> and provide actionable information to help 
+  decision-makers adapt to changing ocean conditions. 🌊🐟🌎
+</p>
+
+<h2 class="headingCenter">Regions</h2>
+<div class="row">  
+  <div class="col-md-2 regionCol">
+    <input type="radio" class="radioRegionDemo" id="northwest_atlantic" name="regionOptions" checked>
+    <label for="northwest_atlantic">Northwest Atlantic</label>
   </div>
-  <div class="row">
-    <div class="col-xs-12 gifNWA">
-      <img class="img-fluid" src="img/regions_gif/regional_mom6_tos_demo.gif" alt="Regional MOM6 Northwest Atlantic Region Sea Surface Temperature Latest Forecast">
-    </div>
+  <div class="col-md-3 regionCol">
+    <input type="radio" id="northeast_pacific" name="regionOptions">
+    <label for="northeast_pacific">Northeast Pacific (coming soon)</label>
+  </div>
+</div>
+<div class="row">
+  <div class="col-md-12 headingCenter">
+  <p><strong>Region picked here will be the default value across the portal!</strong></p>
   </div>
 </div>
 
+<div class="row">
+  <div class="col-xs-12">
+    <img class="gifDemo" src="img/regions_gif/regional_mom6_tos_demo.gif" alt="Regional MOM6 Northwest Atlantic Region Sea Surface Temperature Latest Forecast">
+  </div>
+</div>
+
+
 </br>
 
 <div class="row">

overview.js

@@ -0,0 +1,23 @@
+var defaultRegion = 'northwest_atlantic';
+
+$(document).ready(function() {
+    // Listen for changes in the radio buttons
+    $('input[name="regionOptions"]').change(function() {
+        // Get the ID of the selected label
+        var labelId = $(this).next('label').attr('for');
+        console.log('Portal default region :', labelId);
+        // change all regions to the radio options
+        chooseDefaultRegion('reg-mom-cobalt',labelId)
+    });
+});
+
+
+// function for create option for general options
+function chooseDefaultRegion(selectClass,defaultValue) {
+    let elms = document.getElementsByClassName(selectClass);
+    // loop through all region dropdown with the selectClassName
+    for(let i = 0; i < elms.length; i++) {
+        // Set the default option based on the option value
+        elms[i].value = defaultValue
+    }
+};