JQuery problem - buttons controlling Google map and 3D viewscreens

I'm working on a space simulator that includes buttons on a control yolk to turn on different viewscreens.

The question is:

Is this the best approach? If I stay away from complex Jquery: if and .dialog boxes and instead, once a viewscreen is on, replace all the viewscreen yolk buttons with buttons that go to an warning alert, if clicked, "Do you really want to change your viewscreen? Yes, No?"

When all viewscreens are off, the regular on / off buttons are used.

This way, the user doesn't accidentally switch viewscreens with a single click and loose their place.​

Here are the details:

(There are 8 different viewscreens in the images. For this example, I will show only code for two.)

Let's call the first yolk buttons that turn on a viewscreen 'Type 1' buttons.
Let's call the 2nd yolk buttons that go to a warning alert 'Type 2' buttons.​

'Type 1' buttons:

Yolk button #1) 3D fly through viewscreen (VRML)
Yolk button #2) Google Mars viewscreen​

With all viewscreens off:

Click any 'Type 1' button and it turns on the viewscreen choice. (Already works)​

With #1 viewscreen on:
'Type 2' buttons:

Click #1 = Warning alert box: "Reset your viewscreen?" or Cancel
Click #2 = Warning alert box: "Change to Mars viewscreen?" or Cancel​

Active Yolk buttons should also show a highlight, so the user can easily see which one on.​

=====
Cockpiit systems on with no viewscreen

3D Stars viewscreen on

Mars Viewscreen on

(More screenshots at: http://www.producerelease.com/sgc/ )

Yolk buttons Business Logic:

Check if any viewscreen is visible and either turn viewscreen immediately on, if no viewscreen is active or serve a warning alert.​

Problems:

Google Maps turns on with a rather complex script with callbacks. Putting JQuery if statements to see if div is visible or if a viewscreen display == block, works and routes the logic correctly, but does not seem to stop the Google Map code from reloading everytime the user clicks the button. Jquery if statements and dialog isn't working.

Floating a JQuery dialog pop-up box is not ideal because I would prefer the warning alert box inserted in a monitor to give the illusion that the cockpit has functioning monitors. Also, the Jquery-ui.css colors had to be tweaked to customize a slider feature in the cockpit to look good and this also screws up the dialog box look. Getting dialog box Yes and No to work with Google Map code is a nightmare. Putting if statements around everything, works for test div border changes, but still ends up with the map refreshing from Google.
​

New Plan of attack:
When any viewscreen is turned on, make same size 'Type 2' buttons to display instead of the 'Type 1' (turn viewscreen on) buttons.

1. Turn 'Type 2' buttons on when any 'Type 1' button is pressed and a viewscreen is active.
2. Turn off 'Type 1' buttons so they cannot be clicked.
   
3. 'Type 2' buttons have click functions to serve a warning div box div; "Do you really want to change the viewscreen?".
4. Warning box fits inside a monitor area with 'Yes' completes the change, 'No' cancels.
5. 30 seconds times out to 'No'.
   
6. Turning all viewscreens off, takes away 'Type 2' buttons. (The off button works but code is not listed here.)
   
7. The 'Type 2' button, for the current active viewscreen, will have a highlight color to show it's the one that is on. (Easy to do display a highlight version image with JQuery.)

​

What do you all think?

Thanks

===

Code examples:

Google get Map code example snippit:
=======================

 
// Clear Viewscreens
    function clsky() {
     document.getElementById('vscr').innerHTML = '';
    }
// Show Mars
      function showMars() {
        google.earth.createInstance('vscr', initCB4, failureCB, { database: 'http://khmdb.google.com/?db=mars' });
    }
      function initCB4(instance) {
        ge = instance;
        ge.getWindow().setVisibility(true);
        ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
        setTimeout(function() {
            // Zoom in
             ge.getOptions().setFlyToSpeed(.2);
             lookAt = ge.createLookAt('');
             lookAt.set(18.4, -134, 0, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 20, 650000);
             ge.getView().setAbstractView(lookAt);
            }, 1000);  // Start the zoom-in after a second.
          google.setOnLoadCallback(showMars);
     // Viewpoint at load
      var ma = ge.createLookAt('');
        ma.set(18.4, -134, 0, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 20, 1280000);
        ge.getView().setAbstractView(ma);
      }
// Standard error result
    function failureCB(errorCode) {
      }

Code (JavaScript):

​

===

​

Viewscreen divs in the upper window area of the cockpit page:
======================================

 
<div id="main">

[INDENT]<!-- 3D Stars -->
[INDENT]<embed id="vs3f" src="h/MPNav_3Dstars_v2.1.wrl" width="916" height="660" >[/INDENT][/INDENT]
      <!-- Google Viewscreen-->
[INDENT][INDENT]<div id="vscr"><embed type="application/geplugin"></div>[/INDENT]

...[/INDENT]
</div>

HTML:

===

​

Yolk buttons in the yolk control area
========================

<div id="yb">

[INDENT]<!-- Lower Yolk controls start point in lower center -->
<!-- 3D Stars button -->
      <div id="vss">Full</div>
<!-- Google Mars Button -->
      <div id="marb" onclick="clsky (); showMars()" value="Mars"></div>[/INDENT]

</div>

HTML:

===

Example of Jquery .click function area in a .js file to control viewscreens on and off
==================================================

 
    $("#marb").click(function() {

         // 3D Screens off
         $("#vs3f").stop(true,true).fadeOut( 800 ),

         // Turn on Google map ID
         $("#vscr").stop(true,true).delay(1000).fadeIn( 800 ),
         $("#vscr").delay(2000).css("display", "block");

  });

Code (JavaScript):

===

Clicking the div id #vss button would switch the viewscreens the other way around and is similar to the above code. (Clip effect is part of jquery-ui.js It animates the vertical, like shutting off a old TV.)
=================

 
   $("#vss").click(function() {

        // Any Google map off
       $("#vscr").hide("clip", 1200),

       // 3D Full On
       $("#vs3f").delay(1200).toggle({"display": "block"});

  });

Code (JavaScript):

 

Update. Obviously the issue above is overly complex and I probably did not state the issue very well.

I solved the problem by changing the buttons to new id divs. Then coding the action for the new button div to whatever I wanted. If the user closes all the viewscreens, the closing action function also puts all the button divs back to their starting state.

Here is the logic that is working. Each button type has default, hover and active images.

Buttons Type A:
Open the viewscreen picked by the user immediately.
Display all button divs type B except the one the user clicked make that type C (Highlight button).

Buttons Type B:
Button images are the same as Type A.
Always go to warning alert screen with [Yes], [No], [VS Off] buttons which auto fades in 20 seconds.
User can choose:
Yes to go ahead, close the current viewscreen and open another.
No to cancel.
VS Off (Viewscreen Off) to close all screens and return buttons to Type A.

Buttons Type C:
Button images are all highlight versions
Logic is the same as Buttons B.

Image showing the alert screen yolk button highlight for the current Sky viewscreen and the options alert screen where the user can confirm a viewscreen change. The other star highlight on the left window console is the green mood light dimmer.



If anyone wants code examples, let me know.