<!DOCTYPE html>
<html>
<head>
	<title>Sortable Table using Polymer Web Components</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script src="../../webcomponentsjs/webcomponents.min.js"></script>
	<link rel="import" href="../sortable-table.html">
	<link rel="import" href="project-docs.html">
	<style>
		sortable-table { width: 800px; }
	</style>
</head>
<body unresolved is="project-docs">

	<h1>Interactive Row Selection</h1>

	Rows should be selectable through HTML attributes as well as by user interaction.<br>
	Row selection styles should be able to be dynamically set.<br>
	Toggling <code>rowSelection</code> and <code>multiSelect</code> should have predicatable behaviour on <code>selected</code>.<br>
	Select All checkbox should only be visible for <code>multiSelect</code>.<br>

	<p>

	<template id="example" bind>
		<sortable-table
			class="default"
			data="{{data}}"
			selected="{{selected}}"
			rowSelection="{{rowSelection}}"
			multiSelect="{{multiSelect}}"
			checkbox="{{checkbox}}"
		></sortable-table>
		<p>
		<strong>Enabled Interactions:</strong><br>
		<input type="checkbox" checked="{{rowSelection}}">rowSelection<br>
		<input type="checkbox" checked="{{multiSelect}}">multiSelect<br>
		<input type="checkbox" checked="{{checkbox}}">checkbox<br>
	</template>

	<p/>

	<strong>Selected</strong>
	<template id="selectedRow" bind>
		<table>
			<template bind="{{selected}}" if="{{selected.fruit}}">
				<tr>
					<td>{ id: {{id}}, </td>
					<td>fruit: {{fruit}}, </td>
					<td>alice: {{alice}}, </td>
					<td>bill: {{bill}}, </td>
					<td>casey: {{casey}} }</td>
				</tr>
			</template>
			<template repeat="{{selected}}">
				<tr>
					<td>{ id: {{id}}, </td>
					<td>fruit: {{fruit}}, </td>
					<td>alice: {{alice}}, </td>
					<td>bill: {{bill}}, </td>
					<td>casey: {{casey}} }</td>
				</tr>
			</template>
		</table>
	</template>

	<p>

	Fruit: <input type="text" id="selectedFruit" onfocus="this.select();" value="pear"><input type="button" value="select by id or name" onclick="selectFruit();">

	<p>

	<h2>Non-Interactive Selection</h2>

	<template id="example2" bind>
		<sortable-table class="default" data="{{data}}" selected="{{selected}}"></sortable-table>
	</template>

	<script>

	var data = [
		{id: 0, fruit: 'apple', alice: 4, bill: 10, casey: 2 },
		{id: 1, fruit: 'banana', alice: 0, bill: 4, casey: 0 },
		{id: 2, fruit: 'grape', alice: 2, bill: 3, casey: 5 },
		{id: 3, fruit: 'pear', alice: 4, bill: 2, casey: 8 },
		{id: 4, fruit: 'strawberry', alice: 0, bill: 14, casey: 0 }
	];

	var model = {
		data: data,
		selected: data[1],
		rowSelection: true,
		multiSelect: false,
		checkbox: true
	};

	window.addEventListener('polymer-ready', function(){
		document.getElementById('example').model = model;
		document.getElementById('example2').model = model;
		document.getElementById('selectedRow').model = model;
	});

	function selectFruit(){
		var selected = null;
		var selectedFruit = document.getElementById('selectedFruit').value;
		if(selectedFruit){
			for(var i=0;i<data.length;i++){
				if(data[i].fruit==selectedFruit || data[i].id==selectedFruit){
					selected = data[i];
					break;
				}
			}
		}
		if(model.rowMultiSelection){
			if(selected) model.selected = [selected];
			else model.selected = [];
		}
		else model.selected = selected;
	}
	</script>
</body>
</html>