Ext.onReady(function(){
	
	var catalog = [{
        title: '組み合わせ',
		iconCls:'icon-apps',
		cls:'active',
        samples: [{
            text: 'Feed Viewer 2.0',
            url: 'feed-viewer/view.html',
            icon: 'feeds.gif',
            desc: 'RSS 2.0リーダーアプリケーション。リーダーパネルのレイアウトを変更可能です。'
        },{
            text: 'Simple Tasks 2.0',
            url: 'http://extjs.com/blog/2008/02/24/tasks2/',
            icon: 'air.gif',
            desc: 'タスク管理アプリケーション（<a href="http://labs.adobe.com/technologies/air/" target="_blank">Adobe AIR</a>ベース）'
        },{
            text: 'Simple Tasks',
            url: 'tasks/tasks.html',
            icon: 'tasks.gif',
            desc: 'タスク管理アプリケーション例（<a href="http://gears.google.com" target="_blank">Google Gears</a>のストレージを利用）'
        },{
            text: 'Image Viewer',
            url: 'organizer/organizer.html',
            icon: 'organizer.gif',
            desc: 'DataViewからTreePanelへデータをドラッグするデモ'
        },{
            text: 'Ext JS API Documentation',
            url:  'http://extjs.com/deploy/dev/docs/',
            icon: 'docs.gif',
            desc: 'APIドキュメントビューワー',
            status: 'modified'
        },{
            text: 'Ext JS Forum Browser',
            url:  'forum/forum.html',
            icon: 'forum.gif',
            desc: 'Ext JS フォーラムブラウザ',
            status: 'modified'
        },{
            text: 'Web Desktop',
            url: 'desktop/desktop.html',
            icon: 'desktop.gif',
            desc: 'Extコンポーネントとプラグインシステムを使ってブラウザ上にデスクトップ環境を構築するデモ'
        }]
    },{
        title: 'アクセシビリティ',
        samples: [{
            text: 'Key Feed Viewer',
            url:  'key-feed-viewer/view.html',
            icon: 'keyboard.gif',
            desc: '<i>Experimental</i> 複雑なレイアウトをキーボードを使って移動',
            status: 'experimental'
        },{
            text: 'ARIA Tree',
            url:  'tree/aria-tree.html',
            icon: 'acc-tree.gif',
            desc: '<i>Experimental</i> ツリーパネルでのアクセシビリティデモ',
            status: 'experimental'
        }]
    },{
        title: 'グリッド',
        iconCls:'icon-grid',
        samples: [{
            text: '配列グリッド',
            url: 'grid/array-grid.html',
            icon: 'grid-array.gif',
            desc: 'ローカルデータからデータを読み込む最もベーシックなグリッド。カスタムレンダラーを利用'
        },{
            text: 'プロパティグリッド',
            url:  'grid/property-grid.html',
            icon: 'grid-property.gif',
            desc: 'IDE等でよく見かけるプロパティグリッドのサンプル'
        },{
            text: 'エディタグリッド',
            url: 'grid/edit-grid.html',
            icon: 'grid-edit.gif',
            desc: 'XMLデータを読み込む編集可能なグリッド。データタイプに応じたグリッドエディタを表示'
        },{
            text: '行編集グリッド',
            url:  'grid/row-editor.html',
            icon: 'grid-row-editor.gif',
            desc: '<i>New</i> 1レコード（1行）をまとめて編集可能とするグリッド。Ext.chartのデモも含む。',
            status: 'new'
        },{
            text: 'XMLグリッド',
            url: 'grid/xml-grid.html',
            icon: 'grid-xml.gif',
            desc: 'XMLデータを読み込むグリッドサンプル'
        },{
            text: 'ページング',
            url: 'grid/paging.html',
            icon: 'grid-paging.gif',
            desc: 'ページング機能付きグリッド、クロスドメインでのデータ読み込み、カスタムレンダラーによる開閉可能な行'
        },{
            text: 'プログレスバーとページャー',
            url:  'grid/progress-bar-pager.html',
            icon: 'progress-bar-pager.gif',
            desc: '<i>New</i> Progress BarとPagintg Toolbarの組み合わせ例。カスタムプラグインを利用',
            status: 'new'
        },{
            text: 'スライダーとページャー',
            url: 'grid/sliding-pager.html',
            icon: 'slider-pager.gif',
            desc: '<i>New</i> Slider とPagintg Toolbarの組み合わせ例。カスタムプラグインを利用',
            status: 'new'
        },{
            text: 'グルーピング',
            url: 'grid/grouping.html',
            icon: 'grid-grouping.gif',
            desc: 'グルーピンググリッドのサンプル。ヘッダーメニューのオプションで開閉可能なグループを指定。'
        },{
            text: 'グループサマリー',
            url: 'grid/totals.html',
            icon: 'grid-summary.gif',
            desc: 'グルーピンググリッドの応用。編集可能なセルとその結果を元にサマリーを即時に再計算'
        },{
            text: 'グループサマリー（リモート）',
            url: 'grid/totals-hybrid.html',
            icon: 'grid-summary.gif',
            desc: '<i>New</i>グルーピンググリッドの応用。編集可能なセルとその結果を元にサマリーをサーバー側で再計算し結果を表示'
        },{
            text: 'グリッドプラグイン',
            url: 'grid/grid-plugins.html',
            icon: 'grid-plugins.gif',
            desc: 'プラグインを利用してカスタマイズしたグリッド：開閉可能な行、チェックボックス、行番号等'
        }/*,{
            text: 'Grid Filtering',
            url: 'grid-filtering/grid-filter.html',
            icon: 'grid-filter.gif',
            desc: '<i>New!</i> Grid plugins providing custom data filtering menus that support various data types.'
        }*/,{
            text: 'HTMLからグリッド生成',
            url: 'grid/from-markup.html',
            icon: 'grid-from-markup.gif',
            desc: 'HTMLテーブルをExtのグリッドに変換可能なカスタムグリッド'
        },{
            text: 'グリッドデータバインディング',
            url: 'grid/binding.html',
            icon: 'grid-data-binding.gif',
            desc: '<i>New!</i> グリッドと詳細表示パネルをRowSelectionModelを介してバインド'
        },{
            text: 'グリッドデータバインディング（応用）',
            url: 'grid/binding-with-classes.html',
            icon: 'grid-data-binding.gif',
            desc: '<i>New!</i> データバインディングの例をクラスベースの設計に基づきリファクタリング' 
        },{
            text: 'Buffered GridView',
            url: 'grid/buffer.html',
            icon: 'grid-buffer.gif',
            desc: '<i>New</i> 可視部分の行のみを描画することによりGridViewの速度をチューニング', 
            status: 'new'
        }, {
            text: '編集可能なグリッドと書込可能なストア',
            url: 'writer/writer.html',
            icon: 'writer-thumb.gif',
            desc: '<i>New</i> ストアはJsonWriterとHttpProxyを利用して自動的にCRUDリクエストをサーバーに発行',
            status: 'new'
        }, {
            text: 'RESTfulなストアとグリッド',
            url: 'restful/restful.html',
            icon: 'restful-thumb.gif',
            desc: '<i>New</i> RestfulなStoreはJsonWriterとHttpProxyを利用して自動的にCRUDリクエストをサーバーに発行',
            status: 'new'
        }]
    },{
        title: 'タブパネル',
        iconCls:'icon-tabs',
        samples: [{
            text: 'タブ（基本）',
            url: 'tabs/tabs.html',
            icon: 'tabs.gif',
            desc: '基本的なタブ機能：autoHeight、HTMLからのタブ生成、コンテンツの非同期読込、タブイベント'
        },{
            text: 'TabPanelスクローラーメニュー',
            url: 'tabs/tab-scroller-menu.html',
            icon: 'tab-panel-scroller-menu.gif',
            desc: '<i>New</i> タブの数が多い場合に右側に表示されるオーバーフローメニューの例',
            status: 'new'
        },{
            text: 'タブ（応用）',
            url: 'tabs/tabs-adv.html',
            icon: 'tabs-adv.gif',
            desc: 'タブ機能の応用：タブスクロール、タブを動的に追加、右クリックメニュー用プラグイン'
        },{
            text: 'グループタブ',
            url: 'grouptabs/grouptabs.html',
            icon: 'group-tabs.gif',
            desc: '<i>New</i>縦方向のタブとタブのグループ化の例',
            status: 'new'
        }]
    },{
    title: 'チャート',
    samples: [{
        text: 'チャート',
        url: 'chart/charts.html',
        icon: 'charts.gif',
        desc: '<i>New</i> 各種チャートのサンプル',
        status: 'new'
    },{
        text: '円グラフ',
        url: 'chart/pie-chart.html',
        icon: 'chart-pie.gif',
        desc: '<i>New</i> 円グラフの例',
        status: 'new'
    },{
        text: '積み上げ横棒グラフ',
        url: 'chart/stacked-bar-chart.html',
        icon: 'chart-stacked.gif',
        desc: '<i>New</i> 積み上げ横棒グラフの例',
        status: 'new'
    },{
        text: 'データの再読込',
        url: 'chart/reload-chart.html',
        icon: 'chart-reload.gif',
        desc: '<i>New</i> グラフデータの再読込の例',
        status: 'new'
    }]
},{
        title: 'ウィンドウ',
        iconCls:'icon-win',
        samples: [{
            text: 'Hello World',
            url: 'window/hello.html',
            icon: 'window.gif',
            desc: 'タブパネルを含むシンプルな"Hello World"ウィンドウ'
        },{
            text: 'MessageBox',
            url: 'message-box/msg-box.html',
            icon: 'msg-box.gif',
            desc: '各種メッセージウィンドウ：confirm、alert、prompt、progress、wait'
        },{
            text: 'レイアウト',
            url: 'window/layout.html',
            icon: 'window-layout.gif',
            desc: 'BorderLayoutと内部にタブパネルを含むウィンドウ'
        }]
    },{
        title: 'ツリー',
        iconCls:'icon-tree',
        samples: [{
            text: 'ドラッグ・ドロップによる並べ替え',
            url: 'tree/reorder.html',
            icon: 'tree-reorder.gif',
            desc: 'JSON TreeLoaderにより非同期的にデータを取得するツリーパネル。ドラッグ・ドロップで並べ替えが可能'
        },{
            text: '複数のツリー',
            url: 'tree/two-trees.html',
            icon: 'tree-two.gif',
            desc: '2つのツリーパネル間をドラッグ・ドロップで移動'
        },{
            text: 'カラムツリー',
            url: 'tree/column-tree.html',
            icon: 'tree-columns.gif',
            desc: '既存のツリーパネルを拡張したデモ'
        },{
            text: 'チェックツリー',
            url: 'tree/check-tree.html',
            icon: 'tree-check.gif',
            desc: '<i>New</i> ツリーパネル内にチェックボックスを表示するデモ',
            status: 'new'
        },{
            text: 'XML Tree Loader',
            url: 'tree/xml-tree-loader.html',
            icon: 'tree-xml-loader.gif',
            desc: 'XMLファイルからツリーデータを取得するカスタムTreeLoaderのデモ'
        }]
    },{
        title: 'レイアウトマネージャ',
        iconCls:'icon-layout',
        samples: [{
            text: 'レイアウトブラウザ',
            url: 'layout-browser/layout-browser.html',
            icon: 'layout-browser.gif',
            desc: '標準で用意されている全てのレイアウトおよびカスタムレイアウト、レイアウトの組み合わせ例'
        },{
            text: 'Accordion Layout',
            url:  'layout/accordion.html',
            icon: 'layout-accordion.gif',
            desc: 'BorderLayoutの中にAccordionLayout'
        },{
            text: 'Absolute Layout (フォーム)',
            url:  'form/absform.html',
            icon: 'layout-absolute.gif',
            desc: 'ウィンドウのサイズ変更に追随するフォーム部品をAbsoluteLayoutで実現'
        },{
            text: 'Border Layout',
            url: 'layout/complex.html',
            icon: 'border-layout.gif',
            desc: '複雑なボーダーレイアウトの例。それぞれ独自のレイアウトを持つコンポーネントを複数内包'
        },{
            text: 'Anchor Layout',
            url: 'form/anchoring.html',
            icon: 'anchor.gif',
            desc: 'ウィンドウのサイズ変更に追随するフォーム部品をAnchorLayoutで実現'
        },{
            text: 'Anchor Layout (フォーム)',
            url:  'form/anchoring.html',
            icon: 'layout-form.gif',
            desc: 'ウィンドウのサイズ変更に追随するフォーム部品をAnchorLayoutで実現'
        },{
            text: 'Anchor Layout (パネル)',
            url:  'layout/anchor.html',
            icon: 'layout-anchor.gif',
            desc: 'ブラウザのサイズ変更に追随するパネル'
        },{
            text: 'Column Layout',
            url:  'layout/column.html',
            icon: 'layout-column.gif',
            desc: 'ColumnLayoutによる配置されたパネル群'
        },{
            text: 'Table Layout',
            url:  'layout/table.html',
            icon: 'layout-table.gif',
            desc: 'TableLayoutによる配置されたパネル群'
        },{
            text: 'HBox Layout',
            url:  'layout/hbox.html',
            icon: 'layout-column.gif',
            desc: '<i>New</i> HBoxLayoutの多様な機能を紹介',
            status: 'new'
        },{
            text: 'VBox Layout',
            url:  'layout/vbox.html',
            icon: 'blank.gif',
            desc: '<i>New</i> VBoxLayoutの多様な機能を紹介',
            status: 'new'
        },{
            text: 'ポータルデモ',
            url: 'portal/portal.html',
            icon: 'portal.gif',
            desc: 'Webポータル的なインターフェースを複数のカスタムクラスを利用して実現'
        }]
    },{
        title: 'コンボボックス',
        iconCls:'icon-combo',
        samples: [{
            text: 'ComboBox（基本）',
            url: 'form/combos.html',
            icon: 'combo.gif',
            desc: '基本的なコンボボックス、HTMLからの自動生成、ツールチップ付きのカスタムリスト'
        },{
            text: 'ComboBox テンプレート',
            url: 'form/forum-search.html',
            icon: 'combo-custom.gif',
            desc: 'テンプレートを使ったリストの描画、リモートローディング、ページング'
        }]
    },{
        title: 'フォーム',
        iconCls:'icon-form',
        samples: [{
            text: 'ダイナミックフォーム',
            url: 'form/dynamic.html',
            icon: 'form-dynamic.gif',
            desc: 'フォームの各種例：開閉可能なフィールドセット、カラムレイアウト、入れ子になったタブパネル等'
        },{
            text: 'Ajax・XMLデータとフォーム',
            url: 'form/xml-form.html',
            icon: 'form-xml.gif',
            desc: 'フォーム用データをAjax/XML形式で取得。送信→サーバー側でバリデーション→エラーもXMLデータで取得'
        },{
            text: 'カスタム検索フィールド',
            url: 'form/custom.html',
            icon: 'form-custom.gif',
            desc: 'TriggerFieldを拡張した検索フィールド。XTemplateを利用して検索結果を描画'
        },{
            text: 'グリッドとフォームのバインディング',
            url: 'form/form-grid.html',
            icon: 'form-grid-binding.gif',
            desc: '<i>New!</i> フォームパネル内に配置されているグリッドの行が選択されると自動的にフォームにデータを表示'
        },{
            text: 'バリデーション（応用）',
            url: 'form/adv-vtypes.html',
            icon: 'form-adv-vtypes.gif',
            desc: '<i>New!</i> カスタマイズしたvtypesを利用したフォームのバリデーション'
        },{
            text: 'チェックボックス・ラジオグループ',
            url:  'form/check-radio.html',
            icon: 'form-check-radio.gif',
            desc: 'チェックボックスとラジオグループの各種設定のサンプル群'
        },{
            text: 'ファイルアップロード用フィールド',
            url:  'form/file-upload.html',
            icon: 'form-file-upload.gif',
            desc: '標準的なアップロードフィールドをExt的な外観にする方法'
        },{
            text: 'Spinner Field',
            url:  'spinner/spinner.html',
            icon: 'form-spinner.gif',
            desc: '<i>New</i> Spinnerのサンプル',
            status: 'new'
        },{
            text: 'MultiSelectとItemSelector',
            url:  'multiselect/multiselect-demo.html',
            icon: 'form-multiselect.gif',
            desc: 'フォーム内でリストの中から複数のアイテムを選択するためのウィジェット例'
        }]
    },{
        title: 'ツールバー・メニュー',
        iconCls:'icon-menu',
        samples: [{
            text: 'ツールバー（基本）',
            url: 'menu/menus.html',
            icon: 'toolbar.gif',
            desc: 'ツールバーとメニューの例：DatePicker、ColorPicker、サブメニュー等を内包'
        },{
        text: 'ツールバーでのオーバーフロー',
        url:  'toolbar/overflow.html',
        icon: 'toolbar-overflow.gif',
        desc: '<i>New</i> オーバーフローしたツールバーボタンを動的にExt.menu内に移動',
        status: 'new'
    },{
        text: 'ツールバーボタングループ',
        url:  'toolbar/toolbars.html',
        icon: 'toolbar-button-groups.gif',
        desc: '<i>New</i> ツールバー内のボタンをグループ化',
        status: 'new'
    },{
            text: 'Ext Actions',
            url: 'menu/actions.html',
            icon: 'toolbar-actions.gif',
            desc: 'Ext.Actionクラスを利用して同じ動作を複数のボタンおよびメニューにバインド'
        },{
        text: 'ステータスバー',
        url:  'statusbar/statusbar-demo.html',
        icon: 'statusbar-demo.gif',
        desc: 'ステータス（文字、アイコン等）を表示するための簡単なステータスバー例',
        status: 'modified'
    },{
        text: 'ステータスバー（応用）',
        url:  'statusbar/statusbar-advanced.html',
        icon: 'statusbar-adv.gif',
        desc: 'ステータスバーをプラグインでカスタマイズ。バリデーションステータスとエラー表示リンクを表示',
        desc: 'Customizing the StatusBar via a plugin to provide automatic form validation monitoring and error linking.',
        status: 'modified'
    }]
    },{
        title: 'テンプレート・データビュー',
        samples: [{
            text: 'テンプレート',
            url: 'core/templates.html',
            icon: 'templates.gif',
            desc: 'データオブジェクトにバインドされたテンプレートを使った描画例'
        },{
            text: 'DataView',
            url: 'view/data-view.html',
            icon: 'data-view.gif',
            desc: 'DataViewとカスタムプラグイン例。編集可能なラベルとマウスのドラッグによるアイテム選択'
        },{
            text: 'DataView (応用)',
            url: 'view/chooser.html',
            icon: 'chooser.gif',
            desc: '<i>New!</i> よりカスタマイズされたDataViewの例。アイテムのソートとフィルター、複数のテンプレート利用',
            status: 'new'
        },{
            text: 'ListView',
            url: 'view/list-view.html',
            icon: 'list-view.gif',
            desc: '<i>New</i> 軽量版グリッドとして利用可能なテーブル形式のDataView',
            status: 'new'
        }]
    },{
    title: 'Ext.Direct',
    samples: [{
        text: 'Direct',
        url:  'direct/direct.php',
        icon: 'direct.gif',
        desc: '<i>New</i> サーバーへのRemotingとPollingのデモ',
        status: 'new'
    },{
        text: 'Directフォーム',
        url:  'direct/direct-form.php',
        icon: 'direct.gif',
        desc: '<i>New</i> Ext.Direct Remoting（フォーム）',
        status: 'new'
    },{
        text: 'Direct TreeLoader',
        url:  'direct/direct-tree.php',
        icon: 'direct.gif',
        desc: '<i>New</i> Ext.Direct Remoting （ツリー）',
        status: 'new'
    }]
},{
        title: 'その他',
        iconCls:'icon-misc',
        samples: [{
        text: 'History',
        url: 'history/history.html',
        icon: 'history.gif',
        desc: 'ブラウザの進む・戻るボタンを利用可能にするためのHistory管理機能'
    },{
        text: 'Google Maps',
        url: 'window/gmap.html',
        icon: 'gmap-panel.gif',
        desc: 'パネルやウィンドウ内にGoogle Mapsを簡単に表示するためのラッパークラス'
    },{
            text: 'スライダー',
            url: 'slider/slider.html',
            icon: 'slider.gif',
            desc: '<i>New!</i> 様々なにカスタマイズ可能なスライダー：縦方向、スナップモード、ツールチップ、カスタムスタイル等'
        },{
            text: 'QuickTips',
            url: 'simple-widgets/qtips.html',
            icon: 'qtips.gif',
            desc: '<i>Updated</i> Ajaxによるローディングやマウス追随機能などを含む各種ツールチップのサンプル'
        },{
            text: 'プログレスバー',
            url: 'simple-widgets/progress-bar.html',
            icon: 'progress.gif',
            desc: 'プログレスバーの各種サンプル'
        },{
            text: 'パネル',
            url: 'panel/panels.html',
            icon: 'panel.gif',
            desc: '<i>Updated</i> 開閉可能なパネルのサンプル'
        },{
        text: 'バブルパネル',
        url: 'panel/bubble-panel.html',
        icon: 'panel-bubble.gif',
        desc: '<i>New</i> 標準パネルのカスタマイズ例',
        status: 'new'
    },{
            text: 'Resizable',
            url: 'resizable/basic.html',
            icon: 'resizable.gif',
            desc: '要素をリサイズ可能にするための各種サンプル'
        },{
            text: 'スポットライト',
            url: 'core/spotlight.html',
            icon: 'spotlight.gif',
            desc: '特定の要素を視覚的に目立たせるためにページの他の部分にマスクをかけるためのユーティリティ'
        },{
        text: 'ボタン',
        url: 'button/buttons.html',
        icon: 'buttons.gif',
        desc: '<i>New</i> 任意のコンテナにフィットさせたり、レイアウトが可能なボタン',
        status: 'new'
    },{
        text: 'デバッグコンソール',
        url: 'debug/debug-console.html',
        icon: 'debug-console.gif',
        desc: '<i>New</i> Extアプリケーションのデバッグを支援',
        status: 'new'
    },{
            text: '多言語化 (静的)',
            url: 'locale/dutch-form.html',
            icon: 'locale-dutch.gif',
            desc: 'ロケールファイルを読み込むことによる多言語化のデモ'
        },{
            text: '多言語化 (動的)',
            url: 'locale/multi-lang.html',
            icon: 'locale-switch.gif',
            desc: 'ロケールリストから言語を選択することによりコンポーネントのロケールを変更'
        },{
        text : 'グリッド間でのドラッグ・ドロップ',
        url  : 'dd/dnd_grid_to_grid.html',
        icon : 'dd-gridtogrid.gif',
        desc : 'グリッド間でのシンプルなドラッグ・ドロップ例'
    },{
        text : 'グリッドからフォームパネルにドラッグ・ドロップ',
        url  : 'dd/dnd_grid_to_formpanel.html',
        icon : 'dd-gridtoformpanel.gif',
        desc : 'グリッドからフォームへのドラッグ・ドロップ'
    },{
        text : 'フィールドからグリッドへのドラッグ・ドロップ',
        url  : 'dd/field-to-grid-dd.html',
        icon : 'dd-fieldtogrid.gif',
        desc : '<i>New</i> フォームフィールドからデータをドラッグしてグリッド上にドロップ',
        status: 'new'
    },{
        text : 'カスタムドラッグ・ドロップ',
        url  : 'dd/dragdropzones.html',
        icon : 'dd-zones.gif',
        desc : 'DatViewとグリッドにDragZoneとDropZoneを継承したクラスを設定してデータのドラッグ・ドロップを実現'
    }]
    }];

    for(var i = 0, c; c = catalog[i]; i++){
        c.id = 'sample-' + i;
    }

	var menu = Ext.get('sample-menu-inner'), 
		ct = Ext.get('sample-box-inner');
	
	var tpl = new Ext.XTemplate(
        '<div id="sample-ct">',
            '<tpl for=".">',
            '<div><a name="{id}" id="{id}"></a><h2><div unselectable="on">{title}</div></h2>',
            '<dl>',
                '<tpl for="samples">',
                    '<dd ext:url="{url}"><img title="{text}" src="http://extjs.com/deploy/dev/examples/shared/screens/{icon}"/>',
                        '<div><h4>{text}</h4><p>{desc}</p></div>',
                    '</dd>',
                '</tpl>',
            '<div style="clear:left"></div></dl></div>',
            '</tpl>',
        '</div>'
    );

	tpl.overwrite(ct, catalog);
	
	
	var tpl2 = new Ext.XTemplate(
        '<tpl for="."><a href="#{id}" hidefocus="on" class="{cls}" id="a4{id}"><img src="http://extjs.com/s.gif" class="{iconCls}">{title}</a></tpl>'
    );
    tpl2.overwrite(menu, catalog);
	
	
	function calcScrollPosition(){
		var found = false, last;
		ct.select('a[name]', true).each(function(el){
			last = el;
			if(el.getOffsetsTo(ct)[1] > -5){
				activate(el.id)
				found = true;
				return false;
			}
		});
		if(!found){
			activate(last.id);
		}
	}
	
	var bound;
	function bindScroll(){
		ct.on('scroll', calcScrollPosition, ct, {buffer:250});
		bound = true;
	}
	function unbindScroll(){
		ct.un('scroll', calcScrollPosition, ct);
		bound = false;
	}
	function activate(id){
		Ext.get('a4' + id).radioClass('active');
	}
	
	ct.on('mouseover', function(e, t){
        if(t = e.getTarget('dd')){
            Ext.fly(t).addClass('over');
        }
    });
    ct.on('mouseout', function(e, t){
        if((t = e.getTarget('dd')) && !e.within(t, true)){
            Ext.fly(t).removeClass('over');
        }
    });
	ct.on('click', function(e, t){
        if((t = e.getTarget('dd', 5)) && !e.getTarget('a', 3)){
            var url = Ext.fly(t).getAttributeNS('ext', 'url');
			if(url){
				window.open(url.indexOf('http') === 0 ? url : ('http://extjs.com/deploy/dev/examples/' + url));
			}
        }else if(t = e.getTarget('h2', 3, true)){
			t.up('div').toggleClass('collapsed');
		}		
    });
    
	menu.on('click', function(e, t){
		e.stopEvent();
		if((t = e.getTarget('a', 2)) && bound){
			var id = t.href.split('#')[1];
			var top = Ext.getDom(id).offsetTop;
			Ext.get(t).radioClass('active');
			unbindScroll();
			ct.scrollTo('top', top, {callback:bindScroll});
		}
	});
	
	Ext.get('samples-cb').on('click', function(e){
		var img = e.getTarget('img', 2);
		if(img){
			Ext.getDom('samples').className = img.className;
			calcScrollPosition.defer(10);
		}
	});
	
	bindScroll();
});