        <link rel="stylesheet" href="Highcharts/nesw2/images/style.css" type="text/css">
	    <link type="text/css" href="css/jquery-ui-1.8.6.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery.min.js"></script>
        <script src="Highcharts/new2/amcharts/amcharts.js" type="text/javascript"></script>
        <script src="Highcharts/new2/amcharts/serial.js" type="text/javascript"></script>
		<script src="Highcharts/js/highcharts.js"></script>
		<script src="Highcharts/js/highcharts-more.js"></script>
        <script src="Highcharts/js/modules/exporting.js"></script>
        <script src="Highcharts/amcharts/gauge.js" type="text/javascript"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>


		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
		<script type="text/javascript">
		jQuery(function($){
		$.datepicker.regional['vi'] = {
			closeText: 'Tutup',
			prevText: 'Sebelum',
			nextText: 'Sesudah',
			currentText: 'Sekarang',
			monthNames: ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
			'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'],
			monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
			'Jul', 'Ags', 'Sep', 'Okt', 'Nov', 'Des'],
			dayNames: ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum&acute;at', 'Sabtu'],
			dayNamesShort: ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sbt'],
			dayNamesMin: ['Mg', 'Sn', 'Sl', 'Rb', 'Km', 'Jm', 'Sb' ],
			dateFormat: 'yy-mm-dd',
			firstDay: 0,
			isRTL: false,
			showMonthAfterYear: false,
			changeMonth: true,
			changeYear: true,
			yearSuffix: ''};
		$.datepicker.setDefaults($.datepicker.regional['vi']);
	  	$(function(){
				$('#tgls').datepicker({
					inline: true
				});
	    });
		$(function(){
				$('#tglf').datepicker({
					inline: true
				});
	    });
       });
</script>

<?php
if($_POST['btncari']=="Search") {
	$tglf=$_POST['tglf'];
	$tgls=$_POST['tgls'];
} else { 
	$tglf= date('Y-m-d');
	$tgls = date('Y-m-d',strtotime('-1 day',strtotime($tglf))) ;
}


if($_GET['tpos']=="PDA"){
$sql="SELECT DISTINCT ReceivedDate,jam_value AS ReceivedTime,UNIX_TIMESTAMP(CONCAT(ReceivedDate,'-',DATE_FORMAT(a.ReceivedTime,'%H:0'))) AS tgl,max(a.WLevel) AS WLevel, FORMAT(a.WLevel*100,0) AS klWLevel,ML
FROM ".$_GET['pos']." AS a
INNER JOIN m_jam AS b ON DATE_FORMAT(b.jam_value,'%H:0') = DATE_FORMAT(a.ReceivedTime,'%H:0')
WHERE 1=1 AND a.WLevel!=0 AND a.WLevel>=1 AND a.ReceivedDate>='".$tgls."' AND a.ReceivedDate<='".$tglf."' GROUP BY ReceivedDate,jam_value
ORDER BY a.ReceivedDate DESC,b.jam_value DESC";
} else { 
/*$sql="SELECT DISTINCT ReceivedDate,jam_value AS ReceivedTime,UNIX_TIMESTAMP(CONCAT(ReceivedDate,'-',DATE_FORMAT(a.ReceivedTime,'%H:0'))) AS tgl,Rain,ML
FROM ".$_GET['pos']." AS a
INNER JOIN m_jam AS b ON DATE_FORMAT(b.jam_value,'%H:0') = DATE_FORMAT(a.ReceivedTime,'%H:0')
WHERE 1=1 AND a.ReceivedDate>='".$tglf."' AND a.ReceivedDate<='".$tglf."' GROUP BY ReceivedDate,jam_value
ORDER BY a.ReceivedDate DESC,b.jam_value DESC";
*/
$sql="SELECT DISTINCT ReceivedDate,ReceivedTime,UNIX_TIMESTAMP(CONCAT(ReceivedDate,'-',DATE_FORMAT(a.ReceivedTime,'%H:0'))) AS tgl,Rain,ML
FROM ".$_GET['pos']." AS a
WHERE 1=1 AND a.ReceivedDate>='".$tglf."' AND a.ReceivedDate<='".$tglf."' GROUP BY ReceivedDate,ReceivedTime
ORDER BY a.ReceivedDate DESC,a.ReceivedTime DESC";
}

//echo $sql;


$query=mysql_query($sql);

$sql="SELECT * FROM m_lokasi WHERE 1=1";if($_GET['pos']==""){
	$sql.=" AND nama_lokasi='awlr_katulampa'";
} else { 
	$sql.=" AND nama_lokasi='".$_GET['pos']."'";
}
$sql_ambil_namapos=mysql_query($sql);
$ambil=mysql_fetch_array($sql_ambil_namapos);

$sqlb=mysql_query("SELECT ML FROM ".$_GET['pos']." WHERE 1=1 ORDER BY ID DESC Limit 1");
$ambilb=mysql_fetch_array($sqlb);
$sqll=mysql_query("SELECT * FROM m_lokasi WHERE nama_lokasi='".$_GET['pos']."'");
$ambill=mysql_fetch_array($sqll);
?>

<?php
if($_GET['tpos']=="PDA") {
?>
        <script>
            var chart;
            var chartData = [
                /*{
                    "date": "2012-01-01",
                    "value": 8
                },
                {
                    "date": "2012-01-23",
                    "value": 8
                }*/
				<?php
                 if($_GET['pos']!="" && $tgls!="" && $tglf!=""){
                $SQL="SELECT DISTINCT ReceivedDate,jam_value AS ReceivedTime,UNIX_TIMESTAMP(CONCAT(ReceivedDate,'-',DATE_FORMAT(a.ReceivedTime,'%H:0'))) AS tgl,max(a.WLevel) AS WLevel, FORMAT(a.WLevel,0) AS klWLevel
FROM ".$_GET['pos']." AS a
INNER JOIN m_jam AS b ON DATE_FORMAT(b.jam_value,'%H:0') = DATE_FORMAT(a.ReceivedTime,'%H:0')
WHERE 1=1 AND a.WLevel!=0 AND a.WLevel>=1 AND a.ReceivedDate>='".$tgls."' AND a.ReceivedDate<='".$tglf."' GROUP BY ReceivedDate,jam_value
ORDER BY a.ReceivedDate ASC,b.jam_value ASC";
                        }
				    //    $SQL="SELECT DISTINCT UNIX_TIMESTAMP(CONCAT(ReceivedDate,'-',ReceivedTime)) AS tgl, WLevel FROM awlr_bebedahan ";
                        $QUERY=mysql_query($SQL);
                        $i=0;
						while ($x=mysql_fetch_array($QUERY)) {
                        $i++;
							if($ambil['id_merk']=="RADIO") { $tma=$x['klWLevel']; } else {
								if($_GET['pos']=="awlr_katulampa") {$tma=$x['WLevel']; }	else { $tma=$x['WLevel']; }
							}
							echo '{"date":"'.$x['ReceivedDate'].' '.date('H:i',strtotime($x['ReceivedTime'])).'","value":'.$tma.'},';
						}
                    ?>];

				AmCharts.ready(function () {
                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;
                chart.dataDateFormat = "YYYY-MM-DD JJ:NN";
                chart.categoryField = "date";

				// AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
                categoryAxis.minPeriod = "hh"; // our data is daily, so we set minPeriod to DD
                categoryAxis.gridAlpha = 0.1;
                categoryAxis.minorGridAlpha = 0.1;
                categoryAxis.axisAlpha = 0;
                categoryAxis.minorGridEnabled = true;
                categoryAxis.inside = true;

                // value
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.tickLength = 0;
                valueAxis.axisAlpha = 0;
                valueAxis.showFirstLabel = false;
                valueAxis.showLastLabel = false;
                chart.addValueAxis(valueAxis);

                // GRAPH
                var graph = new AmCharts.AmGraph();
                graph.dashLength = 3;
                graph.lineColor = "#0000FF";
                graph.valueField = "value";
                graph.dashLength = 3;
                graph.bullet = "round";
                graph.balloonText = "<b><span style='font-size:14px;'>[[value]] Cm</span></b>";
                chart.addGraph(graph);

                // CURSOR
                var chartCursor = new AmCharts.ChartCursor();
                chartCursor.valueLineEnabled = true;
                chartCursor.valueLineBalloonEnabled = true;
                chart.addChartCursor(chartCursor);

                // SCROLLBAR
                var chartScrollbar = new AmCharts.ChartScrollbar();
                chart.addChartScrollbar(chartScrollbar);
				// WRITE
                chart.write("chartdiv");
            });
        </script>
<?php } else { ?>
        <script>
        // in order to set theme for a chart, all you need to include theme file
        // located in amcharts/themes folder and set theme property for the chart.

        var chart1;
        var chart2;

        makeCharts("light", "#FFFFFF");

        // Theme can only be applied when creating chart instance - this means
        // that if you need to change theme at run time, youhave to create whole
        // chart object once again.

        function makeCharts(theme, bgColor, bgImage) {

            if (chart1) {
                chart1.clear();
            }
            if (chart2) {
                chart2.clear();
            }

            // background
            if (document.body) {
                document.body.style.backgroundColor = bgColor;
                document.body.style.backgroundImage = "url(" + bgImage + ")";
            }

            // column chart
            chart1 = AmCharts.makeChart("chartdiv", {
                type: "serial",
                theme: theme,
                dataProvider: [
				/*{
                    "time": 2005,
                    "rain": 23.5,
                    "tma": 0
                },*/
				<?php
			   if($_GET['pos']!="" && $tgls!="" && $tglf!=""){
/*$sql2="SELECT DISTINCT ReceivedDate,jam_value AS ReceivedTime,UNIX_TIMESTAMP(CONCAT(ReceivedDate,'-',DATE_FORMAT(a.ReceivedTime,'%H:0'))) AS tgl,Rain,ML
FROM ".$_GET['pos']." AS a
INNER JOIN m_jam AS b ON DATE_FORMAT(b.jam_value,'%H:0') = DATE_FORMAT(a.ReceivedTime,'%H:0')
WHERE 1=1 AND a.ReceivedDate>='".$tglf."' AND a.ReceivedDate<='".$tglf."' GROUP BY ReceivedDate,jam_value
ORDER BY a.ReceivedDate DESC,b.jam_value DESC";
*/
$sql2="SELECT DISTINCT ReceivedDate,ReceivedTime,UNIX_TIMESTAMP(CONCAT(ReceivedDate,'-',DATE_FORMAT(a.ReceivedTime,'%H:0'))) AS tgl,Rain,ML
FROM ".$_GET['pos']." AS a
WHERE 1=1 AND a.ReceivedDate>='".$tglf."' AND a.ReceivedDate<='".$tglf."' GROUP BY ReceivedDate,ReceivedTime
ORDER BY a.ReceivedDate ASC,a.ReceivedTime ASC";
										}
										
                   $QUERY2=mysql_query($sql2);
                   $i=0;
					while ($x2=mysql_fetch_array($QUERY2)) {
                    $i++;
					echo '{ "time":"'.date('H:i',strtotime($x2['ReceivedTime'])).'","rain":'.number_format($x2['Rain'],2).'},';
					}
				?>],
                categoryField: "time",
                startDuration: 1,

                categoryAxis: {
                    gridPosition: "start"
                },
                valueAxes: [{
                    title: "Rain (mm)"
                }],
                graphs: [{
                    type: "column",
                    title: "Rain",
                    valueField: "rain",
                    lineAlpha: 0,
                    fillAlphas: 0.8,
                    balloonText: "[[title]] in [[category]]:<b>[[value]]</b>"
                }/*, {
                    type: "line",
                    title: "WLevel",
                    valueField: "tma",
                    lineThickness: 2,
                    fillAlphas: 0,
                    bullet: "round",
                    balloonText: "[[title]] in [[category]]:<b>[[value]]</b>"
                }*/],
                legend: {
                    useGraphSettings: true
                }
            });
        }
        </script>

<?php } ?>
        

        <script>
            var chart;
            var arrow;
            var axis;
            AmCharts.ready(function () {
                // create angular gauge
                chart = new AmCharts.AmAngularGauge();
                //chart.addTitle("");
                // create axis
                axis = new AmCharts.GaugeAxis();
                axis.startValue = 0;
				axis.axisThickness = 1;
                axis.valueInterval = 1;
                axis.endValue = 20;
                // color bands
                var band1 = new AmCharts.GaugeBand();
                band1.startValue = 0;
                band1.endValue = 13;
                band1.color = "#00CC00";

                var band2 = new AmCharts.GaugeBand();
                band2.startValue = 13;
                band2.endValue = 16;
                band2.color = "#ffac29";

                var band3 = new AmCharts.GaugeBand();
                band3.startValue = 16;
                band3.endValue = 20;
                band3.color = "#ea3838";
                band3.innerRadius = "90%";

                axis.bands = [band1, band2, band3];

                // bottom text
                axis.bottomTextYOffset = -20;
                axis.setBottomText("0 Volt");
                chart.addAxis(axis);

                // gauge arrow
                arrow = new AmCharts.GaugeArrow();
                chart.addArrow(arrow);

                chart.write("battery");
                // change value every 2 seconds
                setInterval(randomValue, 2000);
            });

            // set random value
            function randomValue() {
                //var value = 14.3;
                var value = <?php echo $ambilb['ML'];?>;
				arrow.setValue(value);
                axis.setBottomText(value + " Volt");
            }

        </script>

		<article class="module width_3_quarter">
		<header>
		<h3 class="tabs_involved" style="background-image:url(images/icons/stats_lines.png); background-repeat:no-repeat; padding-left:20px; margin-left:5px;">POS <?php echo strtoupper($_GET['pos']);?></h3>
		<form action="" method="post">
        <ul class="tabs">
        	<li>Periode : <input type="text" id="tgls" name="tgls" value="<?php echo date('Y-m-d',strtotime($tgls));?>" size="10" /> s/d <input type="text" id="tglf" name="tglf" value="<?php echo date('Y-m-d',strtotime($tglf));?>" size="10" />
            	<input type="submit" id="btncari" name="btncari" value="Search" />	
            </li>
        </ul>
        </form>
		</header>
		<div class="tab_container">
				        <div id="chartdiv" style="width: 100%; height: 350px; background-color:aliceblue;"></div>
			<hr/>
            <article class="module width_quarter_battray">
            <header>
            <h3 class="tabs_involved" style="background-image:url(images/icon_online.png); background-repeat:no-repeat; padding-left:20px; margin-left:5px;">
           	Info Detail Pos</h3>
            </header>
            <div class="tab_container">
				<table width="100%" style="padding:3px;">
                	<tr>
                    	<td><strong>ID Location</strong></td>
                    	<td>: <?php echo $ambill['kode_lokasi'];?></td>
                    </tr>
                	<tr>
                    	<td><strong>Name Location</strong></td>
                    	<td>: <?php echo $ambill['nama_lokasi'];?></td>
                    </tr>
                	<tr>
                    	<td><strong>Coordinat</strong></td>
                    	<td style="background-image:url(images/icon_offline.png); background-repeat:no-repeat; padding-left:17px;">: 
						<a href="#" >
                        <?php echo $ambill['lat'];?>, <?php echo $ambill['lng'];?> 
                        </a>
                        </td>
                    </tr>
                	<tr>
                    	<td><strong>Siaga</strong></td>
                    	<td>
                        <table width="100%">
                        <tr>
                        	<td style="background-image:url(images/icsukses.png); background-repeat:no-repeat; padding-left:17px;">
                            Siaga 4  : <?php echo $ambill['siaga4'];?></td>
                        	<td style="background-image:url(images/iconsiaga3.png); background-repeat:no-repeat; padding-left:17px;">
                            Siaga 3 : <?php echo $ambill['siaga3'];?></td>
						</tr>
                        <tr>
                        	<td style="background-image:url(images/icwarning.png); background-repeat:no-repeat; padding-left:17px;">
                            Siaga 2 : <?php echo $ambill['siaga2'];?></td>
                        	<td style="background-image:url(images/icdanger.png); background-repeat:no-repeat; padding-left:17px;">
                            Siaga 1 : <?php echo $ambill['siaga1'];?></td>
                        </tr>
                        </table>
                    </tr>
                	<tr>
                    	<td></td>
                    	<td></td>
                    </tr>
                	<tr>
                    	<td></td>
                    	<td></td>
                    </tr>
                </table>
            </div><!-- end of .tab_container -->
            </article><!-- end of content manager article --> 

            <article class="module width_quarter_battray">
            <header>
            <h3 class="tabs_involved" style="background-image:url(images/battery.png); background-repeat:no-repeat; padding-left:20px; margin-left:5px;">
            Status Battery</h3>
            </header>
            <div class="tab_container">
                            <div id="battery" style="min-width: 310px; max-width: 400px; height: 250px; margin-top:-5px;"></div>
            </div><!-- end of .tab_container -->
            </article><!-- end of content manager article --> 
            	
		</div><!-- end of .tab_container -->
		</article><!-- end of content manager article -->        
        
	<article class="module width_quarter">
			<header>
            <h3 class="tabs_involved" style="background-image:url(images/icons/spreadsheet.png); background-repeat:no-repeat; padding-left:20px; margin-left:5px;">
            DATA TABLE</h3>
            <ul class="tabs">
    	    	<li><a href="includes/downloadDataTMA.php?pos=<?php echo $_GET['pos'];?>&tgls=<?php echo $tgls;?>&tglf=<?php echo $tglf;?>&tpos=<?php echo $_GET['tpos'];?>">Download</a></li>
	        </ul>
            </header>
			<div class="message_list">
				<div class="module_content">
				<table class="tablesorter" cellspacing="0" border="1">
              	<thead>
              	<tr>
                    <!--th width="10px">No</th-->
                    <th width="30px">Date</th>
                    <th width="10px">Time</th>
                    <?php if($_GET['tpos']=="PDA") {?>
                    <th width="44px">Tma</th>
                    <?php } else { ?>
                    <th width="44px">Rain</th>
                    <?php }?>
                    <th width="20px">Batt</th>
               	</tr>
               	</thead>
               	<tbody>
                <?php
				$i=0;
				while($row=mysql_fetch_array($query)){
				$i++;
				?>
                <tr>
                    <!--td><?php echo $i?></td-->
                    <td style="background-image:url(images/bgWarning.png); background-repeat:no-repeat; padding-left:17px;">
					<strong>&raquo;</strong> <?php echo date('d/m/Y',strtotime($row['ReceivedDate']));?></td>
                    <td><?php echo date('H:i',strtotime($row['ReceivedTime']));?></td>
                    <?php if($_GET['tpos']=="PDA") {?>
                    <td><?php echo number_format($row['WLevel'],2);?></td>
                    <?php } else { ?>
                    <td><?php echo number_format($row['Rain'],1);?></td>
                    <?php }?>
                    <td><?php echo $row['ML'];?> v</td>
              	</tr>
                <?php 
				} 
				?>
              	</tbody>
              	</table>
				</div>
			</div>
			<!--footer>
				<form class="post_message">
					<input type="text" value="Message" onFocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
					<input type="submit" class="btn_post_message" value=""/>
				</form>
			</footer-->
		</article>