<?php
      if(!isset($page))
      {
        $page = 1;
      }
      require("php/connect.php");

      function active ($num)
      {
        global $page;
        if ($num == $page) {  echo('class="active"'); } 
      }

      function activepage ($num)
      {
         global $page;
         if ($num == $page) {  return true; }
         else { return false; } 
      }

      $title = " | Color Strike";

      if($page == 1)
      {
        $title = "Dashboard" . $title;
      }
      else if($page == 2)
      {
        $title = "Games" . $title;
      }
      else if($page == 3)
      {
        $title = "Highscores" . $title;
      }
      else if($page == 4)
      {
        $title = "Songs" . $title;
      }
?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><?php echo $title; ?></title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>



    <!-- REQUIRED CSS STYLESHEETS -->

    <!-- Bootstrap 3.3.4 -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- Colorstrike Skins. -->
    <link href="dist/css/skins/skin-red.min.css" rel="stylesheet" type="text/css" />

    <?php
         /**
          * Page Specific CSS
          */

         if(activepage(1))
         { ?>
            <!-- Morris Charts -->
          <link href="plugins/morris/morris.css" rel="stylesheet" type="text/css" />
         <?php } else if(activepage(2) || activepage(3) || activepage(4)){ ?>
          <!-- DATA TABLES -->
          <link href="plugins/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
          <link href="plugins/morris/morris.css" rel="stylesheet" type="text/css" />
         <?php }     
         
    ?>

    <!-- REQUIRED JS SCRIPTS -->

    <!-- jQuery 2.1.4 -->
    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- ColorStrike App -->
    <script src="dist/js/app.min.js" type="text/javascript"></script>



    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

  </head>


  
  <body class="skin-red sidebar-mini">
    <div class="wrapper">

      <!-- Main Header -->
      <header class="main-header">

        <!-- Logo -->
        <a href="<?php url('') ?>" class="logo">
          <!-- mini logo for sidebar mini 50x50 pixels -->
          <span class="logo-mini"><b>CL</b>S</span>
          <!-- logo for regular state and mobile devices -->
          <span class="logo-lg"><b>Color</b>Strike</span>
        </a>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
          </a>
        </nav>
      </header>
      <!-- Left side column. contains the logo and sidebar -->
      <aside class="main-sidebar">

        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">

          <!-- Sidebar Menu -->
          <ul class="sidebar-menu">
            <li class="header">MENU</li>
            <!-- Optionally, you can add icons to the links -->

            <li <?php active(1); ?>><a href="<?php url('') ?>"><i class='fa fa-dashboard'></i> <span>Dashboard</span></a></li>

            <li <?php active(2); ?>><a href="<?php url('games.php') ?>"><i class='fa fa-gamepad'></i> <span>Games</span></a></li>

            <li <?php active(3); ?>><a href="<?php url('scores.php') ?>"><i class='ion ion-ribbon-a'></i> <span>Highscores</span></a></li>

            <li <?php active(4); ?>><a href="<?php url('songs.php') ?>"><i class='ion ion-music-note'></i> <span>Songs</span></a></li>

          </ul><!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
      </aside>