@(project: org.ossmeter.repository.model.Project)

@import org.ossmeter.repository.model.MetricProviderType
@import org.ossmeter.repository.model.eclipse.EclipseProject

@main("OSSMETER", true) {

	<section class="row">
		<div class="span6">
			<h1>@project.getName()</h1>
			<p>@project.getDescription()</p>
		</div>
	</section>
	<section>
		<div class="row well lplot">
			<div class="plotdescriptionbox span3">
				<h3 id="plotname"></h3>
				<p id="plotdesc"></p> <!-- This needs changing.. it should really use auto-binding. ?? -->
			</div>
			<div id="mainPlot" class="span9" data-bind="largeplot: plot">
				<img src="@routes.Assets.at("images/loading.gif")"/>
			</div>
		</div>
		<h2>Metrics</h2>
		<div class="row">
			<ul class="sparklist" data-bind="template: {name: 'spark-template', foreach: sparks, as: 'spark'}"/>
		</div>
	</section>

 	<script type="text/html" id="spark-template">
			<li data-bind="click: $parent.setMain">
		    	<div style="float:left">
		        	<span data-bind="sparkplot: $data" class="spark">
		        		<img src="@routes.Assets.at("images/loading.gif")"/>
		        	</span>
			    </div>
			    <div>
			    	<span data-bind="text: abbreviateNumber(lastValue)" class="sparkValue"></span><br/>
			    	<span data-bind="text: name" class="sparkName"></span>
		        </div>
		    </li>
		</script>

	<script src="@routes.Assets.at("javascripts/ossplots.js")"></script>
	<script type="text/javascript">
		function load() {
			ko.bindingHandlers.largeplot = {
				init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
				        // This will be called when the binding is first applied to an element
				        // Set up any initial state, event handlers, etc. here
				        $(element).html("<img src=\"@routes.Assets.at("images/loading.gif")\"/>");	
				    },
			    update: function(element, valueAccessor, allBindingsAccessor) {
			        // First get the latest data that we're bound to
			        var value = valueAccessor(), allBindings = allBindingsAccessor();
			 
			        // Next, whether or not the supplied model property is observable, get its current value
			        var valueUnwrapped = ko.unwrap(value);

			        if (valueUnwrapped.type === "loading") return;

			        $("#plotname").text(valueUnwrapped.name);
			        $("#plotdesc").text(valueUnwrapped.description);

					$(element).html(""); // Clear

			        var svg = dimple.newSvg(element, 700, 200);
				    var chart = new dimple.chart(svg, valueUnwrapped.datatable);
				    var x = chart.addCategoryAxis("x", valueUnwrapped.xtext);

				    if (valueUnwrapped.isTimeSeries) {
					    x.timeField = valueUnwrapped.xtext;
					    x.dateParseFormat = "%Y%m%d";
					    x.tickFormat = "%B %Y"
					}
				 	// x.timePeriod = d3.time.month;
					// x.timeInterval = 1;
				    x.addOrderRule(valueUnwrapped.orderRule);


				    var y = chart.addMeasureAxis("y", valueUnwrapped.ytext);
				    var ser = chart.addSeries(null, dimple.plot[valueUnwrapped.type]);
				    chart.draw();

				    // Color the axes
				    x.shapes.selectAll("path, line").style("stroke", "#A0A0A0");
				    x.shapes.selectAll("text").style("fill", "#A0A0A0");
				    y.shapes.selectAll("path, line").style("stroke", "#A0A0A0");
				    y.shapes.selectAll("text").style("fill", "#A0A0A0");
				    y.titleShape.style("fill", "#A0A0A0");
				    x.titleShape.style("fill", "#A0A0A0");
			    }
			};

			ko.bindingHandlers.sparkplot = {
				init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
				        // This will be called when the binding is first applied to an element
				        // Set up any initial state, event handlers, etc. here
				        $(element).html("<img src=\"@routes.Assets.at("images/loading.gif")\"/>");	
				    },
			    update: function(element, valueAccessor, allBindingsAccessor) {
			        // First get the latest data that we're bound to
			        var value = valueAccessor(), allBindings = allBindingsAccessor();
			 
			        // Next, whether or not the supplied model property is observable, get its current value
			        var valueUnwrapped = ko.unwrap(value);

			        if (valueUnwrapped.type === "loading") return;

			        $(element).html(""); // clear		

			        var svg = dimple.newSvg(element, 200, 30);
				    var chart = new dimple.chart(svg, valueUnwrapped.datatable);
				    var x = chart.addAxis("x", valueUnwrapped.xtext);
				    x.addOrderRule(valueUnwrapped.orderRule);

				    if (valueUnwrapped.type === "line") { // hide for line charts
					    x.hidden = true;
					} 
				    chart.addMeasureAxis("y", valueUnwrapped.ytext).hidden=true;
				    var ser = chart.addSeries(null, dimple.plot[valueUnwrapped.type]);
				    // dimple.plot.line.enterEventHandler = function(){}; // remove the interactivity (HACK - find a better way)
				    chart.draw();

				    if (valueUnwrapped.type === "bar") { // color for bars
						x.shapes.selectAll("path, line").style("stroke", "#A0A0A0");
					}
			    }
			};

			
			var ViewModel = function(plot) {
				this.plot = ko.observable(plot);
				this.sparks = ko.observableArray();
				this.addSpark = function(spark) {
					this.sparks.push(spark);
				};
				this.setMain = function(spark) {
					vm.plot(spark);
				}
			}
			var vm = new ViewModel({type:"loading"});
			ko.applyBindings(vm);

			// Initial main class
			$.get("http://localhost:8182/projects/p/@project.getShortName()/m/totalloc", function(data) {
				var metric = JSON.parse(data);
				vm.setMain(metric);
			});

			// Sparklines
			$.get("http://localhost:8182/projects/p/@project.getShortName()/m/commitsovertime", function(data) {
				var metric = JSON.parse(data);
				vm.addSpark(metric);
			});

			$.get("http://localhost:8182/projects/p/@project.getShortName()/m/dailycommits", function(data) {
				var metric = JSON.parse(data);
				vm.addSpark(metric);
			});

			$.get("http://localhost:8182/projects/p/@project.getShortName()/m/hourlycommits", function(data) {
				var metric = JSON.parse(data);
				vm.addSpark(metric);
			});

			$.get("http://localhost:8182/projects/p/@project.getShortName()/m/totalloc", function(data) {
				var metric = JSON.parse(data);
				vm.addSpark(metric);
			});

			// $.get("http://localhost:8000/projects/p/@project.getName()/m/all", function(data) {
			// 	var metrics = JSON.parse(data);

			// 	for (m in metrics) {
			// 		$.get("http://localhost:8000/projects/p/@project.getName()/m/"+metrics[m]+".dimple", function(data) {
			// 			var metric = JSON.parse(data);
			// 			vm.addSpark(metric);
			// 		});
			// 	}
			// });	
		}
		load();
	</script>


}