Permalink
Browse files

Merge branch 'master' of github.com:benrito/perfect-terrorist

Conflicts:
	css/style.css
  • Loading branch information...
2 parents cf0f400 + abe54a3 commit aa9693226bec0b71d757879dff2e663766e1ce07 @benrito committed Apr 7, 2012
View
@@ -79,6 +79,8 @@ body {
text-shadow: 0 1px 0 #fff;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
+ width: 900px;
+ margin: 0 auto;
}
a {
@@ -122,10 +124,11 @@ h3 {
/* @group header */
header {
- width: 200px;
+ width: 900px;
margin: 0 auto;
-webkit-transition: background-position 0.25s linear;
-moz-transition: background-position 0.25s linear;
+ margin: 2em 0;
}
#listen header {
@@ -149,10 +152,6 @@ header {
background-position: 100px 0;
}
-header h1 {
- display: none;
-}
-
.listen header h1 {
display: block;
position: absolute;
View
@@ -70,8 +70,6 @@ td { vertical-align: top; }
-
-
@media only screen and (min-width: 35em) {
@@ -106,4 +104,23 @@ td { vertical-align: top; }
z-index: -1;
width: 100%;
height: 90%;
-}
+}
+
+#content { background: #444; position: relative; }
+#content, #content > div { width: 900px; height: 500px; }
+#content > div { position: absolute; top: 0; left: 0; }
+
+header h1 {
+ font-family: 'Oswald', Helvetica, Arial, sans-serif;
+ color: white;
+ font-size: 2em;
+ line-height: 1.4;
+}
+
+header h2 {
+ font-family: 'Oswald', Helvetica, Arial, sans-serif;
+ color: white;
+ font-size: 1.4em;
+ font-weight: 300;
+}
+>>>>>>> abe54a3691044a19d2b79c4794005bf384e96cda
View
@@ -11,32 +11,38 @@
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/player_style.css">
+ <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
+ <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<script src="js/libs/modernizr-2.5.3.min.js"></script>
+ <script type="text/javascript" src="js/d3.v2.js?2.8.1"></script>
+ <script type="text/javascript" src="js/underscore-min.js"></script>
+ <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
+ <script src="js/jquery.ui.min.js"></script>
+ <script src="http://vjs.zencdn.net/c/video.js"></script>
+ <script src="js/videoplayer.js"></script>
</head>
-<body>
+<body onload="setup_timeline()">
+ <input type="range" min="0" max="20" value="0" onchange="update(this.value)"></input>
+
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<header id="header">
-
+ <h1>A Perfect Terrorist</h1>
+ <h2>The Web of David Coleman Headley</h2>
</header>
- <!--
- <div role="main">
-<p class="player">
- <span id="playtoggle" />
- <span id="gutter">
- <span id="loading" />
- <span id="handle" class="ui-slider-handle" />
- </span>
- <span id="timeleft" />
-</p>
+
+ <div id="content" role="main">
+ <div id="background"></div>
+ <div id="chart"></div>
+ <div id="foreground">
+ </div>
</div>
- -->
- <footer>
+ <footer>
</footer>
+
+ <script type="text/javascript" src="js/timeline-graph.js"></script>
+ <script>
- <script src="js/jquery.js"></script>
- <script src="js/jquery.ui.min.js"></script>
- <script>
$(function() {
initAudio();
});
@@ -65,7 +71,7 @@
</audio>\
</p>';
- $(player_code).insertAfter("#header");
+ $(player_code).appendTo("#foreground");
audio = $('.player audio').get(0);
loadingIndicator = $('.player #loading');
View
@@ -0,0 +1,7 @@
+var node_data = {
+ "": {
+
+
+
+ }
+};
View
@@ -3,6 +3,8 @@ var width = 900,
var tx = 750;
+var debug = false;
+
var colors =
{ blue: "#3399cc",
orange: "#ff9900",
@@ -70,20 +72,48 @@ var edges = [
}
]
-// fixup nodes
-nodes.forEach(function(node){
- node.strokeColor = d3.interpolateRgb(node.color, "#000")(0.1);
-});
-var indexed_nodes = _.inject(nodes, function(idxed, node){
- idxed[node.id] = node;
- return idxed;
-}, {});
+var indexed_nodes = {};
+var setup_nodes = function() {
+ // fixup nodes
+ nodes.forEach(function(node){
+ node.strokeColor = d3.interpolateRgb(node.color, "#000")(0.1);
+ });
+
+ indexed_nodes = _.inject(nodes, function(idxed, node){
+ idxed[node.id] = node;
+ return idxed;
+ }, {});
+}
+setup_nodes();
var svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height);
+var bg = svg.append("rect").attr("width", width).attr("height", height).style("opacity", 0);
+if (debug) {
+ bg.each(function(d){ $(this).click(function(e){
+ var id = prompt("Node ID", new Date().getTime());
+ if (!id) return;
+
+ var node = {
+ id: id,
+ x: e.offsetX,
+ y: e.offsetY,
+ in_time: currentTime,
+ out_time: Infinity,
+ source: 0,
+ size: 5,
+ color: colors.red
+ }
+
+ nodes.push(node);
+ setup_nodes();
+ update(currentTime);
+ })});
+}
+
var node_source = function(node) {
var src = node.source;
if (!src) return nodes[0];
@@ -94,10 +124,12 @@ var node_source = function(node) {
return source;
}
+var currentTime = 0;
var update = function(t) {
+ currentTime = t;
var current_nodes = _.filter(nodes, function(node){
- return (node.in_time <= t) && (node.out_time >= t);
+ return (node.in_time <= t) && (node.out_time > t);
});
var current_node_ids = _.pluck(current_nodes, "id");
@@ -132,6 +164,13 @@ var update = function(t) {
.attr("cx", function(d){ return node_source(d).x; })
.attr("cy", function(d){ return node_source(d).y; });
+ if (debug) {
+ node_enter.each(function(d){ $(this).click(function(e){
+ d.out_time = currentTime;
+ update(currentTime);
+ })});
+ }
+
var node_exit = node.exit().transition().duration(tx)
.attr("cx", function(d){ return node_source(d).x; })
.attr("cy", function(d){ return node_source(d).y; })
@@ -157,3 +196,16 @@ var update = function(t) {
.attr("cy", function(d) { return d.y; });
});
}
+
+var setup_timeline = function() {
+ if (debug) {
+ var export_box = $("<textarea>").attr("id", "export");
+ var export_button = $("<button>").text("Export").click(function(){
+ console.log(JSON.stringify(nodes));
+ $("#export").val(JSON.stringify(nodes));
+ }).appendTo(document.body);
+ export_box.appendTo(document.body);
+ }
+}
+
+
View
@@ -0,0 +1,48 @@
+(function( $ ){
+
+ // Simple video player plugin
+ $.fn.videoplayer = function(options) {
+
+ return this.each(function(index) {
+
+ options.id = "video-" + index;
+
+ var videotemplate = _.template('<video id="<%= id %>" class="video-js vjs-default-skin" controls width="640" height="264" <% if (poster) { %>poster="<%= poster %>"<% } %> preload="auto" data-setup="{}"><source type="video/mp4" src="<%= src %>"></video>');
+
+ $(this).html(videotemplate(options));
+
+ _V_(options.id).ready(function(){
+
+ if (options.events) {
+ _.each(options.events, function(callback, event) {
+ this.addEvent(event, callback);
+ }, this);
+ }
+
+ });
+
+ });
+
+ };
+
+})( jQuery );
+
+$(function() {
+
+ /*
+
+ EXAMPLE OF VIDEOPLAYER
+
+ $("#video").videoplayer({
+ poster: "http://video-js.zencoder.com/oceans-clip.jpg",
+ src: "http://video-js.zencoder.com/oceans-clip.mp4",
+ events: {
+ "ended": function(event) {
+ console.log(event);
+ }
+ }
+ });
+
+ */
+
+});
View
Binary file not shown.
View
Binary file not shown.

0 comments on commit aa96932

Please sign in to comment.