<!DOCTYPE html>
<html>
<head>
	<title> graph show </title>
	<meta charset="UTF-8">
		<link type="text/css" href="css/start/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		<style>
			#demo-frame > div.demo { padding: 10px !important; };
		</style>
		<script>

		$(function() {
			$( "#radio" ).buttonset();
		});

		$(function() {
			$( "input:submit, a, button", ".demo" ).button();
			$( "a", ".demo" ).click(function() { return false; });
		});
		$(function() {
			var select = $( "#minbeds" );
			var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
				min: 1,
				max: 6,
				range: "min",
				value: select[ 0 ].selectedIndex + 1,
				slide: function( event, ui ) {
					select[ 0 ].selectedIndex = ui.value - 1;
				}
			});
			$( "#minbeds" ).change(function() {
				slider.slider( "value", this.selectedIndex + 1 );
			});
		});
		</script>
		</head>

<body>

<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0pt 0.7em;"> 
	<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: 0.3em;"></span>
	Pickup a Date </p>
</div>



<?php

$key_space = 'png';
$column_family = 'png';
$column_family_date = 'date';

$style="";
$date="";
$hour="";
$mon_act="";
if(isset($_GET['style'])){
	$style = trim($_GET['style']);
//	echo $style;
}
if(isset($_GET['date'])){
	$date = intval($_GET['date']);
//	echo $date;
}
if(isset($_GET['hour'])){
	$hour = $_GET['hour'];
//	echo $hour;
}
if(isset($_GET['mon_act'])){
	$mon_act = $_GET['mon_act'];
//	echo $hour;
}

require_once 'Cassandra.php';
// list of seed servers to randomly connect to
// all the parameters are optional and default to given values
$servers = array(
	array(
		'host' => '127.0.0.1',
		'port' => 9160,
		'use-framed-transport' => true,
		'send-timeout-ms' => 1000,
		'receive-timeout-ms' => 1000
	)
);
$cassandra = Cassandra::createInstance($servers);
$cassandra->useKeyspace($key_space);
$cassandra->setMaxCallRetries(5);


	$target = $cassandra->cf($column_family_date)->getKeyRange();
	$arr = $target->getAll();
	// echo print_r($arr, true); // show all

	echo "<div id=\"accordion\">";
	
	$name_arr = array();
	foreach($arr as $k => $v){
	 //echo "<a href=png_show.php?date=$k>".$k."</a> ";
	 $name_arr[] += $k;
	 // sort key by month
	}// foreach the date show
	
	sort($name_arr);
	$pre_month = "00";
	$mon_count = 0;
	$break_line = false;
	foreach ($name_arr as $k){
		$this_month = substr($k, 4, 2);
		$this_date = substr($k, 6,2);
		if($pre_month != $this_month ) {
			$break_line = true;
			
			if ($pre_month == "00") echo "<h3><a href=\"#\"> $this_month Month </a></h3><div>";
			else {
				echo " </p></div><h3><a href=\"#\"> $this_month Month </a></h3><div>";
				$mon_count ++;
			}
			
			$pre_month = $this_month; // determine change month or not
		}else{
			$break_line = false;
		}

	 ?>

	 
<button id="button<?echo $k?>"><?echo $this_date?></button>
<script>
$("#button<?echo $k?>").click(function () {
  <!-- 傳送到 png_show.php?date=<?echo $k?>"); -->
  $(window.location).attr('href', "./png_show.php?date=<?echo $k?>&mon_act=<?echo $mon_count?>");
});
</script>

	<?
	}// foreach $name_arr
	
	echo "</div></div> ";// div pdiv , accordion 
	
if ( $date != null ){


	?>
<div class="ui-state-error ui-corner-all" style="padding: 0pt 0.7em;"> 
	<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: 0.3em;"></span> 
	<strong>Date = <?echo $date;?>   </strong>   

<button id="clear">Clear</button>
<script>
$("#clear").click(function () {
  <!-- 傳送到 png_show.php?date=<?echo $k?>"); -->
  $(window.location).attr('href', "./png_show.php");
});
</script>
</p>
</div>

<div class="ui-state-highlight ui-corner-all" style="margin-top: 5px; padding: 0pt 0.7em;"> 
	<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: 0.3em;"></span>
	! Choose clock </p>
</div>
	<?
	$target = $cassandra->cf($column_family_date)->get($date);
	if ($target == null){
		echo "no this date <br>";
		header( 'Location: png_show.php' );
		
	}else{
		// echo 'value: <pre>'.print_r($target,true).'</pre><hr/>';
		
// the web 
echo "<form><div id=\"radio\">";
		
		foreach($target as $k => $v){
			if ($v == "1"){
				?>
				
<input type="radio" id="radio<?echo $k?>" name="radio" /><label for="radio<?echo $k?>"><?echo $k?></label>
<script>
$("#radio<?echo $k?>").click(function () {
  $("#graph").html("<img src=\"png_out.php?date=<?echo $date?>&hour=<?echo $k?>\" />");
});
</script>

				<?
			}//if
		}// foreach
?>
</div><!-- End radio -->
</form><!-- End demo -->
<?
	}
}//if date not null
?>

<div id="graph"></div> 
<p></p>

<script>
// init
$('#accordion').accordion(
{
	autoHeight: false,
	navigation: true
}
);

</script>

<?
if ($mon_act != "" ) echo "<script> $( '#accordion' ).accordion( 'option', 'active', $mon_act );</script>";
?>
</body>
</html>