<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>PChat - Discord Refined</title>

  <!-- Google Fonts for better typography -->

  <!-- Font Awesome for Icons -->

  <style>
    /************************************************************
      CSS VARIABLES
    *************************************************************/
    :root {
      --background-primary: #36393f;
      --background-secondary: #2f3136;
      --background-tertiary: #202225;
      --background-hover: #40444b;
      --background-active: #4a4e57;
      --accent: #5865f2;
      --accent-hover: #4752c4;
      --accent-active: #3a44b8;
      --success: #43b581;
      --error: #f04747;
      --info: #7289da;
      --text-primary: #dcddde;
      --text-secondary: #b9bbbe;
      --text-highlight: #ffffff;
      --border-color: #1a1c1f;
      --font-family: 'Whitney', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
      --button-size: 15px;
    }

    /************************************************************
      GLOBAL & RESET
    *************************************************************/
    *, *::before, *::after {
      box-sizing: border-box;
    }

    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: var(--font-family);
      background-color: var(--background-primary); 
      color: var(--text-primary);           
      overflow: auto;         
    }

    .emoji-image {
      width: 24px;
      height: 24px;
      cursor: pointer;
      transition: transform 0.2s ease;
    }
    .emoji-image:hover {
      transform: scale(1.3);
    }

    /* Inline Emojis in Messages */
    .inline-emoji {
      width: 20px;
      height: 20px;
      vertical-align: middle;
    }

    a {
      color: var(--accent);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    a:hover {
      text-decoration: underline;
      color: #6fa8dc; /* Slightly lighter shade for hover */
    }
    button {
      font-family: inherit;
      cursor: pointer;
      border: none;
      background: none;
      color: inherit;
    }
    .hidden {
      display: none !important;
    }

    /* Scrollbar Styling */
    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-track {
      background: var(--background-tertiary);
    }
    ::-webkit-scrollbar-thumb {
      background-color: var(--background-hover);
      border-radius: 4px;
    }

    /************************************************************
      CUSTOM TITLE BAR
    *************************************************************/
    .title-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: var(--background-secondary);
      color: var(--text-highlight);
      height: 35px;
      padding: 0 12px;
      -webkit-app-region: drag; /* Makes this area draggable */
      user-select: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10000; /* Ensure it's above other elements */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .title-bar-buttons {
      display: flex;
      gap: 8px;
      -webkit-app-region: no-drag; /* Exclude buttons from drag */
    }

    .button {
      width: 15px;
      height: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      transition: background-color 0.2s ease, transform 0.1s ease;
      position: relative;
      font-size: 10px;
      color: #ffffff;
      font-weight: bold;
    }

    .button.minimize {
      background-color: #fbd14b; /* Yellow */
    }

    .button.minimize:hover {
      background-color: #f1c40f;
      transform: scale(1.1);
    }

    .button.maximize {
      background-color: #43b581; /* Green */
    }

    .button.maximize:hover {
      background-color: #2ecc71;
      transform: scale(1.1);
    }

    .button.close {
      background-color: #f04747; /* Red */
    }

    .button.close:hover {
      background-color: #e74c3c;
      transform: scale(1.1);
    }

    /************************************************************
      AUTH OVERLAY (LOGIN / REGISTER)
    *************************************************************/
    .auth-overlay {
      position: fixed;
      top: 0; 
      left: 0;
      width: 100%; 
      height: 100%;
      background-color: rgba(54, 57, 63, 0.95);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      padding: 16px;
      box-sizing: border-box;
    }
    .auth-container {
      background-color: var(--background-secondary);
      border-radius: 10px;
      padding: 40px;
      width: 100%;
      max-width: 500px; 
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
      animation: fadeIn 0.3s ease;
    }
    .auth-container h1 {
      margin-bottom: 30px;
      font-size: 26px;
      font-weight: 700;
      text-align: center;
      color: var(--text-highlight);
    }
    .auth-sections {
      display: flex;
      flex-direction: column;
      gap: 30px;
    }
    .auth-box {
      background: var(--background-tertiary);
      border-radius: 8px;
      padding: 25px 20px;
      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
    }
    .auth-box h2 {
      margin-bottom: 20px;
      font-weight: 600;
      color: var(--text-highlight);
      font-size: 20px;
      text-align: center;
    }
    .input-group {
      margin-bottom: 18px;
    }
    .input-group label {
      display: block;
      margin-bottom: 6px;
      color: var(--text-secondary);
      font-size: 14px;
      font-weight: 500;
    }
    .input-group input {
      width: 100%;
      padding: 10px 12px;
      background-color: var(--background-hover);
      border: 1px solid var(--background-tertiary);
      border-radius: 5px;
      font-size: 14px;
      color: var(--text-highlight);
      outline: none;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }
    .input-group input:focus {
      background-color: var(--background-active);
      border-color: var(--accent);
    }
    .auth-box .btn {
      display: block;
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 5px;
      background-color: var(--accent);
      color: #ffffff;
      font-size: 16px;
      cursor: pointer;
      margin-top: 8px;
      font-weight: 500;
      text-align: center;
      transition: background 0.3s ease, transform 0.1s ease;
    }
    .auth-box .btn:hover {
      background-color: var(--accent-hover);
      transform: scale(1.02);
    }
    .auth-box .btn:active {
      transform: scale(0.98);
    }

    /************************************************************
      DISCORD-LIKE LAYOUT (MAIN AFTER LOGIN)
    *************************************************************/
    .discord-layout {
      position: fixed;
      top: 35px; /* Adjusted to account for the title bar height */
      left: 0;
      width: 100%;
      height: calc(100% - 35px); /* Adjusted to account for the title bar height */
      display: flex;
      overflow: hidden; /* Allows internal elements to handle scrolling */
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .hidden {
      opacity: 0;
      visibility: hidden;
    }

    /************************************************************
      LEFT SIDEBAR (Servers)
    *************************************************************/
    .left-sidebar {
      flex: 0 0 72px; 
      background-color: var(--background-tertiary);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 0;
      overflow-y: auto;
      border-right: 1px solid var(--border-color);
    }
    .server-icon {
      width: 40px; /* Reduced from 50px */
      height: 40px; /* Reduced from 50px */
      background-color: var(--accent);
      border-radius: 50%;
      margin: 8px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 14px; /* Reduced from 16px */
      font-weight: bold;
      transition: all 0.2s ease;
      position: relative;
    }
    .server-icon:hover {
      background-color: var(--accent-hover);
      transform: scale(1.05);
    }
    .server-icon.active {
      box-shadow: 0 0 0 3px var(--accent);
    }

    /* If you have images inside server icons, ensure they fit properly */
    .server-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      display: block;
    }

    /************************************************************
      CHANNELS SIDEBAR (Rooms) + UNIFIED TOP HEADERS
    *************************************************************/
    .channels-sidebar {
      flex: 0 0 260px; 
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      background-color: var(--background-tertiary); 
      border-right: 1px solid var(--border-color);
    }

    /* The unified top bar (rooms label) across the full height */
    .channels-header {
      height: 50px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      box-sizing: border-box;
      font-weight: 600;
      font-size: 16px;
      color: var(--text-highlight);
      border-bottom: 1px solid var(--border-color);
      background-color: var(--background-tertiary);
    }

    .room-section {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    .room-section .input-group {
      margin-bottom: 10px;
    }
    .room-section .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      border: none;
      border-radius: 5px;
      background-color: var(--accent);
      color: #ffffff;
      font-size: 14px;
      cursor: pointer;
      margin-top: 8px;
      font-weight: 500;
      text-align: center;
      transition: background 0.3s ease, transform 0.1s ease;
    }
    .room-section .btn:hover {
      background-color: var(--accent-hover);
      transform: scale(1.02);
    }
    .room-section .btn:active {
      transform: scale(0.98);
    }

    /************************************************************
      MAIN CHAT AREA
    *************************************************************/
    .chat-area {
      flex: 1; 
      background-color: var(--background-primary);
      display: flex;
      flex-direction: column;
      position: relative;
      transition: background-color 0.3s ease;
    }
    /* If no room is chosen => show a placeholder message. */
    .chat-area.no-room .chat-header,
    .chat-area.no-room .chat-box,
    .chat-area.no-room .chat-input-wrapper {
      display: none;
    }
    .chat-area.no-room .no-room-message {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: var(--text-secondary);
      text-align: center;
      padding: 20px;
    }

    /* Chat Header (top) */
    .chat-header {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      box-sizing: border-box;
      background-color: var(--background-secondary);
      border-bottom: 1px solid var(--border-color);
      flex-shrink: 0;
      gap: 10px;
    }
    .chat-header h2 {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-highlight);
      margin-right: 10px;
    }
    .close-room-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      background-color: var(--error);
      border: none;
      border-radius: 5px;
      color: #ffffff;
      font-size: 14px;
      font-weight: 500;
      transition: background 0.2s ease, transform 0.1s ease;
      cursor: pointer;
      height: 36px;
    }
    .close-room-btn:hover {
      background-color: #d83c3e; /* Darker shade */
      transform: scale(1.02);
    }
    .close-room-btn:active {
      transform: scale(0.98);
    }

    /* Chat Messages */
    .chat-box {
      flex: 1;
      overflow-y: auto;
      padding: 15px;
      background-color: var(--background-primary);
      box-sizing: border-box;
      font-family: var(--font-family);
      font-size: 14px;
      color: var(--text-primary);
    }
    .message {
      max-width: 100%;
      word-wrap: break-word;
      margin-bottom: 10px;
      padding: 8px 12px;
      background-color: var(--background-secondary);
      border-radius: 8px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      transition: background-color 0.2s ease;
    }
    .message:hover {
      background-color: var(--background-hover);
    }
    .message-header {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-bottom: 4px;
    }
    .message-header .username {
      font-weight: 700;
      color: var(--text-highlight);
      font-size: 14px;
    }
    .message-header .timestamp {
      font-size: 12px;
      color: var(--text-secondary);
      margin-left: 5px;
    }
    .message-content {
      font-size: 14px;
      color: var(--text-primary);
      line-height: 1.4;
      white-space: pre-wrap;
    }

    /************************************************************
      CHAT INPUT (BOTTOM)
    *************************************************************/
    .chat-input-wrapper {
      flex-shrink: 0;
      padding: 12px 16px;
      background-color: var(--background-secondary);
      border-top: 1px solid var(--border-color);
      display: flex;
      gap: 10px;
      align-items: center;
      box-sizing: border-box;
    }
    /* Discord-like text area */
    .chat-input {
      flex: 1;
      display: block;
      background-color: var(--background-hover);
      border: none;
      border-radius: 8px;
      padding: 10px 14px;
      color: var(--text-primary);
      font-size: 15px;
      line-height: 20px;
      resize: none;     
      max-height: 120px; 
      overflow-y: auto;
      font-family: var(--font-family); 
      transition: background-color 0.2s ease;
    }
    .chat-input:focus {
      outline: none;
      background-color: var(--background-active);
    }
    .chat-input::placeholder {
      color: var(--text-secondary);
    }

    /* Send / Emoji Buttons */
    .chat-send-btn,
    .chat-emoji-btn {
      width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--accent);
      color: #ffffff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 18px;
      transition: background 0.3s ease, transform 0.1s ease;
      flex-shrink: 0;
    }
    .chat-send-btn:hover,
    .chat-emoji-btn:hover {
      background-color: var(--accent-hover);
      transform: scale(1.02);
    }
    .chat-send-btn:active,
    .chat-emoji-btn:active {
      transform: scale(0.98);
    }

    /* Emoji Button Specific Styling */
    .chat-emoji-btn {
      font-size: 20px; /* Larger emoji */
    }

    /************************************************************
      EMOJI PICKER
    *************************************************************/
    .emoji-picker {
      position: absolute;
      bottom: 80px;
      right: 20px;
      background-color: var(--background-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 10px;
      max-width: 320px;
      max-height: 250px;
      overflow-y: auto;
      z-index: 1000;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      animation: fadeIn 0.2s ease;
    }
    .emoji-item {
      display: inline-block;
    }
    .emoji {
      font-size: 24px;
      margin: 2px;
      cursor: pointer;
      transition: transform 0.2s ease;
      user-select: none;
    }
    .emoji:hover {
      transform: scale(1.3);
    }

    /************************************************************
      TOAST NOTIFICATIONS
    *************************************************************/
    #toast-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .toast {
      background: var(--background-secondary);
      color: var(--text-primary);
      padding: 12px 20px;
      margin-bottom: 10px;
      border-radius: 5px;
      opacity: 0.95;
      font-size: 14px;
      transition: opacity 0.5s ease, transform 0.3s ease;
      max-width: 300px;
      word-wrap: break-word;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .toast.success {
      background: var(--success);
      color: #fff;
    }
    .toast.error {
      background: var(--error);
      color: #fff;
    }
    .toast.info {
      background: var(--info);
      color: #fff;
    }
    .toast .icon {
      font-size: 16px;
    }
    .toast .message {
      flex: 1;
    }

    /************************************************************
      VOICE CHAT CONTROLS
    *************************************************************/
    .voice-chat-controls {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .voice-btn {
      padding: 6px 12px;
      background-color: var(--success);
      border: none;
      border-radius: 5px;
      color: #ffffff;
      cursor: pointer;
      font-size: 14px;
      margin: 0 5px;
      transition: background 0.2s ease, transform 0.1s ease;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .voice-btn.leave {
      background-color: var(--error);
    }
    .voice-btn:hover {
      opacity: 0.9;
      transform: scale(1.02);
    }
    .voice-btn:active {
      transform: scale(0.98);
    }

    /************************************************************
      RIGHT SIDEBAR (User list)
    *************************************************************/
    .right-sidebar {
      flex: 0 0 260px; 
      background-color: var(--background-secondary);
      border-left: 1px solid var(--border-color);
      overflow-y: auto;
      padding: 16px;
      box-sizing: border-box;
    }
    .right-sidebar .placeholder {
      text-align: center;
      margin-top: 20px;
      color: var(--text-secondary);
      font-size: 14px;
      padding: 0 10px;
      box-sizing: border-box;
    }

    /* User List Example */
    .user-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .user {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px;
      background-color: var(--background-hover);
      border-radius: 5px;
      transition: background-color 0.2s ease;
    }
    .user:hover {
      background-color: var(--background-active);
    }
    .user .avatar {
      width: 32px; /* Updated from 36px */
      height: 32px; /* Updated from 36px */
      background-color: var(--accent);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden; /* Ensures the image stays within the circle */
      position: relative;
      /* Removed background-color to prevent blue edges */
      background-color: transparent;
    }
    .user .avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Ensures the image covers the container without distortion */
      border-radius: 50%; /* Ensures the image is circular */
      display: block; /* Removes any default spacing below the image */
      border: 2px solid var(--background-secondary); /* Optional: Adds a subtle border */
    }
    .user .username {
      color: var(--text-highlight);
      font-weight: 500;
      font-size: 14px;
    }

    /************************************************************
      MEDIA QUERIES (RESPONSIVE)
    *************************************************************/
    @media (max-width: 1024px) {
      .channels-sidebar {
        flex: 0 0 220px;
      }
      .right-sidebar {
        flex: 0 0 220px;
      }
    }
    @media (max-width: 800px) {
      .channels-sidebar {
        flex: 0 0 200px;
      }
      .right-sidebar {
        display: none; /* Hide right sidebar on smaller screens */
      }
      .chat-input-wrapper {
        padding: 10px 12px;
      }
      .chat-send-btn,
      .chat-emoji-btn {
        width: 40px;
        height: 40px;
      }
    }

    /* Keyframes */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeOut {
      from { opacity: 1; transform: translateY(0); }
      to { opacity: 0; transform: translateY(-10px); }
    }
  </style>
</head>
<body>

  <!-- CUSTOM TITLE BAR -->
  <div class="title-bar">
    <div>PChat - Discord Refined</div>
    <div class="title-bar-buttons">
      <div class="button minimize" onclick="windowAction('minimize')" title="Minimize" aria-label="Minimize"></div>
      <div class="button maximize" onclick="windowAction('maximize')" title="Maximize" aria-label="Maximize"></div>
      <div class="button close" onclick="windowAction('close')" title="Close" aria-label="Close"></div>
    </div>
  </div>

  <!-- AUTH OVERLAY (LOGIN/REGISTER) -->
  <div class="auth-overlay" id="authOverlay">
    <div class="auth-container">
      <h1>Welcome to PChat</h1>
      <div class="auth-sections">
        <!-- LOGIN BOX -->
        <div class="auth-box">
          <h2>Log In</h2>
          <div class="input-group">
            <label for="login-username">Username</label>
            <input type="text" id="login-username" placeholder="Your username..." required>
          </div>
          <div class="input-group">
            <label for="login-password">Password</label>
            <input type="password" id="login-password" placeholder="Your password..." required>
          </div>
          <button class="btn" id="loginBtn">Log In</button>
        </div>

        <!-- REGISTER BOX -->
        <div class="auth-box">
          <h2>Register</h2>
          <div class="input-group">
            <label for="register-username">Username</label>
            <input type="text" id="register-username" placeholder="Choose a username..." required>
          </div>
          <div class="input-group">
            <label for="register-password">Password</label>
            <input type="password" id="register-password" placeholder="Choose a password..." required>
          </div>
          <button class="btn" id="registerBtn">Sign Up</button>
        </div>
      </div>
    </div>
  </div>

  <!-- DISCORD-LIKE LAYOUT (Hidden until auth) -->
  <div class="discord-layout hidden" id="discordLayout">
    <!-- LEFT SIDEBAR: Servers -->
    <div class="left-sidebar">
      <div class="server-icon" title="Home">H</div>
      <div class="server-icon" title="Room1">R1</div>
      <div class="server-icon" title="Room2">R2</div>
      <!-- Add more server icons as needed -->
    </div>

    <!-- CHANNELS SIDEBAR: with unified top background -->
    <div class="channels-sidebar">
      <!-- This top bar merges with the chat header for a continuous background -->
      <div class="channels-header">ROOMS</div>

      <div class="room-section">
        <div class="input-group">
          <label for="room-name">Room Name</label>
          <input type="text" id="room-name" placeholder="e.g. My Chat Room">
        </div>
        <div class="input-group">
          <label for="room-key">Room Key</label>
          <input type="text" id="room-key" placeholder="Unique key...">
        </div>
        <button class="btn room-btn" id="create-room-btn">Create Room</button>

        <div class="input-group" style="margin-top:16px;">
          <label for="join-room-key">Join with Key</label>
          <input type="text" id="join-room-key" placeholder="Enter room key...">
        </div>
        <button class="btn room-btn" id="join-room-btn">Join Room</button>
      </div>
    </div>

    <!-- MAIN CHAT AREA -->
    <div class="chat-area no-room" id="chatArea">
      <!-- No Room Selected Message -->
      <div class="no-room-message" id="noRoomMessage">
        <p>Please create or join a room to start chatting.</p>
      </div>

      <!-- Chat Header -->
      <div class="chat-header">
        <div style="display:flex; align-items:center;">
          <h2>Room: <span id="current-room-name"></span></h2>
          <!-- Voice Chat Controls appended here later -->
          <div class="voice-chat-controls">
            <button class="voice-btn mute-btn" id="muteBtn">
              <i class="fas fa-microphone-slash"></i> Mute
            </button>
            <button class="voice-btn leave-btn" id="leaveBtn">
              <i class="fas fa-phone-slash"></i> Leave
            </button>
          </div>
        </div>
        <!-- Close Room button on the far right -->
        <button class="close-room-btn" id="close-room-btn">Close Room</button>
      </div>

      <!-- Chat Messages -->
      <div class="chat-box" id="chatBox">
        <!-- Example Messages -->
        <div class="message">
          <div class="message-header">
            <span class="username">User1</span>
            <span class="timestamp">10:30 AM</span>
          </div>
          <div class="message-content">
            Hello everyone! Welcome to the room.
          </div>
        </div>
        <div class="message">
          <div class="message-header">
            <span class="username">User2</span>
            <span class="timestamp">10:31 AM</span>
          </div>
          <div class="message-content">
            Hi User1! Glad to be here.
          </div>
        </div>
        <!-- Add more messages dynamically -->
      </div>

      <!-- Bottom Chat Input -->
      <div class="chat-input-wrapper">
        <textarea id="messageInput" class="chat-input" placeholder="Type your message..."></textarea>
        <button class="chat-send-btn chat-btn" id="sendBtn"><i class="fas fa-paper-plane"></i></button>
        <button class="chat-emoji-btn chat-btn" id="emojiBtn">😀</button>
      </div>
      <!-- Emoji Picker (hidden by default) -->
      <div class="emoji-picker hidden" id="emojiPicker">
        <!-- Emojis will be dynamically populated here -->
      </div>
    </div>

    <!-- RIGHT SIDEBAR -->
    <div class="right-sidebar">
      <div class="placeholder">Members</div>
      <div class="placeholder"></div>
      <div class="user-list" id="userList">
       
      </div>
    </div>
  </div>

  <!-- Toast Notifications -->
  <div id="toast-container"></div>
  
  <!-- Existing JS and New Window Control Handling -->
  <script src="https://pchat.chat/libs/noctchanged.js"></script>
  <script>
      function windowAction(action) {
          window.api.windowAction(action);
      }
  </script>  
</body>
</html>
