#!/bin/sh
#This script is created by ssparser automatically. The parser first created by MaoShouyan
printf "Content-type: text/html;charset=gb2312
Cache-Control: no-cache

"
echo -n "";
if [ "${PALANG}" = "en" ]; then 
	LANG_001="Configure"
	LANG_002="Realtime"
	LANG_003="TopFlow"
	LANG_004="Trend"
	LANG_005="LogShow"
	LANG_006="GameCloud"
	LANG_007="close"
	LANG_008="open"
	LANG_009="Interface"
	LANG_0010="IP Grp"
	LANG_0011="null"
	LANG_0012="Pool ID"
	LANG_0013="Only provides gamecloud service for the specified IP if sets."
	LANG_0014="Submit"
	LANG_0015="Work Status"
	LANG_0016="Redial"
	LANG_0017="Connect Time"
	LANG_0018="License ID"
	LANG_0019="Service Time"
	LANG_0020="Cnt(max)"
	LANG_0021="Cur/Max"
	LANG_0022="IP List"
	LANG_0023="Chart"
	LANG_0024="Linkwan(/ms)"
	LANG_0025="Cur/Min/Max"
	LANG_0026="State(Cloudwan)"
	LANG_0027="State(Linkwan)"
	LANG_0028="Games"
	LANG_0029="Name"
	LANG_0030="Bps(in)"
	LANG_0031="Bps(out)"
	LANG_0032="Cloud(in)"
	LANG_0033="Cloud(out)"
	LANG_0034="APPENABLE"
	LANG_0035="Time"
	LANG_0036="GameCloud->Realtime"
fi
CGI_name=${GameCloud:=Ϸ}
CGI_browsertitle="${LANG_0036:=Ϸ->ʵʱ}"
URLROOT="/cgi-bin/App/gamecloud"
. ../../common/common.sh
MOD_TAB_LIST="${LANG_001:=}#${URLROOT}/webmain ${LANG_002:=ʵʱ}#${URLROOT}/gamecloud_rtgraph ${LANG_003:=}#${URLROOT}/gamecloud_topflow"
MOD_TAB_LIST="${MOD_TAB_LIST} ${LANG_004:=ʷ}#${URLROOT}/gamecloud_graph ${LANG_005:=·־}#${URLROOT}/gamecloud_logshow" 

echo -n "
<script type=\"text/javascript\" src=\"/img/common.js\"></script>
<script type=\"text/javascript\" src=\"/img/highcharts.js\"></script>
<script language=\"javascript\">
Highcharts.setOptions({ global: { useUTC: false } });
function creategraph(render, datatype, titletext) {
        var options = ({
                chart: {
                        type: 'spline',
                        renderTo:render
                },
                title: {
                        style: {
                                font: 'bold 12px Arial'
                        },
                        enabled: false,
                        text:titletext,
                        x: -20
                },
                xAxis: {
                        type: 'datetime',
                        tickPixelInterval: 50,
                        labels: {
                                style: {
                                        font: 'normal 9px Arial',
                                        fontSize:'10px'
                                }
                        }
                },
                yAxis: {
                        min: 0,
                        tickPixelInterval:30,
                        title: {
                                text: \"bps\"
                        },
                        labels: {
                                style: {
                                        font: 'normal 9px Arial'
                                }
                        },
                        plotLines: [{
                                value: 0,
                                width: 1,
                                color: \"#808080\"
                        }]
                },
                plotOptions:{
                                area:{stacking:false,lineWidth:1,marker:{enabled:false}},
                                spline:{
                                        marker:{
                                                radius:0,
                                                lineWidth:1
                                        },
                                        lineWidth:1
                                }
                },
                tooltip: {
                        formatter:function(){
                                        var dd = new Date(this.x);
                                        var str = \"${LANG_0035:=ʱ}\"+dd.getDate()+'/'+dd.getHours()+':'+dd.getMinutes();
                                        return str+'<br>'+this.series.name+' '+ numberformat(this.y);
                                }
                },
                legend: {
                        enabled:false,
                        layout: \"vertical\",
                        align: \"right\",
                        verticalAlign: \"middle\",
                        borderWidth: 0
                },
                credits:{enabled: false},
                series: [{name:titletext, color:'#9CC6F0', data: []}]
        });
        $.ajax({
                url: 'ajax_gamecloud?act=rtgraph&datatype=' + datatype,
                type:'post',
                dataType:'json',
                success:function(json){
                        if (datatype == \"in\")
                                options.series[0].data = json.inbps;
                        else 
                                options.series[0].data = json.outbps;
                        var chart = new Highcharts.Chart(options);
                }
        });
}
creategraph('mygraph_in', 'in', '${CGI_name}');
creategraph('mygraph_out', 'out', '${CGI_name}');
setInterval(function() {
creategraph('mygraph_in', 'in', '${CGI_name}');
creategraph('mygraph_out', 'out', '${CGI_name}');
}, 10000);
</script>
<body>
"; cgi_print_mod_header "${LANG_002:=ʵʱ}" "100%" 
echo -n "
<div id=\"mygraph_in\" style=\"width:700px;height:310px;\"></div>
<div id=\"mygraph_out\" style=\"width:700px;height:310px;\"></div>
</body>
</html>
";