mattdees/gist:7671524

## gistfile1.txt

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Off Canvas Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/offcanvas.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div><!-- /.navbar -->

    <div class="container">

      <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-12 col-sm-12">
          <p class="pull-right visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
          </p>
          <div class="jumbotron" id="player">
          	<h1>Viddit!</h1>
          	<p>Please browse subreddit below to select a video to play</p>
          </div>
          <div class="row" id="playboxes">
          </div><!--/row-->
        </div><!--/span-->
      </div><!--/row-->

      <hr>

      <footer>
        <p>&copy; Company 2013</p>
      </footer>

    </div><!--/.container-->

    <!--Templates-->

	<script id="playbox-template" type="text/x-handlebars-template">
		<div class="col-4 col-sm-4 col-lg-3">
        <h1>/r/{{subreddit}}</h1>
        <a onclick="play_playlist('{{subreddit}}','{{playlist_all_id}}');"><div class="glyphicon glyphicon-play playbutton"></div></a>
		<div class="btn-group playbutton-dropdown">
		  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>
		  </button>
		  <ul class="dropdown-menu" role="menu">
		    <li><a href="#">All Time</a></li>
		    <li><a href="#">Month</a></li>
		    <li><a href="#">Week</a></li>
		    <li><a href="#">Day</a></li>
		  </ul>
		</div>
		</div>
	</script>

	<script id="player-template" type="text/x-handlebars-template">
	    <h1>r/{{subreddit}}</h1>
	    <p><iframe width="560" height="315" src="//www.youtube.com/embed/videoseries?list={{playlist_id}}&autoplay=1" frameborder="0" allowfullscreen></iframe></p>
	</script>

  	<script src="js/handlebars-v1.1.2.js"></script>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/offcanvas.js"></script>
  </body>
</html>

## gistfile2.txt
/*
 * Style tweaks
 * --------------------------------------------------
 */
html {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
  padding-top: 70px;
}
footer {
  padding: 30px 0;
}

/*
 * reddit play
 *
 *
 */
.sr-listing {
  text-align: center;
}

.playbutton {
  font-size: 9em;
  padding-bottom: 5px;
  text-align: center;
}
.playbutton-dropdown {
  text-align: right;
}

/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -50%; /* 6 columns */
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -50%; /* 6 columns */
  }

  .row-offcanvas-right.active {
    right: 50%; /* 6 columns */
  }

  .row-offcanvas-left.active {
    left: 50%; /* 6 columns */
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%; /* 6 columns */
  }
}

## gistfile3.txt


$(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });

	var add_subreddit = function(subreddit, id) {
		var source   = $("#playbox-template").html();
		var template = Handlebars.compile(source);
		var context = {'subreddit': subreddit, 'playlist_all_id':id}
		var playbox    = template(context);

		$('#playboxes').append(playbox);
	}

	add_subreddit('videos', 'PLA8E14DFD04E15E50');
    add_subreddit('swinghouse', 'PL28C146A72A3770E6');
    add_subreddit('listentothis', 'PLA13966C8B42458D9');
    add_subreddit('ska', 'PLE3699C886997CBB7');

});

	var play_playlist = function( subreddit, id ) {
		var source   = $("#player-template").html();
		var template = Handlebars.compile(source);
		var context = {'subreddit': subreddit, 'playlist_id':id}
		var player    = template(context);

		$( '#player' ).html( player );
	}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>Off Canvas Template for Bootstrap</title>

	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">

	<!-- Custom styles for this template -->
	<link href="css/offcanvas.css" rel="stylesheet">

	<!-- Just for debugging purposes. Don't actually copy this line! -->
	<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
	</head>

	<body>
	<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
	<div class="container">
	<div class="collapse navbar-collapse">
	<ul class="nav navbar-nav">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#contact">Contact</a></li>
	</ul>
	</div><!-- /.nav-collapse -->
	</div><!-- /.container -->
	</div><!-- /.navbar -->

	<div class="container">

	<div class="row row-offcanvas row-offcanvas-right">

	<div class="col-xs-12 col-sm-12">
	<p class="pull-right visible-xs">
	<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
	</p>
	<div class="jumbotron" id="player">
	<h1>Viddit!</h1>
	<p>Please browse subreddit below to select a video to play</p>
	</div>
	<div class="row" id="playboxes">
	</div><!--/row-->
	</div><!--/span-->
	</div><!--/row-->

	<hr>

	<footer>
	<p>© Company 2013</p>
	</footer>

	</div><!--/.container-->

	<!--Templates-->

	<script id="playbox-template" type="text/x-handlebars-template">
	<div class="col-4 col-sm-4 col-lg-3">
	<h1>/r/{{subreddit}}</h1>
	<a onclick="play_playlist('{{subreddit}}','{{playlist_all_id}}');"><div class="glyphicon glyphicon-play playbutton"></div></a>
	<div class="btn-group playbutton-dropdown">
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
	<li><a href="#">All Time</a></li>
	<li><a href="#">Month</a></li>
	<li><a href="#">Week</a></li>
	<li><a href="#">Day</a></li>
	</ul>
	</div>
	</div>
	</script>

	<script id="player-template" type="text/x-handlebars-template">
	<h1>r/{{subreddit}}</h1>
	<p><iframe width="560" height="315" src="//www.youtube.com/embed/videoseries?list={{playlist_id}}&autoplay=1" frameborder="0" allowfullscreen></iframe></p>
	</script>

	<script src="js/handlebars-v1.1.2.js"></script>

	<!-- Bootstrap core JavaScript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/offcanvas.js"></script>
	</body>
	</html>
	/*
	* Style tweaks
	* --------------------------------------------------
	*/
	html {
	overflow-x: hidden; /* Prevent scroll on narrow devices */
	}
	body {
	padding-top: 70px;
	}
	footer {
	padding: 30px 0;
	}

	/*
	* reddit play
	*
	*
	*/
	.sr-listing {
	text-align: center;
	}

	.playbutton {
	font-size: 9em;
	padding-bottom: 5px;
	text-align: center;
	}
	.playbutton-dropdown {
	text-align: right;
	}

	/*
	* Off Canvas
	* --------------------------------------------------
	*/
	@media screen and (max-width: 767px) {
	.row-offcanvas {
	position: relative;
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
	}

	.row-offcanvas-right
	.sidebar-offcanvas {
	right: -50%; /* 6 columns */
	}

	.row-offcanvas-left
	.sidebar-offcanvas {
	left: -50%; /* 6 columns */
	}

	.row-offcanvas-right.active {
	right: 50%; /* 6 columns */
	}

	.row-offcanvas-left.active {
	left: 50%; /* 6 columns */
	}

	.sidebar-offcanvas {
	position: absolute;
	top: 0;
	width: 50%; /* 6 columns */
	}
	}


	$(document).ready(function() {
	$('[data-toggle=offcanvas]').click(function() {
	$('.row-offcanvas').toggleClass('active');
	});

	var add_subreddit = function(subreddit, id) {
	var source = $("#playbox-template").html();
	var template = Handlebars.compile(source);
	var context = {'subreddit': subreddit, 'playlist_all_id':id}
	var playbox = template(context);

	$('#playboxes').append(playbox);
	}

	add_subreddit('videos', 'PLA8E14DFD04E15E50');
	add_subreddit('swinghouse', 'PL28C146A72A3770E6');
	add_subreddit('listentothis', 'PLA13966C8B42458D9');
	add_subreddit('ska', 'PLE3699C886997CBB7');

	});

	var play_playlist = function( subreddit, id ) {
	var source = $("#player-template").html();
	var template = Handlebars.compile(source);
	var context = {'subreddit': subreddit, 'playlist_id':id}
	var player = template(context);

	$( '#player' ).html( player );
	}