Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

initial push for new docs

  • Loading branch information...
commit 55ff4e03094c2c8060daa01ea1d1cac6ae7ec9c6 0 parents
@dseif dseif authored
Showing with 3,044 additions and 0 deletions.
  1. +5 −0 .gitignore
  2. +9 −0 _config.yml
  3. 0  effects/2012-12-12-index.md
  4. +34 −0 effects/_posts/2012-12-12-applyclass.md
  5. 0  getting-started/2012-12-12-index.md
  6. +19 −0 getting-started/_posts/2012-12-12-gettingstarted.md
  7. +389 −0 index.css
  8. +104 −0 index.html
  9. +17 −0 instance-methods/_posts/2012-12-12-autoplay.md
  10. +21 −0 instance-methods/_posts/2012-12-12-compose.md
  11. +19 −0 instance-methods/_posts/2012-12-12-cue.md
  12. +19 −0 instance-methods/_posts/2012-12-12-currenttime.md
  13. +22 −0 instance-methods/_posts/2012-12-12-defaults.md
  14. +13 −0 instance-methods/_posts/2012-12-12-disable.md
  15. +13 −0 instance-methods/_posts/2012-12-12-duration.md
  16. +13 −0 instance-methods/_posts/2012-12-12-enable.md
  17. +19 −0 instance-methods/_posts/2012-12-12-exec.md
  18. +13 −0 instance-methods/_posts/2012-12-12-framerate.md
  19. +4 −0 instance-methods/_posts/2012-12-12-index.md
  20. +22 −0 instance-methods/_posts/2012-12-12-listen.md
  21. +11 −0 instance-methods/_posts/2012-12-12-mute.md
  22. +16 −0 instance-methods/_posts/2012-12-12-play.md
  23. +20 −0 instance-methods/_posts/2012-12-12-playbackrate.md
  24. +13 −0 instance-methods/_posts/2012-12-12-position.md
  25. +21 −0 instance-methods/_posts/2012-12-12-roundTime.md
  26. +19 −0 instance-methods/_posts/2012-12-12-toggle.md
  27. +23 −0 instance-methods/_posts/2012-12-12-trigger.md
  28. +14 −0 instance-methods/_posts/2012-12-12-unlisten.md
  29. +17 −0 instance-methods/_posts/2012-12-12-unmute.md
  30. +15 −0 instance-methods/_posts/2012-12-12-volume.md
  31. 0  instance-property/2012-12-12-index.md
  32. +19 −0 instance-property/_posts/2012-12-12-frameanimation.md
  33. +9 −0 instance-property/_posts/2012-12-12-media.md
  34. +19 −0 instance-property/_posts/2012-12-12-popcorninstance.md
  35. 0  media-methods/2012-12-12-index.md
  36. +18 −0 media-methods/_posts/2012-12-12-buffered.md
  37. +19 −0 media-methods/_posts/2012-12-12-controls.md
  38. +13 −0 media-methods/_posts/2012-12-12-ended.md
  39. +15 −0 media-methods/_posts/2012-12-12-load.md
  40. +17 −0 media-methods/_posts/2012-12-12-loop.md
  41. +22 −0 media-methods/_posts/2012-12-12-muted.md
  42. +16 −0 media-methods/_posts/2012-12-12-pause.md
  43. +18 −0 media-methods/_posts/2012-12-12-paused.md
  44. +19 −0 media-methods/_posts/2012-12-12-played.md
  45. +25 −0 media-methods/_posts/2012-12-12-preload.md
  46. +24 −0 media-methods/_posts/2012-12-12-readystate.md
  47. +17 −0 media-methods/_posts/2012-12-12-seekable.md
  48. +17 −0 media-methods/_posts/2012-12-12-seeking.md
  49. +120 −0 mobile.css
  50. 0  modules/2012-12-12-index.md
  51. +36 −0 modules/_posts/2012-12-12-data-timeline-sources.md
  52. +51 −0 modules/_posts/2012-12-12-sequence.md
  53. 0  parsers/2012-12-12-index.md
  54. +47 −0 parsers/_posts/2012-12-12-parserJSON.md
  55. +46 −0 parsers/_posts/2012-12-12-parserSBV.md
  56. +46 −0 parsers/_posts/2012-12-12-parserSRT.md
  57. +46 −0 parsers/_posts/2012-12-12-parserSSA.md
  58. +46 −0 parsers/_posts/2012-12-12-parserTTML.md
  59. +46 −0 parsers/_posts/2012-12-12-parserTTXT.md
  60. +46 −0 parsers/_posts/2012-12-12-parserVTT.md
  61. +46 −0 parsers/_posts/2012-12-12-parserXML.md
  62. 0  players/2012-12-12-index.md
  63. +36 −0 players/_posts/2012-12-12-baseplayer.md
  64. +30 −0 players/_posts/2012-12-12-vimeo.md
  65. +30 −0 players/_posts/2012-12-12-youtube.md
  66. 0  plugins/2012-12-12-index.md
  67. +33 −0 plugins/_posts/2012-12-12-attribution.md
  68. +37 −0 plugins/_posts/2012-12-12-bestpractice.md
  69. +30 −0 plugins/_posts/2012-12-12-code.md
  70. +47 −0 plugins/_posts/2012-12-12-facebook.md
  71. +33 −0 plugins/_posts/2012-12-12-flickr.md
  72. +21 −0 plugins/_posts/2012-12-12-footnote.md
  73. +25 −0 plugins/_posts/2012-12-12-gml.md
  74. +29 −0 plugins/_posts/2012-12-12-googlefeed.md
  75. +43 −0 plugins/_posts/2012-12-12-googlemaps.md
  76. +31 −0 plugins/_posts/2012-12-12-image.md
  77. +27 −0 plugins/_posts/2012-12-12-lastfm.md
  78. +34 −0 plugins/_posts/2012-12-12-linkedin.md
  79. +28 −0 plugins/_posts/2012-12-12-lowerthird.md
  80. +74 −0 plugins/_posts/2012-12-12-manifest.md
  81. +49 −0 plugins/_posts/2012-12-12-mustache.md
  82. +39 −0 plugins/_posts/2012-12-12-openmap.md
  83. +19 −0 plugins/_posts/2012-12-12-pause.md
  84. +25 −0 plugins/_posts/2012-12-12-processing.md
  85. +24 −0 plugins/_posts/2012-12-12-subtitle.md
  86. +29 −0 plugins/_posts/2012-12-12-tagthisperson.md
  87. +30 −0 plugins/_posts/2012-12-12-timeline.md
  88. +28 −0 plugins/_posts/2012-12-12-twitter.md
  89. +27 −0 plugins/_posts/2012-12-12-webpage.md
  90. +29 −0 plugins/_posts/2012-12-12-wikipedia.md
  91. +27 −0 plugins/_posts/2012-12-12-wordriver.md
  92. +44 −0 pretiffy/pretiffy.css
  93. +33 −0 pretiffy/pretiffy.js
  94. 0  static-methods/2012-12-12-index.md
  95. +23 −0 static-methods/_posts/2012-12-12-extend.md
  96. +18 −0 static-methods/_posts/2012-12-12-foreach.md
  97. +65 −0 static-methods/_posts/2012-12-12-getJSONP.md
  98. +58 −0 static-methods/_posts/2012-12-12-getscript.md
  99. +13 −0 static-methods/_posts/2012-12-12-guid.md
  100. +18 −0 static-methods/_posts/2012-12-12-locale.md
  101. +35 −0 static-methods/_posts/2012-12-12-parser.md
  102. +21 −0 static-methods/_posts/2012-12-12-plugin.md
  103. +15 −0 static-methods/_posts/2012-12-12-toseconds.md
5 .gitignore
@@ -0,0 +1,5 @@
+# OS X ignores
+.DS_Store
+
+# Jekyll ignores
+_site
9 _config.yml
@@ -0,0 +1,9 @@
+# Github defaults
+safe: true
+lsi: false
+pygments: true
+
+# Popcorn.js settings
+auto: true
+server: true
+
0  effects/2012-12-12-index.md
No changes.
34 effects/_posts/2012-12-12-applyclass.md
@@ -0,0 +1,34 @@
+# ApplyClass #
+
+## Purpose ##
+
+Apply css class to jquery selector. Selector is relative to plugin target's id
+
+## Options ##
+
+* **class** - specifies the class to apply to the plugin container, can be seperated by spaces for more then one class
+
+## Examples ##
+
+ var popcorn = Popcorn( "#video" );
+
+ popcorn.footnote({
+ start: 2,
+ end: 6,
+ text: "TOGGLING EVENTS",
+ target: "footnote",
+ effect: "applyclass",
+ applyclass: "test1, test2"
+ })
+ .footnote({
+ start: 20, // seconds
+ end: 45, // seconds
+ target: "footnotediv",
+ text: "Visit webmademovies.org for more details",
+ effect: "applyclass",
+ applyclass: "applyoverlay: .overlay, hover: parent"
+ });
+
+ popcorn.play();
+
+Simple applyclass effect [jsFiddle](http://jsfiddle.net/68tzd/)
0  getting-started/2012-12-12-index.md
No changes.
19 getting-started/_posts/2012-12-12-gettingstarted.md
@@ -0,0 +1,19 @@
+# Getting Started #
+
+We urge the video community, Javascript developers, and film makers alike to get involved and help with development in order to ensure an easy to use and adaptable library. There are many ways one can get involved; some include critiquing current work, filling out tickets/bugs, requesting additional functionality, spreading the word, and helping with documentation. Included below are ways to keep track of popcorn.js.
+
+## Download Source ##
+
+We have started a [GitHub repository](https://github.com/webmademovies/popcorn-js) feel free to fork from it or download the source. If you want to contribute the this is the [developer repository](http://github.com/cadecairos/popcorn-js/)
+
+## Workflow Guide ##
+
+The developer workflow guide can be found on [Lighthouse](https://webmademovies.lighthouseapp.com/projects/63272/workflow)
+
+## Issue Tracker ##
+
+We have started a [Lighthouse project](https://webmademovies.lighthouseapp.com/projects/63272/overview). It is public so feel free to add tickets.
+
+## IRC ##
+
+To get involved in the conversation or just stop by to see whats happening visit the #popcorn channel at irc://moznet/popcorn
389 index.css
@@ -0,0 +1,389 @@
+body {
+ background-color:#F6F4F2;
+ font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size:16px;
+}
+
+h1, ul, li {
+ margin:0px;
+ padding:0px;
+}
+
+.caps {
+ text-transform: capitalize;
+}
+
+#header {
+ background-color:#515151;
+ background:#515151 -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ color-stop(0.2, #515151),
+ color-stop(0.8, #302F2D)
+ );
+ background:-moz-linear-gradient(center bottom , #515151 20%, #747474 80%);
+ border-top:1px solid #919192;
+ height:32px;
+ left:0px;
+ position:fixed;
+ top:0px;
+ width:100%;
+ z-index:1;
+}
+#subheader {
+ background-color:#CBCBCB;
+ background:-webkit-gradient(linear,
+ left top,
+ left bottom,
+ color-stop(0.0, #F9F9F9),
+ color-stop(1.0, #CBCBCB)
+ );
+ background:-moz-linear-gradient(center bottom , #CBCBCB 0%, #F9F9F9 100%);
+ border-top:1px solid #383A3C;
+ border-bottom:1px solid #919395;
+ height:32px;
+ left:0px;
+ position:fixed;
+ top:32px;
+ width:100%;
+ z-index:1;
+}
+#sidebar {
+ background-color:#ECEAE7;
+ bottom:0px;
+ left:0px;
+ overflow:auto;
+ padding:20px 40px 0px 0px;
+ position:fixed;
+ text-align:right;
+ top:66px;
+ width:180px;
+ z-index:1;
+}
+#scrollable {
+ bottom:0px;
+ left:220px;
+ position:fixed;
+ overflow:auto;
+ right:0px;
+ top:64px;
+}
+#content {
+/* top:64px;*/
+/* bottom:0px;*/
+/* right:0px;*/
+/* left:220px;*/
+/* margin:64px auto 0px 220px;*/
+ margin:20px 60px;
+/* position:absolute;*/
+/* overflow:auto;*/
+ z-index:0;
+}
+
+#header h1,
+#header h1 a,
+#subheader h1 {
+ color:#F6F4F2;
+ font-size:18px;
+ font-weight:normal;
+ line-height:32px;
+ margin:0px;
+ text-align:center;
+ text-shadow:0px -1px 1px #222222;
+}
+
+#header h1 a strong {
+ font-weight:bold;
+}
+
+#header h1 {
+ text-align:left;
+ margin-left:20px;
+}
+
+#subheader h1 {
+ color:#000000;
+ text-shadow:#FFFFFF 0px 1px 0px;
+}
+
+#header small,
+#subheader small {
+ color:#EFEFEF;
+ font-size:14px;
+ line-height:32px;
+ position:absolute;
+ top:0px;
+ right:20px;
+ text-shadow:-1px 1px 1px #666666;
+}
+
+#sidebar .vertical_divider {
+ background-color:#CCCCCC;
+ bottom:0px;
+ border-right:1px solid #FFFFFF;
+ position:absolute;
+ top:0px;
+ right:0px;
+ width:1px;
+}
+
+#sidebar h1 {
+ color:#000000;
+ font-size:18px;
+ padding:0px;
+ margin:30px 0px;
+ font-weight:normal;
+ text-shadow:#FFFFFF 0px 1px 0px;
+}
+
+#sidebar ul,
+#sidebar li {
+ margin:0px;
+ padding:0px;
+}
+#sidebar li,
+#sidebar li a {
+ color:#767573;
+ font-size:14px;
+ list-style:none;
+ margin:15px 0px;
+ text-shadow:#FFFFFF 0px 1px 1px;
+}
+#sidebar li a {
+ -webkit-transition:color .15s ease-out;
+ -moz-transition:color .15s ease-out;
+ -o-transition:color .15s ease-out;
+}
+#sidebar li a:hover {
+ color:#242220;
+ -webkit-transition:color .15s ease-in;
+ -moz-transition:color .15s ease-in;
+ -o-transition:color .15s ease-in;
+}
+
+
+#otherbar {
+ display:none;
+}
+
+#content {
+ font-size:13px;
+ line-height:160%;
+ max-width:750px;
+}
+
+#content h1 {
+ border-bottom:2px solid;
+ font-size:2em;
+ font-weight:normal;
+ margin:2.0em 0px 1.3em 0px;
+ padding-bottom:0.6em;
+}
+#content h2 {
+ color:#242220;
+ font-size:1.4em;
+ font-weight:bold;
+ margin:1.3em 0px 0.8em 0px;
+ text-shadow:#FFFFFF 0px 1px 1px;
+}
+#content h3 {
+ font-size:1em;
+ font-weight:bold;
+ margin:0.8em 0px 0.5em 0px;
+ text-shadow:#FFFFFF 0px 1px 1px;
+}
+
+hr {
+ display:none;
+ border:none;
+ margin:40px 0px;
+ border-top:1px solid #CCCCCC;
+ border-bottom:1px solid #FFFFFF;
+}
+
+p,blockquote,pre,ul {
+ margin:1em 0px;
+}
+
+h2:after,
+h3:after {
+ content: ":";
+}
+
+blockquote {
+ color:#767573;
+ font-style:normal;
+ margin-left:35px;
+ padding-left:20px;
+ position:relative;
+ text-shadow:#FFFFFF 0px 1px 0px;
+}
+blockquote code {
+ font-style: normal;
+}
+blockquote p {
+ padding:10px 0px;
+}
+blockquote::before {
+ font-style: normal;
+ content: '\201C';
+ font-size: 450%;
+ font-family:Georgia, Palatino, 'Times New Roman', Times;;
+ position: absolute;
+ left: -25px;
+ top:0.3em;
+ color: #E0E0E0;
+}
+
+ul {
+ margin-left:40px;
+}
+ul > li {
+ list-style:disc;
+ list-style-position:outside;
+}
+ul ul {
+ margin-bottom:0.5em;
+ margin-top:0.5em;
+}
+
+
+
+code {
+ font-family:"DejaVu", "Monaco", "Courier New", "Courier";
+ font-size:90%;
+ padding:2px 4px;
+ white-space:pre-wrap;;
+}
+
+pre {
+/* border:1px solid #CCCCCC;*/
+ background:#F2F0EE;
+ -webkit-border-radius:11px;
+ -moz-border-radius:11px;
+ border-radius:11px;
+ display:block;
+ line-height:110%;
+ margin:1.5em 0px 3em 0px;
+ padding:15px 20px;
+ white-space:pre-wrap;
+}
+pre code {
+ background:none;
+ border:none;
+ font-size:11px;
+ padding:0px;
+}
+
+a[href] {
+/* color:inherit;*/
+ color:#F06433;
+ text-decoration:none;
+ text-shadow:#FFF 0px 1px 0px;
+}
+a[href]:hover {
+ color:#d0410f;
+}
+
+.prettyprint a[href],
+.prettyprint a[href] span {
+ text-decoration:underline;
+ text-shadow:none;
+}
+.prettyprint a[href] :hover,
+.prettyprint a[href] span :hover {
+ text-decoration:none;
+}
+
+code a[href] {
+ color:inherit;
+/* border-bottom:1px dotted #000000;*/
+ text-decoration:underline;
+}
+code a[href]:hover {
+ color:inherit;
+ text-decoration:none;
+}
+
+a[href].external:after {
+ content: "*";
+ font-style: super;
+ opacity: .5;
+}
+
+#index {
+ -webkit-column-width: 235px;
+ -webkit-column-rule-width: 5px;
+ -moz-column-width: 235px;
+ -moz-column-rule-width: 5px;
+ column-width: 235px;
+ column-rule-width: 5px;
+}
+
+#index h2:after,
+#index h3:after {
+ content:"";
+}
+
+#index h2 {
+ margin:0px;
+ padding:0px;
+}
+
+#index {
+ padding: 10px 1px;
+}
+
+#index ul {
+ margin:0px 0px 30px 0px;
+ padding:0;
+}
+
+#index ul li {
+ list-style: none;
+}
+
+#index ul li a {
+
+}
+
+#home h1 {
+ border-bottom:1px solid #919395;
+ padding-bottom:20px;
+ margin:30px 0px;
+}
+
+#home h2 {
+ font-weight:normal;
+ margin:0px 0px 10px 0px;
+ padding:0px;
+}
+
+#home h2:after {
+ content:'';
+}
+
+#home h2 a {
+ text-shadow:#FFFFFF 0px 1px 1px;
+}
+
+#home span {
+ color:#8B8078;
+ font-size:14px;
+ text-shadow:#FFFFFF 0px 1px 0px;
+}
+
+#home ul {
+ float:left;
+ margin:0px;
+ padding:0px;
+}
+#home ul li {
+ float:left;
+ height:120px;
+ list-style:none;
+ margin:0px;
+ padding:0px 20px;
+ width:200px;
+}
104 index.html
@@ -0,0 +1,104 @@
+---
+layout: post
+title: Popcorn.js Documentation
+---
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
+ <meta name="generator" content="joDoc">
+ <title>Popcorn.js API Documentation</title>
+ <link rel="stylesheet" type="text/css" href="index.css">
+ <link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-device-width: 1024px)">
+ <link rel="stylesheet" type="text/css" href="prettify/prettify.css">
+ </head>
+ <body>
+ <div id="header">
+ <h1><a href="index.html">Popcorn<strong>.js</strong> Documentation</a></h1>
+ <small>
+ <select>
+ <optgroup label="English" value="en">
+ <option value="edge">edge</option>
+ <option selected value="1.2.0">1.2.0</option>
+ <option value="1.1.0">1.1.0</option>
+ <option value="1.0.0rc3">1.0.0rc3</option>
+ <option value="1.0.0rc2">1.0.0rc2</option>
+ <option value="1.0.0rc1">1.0.0rc1</option>
+ <option value="1.0.0">1.0.0</option>
+ <option value="0.9.6">0.9.6</option>
+ <option value="0.9.5.1">0.9.5.1</option>
+ <option value="0.9.5">0.9.5</option>
+ <option value="0.9.4">0.9.4</option>
+ <option value="0.9.3">0.9.3</option>
+ <option value="0.9.2">0.9.2</option>
+ </optgroup>
+ <optgroup label="Español" value="es"><option value="1.0.0">1.0.0</option></optgroup>
+ <optgroup label="Japanese" value="jp"><option value="0.9.5">0.9.5</option></optgroup>
+ </select>
+ </small>
+ </div>
+ <div id="subheader">
+ <h1>Home</h1>
+ <small></small>
+ </div>
+
+ <div id="sidebar">
+ <div class="vertical_divider"></div>
+ <h1>API Reference</h1>
+ <ul>
+ {% capture get_items %}
+ {% for cat in site.categories %}
+ {{ cat | first }}
+ {% endfor %}
+ {% endcapture %}
+ {% capture num_words %}
+ {{ get_items | split:' ' | sort | join:' ' | number_of_words }}
+ {% endcapture %}
+ {% for item in (1..num_words) %}
+ {% capture this_word %}
+ {{ get_items | split:' ' | sort | join:' ' | truncatewords:item | remove:'...' | split:' ' | last }}
+ {% endcapture %}
+ <li><a class="caps" href={{ this_word }}>{{ this_word }}<a></li>
+ {% endfor %}
+ </ul>
+ <h1></h1>
+ <ul>
+ <li><a href="index.html">Keyword Index</a></li>
+ </ul>
+ </div>
+
+ <div id="scrollable">
+ <div id="content">
+ <div id="home">
+ <h1><a name="API%20Reference">API Reference</a></h1>
+ <ul>
+ {% for item in (1..num_words) %}
+ {% capture this_word %}
+ {{ get_items | split:' ' | sort | join:' ' | truncatewords:item | remove:'...' | split:' ' | last }}
+ {% endcapture %}
+ <li>
+ <h2><a class="caps" href={{ this_word }}>{{ this_word }}</a></h2>
+ {% for post in site.posts %}
+ {% if this_word contains post.title %}
+ <span>{{ post.content }}</span>
+ {% endif %}
+ {% endfor %}
+ </li>
+ {% endfor %}
+ </ul>
+ <h1><a name="Guides">Guides</a></h1>
+ <ul>
+ <li>
+ <h2><a href="index.html">Keyword Index</a></h2>
+ <span>Full index of the Popcorn.js Documentation.</span>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <!-- Functionality and Syntax Highlighting -->
+ <script type="text/javascript" src="index.js"></script><script type="text/javascript" src="prettify/prettify.js"></script>
+ </body>
+</html>
17 instance-methods/_posts/2012-12-12-autoplay.md
@@ -0,0 +1,17 @@
+# autoplay( flag ) #
+
+## Purpose ##
+
+autoplay is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. autoplay is used set the video automatically play if it is set to true.
+
+## Options ##
+
+* **flag** - boolean value specifying whether the video should autoplay or not
+
+## Use Cases ##
+
+* Begin playing the video as soon as it is able to
+
+## Examples ##
+
+* set the video to autoplay as soon as it is able to [jsFiddle](http://jsfiddle.net/popcornjs/b7C8C/)
21 instance-methods/_posts/2012-12-12-compose.md
@@ -0,0 +1,21 @@
+# compose( name, definitionObject, manifest ) #
+
+## Purpose ##
+
+compose, which is also known as effects, works very similar to a traditional Popcorn.js plugin. We create start and end functions as we would in a typical plugin and add an appropriate effect that will be triggered in each block. Typically this means add an effect on start and remove it on end, but is in no way limited to this. Compose creates the huge potential for css transitions between Popcorn events and really adds another depth to the users web made movie experience. compose is not limited to effects tho, and can be used for many other things as well. Keep in mind that plugins events will be fired first and then any composed events will be fired after.
+
+## Options ##
+
+* **name** - a string of the given name for the compose plugin
+* **definitionObject** - is an object literal containing typical plugin methods ( setup, start, end ) where the compose logic will live
+* **manifest** - an optional manifest can be included
+
+## Use Cases ##
+
+* You want a unique effect to be displayed at alongside an already existing plugin
+* Create transitions
+
+## Examples ##
+
+* Create a simple compose plugin to log data [jsFidlle](http://jsfiddle.net/popcornjs/q4rWE/)
+* Simple css compose effect [jsFiddle](http://jsfiddle.net/popcornjs/jHL9m/)
19 instance-methods/_posts/2012-12-12-cue.md
@@ -0,0 +1,19 @@
+# cue( time, callback ) #
+
+## Purpose ##
+
+cue is an alias to exec(), meaning it provides the same functionality but is simply accessed through a seperate function name. Cue was created with film makers in mind by using a familiar keyword in order to make developing Popcorn.js projects simpler.
+
+## Options ##
+
+* **time** - the time in which the cue will be fired at
+* **callback** - a callback function that will be executed at a given **time** in a cue
+
+## Use Cases ##
+
+* Perform an action at some point in the video
+* Unique functionality that is not big enough to warrant a plugin
+
+## Example ##
+
+* Log data at points in the video [jsFiddle](http://jsfiddle.net/popcornjs/a38mA/)
19 instance-methods/_posts/2012-12-12-currenttime.md
@@ -0,0 +1,19 @@
+# currentTime #
+
+## Purpose ##
+
+Set or Get the Popcorn video object instance currentTime
+
+## Options ##
+
+* **seconds** - if seconds exists, we are setting the currentTime ( go to that time in the video ), and if it is not present, we are returning what the currentTime is
+
+## Use Case ##
+
+* Navigate to a certain point in the video
+* figure out what time we are at in the video
+
+## Examples ##
+
+* get the currentTime of the video as it plays [jsFiddle](http://jsfiddle.net/popcornjs/a3TGF/)
+* set the currentTime and then play [jsFiddle](http://jsfiddle.net/popcornjs/bpge3/)
22 instance-methods/_posts/2012-12-12-defaults.md
@@ -0,0 +1,22 @@
+# defaults #
+
+## Purpose ##
+
+Set defaults for any property of a plugin.
+
+This allows numerous plugins of a single type to all use the same default values. This can be done by either calling the instance method or by doing so in the popcorn constructor.
+
+## Options ##
+
+* **pluginName** - a string of the name of the plugin in which you want to set default values for
+* **options** - is an object that contains the values that will be defaulted for the given plugin
+
+## Use Cases ##
+
+* Use the same default values for numerous plugin calls
+* Reduce code size
+
+## Examples ##
+
+* Using the instance method [jsFiddle](http://jsfiddle.net/popcornjs/mMXnf/)
+* Using the Popcorn constructor [jsFiddle](http://jsfiddle.net/popcornjs/HhjGv/)
13 instance-methods/_posts/2012-12-12-disable.md
@@ -0,0 +1,13 @@
+# disable #
+
+## Purpose ##
+
+Disable a plugin; stops the playback events for a specified plugin of a calling Popcorn instance.
+
+## Options ##
+
+* **pluginName** - a string of the name of the plugin that will disabled
+
+## Example ##
+
+* disable the playback of a footnote plugin [jsFiddle](http://jsfiddle.net/popcornjs/yuyFu/)
13 instance-methods/_posts/2012-12-12-duration.md
@@ -0,0 +1,13 @@
+# duration #
+
+## Purpose ##
+
+Get the videos duration. If the duration is not yet available, NaN will be returned.
+
+## Options ##
+
+* returns a number representing the duration of the video in seconds
+
+## Example ##
+
+* get the duration of the video [jsFiddle](http://jsfiddle.net/popcornjs/Z4Z37/)
13 instance-methods/_posts/2012-12-12-enable.md
@@ -0,0 +1,13 @@
+# enable #
+
+## Purpose ##
+
+Enable a previously disabled plugin of a calling Popcorn instance.
+
+## Options ##
+
+* **pluginName** - a string of the name of the plugin that will disabled
+
+## Example ##
+
+* enable a previously disabled plugin [jsFiddle](http://jsfiddle.net/popcornjs/4Ps9x/)
19 instance-methods/_posts/2012-12-12-exec.md
@@ -0,0 +1,19 @@
+# exec #
+
+## Purpose ##
+
+Execute an arbitrary callback function at a specific time in seconds
+
+## Options ##
+
+* **time** - time location in seconds to execute callback function
+* **callback** - function to execute at the given **time**
+
+## Use Cases ##
+
+* Perform an action at some point in the video
+* Unique functionality that is not big enough to warrant a plugin
+
+## Example ##
+
+* console.log some data at 1 second [jsFiddle](http://jsfiddle.net/popcornjs/6SzsX/)
13 instance-methods/_posts/2012-12-12-framerate.md
@@ -0,0 +1,13 @@
+# framerate #
+
+## Purpose ##
+
+You can set the framerate to be used for all start/end points of a given Popcorn instance
+
+## Options ##
+
+* **frameRate** - a number representing the frame rate to be used
+
+## Example ##
+
+* set the frame rate [jsFiddle](http://jsfiddle.net/popcornjs/XEBqn/)
4 instance-methods/_posts/2012-12-12-index.md
@@ -0,0 +1,4 @@
+---
+title: instance-methods
+---
+Various functions accessible on every Popcorn instance
22 instance-methods/_posts/2012-12-12-listen.md
@@ -0,0 +1,22 @@
+# listen #
+
+## Purpose ##
+
+Bind an event handling callback to an event. Allows custom events.
+
+Any of the follow event types may be used with .listen() : loadstart, progress, suspend, emptied, stalled, play, pause, loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough, seeking, seeked, timeupdate, ended, ratechange, durationchange, volumechange.
+
+Listen also excepts custom events.
+
+## Options ##
+
+* **eventName** - the name of the event to listen for
+* **callback** - the function that will get fired when the event is triggered
+
+## Use Cases ##
+
+* You want to perform some action when an event happens, i.e, show a googlemap when the video is paused
+
+## Examples ##
+
+* console.log some information when the play event is triggered [jsFiddle](http://jsfiddle.net/popcornjs/UuLsj/)
11 instance-methods/_posts/2012-12-12-mute.md
@@ -0,0 +1,11 @@
+# mute #
+
+## Purpose ##
+
+Toggle muting of the video, switching whether the video is muted or not.
+
+A mute event will be fired when mute is triggered
+
+## Example ##
+
+* mute the video at 2 seconds [jsFiddle](http://jsfiddle.net/popcornjs/q2B8y/)
16 instance-methods/_posts/2012-12-12-play.md
@@ -0,0 +1,16 @@
+# play #
+
+## Purpose ##
+
+Play the video.
+
+When the video plays a play event is triggered
+
+## Options ##
+
+* **val** - optional parameter that will seek to a specified time ( in seconds ) and play the video, short hand for .currentTime( val ).play();
+
+## Example ##
+
+* play the video [jsFiddle](http://jsfiddle.net/popcornjs/a4t4U/)
+* play the video and at 1 second seek to 3 seconds and continue playing using shorthand [jsFiddle](http://jsfiddle.net/popcornjs/hhtEA/)
20 instance-methods/_posts/2012-12-12-playbackrate.md
@@ -0,0 +1,20 @@
+# playbackrate #
+
+## Purpose ##
+
+Get/set the Popcorn video object instance playbackRate
+
+## Options ##
+
+* **rate** - an optional parameter that if it exists will set the playback rate, and if it does not, will return the playback rate
+
+## Example ##
+
+ var p = Popcorn( "#video" );
+
+ // returns the current playback rate
+ p.playbackrate();
+
+ // set the playback rate
+ p.playbackrate( 30 );
+
13 instance-methods/_posts/2012-12-12-position.md
@@ -0,0 +1,13 @@
+# position #
+
+## Purpose ##
+
+Get the calculated top, right, bottom, left, width & height of a calling Popcorn instance.
+
+## Options ##
+
+* Returns the calculated bounding box object of the calling Popcorn instance
+
+## Example ##
+
+* console.log the position of the given instance [jsFiddle](http://jsfiddle.net/popcornjs/ZGD6D/)
21 instance-methods/_posts/2012-12-12-roundTime.md
@@ -0,0 +1,21 @@
+# roundTime() #
+
+## Purpose ##
+
+roundTime() returns the media's current time rounded to the closest second. roundTime() takes no arguments.
+
+## Options ##
+
+* returns number
+
+## Use Cases ##
+
+* get the currentTime of the media to the closest second as opposed to an exact value
+
+## Examples ##
+
+* Show a rounded current time every timeUpdate cycle [jsFiddle](http://jsfiddle.net/popcornjs/Nd7js/)
+
+## Related ##
+
+* currentTime()
19 instance-methods/_posts/2012-12-12-toggle.md
@@ -0,0 +1,19 @@
+# toggle( pluginName ) #
+
+## Purpose ##
+
+toggle is used to turn on and off events of plugin type. This provides the user with the ability to easily turn on and off events as they see fit. Something to note is that toggling events on/off does not mean that they will be hidden when toggled off. It simply means that events will not longer be fired of that plugin type, i.e start, end, onFrame will not be fired if toggled off. toggle takes the following argument:
+
+## Options ##
+
+* **pluginName** - a string of the name of the plugin, i.e. footnote
+
+## Use Cases ##
+
+* Toggle a plugin on and off because of a user interaction
+* Play the video through once without popcorn events and once with popcorn events
+
+## Examples ##
+
+* Button to toggle events on and off [jsFiddle](http://jsfiddle.net/popcornjs/RbVKJ/1/)
+* Play video without events on first play through, then with events there after [jsFiddle](http://jsfiddle.net/popcornjs/McBEv/)
23 instance-methods/_posts/2012-12-12-trigger.md
@@ -0,0 +1,23 @@
+# Trigger #
+
+## Purpose ##
+
+Trigger an event; optionally pass an object of data through to the event handling callback. Allows custom events.
+
+Any of the follow event types may be used with .trigger() : loadstart, progress, suspend, emptied, stalled, play, pause, loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough, seeking, seeked, timeupdate, ended, ratechange, durationchange, volumechange.
+
+Trigger also accepts custom events.
+
+## Options ##
+
+* **eventName** - the name of the event to be triggered
+* **dataObject** - optional data object
+
+## Use Cases ##
+
+* Trigger an event to be fired when something happens, i.e., the video reaches halfway done, so trigger custom event "halfdone" which is listened for somewhere else
+
+## Examples ##
+
+* Trigger play [jsFiddle](http://jsfiddle.net/popcornjs/r8wVe/)
+* When half of the video has loaded, pass along a data object and log some data [jsFiddle](http://jsfiddle.net/popcornjs/GKkQx/)
14 instance-methods/_posts/2012-12-12-unlisten.md
@@ -0,0 +1,14 @@
+# unlisten #
+
+## Purpose ##
+
+Unbind all events of specified type, or by string name
+
+## Options ##
+
+* **eventName** - either a native or custome event name
+* **callbackName** - string; named callback
+
+## Example ##
+
+* stop listening to events of the type play [jsFiddle](http://jsfiddle.net/popcornjs/4NbWV/)
17 instance-methods/_posts/2012-12-12-unmute.md
@@ -0,0 +1,17 @@
+# unmute() #
+
+## Purpose ##
+
+unmute() simply unmutes the media of a given instance. If the media is already not muted, nothing will happen. unmute() takes no arguments.
+
+## Use Cases ##
+
+* A video is muted and you want to programmatically unmute the media
+
+## Example ##
+
+* Unmutes a video that begins muted [jsFiddle](http://jsfiddle.net/popcornjs/kMXzC/)
+
+## Related ##
+
+* mute()
15 instance-methods/_posts/2012-12-12-volume.md
@@ -0,0 +1,15 @@
+# volume #
+
+## Purpose ##
+
+Get or Set the Popcorn video object instance volume
+
+Calling the .volume( volumeValue ) method will trigger a "volumechange" event.
+
+## Options ##
+
+* **val** - if **val** exists, we will set the volume of the video, if not we will get
+
+## Examples ##
+
+* get and set the volume [jsFiddle])(http://jsfiddle.net/popcornjs/beQ6C/)
0  instance-property/2012-12-12-index.md
No changes.
19 instance-property/_posts/2012-12-12-frameanimation.md
@@ -0,0 +1,19 @@
+# frameAnimation #
+
+## Purpose ##
+
+Setting the Popcorn constructor's option object property frameAnimation to true allows you to opt-in your playback to be managed by a requestAnimationFrame loop, resulting in up to 60 fps playback. This will also grant the use of the frame callback method in any plugins that implement it.
+
+## Options ##
+
+Popcorn("#video-element-id", { frameAnimation: true })
+
+* **frameAnimation** - boolean value stating whether to use frameAnimation or not
+
+## Use Case ##
+
+* Firing events on a per frame level, increasing accuracy
+
+## Examples ##
+
+* Update the currentTime of a video [jsFiddle](http://jsfiddle.net/popcornjs/JVUdb/)
9 instance-property/_posts/2012-12-12-media.md
@@ -0,0 +1,9 @@
+# media #
+
+## Purpose ##
+
+Per instance property containing either the HTMLVideoElement or HTMLAudioElement object reference.
+
+## Example ##
+
+* console.log the instances media [jsFiddle](http://jsfiddle.net/popcornjs/R5LHE/)
19 instance-property/_posts/2012-12-12-popcorninstance.md
@@ -0,0 +1,19 @@
+# Popcorn #
+
+## Purpose ##
+
+Creates and returns a new Popcorn video object instance.
+
+All Popcorn instance methods, plugins and callbacks are chained directly from a Popcorn Instance via it's prototype — this means that the context is always the instance.
+
+## Options ##
+
+* **id** - the id of the video element
+* **optionsObject** - an options object for providing additional options to the popcorn instance, things like frameAnimation and frameRate can be specified here as well as plugin defaults.
+* returns a Popcorn instance
+
+## Examples ##
+
+* Create a popcorn instance [jsFiddle](http://jsfiddle.net/popcornjs/Y2uK7/)
+* Showing the context within various instance methods, as well has how to create an instance [jsFiddle](http://jsfiddle.net/popcornjs/G3Csf/)
+* Also showing context but with a plugin instead [jsFiddle](http://jsfiddle.net/popcornjs/GmNEY/)
0  media-methods/2012-12-12-index.md
No changes.
18 media-methods/_posts/2012-12-12-buffered.md
@@ -0,0 +1,18 @@
+# buffered() #
+
+## Purpose ##
+
+buffered() is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. buffered() returns a [timeranges object](http://www.w3.org/TR/html5/video.html#normalized-timeranges-object) that describes to the user how much of the video has been loaded. The function takes no arguements.
+
+## Options ##
+
+* returns - [timeRanges objects](http://www.w3.org/TR/html5/video.html#normalized-timeranges-object)
+
+## Use Cases ##
+
+* You want to wait until a certain amount of the video has been loaded before beginning playback or allowing the user to interact with the video
+
+## Examples ##
+
+* Show buffered data on page load [jsFiddle](http://jsfiddle.net/popcornjs/LmeLN/)
+* Play the video when more then half of the video has loaded [jsFiddle](http://jsfiddle.net/popcornjs/QRSZE/1/)
19 media-methods/_posts/2012-12-12-controls.md
@@ -0,0 +1,19 @@
+# controls( flag ) #
+
+## Purpose ##
+
+controls is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. If controls is active, the video will be shown with its native set of controls ( play, timebar, volume, ect ). When controls is not active it will not show any of the controls overlaid over the video.
+
+## Options ##
+
+* **flag** - boolean value specifying whether to show or hide the controls
+
+## Use Cases ##
+
+* Autoplay the video, showing no controls
+* Show controls initially, then on play, hide the controls from the user
+
+## Examples ##
+
+* Hide controls [jsFiddle](http://jsfiddle.net/popcornjs/z3z5w/)
+* Show/hide controls every other second [jsFiddle](http://jsfiddle.net/popcornjs/e7rys/)
13 media-methods/_posts/2012-12-12-ended.md
@@ -0,0 +1,13 @@
+# ended() #
+
+## Purpose ##
+
+ended() is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. ended() is fired when the video has reached the end of its playback. ended() takes no arguments.
+
+# Use Cases #
+
+* Fire an event when the video has finished playing
+
+## Examples ##
+
+* Log some information when the video has finished [jsFiddle](http://jsfiddle.net/popcornjs/hUYmK/1/)
15 media-methods/_posts/2012-12-12-load.md
@@ -0,0 +1,15 @@
+# load() #
+
+## Purpose ##
+
+load() is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype method of the same name. The load() method allows the user to force a reload of the current video, making it play from the beginning. The function takes no arguements. Once the video has loaded it will take its default state as it was set when the video was instantiated ( if it was muted, if autoplay was set, etc ).
+
+## Use cases ##
+
+* Start the video from the beginning again
+* Change a video source mid way through playback
+
+## Examples ##
+
+* Log some data at 1 second then reload the video at 3 seconds [jsFiddle](http://jsfiddle.net/popcornjs/dTm9J/)
+* Log some data at 1 second, then change the source of the video and setting it to autoplay [jsFiddle](http://jsfiddle.net/popcornjs/AuX6B/)
17 media-methods/_posts/2012-12-12-loop.md
@@ -0,0 +1,17 @@
+# loop( flag ) #
+
+controls is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. When loop is set to true, it will restart the video when it finishes. By default Popcorn videos will not loop.
+
+## Options ##
+
+* **flag** - boolean value specifying whether or not to loop the video
+
+## Use Cases ##
+
+* Continuosly play the video
+* Perform different actions on each playthrough
+
+## Examples ##
+
+* Continuosly play [jsFiddle](http://jsfiddle.net/popcornjs/H9J4C/)
+* Log something at an incrementing time each loop over the video [jsFiddle](http://jsfiddle.net/popcornjs/MAn7J/)
22 media-methods/_posts/2012-12-12-muted.md
@@ -0,0 +1,22 @@
+# muted( flag ) #
+
+## Purpose ##
+
+muted is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. Depending on the state of the flag, muted will either start playing muted or unmuted ( default is unmuted ).
+
+## Options ##
+
+* **flag** - boolean value stating whether to mute the video or not
+
+## Use Cases ##
+
+* mute/unmute the video as needed
+
+## Examples ##
+
+* Mute the video as it starts [jsFiddle](http://jsfiddle.net/popcornjs/5Ysdr/)
+
+## Related ##
+
+* mute
+* unmute
16 media-methods/_posts/2012-12-12-pause.md
@@ -0,0 +1,16 @@
+# pause #
+
+## Purpose ##
+
+Pauses the video.
+
+When the video pauses a pause event is triggered
+
+## Options ##
+
+* **val** - optional parameter that will seek to a specified time ( in seconds ) and pause the video, short hand for .currentTime( val ).pause();
+
+## Example ##
+
+* pause the video at 2 seconds [jsFiddle(http://jsfiddle.net/popcornjs/sUDwA/)
+* at 1 second, seek to 5 seconds and pause using shorthand [jsFiddle](http://jsfiddle.net/popcornjs/CjBuZ/)
18 media-methods/_posts/2012-12-12-paused.md
@@ -0,0 +1,18 @@
+# paused() #
+
+## Purpose ##
+
+paused() is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. paused() informs the user of whether or not the video is currently paused. It takes not arugements.
+
+## Options ##
+
+* returns - boolean value ( true/false )
+
+## Use Cases ##
+
+* Perform an action when the video is paused
+
+## Examples ##
+
+* add a footnote everytime the video is paused [jsFiddle](http://jsfiddle.net/popcornjs/prdB6/1/)
+
19 media-methods/_posts/2012-12-12-played.md
@@ -0,0 +1,19 @@
+# played() #
+
+## Purpose ##
+
+played() is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. played() allows the user to get information on how much of the video has been played so far in the form of a [timeRanges object](). It takes no arguements
+
+## Options ##
+
+* returns - [timeRanges Object]()
+
+## Use Cases ##
+
+* Update the user on how much of the video they have watched so far
+* Show content depending on how much of the video the user has watched
+
+## Examples ##
+
+* Show how much has been played at 1 second [jsFiddle](http://jsfiddle.net/popcornjs/uWUjJ/)
+* Show how much of the video has been played as a percentage as the video is playing [jsFiddle](http://jsfiddle.net/popcornjs/LkfJL/1/)
25 media-methods/_posts/2012-12-12-preload.md
@@ -0,0 +1,25 @@
+# preload( state ) #
+
+## Purpose ##
+
+preload is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. Preload provides a hint to the user agent as to how much of the video to preloaded. If autoplay is set to true, preload is ignored ( autoplay will try and play the video right away ). If an incorrect value is given, it defaults to auto.
+
+## Options ##
+
+* **state** - state takes the form of one of the following values:
+
+ * auto - begins loading data as soon as possible
+ * metadata - only loads the videos metadata (dimensions, first frame, track list, duration, etc)
+ * none - loads no data
+
+## Use Cases ##
+
+* There is a high chance your users are on a very slow connection and want to ensure the rest of the webpage loads quickly ( state = none )
+* Begin loading the video ASAP to ensure a smooth playback
+* We want to get metadata from the video because we may be performing calculations on the videos duration, size, etc
+
+## Examples ##
+
+* Preload with auto specified [jsFiddle](http://jsfiddle.net/popcornjs/Y32gd/)
+* Preload with metadata specified [jsFiddle](http://jsfiddle.net/popcornjs/z7fAF/)
+* Preload with none specified [jsFiddle](http://jsfiddle.net/popcornjs/cucwZ/)
24 media-methods/_posts/2012-12-12-readystate.md
@@ -0,0 +1,24 @@
+# readyState() #
+
+## Purpose ##
+
+readyState() is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. readystate returns a value from 0 - 4 describing at which state in loading the video is at. readystate() takes no arguements.
+
+## Options ##
+
+* returns:
+ * 0 ( HAVE_NOTHING ) - no information regarding the media source is available
+ * 1 ( HAVE_METADATA ) - duration and dimensions of the video are available
+ * 2 ( HAVE_CURRENT_DATA ) - enough data for the immediate playback of the current position
+ * 3 ( HAVE_FUTURE_DATA ) - same as readyState 2 but the the video can seek forwards at least a small bit before returning to readyState 2
+ * 4 ( HAVE_ENOUGH_DATA ) = same as readyState 3 but the user agent has estimated that data is being fetched at a rate that it will not stall playback before the end of the video
+
+See the [HTML5 Video spec for readyStates](http://www.w3.org/TR/html5/video.html#dom-media-have_nothing) for more details
+
+## Use Cases ##
+
+* Perform tasks as soon as data is available by checking readyStates
+
+## Examples ##
+
+* Basic example showcasing readyStates [jsFiddle](http://jsfiddle.net/popcornjs/Qj8xX/)
17 media-methods/_posts/2012-12-12-seekable.md
@@ -0,0 +1,17 @@
+# seekable() #
+
+## Purpose ##
+
+seekable() is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. seekable() takes no arguments and provides the user with information on how much of the media they can currently seek through.
+
+## Options ##
+
+* returns - [TimeRanges object]()
+
+## Use Cases ##
+
+* Dont show the timeline until the user is able to seek through a certain amount of the video
+
+## Examples ##
+
+* Hide timeline until the user can seek through over half of the video [jsFiddle](http://jsfiddle.net/popcornjs/27g3j/1/)
17 media-methods/_posts/2012-12-12-seeking.md
@@ -0,0 +1,17 @@
+# seeking() #
+
+## Purpose ##
+
+seeking() is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. seeking() describes whether or not the current popcorn instances video is seeking or not. seeking() takes no arguements.
+
+## Options ##
+
+* returns - boolean value ( true/false )
+
+## Use Cases ##
+
+* Perform actions while the user seeks through your video
+
+## Examples ##
+
+* Small example to show when the user is seeking [jsFiddle](http://jsfiddle.net/popcornjs/gquDv/)
120 mobile.css
@@ -0,0 +1,120 @@
+body {
+ margin:0px;
+ padding:0px;
+}
+
+#header {
+ position:static;
+}
+
+#header h1 {
+ margin:0px;
+ text-align:center;
+}
+
+#subheader {
+ position:static;
+ text-align:center;
+}
+
+#subheader h1 {
+ display:none;
+}
+
+#subheader small {
+ position:static;
+}
+
+#sidebar {
+ display:none;
+}
+
+#scrollable {
+ position:static;
+}
+
+#content {
+ margin:0px;
+ max-width:none;
+ padding:10px;
+ position:static;
+}
+
+#home,
+#index {
+ margin:0px 10px;
+}
+
+#home h1,
+#index h2 {
+ border:none;
+ color:#CCCCCC;
+ font-size:20px;
+ font-weight:bold;
+ margin:10px 0px;
+ padding:0px;
+ text-shadow:#FFFFFF 0px 1px 0px;
+}
+
+#home h2 a,
+#index ul li a {
+ text-shadow:#FFFFFF 0px 1px 1px;
+}
+
+#home ul,
+#index ul {
+ background-color:#F9F9F9;
+ border:1px solid #CCCED0;
+ -moz-border-radius:6px;
+ -webkit-border-radius:6px;
+ border-radius:6px;
+ display:block;
+ margin:0px 0px 20px 0px;
+ padding:0px;
+ float:none;
+}
+
+#home ul li,
+#index ul li {
+ border-bottom:1px solid #CCCED0;
+ display:block;
+ float:none;
+ height:100%;
+ margin:0px;
+ padding:0px;
+ width:100%;
+}
+
+#home ul li:last-child,
+#index ul li:last-child {
+ border-bottom:none;
+}
+
+#home li h2 {
+ margin:0px;
+ padding:0px;
+}
+
+#home li h2 a,
+#index li a {
+ background:url(arrow.png) no-repeat 100% 50%;
+ color:#66686A;
+ display:block;
+ font-size:16px;
+ font-weight:normal;
+ margin:0px;
+ padding:10px 20px;
+}
+
+#home li span {
+ display:none;
+}
+
+#index {
+ -webkit-column-width: auto;
+ -webkit-column-rule-width: auto;
+ -moz-column-width: auto;
+ -moz-column-rule-width: auto;
+ column-width: auto;
+ column-rule-width: auto;
+}
0  modules/2012-12-12-index.md
No changes.
36 modules/_posts/2012-12-12-data-timeline-sources.md
@@ -0,0 +1,36 @@
+# data-timeline-sources #
+
+## Purpose ##
+
+The data-timeline-sources module adds functionality to the Popcorn.js core to parse custom data-timeline-sources attributes on HTML elements.
+
+This is primarily used in association with Popcorn's parsers and allows the user to specify the source of the data to be parsed on the video element inside the data-timeline-sources attribute. This allows popcorn to create a custom instance based on the data in data-timeline-sources.
+
+## Examples ##
+
+ <html>
+ <head>
+ <script src="popcorn-complete.js"></script>
+ </head>
+ <body>
+ <video id="video" data-timeline-sources="data/data.json"
+ controls
+ width= '250px'
+ poster="../../test/poster.png">
+
+ <source id='mp4'
+ src="../../test/trailer.mp4"
+ type='video/mp4; codecs="avc1, mp4a"'>
+
+ <source id='ogv'
+ src="../../test/trailer.ogv"
+ type='video/ogg; codecs="theora, vorbis"'>
+
+ <p>Your user agent does not support the HTML5 Video element.</p>
+
+ </video>
+ <div id="footnote-container"></div>
+ <div id="map-container"></div>
+ <div id="iframe-container"></div>
+ </body>
+ </html>
51 modules/_posts/2012-12-12-sequence.md
@@ -0,0 +1,51 @@
+# Sequence #
+
+## Purpose ##
+
+Create video clip sequences that playback seamlessly
+
+## Options ##
+
+sequence( containerId, sourcesArray )
+
+* **containerId** - the id of the HTML element in which the videos will populate
+* **sourcesArray - an array of objects, which each contain the following:
+ ** **src** - path to your media source file
+ ** **in** - start time for this particular media
+ ** **out** - end time for this particular media
+
+the sequencer also provides the following methods:
+
+* **eq( index )** - return a popcorn object for the given object from the sourcesArray
+ ** **index** - the position in the sourcesArray to get the object from
+* **play()** - plays the sequence
+* **exec( time, callback )** - executes a function at a given time in the sequence
+ ** **time** - the time in the sequence in which **callback** will execute
+ ** **callback** - the function that we will execute
+* **listen( eventName, callback )** - listen for an event and fire a callback when that event is triggered
+ **eventName** - the name of the event to listen for i.e. play, pause, timeupdate, canplayall, etc
+ **callback** - the function to run when the event has been fired
+
+## Examples ##
+
+ var sequence = Popcorn.sequence(
+ "container-id",
+ [
+ {
+ src: "assets/snowdriving.ogv",
+ in: 0,
+ out: 5
+ },
+ {
+ src: "assets/snowdriving.ogv",
+ in: 7,
+ out: 10
+ },
+ {
+ src: "assets/snowdriving.ogv",
+ in: 3,
+ out: 6
+ }
+ ]);
+
+[jsFiddle Example](http://jsfiddle.net/jmTgD/1/)
0  parsers/2012-12-12-index.md
No changes.
47 parsers/_posts/2012-12-12-parserJSON.md
@@ -0,0 +1,47 @@
+# JSON parser #
+
+## Purpose ##
+
+The JSON parser allows the user to parse json data that contains popcorn data in order to populate a popcorn instance.
+
+The user sepcifies the the source of there json file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the sepcified file.
+
+## Options ##
+
+* **data-timeline-sources** - a media element attribute that specifies the source of the file to be parsed
+
+## Use Case ##
+
+* Parse a json file of popcorn data
+
+## Example ##
+
+* Parses a popcorn json file ( this examples is assuming your json file is called data.json ) and that you are using data-timeline-sources
+
+ <html>
+ <head>
+ <script src="popcorn-complete.js"></script>
+ </head>
+ <body>
+ <video id="video" data-timeline-sources="data/data.json"
+ controls
+ width= '250px'
+ poster="../../test/poster.png">
+
+ <source id='mp4'
+ src="../../test/trailer.mp4"
+ type='video/mp4; codecs="avc1, mp4a"'>
+
+ <source id='ogv'
+ src="../../test/trailer.ogv"
+ type='video/ogg; codecs="theora, vorbis"'>
+
+ <p>Your user agent does not support the HTML5 Video element.</p>
+
+ </video>
+ <div id="footnote-container"></div>
+ <div id="map-container"></div>
+ <div id="iframe-container"></div>
+ </body>
+ </html>
+
46 parsers/_posts/2012-12-12-parserSBV.md
@@ -0,0 +1,46 @@
+# SBV parser #
+
+## Purpose ##
+
+The SBV parser allows the user to parse SBV subtitle data in order to populate a subtitle track event.
+
+The user sepcifies the the source of there SBV file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the sepcified file.
+
+## Options ##
+
+* **data-timeline-sources** - a media element attribute that specifies the source of the file to be parsed
+
+## Use Case ##
+
+* Parse a SBV file of subtitle data
+
+## Example ##
+
+* Parses a popcorn SBV subtitle file to populate a subtitle track
+
+ <html>
+ <head>
+ <script src="popcorn-complete.js"></script>
+ </head>
+ <body>
+ <video id="video" data-timeline-sources="data/data.json"
+ controls
+ width= '250px'
+ poster="../../test/poster.png">
+
+ <source id='mp4'
+ src="../../test/trailer.mp4"
+ type='video/mp4; codecs="avc1, mp4a"'>
+
+ <source id='ogv'
+ src="../../test/trailer.ogv"
+ type='video/ogg; codecs="theora, vorbis"'>
+
+ <p>Your user agent does not support the HTML5 Video element.</p>
+
+ </video>
+ <div id="footnote-container"></div>
+ <div id="map-container"></div>
+ <div id="iframe-container"></div>
+ </body>
+ </html>
46 parsers/_posts/2012-12-12-parserSRT.md
@@ -0,0 +1,46 @@
+# SRT parser #
+
+## Purpose ##
+
+The SRT parser allows the user to parse SRT subtitle data in order to populate a subtitle track event.
+
+The user sepcifies the the source of there SRT file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the sepcified file.
+
+## Options ##
+
+* **data-timeline-sources** - a media element attribute that specifies the source of the file to be parsed
+
+## Use Case ##
+
+* Parse a SRT file of subtitle data
+
+## Example ##
+
+* Parses a popcorn SRT subtitle file to populate a subtitle track
+
+ <html>
+ <head>
+ <script src="popcorn-complete.js"></script>
+ </head>
+ <body>
+ <video id="video" data-timeline-sources="data/data.json"
+ controls
+ width= '250px'
+ poster="../../test/poster.png">
+
+ <source id='mp4'
+ src="../../test/trailer.mp4"
+ type='video/mp4; codecs="avc1, mp4a"'>
+
+ <source id='ogv'
+ src="../../test/trailer.ogv"
+ type='video/ogg; codecs="theora, vorbis"'>
+
+ <p>Your user agent does not support the HTML5 Video element.</p>
+
+ </video>
+ <div id="footnote-container"></div>
+ <div id="map-container"></div>
+ <div id="iframe-container"></div>
+ </body>
+ </html>
46 parsers/_posts/2012-12-12-parserSSA.md
@@ -0,0 +1,46 @@
+# SSA parser #
+
+## Purpose ##
+
+The SSA parser allows the user to parse SSA subtitle data in order to populate a subtitle track event.
+
+The user sepcifies the the source of there SSA file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the sepcified file.
+
+## Options ##
+
+* **data-timeline-sources** - a media element attribute that specifies the source of the file to be parsed
+
+## Use Case ##
+
+* Parse a SSA file of subtitle data
+
+## Example ##
+
+* Parses a popcorn SSA subtitle file to populate a subtitle track
+
+ <html>
+ <head>
+ <script src="popcorn-complete.js"></script>
+ </head>
+ <body>
+ <video id="video" data-timeline-sources="data/data.json"
+ controls
+ width= '250px'
+ poster="../../test/poster.png">
+
+ <source id='mp4'
+ src="../../test/trailer.mp4"
+ type='video/mp4; codecs="avc1, mp4a"'>
+
+ <source id='ogv'
+ src="../../test/trailer.ogv"
+ type='video/ogg; codecs="theora, vorbis"'>
+
+ <p>Your user agent does not support the HTML5 Video element.</p>
+
+ </video>
+ <div id="footnote-container"></div>
+ <div id="map-container"></div>
+ <div id="iframe-container"></div>
+ </body>
+ </html>
46 parsers/_posts/2012-12-12-parserTTML.md
@@ -0,0 +1,46 @@
+# TTML parser #
+
+## Purpose ##
+
+The TTML parser allows the user to parse TTML subtitle data in order to populate a subtitle track event.
+
+The user sepcifies the the source of there TTML file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the sepcified file.
+
+## Options ##
+
+* **data-timeline-sources** - a media element attribute that specifies the source of the file to be parsed
+
+## Use Case ##
+
+* Parse a TTML file of subtitle data
+
+## Example ##
+
+* Parses a popcorn TTML subtitle file to populate a subtitle track
+
+ <html>
+ <head>
+ <script src="popcorn-complete.js"></script>
+ </head>
+ <body>
+ <video id="video" data-timeline-sources="data/data.json"
+ controls
+ width= '250px'
+ poster="../../test/poster.png">
+
+ <source id='mp4'
+ src="../../test/trailer.mp4"
+ type='video/mp4; codecs="avc1, mp4a"'>
+
+ <source id='ogv'
+ src="../../test/trailer.ogv"
+ type='video/ogg; codecs="theora, vorbis"'>
+
+ <p>Your user agent does not support the HTML5 Video element.</p>
+
+ </video>
+ <div id="footnote-container"></div>
+ <div id="map-container"></div>
+ <div id="iframe-container"></div>
+ </body>
+ </html>
46 parsers/_posts/2012-12-12-parserTTXT.md
@@ -0,0 +1,46 @@
+# TTXT parser #
+
+## Purpose ##
+
+The TTXT parser allows the user to parse TTXT subtitle data in order to populate a subtitle track event.
+
+The user sepcifies the the source of there TTXT file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the sepcified file.
+
+## Options ##
+
+* **data-timeline-sources** - a media element attribute that specifies the source of the file to be parsed
+
+## Use Case ##
+
+* Parse a TTXT file of subtitle data
+
+## Example ##
+
+* Parses a popcorn TTXT subtitle file to populate a subtitle track
+
+ <html>
+ <head>
+ <script src="popcorn-complete.js"></script>
+ </head>
+ <body>
+ <video id="video" data-timeline-sources="data/data.json"
+ controls
+ width= '250px'
+ poster="../../test/poster.png">
+
+ <source id='mp4'
+ src="../../test/trailer.mp4"
+ type='video/mp4; codecs="avc1, mp4a"'>
+
+ <source id='ogv'
+ src="../../test/trailer.ogv"
+ type='video/ogg; codecs="theora, vorbis"'>
+
+ <p>Your user agent does not support the HTML5 Video element.</p>
+
+ </video>
+ <div id="footnote-container"></div>
+ <div id="map-container"></div>
+ <div id="iframe-container"></div>
+ </body>
+ </html>
46 parsers/_posts/2012-12-12-parserVTT.md
@@ -0,0 +1,46 @@
+# VTT parser #
+
+## Purpose ##
+
+The VTT parser allows the user to parse VTT subtitle data in order to populate a subtitle track event.
+
+The user sepcifies the the source of there VTT file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the sepcified file.
+
+## Options ##
+
+* **data-timeline-sources** - a media element attribute that specifies the source of the file to be parsed
+
+## Use Case ##
+
+* Parse a VTT file of subtitle data
+
+## Example ##
+
+* Parses a popcorn VTT subtitle file to populate a subtitle track
+
+ <html>
+ <head>
+ <script src="popcorn-complete.js"></script>
+ </head>
+ <body>
+ <video id="video" data-timeline-sources="data/data.json"
+ controls
+ width= '250px'
+ poster="../../test/poster.png">
+
+ <source id='mp4'
+ src="../../test/trailer.mp4"
+ type='video/mp4; codecs="avc1, mp4a"'>
+
+ <source id='ogv'
+ src="../../test/trailer.ogv"
+ type='video/ogg; codecs="theora, vorbis"'>
+
+ <p>Your user agent does not support the HTML5 Video element.</p>
+
+ </video>
+ <div id="footnote-container"></div>
+ <div id="map-container"></div>
+ <div id="iframe-container"></div>
+ </body>
+ </html>
46 parsers/_posts/2012-12-12-parserXML.md
@@ -0,0 +1,46 @@
+# XML parser #
+
+## Purpose ##
+
+The XML parser allows the user to parse XML data that contains popcorn data in order to populate a popcorn instance.
+
+The user sepcifies the the source of there XML file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the sepcified file.
+
+## Options ##
+
+* **data-timeline-sources** - a media element attribute that specifies the source of the file to be parsed
+
+## Use Case ##
+
+* Parse a XML file of popcorn data
+
+## Example ##
+
+* Parses a popcorn XML file ( this examples is assuming your XML file is called data.xml ) and that you are using data-timeline-sources
+
+ <html>
+ <head>
+ <script src="popcorn-complete.js"></script>
+ </head>
+ <body>
+ <video id="video" data-timeline-sources="data/data.json"
+ controls
+ width= '250px'
+ poster="../../test/poster.png">
+
+ <source id='mp4'
+ src="../../test/trailer.mp4"
+ type='video/mp4; codecs="avc1, mp4a"'>
+
+ <source id='ogv'
+ src="../../test/trailer.ogv"
+ type='video/ogg; codecs="theora, vorbis"'>
+
+ <p>Your user agent does not support the HTML5 Video element.</p>
+
+ </video>
+ <div id="footnote-container"></div>
+ <div id="map-container"></div>
+ <div id="iframe-container"></div>
+ </body>
+ </html>
0  players/2012-12-12-index.md
No changes.
36 players/_posts/2012-12-12-baseplayer.md
@@ -0,0 +1,36 @@
+# Baseplayer #
+
+## Purpose ##
+
+The baseplayer is used to provide the user with an empty shell which emulates the HTML5 video element. This allows the user to use Popcorn.js even without a media element ( video or audio ) which allows for events to be fired off just like your typical Popcorn instance. All events, functions, and properties that Popcorn provides are extended onto the baseplayer for convenience.
+
+## Options ##
+
+* **id** - just like using a video or audio source, you pass along the id of the HTML element which the baseplayer will use ( in the form of "#id", where id is the id of your element )
+
+## Use Cases ##
+
+The baseplayer has numerous use cases, such as :
+
+* Wanting to use popcorn without a media
+* Creating a bigger global timeline in which numerous smaller popcorn instances are created from
+* Used to create a new Popcorn player plugin, as all new players inherit from the baseplayer ( see [this detailed guide]() on creating a player plugin )
+
+## Examples ##
+
+ Popcorn.player( "baseplayer" );
+
+ var pop = Popcorn( "elementID" );
+
+ pop.play();
+
+ // Add popcorn events here and other functionality
+ pop.footnote({
+ start: 1,
+ end: 5,
+ text: "Works with the baseplayer!",
+ target: "footnote-div"
+ });
+
+// will work with 1.0
+[jsFiddle](http://jsfiddle.net/popcornjs/qQ672/)
30 players/_posts/2012-12-12-vimeo.md
@@ -0,0 +1,30 @@
+# Vimeo #
+
+## Purpose ##
+
+The vimeo player allows the use of any vimeo video with the Popcorn.js framework.
+
+The vimeo player plugin allows for the use of all functions and properties that it inherits from the [baseplayer]() ( play, pause, volume, mute, etc ). This means that once created, your vimeo instance of Popcorn will work normally like any other Popcorn instance.
+
+## Options ##
+
+* **id** - the id of the HTML element that the youtube player will populate
+* **url** - the url of the vimeo video you wish to use
+*
+* Note - Things like width and height are inherited from the HTML element that the player is populating, and if are not present, default to a width of 350px and a height of 300px
+
+## Examples ##
+
+ var pop = Popcorn.vimeo( "#video", "vimeoURL" );
+
+ pop.footnote({
+ start: 1,
+ end: 5,
+ text: "Works with vimeo!",
+ target: "footnote-div"
+ });
+
+ pop.play();
+
+// wont work until after 1.0 lands
+[jsFiddle example](http://jsfiddle.net/popcornjs/gBEek/)
30 players/_posts/2012-12-12-youtube.md
@@ -0,0 +1,30 @@
+# Youtube #
+
+## Purpose ##
+
+The youtube player allows the use of any youtube video with the Popcorn.js framework.
+
+The youtube player plugin allows for the use of all functions and properties that it inherits from the [baseplayer]() ( play, pause, volume, mute, etc ). This means that once created, your youtube instance of Popcorn will work normally like any other Popcorn instance.
+
+## Options ##
+
+* **id** - the id of the HTML element that the youtube player will populate
+* **url** - the url of the youtube video you wish to use
+*
+* Note - Things like width and height are inherited from the HTML element that the player is populating, and if are not present, default to a width of 350px and a height of 300px
+* Other youtube options such as showing youtube controls, showing related links at the end and so on, are passed in via the query string that is appended to the youtube video url. Take a look at [this documentation]() for further information.
+
+## Examples ##
+
+ var pop = Popcorn.youtube( '#video', 'http://www.youtube.com/watch?v=9oar9glUCL0' );
+
+ pop.footnote({
+ start: 1,
+ end: 5,
+ text: "Works with youtube!",
+ target: "footnote-div"
+ });
+
+ pop.play();
+
+[jsFiddle example](http://jsfiddle.net/popcornjs/whvkP/)
0  plugins/2012-12-12-index.md
No changes.
33 plugins/_posts/2012-12-12-attribution.md
@@ -0,0 +1,33 @@
+# Attribution #
+
+## Purpose ##
+
+Allows the user to add proper attribution to the various sources used on the current page. In the most basic sense, the attribution plugin adds text to a specified area on the page.
+
+## Options ##
+
+* Start [Number]: is the time that you want this plug-in to execute
+* End [Number]: is the time that you want this plug-in to stop executing
+* Target [String]: is the id of the document element that the text needs to be attached to, this target element must exist on the DOM
+* nameofwork [String]: is the title of the attribution
+* NameOfWorkUrl [String]: is a url that provides more details about the attribution
+* CopyrightHolder [String]: is the name of the person/institution that holds the rights to the attribution
+* CopyrightHolderUrl [String]: is the url that provides more details about the copyrightholder
+* license [String]: is the type of license that the work is copyrighted under
+* LicenseUrl [String]: is the url that provides more details about the ticense type
+
+## Example ##
+
+ var pop = Popcorn( "#video" );
+
+ pop.attribution({
+ start: 0,
+ end: 10,
+ nameofwork: "A Shared Culture",
+ copyrightholder:"Jesse Dylan",
+ license: "CC-BY-N6",
+ licenseurl: "http://creativecommons.org/licenses/by-nc/2.0/",
+ target: "attribdiv"
+ });
+
+* [jsFiddle Example](http://jsfiddle.net/popcornjs/AykAT/)
37 plugins/_posts/2012-12-12-bestpractice.md
@@ -0,0 +1,37 @@
+# best practice #
+
+## Purpose ##
+
+The following is a list of best practices for developers writing plugins for Popcorn.js.
+
+The goals are to provide the best user experience, to empower authors who may or may not have advanced programming skills and to make plugins general and reusable.
+
+## Style ##
+
+* Wherever possible, let the author set the styles, especially for things like fonts and colors. If you want to provide default styles, set classes and create a style sheet in the <head> that can be overridden. When setting style.display, use 'none' to hide and leave it blank to show. Do not assume the page needs your element to display as 'block', as there are other options (inline, inline-block, table, etc.). Allow absolute positioning (top, left, bottom, right) and size (width, height) in options where relevant. Accept all CSS length formats (em, px, %, etc), but percentages are preferred. If position options are provided, set container element to 'position: absolute'.
+* Assume video or any other page elements can change size. If setting size or position of elements, use percentages.
+
+## Events ##
+
+If your plugin requires resources to load from the network, don't assume it will be loaded by the time the event displays. In start, make sure all resources are loaded before displaying.
+
+* Implement frame method where appropriate for animations, such as movement or opacity.
+* Always implement _teardown. Be careful about memory leaks, and do not assume that either start or end has run.
+* Allow options to specify onStart, onFrame and onEnd callbacks that get called at the end of your start, frame and end events, with the options object and any other relevant information or elements. Accept a function or a string as the name of a global function. Callback functions should run after your code and should be wrapped in "try/catch" to prevent bad author code from taking down all of Popcorn.
+* If your plugin loads complex elements, such as large images, canvases or iframes, check for duplicates. Keep a list of created events, and if two events have the same data but don't overlap in time, re-use the first set of elements you created. Allow for an option to force no duplicates, in case the author wants to change something in a callback.
+* Optimize _setup and _teardown. When events are edited in Popcorn Maker, they are destroyed and re-created for every single change. So assume events will be created and destroyed hundreds of times, often with the same or similar values.
+
+## Interaction ##
+
+* If a user can click on your content, either to link to an external site or to engage in more detailed interaction, pause the main media.
+* If you have rich content, pause the media when a user hovers their mouse over your content for more than 0.5 seconds. When the mouse is moved off, resume playing, but only if the media was not paused in the first place. (Make sure to handle all types of events that may move the mouse, not just mouseout.)
+* Popcorn now provides a language setting. Use this to localize or translate your content wherever possible. For example, if querying Wikipedia, modify the subdomain to match the current language.) Try to allow authors to provide multiple versions of text.
+
+## Data ##
+
+* Make every effort to provide defaults or guess at values for properties that are not provided. "Guesses" should be predictable.
+* If a required property is missing, fail gracefully with start and end methods that do nothing. (New events created by Popcorn Maker will only have start and end values and must not crash.)
+* For any properties that handle multiple values, accept an array, a delimited string, a JSON encoded string or a single value. Arrays are the most flexible, but strings may be necessary, as when Popcorn event data are provided from Butter/Popcorn Maker.
+* Names of properties applied to each event's options object should be standardized where possible so they may be handled generically by callbacks and effect plugins. The following table lists common properties.
+
+<table cellpadding="0" cellspacing="0" class="c15"><tbody><tr><td class="c5"><p class="c0"><span class="c13">Property</span></p></td><td class="c11"><p class="c0"><span class="c13">Description</span></p></td><td class="c1"><p class="c0"><span class="c13">type(s)</span></p></td></tr><tr><td class="c5"><p class="c0"><span class="c6">target</span></p></td><td class="c11"><p class="c0"><span>id of element in which to place created content. Also accept a reference to the actual HTMLElement</span></p></td><td class="c1"><p class="c0"><span>string, HTMLElement</span></p></td></tr><tr><td class="c5"><p class="c0"><span class="c6">container</span></p></td><td class="c11"><p class="c0"><span>Most plugins create a new element containing the content for each event, typically a </span><span class="c6">&lt;div&gt;</span><span>. This is not typically provided by the author, but it should be attached to the options object for callbacks and effects.</span></p></td><td class="c1"><p class="c0"><span>HTMLElement</span></p></td></tr><tr><td class="c5"><p class="c0"><span class="c6">onStart,</span></p><p class="c0"><span class="c6">onFrame,</span></p><p class="c0"><span class="c6">onEnd</span></p></td><td class="c11"><p class="c0"><span>An optional callback function provided by the author that runs at the end of the start, frame and end methods, respectively. If provided as a string, plugin setup should look for the function in the global namespace, and change the property value to a reference to the function.</span></p></td><td class="c1"><p class="c0"><span>function, string</span></p></td></tr><tr><td class="c5"><p class="c0"><span class="c6">title</span></p></td><td class="c11"><p class="c0"><span>A string of text that serves as a title to accompany more detailed media. Typically plain text with no line breaks.</span></p><p class="c0 c10"><span></span></p><p class="c0"><span>Add to DOM with </span><span class="c6">document.createTextNode(options.title)</span></p></td><td class="c1"><p class="c0"><span>string</span></p></td></tr><tr><td class="c5"><p class="c0"><span class="c6">text</span></p></td><td class="c11"><p class="c0"><span>A string of text that may serve as the main content or possibly a caption. Typically plain text with possible line breaks.</span></p><p class="c0 c10"><span></span></p><p class="c0"><span>Add to DOM by splitting text by line breaks and alternating text nodes with </span><span class="c6">&lt;br&gt;</span><span> elements.</span></p></td><td class="c1"><p class="c0"><span>string</span></p></td></tr><tr><td class="c5"><p class="c0"><span class="c6">html</span></p></td><td class="c11"><p class="c0"><span>Arbitrary html content. Accept either a string or a DOM Node.</span></p></td><td class="c1"><p class="c0"><span>string, Node</span></p></td></tr><tr><td class="c5"><p class="c0"><span class="c6">url</span></p></td><td class="c11"><p class="c0"><span>Location of an external resource on the network, such as an image or an iframe. URL may be used directly or parsed for an identifier</span></p></td><td class="c1"><p class="c0"><span>string</span></p></td></tr><tr><td class="c5"><p class="c0"><span class="c6">link</span></p></td><td class="c11"><p class="c0"><span>A URL that will serve as an active, clickable link.</span></p></td><td class="c1"><p class="c0"><span>string</span></p></td></tr><tr><td class="c5"><p class="c0"><span class="c6">id</span></p></td><td class="c11"><p class="c0"><span>An identifier for a specific, external resource (e.g. a twitter user id, a single flickr photo, etc.)</span></p></td><td class="c1"><p class="c0"><span>string, number</span></p></td></tr><tr><td class="c5"><p class="c0"><span class="c6">classes</span></p></td><td class="c11"><p class="c0"><span>Any classes that may be applied to the container. Accept an array of strings or a string delimited by commas or spaces. (Use 'classes' here because 'class' is a reserved word in Javascript.)</span></p></td><td class="c1"><p class="c0"><span>array, string</span></p></td></tr><tr><td class="c5"><p class="c0"><span class="c6">style</span></p></td><td class="c11"><p class="c0"><span>CSS that may be added to the container (</span><span class="c6">.style.cssText = options.style</span><span>). If you implement this, run it early so can override specific style attributes as necessary.</span></p></td><td class="c1"><p class="c0"><span>string</span></p></td></tr></tbody></table>
30 plugins/_posts/2012-12-12-code.md
@@ -0,0 +1,30 @@
+# Code #
+
+## Purpose ##
+
+Allows for the ability to run arbitrary code ( JavaScript functions ) according to video timing.
+
+## Options ##
+
+* start [Number]: the time in seconds when the mustache template should be rendere in the target divd
+* end [Number]: the time in seconds when the rendered mustache template should be removed from the target div
+* onStart [function]: the function to be run when the start time is reached.
+* onFrame [function]: a function to be run on each paint call (e.g., called ~60 times per second) between the start and end times.
+* onEnd [function]: a function to be run when the end time is reached.
+
+## Example ##
+
+ var pop = Popcorn( "#video" );
+
+ pop.code({
+ start: 1,
+ end: 3,
+ onStart: function( options ) {
+ document.getElementById( "test1" ).innerHTML = "Yes";
+ },
+ onEnd: function( options ) {
+ document.getElementById( "test1" ).innerHTML = "No";
+ }
+ });
+
+* [jsFiddle Example](http://jsfiddle.net/popcornjs/Wmskz/)
47 plugins/_posts/2012-12-12-facebook.md
@@ -0,0 +1,47 @@
+# Facebook #
+
+## Purpose ##
+
+The facebook plugin allows the user to bring popular aspects from facebook and display it to the user between a gien start and end time. Features a like box, a stream of a users friends, comments on a specific post, and many more.
+
+## Options ##
+
+* Sets options according to user input or default values
+* Type [String]: is the name of the plugin in fbxml format. Options: LIKE (default), LIKE-BOX, ACTIVITY, FACEPILE
+* Target [String]: is the id of the document element that the text needs to be attached to. This target element must exist on the DOM
+* Start [Number]: is the time that you want this plug-in to execute
+* End [Number]: is the time that you want this plug-in to stop executing
+*
+* Other than the mandatory four parameters, there are several optional parameters (Some options are only applicable to certain plugins)
+*
+* Action [String]: like button will either "Like" or "Recommend". Options: recommend / like(default)
+* Always_post_to_friends [Boolean]: live-stream posts will be always be posted on your facebook wall if true. Options: true / false(default)
+* Border_color [String]: border color of the activity feed. Names (i.e: "white") and html color codes are valid
+* Colorscheme [String]: changes the color of almost all plugins. Options: light(default) / dark
+* Event_app_id [String]: an app_id is required for the live-stream plugin
+* Font [String]: the font of the text contained in the plugin. Options: arial / segoe ui / tahoma / trebuchet ms / verdana / lucida grande
+* Header [Boolean]: displays the title of like-box or activity feed. Options: true / false(default)
+* Href [String]: url to apply to the plugin. Default is current page
+* Layout [String]: changes the format of the 'like' count (written in english or a number in a callout). Options: box_count / button_count / standard(default)
+* Max_rows [Number]: number of rows to disperse pictures in facepile. Default is 1
+* Recommendations [Boolean]: shows recommendations, if any, in the bottom half of activity feed. Options: true / false(default)
+* Show_faces [Boolean]: show pictures beside like button and like-box. Options: true / false(default)
+* Site [String]: href for activity feed. No idea why it must be "site". Default is current page
+* Stream [Boolean]: displays a the latest posts from the specified page's wall. Options: true / false(default)
+* Type [String]: determines which plugin to create. Case insensitive
+* Xid [String]: unique identifier if more than one live-streams are on one page
+
+## Example ##
+
+ var pop = Popcorn( "#video" );
+
+ pop.facebook({
+ type: "live-stream",
+ target: "activitydiv",
+ start: 1,
+ end: 10,
+ // id is from example http://developers.facebook.com/docs/reference/plugins/live-stream/
+ event_app_id: 174243249296725
+ });
+
+* [jsFiddle Example](http://jsfiddle.net/popcornjs/UC6Px/);
33 plugins/_posts/2012-12-12-flickr.md
@@ -0,0 +1,33 @@
+# Flickr #
+
+## Purpose ##
+
+The Flickr plugin allows the user to hook into the popular picture hosting site and retrieve images based on user, search term, and provided dimensions.
+
+## Options ##
+
+* Start [String]: is the time that you want this plug-in to execute (in seconds)
+* End [String]: is the time that you want this plug-in to stop executing (in seconds)
+* Userid [String]: is the id of who's Flickr images you wish to show
+* Tags [String]: is a mutually exclusive list of image descriptor tags
+* Username is the username of who's Flickr images you wish to show using both userid and username is redundant. An api_key is required when using username
+* Apikey [String]: is your own api key provided by Flickr
+* Target [String]: is the id of the document element that the images are appended to, this target element must exist on the DOM
+* Numberofimages [Number]: specify the number of images to retreive from flickr, defaults to 4
+* Height [String]: the height of the image, defaults to '50px'
+* Width [String]: the width of the image, defaults to '50px'
+* Padding [String]: number of pixels between images, defaults to '5px'
+* Border [String]: border size in pixels around images, defaults to '0px'
+
+## Example ##
+
+ var pop = Popcorn( "#video" );
+
+ pop.flickr({
+ start: 5,
+ end: 15,
+ userid: "35034346917@N01",
+ target: "flickrdiv"
+ });
+
+* [jsFiddle Example](http://jsfiddle.net/popcornjs/grMCk/);
21 plugins/_posts/2012-12-12-footnote.md
@@ -0,0 +1,21 @@
+# Popcorn Footnote Plug-in #
+
+## Purpose ##
+
+Adds text to an element on the page.
+
+## Options ##
+
+* Start [Number]: The time you want the footnote to appear.
+* End [Number]: The time you want the footnote to be hidden.
+* Text [String]: The text you want to appear in the target.
+* Target [String]: The id of the document element that the text is to be attached to. This target element must exist on the DOM
+
+## Example ##
+
+ var p = Popcorn( "#video" ).footnote({
+ start: 5,
+ end: 15,
+ text: 'This text will appear in "target". ',
+ target: "footnotediv"
+ });
25 plugins/_posts/2012-12-12-gml.md
@@ -0,0 +1,25 @@
+# GML #
+
+## Purpose ##
+
+Renders a GML tag inside an HTML element
+
+## Options ##
+
+* Start is the time that you want this plug-in to execute
+* End is the time that you want this plug-in to stop executing
+* Target is the id of the document element that you wish to render the grafiti in
+* gmltag is the numerical reference to a gml tag via 000000book.com
+
+## Example ##
+
+ var pop = Popcorn( "#video" );
+
+ pop.gml({
+ start: 0,
+ end: 5,
+ gmltag: "29582",
+ target: "gmldiv"
+ });
+
+* [jsFiddle Example](http://jsfiddle.net/popcornjs/kzwt8/)
29 plugins/_posts/2012-12-12-googlefeed.md
@@ -0,0 +1,29 @@
+# Googlefeed #
+
+## Purpose ##
+
+Adds a feed from a specified blog url into the target div
+
+## Options ##
+
+* Start [Number]: is the time that you want this plug-in to execute
+* End [Number]: is the time that you want this plug-in to stop executing
+* Target [String]: is the id of the DOM element that you want the map to appear in. This element must be in the DOM
+* Url [String]: is the url of the blog's feed you are trying to access
+* Title [String]: is the title of the blog you want displayed above the feed
+* Orientation [String]: is the orientation of the blog, accepts either Horizontal or Vertical, defaults to Vertical
+
+## Example ##
+
+ var pop = Popcorn( "#video" );
+
+ pop.googlefeed({
+ start: 0,
+ end: 15,
+ target: "feed",
+ url: "http://zenit.senecac.on.ca/~chris.tyler/planet/rss20.xml",
+ title: "Planet Feed",
+ orientation: "Vertical"
+ });
+
+* [jsFiddle Example](http://jsfiddle.net/popcornjs/rZmL8/)