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. });

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

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

Please and Thank you