Date.prototype.format = function(format) {
	var date = {
		"M+": this.getMonth() + 1,
		"d+": this.getDate(),
		"h+": this.getHours(),
		"m+": this.getMinutes(),
		"s+": this.getSeconds(),
		"q+": Math.floor((this.getMonth() + 3) / 3),
		"S+": this.getMilliseconds()
	};
	if (/(y+)/i.test(format)) {
		format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
	}
	for (var k in date) {
		if (new RegExp("(" + k + ")").test(format)) {
			format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
				date[k] : ("00" + date[k]).substr(("" + date[k]).length));
		}
	}
	return format;
}

$(function() {
	var date = new Date();
	date.setDate(date.getDate() - 1);
	$('#date-text').val(date.format("yyyy-MM-dd"));
	searchDay();
});


$('.form_date').datetimepicker({
	language: 'zh-CN',
	weekStart: 1,
	todayBtn: 1,
	autoclose: 1,
	todayHighlight: 1,
	startView: 2,
	minView: 2,
	forceParse: 0
});

var chart = null;
var chart2 = null;

function Canvas(datas) {
	var labels = ['新手引导'];
	var datas2 = [0];
	var keys =Object.keys(datas);
 
	// console.log(keys.length);
	keys.sort();
	for (var i = 1; i < keys.length; i++) {
		var k = keys[i];
		labels.push('第' + k + '关');
	    var kf = keys[i-1];
		datas2.push(((datas[kf] - datas[k]) / datas[kf] * 100).toFixed(2));
	}
	// console.log(labels);
	var lineChartData = {
		labels: labels,
		datasets: [{
			fillColor: "rgba(220,220,220,0.2)",
			strokeColor: "rgba(220,220,220,1)",
			pointColor: "rgba(220,220,220,1)",
			pointStrokeColor: "#fff",
			pointHighlightFill: "#fff",
			pointHighlightStroke: "rgba(220,220,220,1)",
			data: datas
		}, ]
	}
	$('#dayCanvas').attr("width", $('#dayCanvasParent').width());
	var ctx = document.getElementById("dayCanvas").getContext("2d");
	if (chart != null) {
		chart.destroy();
	}
	chart = new Chart(ctx).Line(lineChartData, {
		scaleLabel: "<%=value%>人"
	});

	 // console.log(datas2);
	var lineChartData2 = {
		labels: labels,
		datasets: [{
			fillColor: "rgba(151,187,205,0.5)",
			strokeColor: "rgba(151,187,205,1)",
			pointColor: "rgba(151,187,205,1)",
			pointStrokeColor: "#fff",
			pointHighlightFill: "#fff",
			pointHighlightStroke: "rgba(220,220,220,1)",
			data: datas2
		}, ]
	}
	$('#day2Canvas').attr("width", $('#day2CanvasParent').width());
	var ctx2 = document.getElementById("day2Canvas").getContext("2d");
	if (chart2 != null) {
		chart2.destroy();
	}
	chart2 = new Chart(ctx2).Line(lineChartData2, {
		scaleLabel: "<%=value%>%"
	});
}

function searchDay() {
	var date = $("#date-text").val();
	$.post(
		getProviderUrl("level"), {
			date: date
		},
		function(data) {
			// console.log(data);
			Canvas(data.datas);
		}, 'json');
}