package ajax;

=pod

=head1 NAME

ajax.pm - ajax用モジュール群

=head1 概要



=cut

use CGI qw/:standard :xhtml/;
use myconstant;
my $cons = new myconstant;

sub new{
	my $class = shift;
	my $self = {};
	bless $self,$class;
	return $self;
}
sub css{
	my $s = shift;
	my $css = [{'src'=>$cons->{css}.'tree.css'},
		{'src'=>$cons->{css}.'screen.css'},
		];
	return $css;
}
sub js{
	my $s = shift;
	my $js = [{-language=>'JavaScript',-src=>"$cons->{js}yahoo.js"},
		{-language=>'JavaScript',-src=>"$cons->{js}dom.js"},
		{-language=>'JavaScript',-src=>"$cons->{js}event.js"},
		{-language=>'JavaScript',-src=>"$cons->{js}treeview.js"},
		];
	return $js;
}
sub tree{
	my $s = shift;
	my %x = (divid=>'treeDiv1',target=>'sample',@_);
	my $script = <<END;
<div id="treeDiv1"></div>

<script type="text/javascript">

var data=[ $x{data}
]

YAHOO.namespace('tato');//カスタマイズした関数など用に名前空間を用意しておきます
YAHOO.tato.tree = function(id) {

  this.tree = new YAHOO.widget.TreeView(id); //treeDiv1は表示するDIVのID名です
  
  //Tree描画  by Array
  this.mkTreeByArray = function (treeData,treeNode){
    if(!treeNode)treeNode = this.tree.getRoot(); 
    for(var i in treeData){
      if(!(treeData[i][0]=="_open"||treeData[i][0]=="_close")){
        var tmpNode = new YAHOO.widget.TextNode("" + treeData[i][0],treeNode, false);
        if(typeof treeData[i][1] == "string"){ tmpNode.href= treeData[i][1]; tmpNode.target= "$x{target}"; }
        if(typeof treeData[i][1] == "object"){
          if(treeData[i][1][0]=="_open")tmpNode.expand();
          this.mkTreeByArray(treeData[i][1],tmpNode); 
        }
      }
    }
    this.tree.draw();
  }
}

//初期化
YAHOO.tato.treeIni = function(){
  test1 = new YAHOO.tato.tree("$x{divid}");
  test1.mkTreeByArray(data);//ここでTreeデータを渡します
}

//ページ読み込み後にカスタマイズ関数YAHOO.tato.treeIni()を起動します
YAHOO.util.Event.addListener(window, "load", YAHOO.tato.treeIni);



</script>

<br><br>
		<a href="javascript:test1.tree.expandAll()">全部開く</a>
		<a href="javascript:test1.tree.collapseAll()">全部閉じる</a>

END
	return $script;
}
	
sub temp {
	$s = shift;
print header(-type=>"text/html; charset=euc-jp"),
	start_html(-title=>'tree',
		-style=>[{'src'=>$cons->{css}.'tree.css'},
			{'src'=>$cons->{css}.'screen.css'},
			],
		-script=>[
			{-language=>'JavaScript',-src=>"$cons->{js}yahoo.js"},
			{-language=>'JavaScript',-src=>"$cons->{js}dom.js"},
			{-language=>'JavaScript',-src=>"$cons->{js}event.js"},
			{-language=>'JavaScript',-src=>"$cons->{js}treeview.js"},
			]
		);
print <<END;
<div id="treeDiv1"></div>

<script type="text/javascript">

var data=[
  ["JavaScript" ,
    [
      ["_open"],
      ["Allabout[JavaScript]" ,  "http://allabout.co.jp/internet/javascript/"],
      ["JavaScript++かも日記" , "http://jsgt.org/mt/0 /"],
      ["Ajax" ,
        [
          ["入門 Ajax/サポート" , "http://jsgt.org/ajax/"],
          ["Ajax:勉強用サンプル&解説" , "http://www.openspc2.org/JavaScript/Ajax/index.html"]
        ]
      ],
      ["DHTML" ,
        [
          ["cross-browser/Examples" , "http://game.gr.jp/js/books/dhtml2/contents.htm"]
        ]
      ]
    ]
  ],
  ["Perl",]
]

YAHOO.namespace('tato');//カスタマイズした関数など用に名前空間を用意しておきます
YAHOO.tato.tree = function(id) {

  this.tree = new YAHOO.widget.TreeView(id); //treeDiv1は表示するDIVのID名です
  
  //Tree描画  by Array
  this.mkTreeByArray = function (treeData,treeNode){
    if(!treeNode)treeNode = this.tree.getRoot(); 
    for(var i in treeData){
      if(!(treeData[i][0]=="_open"||treeData[i][0]=="_close")){
        var tmpNode = new YAHOO.widget.TextNode("" + treeData[i][0],treeNode, false);
        if(typeof treeData[i][1] == "string"){ tmpNode.href= treeData[i][1]; tmpNode.target= "sample"; }
        if(typeof treeData[i][1] == "object"){
          if(treeData[i][1][0]=="_open")tmpNode.expand();
          this.mkTreeByArray(treeData[i][1],tmpNode); 
        }
      }
    }
    this.tree.draw();
  }
}

//初期化
YAHOO.tato.treeIni = function(){
  test1 = new YAHOO.tato.tree("treeDiv1");
  test1.mkTreeByArray(data);//ここでTreeデータを渡します
}

//ページ読み込み後にカスタマイズ関数YAHOO.tato.treeIni()を起動します
YAHOO.util.Event.addListener(window, "load", YAHOO.tato.treeIni);



</script>

<br><br>
		<a href="javascript:test1.tree.expandAll()">全部開く</a>
		<a href="javascript:test1.tree.collapseAll()">全部閉じる</a>

END


print end_html;
}


=head1 AUTHOR INFOMATION

 ######################################################################
 #
 # ajax.pm: tree表示
 #
 # Copyright (c) 2006 john smith <john.smith.7701@gmail.com>
 # All Rights Reserved.
 #
 #
 # http://allabout.co.jp/internet/javascript/closeup/CU20060515A/index.htm
 # より
 ######################################################################

=cut

