How to stop panel from opening under certain conditions

How to stop panel from opening under certain conditions

To whom it may concern,

I'm trying to stop a JQM1.3 panel from opening if a certain condition is met. So far I have an event that checks before the panel is open and check a global variable if it equals a condition should prevent the panel from opening. This is the what I have so far JSFiddle Link.

HTML:
  1. <a data-role='button' onclick='openPanel();'>OPEN</a>
  2. <a data-role='button' onclick='closePanel();'>CLOSE</a>
  3. <div data-role="panel" class="rightPanel" data-theme='d' data-position="right" data-display="overlay" data-animate="false" data-swipe-close='false' data-dismissible='false'>
  4.     <p>PANEL</p>
  5. </div>
JavaScript:
  1. $(document).on("pageshow", function(){
  2.     $(document).on("panelbeforeopen", ".rightPanel", panelBeforeOpenEvent);
  3. });

  5. var stopPanelFromOpening = true;
  6. function panelBeforeOpenEvent(event){
  7.     console.log("BEFORE PANEL OPEN:", event);   
  8.     if(stopPanelFromOpening){
  9.         console.log("NEED TO STOP PANEL FROM OPENING");
  10.         event.stopImmediatePropagation();
  11.         event.stopPropagation();
  12.         event.preventDefault();
  13.         return false;
  14.     }
  15. }

  17. function openPanel(){
  18.     $(".rightPanel").panel("open");
  19. }
  20. function closePanel(){
  21.     $(".rightPanel").panel("close");
  22. }
Does anyone know how to make this work? I can't find anything online.

Please and Thank you