var howto = new Ext.tree.TreePanel({
	id: 'howto'
	, title: '使い方'
});

var howtoTreeData = {
	text: '使い方トップ'
	, id: 'howtoRootNode'
	, children:[

	{text: '全般', id:'all', children:[	
		{text: 'しるしって何？', id:'whatIsShirushi', leaf:true}
		, {text: 'オンラインブックマークって？', id:'whatIsOnlineBookmark', leaf:true}
		, {text: 'しるしではできないこと', id:'cannotDoInShirushi', leaf:true}
		, {text: 'ユーザー登録', id:'userRegister', leaf:true}
		, {text: 'データの制限について', id:'dataRestrict', leaf:true}
	]}	
	, {text: 'ログイン', id:'login', children:[	
		{text: 'ログイン', id:'doLogin', leaf:true}
		, {text: '次回から自動ログイン', id:'autoLogin', leaf:true}
		, {text: 'ログアウト', id:'doLogout', leaf:true}
		, {text: 'パスワード変更', id:'changePassword', leaf:true}
		, {text: 'メールアドレス変更', id:'changeMail', leaf:true}
	]}	
	, {text: 'フォルダ', id:'folder', children:[	
		{text: 'ツリーを隠す', id:'hideTree', leaf:true}
		, {text: 'フォルダの追加', id:'addFolder', leaf:true}
		, {text: 'フォルダの削除', id:'deleteFolder', leaf:true}
		, {text: 'フォルダ名の変更', id:'changeFolderName', leaf:true}
		, {text: 'サイトの追加', id:'addSiteFromFolder', leaf:true}
		, {text: 'フォルダの選択', id:'selectFolder', leaf:true}
		, {text: 'フォルダの移動', id:'moveFolder', leaf:true}
		, {text: 'フォルダの展開', id:'expandFolder', leaf:true}
		, {text: 'フォルダの折りたたみ', id:'collapseFolder', leaf:true}
	]}	
	, {text: 'サイト', id:'site', children:[	
		{text: 'リンクを開く', id:'openLink', leaf:true}
		, {text: '新しいウィンドウで開く', id:'openLinkNewWindow', leaf:true}
		, {text: 'サイトの追加', id:'addSiteFromSite', leaf:true}
		, {text: 'サイトの削除', id:'deleteSite', leaf:true}
		, {text: 'サイト情報の変更', id:'changeSiteInfo', leaf:true}
		, {text: 'サイトの並び替え', id:'replaceSite', leaf:true}
		, {text: 'サイトの移動', id:'moveSite', leaf:true}
	]}	

]};

var howtoTree = new Ext.tree.TreePanel({
	id: 'treepanel'
	, title: '使い方'
	, autoScroll: true
	, animate: true
	, enableDD: false
	, border: false
	, containerScroll: true
	, rootVisible: false
	, loader: new Ext.tree.TreeLoader({
			preloadChildren: true
			, clearOnLoad: false
		})
});

var howtoRoot = new Ext.tree.AsyncTreeNode({
	children:[howtoTreeData]
});
howtoTree.setRootNode(howtoRoot);


howtoTree.on('click', function(node, e){
	var el = Ext.select('#' + node.id, true);
	var top = el.elements[0].dom.offsetTop;
	viewport.findById('portal').body.scrollTo('top', top, {duration:.75});
});