半透過ウィンドウの生成

DOM(Document Object Model)とは，JavaScriptからHTMLの要素を操作できるよう，W3Cにより規定されている概念です（参考：DOMとは何か）．
HTMLタグを階層構造の形で管理しています．
DOMにより，JavaScriptを用いて動的にWebページの構成を変更することができます．

<script type="text/javascript">
// ↓これで，id属性値が'hoge'のdivセクションが取得できる
var hoge_elem = document.getElementById('hoge');
...いろんな処理...
</script>
<body>
  <div id="hoge">
    ほげほげ
  </div>
</body>

これらにスタイルシートを組み合わせることで，擬似ポップアップウィンドウを作成することができます．
ここで，擬似的である理由は，

<html>
  <head>
  <title>テスト</title>
  <script type="text/javascript">
    // サブウィンドウを開く処理
    function openWindow(url)
    {
      window.open(url, "window_name", "width=250,height=250,scrollbars=yes,resizable=yes,status=yes");
    }
  </script>
  
  </head>
  <body>
    <input type="button" value="開く" onclick="javascript:openWindow('http://www.google.co.jp')"/>
  </body>
</html>

という方法とは異なり，HTMLとCSSを組合せてウィンドウのように見せかけるからです．
今回はさらに，半透過性（translucency）も持たせています．

基本的な処理手順は，

バー，ボタン，クライアント領域（←のつもり，コンテンツ領域の方が良い？）をHTML要素としてCreateし，スタイルを設定する
各Eventをaddする
ウィンドウをHTML要素としてCreateし，スタイルを設定する
バー，ボタン，コンテンツをウィンドウへappendChildする
ウィンドウを'body'へappendChildする

（ボタン以外は，全て'div'をCreateします）

バーに対して，'mousedown'，'mousemove'，'mouseup'，'mouseout'イベントのリスナを追加
ボタンに対して，'click'イベントのリスナを追加
コンテンツに対して，'mousedown'イベントのリスナを追加

（各リスナのfunctionは，コードを参照）

また，ポップアップウィンドウがクリックされたとき，そのウィンドウが最前列へ表示されるようにする必要があります．
この処理には，wnd_obj.style.zIndexを使用します．

ポップアップウィンドウ生成時には，zIndex=='0'となっています．
そこで，クリックされたウィンドウはzIndex=='1'，それ以外のウィンドウはzIndex=='0'となるように，処理を追加します．

~~結果，このようになります→~~
今回のウィンドウを作成した理由は，「実用性を狙う」というよりも「遊び心」です．
（正しく動作するものは，研究室に行ってからUPすることにしよう．．．）