Only selected window should have a blue titlebar

code.js

@@ -1,7 +1,7 @@
-// Show and bring to top
-function showAndMakeTop(element) {
+// New window: show and bring to top
+function newWindow(element) {
     $(element).show();
-    $(element).bringToTop();
+    $(element).selectWindow();
 }
 
 $( function() {
@@ -18,12 +18,18 @@ $( function() {
     (function() {
         var highest = 100;
 
-        $.fn.bringToTop = function() {
-            this.css('z-index', ++highest); // increase highest by 1 and set the style
+        $.fn.selectWindow = function() {
+            // Make top
+            this.css('z-index', ++highest);
+            // Make this window selected and others not
+            this.addClass('selectedwindow');
+            $('.window').not(this).each(function(){
+                $(this).removeClass('selectedwindow');
+             });
         };
     })();
     $('.window').click(function() {
-        $(this).bringToTop();
+        $(this).selectWindow();
     });
 
     // Icon single click

index.html

@@ -14,7 +14,7 @@
     <div id="window1" class="window" style="position: absolute; top: 100px; left: 100px; width: 500px; height: 400px; z-index: 1">
       <div class="windowheader">
         <div class="windowclose"></div>
-        <div class="windowtitle">Test</div>
+        <div class="windowtitle">Introduction</div>
       </div>
       <div class="windowinner">
         <div class="fullwindowhtml">
@@ -35,22 +35,22 @@
       </div>
     </div>
 
-    <div id="window3" class="window" style="position: absolute; top: 400px; left: 400px; width: 500px; height: 300px; z-index: 3">
+    <div id="window3" class="window selectedwindow" style="position: absolute; top: 400px; left: 400px; width: 500px; height: 300px; z-index: 3">
       <div class="windowheader">
         <div class="windowclose"></div>
-        <div class="windowtitle">Test</div>
+        <div class="windowtitle">Program Manager</div>
       </div>
       <div class="windowinner">
         <div class="fullwindowicons">
-          <div class="icon" ondblclick="showAndMakeTop('#clock')">
+          <div class="icon" ondblclick="newWindow('#clock')">
             <img src="icons/clock.png">
             <p>Clock</p>
           </div>
-          <div class="icon" ondblclick="showAndMakeTop('#dosprompt')">
+          <div class="icon" ondblclick="newWindow('#dosprompt')">
             <img src="icons/dos.png">
             <p>MS-DOS</p>
           </div>
-          <div class="icon" ondblclick="showAndMakeTop('#doom')">
+          <div class="icon" ondblclick="newWindow('#doom')">
             <img src="icons/doom.png">
             <p>DOOM</p>
           </div>

style.css

@@ -34,17 +34,22 @@ html, body {
 }
 
 .windowheader {
-    background-color: darkblue;
+    background-color: lightgrey;
+    color: black;
     border-bottom: 1px solid black;
     font-size: 14px;
-    height: 20px;
+    height: 20px; 
+}
+
+.selectedwindow .windowheader {
+    background-color: darkblue;
+    color: white;
 }
 
 .windowtitle {
     padding: 2px;
     line-height: 16px;
     text-align: center;
-    color: white;
     cursor: default;
 }