<?php
$angularSource="ajax.googleapis.com/ajax/libs/angularjs";
$angularVersion="1.5.0";
$this->RegisterJSFile("javascript.js");
$this->RegisterJSFile("controllers/main.js");
$this->RegisterJSFile("directives/equalHeightWidth.js");
$this->RegisterJSFile("directives/scopeInit.js");

function FormatURI(URI $uri, $base=""){
	$image=$uri->GetImage();
	$imageHTML="";
	if ($image!="")
		$imageHTML='<img src="'.$uri->GetImage().'" />';
	return '<a href="'.$base.$uri->GetLinkLocation().'">'.$imageHTML.$uri->GetText().'</a>';
}
?>
<?php
{@Init}
?>
<!DOCTYPE html>
<html ng-app="robware">
	<head>
		<title>
			{@Title}<?php
				$__crumbs=Breadcrumbs::GetAll();
				foreach ($__crumbs as $crumb)
					echo ' &gt; ',$crumb['text'];
			?> | Robware
		</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
		<link href="/css/style.css?t=<?= filemtime("css/style.css") ?>" rel="stylesheet" defer />
		<link href="/css/style-med.css?t=<?= filemtime("css/style-med.css") ?>" media="(max-width:1023px)" rel="stylesheet" defer />
		<link href="/css/style-small.css?t=<?= filemtime("css/style-small.css") ?>" media="(max-width:680px)" rel="stylesheet" defer />
		<?php foreach ($this->GetCSSFiles() as $css){
			echo '<link href="';
			if (strpos($css, "http")===false)
				echo '/css/',$css,'?t=', filemtime('css/'.$css);
			else
				echo $css;
			echo '" rel="stylesheet" defer />';
		}?>
		<style type="text/css">
			{@CSS}
		</style>
		<style media="(max-width:1023px)">
			{@CSSMed}
		</style>
		<style media="(max-width:680px)">
			{@CSSSmall}
		</style>
		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" defer></script>
		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" defer></script>
		<script type="text/javascript" src="//<?=$angularSource?>/<?=$angularVersion?>/angular.js" defer></script>
		<script type="text/javascript" src="//<?=$angularSource?>/<?=$angularVersion?>/angular-animate.min.js" defer></script>
		<?php foreach ($this->GetJSFiles() as $js){
			echo '<script type="text/javascript" src="';
			if (strpos($js, "http")===false)
				echo '/scripts/',$js,'?t=', filemtime('scripts/'.$js);
			else
				echo $js;
			echo '" defer></script>';
		}?>
		<script type="text/javascript">
			{@JavaScript}
		</script>
	</head>
	<body ng-controller="main" ng-class="{scrollLock: (menuVisible && window.innerWidth < 1024) || spinnerVisible}">
		<div id="menu" ng-show="shouldShowMenu()">
			<div class="header">
				<img src="/images/logo.png" /><h1>Robware</h1>
			</div>
			<div id="nav-container">
				<nav>
					<dl>
						<?php
						$reqUri=trim($_SERVER['REQUEST_URI'],"/");
						$uriParts=explode("/",$reqUri);
						if ($uriParts[0]=="")
							$uriParts[0]="home";

						$__controllers=Navigation::Get();
						foreach ($__controllers as $controller){
							$cURI=$controller->GetURI();
							if ($cURI==null)
								continue;

							echo '<dt';
							if ($cURI->GetLinkLocation()=='/'.$uriParts[0])
								echo ' class="active"';
							echo'>',FormatURI($cURI);
							$items=$controller->GetItems();
							if (count($items)>0)
								echo '<span class="go">&raquo;</span><span class="expand">+</span>';
							echo '</dt>';
							if (count($items)>0){
								echo '<div class="sub-pages">';
								foreach ($items as $uri)
									echo '<dd>',FormatURI($uri,$cURI->GetLinkLocation().'/'),'</dd>';
								echo '</div>';
							}
						}
						?>
					</dl>
				</nav>
			</div>
		</div>
		<div id="main">
			<div class="header">
				<img src="/images/menu.svg" id="menu-button" ng-click="menuVisible=!menuVisible" /><?php // using php tags to remove HTML space but to keep source tidy
				?><h2><?php // Shitty, I know, but eh...
					?><span>{@Title}</span><?php
					$__crumbs=Breadcrumbs::GetAll();
					foreach ($__crumbs as $crumb)
						echo '<span>',$crumb['text'],'</span>';
				?></h2>
			</div>
			<?php if (isset($errors) && count($errors)>0){
				echo '<div class="errors">The following errors were encountered:<ul>';
				foreach ($errors as $e)
					echo '<li>',$e,'</li>';
				echo '</ul>Please rectify them and try again.</div>';
			} ?>
			<div class="errors" ng-if="errors.length>0">
				The following errors were encountered:
				<ul>
					<li ng-repeat="error in errors">{{error}}</li>
				</ul>
				Please rectify them and try again.
			</div>
			<div id="content">
				<div id="body">
					{@Body}
				</div>
				<div id="footer">{@Footer}</div>
			</div>
			<div id="buttons-left">{@ButtonsLeft}</div>
			<div id="buttons-right">{@ButtonsRight}</div>
		</div>
		<div class="backdrop" ng-show="shouldShowMenu()" ng-click="menuVisible=false"></div>
		<div id="spinner" class="backdrop" ng-show="spinnerVisible">
			<img src="/images/spinner.svg" />
		</div>
	</body>
</html>