<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../core-scaffold/core-scaffold.html">
<link rel="import" href="../../core-menu/core-menu.html">
<link rel="import" href="../../core-menu/core-submenu.html">
<link rel="import" href="../../core-item/core-item.html">

<polymer-element name="project-docs" extends="body" attributes="raw">
<style shim-shadowdom>
	#drawer core-toolbar {
		background-color: #CFD8DC;
		color: black;
	}
	table.docs {
		border-collapse: collapse;
		background-color: white;
	}
	table.docs td, 
	table.docs th {
		padding: 6px 13px;
		border: 1px solid #DDD;
	}
	table.docs code {
		padding: 0.2em 0px;
		margin: 0px;
		font-size: 85%;
		background-color: rgba(0, 0, 0, 0.04);
		border-radius: 3px;
		font: 12px Consolas,"Liberation Mono",Menlo,Courier,monospace;
	}
</style>
<template>
	<core-scaffold>
		<core-header-panel navigation flex mode="seamed">
			<core-toolbar><div style="width:100%;padding-right:20px;text-align:center;"><strong>&lt;sortable-table&gt;</strong><br>Documentation</div></core-toolbar>
			<core-menu on-core-select="{{changePage}}" id="docmenu">
				<core-item on-click="{{redirect}}" link="index.html" label="Getting Started" icon="help"></core-item>
				<core-submenu on-click="{{redirect}}" on-tap="{{submenuclick}}" label="Features" icon="grade">
					<core-item on-click="{{redirect}}" link="features.html" label="Index"></core-item>
					<core-item on-click="{{redirect}}" link="row-editor.html" label="Row Editor"></core-item>
					<core-item on-click="{{redirect}}" link="row-filters.html" label="Row Filters"></core-item>
					<core-item on-click="{{redirect}}" link="args.html" label="Additional Arguments"></core-item>
					<core-item on-click="{{redirect}}" link="selected-rows.html" label="Selected Rows"></core-item>
					<core-item on-click="{{redirect}}" link="paging.html" label="Paging, Top N Rows"></core-item>
				</core-submenu>
				<core-submenu on-click="{{redirect}}" on-tap="{{submenuclick}}" label="Themes" icon="view-list">
					<core-item on-click="{{redirect}}" link="themes/index.html" label="Basic Setup"></core-item>
					<core-item on-click="{{redirect}}" link="themes/bootstrap.html" label="Bootstrap"></core-item>
					<core-item on-click="{{redirect}}" link="themes/extjs4.html" label="ExtJS 4"></core-item>
				</core-submenu>
				<core-submenu on-click="{{redirect}}" on-tap="{{submenuclick}}" label="Alt. Themes" icon="view-module">
					<core-item on-click="{{redirect}}" link="themes/alt.html" label="Basic Setup"></core-item>
					<core-item on-click="{{redirect}}" link="themes/article.html" label="Article"></core-item>
				</core-submenu>
				<core-submenu on-click="{{redirect}}" on-tap="{{submenuclick}}" label="Templates" icon="text-format">
					<core-item on-click="{{redirect}}" link="templates.html" label="Variables"></core-item>
					<core-item on-click="{{redirect}}" link="css.html" label="CSS"></core-item>
					<core-item on-click="{{redirect}}" link="table-templates.html" label="Header, Footer Templates"></core-item>
					<core-item on-click="{{redirect}}" link="row-templates.html" label="Row Templates"></core-item>
					<core-item on-click="{{redirect}}" link="dom-elements.html" label="DOM Elements"></core-item>
					<core-item on-click="{{redirect}}" link="dynamic-columns.html" label="Dynamic Columns"></core-item>
				</core-submenu>
				<core-submenu on-click="{{redirect}}" on-tap="{{submenuclick}}" label="Data" icon="reorder">
					<core-item on-click="{{redirect}}" link="data-formats.html" label="Input Formats"></core-item>
					<core-item on-click="{{redirect}}" link="polymer-filters.html" label="Filters, Formatting"></core-item>
					<core-item on-click="{{redirect}}" link="autogenerated-columns.html" label="Auto Columns"></core-item>
					<core-item on-click="{{redirect}}" link="refreshing-data.html" label="Refreshing Data"></core-item>
					<core-item on-click="{{redirect}}" link="large-dataset.html" label="Larger Datasets"></core-item>
					<core-item on-click="{{redirect}}" link="nested-tables.html" label="Nesting Tables in Cells"></core-item>
				</core-submenu>
				<core-submenu on-click="{{redirect}}" on-tap="{{submenuclick}}" label="Server-Side" icon="cloud-circle">
					<core-item on-click="{{redirect}}" link="serverside/index.html" label="API Support"></core-item>
					<core-item on-click="{{redirect}}" link="serverside/datatables-ajax.html" label="DataTables.net AJAX"></core-item>
					<core-item on-click="{{redirect}}" link="serverside/extjs-ajax.html" label="ExtJS REST AJAX"></core-item>
					<core-item on-click="{{redirect}}" link="serverside/flickr-jsonp.html" label="JSONP"></core-item>
					<core-item on-click="{{redirect}}" link="serverside/indexeddb-ajax.html" label="IndexedDB"></core-item>
				</core-submenu>
				<!--
				<core-submenu on-tap="{{submenuclick}}" label="Demos" icon="launch">
				</core-submenu>
				-->
			</core-menu>
		</core-header-panel>

		<template if="{{raw}}">
			<style>
				#outerContainer core-toolbar { display: none; }
			</style>
		</template>
		<template if="{{!raw}}">
			<div tool flex><content select="h1"></content></div>
			<div tool style="float:right">
				<a href="https://github.com/stevenrskelton/sortable-table" title="View on GitHub" target="_blank">
					<img src="GitHub-Mark-64px.png" alt="GitHub" height="50">
				</a>
			</div>
		</template>

		<div class="content" style="{{!raw ? 'margin:15px;' : ''}}"><content></content></div>

	</core-scaffold>
</template>
<script>
	Polymer({
		redirect: function(e,i,obj){
			var link = obj.getAttribute('link');
			if(link !== null){
				var href = document.location.href;
				href = href.substring(0, href.lastIndexOf('/examples/') + 10) + link;
				if(href !== document.location.href) document.location.href= href;
			} else obj.toggle();
		},
		raw: false,
		init: false,
		changePage: function(e,obj){
			var link = obj.item.getAttribute('link');
			if(this.init && obj.isSelected && link){
				var href = document.location.href;
				href = href.substring(0, href.lastIndexOf('/examples/') + 10) + link;
				if(href !== document.location.href) document.location.href= href;
			}
		},
		submenuclick: function(e, obj){
			var href = this.getHref();
			if(!e.currentTarget.opened){
				var f = this.trySelectItem(href);
				[].forEach.call(e.currentTarget.children, f);
			}
			if([].every.call(this.$.docmenu.querySelectorAll('*'), function(element){ return !element.opened; })){
				var p = e.currentTarget.parentElement;
				p.selected = null;
				/*
				for(var i=0;i<p.children.length;i++){
					if(![].every.call(p.children[i].children, function(e2){ return e2.getAttribute('link') !== href; })){
						for(var j=0;j<p.children[i].children.length;j++){
							if(p.children[i].children[j].getAttribute('link')===href){
								p.children[i].selected = j;
								p.children[i].active = true;
							}
						}
						//p.children[i].active = true;
						//p.selected = i;
					}else{
						//p.children[i].unselectAllItems();
						p.children[i].active = false;
					}
				}*/
			}
		},
		ready: function(){
			var href = this.getHref();
			var f = this.trySelectItem(href);
			[].forEach.call(this.$.docmenu.querySelectorAll('*'), f);
			var self = this;
			this.async(function(){ self.init = true; });
		},
		getHref: function(){
			var href = document.location.href;
			href = href.substring(href.lastIndexOf('/examples/') + 10);
			if(href.length==0) href = 'index.html';
			return href;
		},
		trySelectItem: function(href){
			return function(element) {
				if(element.getAttribute('link') === href){
					while(element.nodeName === 'CORE-ITEM' || element.nodeName === 'CORE-SUBMENU'){
						var p = element.parentElement;
						for(var i=0;i<p.children.length;i++){
							if(p.children[i]===element) p.selected = i;
						}
						if(!p.opened) p.opened = true;
						element = p;
					}
				}
			}
		}
	});
</script>
</polymer-element>