<style type = text/css>

	* {
		font-family: "Sans-serif";
		font-size: 14px;
	}

	.svg div{
			font: 10px;
			text-align: right;
			float: left;
			display: block;
			padding: 10px;
			margin: 10px;
			color: white;
	}

	.axis path,

	.axis line {
			fill: none;
			stroke: lightgrey;
			/*opacity: 0.7;*/
			stroke-width: 1px;
	}

	.y.axis path {
	  display: none;
	}

	.line {
			fill: none;
			stroke-width: 3px;
			opacity: 1;
	}

	.line.critical {
			stroke: red;
	}

	.line.critical.legend {
			fill: red;
	}

	.line.urgent {
			stroke: orange;
	}

	.line.urgent.legend {
			fill: orange;
	}

	.line.bug {
			stroke: violet;
	}

	.line.bug.legend {
			fill: violet;
	}

	.line.feature {
			stroke: chartreuse;
			style: stroke-dasharray;
	}

	.line.feature.legend {
			fill: chartreuse;
	}

	.line.wish {
			stroke: blue;
	}

	.line.wish.legend {
			fill: blue;
	}

	.grid .tick {
			stroke: lightgrey;
			/*opacity: 0.7;*/
	}

	.grid path {
			stroke-width: 0;
	}

</style>

<!-- <div id="content" style="display: inline-block"></div> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script type="text/javascript">

	// window.onresize = function(){
	// 	document.getElementsByClassName("chart")[0].innerHTML = "";
	// 	makeChart();
	// };

	var d3jsInjectionTarget="X";

	var critical=[];
	var urgent=[];
	var bug=[];
	var feature=[];
	var wish=[];
	var timestamp=[];

	// var critical=[
	// 		{points: 4},
	// 		{points: 12},
	// 		{points: 8},
	// 		{points: 2}
	// 	]
	//
	// var urgent=[
	// 		{points: 3},
	// 		{points: 24},
	// 		{points: 17},
	// 		{points: 19}
	// 	]
	//
	// var bug=[
	// 		{points: 10},
	// 		{points: 2},
	// 		{points: 2},
	// 		{points: 12}
	// 	]
	//
	// var feature=[
	// 		{points: 4},
	// 		{points: 21},
	// 		{points: 12},
	// 		{points: 4}
	// 	]
	//
	// var wish=[
	// 		{points: 22},
	// 		{points: 18},
	// 		{points: 32},
	// 		{points: 10}
	// 	]
	//
	//
	// var timestamp=[
	// 		{date : new Date('2015-06-30T12:36:47')},
	// 		{date : new Date('2015-07-01T12:37:26')},
	// 		{date : new Date('2015-07-02T12:38:26')},
	// 		{date : new Date('2015-07-03T12:39:26')}
	// 	]

	document.addEventListener("DOMContentLoaded", function(event) {
		makeChart();
	});

	function assignIssueToDate(issueArray, dateArray){
		a = [];
		for (var i = 0; i < issueArray.length; i++) {
			a.push({points: issueArray[i].points, date : dateArray[i].date});
		}

		return a;
	}

	function limitDatesOnXAxis(limit){
		if (timestamp.length < limit){
			return timestamp.length;
		} else {
			return limit;
		}
	}

	function maxInObject( array ){
		var maxVal = 0;
		for (var i = 0; i < array.length; i++) {
			if (maxVal < array[i].points){
				maxVal = array[i].points;
			}
		}
		return maxVal;
	}


	function getMaxIssues(){
		maxIssuesOfAllArrays = [];
		maxIssuesOfAllArrays.push(maxInObject(critical));
		maxIssuesOfAllArrays.push(maxInObject(urgent));
		maxIssuesOfAllArrays.push(maxInObject(bug));
		maxIssuesOfAllArrays.push(maxInObject(feature));
		maxIssuesOfAllArrays.push(maxInObject(wish));

		return Math.max.apply(Math, maxIssuesOfAllArrays)+1;
	}


	function dayDifference(first, second) {
		"use strict";
		var difference = (second - first) / (1000 * 60 * 60 * 24);

		// just to avoid the get thousands of lines... would look ugly.
		if (difference > 60){
			difference = 60;
		}

		return difference;
	}


	// function for the grid lines
	function makeGrid(direction, orientation, ticknumber) {
		return d3.svg.axis()
			.scale(direction)
			.orient(orientation)
			.ticks( ticknumber );
	}


	//append a svg_path. pretty generic
	function draw_line(svg, data_array, css_class, line_object, lineShape){
		svg.append("path")
			.datum(assignIssueToDate(data_array, timestamp))
			.attr("class", css_class)
			.style("stroke-dasharray", (lineShape))
			.attr("d", line_object);
	}


	function makeLegend(svg, width){

		var legend_distance = width+40;
		var top_distance = 20;
		var distance_steps = 50;


		function set_propper_distance(steps){
			top_distance += steps;
			return top_distance;
		}

		function draw_legend_line(svg, width, Ypos, text, issues){
			svg.append("svg:text")
				.attr("class", "legend")
				.attr("x", width-30	)
				.attr("y", Ypos)
				.text(text + ":");

			svg.append("svg:text")
				.attr("class", "legend")
				.attr("x", width+35	)
				.attr("y", Ypos)
				.text(issues);

			svg.append("rect")
				.attr("class", "line " + text.toLowerCase() + " legend")
				.attr("x", width-30)
				.attr("y", Ypos-20)
				.attr("width", 100)
				.attr("height", 2);
		}

		draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Critical", critical[critical.length-1].points);
		draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Urgent", urgent[urgent.length-1].points);
		draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Bug", bug[bug.length-1].points);
		draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Feature", feature[feature.length-1].points);
		draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Wish", wish[wish.length-1].points);
	}



	//draw the chart
	function makeChart(div_name){

		//declaration
		var sizeOfSystemBorders = 20;
		// var margin = {top: 20, right: 100, bottom: 90, left: 60};
		// var margin = {top: 0, right: 0, bottom: 0, left: 0}

		var width = document.getElementsByClassName("chart")[0].clientWidth;
		var height = document.getElementsByClassName("chart")[0].clientHeight;
		// var	width = (document.documentElement.clientWidth-sizeOfSystemBorders) - margin.left - margin.right;
		// var	height = (document.documentElement.clientHeight-sizeOfSystemBorders) - margin.top - margin.bottom;

		var x = d3.time.scale()
			.range([0, width]);

		var y = d3.scale.linear()
			.range([height, 0]);

		var base_line = d3.svg.line()
			.x(function(d) { return x(d.date); })
			.y(function(d) { return y(d.points); });

		//lines
		var criticalLine = base_line;
		var urgentLine = base_line;
		var bugLine = base_line;
		var featureLine = base_line;
		var wishLine = base_line;
		var timestampLine = base_line;


		//set domain of y axis
		var yDomain = [	];
		yDomain[0] = 0;
		yDomain[1] = getMaxIssues();
		y.domain(d3.extent(yDomain, function(d){return d; }));

		//set domain of y axis
		x.domain(d3.extent(timestamp, function(d){return d.date; }));


		var xAxis = d3.svg.axis()
			.scale(x)
			.orient("bottom")
			.ticks(limitDatesOnXAxis(10))
			.tickFormat(d3.time.format("%d.%m"));
			// .tickFormat(d3.time.format("%d.%m:%H:%M"));
			// .tickFormat(d3.time.format("%X"));
			// .tickFormat(d3.time.format.iso);


		var yAxis = d3.svg.axis()
			.scale(y)
			.orient("left");


		var svg = d3.select("." + d3jsInjectionTarget)
			.append("svg")
			.attr("class", "svg")
			// .attr("width", width)
			// .attr("height", height)
			.attr("width", width-20)
			.attr("height", height-10)
			.append("g")
			// .attr("transform", "translate( +50,+0,+0,+0)");
			.attr("transform", "translate(40 , 0)");


		// creation


		// Draw the x Grid lines
		// svg.append("g")
		// 	.attr("class", "grid")
		// 	.attr("transform", "translate(0," + height + ")")
		// 	.call(makeGrid(x, "bottom", timestamp.length)
		// 		.tickSize(-height, 0, 0)
		// 		.tickFormat("")
		// 	);


		// Draw the y Grid lines
		svg.append("g")
			.attr("class", "grid")
			.call(makeGrid(y, "left", function(){return Math.min(getMaxIssues(), 10);}())
				.tickSize(-width, 0, 0)
				.tickFormat("")
			);


		// Draw the x-axis
		svg.append("g")
			.attr("class", "x axis")
			// .attr("transform", "translate(0, " + 20-height + ")")
			.call(xAxis)
			.selectAll("text")
			.style("text-anchor", "end")
			// .attr("dx", "-.5em")
			// .attr("dy", ".1em")
			// .attr("transform", function() {
			// 	return "rotate(-30)";
			// });


		// Draw the y-axis
		svg.append("g")
			.attr("class", "y axis")
			.call(yAxis)
			.append("text")
			.attr("transform", "rotate(-90)")
			.attr("y", 6)
			.attr("dy", ".71em")
			.style("text-anchor", "end");


		// Text for y-axis
		// svg.append("text")
		// 	.attr("transform", "rotate(-90)")
		// 	.attr("y", 10 - margin.left)
		// 	.attr("x", 0 - (height / 2))
		// 	.attr("dy", "1em")
		// 	.style("text-anchor", "middle")
		// 	.text("Issues");


		//Titel und Legende
		// svg.append("svg:text")
		// 	.attr("class", "text")
		// 	.attr("x", 10)
		// 	.attr("y", -5)
		// 	.text("Issues Nach Zeit");

		draw_line(svg, wish, "line wish", wishLine, "0, 0");
		draw_line(svg, feature, "line feature", featureLine, "3, 3");
		draw_line(svg, bug, "line bug", bugLine, "7, 7");
		draw_line(svg, urgent, "line urgent", urgentLine, "13, 13");
		draw_line(svg, critical, "line critical", criticalLine, "17, 17");


		// makeLegend(svg, width);
	}


</script>