= video_aspect_ratio){
+ // Center Horizontally
+ modified_height = size.height;
+ modified_width = video_aspect_ratio * modified_height;
+ this.frame.style.top = "0px";
+ this.frame.style.left = ""+Math.floor((size.width-modified_width)/2)+"px";
+ } else{
+ // Center Vertically
+ modified_width = size.width;
+ modified_height = modified_width / video_aspect_ratio;
+ this.frame.style.top = ""+Math.floor((size.height-modified_height)/2)+"px";
+ this.frame.style.left = "0px";
+ }
+ this.frame.style.width = modified_width +"px";
+ this.frame.style.height = modified_height+"px";
+ document.body.style.fontSize = Math.round(modified_height/20)+"px";
+ this.left.style.fontSize = Math.round(modified_height/16)+"px";
+ document.getElementById("walkthrough_link").style.fontSize = Math.round(modified_height/13)+"px";
+ document.getElementById("credits_link").style.fontSize = Math.round(modified_height/13)+"px";
+ document.getElementById("demo_link").style.fontSize = Math.round(modified_height/13)+"px";
+ this.middle.style.top = "0px";
+ this.left.style.top = "0px";
+ this.right.style.top = "0px";
+ this.slider.style.top = "0px";
+ this.middle.style.left = ( modified_width )+"px";
+ this.left.style.left = "0px";
+ this.right.style.left = ( modified_width*2)+"px";
+ switch(this.slider_state){
+ case "middle":{
+ this.slider.style.left = "-100%";
+ break;
+ }
+ case "left":{
+ this.slider.style.left = "0%";
+ break;
+ }
+ case "right":{
+ this.slider.style.left = "-200%"
+ break;
+ }
+ }
+ this.middle.style.width = modified_width+"px";
+ this.left.style.width = modified_width+"px";
+ this.right.style.width = modified_width+"px";
+ this.slider.style.width = (modified_width*3)+"px";
+ this.middle.style.height = modified_height+"px";
+ this.left.style.height = modified_height+"px";
+ this.right.style.height = modified_height+"px";
+ this.slider.style.height = modified_height+"px";
+ },
+ transition: function (direction, force){
+ this.slider.style.transition = "left 1s";
+ this.slider.style.MozTransition = "left 1s";
+ this.slider.style.WebkitTransition = "left 1s";
+ this.slider.style.OTransition = "left 1s";
+ switch(direction){
+ case "left":{
+ if(this.arrow_left.style.opacity != "1" && !force){
+ return;
+ }
+ switch(this.slider_state){
+ case "middle":{
+ this.slider_state = "left";
+ break;
+ }
+ case "right":{
+ this.slider_state = "middle";
+ break;
+ }
+ }
+ break;
+ }
+ case "right":{
+ if((this.arrow_right.style.opacity != "1" && !force)){
+ return;
+ }
+ switch(this.slider_state){
+ case "middle":{
+ this.slider_state = "right";
+ break;
+ }
+ case "left":{
+ this.slider_state = "middle";
+ break;
+ }
+ }
+ break;
+ }
+ }
+ switch(this.slider_state){
+ case "left":{
+ ignite.link_node_manager.clear_nodes();
+ this.slider.style.left = "0%";
+ this.arrow_left.style.opacity = "0";
+ this.arrow_right.style.opacity = "1";
+ this.popcorn.pause()
+ break;
+ }
+ case "middle":{
+ this.slider.style.left = "-100%";
+ this.arrow_left.style.opacity = "1";
+ this.arrow_right.style.opacity = "0";
+ if(!this.walkthrough_in_progress){
+ ignite.link_node_manager.setup_at(ignite.popcorn.currentTime());
+ if(ignite.popcorn.currentTime() != ignite.popcorn.duration()){
+ // Don't play if returning to video from credits or resources after video has ended.
+ this.popcorn.play();
+ }
+ }
+ break;
+ }
+ case "right":{
+ ignite.link_node_manager.clear_nodes();
+ this.slider.style.left = "-200%";
+ this.arrow_right.style.opacity = "0";
+ this.popcorn.pause()
+ break;
+ }
+ }
+ },
+ link_node_manager: {
+ current_nodes: new Array(),
+ add_node: function (node, custom){
+ ignite.middle.appendChild(node);
+ if(custom){
+ this.custom_node = node;
+ node.style.top = custom.top;
+ node.style.left = custom.left;
+ node.style.transition = "opacity 1s";
+ node.style.MozTransition = "opacity 1s";
+ node.style.WebkitTransition = "opacity 1s";
+ node.style.OTransition = "opacity 1s";
+ } else{
+ var position;
+ for(var I = 0; I < this.current_nodes.length; I++){
+ if(!this.current_nodes[I]){
+ position = I;
+ break;
+ }
+ }
+ if(position === undefined){
+ position = Math.min(this.current_nodes.length, 4)
+ }
+ if(this.current_nodes.length > position && this.current_nodes[position]){
+ this.bump_node(this.current_nodes[position]);
+ }
+ this.current_nodes[position] = node;
+ var percent = 30 + position*8
+ node.style.top = percent+"%";
+ node.style.left = "7%";
+ node.style.transition = "opacity 1s, left 2s, top 1s";
+ node.style.MozTransition = "opacity 1s, left 2s, top 1s";
+ node.style.WebkitTransition = "opacity 1s, left 2s, top 1s";
+ node.style.OTransition = "opacity 1s, left 2s, top 1s";
+ }
+ /* The following statement must be delayed from the other settings
+ * to ensure that the transition happens.
+ */
+ setInterval(function (){node.style.opacity = "1";}, 100);
+ },
+ bump_node: function (node){
+ node.style.transition = "opacity 1s, left 2s, top 1s";
+ node.style.MozTransition = "opacity 1s, left 2s, top 1s";
+ node.style.WebkitTransition = "opacity 1s, left 2s, top 1s";
+ node.style.OTransition = "opacity 1s, left 2s, top 1s";
+ var place = this.current_nodes.indexOf(node);
+ this.current_nodes[place] = null;
+ place--;
+ if(place < 0){
+ this.remove_node(node);
+ } else{
+ node.style.top = 30+(8*place)+"%";
+ var old_node = this.current_nodes[place];
+ if(old_node){
+ this.bump_node(old_node);
+ }
+ this.current_nodes[place] = node;
+ }
+ },
+ create_node: function (node_json){
+ var node = document.createElement("a");
+ var resource = ignite.resources.get_resource_from_id(node_json.resource_id);
+ if(typeof(resource.content) == "string"){
+ node.setAttribute("class", "link_node");
+ node.setAttribute("href", resource.content)
+ node.setAttribute("target", "_blank");
+ node.innerHTML = '
'+resource.title+'
';
+ } else{
+ node.setAttribute("class", "link_node link_node_group");
+ node.innerHTML = '
'+resource.title+'
';
+ node.addEventListener("click", function (){
+ if(ignite.walkthrough_in_progress){ return;}
+ ignite.transition("left");
+ setTimeout(function (){
+ ignite.resources.navigate_id(node_json.resource_id);
+ }, 500);
+ }, false);
+ }
+ return node;
+ },
+ remove_node: function (node){
+ if(node == this.custom_node){
+ node.style.opacity = "0";
+ this.custom_node = undefined;
+ } else{
+ node.style.left = "-100%";
+ var position = this.current_nodes.indexOf(node);
+ if(position != -1){
+ this.current_nodes[position] = undefined;
+ }
+ }
+ setTimeout(function (){
+ ignite.middle.removeChild(node);
+ }, 1000);
+ },
+ clear_nodes: function (){
+ if(this.custom_node){
+ this.remove_node(this.custom_node);
+ }
+ for(var I = 0; I < this.current_nodes.length; I++){
+ var node = this.current_nodes[I];
+ if(node){
+ this.remove_node(node);
+ }
+ }
+ },
+ setup_at: function (time_code){
+ // Setup Global events:
+ var global_group = this.content[0];
+ for(var event_index = 0; event_index < global_group.content.length; event_index++){
+ var indexed_event = global_group.content[event_index];
+ indexed_event.check(ignite.popcorn.currentTime());
+ }
+ // Setup current link node group:
+ var display_group;
+ var display_nodes = new Array();
+ for(var I = 1 ; I < this.content.length; I++){
+ // This index starts at 1 so as to skip the global group at position 0.
+ var group = this.content[I];
+ if(group.time_in <= time_code && group.time_out > time_code){
+ display_group = group;
+ break;
+ }
+ }
+ if(!display_group){ return;}
+ for(var node_index = display_group.content.length-1; node_index >= 0; node_index--){
+ var indexed_node = display_group.content[node_index];
+ if(indexed_node.time_in > time_code){
+ continue;
+ }
+ display_nodes.push(indexed_node);
+ if(display_nodes.length >= 5){
+ break;
+ }
+ }
+ if(display_nodes.length <= 0){ return;}
+ for(var I = display_nodes.length-1; I >= 0; I--){
+ var indexed_node = display_nodes[I];
+ var new_node = this.create_node(indexed_node);
+ var custom;
+ if(indexed_node.position){
+ custom = indexed_node.position;
+ }
+ this.add_node(new_node, custom)
+ }
+ }
+ }
+};
+ignite.resources = {
+ highlight: function (resource){
+ switch(resource.tier){
+ case 1:{
+ if(this.highlight_tier1){
+ this.unhighlight(this.highlight_tier1);
+ }
+ this.highlight_tier1 = resource;
+ break;
+ }
+ case 2:{
+ if(this.highlight_tier2){
+ this.unhighlight(this.highlight_tier2);
+ }
+ this.highlight_tier2 = resource;
+ break;
+ }
+ }
+ resource.element.firstChild.style.background = "rgb(239, 72, 25)";
+ for(var I = 0; I < resource.content.length; I++){
+ var sub_rsc = resource.content[I];
+ var old_left = sub_rsc.element.style.left;
+ var old_top = sub_rsc.element.style.top;
+ sub_rsc.element.style.left = (10+((resource.tier-1)*28))+"%";
+ sub_rsc.element.style.top = resource.element.style.top;
+ sub_rsc.element.style.display = "block";
+ sub_rsc.element.style.transition = "top 1s, left 0.5s";
+ sub_rsc.element.style.MozTransition = "top 1s, left 0.5s";
+ sub_rsc.element.style.WebkitTransition = "top 1s, left 0.5s";
+ sub_rsc.element.style.OTransition = "top 1s, left 0.5s";
+ var mover_func = (function (indexed_rsc, indexed_left, indexed_top){
+ return function (){
+ indexed_rsc.element.style.left = indexed_left;
+ indexed_rsc.element.style.top = indexed_top;
+ }
+ })(sub_rsc, old_left, old_top)
+ setTimeout(mover_func, 50);
+ }
+ },
+ unhighlight: function (resource){
+ if(resource.tier == 1){
+ if(this.highlight_tier2){
+ this.unhighlight(this.highlight_tier2);
+ }
+ }
+ this["highlight_tier"+resource.tier] = null;
+ resource.element.firstChild.style.background = null;
+ for(var I = 0; I < resource.content.length; I++){
+ var sub_rsc = resource.content[I];
+ sub_rsc.element.style.display = "none";
+ sub_rsc.element.style.transition = "";
+ sub_rsc.element.style.MozTransition = "";
+ sub_rsc.element.style.WebkitTransition = "";
+ sub_rsc.element.style.OTransition = "";
+ }
+ },
+ navigate_id: function (resource_id){
+ var navigation_steps = resource_id.split(".");
+ var parent_resource = ignite.resources;
+ for(var nav_index = 0; nav_index < navigation_steps.length; nav_index++){
+ var step_id = navigation_steps[nav_index];
+ for(var res_index = 0; res_index < parent_resource.content.length; res_index++){
+ var test_resource = parent_resource.content[res_index];
+ if(test_resource.id == step_id){
+ parent_resource = test_resource;
+ this.highlight(parent_resource);
+ break;
+ }
+ }
+ }
+ },
+ get_resource_from_id: function (resource_id){
+ var navigation_steps = resource_id.split(".");
+ var parent_resource = ignite.resources;
+ for(var nav_index = 0; nav_index < navigation_steps.length; nav_index++){
+ var step_id = navigation_steps[nav_index];
+ for(var res_index = 0; res_index < parent_resource.content.length; res_index++){
+ var test_resource = parent_resource.content[res_index];
+ if(test_resource.id == step_id){
+ parent_resource = test_resource;
+ break;
+ }
+ }
+ }
+ return parent_resource;
+ }
+};
+ignite.compatibility.check(true);
+if((ignite.compatibility.status & ignite.compatibility.EVENT)){
+ document.addEventListener("DOMContentLoaded", function (){
+ ignite.compatibility.check();
+ var full_featured = (
+ ignite.compatibility.CONTROLS |
+ ignite.compatibility.CSS_TRANSITION |
+ ignite.compatibility.DOM |
+ ignite.compatibility.EVENT |
+ ignite.compatibility.HTML5);
+ if(ignite.compatibility.status != full_featured){
+ ignite.compatibility.notify()
+ }
+ if(ignite.compatibility.status & (ignite.compatibility.DOM | ignite.compatibility.HTML5)){
+ ignite.setup();
+ }
+ });
+} else{
+ ignite.compatibility.notify()
+}
\ No newline at end of file
diff --git a/media/ignite/resources/js/websockets_urls.js b/media/ignite/resources/js/websockets_urls.js
new file mode 100644
index 0000000..cb764ab
--- /dev/null
+++ b/media/ignite/resources/js/websockets_urls.js
@@ -0,0 +1,8 @@
+ignite.url = {
+ node_linkbox: ignite_bundle.data.MEDIA_URL + "resources/svg/linkbox_padding.svg",
+ node_logo: ignite_bundle.data.MEDIA_URL + "resources/svg/ignite_embossed_logo.svg",
+ logo1: ignite_bundle.data.MEDIA_URL + "resources/svg/ignite_w_text.svg",
+ logo2: ignite_bundle.data.MEDIA_URL + "resources/svg/websockets_w_text.svg",
+ resource_background: ignite_bundle.data.MEDIA_URL + "resources/svg/ignite_embossed_logo.svg",
+ hackable_demo: "https://github.com/mozilla/mozilla-ignite-learning-lab-demos/tree/master/lab-4-websockets"
+};
\ No newline at end of file
diff --git a/media/ignite/resources/static/websockets.html b/media/ignite/resources/static/websockets.html
new file mode 100644
index 0000000..851d60c
--- /dev/null
+++ b/media/ignite/resources/static/websockets.html
@@ -0,0 +1,186 @@
+
+
+
+
+
Mozilla Ignite Learning Lab - WebRTC
+
+
+
+
+
+
+
+
+
+
+
+ Your browser does not support HTML5. Please update your browser to view this video.
+
+
+ Your browser is out of date. Please update your browser to access all features of this video.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Hackable Demo
+
Credits
+
+
+
+
![decorative background]()
+
+
+
+
+ - Credits
+ -
+Open the Studio
+Design and Development
+
+-
+Kenny Katzgrau
+Interviews And Writing
+
+ - Special Thanks
+-
+Rob Hawkes
+Interview, Expert
+
+-
+Peter Lubbers
+Interview, Google
+
+-
+Tom Hughes-Croucher
+Interview, Change.org
+
+-
+Ondrej Žára
+Interview, Seznam
+
+
+
+
+
![Mozilla Ignite Logo]()
+
![WebRTC Learning Lab Logo]()
+
+
+
+
+
\ No newline at end of file
diff --git a/media/ignite/resources/svg/websockets_w_text.svg b/media/ignite/resources/svg/websockets_w_text.svg
new file mode 100644
index 0000000..87ab0e5
--- /dev/null
+++ b/media/ignite/resources/svg/websockets_w_text.svg
@@ -0,0 +1,116 @@
+
+
+
+