var detail_chart;
$(document).ready(function(){
	var startDate = '2013-07-13';
	startDate = new Date(startDate.replace(/-/g,"/"));
	var start_date_UTC_time = startDate.getTime() - startDate.getTimezoneOffset() * 60 * 1000;
	var chart3 = new Highcharts.Chart({
		chart: {
			renderTo: 'chart_3',
			type: 'area',
			marginLeft: 15,
    		height: 223,
    		spacingTop: 10,
    		spacingBottom: 0,
    		overflow: false,
    		zIndex: 5
		},
		credits: {
			enabled: false
		},
		title: {
			text: ' '
		},
		colors: ['#31B6AD'],
		xAxis: {
			type: 'datetime',
			dateTimeLabelFormats: {
				day: '%e/%m'  
			},
			lineColor: '#CECECE',
        	gridLineColor: '#EFECEF',
        	gridLineWidth: 1,
        	tickWidth: 0,
			labels:{
				step: 2,
				maxStaggerLines: 1
			},
			tickInterval: (4 * 24 * 3600 * 1000),
			tickColor: '#FFFFFF'
		},
		yAxis: {
			title: {
            	text: ''
          	},
          	allowDecimals: false,
          	endOnTick: false,
          	tickInterval: 1,
          	lineColor: '#CECECE',
          	lineWidth: 2,
          	gridLineColor: '#EFECEF',
          	gridLineWidth: 1,
          	minPadding: 0.3,
          	maxPadding: 1.2
		},
		legend: {
			enabled: false
		},
		tooltip: {
			formatter: function() {
				return '<span style="color:#969696;font-weight:bold;">' + Highcharts.dateFormat('%b %e', this.x) + '</span>' +'<br />' + '<span style="color:#464646;font-weight:bold;">' + this.y + 'mmol/L' + '</span>' + '<br />' + 'click for more info';
			},
//			positioner: function (boxWidth, boxHeight, point) {
//            	return { x: point.plotX+80, y: point.plotY-20 };
//            },
			style: {
				padding: '7px'
			},
			borderColor: '#EAEAEA'
		},
		plotOptions: {
			series: {
				marker: {
					enabled: true, //false false的时候就不会突出显示点 
					lineColor: '#31B6AD',  
					lineWidth: 1,
					radius: 3,  // 点的大小  
					fillColor: '#FFFFFF' // 设置点中间填充的颜色 
				},
				fillOpacity: 0.12,
                lineWidth: 1,
                threshold: null,
                shadow: false
			}
		},
		series: [{
			data: [6.0, 5.9, 5.5, 4.5, 6.2, 6.5, 5.2, 6.0, 5.9, 5.5, 4.5, 6.2, 6.5, 5.2, 6.0, 5.9, 5.5, 4.5, 6.2, 6.5],
			pointStart: start_date_UTC_time,
            pointInterval:1 * 24 * 3600 * 1000
		}]
	});
	
	detail_chart = new Highcharts.Chart({
		chart: {
			renderTo: 'detail_chart',
			type: 'area',
			marginLeft: 25,
			width: 562,
    		height: 303,
    		spacingTop: 10,
    		spacingBottom: 0,
    		overflow: false,
    		zIndex: 5
		},
		credits: {
			enabled: false
		},
		title: {
			text: ' '
		},
		colors: ['#31B6AD'],
		xAxis: {
			type: 'datetime',
			dateTimeLabelFormats: {
				day: '%e/%m'  
			},
			lineColor: '#CECECE',
        	gridLineColor: '#EFECEF',
        	gridLineWidth: 1,
        	tickWidth: 0,
			labels:{
				step: 2
			},
			tickInterval: (2 * 24 * 3600 * 1000),
			tickColor: '#FFFFFF'
		},
		yAxis: {
			title: {
            	text: ''
          	},
          	allowDecimals: true,
          	endOnTick: false,
          	tickInterval: 0.5,
          	lineColor: '#CECECE',
          	lineWidth: 2,
          	gridLineColor: '#EFECEF',
          	gridLineWidth: 1,
          	minPadding: 0.3,
          	maxPadding: 1.2,
          	labels: {
          		formatter: function() {
          			var originYValue = this.value+'';
          			if (originYValue.length == 1){
          				originYValue += '.0';
          			}
	                return originYValue;
	            }
          	}
		},
		legend: {
			enabled: false
		},
		tooltip: {
			formatter: function() {
				return '<span style="color:#969696;font-weight:bold;">' + Highcharts.dateFormat('%b %e', this.x) + '</span>' +'<br />' + '<span style="color:#464646;font-weight:bold;">' + this.y + 'mmol/L' + '</span>' + '<br />' + 'click for more info';
			},
//			positioner: function (boxWidth, boxHeight, point) {
//          	return { x: point.plotX+80, y: point.plotY-20 };
//          },
			style: {
				padding: '7px'
			},
			borderColor: '#EAEAEA'
		},
		plotOptions: {
			series: {
				marker: {
					enabled: true, //false false的时候就不会突出显示点 
					lineColor: '#31B6AD',  
					lineWidth: 1,
					radius: 3,  // 点的大小  
					fillColor: '#FFFFFF', // 设置点中间填充的颜色
					symbol: 'circle'
				},
				fillOpacity: 0.12,
                lineWidth: 1,
                threshold: null,
                shadow: false,
                point: {
	                events: {
						click: function() {
							alert(this.x);
							alert(this.y);
							TB_show(false, '../pages/popup/EditHistoryData.html?TB_iframe=true&no1_title&transfer_params&height=351&width=630&card_id=3', false);
						}
					}
				}
			}
		},
		series: []
	});
	
	//详细历史记录
	$(".detail_history").bind("click", function(){
		card_detail_id = $(this).closest(".index_card").attr("id").replace('index_card_', '');
		var startDateLog = '2013-08-04';
		var endDateLog = '2013-08-10';
		var date = new Date();
		var time = date.getTime();
		redraw_chart(detail_chart, startDateLog, endDateLog);
		$(".act_card_container").addClass("move_div_2_left");
		return false;
	});
	
	//切换日期
	$(".shift_week").bind("click", function(){
		$(".shift_week").addClass("unselected");
		$(this).removeClass("unselected");
		var startDateLog = $(this).attr("start_date");
		var endDateLog = $(this).attr("end_date");
		redraw_chart(detail_chart, startDateLog, endDateLog);
		return false;
	});
	
	//根据日期搜索
	$("#search_start_date, #search_end_date").bind("change", function(){
		var startDateLog = $("#search_start_date").val();
		var endDateLog = $("#search_end_date").val();
		redraw_chart(detail_chart, startDateLog, endDateLog);
		return false;
	});
	
	//浏览更多
	$(".see_more_btn").bind("click", function(){
		var btn = $(".see_more_btn");
		var end = "2013-08-10";
		get_card_data_table(null, end, false);
		return false;
	});
	
	//收起历史记录
	$(".collapse_btn").bind("click", function(){
		//删除图表数据
		var serieses = detail_chart.series;
        for (series_key in serieses){
        	serieses[series_key].remove();
        }
        //删除表格数据
        $("tr").not(".first_line").remove();
        //隐藏div
        $(".detail_card_info").hide();
        //初始化详细卡片id
        card_detail_id = 0;
        //添加删除div位置初始化
        $(".act_card_container").removeClass("move_div_2_left");
        return false;
	});
});

//重画历史记录图表
function redraw_chart(detail_chart, start, end){
	var date = new Date();
	var time = date.getTime();
	$.ajax({
		type: 'get',
		url: '../ajax/getCardDataChart',
		data: 'card_detail_id='+card_detail_id+'&start='+start+'&end='+end+'&time='+time,
		dataType: 'json',
		success: function(dataJson){  //每一天都要有数据，否则x轴刻度时间对不上
			var startDateLogFormat = new Date(start.replace(/-/g,"/"));
			var start_date_log_UTC_time = startDateLogFormat.getTime() - startDateLogFormat.getTimezoneOffset() * 60 * 1000;
			var pointStart = start_date_log_UTC_time;
	        var pointInterval = 1 * 24 * 3600 * 1000;
	        
	        //设置默认起始结束时间
	        $("#search_start_date").datepicker( "setDate", start);
	        $("#search_end_date").datepicker( "setDate", end);
	        
	        //删除chart已有数据
	        var serieses = detail_chart.series;
	        for (series_key in serieses){
	        	serieses[series_key].remove();
	        }
	        //更新chart数据
	        detail_chart.addSeries({
		        data: dataJson,
		        pointStart: start_date_log_UTC_time,
		        pointInterval: pointInterval
		    });
	        //更新table数据
	        get_card_data_table(start, end, true);
	        //显示
			$(".detail_card_info").show();
		}
	});
}

function get_card_data_table(start, end, redraw){
	var date = new Date();
	var time = date.getTime();
	$.ajax({
		type: 'get',
		url: '../ajax/getCardDataTable',
		data: 'card_detail_id='+card_detail_id+'&start='+start+'&end='+end+'&time='+time,
		success: function(data){
			if(redraw){
				$("tr").not(".first_line").remove();
			}
			$("table").append(data);
		}
	});
}