function showsubmenu(id)
{
var menuobjedt=document.getElementById(id);
if (menuobjedt)
{
 if (menuobjedt.style.display=="none") 
  {menuobjedt.style.display="";
}
 else
  {menuobjedt.style.display="none"; 
   }
}
}

var d=new Array();//统计数据数组
var d_ip_max=0;//最大IP数
var d_pv_max=0;//最大PV数
var d_ip_all=0;//IP总数
var d_pv_all=0;//PV总数
var title_all="";//统计图标题
var title_ip="";//IP数据标题
var title_pv="";//PV数据标题
var b_w=0;//柱状图柱宽
var b_s_w=0;//柱状图间隔
var b_id_s='';//柱状图间隔
var base_x;//起始坐标X(用于画折线图)
var base_y;//起始坐标Y(用于画折线图)
function init_data(v)//初始化数据
{
	d=new Array();
	d_ip_max=0;
	d_pv_max=0;
	d_ip_all=0;
	d_pv_all=0;
	var di=v.split(";");
	var di0,di1,di2;
	d[0]=di[0].split(",");
	title_all=d[0][0];
	title_ip=d[0][1];
	title_pv=d[0][2];
	b_w=Math.floor(d[0][3]);
	b_s_w=Math.floor(d[0][4]);
	b_id_s=d[0][5];
	for(var i=1;i<di.length;i++)
	{
		d[i]=di[i].split(",");
		di0=Math.floor(d[i][0]);
		di1=Math.floor(d[i][1]);
		di2=Math.floor(d[i][2]);
		d_ip_all+=di1;	
		d_pv_all+=di2;	
		d_ip_max=d_ip_max>di1?d_ip_max:di1;	
		d_pv_max=d_pv_max>di2?d_pv_max:di2;	
	}
}
function draw_bar(sa)//画柱状图
{
	var sa_div=document.getElementsByName("sa")[sa];
	var v=sa_div.data;
	init_data(v);
	var b_d1="";
	var b_d2="";
	var title="";
	var b='<div align="center">'+title_all+' (柱状图) <a href="javascript:draw_line('+sa+')">->切换到折线图</a></div><table border="0" cellpadding="0" cellspacing="0" align="center" class=picbackground><tr ><td valign="top" rowspan="2" class=pictdbackground><p align="right" style="line-height: 12px; margin-right: 2">';
	for(var i=1;i<d.length;i++)
	{	
		var b_id = "";
		var b_id_2 = "";
		title=''+title_pv+':'+d[i][2]+' '+Math.floor(d[i][2]/d_pv_all*1000)/10+'%\n'+title_ip+':'+d[i][1]+' '+Math.floor(d[i][1]/d_ip_all*1000)/10+'%';		
		b_id = Math.floor(Math.random()*2105.3)+i;
		b_id_2 = Math.floor(Math.random()*4015.4)+i;
		b_d1+='<td align="center" valign="bottom" width="'+(b_w+b_s_w)+'"  title="'+title+'" ><div  style="width:'+b_w+';border:#999999 1px solid;height:'+d[i][2]/d_pv_max*100+'"><div style="width:'+b_w+';border-top:#333333 1px solid;height:'+((d[i][2]-d[i][1])/d_pv_max)*100+'"></div></div></td>';
		b_d2+='<td width='+(b_w+b_s_w)+' title="'+title+'" id="x_'+sa+'_'+i+'"><u>'+d[i][0]+'</u></td>';
	}
	var d_per=d_pv_max%4==0?d_pv_max/4:(d_pv_max/4);
	for(var i=4;i>0;i--) b+=Math.floor(d_per*i)+'<br><br>';
	b+='0</p></td>';
	b+='<td width="10" valign="top" class=pictdbackground><img src="templates/phpstat/imagefiles/tu_back_left.gif" width="10" ></td>';
	b+=b_d1;
	b+='<td width="10" valign="top" class=pictdbackground><img src="templates/phpstat/imagefiles/tu_back_right.gif" width="10"></td></tr><tr height="20" align="center" style="letter-spacing:-2;font-family:Arial;font-size:12px"><td></td>';
	b+=b_d2;
	b+='<td></td></tr></table><div align="center"><span class="gra2" style="height:10px;width:'+b_w+';border:#000000 1px solid;"></span>&nbsp;'+title_ip+' '+d_ip_all+'&nbsp;&nbsp;<span class="gra" style="height:10;width:'+b_w+';border:#000000 1px solid;"></span>&nbsp;'+title_pv+' '+d_pv_all+'</div>';
	sa_div.innerHTML=b;
}

function draw_bar_single(sa)//画单一柱状图
{
	var sa_div=document.getElementsByName("sa")[sa];
	var v=sa_div.data;
	init_data(v);
	var b_d1="";
	var b_d2="";
	var title="";
	var b='<div align="center">'+title_all+' (柱状图) <a href="javascript:draw_line_single('+sa+')">->切换到折线图</a></div><table border="0" cellpadding="0" cellspacing="0" align="center"><tr ><td valign="top" rowspan="2"><p align="right" style="line-height: 12px; margin-right: 2">';
	for(var i=1;i<d.length;i++)
	{	
		var b_id = "";
		//var b_id_2 = "";
		title=''+title_ip+':'+d[i][1]+' '+Math.floor(d[i][1]/d_ip_all*1000)/10+'%';		
		b_id = Math.floor(Math.random()*2105.3)+i;
		//b_id_2 = Math.floor(Math.random()*4015.4)+i;
		b_d1+='<td align="center" valign="bottom" width="'+(b_w+b_s_w)+'"  class=picbackground title="'+title+'" ><div class="gra2" style="width:'+b_w+';border:0px;height:'+((d[i][1])/d_ip_max)*100+'" onMouseOver="showsubmenu('+b_id+')" onMouseOut="showsubmenu('+b_id+')"><span class="pillar-text2"   id='+b_id+' style="DISPLAY: none;">'+d[i][1]+'</span></div></td>';
		b_d2+='<td width='+(b_w+b_s_w)+' title="'+title+'" id="x_'+sa+'_'+i+'"><u>'+d[i][0]+'</u></td>';
	}
	var d_per=d_ip_max%4==0?d_ip_max/4:(d_ip_max/4);
	for(var i=4;i>0;i--) b+=Math.floor(d_per*i)+'<br><br>';
	b+='0</p></td>';
	b+='<td width="10" valign="top"><img src="templates/phpstat/imagefiles/tu_back_left.gif" width="10" ></td>';
	b+=b_d1;
	b+='<td width="10" valign="top"><img src="templates/phpstat/imagefiles/tu_back_right.gif" width="10"></td></tr><tr height="20" align="center" style="letter-spacing:-2;font-family:Arial;font-size:12px"><td></td>';
	b+=b_d2;
	b+='<td></td></tr></table><div align="center"><span class="gra2" style="height:10px;width:'+b_w+';border:#000000 1px solid;"></span>&nbsp;'+title_ip+' '+d_ip_all+'&nbsp;&nbsp;</div>';
	sa_div.innerHTML=b;
}



function draw_line(sa)//画折线图
{
	var sa_div=document.getElementsByName("sa")[sa];
	var v=sa_div.data;
	init_data(v);	
	var l_d1="";
	var l_d2="";
	var title="";
	var l_x='';
	var l_y='';
	var e=document.getElementsByName("x_"+sa+"_1")[0];
	var t=e.offsetTop;
	var l=e.offsetLeft;
	while(e=e.offsetParent)
	{
		t+=e.offsetTop;
		l+=e.offsetLeft;
	}
	e=document.getElementsByName("x_"+sa+"_"+(d.length-1))[0];
	var t2=e.offsetTop;
	var l2=e.offsetLeft;
	while(e=e.offsetParent)
	{
		t2+=e.offsetTop;
		l2+=e.offsetLeft;
	}
	var w=(l2-l)/(d.length-2)*3/4;
	base_x=l*3/4-3/2*w;
	base_y=t*3/4;
	var l='<div align="center">'+title_all+' (折线图) <a href="javascript:draw_bar('+sa+')">->切换到柱状图</a></div><table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td valign="top" rowspan="2"><p align="right" style="line-height: 12px; margin-right: 2">';
	for(var i=1;i<d.length;i++)
	{	
		title=''+title_pv+':'+d[i][2]+' '+Math.floor(d[i][2]/d_pv_all*1000)/10+'%\n'+title_ip+':'+d[i][1]+' '+Math.floor(d[i][1]/d_ip_all*1000)/10+'%';
		l_id = Math.floor(Math.random()*8105.1)+i;
		l_id_2 = Math.floor(Math.random()*4150.2)+i;
		l_d1+='<td align="center" valign="bottom" width="'+(b_w+b_s_w)+'" background="templates/phpstat/imagefiles/tu_back.gif" title="'+title+'"></td>';
		l_d2+='<td width='+(b_w+b_s_w)+' title="'+title+'" valign="bottom" id="x_'+sa+'_'+i+'"><u>'+d[i][0]+'</u></td>';	
		from_x=base_x+i*w;
		to_x=base_x+(i+1)*w;
		if(i>1) 
		{
			from_y=base_y-d[i-1][2]/d_pv_max*75;
			to_y=base_y-d[i][2]/d_pv_max*75;
			l_x+='<v:line strokecolor="#bbbbbb" style="Z-INDEX:100;LEFT:0;TOP:0" from="'+from_x+'pt,'+from_y+'pt" to="'+to_x+'pt,'+to_y+'pt" strokecolor="black" strokeweight="1px" ><v:stroke StartArrow="oval" EndArrow="oval"  endarrowwidth="medium" startarrowwidth="medium" startarrowlength="medium"  endarrowlength="medium" onMouseOver="showsubmenu('+l_id+')" onMouseOut="showsubmenu('+l_id+')"/><span class="pillar-text3"  id='+l_id+' style="DISPLAY: none;">'+d[i-1][2]+'</span></v:line>';
			from_y=base_y-d[i-1][1]/d_pv_max*75;
			to_y=base_y-d[i][1]/d_pv_max*75;
			l_x+='<v:line strokecolor="#78AFD5" style="Z-INDEX:100;LEFT:0;TOP:0" from="'+from_x+'pt,'+from_y+'pt" to="'+to_x+'pt,'+to_y+'pt" strokecolor="black" strokeweight="1px"><v:stroke StartArrow="oval" EndArrow="oval" startarrowwidth="medium" startarrowlength="medium" endarrowwidth="medium" endarrowlength="medium"  onMouseOver="showsubmenu('+l_id_2+')" onMouseOut="showsubmenu('+l_id_2+')"/><span class="pillar-text3"  id='+l_id_2+' style="DISPLAY: none;">'+d[i-1][1]+'</span></v:line>';
		}
		l_y+='<v:line strokecolor="#eeeeee" style="Z-INDEX:10;LEFT:0;TOP:0" from="'+(from_x+w)+'pt,'+base_y+'pt" to="'+(from_x+w)+'pt,'+(base_y-75)+'pt" strokecolor="black" strokeweight="1px"/>';
	}
	
	var d_per=d_pv_max%4==0?d_pv_max/4:(d_pv_max/4);
	for(var i=4;i>0;i--) l+=Math.floor(d_per*i)+'<br><br>';
	l+='0</p></td>';
	l+='<td width="10" valign="top"><img src="templates/phpstat/imagefiles/tu_back_left.gif" width="10"></td>';
	l+=l_d1;
	l+='<td width="10" valign="bottom"><img src="templates/phpstat/imagefiles/tu_back_right.gif" width="10"></td></tr><tr height="20" align="center" style="letter-spacing:-2;font-family:Arial;font-size:12px"><td></td>';
	l+=l_d2;
	l+='<td></td></tr></table><div align="center"><span style="font-size:1px;background-color:#78AFD5;height:10px;width:'+b_w+';border:#000000 1px solid;"></span>&nbsp;'+title_ip+' '+d_ip_all+'&nbsp;&nbsp;<span style="font-size:1px;background-color:#bbbbbb;height:10px;width:'+b_w+';border:#000000 1px solid;"></span>&nbsp;'+title_pv+' '+d_pv_all+'</div>';
	sa_div.innerHTML=l+l_x+l_y;
}

function draw_line_single(sa)//画折线图
{
	var sa_div=document.getElementsByName("sa")[sa];
	var v=sa_div.data;
	init_data(v);	
	var l_d1="";
	var l_d2="";
	var title="";
	var l_x='';
	var l_y='';
	var e=document.getElementsByName("x_"+sa+"_1")[0];
	var t=e.offsetTop;
	var l=e.offsetLeft;
	while(e=e.offsetParent)
	{
		t+=e.offsetTop;
		l+=e.offsetLeft;
	}
	e=document.getElementsByName("x_"+sa+"_"+(d.length-1))[0];
	var t2=e.offsetTop;
	var l2=e.offsetLeft;
	while(e=e.offsetParent)
	{
		t2+=e.offsetTop;
		l2+=e.offsetLeft;
	}
	var w=(l2-l)/(d.length-2)*3/4;
	base_x=l*3/4-3/2*w;
	base_y=t*3/4;
	var l='<div align="center">'+title_all+' (折线图) <a href="javascript:draw_bar_single('+sa+')">->切换到柱状图</a></div><table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td valign="top" rowspan="2"><p align="right" style="line-height: 12px; margin-right: 2">';
	for(var i=1;i<d.length;i++)
	{	
		title=''+title_ip+':'+d[i][1]+' '+Math.floor(d[i][1]/d_ip_all*1000)/10+'%';
		//l_id = Math.floor(Math.random()*8105.1)+i;
		l_id_2 = Math.floor(Math.random()*4150.2)+i;
		l_d1+='<td align="center" valign="bottom" width="'+(b_w+b_s_w)+'" background="templates/phpstat/imagefiles/tu_back.gif" title="'+title+'"></td>';
		l_d2+='<td width='+(b_w+b_s_w)+' title="'+title+'" valign="bottom" id="x_'+sa+'_'+i+'"><u>'+d[i][0]+'</u></td>';	
		from_x=base_x+i*w;
		to_x=base_x+(i+1)*w;
		if(i>1) 
		{			
			from_y=base_y-d[i-1][1]/d_ip_max*75;
			to_y=base_y-d[i][1]/d_ip_max*75;
			l_x+='<v:line strokecolor="#78AFD5" style="Z-INDEX:100;LEFT:0;TOP:0" from="'+from_x+'pt,'+from_y+'pt" to="'+to_x+'pt,'+to_y+'pt" strokecolor="black" strokeweight="1px" onMouseOver="showsubmenu('+l_id_2+')" onMouseOut="showsubmenu('+l_id_2+')"><v:stroke StartArrow="oval" EndArrow="oval" startarrowwidth="medium" startarrowlength="medium" endarrowwidth="medium" endarrowlength="medium"  /><span class="pillar-text3"  id='+l_id_2+' style="DISPLAY: none;">'+d[i-1][1]+'</span></v:line>';
		}
		l_y+='<v:line strokecolor="#eeeeee" style="Z-INDEX:10;LEFT:0;TOP:0" from="'+(from_x+w)+'pt,'+base_y+'pt" to="'+(from_x+w)+'pt,'+(base_y-75)+'pt" strokecolor="black" strokeweight="1px"/>';
	}
	
	var d_per=d_ip_max%4==0?d_ip_max/4:(d_ip_max/4);
	for(var i=4;i>0;i--) l+=Math.floor(d_per*i)+'<br><br>';
	l+='0</p></td>';
	l+='<td width="10" valign="top"><img src="templates/phpstat/imagefiles/tu_back_left.gif" width="10"></td>';
	l+=l_d1;
	l+='<td width="10" valign="bottom"><img src="templates/phpstat/imagefiles/tu_back_right.gif" width="10"></td></tr><tr height="20" align="center" style="letter-spacing:-2;font-family:Arial;font-size:12px"><td></td>';
	l+=l_d2;
	l+='<td></td></tr></table><div align="center"><span style="font-size:1px;background-color:#78AFD5;height:10px;width:'+b_w+';border:#000000 1px solid;"></span>&nbsp;'+title_ip+' '+d_ip_all+'&nbsp;&nbsp;</div>';
	sa_div.innerHTML=l+l_x+l_y;
}


/*
document.onmouseover=function(){getXY();}
function getXY()
{
	window.status=(event.clientX+","+event.clientY);
}
*/


