Updates video component, fixes some issues with inverted secondary menus

Former-commit-id: dc76e7e492358eda781197dac820444d52a4ad62
Former-commit-id: a36b4c7f01c0d7e24d9140b7c4b889470c30ccbd

build/minified/modules/video.js

@@ -11,381 +11,416 @@
 
 ;(function ($, window, document, undefined) {
 
-  $.fn.video = function(parameters) {
+$.fn.video = function(parameters) {
-
-    var
-      settings = $.extend(true, {}, $.fn.video.settings, parameters),
-      // make arguments available
-      moduleArguments = arguments || false,
-      invokedResponse
-    ;
-
-    $(this)
-      .each(function() {
-        var
-          $module      = $(this),
-          $placeholder = $module.find(settings.selector.placeholder),
-          $playButton  = $module.find(settings.selector.playButton),
-          $embed       = $module.find(settings.selector.embed),
-
-          element       = this,
-          instance      = $module.data('module-' + settings.namespace),
-          methodInvoked = (typeof parameters == 'string'),
-
-          namespace    = settings.namespace,
-          metadata     = settings.metadata,
-          className    = settings.className,
-
-          module
-        ;
-
-        module = {
-
-          initialize: function() {
-            module.debug('Initializing video');
-            $placeholder
-              .off('.video')
-              .on('click.' + namespace, module.play)
-            ;
-            $playButton
-              .off('.video')
-              .on('click.' + namespace, module.play)
-            ;
-            $module
-              .data('module-' + namespace, module)
-            ;
-          },
 
-          // sets new video
+  var
-          change: function(source, flv) {
+    $allModules     = $(this),
-            module.debug('Changing video to ', flv);
-            $module
-              .data(metadata.source, source)
-              .data(metadata.flv, flv)
-            ;
-            settings.onChange();
-          },
 
-          // clears video embed
+    settings        = ( $.isPlainObject(parameters) )
-          reset: function() {
+      ? $.extend(true, {}, $.fn.video.settings, parameters)
-            module.debug('Clearing video embed and showing placeholder');
+      : $.fn.video.settings,
-            $module
+
-              .removeClass(className.active)
+    moduleSelector  = $allModules.selector || '',
-            ;
+
-            $embed
+    time            = new Date().getTime(),
-              .html(' ')
+    performance     = [],
-            ;
-            $placeholder
-              .show()
-            ;
-            settings.onReset();
-          },
 
-          // plays current video
+    query           = arguments[0],
-          play: function() {
+    methodInvoked   = (typeof query == 'string'),
-            module.debug('Playing video');
+    queryArguments  = [].slice.call(arguments, 1),
+
+    invokedResponse
+  ;
+
+  $(this)
+    .each(function() {
+      var
+        $module      = $(this),
+        $placeholder = $module.find(settings.selector.placeholder),
+        $playButton  = $module.find(settings.selector.playButton),
+        $embed       = $module.find(settings.selector.embed),
+        
+        eventNamespace  = '.' + settings.namespace,
+        moduleNamespace = settings.namespace + '-module', 
+
+        selector        = settings.selector,
+        className       = settings.className,
+        error           = settings.error,
+        metadata        = settings.metadata,
+        namespace       = settings.namespace,
+        
+        element         = this,
+        instance        = $module.data(moduleNamespace),
+        module
+      ;
+
+      module = {
+
+        initialize: function() {
+          module.debug('Initializing video');
+          $placeholder
+            .on('click' + eventNamespace, module.play)
+          ;
+          $playButton
+            .on('click' + eventNamespace, module.play)
+          ;
+          module.instantiate();
+        },
+
+        instantiate: function() {
+          instance = module;
+          $module
+            .data(moduleNamespace, module)
+          ;
+        },
+
+        destroy: function() {
+          module.verbose('Destroying previous instance of video');
+          $module
+            .removeData(moduleNamespace)
+            .off(eventNamespace)
+          ;
+        },
+
+        // sets new video
+        change: function(source, id, url) {
+          module.debug('Changing video to ', source, id, url);
+          $module
+            .data(metadata.source, source)
+            .data(metadata.id, id)
+            .data(metadata.url, url)
+          ;
+          settings.onChange();
+        },
+
+        // clears video embed
+        reset: function() {
+          module.debug('Clearing video embed and showing placeholder');
+          $module
+            .removeClass(className.active)
+          ;
+          $embed
+            .html(' ')
+          ;
+          $placeholder
+            .show()
+          ;
+          settings.onReset();
+        },
+
+        // plays current video
+        play: function() {
+          module.debug('Playing video');
+          var
+            source = $module.data(metadata.source) || false, 
+            url    = $module.data(metadata.url)    || false,
+            id     = $module.data(metadata.id)     || false
+          ;
+          $embed
+            .html( module.generate.html(source, id, url) )
+          ;
+          $module
+            .addClass(className.active)
+          ;
+          settings.onPlay();
+        },
+
+        generate: {
+          // generates iframe html
+          html: function(source, id, url) {
+            module.debug('Generating embed html');
             var
-              source = $module.data(metadata.source),
+              width = (settings.width == 'auto')
-              flv    = $module.data(metadata.flv)
+                ? $module.width()
-            ;
+                : settings.width,
-            $embed
+              height = (settings.height == 'auto')
-              .html( module.generate.html(source, flv) )
+                ? $module.height()
-            ;
+                : settings.height,
-            $module
+              html
-              .addClass(className.active)
             ;
-            settings.onPlay();
+            if(source && id) {
-          },
-
-          generate: {
-            // generates iframe html
-            html: function(source, flv) {
-              module.debug('Generating embed html');
-              var
-                width = (settings.width == 'auto')
-                  ? $module.width()
-                  : settings.width,
-                height = (settings.height == 'auto')
-                  ? $module.height()
-                  : settings.height,
-                html
-              ;
               if(source == 'vimeo') {
                 html = ''
-                  + '<iframe src="http://player.vimeo.com/video/' + flv + '?=' + module.generate.url(source) + '"'
+                  + '<iframe src="http://player.vimeo.com/video/' + id + '?=' + module.generate.url(source) + '"'
                   + ' width="' + width + '" height="' + height + '"'
                   + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
                 ;
               }
               else if(source == 'youtube') {
                 html = ''
-                  + '<iframe src="http://www.youtube.com/embed/' + flv + '?=' + module.generate.url(source) + '"'
+                  + '<iframe src="http://www.youtube.com/embed/' + id + '?=' + module.generate.url(source) + '"'
                   + ' width="' + width + '" height="' + height + '"'
                   + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
                 ;
               }
-              return html;
+            }
-            },
+            else if(url) {
-
+              html = ''
-            // generate url parameters
+                + '<iframe src="' + url + '"'
-            url: function(source) {
+                + ' width="' + width + '" height="' + height + '"'
-              var
+                + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
-                api      = (settings.api)
-                  ? 1
-                  : 0,
-                autoplay = (settings.autoplay)
-                  ? 1
-                  : 0,
-                hd       = (settings.hd)
-                  ? 1
-                  : 0,
-                showUI   = (settings.showUI)
-                  ? 1
-                  : 0,
-                // opposite used for some params
-                hideUI   = !(settings.showUI)
-                  ? 1
-                  : 0,
-                url = ''
               ;
-              if(source == 'vimeo') {
-                url = ''
-                  +      'api='      + api
-                  + '&amp;title='    + showUI
-                  + '&amp;byline='   + showUI
-                  + '&amp;portrait=' + showUI
-                  + '&amp;autoplay=' + autoplay
-                ;
-                if(settings.color) {
-                  url += '&amp;color=' + settings.color;
-                }
-              }
-              else if(source == 'youtube') {
-                url = ''
-                  +      'enablejsapi=' + api
-                  + '&amp;autoplay='    + autoplay
-                  + '&amp;autohide='    + hideUI
-                  + '&amp;hq='          + hd
-                  + '&amp;modestbranding=1'
-                ;
-                if(settings.color) {
-                  url += '&amp;color=' + settings.color;
-                }
-              }
-              return url;
             }
+            else {
+              module.error(error.noVideo);
+            }
+            return html;
           },
 
-          /* standard module */
+          // generate url parameters
-          debug: function(message, variableName) {
+          url: function(source) {
-            if(settings.debug) {
+            var
-              if(variableName !== undefined) {
+              api      = (settings.api)
-                console.info(settings.moduleName + ': ' + message, variableName);
+                ? 1
+                : 0,
+              autoplay = (settings.autoplay)
+                ? 1
+                : 0,
+              hd       = (settings.hd)
+                ? 1
+                : 0,
+              showUI   = (settings.showUI)
+                ? 1
+                : 0,
+              // opposite used for some params
+              hideUI   = !(settings.showUI)
+                ? 1
+                : 0,
+              url = ''
+            ;
+            if(source == 'vimeo') {
+              url = ''
+                +      'api='      + api
+                + '&amp;title='    + showUI
+                + '&amp;byline='   + showUI
+                + '&amp;portrait=' + showUI
+                + '&amp;autoplay=' + autoplay
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
               }
-              else {
+            }
-                console.info(settings.moduleName + ': ' + message);
+            if(source == 'ustream') {
+              url = ''
+                + 'autoplay=' + autoplay
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
               }
             }
-          },
+            else if(source == 'youtube') {
-          error: function(errorMessage) {
+              url = ''
-            console.warn(settings.moduleName + ': ' + errorMessage);
+                +      'enablejsapi=' + api
-          },
+                + '&amp;autoplay='    + autoplay
-          invoke: function(methodName, context, methodArguments) {
+                + '&amp;autohide='    + hideUI
+                + '&amp;hq='          + hd
+                + '&amp;modestbranding=1'
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
+              }
+            }
+            return url;
+          }
+        },
+
+        setting: function(name, value) {
+          if(value !== undefined) {
+            if( $.isPlainObject(name) ) {
+              $.extend(true, settings, name);
+            }
+            else {
+              settings[name] = value;
+            }
+          }
+          else {
+            return settings[name];
+          }
+        },
+        internal: function(name, value) {
+          if(value !== undefined) {
+            if( $.isPlainObject(name) ) {
+              $.extend(true, module, name);
+            }
+            else {
+              module[name] = value;
+            }
+          }
+          else {
+            return module[name];
+          }
+        },
+        debug: function() {
+          if(settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+            }
+          }
+        },
+        verbose: function() {
+          if(settings.verbose && settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+            }
+          }
+        },
+        error: function() {
+          module.error = Function.prototype.bind.call(console.warn, console, settings.moduleName + ':');
+        },
+        performance: {
+          log: function(message) {
             var
-              method
+              currentTime,
+              executionTime,
+              previousTime
             ;
-            methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 );
+            if(settings.performance) {
-            if(typeof methodName == 'string' && instance !== undefined) {
+              currentTime   = new Date().getTime();
-              methodName = methodName.split('.');
+              previousTime  = time || currentTime,
-              $.each(methodName, function(index, name) {
+              executionTime = currentTime - previousTime;
-                if( $.isPlainObject( instance[name] ) ) {
+              time          = currentTime;
-                  instance = instance[name];
+              performance.push({
-                  return true;
+                'Element'        : element,
-                }
+                'Name'           : message[0],
-                else if( $.isFunction( instance[name] ) ) {
+                'Arguments'      : [].slice.call(message, 1) || '',
-                  method = instance[name];
+                'Execution Time' : executionTime
-                  return true;
-                }
-                module.error(settings.errors.method);
-                return false;
               });
             }
-            if ( $.isFunction( method ) ) {
+            clearTimeout(module.performance.timer);
-              return method.apply(context, methodArguments);
+            module.performance.timer = setTimeout(module.performance.display, 100);
+          },
+          display: function() {
+            var
+              title = settings.moduleName + ':',
+              totalTime = 0
+            ;
+            time        = false;
+            $.each(performance, function(index, data) {
+              totalTime += data['Execution Time'];
+            });
+            title += ' ' + totalTime + 'ms';
+            if(moduleSelector) {
+              title += ' \'' + moduleSelector + '\'';
             }
-            // return retrieved variable or chain
+            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
-            return method;
+              console.groupCollapsed(title);
+              if(console.table) {
+                console.table(performance);
+              }
+              else {
+                $.each(performance, function(index, data) {
+                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+                });
+              }
+              console.groupEnd();
+            }
+            performance = [];
           }
-        };
+        },
-        // check for invoking internal method
+        invoke: function(query, passedArguments, context) {
-        if(methodInvoked) {
+          var
-          invokedResponse = module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) );
+            maxDepth,
-        }
+            found
-        // otherwise initialize
+          ;
-        else {
+          passedArguments = passedArguments || queryArguments;
-          if(instance) {
+          context         = element         || context;
-            module.destroy();
+          if(typeof query == 'string' && instance !== undefined) {
+            query    = query.split(/[\. ]/);
+            maxDepth = query.length - 1;
+            $.each(query, function(depth, value) {
+              if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
+                instance = instance[value];
+              }
+              else if( instance[value] !== undefined ) {
+                found = instance[value];
+              }
+              else {
+                module.error(error.method);
+              }
+            });
           }
-          module.initialize();
+          if ( $.isFunction( found ) ) {
+            return found.apply(context, passedArguments);
+          }
+          return found || false;
         }
+      };
 
-      })
+      if(methodInvoked) {
-    ;
+        if(instance === undefined) {
-    // chain or return queried method
+          module.initialize();
-    return (invokedResponse !== undefined)
+        }
-      ? invokedResponse
+        invokedResponse = module.invoke(query);
-      : this
+      }
-    ;
+      else {
-  };
+        if(instance !== undefined) {
-
+          module.destroy();
-
+        }
-  $.fn.videoPlaylist = function(video, parameters) {
-    var
-      $allModules = $(this),
-      $video      = $(video),
-      $iframe     = $video.find('.embed iframe'),
-
-      settings    = $.extend({}, $.fn.videoPlaylist.settings, parameters, true)
-    ;
-    $allModules
-      .each(function() {
-        var
-          $element    = $(this),
-
-          metadata    = settings.metadata,
-          namespace   = settings.namespace,
-          className   = settings.className,
-
-          module       = {
-            initialize: function() {
-              $element
-                .on('click.' + namespace , module.changeVideo)
-              ;
-            },
-            changeVideo: function() {
-              var
-                flv         = $element.data(metadata.flv)         || false,
-                source      = $element.data(metadata.source)      || false,
-                placeholder = $element.data(metadata.placeholder) || false
-              ;
-              if(flv && source) {
-                $video
-                  .data(metadata.source, source)
-                  .data(metadata.flv, flv)
-                ;
-                if(settings.showPlaceholder) {
-                  $video
-                    .removeClass(className.active)
-                    .find($.fn.video.selector.placeholder)
-                      .attr('src', placeholder)
-                  ;
-                }
-                else {
-                  try {
-                    $video
-                      .video('play')
-                    ;
-                  }
-                  catch(error) {
-                    console.warn('Video Playlist Module: ' + settings.error.init);
-                  }
-                }
-                $allModules
-                  .removeClass(className.active)
-                ;
-                $element
-                  .addClass(className.active)
-                ;
-              }
-            }
-          }
-        ;
         module.initialize();
-      })
-    ;
-
-    if(settings.playFirst) {
-      $allModules
-        .eq(0)
-        .trigger('click')
-      ;
-      // we all like a good hack
-      if($iframe.size() > 0) {
-        $iframe
-          .attr('src', $iframe.attr('src').replace('autoplay=1', 'autoplay=0') )
-        ;
       }
+    })
+  ;
 
-    }
+  return (invokedResponse)
-
+    ? invokedResponse
-  };
+    : this
-
+  ;
-  $.fn.video.settings = {
+};
-
-    moduleName  : 'Video',
-    namespace   : 'video',
-    debug       : false,
-    
-    metadata    : {
-      source      : 'source',
-      flv         : 'flv'
-    },
 
-    onPlay      : function(){},
+$.fn.video.settings = {
-    onReset     : function(){},
-    onChange    : function(){},
 
-    // callbacks not coded yet (needs to use jsapi)
+  moduleName  : 'Video',
-    play        : function() {},
+  namespace   : 'video',
-    pause       : function() {},
-    stop        : function() {},
 
-    width       : 'auto',
+  debug       : true,
-    height      : 'auto',
+  verbose     : true,
+  performance : true,
   
-    autoplay    : false,
-    color       : '#442359',
-    hd          : true,
-    showUI      : false,
-    api         : true,
 
-    errors      : {
+  metadata    : {
-      method      : 'The method you called is not defined'
+    source : 'source',
-    },
+    id     : 'id',
+    url    : 'url'
+  },
   
-    className   : {
+  onPlay   : function(){},
-      active      : 'active'
+  onReset  : function(){},
-    },
+  onChange : function(){},
   
-    selector    : {
+  // callbacks not coded yet (needs to use jsapi)
-      embed       : '.embed',
+  onPause  : function() {},
-      placeholder : '.placeholder',
+  onStop   : function() {},
-      playButton  : '.play'
-    }
-  };
   
-  $.fn.videoPlaylist.settings = {
+  width    : 'auto',
-    moduleName      : 'Video Playlist',
+  height   : 'auto',
-    namespace       : 'videoPlaylist',
   
-    source          : 'vimeo',
+  autoplay : false,
-    showPlaceholder : false,
+  color    : '#442359',
-    playFirst       : true,
+  hd       : true,
+  showUI   : false,
+  api      : true,
   
-    metadata: {
+  error      : {
-      flv         : 'flv',
+    noVideo     : 'No video specified',
-      source      : 'source',
+    method      : 'The method you called is not defined'
-      placeholder : 'placeholder'
+  },
-    },
   
-    errors: {
+  className   : {
-      init   : 'The video player you specified was not yet initialized'
+    active      : 'active'
-    },
+  },
   
-    className : {
+  selector    : {
-      active  : 'active'
+    embed       : '.embed',
-    }
+    placeholder : '.placeholder',
+    playButton  : '.play'
+  }
+};
 
-  };
 
 })( jQuery, window , document );

build/minified/modules/video.min.css

@@ -1 +1 @@
-.video.module{position:relative;background:#333 url(../images/placeholder.png) no-repeat center center}.video.module .play{cursor:pointer;position:absolute;top:0;left:0;z-index:100;-ms-filter:"alpha(Opacity=60)";filter:alpha(opacity=60);opacity:.6;width:100%;height:100%;background:url(/images/modules/video-play.png) no-repeat center center;-webkit-transition:opacity .3s;-moz-transition:opacity .3s;-o-transition:opacity .3s;-ms-transition:opacity .3s;transition:opacity .3s}.video.module .play:hover{opacity:1}.video.module .placeholder{width:100%;height:100%}.video.module .embed{display:none}.video.module.active .play,.video.module.active .placeholder{display:none}.video.module.active .embed{display:block}
+.ui.video{position:relative;max-width:100%}.ui.video .placeholder{background-color:#333}.ui.video .play{cursor:pointer;position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;-ms-filter:"alpha(Opacity=60)";filter:alpha(opacity=60);opacity:.6;-webkit-transition:opacity .3s;-moz-transition:opacity .3s;-o-transition:opacity .3s;-ms-transition:opacity .3s;transition:opacity .3s}.ui.video .play.icon:before{position:absolute;top:50%;left:50%;z-index:11;font-size:6rem;margin:-3rem 0 0 -3rem;color:#FFF;text-shadow:0 3px 3px rgba(0,0,0,.4)}.ui.video .placeholder{display:block;width:100%;height:100%}.ui.video .embed{display:none}.ui.video .play:hover{opacity:1}.ui.video.active .play,.ui.video.active .placeholder{display:none}.ui.video.active .embed{display:block}

build/minified/modules/video.min.js

@@ -1 +1 @@
-!function(a,b,c,d){a.fn.video=function(b){var c,e=a.extend(!0,{},a.fn.video.settings,b),f=arguments||!1;return a(this).each(function(){var g,h=a(this),i=h.find(e.selector.placeholder),j=h.find(e.selector.playButton),k=h.find(e.selector.embed),l=h.data("module-"+e.namespace),m="string"==typeof b,n=e.namespace,o=e.metadata,p=e.className;g={initialize:function(){g.debug("Initializing video"),i.off(".video").on("click."+n,g.play),j.off(".video").on("click."+n,g.play),h.data("module-"+n,g)},change:function(a,b){g.debug("Changing video to ",b),h.data(o.source,a).data(o.flv,b),e.onChange()},reset:function(){g.debug("Clearing video embed and showing placeholder"),h.removeClass(p.active),k.html(" "),i.show(),e.onReset()},play:function(){g.debug("Playing video");var a=h.data(o.source),b=h.data(o.flv);k.html(g.generate.html(a,b)),h.addClass(p.active),e.onPlay()},generate:{html:function(a,b){g.debug("Generating embed html");var c,d="auto"==e.width?h.width():e.width,f="auto"==e.height?h.height():e.height;return"vimeo"==a?c='<iframe src="http://player.vimeo.com/video/'+b+"?="+g.generate.url(a)+'"'+' width="'+d+'" height="'+f+'"'+' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>':"youtube"==a&&(c='<iframe src="http://www.youtube.com/embed/'+b+"?="+g.generate.url(a)+'"'+' width="'+d+'" height="'+f+'"'+' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'),c},url:function(a){var b=e.api?1:0,c=e.autoplay?1:0,d=e.hd?1:0,f=e.showUI?1:0,g=e.showUI?0:1,h="";return"vimeo"==a?(h="api="+b+"&amp;title="+f+"&amp;byline="+f+"&amp;portrait="+f+"&amp;autoplay="+c,e.color&&(h+="&amp;color="+e.color)):"youtube"==a&&(h="enablejsapi="+b+"&amp;autoplay="+c+"&amp;autohide="+g+"&amp;hq="+d+"&amp;modestbranding=1",e.color&&(h+="&amp;color="+e.color)),h}},debug:function(a,b){e.debug&&(b!==d?console.info(e.moduleName+": "+a,b):console.info(e.moduleName+": "+a))},error:function(a){console.warn(e.moduleName+": "+a)},invoke:function(b,c,f){var h;return f=f||Array.prototype.slice.call(arguments,2),"string"==typeof b&&l!==d&&(b=b.split("."),a.each(b,function(b,c){return a.isPlainObject(l[c])?(l=l[c],!0):a.isFunction(l[c])?(h=l[c],!0):(g.error(e.errors.method),!1)})),a.isFunction(h)?h.apply(c,f):h}},m?c=g.invoke(f[0],this,Array.prototype.slice.call(f,1)):(l&&g.destroy(),g.initialize())}),c!==d?c:this},a.fn.videoPlaylist=function(b,c){var d=a(this),e=a(b),f=e.find(".embed iframe"),g=a.extend({},a.fn.videoPlaylist.settings,c,!0);d.each(function(){var b=a(this),c=g.metadata,f=g.namespace,h=g.className,i={initialize:function(){b.on("click."+f,i.changeVideo)},changeVideo:function(){var f=b.data(c.flv)||!1,i=b.data(c.source)||!1,j=b.data(c.placeholder)||!1;if(f&&i){if(e.data(c.source,i).data(c.flv,f),g.showPlaceholder)e.removeClass(h.active).find(a.fn.video.selector.placeholder).attr("src",j);else try{e.video("play")}catch(k){console.warn("Video Playlist Module: "+g.error.init)}d.removeClass(h.active),b.addClass(h.active)}}};i.initialize()}),g.playFirst&&(d.eq(0).trigger("click"),f.size()>0&&f.attr("src",f.attr("src").replace("autoplay=1","autoplay=0")))},a.fn.video.settings={moduleName:"Video",namespace:"video",debug:!1,metadata:{source:"source",flv:"flv"},onPlay:function(){},onReset:function(){},onChange:function(){},play:function(){},pause:function(){},stop:function(){},width:"auto",height:"auto",autoplay:!1,color:"#442359",hd:!0,showUI:!1,api:!0,errors:{method:"The method you called is not defined"},className:{active:"active"},selector:{embed:".embed",placeholder:".placeholder",playButton:".play"}},a.fn.videoPlaylist.settings={moduleName:"Video Playlist",namespace:"videoPlaylist",source:"vimeo",showPlaceholder:!1,playFirst:!0,metadata:{flv:"flv",source:"source",placeholder:"placeholder"},errors:{init:"The video player you specified was not yet initialized"},className:{active:"active"}}}(jQuery,window,document);
+!function(a,b,c,d){a.fn.video=function(b){var c,e=a(this),f=a.isPlainObject(b)?a.extend(!0,{},a.fn.video.settings,b):a.fn.video.settings,g=e.selector||"",h=(new Date).getTime(),i=[],j=arguments[0],k="string"==typeof j,l=[].slice.call(arguments,1);return a(this).each(function(){var b,e=a(this),m=e.find(f.selector.placeholder),n=e.find(f.selector.playButton),o=e.find(f.selector.embed),p="."+f.namespace,q=f.namespace+"-module",r=(f.selector,f.className),s=f.error,t=f.metadata,u=(f.namespace,this),v=e.data(q);b={initialize:function(){b.debug("Initializing video"),m.on("click"+p,b.play),n.on("click"+p,b.play),b.instantiate()},instantiate:function(){v=b,e.data(q,b)},destroy:function(){b.verbose("Destroying previous instance of video"),e.removeData(q).off(p)},change:function(a,c,d){b.debug("Changing video to ",a,c,d),e.data(t.source,a).data(t.id,c).data(t.url,d),f.onChange()},reset:function(){b.debug("Clearing video embed and showing placeholder"),e.removeClass(r.active),o.html(" "),m.show(),f.onReset()},play:function(){b.debug("Playing video");var a=e.data(t.source)||!1,c=e.data(t.url)||!1,d=e.data(t.id)||!1;o.html(b.generate.html(a,d,c)),e.addClass(r.active),f.onPlay()},generate:{html:function(a,c,d){b.debug("Generating embed html");var g,h="auto"==f.width?e.width():f.width,i="auto"==f.height?e.height():f.height;return a&&c?"vimeo"==a?g='<iframe src="http://player.vimeo.com/video/'+c+"?="+b.generate.url(a)+'"'+' width="'+h+'" height="'+i+'"'+' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>':"youtube"==a&&(g='<iframe src="http://www.youtube.com/embed/'+c+"?="+b.generate.url(a)+'"'+' width="'+h+'" height="'+i+'"'+' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'):d?g='<iframe src="'+d+'"'+' width="'+h+'" height="'+i+'"'+' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>':b.error(s.noVideo),g},url:function(a){var b=f.api?1:0,c=f.autoplay?1:0,d=f.hd?1:0,e=f.showUI?1:0,g=f.showUI?0:1,h="";return"vimeo"==a&&(h="api="+b+"&amp;title="+e+"&amp;byline="+e+"&amp;portrait="+e+"&amp;autoplay="+c,f.color&&(h+="&amp;color="+f.color)),"ustream"==a?(h="autoplay="+c,f.color&&(h+="&amp;color="+f.color)):"youtube"==a&&(h="enablejsapi="+b+"&amp;autoplay="+c+"&amp;autohide="+g+"&amp;hq="+d+"&amp;modestbranding=1",f.color&&(h+="&amp;color="+f.color)),h}},setting:function(b,c){return c===d?f[b]:(a.isPlainObject(b)?a.extend(!0,f,b):f[b]=c,void 0)},internal:function(c,e){return e===d?b[c]:(a.isPlainObject(c)?a.extend(!0,b,c):b[c]=e,void 0)},debug:function(){f.debug&&(f.performance?b.performance.log(arguments):b.debug=Function.prototype.bind.call(console.info,console,f.moduleName+":"))},verbose:function(){f.verbose&&f.debug&&(f.performance?b.performance.log(arguments):b.verbose=Function.prototype.bind.call(console.info,console,f.moduleName+":"))},error:function(){b.error=Function.prototype.bind.call(console.warn,console,f.moduleName+":")},performance:{log:function(a){var c,d,e;f.performance&&(c=(new Date).getTime(),e=h||c,d=c-e,h=c,i.push({Element:u,Name:a[0],Arguments:[].slice.call(a,1)||"","Execution Time":d})),clearTimeout(b.performance.timer),b.performance.timer=setTimeout(b.performance.display,100)},display:function(){var b=f.moduleName+":",c=0;h=!1,a.each(i,function(a,b){c+=b["Execution Time"]}),b+=" "+c+"ms",g&&(b+=" '"+g+"'"),(console.group!==d||console.table!==d)&&i.length>0&&(console.groupCollapsed(b),console.table?console.table(i):a.each(i,function(a,b){console.log(b.Name+": "+b["Execution Time"]+"ms")}),console.groupEnd()),i=[]}},invoke:function(c,e,f){var g,h;return e=e||l,f=u||f,"string"==typeof c&&v!==d&&(c=c.split(/[\. ]/),g=c.length-1,a.each(c,function(c,e){a.isPlainObject(v[e])&&c!=g?v=v[e]:v[e]!==d?h=v[e]:b.error(s.method)})),a.isFunction(h)?h.apply(f,e):h||!1}},k?(v===d&&b.initialize(),c=b.invoke(j)):(v!==d&&b.destroy(),b.initialize())}),c?c:this},a.fn.video.settings={moduleName:"Video",namespace:"video",debug:!0,verbose:!0,performance:!0,metadata:{source:"source",id:"id",url:"url"},onPlay:function(){},onReset:function(){},onChange:function(){},onPause:function(){},onStop:function(){},width:"auto",height:"auto",autoplay:!1,color:"#442359",hd:!0,showUI:!1,api:!0,error:{noVideo:"No video specified",method:"The method you called is not defined"},className:{active:"active"},selector:{embed:".embed",placeholder:".placeholder",playButton:".play"}}}(jQuery,window,document);

build/packaged/modules/video.js

@@ -11,381 +11,416 @@
 
 ;(function ($, window, document, undefined) {
 
-  $.fn.video = function(parameters) {
+$.fn.video = function(parameters) {
-
-    var
-      settings = $.extend(true, {}, $.fn.video.settings, parameters),
-      // make arguments available
-      moduleArguments = arguments || false,
-      invokedResponse
-    ;
-
-    $(this)
-      .each(function() {
-        var
-          $module      = $(this),
-          $placeholder = $module.find(settings.selector.placeholder),
-          $playButton  = $module.find(settings.selector.playButton),
-          $embed       = $module.find(settings.selector.embed),
-
-          element       = this,
-          instance      = $module.data('module-' + settings.namespace),
-          methodInvoked = (typeof parameters == 'string'),
-
-          namespace    = settings.namespace,
-          metadata     = settings.metadata,
-          className    = settings.className,
-
-          module
-        ;
-
-        module = {
-
-          initialize: function() {
-            module.debug('Initializing video');
-            $placeholder
-              .off('.video')
-              .on('click.' + namespace, module.play)
-            ;
-            $playButton
-              .off('.video')
-              .on('click.' + namespace, module.play)
-            ;
-            $module
-              .data('module-' + namespace, module)
-            ;
-          },
 
-          // sets new video
+  var
-          change: function(source, flv) {
+    $allModules     = $(this),
-            module.debug('Changing video to ', flv);
-            $module
-              .data(metadata.source, source)
-              .data(metadata.flv, flv)
-            ;
-            settings.onChange();
-          },
 
-          // clears video embed
+    settings        = ( $.isPlainObject(parameters) )
-          reset: function() {
+      ? $.extend(true, {}, $.fn.video.settings, parameters)
-            module.debug('Clearing video embed and showing placeholder');
+      : $.fn.video.settings,
-            $module
+
-              .removeClass(className.active)
+    moduleSelector  = $allModules.selector || '',
-            ;
+
-            $embed
+    time            = new Date().getTime(),
-              .html(' ')
+    performance     = [],
-            ;
-            $placeholder
-              .show()
-            ;
-            settings.onReset();
-          },
 
-          // plays current video
+    query           = arguments[0],
-          play: function() {
+    methodInvoked   = (typeof query == 'string'),
-            module.debug('Playing video');
+    queryArguments  = [].slice.call(arguments, 1),
+
+    invokedResponse
+  ;
+
+  $(this)
+    .each(function() {
+      var
+        $module      = $(this),
+        $placeholder = $module.find(settings.selector.placeholder),
+        $playButton  = $module.find(settings.selector.playButton),
+        $embed       = $module.find(settings.selector.embed),
+        
+        eventNamespace  = '.' + settings.namespace,
+        moduleNamespace = settings.namespace + '-module', 
+
+        selector        = settings.selector,
+        className       = settings.className,
+        error           = settings.error,
+        metadata        = settings.metadata,
+        namespace       = settings.namespace,
+        
+        element         = this,
+        instance        = $module.data(moduleNamespace),
+        module
+      ;
+
+      module = {
+
+        initialize: function() {
+          module.debug('Initializing video');
+          $placeholder
+            .on('click' + eventNamespace, module.play)
+          ;
+          $playButton
+            .on('click' + eventNamespace, module.play)
+          ;
+          module.instantiate();
+        },
+
+        instantiate: function() {
+          instance = module;
+          $module
+            .data(moduleNamespace, module)
+          ;
+        },
+
+        destroy: function() {
+          module.verbose('Destroying previous instance of video');
+          $module
+            .removeData(moduleNamespace)
+            .off(eventNamespace)
+          ;
+        },
+
+        // sets new video
+        change: function(source, id, url) {
+          module.debug('Changing video to ', source, id, url);
+          $module
+            .data(metadata.source, source)
+            .data(metadata.id, id)
+            .data(metadata.url, url)
+          ;
+          settings.onChange();
+        },
+
+        // clears video embed
+        reset: function() {
+          module.debug('Clearing video embed and showing placeholder');
+          $module
+            .removeClass(className.active)
+          ;
+          $embed
+            .html(' ')
+          ;
+          $placeholder
+            .show()
+          ;
+          settings.onReset();
+        },
+
+        // plays current video
+        play: function() {
+          module.debug('Playing video');
+          var
+            source = $module.data(metadata.source) || false, 
+            url    = $module.data(metadata.url)    || false,
+            id     = $module.data(metadata.id)     || false
+          ;
+          $embed
+            .html( module.generate.html(source, id, url) )
+          ;
+          $module
+            .addClass(className.active)
+          ;
+          settings.onPlay();
+        },
+
+        generate: {
+          // generates iframe html
+          html: function(source, id, url) {
+            module.debug('Generating embed html');
             var
-              source = $module.data(metadata.source),
+              width = (settings.width == 'auto')
-              flv    = $module.data(metadata.flv)
+                ? $module.width()
-            ;
+                : settings.width,
-            $embed
+              height = (settings.height == 'auto')
-              .html( module.generate.html(source, flv) )
+                ? $module.height()
-            ;
+                : settings.height,
-            $module
+              html
-              .addClass(className.active)
             ;
-            settings.onPlay();
+            if(source && id) {
-          },
-
-          generate: {
-            // generates iframe html
-            html: function(source, flv) {
-              module.debug('Generating embed html');
-              var
-                width = (settings.width == 'auto')
-                  ? $module.width()
-                  : settings.width,
-                height = (settings.height == 'auto')
-                  ? $module.height()
-                  : settings.height,
-                html
-              ;
               if(source == 'vimeo') {
                 html = ''
-                  + '<iframe src="http://player.vimeo.com/video/' + flv + '?=' + module.generate.url(source) + '"'
+                  + '<iframe src="http://player.vimeo.com/video/' + id + '?=' + module.generate.url(source) + '"'
                   + ' width="' + width + '" height="' + height + '"'
                   + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
                 ;
               }
               else if(source == 'youtube') {
                 html = ''
-                  + '<iframe src="http://www.youtube.com/embed/' + flv + '?=' + module.generate.url(source) + '"'
+                  + '<iframe src="http://www.youtube.com/embed/' + id + '?=' + module.generate.url(source) + '"'
                   + ' width="' + width + '" height="' + height + '"'
                   + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
                 ;
               }
-              return html;
+            }
-            },
+            else if(url) {
-
+              html = ''
-            // generate url parameters
+                + '<iframe src="' + url + '"'
-            url: function(source) {
+                + ' width="' + width + '" height="' + height + '"'
-              var
+                + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
-                api      = (settings.api)
-                  ? 1
-                  : 0,
-                autoplay = (settings.autoplay)
-                  ? 1
-                  : 0,
-                hd       = (settings.hd)
-                  ? 1
-                  : 0,
-                showUI   = (settings.showUI)
-                  ? 1
-                  : 0,
-                // opposite used for some params
-                hideUI   = !(settings.showUI)
-                  ? 1
-                  : 0,
-                url = ''
               ;
-              if(source == 'vimeo') {
-                url = ''
-                  +      'api='      + api
-                  + '&amp;title='    + showUI
-                  + '&amp;byline='   + showUI
-                  + '&amp;portrait=' + showUI
-                  + '&amp;autoplay=' + autoplay
-                ;
-                if(settings.color) {
-                  url += '&amp;color=' + settings.color;
-                }
-              }
-              else if(source == 'youtube') {
-                url = ''
-                  +      'enablejsapi=' + api
-                  + '&amp;autoplay='    + autoplay
-                  + '&amp;autohide='    + hideUI
-                  + '&amp;hq='          + hd
-                  + '&amp;modestbranding=1'
-                ;
-                if(settings.color) {
-                  url += '&amp;color=' + settings.color;
-                }
-              }
-              return url;
             }
+            else {
+              module.error(error.noVideo);
+            }
+            return html;
           },
 
-          /* standard module */
+          // generate url parameters
-          debug: function(message, variableName) {
+          url: function(source) {
-            if(settings.debug) {
+            var
-              if(variableName !== undefined) {
+              api      = (settings.api)
-                console.info(settings.moduleName + ': ' + message, variableName);
+                ? 1
+                : 0,
+              autoplay = (settings.autoplay)
+                ? 1
+                : 0,
+              hd       = (settings.hd)
+                ? 1
+                : 0,
+              showUI   = (settings.showUI)
+                ? 1
+                : 0,
+              // opposite used for some params
+              hideUI   = !(settings.showUI)
+                ? 1
+                : 0,
+              url = ''
+            ;
+            if(source == 'vimeo') {
+              url = ''
+                +      'api='      + api
+                + '&amp;title='    + showUI
+                + '&amp;byline='   + showUI
+                + '&amp;portrait=' + showUI
+                + '&amp;autoplay=' + autoplay
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
               }
-              else {
+            }
-                console.info(settings.moduleName + ': ' + message);
+            if(source == 'ustream') {
+              url = ''
+                + 'autoplay=' + autoplay
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
               }
             }
-          },
+            else if(source == 'youtube') {
-          error: function(errorMessage) {
+              url = ''
-            console.warn(settings.moduleName + ': ' + errorMessage);
+                +      'enablejsapi=' + api
-          },
+                + '&amp;autoplay='    + autoplay
-          invoke: function(methodName, context, methodArguments) {
+                + '&amp;autohide='    + hideUI
+                + '&amp;hq='          + hd
+                + '&amp;modestbranding=1'
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
+              }
+            }
+            return url;
+          }
+        },
+
+        setting: function(name, value) {
+          if(value !== undefined) {
+            if( $.isPlainObject(name) ) {
+              $.extend(true, settings, name);
+            }
+            else {
+              settings[name] = value;
+            }
+          }
+          else {
+            return settings[name];
+          }
+        },
+        internal: function(name, value) {
+          if(value !== undefined) {
+            if( $.isPlainObject(name) ) {
+              $.extend(true, module, name);
+            }
+            else {
+              module[name] = value;
+            }
+          }
+          else {
+            return module[name];
+          }
+        },
+        debug: function() {
+          if(settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+            }
+          }
+        },
+        verbose: function() {
+          if(settings.verbose && settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+            }
+          }
+        },
+        error: function() {
+          module.error = Function.prototype.bind.call(console.warn, console, settings.moduleName + ':');
+        },
+        performance: {
+          log: function(message) {
             var
-              method
+              currentTime,
+              executionTime,
+              previousTime
             ;
-            methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 );
+            if(settings.performance) {
-            if(typeof methodName == 'string' && instance !== undefined) {
+              currentTime   = new Date().getTime();
-              methodName = methodName.split('.');
+              previousTime  = time || currentTime,
-              $.each(methodName, function(index, name) {
+              executionTime = currentTime - previousTime;
-                if( $.isPlainObject( instance[name] ) ) {
+              time          = currentTime;
-                  instance = instance[name];
+              performance.push({
-                  return true;
+                'Element'        : element,
-                }
+                'Name'           : message[0],
-                else if( $.isFunction( instance[name] ) ) {
+                'Arguments'      : [].slice.call(message, 1) || '',
-                  method = instance[name];
+                'Execution Time' : executionTime
-                  return true;
-                }
-                module.error(settings.errors.method);
-                return false;
               });
             }
-            if ( $.isFunction( method ) ) {
+            clearTimeout(module.performance.timer);
-              return method.apply(context, methodArguments);
+            module.performance.timer = setTimeout(module.performance.display, 100);
+          },
+          display: function() {
+            var
+              title = settings.moduleName + ':',
+              totalTime = 0
+            ;
+            time        = false;
+            $.each(performance, function(index, data) {
+              totalTime += data['Execution Time'];
+            });
+            title += ' ' + totalTime + 'ms';
+            if(moduleSelector) {
+              title += ' \'' + moduleSelector + '\'';
             }
-            // return retrieved variable or chain
+            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
-            return method;
+              console.groupCollapsed(title);
+              if(console.table) {
+                console.table(performance);
+              }
+              else {
+                $.each(performance, function(index, data) {
+                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+                });
+              }
+              console.groupEnd();
+            }
+            performance = [];
           }
-        };
+        },
-        // check for invoking internal method
+        invoke: function(query, passedArguments, context) {
-        if(methodInvoked) {
+          var
-          invokedResponse = module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) );
+            maxDepth,
-        }
+            found
-        // otherwise initialize
+          ;
-        else {
+          passedArguments = passedArguments || queryArguments;
-          if(instance) {
+          context         = element         || context;
-            module.destroy();
+          if(typeof query == 'string' && instance !== undefined) {
+            query    = query.split(/[\. ]/);
+            maxDepth = query.length - 1;
+            $.each(query, function(depth, value) {
+              if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
+                instance = instance[value];
+              }
+              else if( instance[value] !== undefined ) {
+                found = instance[value];
+              }
+              else {
+                module.error(error.method);
+              }
+            });
           }
-          module.initialize();
+          if ( $.isFunction( found ) ) {
+            return found.apply(context, passedArguments);
+          }
+          return found || false;
         }
+      };
 
-      })
+      if(methodInvoked) {
-    ;
+        if(instance === undefined) {
-    // chain or return queried method
+          module.initialize();
-    return (invokedResponse !== undefined)
+        }
-      ? invokedResponse
+        invokedResponse = module.invoke(query);
-      : this
+      }
-    ;
+      else {
-  };
+        if(instance !== undefined) {
-
+          module.destroy();
-
+        }
-  $.fn.videoPlaylist = function(video, parameters) {
-    var
-      $allModules = $(this),
-      $video      = $(video),
-      $iframe     = $video.find('.embed iframe'),
-
-      settings    = $.extend({}, $.fn.videoPlaylist.settings, parameters, true)
-    ;
-    $allModules
-      .each(function() {
-        var
-          $element    = $(this),
-
-          metadata    = settings.metadata,
-          namespace   = settings.namespace,
-          className   = settings.className,
-
-          module       = {
-            initialize: function() {
-              $element
-                .on('click.' + namespace , module.changeVideo)
-              ;
-            },
-            changeVideo: function() {
-              var
-                flv         = $element.data(metadata.flv)         || false,
-                source      = $element.data(metadata.source)      || false,
-                placeholder = $element.data(metadata.placeholder) || false
-              ;
-              if(flv && source) {
-                $video
-                  .data(metadata.source, source)
-                  .data(metadata.flv, flv)
-                ;
-                if(settings.showPlaceholder) {
-                  $video
-                    .removeClass(className.active)
-                    .find($.fn.video.selector.placeholder)
-                      .attr('src', placeholder)
-                  ;
-                }
-                else {
-                  try {
-                    $video
-                      .video('play')
-                    ;
-                  }
-                  catch(error) {
-                    console.warn('Video Playlist Module: ' + settings.error.init);
-                  }
-                }
-                $allModules
-                  .removeClass(className.active)
-                ;
-                $element
-                  .addClass(className.active)
-                ;
-              }
-            }
-          }
-        ;
         module.initialize();
-      })
-    ;
-
-    if(settings.playFirst) {
-      $allModules
-        .eq(0)
-        .trigger('click')
-      ;
-      // we all like a good hack
-      if($iframe.size() > 0) {
-        $iframe
-          .attr('src', $iframe.attr('src').replace('autoplay=1', 'autoplay=0') )
-        ;
       }
+    })
+  ;
 
-    }
+  return (invokedResponse)
-
+    ? invokedResponse
-  };
+    : this
-
+  ;
-  $.fn.video.settings = {
+};
-
-    moduleName  : 'Video',
-    namespace   : 'video',
-    debug       : false,
-    
-    metadata    : {
-      source      : 'source',
-      flv         : 'flv'
-    },
 
-    onPlay      : function(){},
+$.fn.video.settings = {
-    onReset     : function(){},
-    onChange    : function(){},
 
-    // callbacks not coded yet (needs to use jsapi)
+  moduleName  : 'Video',
-    play        : function() {},
+  namespace   : 'video',
-    pause       : function() {},
-    stop        : function() {},
 
-    width       : 'auto',
+  debug       : true,
-    height      : 'auto',
+  verbose     : true,
+  performance : true,
   
-    autoplay    : false,
-    color       : '#442359',
-    hd          : true,
-    showUI      : false,
-    api         : true,
 
-    errors      : {
+  metadata    : {
-      method      : 'The method you called is not defined'
+    source : 'source',
-    },
+    id     : 'id',
+    url    : 'url'
+  },
   
-    className   : {
+  onPlay   : function(){},
-      active      : 'active'
+  onReset  : function(){},
-    },
+  onChange : function(){},
   
-    selector    : {
+  // callbacks not coded yet (needs to use jsapi)
-      embed       : '.embed',
+  onPause  : function() {},
-      placeholder : '.placeholder',
+  onStop   : function() {},
-      playButton  : '.play'
-    }
-  };
   
-  $.fn.videoPlaylist.settings = {
+  width    : 'auto',
-    moduleName      : 'Video Playlist',
+  height   : 'auto',
-    namespace       : 'videoPlaylist',
   
-    source          : 'vimeo',
+  autoplay : false,
-    showPlaceholder : false,
+  color    : '#442359',
-    playFirst       : true,
+  hd       : true,
+  showUI   : false,
+  api      : true,
   
-    metadata: {
+  error      : {
-      flv         : 'flv',
+    noVideo     : 'No video specified',
-      source      : 'source',
+    method      : 'The method you called is not defined'
-      placeholder : 'placeholder'
+  },
-    },
   
-    errors: {
+  className   : {
-      init   : 'The video player you specified was not yet initialized'
+    active      : 'active'
-    },
+  },
   
-    className : {
+  selector    : {
-      active  : 'active'
+    embed       : '.embed',
-    }
+    placeholder : '.placeholder',
+    playButton  : '.play'
+  }
+};
 
-  };
 
 })( jQuery, window , document );

build/packaged/semantic.min.css.REMOVED.git-id

@@ -1 +1 @@
-8c596e6e4141b4d7bf798a158e1bed529b4acfa0
+f05f79b6aa3852bb634fb30470be2d7d3a9d1252

build/packaged/semantic.min.js.REMOVED.git-id

@@ -1 +1 @@
-4c459f0ed9e411259862a2f2d362b31525c72e20
+9b2adc4ea09fd0c31850e9b42e74daf20107c1b2

build/uncompressed/collections/menu.css

@@ -338,7 +338,7 @@
   visibility: visible;
 }
 /*******************************
-          Variations
+             Types
 *******************************/
 /*--------------
     Vertical
@@ -475,35 +475,44 @@
   display: block;
 }
 /*--------------
-    Colors
+     Tiered
 ---------------*/
-/*--- Light Colors  ---*/
+.ui.tabular.menu {
-.ui.menu .green.active.item,
+  background-color: transparent;
-.ui.green.menu .active.item {
+  border-bottom: 1px solid #DCDDDE;
-  border-color: #A1CF64 !important;
+  -webkit-box-shadow: none;
-}
+  -moz-box-shadow: none;
-.ui.menu .red.active.item,
+  box-shadow: none;
-.ui.red.menu .active.item {
-  border-color: #EF4D6D !important;
 }
-.ui.menu .blue.active.item,
+.ui.tabular.menu .item {
-.ui.blue.menu .active.item {
+  background-color: transparent;
-  border-color: #6ECFF5 !important;
+  font-weight: bold;
+  padding-left: 1.4em;
+  padding-right: 1.4em;
+  color: #9DA6AB;
 }
-.ui.menu .purple.active.item,
+.ui.tabular.menu .item:hover {
-.ui.purple.menu .active.item {
+  background-color: transparent;
-  border-color: #564F8A !important;
+  color: #5D6266;
 }
-.ui.menu .orange.active.item,
+.ui.tabular.menu .item:before {
-.ui.orange.menu .active.item {
+  display: none;
-  border-color: #F05940 !important;
 }
-.ui.menu .teal.active.item,
+.ui.tabular.menu .active.item {
-.ui.teal.menu .active.item {
+  position: relative;
-  border-color: #00B5AD !important;
+  top: 1px;
+  background-color: #F8F8F8;
+  color: #5D6266;
+  border-left: 1px solid #DCDDDE;
+  border-right: 1px solid #DCDDDE;
+  border-top: 1px solid #DCDDDE;
+  padding-top: 0.75em;
+  -webkit-border-radius: 5px 5px 0 0;
+  -moz-border-radius: 5px 5px 0 0;
+  border-radius: 5px 5px 0 0;
 }
 /*--------------
-    Pagination
+   Pagination
 ---------------*/
 .ui.pagination.menu {
   margin: 0em;
@@ -523,284 +532,6 @@
   padding-top: 0.75em;
   background-color: rgba(0, 0, 0, 0.05);
 }
-/*--------------
-    Inverted
----------------*/
-.ui.inverted.menu {
-  background-color: #333333;
-  box-shadow: none;
-}
-.ui.inverted.menu .header.item {
-  margin: 0em;
-  background-color: rgba(0, 0, 0, 0.3);
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-.ui.inverted.menu .item,
-.ui.inverted.menu .item > a {
-  color: #FFFFFF;
-}
-.ui.inverted.menu .item .item,
-.ui.inverted.menu .item .item > a {
-  color: rgba(255, 255, 255, 0.8);
-}
-.ui.inverted.menu .item .item > a:hover {
-  background-color: rgba(255, 255, 255, 0.03);
-  color: rgba(255, 255, 255, 0.9);
-}
-.ui.inverted.menu .item > p:only-child {
-  color: rgba(255, 255, 255, 0.75);
-}
-.ui.inverted.menu .dropdown.item .menu .item,
-.ui.inverted.menu .dropdown.item .menu .item a {
-  color: rgba(0, 0, 0, 0.75) !important;
-}
-.ui.inverted.menu .item.disabled,
-.ui.inverted.menu .item.disabled:hover,
-.ui.inverted.menu .item.disabled.hover {
-  color: rgba(255, 255, 255, 0.2);
-}
-/*--- Border ---*/
-.ui.inverted.menu .item:before {
-  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-  background-image: linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-}
-.ui.vertical.inverted.menu .item:before {
-  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-  background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-  background-image: linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-}
-/*--- Hover ---*/
-.ui.link.inverted.menu .item:hover,
-.ui.inverted.menu .item.hover,
-.ui.inverted.menu .link.item:hover,
-.ui.inverted.menu a.item:hover,
-.ui.inverted.menu .dropdown.item.hover,
-.ui.inverted.menu .dropdown.item:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.ui.inverted.menu a.item:hover,
-.ui.inverted.menu .item.hover,
-.ui.inverted.menu .item > a:hover,
-.ui.inverted.menu .item .menu a.item:hover,
-.ui.inverted.menu .item .menu a.item.hover,
-.ui.inverted.menu .item .menu .link.item:hover,
-.ui.inverted.menu .item .menu .link.item.hover {
-  color: #ffffff;
-}
-/*--- Down ---*/
-.ui.inverted.menu .item.down,
-.ui.inverted.menu a.item:active,
-.ui.inverted.menu .item > a:active,
-.ui.inverted.menu .item.down,
-.ui.inverted.menu .dropdown.item:active,
-.ui.inverted.menu .link.item:active,
-.ui.inverted.menu a.item:active {
-  background-color: rgba(255, 255, 255, 0.15);
-}
-/*--- Active ---*/
-.ui.inverted.menu .active.item {
-  border-color: transparent !important;
-  background-color: rgba(255, 255, 255, 0.2);
-}
-.ui.inverted.menu .active.item,
-.ui.inverted.menu .active.item a {
-  color: #ffffff;
-}
-.ui.inverted.vertical.menu .item .menu .active.item {
-  background-color: rgba(255, 255, 255, 0.2);
-  color: #ffffff;
-}
-/*--- Pointers ---*/
-.ui.inverted.pointing.menu .active.item:after {
-  background-color: #505050;
-  box-shadow: none;
-}
-.ui.inverted.pointing.menu .active.item:hover:after {
-  background-color: #3B3B3B;
-}
-/*--------------
-     Floated
----------------*/
-.ui.floated.menu {
-  float: left;
-  margin: 0rem 0.5rem 0rem 0rem;
-}
-.ui.right.floated.menu {
-  float: right;
-  margin: 0rem 0rem 0rem 0.5rem;
-}
-/*--------------
- Inverted Colors
----------------*/
-/*--- Light Colors  ---*/
-.ui.grey.menu {
-  background-color: #F0F0F0;
-}
-/*--- Inverted Colors  ---*/
-.ui.inverted.green.menu {
-  background-color: #A1CF64;
-}
-.ui.inverted.green.pointing.menu .active.item:after {
-  background-color: #A1CF64;
-}
-.ui.inverted.red.menu {
-  background-color: #EF4D6D;
-}
-.ui.inverted.red.pointing.menu .active.item:after {
-  background-color: #F16883;
-}
-.ui.inverted.blue.menu {
-  background-color: #6ECFF5;
-}
-.ui.inverted.blue.pointing.menu .active.item:after {
-  background-color: #6ECFF5;
-}
-.ui.inverted.purple.menu {
-  background-color: #564F8A;
-}
-.ui.inverted.purple.pointing.menu .active.item:after {
-  background-color: #564F8A;
-}
-.ui.inverted.orange.menu {
-  background-color: #F05940;
-}
-.ui.inverted.orange.pointing.menu .active.item:after {
-  background-color: #F05940;
-}
-.ui.inverted.teal.menu {
-  background-color: #00B5AD;
-}
-.ui.inverted.teal.pointing.menu .active.item:after {
-  background-color: #00B5AD;
-}
-/*--------------
-    Text Menu
----------------*/
-.ui.text.menu {
-  background-color: transparent;
-  margin: 1rem -1rem;
-  -moz-border-radius: 0px;
-  -webkit-border-radius: 0px;
-  border-radius: 0px;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-.ui.text.menu > .item {
-  opacity: 0.6;
-  margin: 0em 1em;
-  padding: 0em;
-  min-height: 0em !important;
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
-  border-radius: 0px;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  color: rgba(0, 0, 0, 0.6);
-  -webkit-transition: opacity 0.2s ease
-  ;
-  -moz-transition: opacity 0.2s ease
-  ;
-  -o-transition: opacity 0.2s ease
-  ;
-  -ms-transition: opacity 0.2s ease
-  ;
-  transition: opacity 0.2s ease
-  ;
-}
-.ui.text.menu > .item:before {
-  display: none !important;
-}
-.ui.text.menu .header.item {
-  background-color: transparent;
-  opacity: 1;
-  color: rgba(50, 50, 50, 0.8);
-  font-size: 0.875rem;
-  padding: 0em;
-  text-transform: uppercase;
-  font-weight: bold;
-}
-.ui.text.menu .header.item > a {
-  background-color: transparent;
-}
-/*--- fluid text ---*/
-.ui.text.item.menu .item {
-  margin: 0em;
-}
-/*--- vertical text ---*/
-.ui.vertical.text.menu {
-  margin: 1rem 0em;
-}
-.ui.vertical.text.menu:first-child {
-  margin-top: 0rem;
-}
-.ui.vertical.text.menu:last-child {
-  margin-bottom: 0rem;
-}
-.ui.vertical.text.menu .item {
-  float: left;
-  clear: left;
-  margin: 0.5em 0em;
-}
-.ui.vertical.text.menu .item > .icon {
-  float: none;
-  margin: 0em 0.75em 0em 0em;
-}
-.ui.vertical.text.menu .header.item {
-  margin: 0.8em 0em;
-}
-/*--- hover ---*/
-.ui.text.menu .item.hover,
-.ui.text.menu .item:hover {
-  opacity: 1;
-  background-color: transparent;
-}
-/*--- active ---*/
-.ui.text.menu .active.item {
-  background-color: transparent;
-  padding: 0em;
-  border: none;
-  opacity: 1;
-  font-weight: bold;
-}
-/* disable variations */
-.ui.text.pointing.menu .active.item:after {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-.ui.text.attached.menu {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-/* colors */
-.ui.green.text.menu .active.item {
-  color: #A1CF64;
-}
-.ui.red.text.menu .active.item {
-  color: #EF4D6D;
-}
-.ui.blue.text.menu .active.item {
-  color: #6ECFF5;
-}
-.ui.purple.text.menu .active.item {
-  color: #564F8A;
-}
-.ui.orange.text.menu .active.item {
-  color: #F05940;
-}
-.ui.teal.text.menu .active.item {
-  color: #00B5AD;
-}
 /*--------------
    Secondary
 ---------------*/
@@ -907,7 +638,9 @@
   background-color: transparent;
   border-color: rgba(0, 0, 0, 0.4);
 }
-/*------- Vertical------- */
+/*---------------------
+   Secondary Vertical
+-----------------------*/
 .ui.secondary.vertical.pointing.menu {
   border: none;
   border-right: 3px solid rgba(0, 0, 0, 0.1);
@@ -933,61 +666,178 @@
   -moz-border-radius: 0em;
   border-radius: 0em;
 }
-/* Hover */
+/* Hover */
-.ui.secondary.vertical.pointing.menu > .item.hover,
+.ui.secondary.vertical.pointing.menu > .item.hover,
-.ui.secondary.vertical.pointing.menu > .item:hover {
+.ui.secondary.vertical.pointing.menu > .item:hover {
-  background-color: transparent;
+  background-color: transparent;
-  color: rgba(0, 0, 0, 0.7);
+  color: rgba(0, 0, 0, 0.7);
+}
+/* Down */
+.ui.secondary.vertical.pointing.menu > .item:active,
+.ui.secondary.vertical.pointing.menu > .item.down {
+  background-color: transparent;
+  border-color: rgba(0, 0, 0, 0.2);
+}
+/* Active */
+.ui.secondary.vertical.pointing.menu > .item.active {
+  background-color: transparent;
+  border-color: rgba(0, 0, 0, 0.4);
+  color: rgba(0, 0, 0, 0.85);
+}
+/*--------------
+    Inverted
+---------------*/
+.ui.secondary.inverted.menu {
+  background-color: transparent;
+}
+.ui.secondary.inverted.pointing.menu {
+  border-bottom: 3px solid rgba(255, 255, 255, 0.1);
+}
+.ui.secondary.inverted.pointing.menu > .item {
+  color: rgba(255, 255, 255, 0.7);
+}
+/* Hover */
+.ui.secondary.inverted.pointing.menu > .item.hover,
+.ui.secondary.inverted.pointing.menu > .item:hover {
+  color: rgba(255, 255, 255, 0.85);
+}
+/* Down */
+.ui.secondary.inverted.pointing.menu > .item:active,
+.ui.secondary.inverted.pointing.menu > .item.down {
+  border-color: rgba(255, 255, 255, 0.4) !important;
+}
+/* Active */
+.ui.secondary.inverted.pointing.menu > .item.active {
+  border-color: rgba(255, 255, 255, 0.8) !important;
+  color: #ffffff;
+}
+/*---------------------
+   Inverted Vertical
+----------------------*/
+.ui.secondary.inverted.vertical.pointing.menu {
+  border-right: 3px solid rgba(255, 255, 255, 0.1);
+  border-bottom: none;
+}
+/*--------------
+    Text Menu
+---------------*/
+.ui.text.menu {
+  background-color: transparent;
+  margin: 1rem -1rem;
+  -moz-border-radius: 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.ui.text.menu > .item {
+  opacity: 0.6;
+  margin: 0em 1em;
+  padding: 0em;
+  min-height: 0em !important;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  color: rgba(0, 0, 0, 0.6);
+  -webkit-transition: opacity 0.2s ease
+  ;
+  -moz-transition: opacity 0.2s ease
+  ;
+  -o-transition: opacity 0.2s ease
+  ;
+  -ms-transition: opacity 0.2s ease
+  ;
+  transition: opacity 0.2s ease
+  ;
+}
+.ui.text.menu > .item:before {
+  display: none !important;
+}
+.ui.text.menu .header.item {
+  background-color: transparent;
+  opacity: 1;
+  color: rgba(50, 50, 50, 0.8);
+  font-size: 0.875rem;
+  padding: 0em;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+.ui.text.menu .header.item > a {
+  background-color: transparent;
+}
+/*--- fluid text ---*/
+.ui.text.item.menu .item {
+  margin: 0em;
+}
+/*--- vertical text ---*/
+.ui.vertical.text.menu {
+  margin: 1rem 0em;
+}
+.ui.vertical.text.menu:first-child {
+  margin-top: 0rem;
+}
+.ui.vertical.text.menu:last-child {
+  margin-bottom: 0rem;
+}
+.ui.vertical.text.menu .item {
+  float: left;
+  clear: left;
+  margin: 0.5em 0em;
+}
+.ui.vertical.text.menu .item > .icon {
+  float: none;
+  margin: 0em 0.75em 0em 0em;
+}
+.ui.vertical.text.menu .header.item {
+  margin: 0.8em 0em;
 }
-/* Down */
+/*--- hover ---*/
-.ui.secondary.vertical.pointing.menu > .item:active,
+.ui.text.menu .item.hover,
-.ui.secondary.vertical.pointing.menu > .item.down {
+.ui.text.menu .item:hover {
+  opacity: 1;
   background-color: transparent;
-  border-color: rgba(0, 0, 0, 0.2);
 }
-/* Active */
+/*--- active ---*/
-.ui.secondary.vertical.pointing.menu > .item.active {
+.ui.text.menu .active.item {
   background-color: transparent;
-  border-color: rgba(0, 0, 0, 0.4);
+  padding: 0em;
-  color: rgba(0, 0, 0, 0.85);
+  border: none;
+  opacity: 1;
+  font-weight: bold;
 }
-/*------- Inverted------- */
+/* disable variations */
-.ui.secondary.inverted.pointing.menu {
+.ui.text.pointing.menu .active.item:after {
-  border-bottom: 3px solid rgba(255, 255, 255, 0.1);
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
-.ui.secondary.inverted.pointing.menu > .item {
+.ui.text.attached.menu {
-  color: rgba(255, 255, 255, 0.7);
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
-/* Hover */
+/* colors */
-.ui.secondary.inverted.pointing.menu > .item.hover,
+.ui.green.text.menu .active.item {
-.ui.secondary.inverted.pointing.menu > .item:hover {
+  color: #A1CF64;
-  color: rgba(255, 255, 255, 0.85);
 }
-/* Down */
+.ui.red.text.menu .active.item {
-.ui.secondary.inverted.pointing.menu > .item:active,
+  color: #EF4D6D;
-.ui.secondary.inverted.pointing.menu > .item.down {
-  border-color: rgba(255, 255, 255, 0.4);
 }
-/* Active */
+.ui.blue.text.menu .active.item {
-.ui.secondary.inverted.pointing.menu > .item.active {
+  color: #6ECFF5;
-  border-color: rgba(255, 255, 255, 0.8);
-  color: #ffffff;
 }
-/*--------------
+.ui.purple.text.menu .active.item {
- Inverted Sec
+  color: #564F8A;
----------------*/
-.ui.secondary.inverted.vertical.pointing.menu {
-  border-right: 3px solid rgba(255, 255, 255, 0.1);
-  border-bottom: none;
 }
-/* Down */
+.ui.orange.text.menu .active.item {
-.ui.secondary.inverted.vertical.pointing.menu .item:active,
+  color: #F05940;
-.ui.secondary.inverted.vertical.pointing.menu .item.down {
-  box-shadow: 0.2em 0em 0em 0em rgba(255, 255, 255, 0.2);
 }
-/* Active */
+.ui.teal.text.menu .active.item {
-.ui.secondary.inverted.vertical.pointing.menu .item.active {
+  color: #00B5AD;
-  box-shadow: 0.2em 0em 0em 0em rgba(255, 255, 255, 0.4);
 }
 /*--------------
     Icon Only
@@ -1033,6 +883,194 @@
   font-size: 1.5em;
   margin: 0em auto 0.3em;
 }
+/*******************************
+           Variations
+*******************************/
+/*--------------
+    Colors
+---------------*/
+/*--- Light Colors  ---*/
+.ui.menu .green.active.item,
+.ui.green.menu .active.item {
+  border-color: #A1CF64 !important;
+}
+.ui.menu .red.active.item,
+.ui.red.menu .active.item {
+  border-color: #EF4D6D !important;
+}
+.ui.menu .blue.active.item,
+.ui.blue.menu .active.item {
+  border-color: #6ECFF5 !important;
+}
+.ui.menu .purple.active.item,
+.ui.purple.menu .active.item {
+  border-color: #564F8A !important;
+}
+.ui.menu .orange.active.item,
+.ui.orange.menu .active.item {
+  border-color: #F05940 !important;
+}
+.ui.menu .teal.active.item,
+.ui.teal.menu .active.item {
+  border-color: #00B5AD !important;
+}
+/*--------------
+    Inverted
+---------------*/
+.ui.inverted.menu {
+  background-color: #333333;
+  box-shadow: none;
+}
+.ui.inverted.menu .header.item {
+  margin: 0em;
+  background-color: rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.ui.inverted.menu .item,
+.ui.inverted.menu .item > a {
+  color: #FFFFFF;
+}
+.ui.inverted.menu .item .item,
+.ui.inverted.menu .item .item > a {
+  color: rgba(255, 255, 255, 0.8);
+}
+.ui.inverted.menu .item .item > a:hover {
+  background-color: rgba(255, 255, 255, 0.03);
+  color: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.menu .item > p:only-child {
+  color: rgba(255, 255, 255, 0.75);
+}
+.ui.inverted.menu .dropdown.item .menu .item,
+.ui.inverted.menu .dropdown.item .menu .item a {
+  color: rgba(0, 0, 0, 0.75) !important;
+}
+.ui.inverted.menu .item.disabled,
+.ui.inverted.menu .item.disabled:hover,
+.ui.inverted.menu .item.disabled.hover {
+  color: rgba(255, 255, 255, 0.2);
+}
+/*--- Border ---*/
+.ui.inverted.menu .item:before {
+  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+  background-image: linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+}
+.ui.vertical.inverted.menu .item:before {
+  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+  background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+  background-image: linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+}
+/*--- Hover ---*/
+.ui.link.inverted.menu .item:hover,
+.ui.inverted.menu .item.hover,
+.ui.inverted.menu .link.item:hover,
+.ui.inverted.menu a.item:hover,
+.ui.inverted.menu .dropdown.item.hover,
+.ui.inverted.menu .dropdown.item:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.ui.inverted.menu a.item:hover,
+.ui.inverted.menu .item.hover,
+.ui.inverted.menu .item > a:hover,
+.ui.inverted.menu .item .menu a.item:hover,
+.ui.inverted.menu .item .menu a.item.hover,
+.ui.inverted.menu .item .menu .link.item:hover,
+.ui.inverted.menu .item .menu .link.item.hover {
+  color: #ffffff;
+}
+/*--- Down ---*/
+.ui.inverted.menu .item.down,
+.ui.inverted.menu a.item:active,
+.ui.inverted.menu .item > a:active,
+.ui.inverted.menu .item.down,
+.ui.inverted.menu .dropdown.item:active,
+.ui.inverted.menu .link.item:active,
+.ui.inverted.menu a.item:active {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+/*--- Active ---*/
+.ui.inverted.menu .active.item {
+  border-color: transparent !important;
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.ui.inverted.menu .active.item,
+.ui.inverted.menu .active.item a {
+  color: #ffffff;
+}
+.ui.inverted.vertical.menu .item .menu .active.item {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+}
+/*--- Pointers ---*/
+.ui.inverted.pointing.menu .active.item:after {
+  background-color: #505050;
+  box-shadow: none;
+}
+.ui.inverted.pointing.menu .active.item:hover:after {
+  background-color: #3B3B3B;
+}
+/*--------------
+     Floated
+---------------*/
+.ui.floated.menu {
+  float: left;
+  margin: 0rem 0.5rem 0rem 0rem;
+}
+.ui.right.floated.menu {
+  float: right;
+  margin: 0rem 0rem 0rem 0.5rem;
+}
+/*--------------
+ Inverted Colors
+---------------*/
+/*--- Light Colors  ---*/
+.ui.grey.menu {
+  background-color: #F0F0F0;
+}
+/*--- Inverted Colors  ---*/
+.ui.inverted.green.menu {
+  background-color: #A1CF64;
+}
+.ui.inverted.green.pointing.menu .active.item:after {
+  background-color: #A1CF64;
+}
+.ui.inverted.red.menu {
+  background-color: #EF4D6D;
+}
+.ui.inverted.red.pointing.menu .active.item:after {
+  background-color: #F16883;
+}
+.ui.inverted.blue.menu {
+  background-color: #6ECFF5;
+}
+.ui.inverted.blue.pointing.menu .active.item:after {
+  background-color: #6ECFF5;
+}
+.ui.inverted.purple.menu {
+  background-color: #564F8A;
+}
+.ui.inverted.purple.pointing.menu .active.item:after {
+  background-color: #564F8A;
+}
+.ui.inverted.orange.menu {
+  background-color: #F05940;
+}
+.ui.inverted.orange.pointing.menu .active.item:after {
+  background-color: #F05940;
+}
+.ui.inverted.teal.menu {
+  background-color: #00B5AD;
+}
+.ui.inverted.teal.pointing.menu .active.item:after {
+  background-color: #00B5AD;
+}
 /*--------------
      Fitted
 ---------------*/

build/uncompressed/modules/video.css

@@ -1,43 +1,81 @@
-/*---------------
+/*
-    Video Embed
+ * # Semantic Video
-----------------*/
+ * http://github.com/quirkyinc/semantic
-.video.module {
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: July 30, 2013
+ */
+/*******************************
+            Video
+*******************************/
+.ui.video {
   position: relative;
-  background: #333333 url(../images/placeholder.png) no-repeat center center;
+  max-width: 100%;
 }
-.video.module .play {
+/*--------------
+     Content
+---------------*/
+/* Placeholder Image */
+.ui.video .placeholder {
+  background-color: #333333;
+}
+/* Play Icon Overlay */
+.ui.video .play {
   cursor: pointer;
   position: absolute;
   top: 0px;
   left: 0px;
-  z-index: 100;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
   filter: alpha(opacity=60);
   opacity: 0.6;
-  width: 100%;
-  height: 100%;
-  background: url(/images/modules/video-play.png) no-repeat center center;
   -webkit-transition: opacity 0.3s;
   -moz-transition: opacity 0.3s;
   -o-transition: opacity 0.3s;
   -ms-transition: opacity 0.3s;
   transition: opacity 0.3s;
 }
-.video.module .play:hover {
+.ui.video .play.icon:before {
-  opacity: 1;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 11;
+  font-size: 6rem;
+  margin: -3rem 0em 0em -3rem;
+  color: #FFFFFF;
+  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
 }
-.video.module .placeholder {
+.ui.video .placeholder {
+  display: block;
   width: 100%;
   height: 100%;
 }
-.video.module .embed {
+/* IFrame Embed */
+.ui.video .embed {
   display: none;
 }
-/* Video Active */
+/*******************************
-.video.module.active .play,
+            States
-.video.module.active .placeholder {
+*******************************/
+/*--------------
+    Hover
+---------------*/
+.ui.video .play:hover {
+  opacity: 1;
+}
+/*--------------
+     Active
+---------------*/
+.ui.video.active .play,
+.ui.video.active .placeholder {
   display: none;
 }
-.video.module.active .embed {
+.ui.video.active .embed {
   display: block;
 }

build/uncompressed/modules/video.js

@@ -11,381 +11,416 @@
 
 ;(function ($, window, document, undefined) {
 
-  $.fn.video = function(parameters) {
+$.fn.video = function(parameters) {
-
-    var
-      settings = $.extend(true, {}, $.fn.video.settings, parameters),
-      // make arguments available
-      moduleArguments = arguments || false,
-      invokedResponse
-    ;
-
-    $(this)
-      .each(function() {
-        var
-          $module      = $(this),
-          $placeholder = $module.find(settings.selector.placeholder),
-          $playButton  = $module.find(settings.selector.playButton),
-          $embed       = $module.find(settings.selector.embed),
-
-          element       = this,
-          instance      = $module.data('module-' + settings.namespace),
-          methodInvoked = (typeof parameters == 'string'),
-
-          namespace    = settings.namespace,
-          metadata     = settings.metadata,
-          className    = settings.className,
-
-          module
-        ;
-
-        module = {
-
-          initialize: function() {
-            module.debug('Initializing video');
-            $placeholder
-              .off('.video')
-              .on('click.' + namespace, module.play)
-            ;
-            $playButton
-              .off('.video')
-              .on('click.' + namespace, module.play)
-            ;
-            $module
-              .data('module-' + namespace, module)
-            ;
-          },
 
-          // sets new video
+  var
-          change: function(source, flv) {
+    $allModules     = $(this),
-            module.debug('Changing video to ', flv);
-            $module
-              .data(metadata.source, source)
-              .data(metadata.flv, flv)
-            ;
-            settings.onChange();
-          },
 
-          // clears video embed
+    settings        = ( $.isPlainObject(parameters) )
-          reset: function() {
+      ? $.extend(true, {}, $.fn.video.settings, parameters)
-            module.debug('Clearing video embed and showing placeholder');
+      : $.fn.video.settings,
-            $module
+
-              .removeClass(className.active)
+    moduleSelector  = $allModules.selector || '',
-            ;
+
-            $embed
+    time            = new Date().getTime(),
-              .html(' ')
+    performance     = [],
-            ;
-            $placeholder
-              .show()
-            ;
-            settings.onReset();
-          },
 
-          // plays current video
+    query           = arguments[0],
-          play: function() {
+    methodInvoked   = (typeof query == 'string'),
-            module.debug('Playing video');
+    queryArguments  = [].slice.call(arguments, 1),
+
+    invokedResponse
+  ;
+
+  $(this)
+    .each(function() {
+      var
+        $module      = $(this),
+        $placeholder = $module.find(settings.selector.placeholder),
+        $playButton  = $module.find(settings.selector.playButton),
+        $embed       = $module.find(settings.selector.embed),
+        
+        eventNamespace  = '.' + settings.namespace,
+        moduleNamespace = settings.namespace + '-module', 
+
+        selector        = settings.selector,
+        className       = settings.className,
+        error           = settings.error,
+        metadata        = settings.metadata,
+        namespace       = settings.namespace,
+        
+        element         = this,
+        instance        = $module.data(moduleNamespace),
+        module
+      ;
+
+      module = {
+
+        initialize: function() {
+          module.debug('Initializing video');
+          $placeholder
+            .on('click' + eventNamespace, module.play)
+          ;
+          $playButton
+            .on('click' + eventNamespace, module.play)
+          ;
+          module.instantiate();
+        },
+
+        instantiate: function() {
+          instance = module;
+          $module
+            .data(moduleNamespace, module)
+          ;
+        },
+
+        destroy: function() {
+          module.verbose('Destroying previous instance of video');
+          $module
+            .removeData(moduleNamespace)
+            .off(eventNamespace)
+          ;
+        },
+
+        // sets new video
+        change: function(source, id, url) {
+          module.debug('Changing video to ', source, id, url);
+          $module
+            .data(metadata.source, source)
+            .data(metadata.id, id)
+            .data(metadata.url, url)
+          ;
+          settings.onChange();
+        },
+
+        // clears video embed
+        reset: function() {
+          module.debug('Clearing video embed and showing placeholder');
+          $module
+            .removeClass(className.active)
+          ;
+          $embed
+            .html(' ')
+          ;
+          $placeholder
+            .show()
+          ;
+          settings.onReset();
+        },
+
+        // plays current video
+        play: function() {
+          module.debug('Playing video');
+          var
+            source = $module.data(metadata.source) || false, 
+            url    = $module.data(metadata.url)    || false,
+            id     = $module.data(metadata.id)     || false
+          ;
+          $embed
+            .html( module.generate.html(source, id, url) )
+          ;
+          $module
+            .addClass(className.active)
+          ;
+          settings.onPlay();
+        },
+
+        generate: {
+          // generates iframe html
+          html: function(source, id, url) {
+            module.debug('Generating embed html');
             var
-              source = $module.data(metadata.source),
+              width = (settings.width == 'auto')
-              flv    = $module.data(metadata.flv)
+                ? $module.width()
-            ;
+                : settings.width,
-            $embed
+              height = (settings.height == 'auto')
-              .html( module.generate.html(source, flv) )
+                ? $module.height()
-            ;
+                : settings.height,
-            $module
+              html
-              .addClass(className.active)
             ;
-            settings.onPlay();
+            if(source && id) {
-          },
-
-          generate: {
-            // generates iframe html
-            html: function(source, flv) {
-              module.debug('Generating embed html');
-              var
-                width = (settings.width == 'auto')
-                  ? $module.width()
-                  : settings.width,
-                height = (settings.height == 'auto')
-                  ? $module.height()
-                  : settings.height,
-                html
-              ;
               if(source == 'vimeo') {
                 html = ''
-                  + '<iframe src="http://player.vimeo.com/video/' + flv + '?=' + module.generate.url(source) + '"'
+                  + '<iframe src="http://player.vimeo.com/video/' + id + '?=' + module.generate.url(source) + '"'
                   + ' width="' + width + '" height="' + height + '"'
                   + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
                 ;
               }
               else if(source == 'youtube') {
                 html = ''
-                  + '<iframe src="http://www.youtube.com/embed/' + flv + '?=' + module.generate.url(source) + '"'
+                  + '<iframe src="http://www.youtube.com/embed/' + id + '?=' + module.generate.url(source) + '"'
                   + ' width="' + width + '" height="' + height + '"'
                   + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
                 ;
               }
-              return html;
+            }
-            },
+            else if(url) {
-
+              html = ''
-            // generate url parameters
+                + '<iframe src="' + url + '"'
-            url: function(source) {
+                + ' width="' + width + '" height="' + height + '"'
-              var
+                + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
-                api      = (settings.api)
-                  ? 1
-                  : 0,
-                autoplay = (settings.autoplay)
-                  ? 1
-                  : 0,
-                hd       = (settings.hd)
-                  ? 1
-                  : 0,
-                showUI   = (settings.showUI)
-                  ? 1
-                  : 0,
-                // opposite used for some params
-                hideUI   = !(settings.showUI)
-                  ? 1
-                  : 0,
-                url = ''
               ;
-              if(source == 'vimeo') {
-                url = ''
-                  +      'api='      + api
-                  + '&amp;title='    + showUI
-                  + '&amp;byline='   + showUI
-                  + '&amp;portrait=' + showUI
-                  + '&amp;autoplay=' + autoplay
-                ;
-                if(settings.color) {
-                  url += '&amp;color=' + settings.color;
-                }
-              }
-              else if(source == 'youtube') {
-                url = ''
-                  +      'enablejsapi=' + api
-                  + '&amp;autoplay='    + autoplay
-                  + '&amp;autohide='    + hideUI
-                  + '&amp;hq='          + hd
-                  + '&amp;modestbranding=1'
-                ;
-                if(settings.color) {
-                  url += '&amp;color=' + settings.color;
-                }
-              }
-              return url;
             }
+            else {
+              module.error(error.noVideo);
+            }
+            return html;
           },
 
-          /* standard module */
+          // generate url parameters
-          debug: function(message, variableName) {
+          url: function(source) {
-            if(settings.debug) {
+            var
-              if(variableName !== undefined) {
+              api      = (settings.api)
-                console.info(settings.moduleName + ': ' + message, variableName);
+                ? 1
+                : 0,
+              autoplay = (settings.autoplay)
+                ? 1
+                : 0,
+              hd       = (settings.hd)
+                ? 1
+                : 0,
+              showUI   = (settings.showUI)
+                ? 1
+                : 0,
+              // opposite used for some params
+              hideUI   = !(settings.showUI)
+                ? 1
+                : 0,
+              url = ''
+            ;
+            if(source == 'vimeo') {
+              url = ''
+                +      'api='      + api
+                + '&amp;title='    + showUI
+                + '&amp;byline='   + showUI
+                + '&amp;portrait=' + showUI
+                + '&amp;autoplay=' + autoplay
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
               }
-              else {
+            }
-                console.info(settings.moduleName + ': ' + message);
+            if(source == 'ustream') {
+              url = ''
+                + 'autoplay=' + autoplay
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
               }
             }
-          },
+            else if(source == 'youtube') {
-          error: function(errorMessage) {
+              url = ''
-            console.warn(settings.moduleName + ': ' + errorMessage);
+                +      'enablejsapi=' + api
-          },
+                + '&amp;autoplay='    + autoplay
-          invoke: function(methodName, context, methodArguments) {
+                + '&amp;autohide='    + hideUI
+                + '&amp;hq='          + hd
+                + '&amp;modestbranding=1'
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
+              }
+            }
+            return url;
+          }
+        },
+
+        setting: function(name, value) {
+          if(value !== undefined) {
+            if( $.isPlainObject(name) ) {
+              $.extend(true, settings, name);
+            }
+            else {
+              settings[name] = value;
+            }
+          }
+          else {
+            return settings[name];
+          }
+        },
+        internal: function(name, value) {
+          if(value !== undefined) {
+            if( $.isPlainObject(name) ) {
+              $.extend(true, module, name);
+            }
+            else {
+              module[name] = value;
+            }
+          }
+          else {
+            return module[name];
+          }
+        },
+        debug: function() {
+          if(settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+            }
+          }
+        },
+        verbose: function() {
+          if(settings.verbose && settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+            }
+          }
+        },
+        error: function() {
+          module.error = Function.prototype.bind.call(console.warn, console, settings.moduleName + ':');
+        },
+        performance: {
+          log: function(message) {
             var
-              method
+              currentTime,
+              executionTime,
+              previousTime
             ;
-            methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 );
+            if(settings.performance) {
-            if(typeof methodName == 'string' && instance !== undefined) {
+              currentTime   = new Date().getTime();
-              methodName = methodName.split('.');
+              previousTime  = time || currentTime,
-              $.each(methodName, function(index, name) {
+              executionTime = currentTime - previousTime;
-                if( $.isPlainObject( instance[name] ) ) {
+              time          = currentTime;
-                  instance = instance[name];
+              performance.push({
-                  return true;
+                'Element'        : element,
-                }
+                'Name'           : message[0],
-                else if( $.isFunction( instance[name] ) ) {
+                'Arguments'      : [].slice.call(message, 1) || '',
-                  method = instance[name];
+                'Execution Time' : executionTime
-                  return true;
-                }
-                module.error(settings.errors.method);
-                return false;
               });
             }
-            if ( $.isFunction( method ) ) {
+            clearTimeout(module.performance.timer);
-              return method.apply(context, methodArguments);
+            module.performance.timer = setTimeout(module.performance.display, 100);
+          },
+          display: function() {
+            var
+              title = settings.moduleName + ':',
+              totalTime = 0
+            ;
+            time        = false;
+            $.each(performance, function(index, data) {
+              totalTime += data['Execution Time'];
+            });
+            title += ' ' + totalTime + 'ms';
+            if(moduleSelector) {
+              title += ' \'' + moduleSelector + '\'';
             }
-            // return retrieved variable or chain
+            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
-            return method;
+              console.groupCollapsed(title);
+              if(console.table) {
+                console.table(performance);
+              }
+              else {
+                $.each(performance, function(index, data) {
+                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+                });
+              }
+              console.groupEnd();
+            }
+            performance = [];
           }
-        };
+        },
-        // check for invoking internal method
+        invoke: function(query, passedArguments, context) {
-        if(methodInvoked) {
+          var
-          invokedResponse = module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) );
+            maxDepth,
-        }
+            found
-        // otherwise initialize
+          ;
-        else {
+          passedArguments = passedArguments || queryArguments;
-          if(instance) {
+          context         = element         || context;
-            module.destroy();
+          if(typeof query == 'string' && instance !== undefined) {
+            query    = query.split(/[\. ]/);
+            maxDepth = query.length - 1;
+            $.each(query, function(depth, value) {
+              if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
+                instance = instance[value];
+              }
+              else if( instance[value] !== undefined ) {
+                found = instance[value];
+              }
+              else {
+                module.error(error.method);
+              }
+            });
           }
-          module.initialize();
+          if ( $.isFunction( found ) ) {
+            return found.apply(context, passedArguments);
+          }
+          return found || false;
         }
+      };
 
-      })
+      if(methodInvoked) {
-    ;
+        if(instance === undefined) {
-    // chain or return queried method
+          module.initialize();
-    return (invokedResponse !== undefined)
+        }
-      ? invokedResponse
+        invokedResponse = module.invoke(query);
-      : this
+      }
-    ;
+      else {
-  };
+        if(instance !== undefined) {
-
+          module.destroy();
-
+        }
-  $.fn.videoPlaylist = function(video, parameters) {
-    var
-      $allModules = $(this),
-      $video      = $(video),
-      $iframe     = $video.find('.embed iframe'),
-
-      settings    = $.extend({}, $.fn.videoPlaylist.settings, parameters, true)
-    ;
-    $allModules
-      .each(function() {
-        var
-          $element    = $(this),
-
-          metadata    = settings.metadata,
-          namespace   = settings.namespace,
-          className   = settings.className,
-
-          module       = {
-            initialize: function() {
-              $element
-                .on('click.' + namespace , module.changeVideo)
-              ;
-            },
-            changeVideo: function() {
-              var
-                flv         = $element.data(metadata.flv)         || false,
-                source      = $element.data(metadata.source)      || false,
-                placeholder = $element.data(metadata.placeholder) || false
-              ;
-              if(flv && source) {
-                $video
-                  .data(metadata.source, source)
-                  .data(metadata.flv, flv)
-                ;
-                if(settings.showPlaceholder) {
-                  $video
-                    .removeClass(className.active)
-                    .find($.fn.video.selector.placeholder)
-                      .attr('src', placeholder)
-                  ;
-                }
-                else {
-                  try {
-                    $video
-                      .video('play')
-                    ;
-                  }
-                  catch(error) {
-                    console.warn('Video Playlist Module: ' + settings.error.init);
-                  }
-                }
-                $allModules
-                  .removeClass(className.active)
-                ;
-                $element
-                  .addClass(className.active)
-                ;
-              }
-            }
-          }
-        ;
         module.initialize();
-      })
-    ;
-
-    if(settings.playFirst) {
-      $allModules
-        .eq(0)
-        .trigger('click')
-      ;
-      // we all like a good hack
-      if($iframe.size() > 0) {
-        $iframe
-          .attr('src', $iframe.attr('src').replace('autoplay=1', 'autoplay=0') )
-        ;
       }
+    })
+  ;
 
-    }
+  return (invokedResponse)
-
+    ? invokedResponse
-  };
+    : this
-
+  ;
-  $.fn.video.settings = {
+};
-
-    moduleName  : 'Video',
-    namespace   : 'video',
-    debug       : false,
-    
-    metadata    : {
-      source      : 'source',
-      flv         : 'flv'
-    },
 
-    onPlay      : function(){},
+$.fn.video.settings = {
-    onReset     : function(){},
-    onChange    : function(){},
 
-    // callbacks not coded yet (needs to use jsapi)
+  moduleName  : 'Video',
-    play        : function() {},
+  namespace   : 'video',
-    pause       : function() {},
-    stop        : function() {},
 
-    width       : 'auto',
+  debug       : true,
-    height      : 'auto',
+  verbose     : true,
+  performance : true,
   
-    autoplay    : false,
-    color       : '#442359',
-    hd          : true,
-    showUI      : false,
-    api         : true,
 
-    errors      : {
+  metadata    : {
-      method      : 'The method you called is not defined'
+    source : 'source',
-    },
+    id     : 'id',
+    url    : 'url'
+  },
   
-    className   : {
+  onPlay   : function(){},
-      active      : 'active'
+  onReset  : function(){},
-    },
+  onChange : function(){},
   
-    selector    : {
+  // callbacks not coded yet (needs to use jsapi)
-      embed       : '.embed',
+  onPause  : function() {},
-      placeholder : '.placeholder',
+  onStop   : function() {},
-      playButton  : '.play'
-    }
-  };
   
-  $.fn.videoPlaylist.settings = {
+  width    : 'auto',
-    moduleName      : 'Video Playlist',
+  height   : 'auto',
-    namespace       : 'videoPlaylist',
   
-    source          : 'vimeo',
+  autoplay : false,
-    showPlaceholder : false,
+  color    : '#442359',
-    playFirst       : true,
+  hd       : true,
+  showUI   : false,
+  api      : true,
   
-    metadata: {
+  error      : {
-      flv         : 'flv',
+    noVideo     : 'No video specified',
-      source      : 'source',
+    method      : 'The method you called is not defined'
-      placeholder : 'placeholder'
+  },
-    },
   
-    errors: {
+  className   : {
-      init   : 'The video player you specified was not yet initialized'
+    active      : 'active'
-    },
+  },
   
-    className : {
+  selector    : {
-      active  : 'active'
+    embed       : '.embed',
-    }
+    placeholder : '.placeholder',
+    playButton  : '.play'
+  }
+};
 
-  };
 
 })( jQuery, window , document );

node/src/files/components/semantic/collections/menu.css

@@ -338,7 +338,7 @@
   visibility: visible;
 }
 /*******************************
-          Variations
+             Types
 *******************************/
 /*--------------
     Vertical
@@ -475,35 +475,44 @@
   display: block;
 }
 /*--------------
-    Colors
+     Tiered
 ---------------*/
-/*--- Light Colors  ---*/
+.ui.tabular.menu {
-.ui.menu .green.active.item,
+  background-color: transparent;
-.ui.green.menu .active.item {
+  border-bottom: 1px solid #DCDDDE;
-  border-color: #A1CF64 !important;
+  -webkit-box-shadow: none;
-}
+  -moz-box-shadow: none;
-.ui.menu .red.active.item,
+  box-shadow: none;
-.ui.red.menu .active.item {
-  border-color: #EF4D6D !important;
 }
-.ui.menu .blue.active.item,
+.ui.tabular.menu .item {
-.ui.blue.menu .active.item {
+  background-color: transparent;
-  border-color: #6ECFF5 !important;
+  font-weight: bold;
+  padding-left: 1.4em;
+  padding-right: 1.4em;
+  color: #9DA6AB;
 }
-.ui.menu .purple.active.item,
+.ui.tabular.menu .item:hover {
-.ui.purple.menu .active.item {
+  background-color: transparent;
-  border-color: #564F8A !important;
+  color: #5D6266;
 }
-.ui.menu .orange.active.item,
+.ui.tabular.menu .item:before {
-.ui.orange.menu .active.item {
+  display: none;
-  border-color: #F05940 !important;
 }
-.ui.menu .teal.active.item,
+.ui.tabular.menu .active.item {
-.ui.teal.menu .active.item {
+  position: relative;
-  border-color: #00B5AD !important;
+  top: 1px;
+  background-color: #F8F8F8;
+  color: #5D6266;
+  border-left: 1px solid #DCDDDE;
+  border-right: 1px solid #DCDDDE;
+  border-top: 1px solid #DCDDDE;
+  padding-top: 0.75em;
+  -webkit-border-radius: 5px 5px 0 0;
+  -moz-border-radius: 5px 5px 0 0;
+  border-radius: 5px 5px 0 0;
 }
 /*--------------
-    Pagination
+   Pagination
 ---------------*/
 .ui.pagination.menu {
   margin: 0em;
@@ -523,284 +532,6 @@
   padding-top: 0.75em;
   background-color: rgba(0, 0, 0, 0.05);
 }
-/*--------------
-    Inverted
----------------*/
-.ui.inverted.menu {
-  background-color: #333333;
-  box-shadow: none;
-}
-.ui.inverted.menu .header.item {
-  margin: 0em;
-  background-color: rgba(0, 0, 0, 0.3);
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-.ui.inverted.menu .item,
-.ui.inverted.menu .item > a {
-  color: #FFFFFF;
-}
-.ui.inverted.menu .item .item,
-.ui.inverted.menu .item .item > a {
-  color: rgba(255, 255, 255, 0.8);
-}
-.ui.inverted.menu .item .item > a:hover {
-  background-color: rgba(255, 255, 255, 0.03);
-  color: rgba(255, 255, 255, 0.9);
-}
-.ui.inverted.menu .item > p:only-child {
-  color: rgba(255, 255, 255, 0.75);
-}
-.ui.inverted.menu .dropdown.item .menu .item,
-.ui.inverted.menu .dropdown.item .menu .item a {
-  color: rgba(0, 0, 0, 0.75) !important;
-}
-.ui.inverted.menu .item.disabled,
-.ui.inverted.menu .item.disabled:hover,
-.ui.inverted.menu .item.disabled.hover {
-  color: rgba(255, 255, 255, 0.2);
-}
-/*--- Border ---*/
-.ui.inverted.menu .item:before {
-  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-  background-image: linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-}
-.ui.vertical.inverted.menu .item:before {
-  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-  background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-  background-image: linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
-}
-/*--- Hover ---*/
-.ui.link.inverted.menu .item:hover,
-.ui.inverted.menu .item.hover,
-.ui.inverted.menu .link.item:hover,
-.ui.inverted.menu a.item:hover,
-.ui.inverted.menu .dropdown.item.hover,
-.ui.inverted.menu .dropdown.item:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.ui.inverted.menu a.item:hover,
-.ui.inverted.menu .item.hover,
-.ui.inverted.menu .item > a:hover,
-.ui.inverted.menu .item .menu a.item:hover,
-.ui.inverted.menu .item .menu a.item.hover,
-.ui.inverted.menu .item .menu .link.item:hover,
-.ui.inverted.menu .item .menu .link.item.hover {
-  color: #ffffff;
-}
-/*--- Down ---*/
-.ui.inverted.menu .item.down,
-.ui.inverted.menu a.item:active,
-.ui.inverted.menu .item > a:active,
-.ui.inverted.menu .item.down,
-.ui.inverted.menu .dropdown.item:active,
-.ui.inverted.menu .link.item:active,
-.ui.inverted.menu a.item:active {
-  background-color: rgba(255, 255, 255, 0.15);
-}
-/*--- Active ---*/
-.ui.inverted.menu .active.item {
-  border-color: transparent !important;
-  background-color: rgba(255, 255, 255, 0.2);
-}
-.ui.inverted.menu .active.item,
-.ui.inverted.menu .active.item a {
-  color: #ffffff;
-}
-.ui.inverted.vertical.menu .item .menu .active.item {
-  background-color: rgba(255, 255, 255, 0.2);
-  color: #ffffff;
-}
-/*--- Pointers ---*/
-.ui.inverted.pointing.menu .active.item:after {
-  background-color: #505050;
-  box-shadow: none;
-}
-.ui.inverted.pointing.menu .active.item:hover:after {
-  background-color: #3B3B3B;
-}
-/*--------------
-     Floated
----------------*/
-.ui.floated.menu {
-  float: left;
-  margin: 0rem 0.5rem 0rem 0rem;
-}
-.ui.right.floated.menu {
-  float: right;
-  margin: 0rem 0rem 0rem 0.5rem;
-}
-/*--------------
- Inverted Colors
----------------*/
-/*--- Light Colors  ---*/
-.ui.grey.menu {
-  background-color: #F0F0F0;
-}
-/*--- Inverted Colors  ---*/
-.ui.inverted.green.menu {
-  background-color: #A1CF64;
-}
-.ui.inverted.green.pointing.menu .active.item:after {
-  background-color: #A1CF64;
-}
-.ui.inverted.red.menu {
-  background-color: #EF4D6D;
-}
-.ui.inverted.red.pointing.menu .active.item:after {
-  background-color: #F16883;
-}
-.ui.inverted.blue.menu {
-  background-color: #6ECFF5;
-}
-.ui.inverted.blue.pointing.menu .active.item:after {
-  background-color: #6ECFF5;
-}
-.ui.inverted.purple.menu {
-  background-color: #564F8A;
-}
-.ui.inverted.purple.pointing.menu .active.item:after {
-  background-color: #564F8A;
-}
-.ui.inverted.orange.menu {
-  background-color: #F05940;
-}
-.ui.inverted.orange.pointing.menu .active.item:after {
-  background-color: #F05940;
-}
-.ui.inverted.teal.menu {
-  background-color: #00B5AD;
-}
-.ui.inverted.teal.pointing.menu .active.item:after {
-  background-color: #00B5AD;
-}
-/*--------------
-    Text Menu
----------------*/
-.ui.text.menu {
-  background-color: transparent;
-  margin: 1rem -1rem;
-  -moz-border-radius: 0px;
-  -webkit-border-radius: 0px;
-  border-radius: 0px;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-.ui.text.menu > .item {
-  opacity: 0.6;
-  margin: 0em 1em;
-  padding: 0em;
-  min-height: 0em !important;
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
-  border-radius: 0px;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  color: rgba(0, 0, 0, 0.6);
-  -webkit-transition: opacity 0.2s ease
-  ;
-  -moz-transition: opacity 0.2s ease
-  ;
-  -o-transition: opacity 0.2s ease
-  ;
-  -ms-transition: opacity 0.2s ease
-  ;
-  transition: opacity 0.2s ease
-  ;
-}
-.ui.text.menu > .item:before {
-  display: none !important;
-}
-.ui.text.menu .header.item {
-  background-color: transparent;
-  opacity: 1;
-  color: rgba(50, 50, 50, 0.8);
-  font-size: 0.875rem;
-  padding: 0em;
-  text-transform: uppercase;
-  font-weight: bold;
-}
-.ui.text.menu .header.item > a {
-  background-color: transparent;
-}
-/*--- fluid text ---*/
-.ui.text.item.menu .item {
-  margin: 0em;
-}
-/*--- vertical text ---*/
-.ui.vertical.text.menu {
-  margin: 1rem 0em;
-}
-.ui.vertical.text.menu:first-child {
-  margin-top: 0rem;
-}
-.ui.vertical.text.menu:last-child {
-  margin-bottom: 0rem;
-}
-.ui.vertical.text.menu .item {
-  float: left;
-  clear: left;
-  margin: 0.5em 0em;
-}
-.ui.vertical.text.menu .item > .icon {
-  float: none;
-  margin: 0em 0.75em 0em 0em;
-}
-.ui.vertical.text.menu .header.item {
-  margin: 0.8em 0em;
-}
-/*--- hover ---*/
-.ui.text.menu .item.hover,
-.ui.text.menu .item:hover {
-  opacity: 1;
-  background-color: transparent;
-}
-/*--- active ---*/
-.ui.text.menu .active.item {
-  background-color: transparent;
-  padding: 0em;
-  border: none;
-  opacity: 1;
-  font-weight: bold;
-}
-/* disable variations */
-.ui.text.pointing.menu .active.item:after {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-.ui.text.attached.menu {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-/* colors */
-.ui.green.text.menu .active.item {
-  color: #A1CF64;
-}
-.ui.red.text.menu .active.item {
-  color: #EF4D6D;
-}
-.ui.blue.text.menu .active.item {
-  color: #6ECFF5;
-}
-.ui.purple.text.menu .active.item {
-  color: #564F8A;
-}
-.ui.orange.text.menu .active.item {
-  color: #F05940;
-}
-.ui.teal.text.menu .active.item {
-  color: #00B5AD;
-}
 /*--------------
    Secondary
 ---------------*/
@@ -907,7 +638,9 @@
   background-color: transparent;
   border-color: rgba(0, 0, 0, 0.4);
 }
-/*------- Vertical------- */
+/*---------------------
+   Secondary Vertical
+-----------------------*/
 .ui.secondary.vertical.pointing.menu {
   border: none;
   border-right: 3px solid rgba(0, 0, 0, 0.1);
@@ -933,61 +666,178 @@
   -moz-border-radius: 0em;
   border-radius: 0em;
 }
-/* Hover */
+/* Hover */
-.ui.secondary.vertical.pointing.menu > .item.hover,
+.ui.secondary.vertical.pointing.menu > .item.hover,
-.ui.secondary.vertical.pointing.menu > .item:hover {
+.ui.secondary.vertical.pointing.menu > .item:hover {
-  background-color: transparent;
+  background-color: transparent;
-  color: rgba(0, 0, 0, 0.7);
+  color: rgba(0, 0, 0, 0.7);
+}
+/* Down */
+.ui.secondary.vertical.pointing.menu > .item:active,
+.ui.secondary.vertical.pointing.menu > .item.down {
+  background-color: transparent;
+  border-color: rgba(0, 0, 0, 0.2);
+}
+/* Active */
+.ui.secondary.vertical.pointing.menu > .item.active {
+  background-color: transparent;
+  border-color: rgba(0, 0, 0, 0.4);
+  color: rgba(0, 0, 0, 0.85);
+}
+/*--------------
+    Inverted
+---------------*/
+.ui.secondary.inverted.menu {
+  background-color: transparent;
+}
+.ui.secondary.inverted.pointing.menu {
+  border-bottom: 3px solid rgba(255, 255, 255, 0.1);
+}
+.ui.secondary.inverted.pointing.menu > .item {
+  color: rgba(255, 255, 255, 0.7);
+}
+/* Hover */
+.ui.secondary.inverted.pointing.menu > .item.hover,
+.ui.secondary.inverted.pointing.menu > .item:hover {
+  color: rgba(255, 255, 255, 0.85);
+}
+/* Down */
+.ui.secondary.inverted.pointing.menu > .item:active,
+.ui.secondary.inverted.pointing.menu > .item.down {
+  border-color: rgba(255, 255, 255, 0.4) !important;
+}
+/* Active */
+.ui.secondary.inverted.pointing.menu > .item.active {
+  border-color: rgba(255, 255, 255, 0.8) !important;
+  color: #ffffff;
+}
+/*---------------------
+   Inverted Vertical
+----------------------*/
+.ui.secondary.inverted.vertical.pointing.menu {
+  border-right: 3px solid rgba(255, 255, 255, 0.1);
+  border-bottom: none;
+}
+/*--------------
+    Text Menu
+---------------*/
+.ui.text.menu {
+  background-color: transparent;
+  margin: 1rem -1rem;
+  -moz-border-radius: 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.ui.text.menu > .item {
+  opacity: 0.6;
+  margin: 0em 1em;
+  padding: 0em;
+  min-height: 0em !important;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  color: rgba(0, 0, 0, 0.6);
+  -webkit-transition: opacity 0.2s ease
+  ;
+  -moz-transition: opacity 0.2s ease
+  ;
+  -o-transition: opacity 0.2s ease
+  ;
+  -ms-transition: opacity 0.2s ease
+  ;
+  transition: opacity 0.2s ease
+  ;
+}
+.ui.text.menu > .item:before {
+  display: none !important;
+}
+.ui.text.menu .header.item {
+  background-color: transparent;
+  opacity: 1;
+  color: rgba(50, 50, 50, 0.8);
+  font-size: 0.875rem;
+  padding: 0em;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+.ui.text.menu .header.item > a {
+  background-color: transparent;
+}
+/*--- fluid text ---*/
+.ui.text.item.menu .item {
+  margin: 0em;
+}
+/*--- vertical text ---*/
+.ui.vertical.text.menu {
+  margin: 1rem 0em;
+}
+.ui.vertical.text.menu:first-child {
+  margin-top: 0rem;
+}
+.ui.vertical.text.menu:last-child {
+  margin-bottom: 0rem;
+}
+.ui.vertical.text.menu .item {
+  float: left;
+  clear: left;
+  margin: 0.5em 0em;
+}
+.ui.vertical.text.menu .item > .icon {
+  float: none;
+  margin: 0em 0.75em 0em 0em;
+}
+.ui.vertical.text.menu .header.item {
+  margin: 0.8em 0em;
 }
-/* Down */
+/*--- hover ---*/
-.ui.secondary.vertical.pointing.menu > .item:active,
+.ui.text.menu .item.hover,
-.ui.secondary.vertical.pointing.menu > .item.down {
+.ui.text.menu .item:hover {
+  opacity: 1;
   background-color: transparent;
-  border-color: rgba(0, 0, 0, 0.2);
 }
-/* Active */
+/*--- active ---*/
-.ui.secondary.vertical.pointing.menu > .item.active {
+.ui.text.menu .active.item {
   background-color: transparent;
-  border-color: rgba(0, 0, 0, 0.4);
+  padding: 0em;
-  color: rgba(0, 0, 0, 0.85);
+  border: none;
+  opacity: 1;
+  font-weight: bold;
 }
-/*------- Inverted------- */
+/* disable variations */
-.ui.secondary.inverted.pointing.menu {
+.ui.text.pointing.menu .active.item:after {
-  border-bottom: 3px solid rgba(255, 255, 255, 0.1);
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
-.ui.secondary.inverted.pointing.menu > .item {
+.ui.text.attached.menu {
-  color: rgba(255, 255, 255, 0.7);
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
-/* Hover */
+/* colors */
-.ui.secondary.inverted.pointing.menu > .item.hover,
+.ui.green.text.menu .active.item {
-.ui.secondary.inverted.pointing.menu > .item:hover {
+  color: #A1CF64;
-  color: rgba(255, 255, 255, 0.85);
 }
-/* Down */
+.ui.red.text.menu .active.item {
-.ui.secondary.inverted.pointing.menu > .item:active,
+  color: #EF4D6D;
-.ui.secondary.inverted.pointing.menu > .item.down {
-  border-color: rgba(255, 255, 255, 0.4);
 }
-/* Active */
+.ui.blue.text.menu .active.item {
-.ui.secondary.inverted.pointing.menu > .item.active {
+  color: #6ECFF5;
-  border-color: rgba(255, 255, 255, 0.8);
-  color: #ffffff;
 }
-/*--------------
+.ui.purple.text.menu .active.item {
- Inverted Sec
+  color: #564F8A;
----------------*/
-.ui.secondary.inverted.vertical.pointing.menu {
-  border-right: 3px solid rgba(255, 255, 255, 0.1);
-  border-bottom: none;
 }
-/* Down */
+.ui.orange.text.menu .active.item {
-.ui.secondary.inverted.vertical.pointing.menu .item:active,
+  color: #F05940;
-.ui.secondary.inverted.vertical.pointing.menu .item.down {
-  box-shadow: 0.2em 0em 0em 0em rgba(255, 255, 255, 0.2);
 }
-/* Active */
+.ui.teal.text.menu .active.item {
-.ui.secondary.inverted.vertical.pointing.menu .item.active {
+  color: #00B5AD;
-  box-shadow: 0.2em 0em 0em 0em rgba(255, 255, 255, 0.4);
 }
 /*--------------
     Icon Only
@@ -1033,6 +883,194 @@
   font-size: 1.5em;
   margin: 0em auto 0.3em;
 }
+/*******************************
+           Variations
+*******************************/
+/*--------------
+    Colors
+---------------*/
+/*--- Light Colors  ---*/
+.ui.menu .green.active.item,
+.ui.green.menu .active.item {
+  border-color: #A1CF64 !important;
+}
+.ui.menu .red.active.item,
+.ui.red.menu .active.item {
+  border-color: #EF4D6D !important;
+}
+.ui.menu .blue.active.item,
+.ui.blue.menu .active.item {
+  border-color: #6ECFF5 !important;
+}
+.ui.menu .purple.active.item,
+.ui.purple.menu .active.item {
+  border-color: #564F8A !important;
+}
+.ui.menu .orange.active.item,
+.ui.orange.menu .active.item {
+  border-color: #F05940 !important;
+}
+.ui.menu .teal.active.item,
+.ui.teal.menu .active.item {
+  border-color: #00B5AD !important;
+}
+/*--------------
+    Inverted
+---------------*/
+.ui.inverted.menu {
+  background-color: #333333;
+  box-shadow: none;
+}
+.ui.inverted.menu .header.item {
+  margin: 0em;
+  background-color: rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.ui.inverted.menu .item,
+.ui.inverted.menu .item > a {
+  color: #FFFFFF;
+}
+.ui.inverted.menu .item .item,
+.ui.inverted.menu .item .item > a {
+  color: rgba(255, 255, 255, 0.8);
+}
+.ui.inverted.menu .item .item > a:hover {
+  background-color: rgba(255, 255, 255, 0.03);
+  color: rgba(255, 255, 255, 0.9);
+}
+.ui.inverted.menu .item > p:only-child {
+  color: rgba(255, 255, 255, 0.75);
+}
+.ui.inverted.menu .dropdown.item .menu .item,
+.ui.inverted.menu .dropdown.item .menu .item a {
+  color: rgba(0, 0, 0, 0.75) !important;
+}
+.ui.inverted.menu .item.disabled,
+.ui.inverted.menu .item.disabled:hover,
+.ui.inverted.menu .item.disabled.hover {
+  color: rgba(255, 255, 255, 0.2);
+}
+/*--- Border ---*/
+.ui.inverted.menu .item:before {
+  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+  background-image: linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+}
+.ui.vertical.inverted.menu .item:before {
+  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+  background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+  background-image: linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
+}
+/*--- Hover ---*/
+.ui.link.inverted.menu .item:hover,
+.ui.inverted.menu .item.hover,
+.ui.inverted.menu .link.item:hover,
+.ui.inverted.menu a.item:hover,
+.ui.inverted.menu .dropdown.item.hover,
+.ui.inverted.menu .dropdown.item:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.ui.inverted.menu a.item:hover,
+.ui.inverted.menu .item.hover,
+.ui.inverted.menu .item > a:hover,
+.ui.inverted.menu .item .menu a.item:hover,
+.ui.inverted.menu .item .menu a.item.hover,
+.ui.inverted.menu .item .menu .link.item:hover,
+.ui.inverted.menu .item .menu .link.item.hover {
+  color: #ffffff;
+}
+/*--- Down ---*/
+.ui.inverted.menu .item.down,
+.ui.inverted.menu a.item:active,
+.ui.inverted.menu .item > a:active,
+.ui.inverted.menu .item.down,
+.ui.inverted.menu .dropdown.item:active,
+.ui.inverted.menu .link.item:active,
+.ui.inverted.menu a.item:active {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+/*--- Active ---*/
+.ui.inverted.menu .active.item {
+  border-color: transparent !important;
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.ui.inverted.menu .active.item,
+.ui.inverted.menu .active.item a {
+  color: #ffffff;
+}
+.ui.inverted.vertical.menu .item .menu .active.item {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+}
+/*--- Pointers ---*/
+.ui.inverted.pointing.menu .active.item:after {
+  background-color: #505050;
+  box-shadow: none;
+}
+.ui.inverted.pointing.menu .active.item:hover:after {
+  background-color: #3B3B3B;
+}
+/*--------------
+     Floated
+---------------*/
+.ui.floated.menu {
+  float: left;
+  margin: 0rem 0.5rem 0rem 0rem;
+}
+.ui.right.floated.menu {
+  float: right;
+  margin: 0rem 0rem 0rem 0.5rem;
+}
+/*--------------
+ Inverted Colors
+---------------*/
+/*--- Light Colors  ---*/
+.ui.grey.menu {
+  background-color: #F0F0F0;
+}
+/*--- Inverted Colors  ---*/
+.ui.inverted.green.menu {
+  background-color: #A1CF64;
+}
+.ui.inverted.green.pointing.menu .active.item:after {
+  background-color: #A1CF64;
+}
+.ui.inverted.red.menu {
+  background-color: #EF4D6D;
+}
+.ui.inverted.red.pointing.menu .active.item:after {
+  background-color: #F16883;
+}
+.ui.inverted.blue.menu {
+  background-color: #6ECFF5;
+}
+.ui.inverted.blue.pointing.menu .active.item:after {
+  background-color: #6ECFF5;
+}
+.ui.inverted.purple.menu {
+  background-color: #564F8A;
+}
+.ui.inverted.purple.pointing.menu .active.item:after {
+  background-color: #564F8A;
+}
+.ui.inverted.orange.menu {
+  background-color: #F05940;
+}
+.ui.inverted.orange.pointing.menu .active.item:after {
+  background-color: #F05940;
+}
+.ui.inverted.teal.menu {
+  background-color: #00B5AD;
+}
+.ui.inverted.teal.pointing.menu .active.item:after {
+  background-color: #00B5AD;
+}
 /*--------------
      Fitted
 ---------------*/

node/src/files/components/semantic/modules/video.css

@@ -1,43 +1,81 @@
-/*---------------
+/*
-    Video Embed
+ * # Semantic Video
-----------------*/
+ * http://github.com/quirkyinc/semantic
-.video.module {
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: July 30, 2013
+ */
+/*******************************
+            Video
+*******************************/
+.ui.video {
   position: relative;
-  background: #333333 url(../images/placeholder.png) no-repeat center center;
+  max-width: 100%;
 }
-.video.module .play {
+/*--------------
+     Content
+---------------*/
+/* Placeholder Image */
+.ui.video .placeholder {
+  background-color: #333333;
+}
+/* Play Icon Overlay */
+.ui.video .play {
   cursor: pointer;
   position: absolute;
   top: 0px;
   left: 0px;
-  z-index: 100;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
   filter: alpha(opacity=60);
   opacity: 0.6;
-  width: 100%;
-  height: 100%;
-  background: url(/images/modules/video-play.png) no-repeat center center;
   -webkit-transition: opacity 0.3s;
   -moz-transition: opacity 0.3s;
   -o-transition: opacity 0.3s;
   -ms-transition: opacity 0.3s;
   transition: opacity 0.3s;
 }
-.video.module .play:hover {
+.ui.video .play.icon:before {
-  opacity: 1;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 11;
+  font-size: 6rem;
+  margin: -3rem 0em 0em -3rem;
+  color: #FFFFFF;
+  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
 }
-.video.module .placeholder {
+.ui.video .placeholder {
+  display: block;
   width: 100%;
   height: 100%;
 }
-.video.module .embed {
+/* IFrame Embed */
+.ui.video .embed {
   display: none;
 }
-/* Video Active */
+/*******************************
-.video.module.active .play,
+            States
-.video.module.active .placeholder {
+*******************************/
+/*--------------
+    Hover
+---------------*/
+.ui.video .play:hover {
+  opacity: 1;
+}
+/*--------------
+     Active
+---------------*/
+.ui.video.active .play,
+.ui.video.active .placeholder {
   display: none;
 }
-.video.module.active .embed {
+.ui.video.active .embed {
   display: block;
 }

node/src/files/components/semantic/modules/video.js

@@ -11,381 +11,416 @@
 
 ;(function ($, window, document, undefined) {
 
-  $.fn.video = function(parameters) {
+$.fn.video = function(parameters) {
-
-    var
-      settings = $.extend(true, {}, $.fn.video.settings, parameters),
-      // make arguments available
-      moduleArguments = arguments || false,
-      invokedResponse
-    ;
-
-    $(this)
-      .each(function() {
-        var
-          $module      = $(this),
-          $placeholder = $module.find(settings.selector.placeholder),
-          $playButton  = $module.find(settings.selector.playButton),
-          $embed       = $module.find(settings.selector.embed),
-
-          element       = this,
-          instance      = $module.data('module-' + settings.namespace),
-          methodInvoked = (typeof parameters == 'string'),
-
-          namespace    = settings.namespace,
-          metadata     = settings.metadata,
-          className    = settings.className,
-
-          module
-        ;
-
-        module = {
-
-          initialize: function() {
-            module.debug('Initializing video');
-            $placeholder
-              .off('.video')
-              .on('click.' + namespace, module.play)
-            ;
-            $playButton
-              .off('.video')
-              .on('click.' + namespace, module.play)
-            ;
-            $module
-              .data('module-' + namespace, module)
-            ;
-          },
 
-          // sets new video
+  var
-          change: function(source, flv) {
+    $allModules     = $(this),
-            module.debug('Changing video to ', flv);
-            $module
-              .data(metadata.source, source)
-              .data(metadata.flv, flv)
-            ;
-            settings.onChange();
-          },
 
-          // clears video embed
+    settings        = ( $.isPlainObject(parameters) )
-          reset: function() {
+      ? $.extend(true, {}, $.fn.video.settings, parameters)
-            module.debug('Clearing video embed and showing placeholder');
+      : $.fn.video.settings,
-            $module
+
-              .removeClass(className.active)
+    moduleSelector  = $allModules.selector || '',
-            ;
+
-            $embed
+    time            = new Date().getTime(),
-              .html(' ')
+    performance     = [],
-            ;
-            $placeholder
-              .show()
-            ;
-            settings.onReset();
-          },
 
-          // plays current video
+    query           = arguments[0],
-          play: function() {
+    methodInvoked   = (typeof query == 'string'),
-            module.debug('Playing video');
+    queryArguments  = [].slice.call(arguments, 1),
+
+    invokedResponse
+  ;
+
+  $(this)
+    .each(function() {
+      var
+        $module      = $(this),
+        $placeholder = $module.find(settings.selector.placeholder),
+        $playButton  = $module.find(settings.selector.playButton),
+        $embed       = $module.find(settings.selector.embed),
+        
+        eventNamespace  = '.' + settings.namespace,
+        moduleNamespace = settings.namespace + '-module', 
+
+        selector        = settings.selector,
+        className       = settings.className,
+        error           = settings.error,
+        metadata        = settings.metadata,
+        namespace       = settings.namespace,
+        
+        element         = this,
+        instance        = $module.data(moduleNamespace),
+        module
+      ;
+
+      module = {
+
+        initialize: function() {
+          module.debug('Initializing video');
+          $placeholder
+            .on('click' + eventNamespace, module.play)
+          ;
+          $playButton
+            .on('click' + eventNamespace, module.play)
+          ;
+          module.instantiate();
+        },
+
+        instantiate: function() {
+          instance = module;
+          $module
+            .data(moduleNamespace, module)
+          ;
+        },
+
+        destroy: function() {
+          module.verbose('Destroying previous instance of video');
+          $module
+            .removeData(moduleNamespace)
+            .off(eventNamespace)
+          ;
+        },
+
+        // sets new video
+        change: function(source, id, url) {
+          module.debug('Changing video to ', source, id, url);
+          $module
+            .data(metadata.source, source)
+            .data(metadata.id, id)
+            .data(metadata.url, url)
+          ;
+          settings.onChange();
+        },
+
+        // clears video embed
+        reset: function() {
+          module.debug('Clearing video embed and showing placeholder');
+          $module
+            .removeClass(className.active)
+          ;
+          $embed
+            .html(' ')
+          ;
+          $placeholder
+            .show()
+          ;
+          settings.onReset();
+        },
+
+        // plays current video
+        play: function() {
+          module.debug('Playing video');
+          var
+            source = $module.data(metadata.source) || false, 
+            url    = $module.data(metadata.url)    || false,
+            id     = $module.data(metadata.id)     || false
+          ;
+          $embed
+            .html( module.generate.html(source, id, url) )
+          ;
+          $module
+            .addClass(className.active)
+          ;
+          settings.onPlay();
+        },
+
+        generate: {
+          // generates iframe html
+          html: function(source, id, url) {
+            module.debug('Generating embed html');
             var
-              source = $module.data(metadata.source),
+              width = (settings.width == 'auto')
-              flv    = $module.data(metadata.flv)
+                ? $module.width()
-            ;
+                : settings.width,
-            $embed
+              height = (settings.height == 'auto')
-              .html( module.generate.html(source, flv) )
+                ? $module.height()
-            ;
+                : settings.height,
-            $module
+              html
-              .addClass(className.active)
             ;
-            settings.onPlay();
+            if(source && id) {
-          },
-
-          generate: {
-            // generates iframe html
-            html: function(source, flv) {
-              module.debug('Generating embed html');
-              var
-                width = (settings.width == 'auto')
-                  ? $module.width()
-                  : settings.width,
-                height = (settings.height == 'auto')
-                  ? $module.height()
-                  : settings.height,
-                html
-              ;
               if(source == 'vimeo') {
                 html = ''
-                  + '<iframe src="http://player.vimeo.com/video/' + flv + '?=' + module.generate.url(source) + '"'
+                  + '<iframe src="http://player.vimeo.com/video/' + id + '?=' + module.generate.url(source) + '"'
                   + ' width="' + width + '" height="' + height + '"'
                   + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
                 ;
               }
               else if(source == 'youtube') {
                 html = ''
-                  + '<iframe src="http://www.youtube.com/embed/' + flv + '?=' + module.generate.url(source) + '"'
+                  + '<iframe src="http://www.youtube.com/embed/' + id + '?=' + module.generate.url(source) + '"'
                   + ' width="' + width + '" height="' + height + '"'
                   + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
                 ;
               }
-              return html;
+            }
-            },
+            else if(url) {
-
+              html = ''
-            // generate url parameters
+                + '<iframe src="' + url + '"'
-            url: function(source) {
+                + ' width="' + width + '" height="' + height + '"'
-              var
+                + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
-                api      = (settings.api)
-                  ? 1
-                  : 0,
-                autoplay = (settings.autoplay)
-                  ? 1
-                  : 0,
-                hd       = (settings.hd)
-                  ? 1
-                  : 0,
-                showUI   = (settings.showUI)
-                  ? 1
-                  : 0,
-                // opposite used for some params
-                hideUI   = !(settings.showUI)
-                  ? 1
-                  : 0,
-                url = ''
               ;
-              if(source == 'vimeo') {
-                url = ''
-                  +      'api='      + api
-                  + '&amp;title='    + showUI
-                  + '&amp;byline='   + showUI
-                  + '&amp;portrait=' + showUI
-                  + '&amp;autoplay=' + autoplay
-                ;
-                if(settings.color) {
-                  url += '&amp;color=' + settings.color;
-                }
-              }
-              else if(source == 'youtube') {
-                url = ''
-                  +      'enablejsapi=' + api
-                  + '&amp;autoplay='    + autoplay
-                  + '&amp;autohide='    + hideUI
-                  + '&amp;hq='          + hd
-                  + '&amp;modestbranding=1'
-                ;
-                if(settings.color) {
-                  url += '&amp;color=' + settings.color;
-                }
-              }
-              return url;
             }
+            else {
+              module.error(error.noVideo);
+            }
+            return html;
           },
 
-          /* standard module */
+          // generate url parameters
-          debug: function(message, variableName) {
+          url: function(source) {
-            if(settings.debug) {
+            var
-              if(variableName !== undefined) {
+              api      = (settings.api)
-                console.info(settings.moduleName + ': ' + message, variableName);
+                ? 1
+                : 0,
+              autoplay = (settings.autoplay)
+                ? 1
+                : 0,
+              hd       = (settings.hd)
+                ? 1
+                : 0,
+              showUI   = (settings.showUI)
+                ? 1
+                : 0,
+              // opposite used for some params
+              hideUI   = !(settings.showUI)
+                ? 1
+                : 0,
+              url = ''
+            ;
+            if(source == 'vimeo') {
+              url = ''
+                +      'api='      + api
+                + '&amp;title='    + showUI
+                + '&amp;byline='   + showUI
+                + '&amp;portrait=' + showUI
+                + '&amp;autoplay=' + autoplay
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
               }
-              else {
+            }
-                console.info(settings.moduleName + ': ' + message);
+            if(source == 'ustream') {
+              url = ''
+                + 'autoplay=' + autoplay
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
               }
             }
-          },
+            else if(source == 'youtube') {
-          error: function(errorMessage) {
+              url = ''
-            console.warn(settings.moduleName + ': ' + errorMessage);
+                +      'enablejsapi=' + api
-          },
+                + '&amp;autoplay='    + autoplay
-          invoke: function(methodName, context, methodArguments) {
+                + '&amp;autohide='    + hideUI
+                + '&amp;hq='          + hd
+                + '&amp;modestbranding=1'
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
+              }
+            }
+            return url;
+          }
+        },
+
+        setting: function(name, value) {
+          if(value !== undefined) {
+            if( $.isPlainObject(name) ) {
+              $.extend(true, settings, name);
+            }
+            else {
+              settings[name] = value;
+            }
+          }
+          else {
+            return settings[name];
+          }
+        },
+        internal: function(name, value) {
+          if(value !== undefined) {
+            if( $.isPlainObject(name) ) {
+              $.extend(true, module, name);
+            }
+            else {
+              module[name] = value;
+            }
+          }
+          else {
+            return module[name];
+          }
+        },
+        debug: function() {
+          if(settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+            }
+          }
+        },
+        verbose: function() {
+          if(settings.verbose && settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+            }
+          }
+        },
+        error: function() {
+          module.error = Function.prototype.bind.call(console.warn, console, settings.moduleName + ':');
+        },
+        performance: {
+          log: function(message) {
             var
-              method
+              currentTime,
+              executionTime,
+              previousTime
             ;
-            methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 );
+            if(settings.performance) {
-            if(typeof methodName == 'string' && instance !== undefined) {
+              currentTime   = new Date().getTime();
-              methodName = methodName.split('.');
+              previousTime  = time || currentTime,
-              $.each(methodName, function(index, name) {
+              executionTime = currentTime - previousTime;
-                if( $.isPlainObject( instance[name] ) ) {
+              time          = currentTime;
-                  instance = instance[name];
+              performance.push({
-                  return true;
+                'Element'        : element,
-                }
+                'Name'           : message[0],
-                else if( $.isFunction( instance[name] ) ) {
+                'Arguments'      : [].slice.call(message, 1) || '',
-                  method = instance[name];
+                'Execution Time' : executionTime
-                  return true;
-                }
-                module.error(settings.errors.method);
-                return false;
               });
             }
-            if ( $.isFunction( method ) ) {
+            clearTimeout(module.performance.timer);
-              return method.apply(context, methodArguments);
+            module.performance.timer = setTimeout(module.performance.display, 100);
+          },
+          display: function() {
+            var
+              title = settings.moduleName + ':',
+              totalTime = 0
+            ;
+            time        = false;
+            $.each(performance, function(index, data) {
+              totalTime += data['Execution Time'];
+            });
+            title += ' ' + totalTime + 'ms';
+            if(moduleSelector) {
+              title += ' \'' + moduleSelector + '\'';
             }
-            // return retrieved variable or chain
+            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
-            return method;
+              console.groupCollapsed(title);
+              if(console.table) {
+                console.table(performance);
+              }
+              else {
+                $.each(performance, function(index, data) {
+                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+                });
+              }
+              console.groupEnd();
+            }
+            performance = [];
           }
-        };
+        },
-        // check for invoking internal method
+        invoke: function(query, passedArguments, context) {
-        if(methodInvoked) {
+          var
-          invokedResponse = module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) );
+            maxDepth,
-        }
+            found
-        // otherwise initialize
+          ;
-        else {
+          passedArguments = passedArguments || queryArguments;
-          if(instance) {
+          context         = element         || context;
-            module.destroy();
+          if(typeof query == 'string' && instance !== undefined) {
+            query    = query.split(/[\. ]/);
+            maxDepth = query.length - 1;
+            $.each(query, function(depth, value) {
+              if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
+                instance = instance[value];
+              }
+              else if( instance[value] !== undefined ) {
+                found = instance[value];
+              }
+              else {
+                module.error(error.method);
+              }
+            });
           }
-          module.initialize();
+          if ( $.isFunction( found ) ) {
+            return found.apply(context, passedArguments);
+          }
+          return found || false;
         }
+      };
 
-      })
+      if(methodInvoked) {
-    ;
+        if(instance === undefined) {
-    // chain or return queried method
+          module.initialize();
-    return (invokedResponse !== undefined)
+        }
-      ? invokedResponse
+        invokedResponse = module.invoke(query);
-      : this
+      }
-    ;
+      else {
-  };
+        if(instance !== undefined) {
-
+          module.destroy();
-
+        }
-  $.fn.videoPlaylist = function(video, parameters) {
-    var
-      $allModules = $(this),
-      $video      = $(video),
-      $iframe     = $video.find('.embed iframe'),
-
-      settings    = $.extend({}, $.fn.videoPlaylist.settings, parameters, true)
-    ;
-    $allModules
-      .each(function() {
-        var
-          $element    = $(this),
-
-          metadata    = settings.metadata,
-          namespace   = settings.namespace,
-          className   = settings.className,
-
-          module       = {
-            initialize: function() {
-              $element
-                .on('click.' + namespace , module.changeVideo)
-              ;
-            },
-            changeVideo: function() {
-              var
-                flv         = $element.data(metadata.flv)         || false,
-                source      = $element.data(metadata.source)      || false,
-                placeholder = $element.data(metadata.placeholder) || false
-              ;
-              if(flv && source) {
-                $video
-                  .data(metadata.source, source)
-                  .data(metadata.flv, flv)
-                ;
-                if(settings.showPlaceholder) {
-                  $video
-                    .removeClass(className.active)
-                    .find($.fn.video.selector.placeholder)
-                      .attr('src', placeholder)
-                  ;
-                }
-                else {
-                  try {
-                    $video
-                      .video('play')
-                    ;
-                  }
-                  catch(error) {
-                    console.warn('Video Playlist Module: ' + settings.error.init);
-                  }
-                }
-                $allModules
-                  .removeClass(className.active)
-                ;
-                $element
-                  .addClass(className.active)
-                ;
-              }
-            }
-          }
-        ;
         module.initialize();
-      })
-    ;
-
-    if(settings.playFirst) {
-      $allModules
-        .eq(0)
-        .trigger('click')
-      ;
-      // we all like a good hack
-      if($iframe.size() > 0) {
-        $iframe
-          .attr('src', $iframe.attr('src').replace('autoplay=1', 'autoplay=0') )
-        ;
       }
+    })
+  ;
 
-    }
+  return (invokedResponse)
-
+    ? invokedResponse
-  };
+    : this
-
+  ;
-  $.fn.video.settings = {
+};
-
-    moduleName  : 'Video',
-    namespace   : 'video',
-    debug       : false,
-    
-    metadata    : {
-      source      : 'source',
-      flv         : 'flv'
-    },
 
-    onPlay      : function(){},
+$.fn.video.settings = {
-    onReset     : function(){},
-    onChange    : function(){},
 
-    // callbacks not coded yet (needs to use jsapi)
+  moduleName  : 'Video',
-    play        : function() {},
+  namespace   : 'video',
-    pause       : function() {},
-    stop        : function() {},
 
-    width       : 'auto',
+  debug       : true,
-    height      : 'auto',
+  verbose     : true,
+  performance : true,
   
-    autoplay    : false,
-    color       : '#442359',
-    hd          : true,
-    showUI      : false,
-    api         : true,
 
-    errors      : {
+  metadata    : {
-      method      : 'The method you called is not defined'
+    source : 'source',
-    },
+    id     : 'id',
+    url    : 'url'
+  },
   
-    className   : {
+  onPlay   : function(){},
-      active      : 'active'
+  onReset  : function(){},
-    },
+  onChange : function(){},
   
-    selector    : {
+  // callbacks not coded yet (needs to use jsapi)
-      embed       : '.embed',
+  onPause  : function() {},
-      placeholder : '.placeholder',
+  onStop   : function() {},
-      playButton  : '.play'
-    }
-  };
   
-  $.fn.videoPlaylist.settings = {
+  width    : 'auto',
-    moduleName      : 'Video Playlist',
+  height   : 'auto',
-    namespace       : 'videoPlaylist',
   
-    source          : 'vimeo',
+  autoplay : false,
-    showPlaceholder : false,
+  color    : '#442359',
-    playFirst       : true,
+  hd       : true,
+  showUI   : false,
+  api      : true,
   
-    metadata: {
+  error      : {
-      flv         : 'flv',
+    noVideo     : 'No video specified',
-      source      : 'source',
+    method      : 'The method you called is not defined'
-      placeholder : 'placeholder'
+  },
-    },
   
-    errors: {
+  className   : {
-      init   : 'The video player you specified was not yet initialized'
+    active      : 'active'
-    },
+  },
   
-    className : {
+  selector    : {
-      active  : 'active'
+    embed       : '.embed',
-    }
+    placeholder : '.placeholder',
+    playButton  : '.play'
+  }
+};
 
-  };
 
 })( jQuery, window , document );

node/src/layouts/default.html.eco

@@ -84,10 +84,9 @@
 </head>
 <body id="example" class="<%= @document.css %>">
   <div class="ui large vertical inverted labeled icon menu" id="menu">
-    <div class="item"><a href="/download.html"><i class="inverted circular red docs icon"></i> <b>Download</b></a></div>
+    <div class="item"><a href="/download.html"><i class="inverted circular red upload icon"></i> <b>Download</b></a></div>
     <div class="item">
       <a href="/introduction.html">
-        <i class="inverted circular teal upload icon"></i>
         <b>Introduction</b>
       </a>
       <div class="menu">

src/modules/video.js

@@ -11,381 +11,416 @@
 
 ;(function ($, window, document, undefined) {
 
-  $.fn.video = function(parameters) {
+$.fn.video = function(parameters) {
-
-    var
-      settings = $.extend(true, {}, $.fn.video.settings, parameters),
-      // make arguments available
-      moduleArguments = arguments || false,
-      invokedResponse
-    ;
-
-    $(this)
-      .each(function() {
-        var
-          $module      = $(this),
-          $placeholder = $module.find(settings.selector.placeholder),
-          $playButton  = $module.find(settings.selector.playButton),
-          $embed       = $module.find(settings.selector.embed),
-
-          element       = this,
-          instance      = $module.data('module-' + settings.namespace),
-          methodInvoked = (typeof parameters == 'string'),
-
-          namespace    = settings.namespace,
-          metadata     = settings.metadata,
-          className    = settings.className,
-
-          module
-        ;
-
-        module = {
-
-          initialize: function() {
-            module.debug('Initializing video');
-            $placeholder
-              .off('.video')
-              .on('click.' + namespace, module.play)
-            ;
-            $playButton
-              .off('.video')
-              .on('click.' + namespace, module.play)
-            ;
-            $module
-              .data('module-' + namespace, module)
-            ;
-          },
 
-          // sets new video
+  var
-          change: function(source, flv) {
+    $allModules     = $(this),
-            module.debug('Changing video to ', flv);
-            $module
-              .data(metadata.source, source)
-              .data(metadata.flv, flv)
-            ;
-            settings.onChange();
-          },
 
-          // clears video embed
+    settings        = ( $.isPlainObject(parameters) )
-          reset: function() {
+      ? $.extend(true, {}, $.fn.video.settings, parameters)
-            module.debug('Clearing video embed and showing placeholder');
+      : $.fn.video.settings,
-            $module
+
-              .removeClass(className.active)
+    moduleSelector  = $allModules.selector || '',
-            ;
+
-            $embed
+    time            = new Date().getTime(),
-              .html(' ')
+    performance     = [],
-            ;
-            $placeholder
-              .show()
-            ;
-            settings.onReset();
-          },
 
-          // plays current video
+    query           = arguments[0],
-          play: function() {
+    methodInvoked   = (typeof query == 'string'),
-            module.debug('Playing video');
+    queryArguments  = [].slice.call(arguments, 1),
+
+    invokedResponse
+  ;
+
+  $(this)
+    .each(function() {
+      var
+        $module      = $(this),
+        $placeholder = $module.find(settings.selector.placeholder),
+        $playButton  = $module.find(settings.selector.playButton),
+        $embed       = $module.find(settings.selector.embed),
+        
+        eventNamespace  = '.' + settings.namespace,
+        moduleNamespace = settings.namespace + '-module', 
+
+        selector        = settings.selector,
+        className       = settings.className,
+        error           = settings.error,
+        metadata        = settings.metadata,
+        namespace       = settings.namespace,
+        
+        element         = this,
+        instance        = $module.data(moduleNamespace),
+        module
+      ;
+
+      module = {
+
+        initialize: function() {
+          module.debug('Initializing video');
+          $placeholder
+            .on('click' + eventNamespace, module.play)
+          ;
+          $playButton
+            .on('click' + eventNamespace, module.play)
+          ;
+          module.instantiate();
+        },
+
+        instantiate: function() {
+          instance = module;
+          $module
+            .data(moduleNamespace, module)
+          ;
+        },
+
+        destroy: function() {
+          module.verbose('Destroying previous instance of video');
+          $module
+            .removeData(moduleNamespace)
+            .off(eventNamespace)
+          ;
+        },
+
+        // sets new video
+        change: function(source, id, url) {
+          module.debug('Changing video to ', source, id, url);
+          $module
+            .data(metadata.source, source)
+            .data(metadata.id, id)
+            .data(metadata.url, url)
+          ;
+          settings.onChange();
+        },
+
+        // clears video embed
+        reset: function() {
+          module.debug('Clearing video embed and showing placeholder');
+          $module
+            .removeClass(className.active)
+          ;
+          $embed
+            .html(' ')
+          ;
+          $placeholder
+            .show()
+          ;
+          settings.onReset();
+        },
+
+        // plays current video
+        play: function() {
+          module.debug('Playing video');
+          var
+            source = $module.data(metadata.source) || false, 
+            url    = $module.data(metadata.url)    || false,
+            id     = $module.data(metadata.id)     || false
+          ;
+          $embed
+            .html( module.generate.html(source, id, url) )
+          ;
+          $module
+            .addClass(className.active)
+          ;
+          settings.onPlay();
+        },
+
+        generate: {
+          // generates iframe html
+          html: function(source, id, url) {
+            module.debug('Generating embed html');
             var
-              source = $module.data(metadata.source),
+              width = (settings.width == 'auto')
-              flv    = $module.data(metadata.flv)
+                ? $module.width()
-            ;
+                : settings.width,
-            $embed
+              height = (settings.height == 'auto')
-              .html( module.generate.html(source, flv) )
+                ? $module.height()
-            ;
+                : settings.height,
-            $module
+              html
-              .addClass(className.active)
             ;
-            settings.onPlay();
+            if(source && id) {
-          },
-
-          generate: {
-            // generates iframe html
-            html: function(source, flv) {
-              module.debug('Generating embed html');
-              var
-                width = (settings.width == 'auto')
-                  ? $module.width()
-                  : settings.width,
-                height = (settings.height == 'auto')
-                  ? $module.height()
-                  : settings.height,
-                html
-              ;
               if(source == 'vimeo') {
                 html = ''
-                  + '<iframe src="http://player.vimeo.com/video/' + flv + '?=' + module.generate.url(source) + '"'
+                  + '<iframe src="http://player.vimeo.com/video/' + id + '?=' + module.generate.url(source) + '"'
                   + ' width="' + width + '" height="' + height + '"'
                   + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
                 ;
               }
               else if(source == 'youtube') {
                 html = ''
-                  + '<iframe src="http://www.youtube.com/embed/' + flv + '?=' + module.generate.url(source) + '"'
+                  + '<iframe src="http://www.youtube.com/embed/' + id + '?=' + module.generate.url(source) + '"'
                   + ' width="' + width + '" height="' + height + '"'
                   + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
                 ;
               }
-              return html;
+            }
-            },
+            else if(url) {
-
+              html = ''
-            // generate url parameters
+                + '<iframe src="' + url + '"'
-            url: function(source) {
+                + ' width="' + width + '" height="' + height + '"'
-              var
+                + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
-                api      = (settings.api)
-                  ? 1
-                  : 0,
-                autoplay = (settings.autoplay)
-                  ? 1
-                  : 0,
-                hd       = (settings.hd)
-                  ? 1
-                  : 0,
-                showUI   = (settings.showUI)
-                  ? 1
-                  : 0,
-                // opposite used for some params
-                hideUI   = !(settings.showUI)
-                  ? 1
-                  : 0,
-                url = ''
               ;
-              if(source == 'vimeo') {
-                url = ''
-                  +      'api='      + api
-                  + '&amp;title='    + showUI
-                  + '&amp;byline='   + showUI
-                  + '&amp;portrait=' + showUI
-                  + '&amp;autoplay=' + autoplay
-                ;
-                if(settings.color) {
-                  url += '&amp;color=' + settings.color;
-                }
-              }
-              else if(source == 'youtube') {
-                url = ''
-                  +      'enablejsapi=' + api
-                  + '&amp;autoplay='    + autoplay
-                  + '&amp;autohide='    + hideUI
-                  + '&amp;hq='          + hd
-                  + '&amp;modestbranding=1'
-                ;
-                if(settings.color) {
-                  url += '&amp;color=' + settings.color;
-                }
-              }
-              return url;
             }
+            else {
+              module.error(error.noVideo);
+            }
+            return html;
           },
 
-          /* standard module */
+          // generate url parameters
-          debug: function(message, variableName) {
+          url: function(source) {
-            if(settings.debug) {
+            var
-              if(variableName !== undefined) {
+              api      = (settings.api)
-                console.info(settings.moduleName + ': ' + message, variableName);
+                ? 1
+                : 0,
+              autoplay = (settings.autoplay)
+                ? 1
+                : 0,
+              hd       = (settings.hd)
+                ? 1
+                : 0,
+              showUI   = (settings.showUI)
+                ? 1
+                : 0,
+              // opposite used for some params
+              hideUI   = !(settings.showUI)
+                ? 1
+                : 0,
+              url = ''
+            ;
+            if(source == 'vimeo') {
+              url = ''
+                +      'api='      + api
+                + '&amp;title='    + showUI
+                + '&amp;byline='   + showUI
+                + '&amp;portrait=' + showUI
+                + '&amp;autoplay=' + autoplay
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
               }
-              else {
+            }
-                console.info(settings.moduleName + ': ' + message);
+            if(source == 'ustream') {
+              url = ''
+                + 'autoplay=' + autoplay
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
               }
             }
-          },
+            else if(source == 'youtube') {
-          error: function(errorMessage) {
+              url = ''
-            console.warn(settings.moduleName + ': ' + errorMessage);
+                +      'enablejsapi=' + api
-          },
+                + '&amp;autoplay='    + autoplay
-          invoke: function(methodName, context, methodArguments) {
+                + '&amp;autohide='    + hideUI
+                + '&amp;hq='          + hd
+                + '&amp;modestbranding=1'
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
+              }
+            }
+            return url;
+          }
+        },
+
+        setting: function(name, value) {
+          if(value !== undefined) {
+            if( $.isPlainObject(name) ) {
+              $.extend(true, settings, name);
+            }
+            else {
+              settings[name] = value;
+            }
+          }
+          else {
+            return settings[name];
+          }
+        },
+        internal: function(name, value) {
+          if(value !== undefined) {
+            if( $.isPlainObject(name) ) {
+              $.extend(true, module, name);
+            }
+            else {
+              module[name] = value;
+            }
+          }
+          else {
+            return module[name];
+          }
+        },
+        debug: function() {
+          if(settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+            }
+          }
+        },
+        verbose: function() {
+          if(settings.verbose && settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
+            }
+          }
+        },
+        error: function() {
+          module.error = Function.prototype.bind.call(console.warn, console, settings.moduleName + ':');
+        },
+        performance: {
+          log: function(message) {
             var
-              method
+              currentTime,
+              executionTime,
+              previousTime
             ;
-            methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 );
+            if(settings.performance) {
-            if(typeof methodName == 'string' && instance !== undefined) {
+              currentTime   = new Date().getTime();
-              methodName = methodName.split('.');
+              previousTime  = time || currentTime,
-              $.each(methodName, function(index, name) {
+              executionTime = currentTime - previousTime;
-                if( $.isPlainObject( instance[name] ) ) {
+              time          = currentTime;
-                  instance = instance[name];
+              performance.push({
-                  return true;
+                'Element'        : element,
-                }
+                'Name'           : message[0],
-                else if( $.isFunction( instance[name] ) ) {
+                'Arguments'      : [].slice.call(message, 1) || '',
-                  method = instance[name];
+                'Execution Time' : executionTime
-                  return true;
-                }
-                module.error(settings.errors.method);
-                return false;
               });
             }
-            if ( $.isFunction( method ) ) {
+            clearTimeout(module.performance.timer);
-              return method.apply(context, methodArguments);
+            module.performance.timer = setTimeout(module.performance.display, 100);
+          },
+          display: function() {
+            var
+              title = settings.moduleName + ':',
+              totalTime = 0
+            ;
+            time        = false;
+            $.each(performance, function(index, data) {
+              totalTime += data['Execution Time'];
+            });
+            title += ' ' + totalTime + 'ms';
+            if(moduleSelector) {
+              title += ' \'' + moduleSelector + '\'';
             }
-            // return retrieved variable or chain
+            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
-            return method;
+              console.groupCollapsed(title);
+              if(console.table) {
+                console.table(performance);
+              }
+              else {
+                $.each(performance, function(index, data) {
+                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+                });
+              }
+              console.groupEnd();
+            }
+            performance = [];
           }
-        };
+        },
-        // check for invoking internal method
+        invoke: function(query, passedArguments, context) {
-        if(methodInvoked) {
+          var
-          invokedResponse = module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) );
+            maxDepth,
-        }
+            found
-        // otherwise initialize
+          ;
-        else {
+          passedArguments = passedArguments || queryArguments;
-          if(instance) {
+          context         = element         || context;
-            module.destroy();
+          if(typeof query == 'string' && instance !== undefined) {
+            query    = query.split(/[\. ]/);
+            maxDepth = query.length - 1;
+            $.each(query, function(depth, value) {
+              if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
+                instance = instance[value];
+              }
+              else if( instance[value] !== undefined ) {
+                found = instance[value];
+              }
+              else {
+                module.error(error.method);
+              }
+            });
           }
-          module.initialize();
+          if ( $.isFunction( found ) ) {
+            return found.apply(context, passedArguments);
+          }
+          return found || false;
         }
+      };
 
-      })
+      if(methodInvoked) {
-    ;
+        if(instance === undefined) {
-    // chain or return queried method
+          module.initialize();
-    return (invokedResponse !== undefined)
+        }
-      ? invokedResponse
+        invokedResponse = module.invoke(query);
-      : this
+      }
-    ;
+      else {
-  };
+        if(instance !== undefined) {
-
+          module.destroy();
-
+        }
-  $.fn.videoPlaylist = function(video, parameters) {
-    var
-      $allModules = $(this),
-      $video      = $(video),
-      $iframe     = $video.find('.embed iframe'),
-
-      settings    = $.extend({}, $.fn.videoPlaylist.settings, parameters, true)
-    ;
-    $allModules
-      .each(function() {
-        var
-          $element    = $(this),
-
-          metadata    = settings.metadata,
-          namespace   = settings.namespace,
-          className   = settings.className,
-
-          module       = {
-            initialize: function() {
-              $element
-                .on('click.' + namespace , module.changeVideo)
-              ;
-            },
-            changeVideo: function() {
-              var
-                flv         = $element.data(metadata.flv)         || false,
-                source      = $element.data(metadata.source)      || false,
-                placeholder = $element.data(metadata.placeholder) || false
-              ;
-              if(flv && source) {
-                $video
-                  .data(metadata.source, source)
-                  .data(metadata.flv, flv)
-                ;
-                if(settings.showPlaceholder) {
-                  $video
-                    .removeClass(className.active)
-                    .find($.fn.video.selector.placeholder)
-                      .attr('src', placeholder)
-                  ;
-                }
-                else {
-                  try {
-                    $video
-                      .video('play')
-                    ;
-                  }
-                  catch(error) {
-                    console.warn('Video Playlist Module: ' + settings.error.init);
-                  }
-                }
-                $allModules
-                  .removeClass(className.active)
-                ;
-                $element
-                  .addClass(className.active)
-                ;
-              }
-            }
-          }
-        ;
         module.initialize();
-      })
-    ;
-
-    if(settings.playFirst) {
-      $allModules
-        .eq(0)
-        .trigger('click')
-      ;
-      // we all like a good hack
-      if($iframe.size() > 0) {
-        $iframe
-          .attr('src', $iframe.attr('src').replace('autoplay=1', 'autoplay=0') )
-        ;
       }
+    })
+  ;
 
-    }
+  return (invokedResponse)
-
+    ? invokedResponse
-  };
+    : this
-
+  ;
-  $.fn.video.settings = {
+};
-
-    moduleName  : 'Video',
-    namespace   : 'video',
-    debug       : false,
-    
-    metadata    : {
-      source      : 'source',
-      flv         : 'flv'
-    },
 
-    onPlay      : function(){},
+$.fn.video.settings = {
-    onReset     : function(){},
-    onChange    : function(){},
 
-    // callbacks not coded yet (needs to use jsapi)
+  moduleName  : 'Video',
-    play        : function() {},
+  namespace   : 'video',
-    pause       : function() {},
-    stop        : function() {},
 
-    width       : 'auto',
+  debug       : true,
-    height      : 'auto',
+  verbose     : true,
+  performance : true,
   
-    autoplay    : false,
-    color       : '#442359',
-    hd          : true,
-    showUI      : false,
-    api         : true,
 
-    errors      : {
+  metadata    : {
-      method      : 'The method you called is not defined'
+    source : 'source',
-    },
+    id     : 'id',
+    url    : 'url'
+  },
   
-    className   : {
+  onPlay   : function(){},
-      active      : 'active'
+  onReset  : function(){},
-    },
+  onChange : function(){},
   
-    selector    : {
+  // callbacks not coded yet (needs to use jsapi)
-      embed       : '.embed',
+  onPause  : function() {},
-      placeholder : '.placeholder',
+  onStop   : function() {},
-      playButton  : '.play'
-    }
-  };
   
-  $.fn.videoPlaylist.settings = {
+  width    : 'auto',
-    moduleName      : 'Video Playlist',
+  height   : 'auto',
-    namespace       : 'videoPlaylist',
   
-    source          : 'vimeo',
+  autoplay : false,
-    showPlaceholder : false,
+  color    : '#442359',
-    playFirst       : true,
+  hd       : true,
+  showUI   : false,
+  api      : true,
   
-    metadata: {
+  error      : {
-      flv         : 'flv',
+    noVideo     : 'No video specified',
-      source      : 'source',
+    method      : 'The method you called is not defined'
-      placeholder : 'placeholder'
+  },
-    },
   
-    errors: {
+  className   : {
-      init   : 'The video player you specified was not yet initialized'
+    active      : 'active'
-    },
+  },
   
-    className : {
+  selector    : {
-      active  : 'active'
+    embed       : '.embed',
-    }
+    placeholder : '.placeholder',
+    playButton  : '.play'
+  }
+};
 
-  };
 
 })( jQuery, window , document );

src/modules/video.less

@@ -1,25 +1,48 @@
+/*
+ * # Semantic Video
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: July 30, 2013
+ */
 
-/*---------------
-    Video Embed
-----------------*/
 
-.video.module {
+/*******************************
+            Video
+*******************************/
+
+.ui.video {
   position: relative;
-	background: #333333 url(../images/placeholder.png) no-repeat center center;
+  max-width: 100%;
+}
+
+/*--------------
+     Content
+---------------*/
+
+/* Placeholder Image */
+.ui.video .placeholder {
+  background-color: #333333;
 }
 
-.video.module .play {
+/* Play Icon Overlay */
+.ui.video .play {
   cursor: pointer;
   position: absolute;
   top: 0px;
   left: 0px;
-  z-index: 100;
+  z-index: 10;
+
+  width: 100%;
+  height: 100%;
+  
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
   filter: alpha(opacity=60);
   opacity: 0.6;
-  width: 100%;
-  height: 100%;
-  background: url(/images/modules/video-play.png) no-repeat center center;
 
   -webkit-transition: opacity 0.3s;
   -moz-transition: opacity 0.3s;
@@ -27,22 +50,50 @@
   -ms-transition: opacity 0.3s;
   transition: opacity 0.3s;
 }
-.video.module .play:hover {
+.ui.video .play.icon:before {
-  opacity: 1;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 11;
+
+  font-size: 6rem;
+  margin: -3rem 0em 0em -3rem;
+  color: #FFFFFF;
+  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
 }
-.video.module .placeholder {
+
-	width: 100%;
+.ui.video .placeholder {
-	height: 100%;
+  display: block;
+  width: 100%;
+  height: 100%;
 }
-.video.module .embed {
+
+/* IFrame Embed */
+.ui.video .embed {
   display: none;
 }
 
-/* Video Active */
+/*******************************
-.video.module.active .play,
+            States
-.video.module.active .placeholder {
+*******************************/
-	display: none;
+
+/*--------------
+    Hover
+---------------*/
+
+.ui.video .play:hover {
+  opacity: 1;
+}
+
+
+/*--------------
+     Active
+---------------*/
+
+.ui.video.active .play,
+.ui.video.active .placeholder {
+  display: none;
 }
-.video.module.active .embed {
+.ui.video.active .embed {
-	display: block;
+  display: block;
 }