Updates video component, fixes some issues with inverted secondary menus

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

build/minified/modules/video.js

@@ -11,12 +11,24 @@
 
 ;(function ($, window, document, undefined) {
 
-  $.fn.video = function(parameters) {
+$.fn.video = function(parameters) {
 
   var
-      settings = $.extend(true, {}, $.fn.video.settings, parameters),
+    $allModules     = $(this),
-      // make arguments available
+
-      moduleArguments = arguments || false,
+    settings        = ( $.isPlainObject(parameters) )
+      ? $.extend(true, {}, $.fn.video.settings, parameters)
+      : $.fn.video.settings,
+
+    moduleSelector  = $allModules.selector || '',
+
+    time            = new Date().getTime(),
+    performance     = [],
+
+    query           = arguments[0],
+    methodInvoked   = (typeof query == 'string'),
+    queryArguments  = [].slice.call(arguments, 1),
+
     invokedResponse
   ;
 
@@ -28,14 +40,17 @@
         $playButton  = $module.find(settings.selector.playButton),
         $embed       = $module.find(settings.selector.embed),
         
-          element       = this,
+        eventNamespace  = '.' + settings.namespace,
-          instance      = $module.data('module-' + settings.namespace),
+        moduleNamespace = settings.namespace + '-module', 
-          methodInvoked = (typeof parameters == 'string'),
 
-          namespace    = settings.namespace,
+        selector        = settings.selector,
-          metadata     = settings.metadata,
         className       = settings.className,
+        error           = settings.error,
+        metadata        = settings.metadata,
+        namespace       = settings.namespace,
         
+        element         = this,
+        instance        = $module.data(moduleNamespace),
         module
       ;
 
@@ -44,24 +59,36 @@
         initialize: function() {
           module.debug('Initializing video');
           $placeholder
-              .off('.video')
+            .on('click' + eventNamespace, module.play)
-              .on('click.' + namespace, module.play)
           ;
           $playButton
-              .off('.video')
+            .on('click' + eventNamespace, module.play)
-              .on('click.' + namespace, module.play)
+          ;
+          module.instantiate();
+        },
+
+        instantiate: function() {
+          instance = module;
+          $module
+            .data(moduleNamespace, module)
           ;
+        },
+
+        destroy: function() {
+          module.verbose('Destroying previous instance of video');
           $module
-              .data('module-' + namespace, module)
+            .removeData(moduleNamespace)
+            .off(eventNamespace)
           ;
         },
 
         // sets new video
-          change: function(source, flv) {
+        change: function(source, id, url) {
-            module.debug('Changing video to ', flv);
+          module.debug('Changing video to ', source, id, url);
           $module
             .data(metadata.source, source)
-              .data(metadata.flv, flv)
+            .data(metadata.id, id)
+            .data(metadata.url, url)
           ;
           settings.onChange();
         },
@@ -85,11 +112,12 @@
         play: function() {
           module.debug('Playing video');
           var
-              source = $module.data(metadata.source),
+            source = $module.data(metadata.source) || false, 
-              flv    = $module.data(metadata.flv)
+            url    = $module.data(metadata.url)    || false,
+            id     = $module.data(metadata.id)     || false
           ;
           $embed
-              .html( module.generate.html(source, flv) )
+            .html( module.generate.html(source, id, url) )
           ;
           $module
             .addClass(className.active)
@@ -99,7 +127,7 @@
 
         generate: {
           // generates iframe html
-            html: function(source, flv) {
+          html: function(source, id, url) {
             module.debug('Generating embed html');
             var
               width = (settings.width == 'auto')
@@ -110,20 +138,32 @@
                 : settings.height,
               html
             ;
+            if(source && id) {
               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>'
+                ;
+              }
+            }
+            else if(url) {
+              html = ''
+                + '<iframe src="' + url + '"'
                 + ' width="' + width + '" height="' + height + '"'
                 + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
               ;
             }
+            else {
+              module.error(error.noVideo);
+            }
             return html;
           },
 
@@ -160,6 +200,14 @@
                 url += '&amp;color=' + settings.color;
               }
             }
+            if(source == 'ustream') {
+              url = ''
+                + 'autoplay=' + autoplay
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
+              }
+            }
             else if(source == 'youtube') {
               url = ''
                 +      'enablejsapi=' + api
@@ -176,159 +224,169 @@
           }
         },
 
-          /* standard module */
+        setting: function(name, value) {
-          debug: function(message, variableName) {
+          if(value !== undefined) {
-            if(settings.debug) {
+            if( $.isPlainObject(name) ) {
-              if(variableName !== undefined) {
+              $.extend(true, settings, name);
-                console.info(settings.moduleName + ': ' + message, variableName);
             }
             else {
-                console.info(settings.moduleName + ': ' + message);
+              settings[name] = value;
+            }
           }
+          else {
+            return settings[name];
           }
         },
-          error: function(errorMessage) {
+        internal: function(name, value) {
-            console.warn(settings.moduleName + ': ' + errorMessage);
+          if(value !== undefined) {
+            if( $.isPlainObject(name) ) {
+              $.extend(true, module, name);
+            }
+            else {
+              module[name] = value;
+            }
+          }
+          else {
+            return module[name];
+          }
         },
-          invoke: function(methodName, context, methodArguments) {
+        debug: function() {
-            var
+          if(settings.debug) {
-              method
+            if(settings.performance) {
-            ;
+              module.performance.log(arguments);
-            methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 );
-            if(typeof methodName == 'string' && instance !== undefined) {
-              methodName = methodName.split('.');
-              $.each(methodName, function(index, name) {
-                if( $.isPlainObject( instance[name] ) ) {
-                  instance = instance[name];
-                  return true;
-                }
-                else if( $.isFunction( instance[name] ) ) {
-                  method = instance[name];
-                  return true;
-                }
-                module.error(settings.errors.method);
-                return false;
-              });
             }
-            if ( $.isFunction( method ) ) {
+            else {
-              return method.apply(context, methodArguments);
+              module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
             }
-            // return retrieved variable or chain
-            return method;
           }
-        };
+        },
-        // check for invoking internal method
+        verbose: function() {
-        if(methodInvoked) {
+          if(settings.verbose && settings.debug) {
-          invokedResponse = module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) );
+            if(settings.performance) {
+              module.performance.log(arguments);
             }
-        // otherwise initialize
             else {
-          if(instance) {
+              module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
-            module.destroy();
             }
-          module.initialize();
           }
-
+        },
-      })
+        error: function() {
-    ;
+          module.error = Function.prototype.bind.call(console.warn, console, settings.moduleName + ':');
-    // chain or return queried method
+        },
-    return (invokedResponse !== undefined)
+        performance: {
-      ? invokedResponse
+          log: function(message) {
-      : this
-    ;
-  };
-
-
-  $.fn.videoPlaylist = function(video, parameters) {
             var
-      $allModules = $(this),
+              currentTime,
-      $video      = $(video),
+              executionTime,
-      $iframe     = $video.find('.embed iframe'),
+              previousTime
-
+            ;
-      settings    = $.extend({}, $.fn.videoPlaylist.settings, parameters, true)
+            if(settings.performance) {
-    ;
+              currentTime   = new Date().getTime();
-    $allModules
+              previousTime  = time || currentTime,
-      .each(function() {
+              executionTime = currentTime - previousTime;
+              time          = currentTime;
+              performance.push({
+                'Element'        : element,
+                'Name'           : message[0],
+                'Arguments'      : [].slice.call(message, 1) || '',
+                'Execution Time' : executionTime
+              });
+            }
+            clearTimeout(module.performance.timer);
+            module.performance.timer = setTimeout(module.performance.display, 100);
+          },
+          display: function() {
             var
-          $element    = $(this),
+              title = settings.moduleName + ':',
-
+              totalTime = 0
-          metadata    = settings.metadata,
-          namespace   = settings.namespace,
-          className   = settings.className,
-
-          module       = {
-            initialize: function() {
-              $element
-                .on('click.' + namespace , module.changeVideo)
             ;
+            time        = false;
+            $.each(performance, function(index, data) {
+              totalTime += data['Execution Time'];
+            });
+            title += ' ' + totalTime + 'ms';
+            if(moduleSelector) {
+              title += ' \'' + moduleSelector + '\'';
+            }
+            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+              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 = [];
+          }
         },
-            changeVideo: function() {
+        invoke: function(query, passedArguments, context) {
           var
-                flv         = $element.data(metadata.flv)         || false,
+            maxDepth,
-                source      = $element.data(metadata.source)      || false,
+            found
-                placeholder = $element.data(metadata.placeholder) || false
+          ;
-              ;
+          passedArguments = passedArguments || queryArguments;
-              if(flv && source) {
+          context         = element         || context;
-                $video
+          if(typeof query == 'string' && instance !== undefined) {
-                  .data(metadata.source, source)
+            query    = query.split(/[\. ]/);
-                  .data(metadata.flv, flv)
+            maxDepth = query.length - 1;
-                ;
+            $.each(query, function(depth, value) {
-                if(settings.showPlaceholder) {
+              if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
-                  $video
+                instance = instance[value];
-                    .removeClass(className.active)
+              }
-                    .find($.fn.video.selector.placeholder)
+              else if( instance[value] !== undefined ) {
-                      .attr('src', placeholder)
+                found = instance[value];
-                  ;
               }
               else {
-                  try {
+                module.error(error.method);
-                    $video
-                      .video('play')
-                    ;
               }
-                  catch(error) {
+            });
-                    console.warn('Video Playlist Module: ' + settings.error.init);
           }
+          if ( $.isFunction( found ) ) {
+            return found.apply(context, passedArguments);
           }
-                $allModules
+          return found || false;
-                  .removeClass(className.active)
-                ;
-                $element
-                  .addClass(className.active)
-                ;
         }
+      };
+
+      if(methodInvoked) {
+        if(instance === undefined) {
+          module.initialize();
         }
+        invokedResponse = module.invoke(query);
+      }
+      else {
+        if(instance !== undefined) {
+          module.destroy();
         }
-        ;
         module.initialize();
+      }
     })
   ;
 
-    if(settings.playFirst) {
+  return (invokedResponse)
-      $allModules
+    ? invokedResponse
-        .eq(0)
+    : this
-        .trigger('click')
-      ;
-      // we all like a good hack
-      if($iframe.size() > 0) {
-        $iframe
-          .attr('src', $iframe.attr('src').replace('autoplay=1', 'autoplay=0') )
   ;
-      }
+};
-
-    }
-
-  };
 
-  $.fn.video.settings = {
+$.fn.video.settings = {
 
   moduleName  : 'Video',
   namespace   : 'video',
-    debug       : false,
+
+  debug       : true,
+  verbose     : true,
+  performance : true,
+  
 
   metadata    : {
     source : 'source',
-      flv         : 'flv'
+    id     : 'id',
+    url    : 'url'
   },
   
   onPlay   : function(){},
@@ -336,9 +394,8 @@
   onChange : function(){},
   
   // callbacks not coded yet (needs to use jsapi)
-    play        : function() {},
+  onPause  : function() {},
-    pause       : function() {},
+  onStop   : function() {},
-    stop        : function() {},
   
   width    : 'auto',
   height   : 'auto',
@@ -349,7 +406,8 @@
   showUI   : false,
   api      : true,
   
-    errors      : {
+  error      : {
+    noVideo     : 'No video specified',
     method      : 'The method you called is not defined'
   },
   
@@ -362,30 +420,7 @@
     placeholder : '.placeholder',
     playButton  : '.play'
   }
-  };
+};
-
-  $.fn.videoPlaylist.settings = {
-    moduleName      : 'Video Playlist',
-    namespace       : 'videoPlaylist',
-
-    source          : 'vimeo',
-    showPlaceholder : false,
-    playFirst       : true,
-
-    metadata: {
-      flv         : 'flv',
-      source      : 'source',
-      placeholder : 'placeholder'
-    },
-
-    errors: {
-      init   : 'The video player you specified was not yet initialized'
-    },
-
-    className : {
-      active  : 'active'
-    }
 
-  };
 
 })( 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,12 +11,24 @@
 
 ;(function ($, window, document, undefined) {
 
-  $.fn.video = function(parameters) {
+$.fn.video = function(parameters) {
 
   var
-      settings = $.extend(true, {}, $.fn.video.settings, parameters),
+    $allModules     = $(this),
-      // make arguments available
+
-      moduleArguments = arguments || false,
+    settings        = ( $.isPlainObject(parameters) )
+      ? $.extend(true, {}, $.fn.video.settings, parameters)
+      : $.fn.video.settings,
+
+    moduleSelector  = $allModules.selector || '',
+
+    time            = new Date().getTime(),
+    performance     = [],
+
+    query           = arguments[0],
+    methodInvoked   = (typeof query == 'string'),
+    queryArguments  = [].slice.call(arguments, 1),
+
     invokedResponse
   ;
 
@@ -28,14 +40,17 @@
         $playButton  = $module.find(settings.selector.playButton),
         $embed       = $module.find(settings.selector.embed),
         
-          element       = this,
+        eventNamespace  = '.' + settings.namespace,
-          instance      = $module.data('module-' + settings.namespace),
+        moduleNamespace = settings.namespace + '-module', 
-          methodInvoked = (typeof parameters == 'string'),
 
-          namespace    = settings.namespace,
+        selector        = settings.selector,
-          metadata     = settings.metadata,
         className       = settings.className,
+        error           = settings.error,
+        metadata        = settings.metadata,
+        namespace       = settings.namespace,
         
+        element         = this,
+        instance        = $module.data(moduleNamespace),
         module
       ;
 
@@ -44,24 +59,36 @@
         initialize: function() {
           module.debug('Initializing video');
           $placeholder
-              .off('.video')
+            .on('click' + eventNamespace, module.play)
-              .on('click.' + namespace, module.play)
           ;
           $playButton
-              .off('.video')
+            .on('click' + eventNamespace, module.play)
-              .on('click.' + namespace, module.play)
+          ;
+          module.instantiate();
+        },
+
+        instantiate: function() {
+          instance = module;
+          $module
+            .data(moduleNamespace, module)
           ;
+        },
+
+        destroy: function() {
+          module.verbose('Destroying previous instance of video');
           $module
-              .data('module-' + namespace, module)
+            .removeData(moduleNamespace)
+            .off(eventNamespace)
           ;
         },
 
         // sets new video
-          change: function(source, flv) {
+        change: function(source, id, url) {
-            module.debug('Changing video to ', flv);
+          module.debug('Changing video to ', source, id, url);
           $module
             .data(metadata.source, source)
-              .data(metadata.flv, flv)
+            .data(metadata.id, id)
+            .data(metadata.url, url)
           ;
           settings.onChange();
         },
@@ -85,11 +112,12 @@
         play: function() {
           module.debug('Playing video');
           var
-              source = $module.data(metadata.source),
+            source = $module.data(metadata.source) || false, 
-              flv    = $module.data(metadata.flv)
+            url    = $module.data(metadata.url)    || false,
+            id     = $module.data(metadata.id)     || false
           ;
           $embed
-              .html( module.generate.html(source, flv) )
+            .html( module.generate.html(source, id, url) )
           ;
           $module
             .addClass(className.active)
@@ -99,7 +127,7 @@
 
         generate: {
           // generates iframe html
-            html: function(source, flv) {
+          html: function(source, id, url) {
             module.debug('Generating embed html');
             var
               width = (settings.width == 'auto')
@@ -110,20 +138,32 @@
                 : settings.height,
               html
             ;
+            if(source && id) {
               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>'
+                ;
+              }
+            }
+            else if(url) {
+              html = ''
+                + '<iframe src="' + url + '"'
                 + ' width="' + width + '" height="' + height + '"'
                 + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
               ;
             }
+            else {
+              module.error(error.noVideo);
+            }
             return html;
           },
 
@@ -160,6 +200,14 @@
                 url += '&amp;color=' + settings.color;
               }
             }
+            if(source == 'ustream') {
+              url = ''
+                + 'autoplay=' + autoplay
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
+              }
+            }
             else if(source == 'youtube') {
               url = ''
                 +      'enablejsapi=' + api
@@ -176,159 +224,169 @@
           }
         },
 
-          /* standard module */
+        setting: function(name, value) {
-          debug: function(message, variableName) {
+          if(value !== undefined) {
-            if(settings.debug) {
+            if( $.isPlainObject(name) ) {
-              if(variableName !== undefined) {
+              $.extend(true, settings, name);
-                console.info(settings.moduleName + ': ' + message, variableName);
             }
             else {
-                console.info(settings.moduleName + ': ' + message);
+              settings[name] = value;
+            }
           }
+          else {
+            return settings[name];
           }
         },
-          error: function(errorMessage) {
+        internal: function(name, value) {
-            console.warn(settings.moduleName + ': ' + errorMessage);
+          if(value !== undefined) {
+            if( $.isPlainObject(name) ) {
+              $.extend(true, module, name);
+            }
+            else {
+              module[name] = value;
+            }
+          }
+          else {
+            return module[name];
+          }
         },
-          invoke: function(methodName, context, methodArguments) {
+        debug: function() {
-            var
+          if(settings.debug) {
-              method
+            if(settings.performance) {
-            ;
+              module.performance.log(arguments);
-            methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 );
-            if(typeof methodName == 'string' && instance !== undefined) {
-              methodName = methodName.split('.');
-              $.each(methodName, function(index, name) {
-                if( $.isPlainObject( instance[name] ) ) {
-                  instance = instance[name];
-                  return true;
-                }
-                else if( $.isFunction( instance[name] ) ) {
-                  method = instance[name];
-                  return true;
-                }
-                module.error(settings.errors.method);
-                return false;
-              });
             }
-            if ( $.isFunction( method ) ) {
+            else {
-              return method.apply(context, methodArguments);
+              module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
             }
-            // return retrieved variable or chain
-            return method;
           }
-        };
+        },
-        // check for invoking internal method
+        verbose: function() {
-        if(methodInvoked) {
+          if(settings.verbose && settings.debug) {
-          invokedResponse = module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) );
+            if(settings.performance) {
+              module.performance.log(arguments);
             }
-        // otherwise initialize
             else {
-          if(instance) {
+              module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
-            module.destroy();
             }
-          module.initialize();
           }
-
+        },
-      })
+        error: function() {
-    ;
+          module.error = Function.prototype.bind.call(console.warn, console, settings.moduleName + ':');
-    // chain or return queried method
+        },
-    return (invokedResponse !== undefined)
+        performance: {
-      ? invokedResponse
+          log: function(message) {
-      : this
-    ;
-  };
-
-
-  $.fn.videoPlaylist = function(video, parameters) {
             var
-      $allModules = $(this),
+              currentTime,
-      $video      = $(video),
+              executionTime,
-      $iframe     = $video.find('.embed iframe'),
+              previousTime
-
+            ;
-      settings    = $.extend({}, $.fn.videoPlaylist.settings, parameters, true)
+            if(settings.performance) {
-    ;
+              currentTime   = new Date().getTime();
-    $allModules
+              previousTime  = time || currentTime,
-      .each(function() {
+              executionTime = currentTime - previousTime;
+              time          = currentTime;
+              performance.push({
+                'Element'        : element,
+                'Name'           : message[0],
+                'Arguments'      : [].slice.call(message, 1) || '',
+                'Execution Time' : executionTime
+              });
+            }
+            clearTimeout(module.performance.timer);
+            module.performance.timer = setTimeout(module.performance.display, 100);
+          },
+          display: function() {
             var
-          $element    = $(this),
+              title = settings.moduleName + ':',
-
+              totalTime = 0
-          metadata    = settings.metadata,
-          namespace   = settings.namespace,
-          className   = settings.className,
-
-          module       = {
-            initialize: function() {
-              $element
-                .on('click.' + namespace , module.changeVideo)
             ;
+            time        = false;
+            $.each(performance, function(index, data) {
+              totalTime += data['Execution Time'];
+            });
+            title += ' ' + totalTime + 'ms';
+            if(moduleSelector) {
+              title += ' \'' + moduleSelector + '\'';
+            }
+            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+              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 = [];
+          }
         },
-            changeVideo: function() {
+        invoke: function(query, passedArguments, context) {
           var
-                flv         = $element.data(metadata.flv)         || false,
+            maxDepth,
-                source      = $element.data(metadata.source)      || false,
+            found
-                placeholder = $element.data(metadata.placeholder) || false
+          ;
-              ;
+          passedArguments = passedArguments || queryArguments;
-              if(flv && source) {
+          context         = element         || context;
-                $video
+          if(typeof query == 'string' && instance !== undefined) {
-                  .data(metadata.source, source)
+            query    = query.split(/[\. ]/);
-                  .data(metadata.flv, flv)
+            maxDepth = query.length - 1;
-                ;
+            $.each(query, function(depth, value) {
-                if(settings.showPlaceholder) {
+              if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
-                  $video
+                instance = instance[value];
-                    .removeClass(className.active)
+              }
-                    .find($.fn.video.selector.placeholder)
+              else if( instance[value] !== undefined ) {
-                      .attr('src', placeholder)
+                found = instance[value];
-                  ;
               }
               else {
-                  try {
+                module.error(error.method);
-                    $video
-                      .video('play')
-                    ;
               }
-                  catch(error) {
+            });
-                    console.warn('Video Playlist Module: ' + settings.error.init);
           }
+          if ( $.isFunction( found ) ) {
+            return found.apply(context, passedArguments);
           }
-                $allModules
+          return found || false;
-                  .removeClass(className.active)
-                ;
-                $element
-                  .addClass(className.active)
-                ;
         }
+      };
+
+      if(methodInvoked) {
+        if(instance === undefined) {
+          module.initialize();
         }
+        invokedResponse = module.invoke(query);
+      }
+      else {
+        if(instance !== undefined) {
+          module.destroy();
         }
-        ;
         module.initialize();
+      }
     })
   ;
 
-    if(settings.playFirst) {
+  return (invokedResponse)
-      $allModules
+    ? invokedResponse
-        .eq(0)
+    : this
-        .trigger('click')
-      ;
-      // we all like a good hack
-      if($iframe.size() > 0) {
-        $iframe
-          .attr('src', $iframe.attr('src').replace('autoplay=1', 'autoplay=0') )
   ;
-      }
+};
-
-    }
-
-  };
 
-  $.fn.video.settings = {
+$.fn.video.settings = {
 
   moduleName  : 'Video',
   namespace   : 'video',
-    debug       : false,
+
+  debug       : true,
+  verbose     : true,
+  performance : true,
+  
 
   metadata    : {
     source : 'source',
-      flv         : 'flv'
+    id     : 'id',
+    url    : 'url'
   },
   
   onPlay   : function(){},
@@ -336,9 +394,8 @@
   onChange : function(){},
   
   // callbacks not coded yet (needs to use jsapi)
-    play        : function() {},
+  onPause  : function() {},
-    pause       : function() {},
+  onStop   : function() {},
-    stop        : function() {},
   
   width    : 'auto',
   height   : 'auto',
@@ -349,7 +406,8 @@
   showUI   : false,
   api      : true,
   
-    errors      : {
+  error      : {
+    noVideo     : 'No video specified',
     method      : 'The method you called is not defined'
   },
   
@@ -362,30 +420,7 @@
     placeholder : '.placeholder',
     playButton  : '.play'
   }
-  };
+};
-
-  $.fn.videoPlaylist.settings = {
-    moduleName      : 'Video Playlist',
-    namespace       : 'videoPlaylist',
-
-    source          : 'vimeo',
-    showPlaceholder : false,
-    playFirst       : true,
-
-    metadata: {
-      flv         : 'flv',
-      source      : 'source',
-      placeholder : 'placeholder'
-    },
-
-    errors: {
-      init   : 'The video player you specified was not yet initialized'
-    },
-
-    className : {
-      active  : 'active'
-    }
 
-  };
 
 })( 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,32 +475,41 @@
   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
@@ -524,161 +533,190 @@
   background-color: rgba(0, 0, 0, 0.05);
 }
 /*--------------
-    Inverted
+   Secondary
 ---------------*/
-.ui.inverted.menu {
+.ui.secondary.menu {
-  background-color: #333333;
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
   box-shadow: none;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
 }
-.ui.inverted.menu .header.item {
+.ui.secondary.menu > .item {
-  margin: 0em;
-  background-color: rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
+  border: none;
+  min-height: 0em !important;
+  margin: 0em 0.25em;
+  padding: 0.5em 1em;
+  -webkit-border-radius: 0.3125em;
+  -moz-border-radius: 0.3125em;
+  border-radius: 0.3125em;
 }
-.ui.inverted.menu .item,
+.ui.secondary.menu > .item:before {
-.ui.inverted.menu .item > a {
+  display: none !important;
-  color: #FFFFFF;
 }
-.ui.inverted.menu .item .item,
+.ui.secondary.menu .link.item,
-.ui.inverted.menu .item .item > a {
+.ui.secondary.menu a.item {
-  color: rgba(255, 255, 255, 0.8);
+  color: rgba(0, 0, 0, 0.4);
 }
-.ui.inverted.menu .item .item > a:hover {
+.ui.secondary.menu .header.item {
-  background-color: rgba(255, 255, 255, 0.03);
+  background-color: transparent;
-  color: rgba(255, 255, 255, 0.9);
+  border-right: 0.1em solid rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
 }
-.ui.inverted.menu .item > p:only-child {
+/* active */
-  color: rgba(255, 255, 255, 0.75);
+.ui.secondary.menu > .active.item {
+  border-top: none;
+  padding-top: 0.5em;
+  background-color: rgba(0, 0, 0, 0.08);
+  color: rgba(0, 0, 0, 0.8);
 }
-.ui.inverted.menu .dropdown.item .menu .item,
+.ui.secondary.vertical.menu > .active.item {
-.ui.inverted.menu .dropdown.item .menu .item a {
+  -webkit-border-radius: 0.3125em;
-  color: rgba(0, 0, 0, 0.75) !important;
+  -moz-border-radius: 0.3125em;
+  border-radius: 0.3125em;
 }
-.ui.inverted.menu .item.disabled,
+.ui.secondary.inverted.menu > .active.item {
-.ui.inverted.menu .item.disabled:hover,
+  background-color: rgba(255, 255, 255, 0.2);
-.ui.inverted.menu .item.disabled.hover {
-  color: rgba(255, 255, 255, 0.2);
 }
-/*--- Border ---*/
+/* disable variations */
-.ui.inverted.menu .item:before {
+.ui.secondary.item.menu > .item {
-  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%);
+  margin: 0em;
-  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 {
+.ui.secondary.attached.menu {
-  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%);
+  -webkit-box-shadow: none;
-  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%);
+  -moz-box-shadow: none;
-  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%);
+  box-shadow: none;
-  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,
+   Secondary Pointing
-.ui.inverted.menu .item.hover,
+-----------------------*/
-.ui.inverted.menu .link.item:hover,
+.ui.secondary.pointing.menu {
-.ui.inverted.menu a.item:hover,
+  border-bottom: 3px solid rgba(0, 0, 0, 0.1);
-.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.secondary.pointing.menu > .item {
-.ui.inverted.menu .item.hover,
+  margin: 0em 0em -3px;
-.ui.inverted.menu .item > a:hover,
+  padding: 0.6em 0.95em;
-.ui.inverted.menu .item .menu a.item:hover,
+  border-bottom: 3px solid rgba(0, 0, 0, 0);
-.ui.inverted.menu .item .menu a.item.hover,
+  -webkit-border-radius: 0em;
-.ui.inverted.menu .item .menu .link.item:hover,
+  -moz-border-radius: 0em;
-.ui.inverted.menu .item .menu .link.item.hover {
+  border-radius: 0em;
-  color: #ffffff;
+  -webkit-transition: color 0.2s
+  ;
+  -moz-transition: color 0.2s
+  ;
+  -o-transition: color 0.2s
+  ;
+  -ms-transition: color 0.2s
+  ;
+  transition: color 0.2s
+  ;
 }
-/*--- Down ---*/
+.ui.secondary.pointing.menu > .item:after {
-.ui.inverted.menu .item.down,
+  display: none;
-.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 ---*/
+/* Hover */
-.ui.inverted.menu .active.item {
+.ui.secondary.pointing.menu > .item.hover,
-  border-color: transparent !important;
+.ui.secondary.pointing.menu > .item:hover {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: transparent;
+  color: rgba(0, 0, 0, 0.7);
 }
-.ui.inverted.menu .active.item,
+/* Down */
-.ui.inverted.menu .active.item a {
+.ui.secondary.pointing.menu > .item:active,
-  color: #ffffff;
+.ui.secondary.pointing.menu > .item.down {
+  background-color: transparent;
+  border-color: rgba(0, 0, 0, 0.2);
 }
-.ui.inverted.vertical.menu .item .menu .active.item {
+/* Active */
-  background-color: rgba(255, 255, 255, 0.2);
+.ui.secondary.pointing.menu > .item.active {
-  color: #ffffff;
+  background-color: transparent;
+  border-color: rgba(0, 0, 0, 0.4);
 }
-/*--- Pointers ---*/
+/*---------------------
-.ui.inverted.pointing.menu .active.item:after {
+   Secondary Vertical
-  background-color: #505050;
+-----------------------*/
-  box-shadow: none;
+.ui.secondary.vertical.pointing.menu {
+  border: none;
+  border-right: 3px solid rgba(0, 0, 0, 0.1);
 }
-.ui.inverted.pointing.menu .active.item:hover:after {
+.ui.secondary.vertical.menu > .item {
-  background-color: #3B3B3B;
+  border: none;
+  margin: 0em 0em 0.3em;
+  padding: 0.6em 0.8em;
+  -webkit-border-radius: 0.1875em;
+  -moz-border-radius: 0.1875em;
+  border-radius: 0.1875em;
 }
-/*--------------
+.ui.secondary.vertical.menu > .header.item {
-     Floated
+  -webkit-border-radius: 0em;
----------------*/
+  -moz-border-radius: 0em;
-.ui.floated.menu {
+  border-radius: 0em;
-  float: left;
-  margin: 0rem 0.5rem 0rem 0rem;
 }
-.ui.right.floated.menu {
+.ui.secondary.vertical.pointing.menu > .item {
-  float: right;
+  margin: 0em -3px 0em 0em;
-  margin: 0rem 0rem 0rem 0.5rem;
+  border-bottom: none;
+  border-right: 3px solid transparent;
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
+}
+/* Hover */
+.ui.secondary.vertical.pointing.menu > .item.hover,
+.ui.secondary.vertical.pointing.menu > .item:hover {
+  background-color: transparent;
+  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 Colors
+    Inverted
 ---------------*/
-/*--- Light Colors  ---*/
+.ui.secondary.inverted.menu {
-.ui.grey.menu {
+  background-color: transparent;
-  background-color: #F0F0F0;
 }
-/*--- Inverted Colors  ---*/
+.ui.secondary.inverted.pointing.menu {
-.ui.inverted.green.menu {
+  border-bottom: 3px solid rgba(255, 255, 255, 0.1);
-  background-color: #A1CF64;
 }
-.ui.inverted.green.pointing.menu .active.item:after {
+.ui.secondary.inverted.pointing.menu > .item {
-  background-color: #A1CF64;
+  color: rgba(255, 255, 255, 0.7);
-}
-.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 {
+/* Hover */
-  background-color: #F05940;
+.ui.secondary.inverted.pointing.menu > .item.hover,
+.ui.secondary.inverted.pointing.menu > .item:hover {
+  color: rgba(255, 255, 255, 0.85);
 }
-.ui.inverted.orange.pointing.menu .active.item:after {
+/* Down */
-  background-color: #F05940;
+.ui.secondary.inverted.pointing.menu > .item:active,
+.ui.secondary.inverted.pointing.menu > .item.down {
+  border-color: rgba(255, 255, 255, 0.4) !important;
 }
-.ui.inverted.teal.menu {
+/* Active */
-  background-color: #00B5AD;
+.ui.secondary.inverted.pointing.menu > .item.active {
+  border-color: rgba(255, 255, 255, 0.8) !important;
+  color: #ffffff;
 }
-.ui.inverted.teal.pointing.menu .active.item:after {
+/*---------------------
-  background-color: #00B5AD;
+   Inverted Vertical
+----------------------*/
+.ui.secondary.inverted.vertical.pointing.menu {
+  border-right: 3px solid rgba(255, 255, 255, 0.1);
+  border-bottom: none;
 }
 /*--------------
     Text Menu
@@ -802,236 +840,236 @@
   color: #00B5AD;
 }
 /*--------------
-   Secondary
+    Icon Only
 ---------------*/
-.ui.secondary.menu {
+.ui.icon.menu,
-  background-color: transparent;
+.ui.vertical.icon.menu {
-  -webkit-box-shadow: none;
+  width: auto;
-  -moz-box-shadow: none;
+  display: inline-block;
-  box-shadow: none;
+  min-height: 0em;
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
-  border-radius: 0px;
 }
-.ui.secondary.menu > .item {
+.ui.icon.menu .item {
-  -webkit-box-shadow: none;
+  text-align: center;
-  -moz-box-shadow: none;
+  color: rgba(60, 60, 60, 0.7);
-  box-shadow: none;
-  border: none;
-  min-height: 0em !important;
-  margin: 0em 0.25em;
-  padding: 0.5em 1em;
-  -webkit-border-radius: 0.3125em;
-  -moz-border-radius: 0.3125em;
-  border-radius: 0.3125em;
 }
-.ui.secondary.menu > .item:before {
+.ui.icon.menu .item .icon {
-  display: none !important;
+  display: block;
+  float: none;
+  opacity: 1;
+  margin: 0em auto;
 }
-.ui.secondary.menu .link.item,
+.ui.icon.menu .icon:before {
-.ui.secondary.menu a.item {
+  opacity: 1;
-  color: rgba(0, 0, 0, 0.4);
 }
-.ui.secondary.menu .header.item {
+/* Item Icon Only */
-  background-color: transparent;
+.ui.menu .icon.item .icon {
-  border-right: 0.1em solid rgba(0, 0, 0, 0.1);
+  margin: 0em;
-  -webkit-border-radius: 0em;
-  -moz-border-radius: 0em;
-  border-radius: 0em;
 }
-/* active */
+/*--- inverted ---*/
-.ui.secondary.menu > .active.item {
+.ui.inverted.icon.menu .item {
-  border-top: none;
+  color: rgba(255, 255, 255, 0.8);
-  padding-top: 0.5em;
-  background-color: rgba(0, 0, 0, 0.08);
-  color: rgba(0, 0, 0, 0.8);
 }
-.ui.secondary.vertical.menu > .active.item {
+.ui.inverted.icon.menu .icon {
-  -webkit-border-radius: 0.3125em;
+  color: #ffffff;
-  -moz-border-radius: 0.3125em;
-  border-radius: 0.3125em;
 }
-.ui.secondary.inverted.menu > .active.item {
+/*--------------
-  background-color: rgba(255, 255, 255, 0.2);
+   Labeled Icon
+---------------*/
+.ui.labeled.icon.menu {
+  text-align: center;
 }
-/* disable variations */
+.ui.labeled.icon.menu .icon {
-.ui.secondary.item.menu > .item {
+  display: block;
-  margin: 0em;
+  font-size: 1.5em;
+  margin: 0em auto 0.3em;
 }
-.ui.secondary.attached.menu {
+/*******************************
+           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,
-   Secondary Pointing
+.ui.inverted.menu .item > a {
------------------------*/
+  color: #FFFFFF;
-.ui.secondary.pointing.menu {
-  border-bottom: 3px solid rgba(0, 0, 0, 0.1);
 }
-.ui.secondary.pointing.menu > .item {
+.ui.inverted.menu .item .item,
-  margin: 0em 0em -3px;
+.ui.inverted.menu .item .item > a {
-  padding: 0.6em 0.95em;
+  color: rgba(255, 255, 255, 0.8);
-  border-bottom: 3px solid rgba(0, 0, 0, 0);
-  -webkit-border-radius: 0em;
-  -moz-border-radius: 0em;
-  border-radius: 0em;
-  -webkit-transition: color 0.2s
-  ;
-  -moz-transition: color 0.2s
-  ;
-  -o-transition: color 0.2s
-  ;
-  -ms-transition: color 0.2s
-  ;
-  transition: color 0.2s
-  ;
 }
-.ui.secondary.pointing.menu > .item:after {
+.ui.inverted.menu .item .item > a:hover {
-  display: none;
+  background-color: rgba(255, 255, 255, 0.03);
+  color: rgba(255, 255, 255, 0.9);
 }
-/* Hover */
+.ui.inverted.menu .item > p:only-child {
-.ui.secondary.pointing.menu > .item.hover,
+  color: rgba(255, 255, 255, 0.75);
-.ui.secondary.pointing.menu > .item:hover {
-  background-color: transparent;
-  color: rgba(0, 0, 0, 0.7);
 }
-/* Down */
+.ui.inverted.menu .dropdown.item .menu .item,
-.ui.secondary.pointing.menu > .item:active,
+.ui.inverted.menu .dropdown.item .menu .item a {
-.ui.secondary.pointing.menu > .item.down {
+  color: rgba(0, 0, 0, 0.75) !important;
-  background-color: transparent;
-  border-color: rgba(0, 0, 0, 0.2);
 }
-/* Active */
+.ui.inverted.menu .item.disabled,
-.ui.secondary.pointing.menu > .item.active {
+.ui.inverted.menu .item.disabled:hover,
-  background-color: transparent;
+.ui.inverted.menu .item.disabled.hover {
-  border-color: rgba(0, 0, 0, 0.4);
+  color: rgba(255, 255, 255, 0.2);
 }
-/*------- Vertical------- */
+/*--- Border ---*/
-.ui.secondary.vertical.pointing.menu {
+.ui.inverted.menu .item:before {
-  border: none;
+  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%);
-  border-right: 3px solid rgba(0, 0, 0, 0.1);
+  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.secondary.vertical.menu > .item {
+.ui.vertical.inverted.menu .item:before {
-  border: none;
+  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%);
-  margin: 0em 0em 0.3em;
+  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%);
-  padding: 0.6em 0.8em;
+  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%);
-  -webkit-border-radius: 0.1875em;
+  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%);
-  -moz-border-radius: 0.1875em;
+  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%);
-  border-radius: 0.1875em;
 }
-.ui.secondary.vertical.menu > .header.item {
+/*--- Hover ---*/
-  -webkit-border-radius: 0em;
+.ui.link.inverted.menu .item:hover,
-  -moz-border-radius: 0em;
+.ui.inverted.menu .item.hover,
-  border-radius: 0em;
+.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.secondary.vertical.pointing.menu > .item {
+.ui.inverted.menu a.item:hover,
-  margin: 0em -3px 0em 0em;
+.ui.inverted.menu .item.hover,
-  border-bottom: none;
+.ui.inverted.menu .item > a:hover,
-  border-right: 3px solid transparent;
+.ui.inverted.menu .item .menu a.item:hover,
-  -webkit-border-radius: 0em;
+.ui.inverted.menu .item .menu a.item.hover,
-  -moz-border-radius: 0em;
+.ui.inverted.menu .item .menu .link.item:hover,
-  border-radius: 0em;
+.ui.inverted.menu .item .menu .link.item.hover {
+  color: #ffffff;
 }
-/* Hover */
+/*--- Down ---*/
-.ui.secondary.vertical.pointing.menu > .item.hover,
+.ui.inverted.menu .item.down,
-.ui.secondary.vertical.pointing.menu > .item:hover {
+.ui.inverted.menu a.item:active,
-  background-color: transparent;
+.ui.inverted.menu .item > a:active,
-  color: rgba(0, 0, 0, 0.7);
+.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);
 }
-/* Down */
+/*--- Active ---*/
-.ui.secondary.vertical.pointing.menu > .item:active,
+.ui.inverted.menu .active.item {
-.ui.secondary.vertical.pointing.menu > .item.down {
+  border-color: transparent !important;
-  background-color: transparent;
+  background-color: rgba(255, 255, 255, 0.2);
-  border-color: rgba(0, 0, 0, 0.2);
 }
-/* Active */
+.ui.inverted.menu .active.item,
-.ui.secondary.vertical.pointing.menu > .item.active {
+.ui.inverted.menu .active.item a {
-  background-color: transparent;
+  color: #ffffff;
-  border-color: rgba(0, 0, 0, 0.4);
-  color: rgba(0, 0, 0, 0.85);
 }
-/*------- Inverted------- */
+.ui.inverted.vertical.menu .item .menu .active.item {
-.ui.secondary.inverted.pointing.menu {
+  background-color: rgba(255, 255, 255, 0.2);
-  border-bottom: 3px solid rgba(255, 255, 255, 0.1);
+  color: #ffffff;
 }
-.ui.secondary.inverted.pointing.menu > .item {
+/*--- Pointers ---*/
-  color: rgba(255, 255, 255, 0.7);
+.ui.inverted.pointing.menu .active.item:after {
+  background-color: #505050;
+  box-shadow: none;
 }
-/* Hover */
+.ui.inverted.pointing.menu .active.item:hover:after {
-.ui.secondary.inverted.pointing.menu > .item.hover,
+  background-color: #3B3B3B;
-.ui.secondary.inverted.pointing.menu > .item:hover {
-  color: rgba(255, 255, 255, 0.85);
 }
-/* Down */
+/*--------------
-.ui.secondary.inverted.pointing.menu > .item:active,
+     Floated
-.ui.secondary.inverted.pointing.menu > .item.down {
+---------------*/
-  border-color: rgba(255, 255, 255, 0.4);
+.ui.floated.menu {
+  float: left;
+  margin: 0rem 0.5rem 0rem 0rem;
 }
-/* Active */
+.ui.right.floated.menu {
-.ui.secondary.inverted.pointing.menu > .item.active {
+  float: right;
-  border-color: rgba(255, 255, 255, 0.8);
+  margin: 0rem 0rem 0rem 0.5rem;
-  color: #ffffff;
 }
 /*--------------
- Inverted Sec
+ Inverted Colors
 ---------------*/
-.ui.secondary.inverted.vertical.pointing.menu {
+/*--- Light Colors  ---*/
-  border-right: 3px solid rgba(255, 255, 255, 0.1);
+.ui.grey.menu {
-  border-bottom: none;
+  background-color: #F0F0F0;
 }
-/* Down */
+/*--- Inverted Colors  ---*/
-.ui.secondary.inverted.vertical.pointing.menu .item:active,
+.ui.inverted.green.menu {
-.ui.secondary.inverted.vertical.pointing.menu .item.down {
+  background-color: #A1CF64;
-  box-shadow: 0.2em 0em 0em 0em rgba(255, 255, 255, 0.2);
 }
-/* Active */
+.ui.inverted.green.pointing.menu .active.item:after {
-.ui.secondary.inverted.vertical.pointing.menu .item.active {
+  background-color: #A1CF64;
-  box-shadow: 0.2em 0em 0em 0em rgba(255, 255, 255, 0.4);
 }
-/*--------------
+.ui.inverted.red.menu {
-    Icon Only
+  background-color: #EF4D6D;
----------------*/
-.ui.icon.menu,
-.ui.vertical.icon.menu {
-  width: auto;
-  display: inline-block;
-  min-height: 0em;
 }
-.ui.icon.menu .item {
+.ui.inverted.red.pointing.menu .active.item:after {
-  text-align: center;
+  background-color: #F16883;
-  color: rgba(60, 60, 60, 0.7);
 }
-.ui.icon.menu .item .icon {
+.ui.inverted.blue.menu {
-  display: block;
+  background-color: #6ECFF5;
-  float: none;
-  opacity: 1;
-  margin: 0em auto;
 }
-.ui.icon.menu .icon:before {
+.ui.inverted.blue.pointing.menu .active.item:after {
-  opacity: 1;
+  background-color: #6ECFF5;
 }
-/* Item Icon Only */
+.ui.inverted.purple.menu {
-.ui.menu .icon.item .icon {
+  background-color: #564F8A;
-  margin: 0em;
 }
-/*--- inverted ---*/
+.ui.inverted.purple.pointing.menu .active.item:after {
-.ui.inverted.icon.menu .item {
+  background-color: #564F8A;
-  color: rgba(255, 255, 255, 0.8);
 }
-.ui.inverted.icon.menu .icon {
+.ui.inverted.orange.menu {
-  color: #ffffff;
+  background-color: #F05940;
 }
-/*--------------
+.ui.inverted.orange.pointing.menu .active.item:after {
-   Labeled Icon
+  background-color: #F05940;
----------------*/
-.ui.labeled.icon.menu {
-  text-align: center;
 }
-.ui.labeled.icon.menu .icon {
+.ui.inverted.teal.menu {
-  display: block;
+  background-color: #00B5AD;
-  font-size: 1.5em;
+}
-  margin: 0em auto 0.3em;
+.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,12 +11,24 @@
 
 ;(function ($, window, document, undefined) {
 
-  $.fn.video = function(parameters) {
+$.fn.video = function(parameters) {
 
   var
-      settings = $.extend(true, {}, $.fn.video.settings, parameters),
+    $allModules     = $(this),
-      // make arguments available
+
-      moduleArguments = arguments || false,
+    settings        = ( $.isPlainObject(parameters) )
+      ? $.extend(true, {}, $.fn.video.settings, parameters)
+      : $.fn.video.settings,
+
+    moduleSelector  = $allModules.selector || '',
+
+    time            = new Date().getTime(),
+    performance     = [],
+
+    query           = arguments[0],
+    methodInvoked   = (typeof query == 'string'),
+    queryArguments  = [].slice.call(arguments, 1),
+
     invokedResponse
   ;
 
@@ -28,14 +40,17 @@
         $playButton  = $module.find(settings.selector.playButton),
         $embed       = $module.find(settings.selector.embed),
         
-          element       = this,
+        eventNamespace  = '.' + settings.namespace,
-          instance      = $module.data('module-' + settings.namespace),
+        moduleNamespace = settings.namespace + '-module', 
-          methodInvoked = (typeof parameters == 'string'),
 
-          namespace    = settings.namespace,
+        selector        = settings.selector,
-          metadata     = settings.metadata,
         className       = settings.className,
+        error           = settings.error,
+        metadata        = settings.metadata,
+        namespace       = settings.namespace,
         
+        element         = this,
+        instance        = $module.data(moduleNamespace),
         module
       ;
 
@@ -44,24 +59,36 @@
         initialize: function() {
           module.debug('Initializing video');
           $placeholder
-              .off('.video')
+            .on('click' + eventNamespace, module.play)
-              .on('click.' + namespace, module.play)
           ;
           $playButton
-              .off('.video')
+            .on('click' + eventNamespace, module.play)
-              .on('click.' + namespace, module.play)
+          ;
+          module.instantiate();
+        },
+
+        instantiate: function() {
+          instance = module;
+          $module
+            .data(moduleNamespace, module)
           ;
+        },
+
+        destroy: function() {
+          module.verbose('Destroying previous instance of video');
           $module
-              .data('module-' + namespace, module)
+            .removeData(moduleNamespace)
+            .off(eventNamespace)
           ;
         },
 
         // sets new video
-          change: function(source, flv) {
+        change: function(source, id, url) {
-            module.debug('Changing video to ', flv);
+          module.debug('Changing video to ', source, id, url);
           $module
             .data(metadata.source, source)
-              .data(metadata.flv, flv)
+            .data(metadata.id, id)
+            .data(metadata.url, url)
           ;
           settings.onChange();
         },
@@ -85,11 +112,12 @@
         play: function() {
           module.debug('Playing video');
           var
-              source = $module.data(metadata.source),
+            source = $module.data(metadata.source) || false, 
-              flv    = $module.data(metadata.flv)
+            url    = $module.data(metadata.url)    || false,
+            id     = $module.data(metadata.id)     || false
           ;
           $embed
-              .html( module.generate.html(source, flv) )
+            .html( module.generate.html(source, id, url) )
           ;
           $module
             .addClass(className.active)
@@ -99,7 +127,7 @@
 
         generate: {
           // generates iframe html
-            html: function(source, flv) {
+          html: function(source, id, url) {
             module.debug('Generating embed html');
             var
               width = (settings.width == 'auto')
@@ -110,20 +138,32 @@
                 : settings.height,
               html
             ;
+            if(source && id) {
               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>'
+                ;
+              }
+            }
+            else if(url) {
+              html = ''
+                + '<iframe src="' + url + '"'
                 + ' width="' + width + '" height="' + height + '"'
                 + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
               ;
             }
+            else {
+              module.error(error.noVideo);
+            }
             return html;
           },
 
@@ -160,6 +200,14 @@
                 url += '&amp;color=' + settings.color;
               }
             }
+            if(source == 'ustream') {
+              url = ''
+                + 'autoplay=' + autoplay
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
+              }
+            }
             else if(source == 'youtube') {
               url = ''
                 +      'enablejsapi=' + api
@@ -176,159 +224,169 @@
           }
         },
 
-          /* standard module */
+        setting: function(name, value) {
-          debug: function(message, variableName) {
+          if(value !== undefined) {
-            if(settings.debug) {
+            if( $.isPlainObject(name) ) {
-              if(variableName !== undefined) {
+              $.extend(true, settings, name);
-                console.info(settings.moduleName + ': ' + message, variableName);
             }
             else {
-                console.info(settings.moduleName + ': ' + message);
+              settings[name] = value;
+            }
           }
+          else {
+            return settings[name];
           }
         },
-          error: function(errorMessage) {
+        internal: function(name, value) {
-            console.warn(settings.moduleName + ': ' + errorMessage);
+          if(value !== undefined) {
+            if( $.isPlainObject(name) ) {
+              $.extend(true, module, name);
+            }
+            else {
+              module[name] = value;
+            }
+          }
+          else {
+            return module[name];
+          }
         },
-          invoke: function(methodName, context, methodArguments) {
+        debug: function() {
-            var
+          if(settings.debug) {
-              method
+            if(settings.performance) {
-            ;
+              module.performance.log(arguments);
-            methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 );
-            if(typeof methodName == 'string' && instance !== undefined) {
-              methodName = methodName.split('.');
-              $.each(methodName, function(index, name) {
-                if( $.isPlainObject( instance[name] ) ) {
-                  instance = instance[name];
-                  return true;
-                }
-                else if( $.isFunction( instance[name] ) ) {
-                  method = instance[name];
-                  return true;
-                }
-                module.error(settings.errors.method);
-                return false;
-              });
             }
-            if ( $.isFunction( method ) ) {
+            else {
-              return method.apply(context, methodArguments);
+              module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
             }
-            // return retrieved variable or chain
-            return method;
           }
-        };
+        },
-        // check for invoking internal method
+        verbose: function() {
-        if(methodInvoked) {
+          if(settings.verbose && settings.debug) {
-          invokedResponse = module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) );
+            if(settings.performance) {
+              module.performance.log(arguments);
             }
-        // otherwise initialize
             else {
-          if(instance) {
+              module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
-            module.destroy();
             }
-          module.initialize();
           }
-
+        },
-      })
+        error: function() {
-    ;
+          module.error = Function.prototype.bind.call(console.warn, console, settings.moduleName + ':');
-    // chain or return queried method
+        },
-    return (invokedResponse !== undefined)
+        performance: {
-      ? invokedResponse
+          log: function(message) {
-      : this
-    ;
-  };
-
-
-  $.fn.videoPlaylist = function(video, parameters) {
             var
-      $allModules = $(this),
+              currentTime,
-      $video      = $(video),
+              executionTime,
-      $iframe     = $video.find('.embed iframe'),
+              previousTime
-
+            ;
-      settings    = $.extend({}, $.fn.videoPlaylist.settings, parameters, true)
+            if(settings.performance) {
-    ;
+              currentTime   = new Date().getTime();
-    $allModules
+              previousTime  = time || currentTime,
-      .each(function() {
+              executionTime = currentTime - previousTime;
+              time          = currentTime;
+              performance.push({
+                'Element'        : element,
+                'Name'           : message[0],
+                'Arguments'      : [].slice.call(message, 1) || '',
+                'Execution Time' : executionTime
+              });
+            }
+            clearTimeout(module.performance.timer);
+            module.performance.timer = setTimeout(module.performance.display, 100);
+          },
+          display: function() {
             var
-          $element    = $(this),
+              title = settings.moduleName + ':',
-
+              totalTime = 0
-          metadata    = settings.metadata,
-          namespace   = settings.namespace,
-          className   = settings.className,
-
-          module       = {
-            initialize: function() {
-              $element
-                .on('click.' + namespace , module.changeVideo)
             ;
+            time        = false;
+            $.each(performance, function(index, data) {
+              totalTime += data['Execution Time'];
+            });
+            title += ' ' + totalTime + 'ms';
+            if(moduleSelector) {
+              title += ' \'' + moduleSelector + '\'';
+            }
+            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+              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 = [];
+          }
         },
-            changeVideo: function() {
+        invoke: function(query, passedArguments, context) {
           var
-                flv         = $element.data(metadata.flv)         || false,
+            maxDepth,
-                source      = $element.data(metadata.source)      || false,
+            found
-                placeholder = $element.data(metadata.placeholder) || false
+          ;
-              ;
+          passedArguments = passedArguments || queryArguments;
-              if(flv && source) {
+          context         = element         || context;
-                $video
+          if(typeof query == 'string' && instance !== undefined) {
-                  .data(metadata.source, source)
+            query    = query.split(/[\. ]/);
-                  .data(metadata.flv, flv)
+            maxDepth = query.length - 1;
-                ;
+            $.each(query, function(depth, value) {
-                if(settings.showPlaceholder) {
+              if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
-                  $video
+                instance = instance[value];
-                    .removeClass(className.active)
+              }
-                    .find($.fn.video.selector.placeholder)
+              else if( instance[value] !== undefined ) {
-                      .attr('src', placeholder)
+                found = instance[value];
-                  ;
               }
               else {
-                  try {
+                module.error(error.method);
-                    $video
-                      .video('play')
-                    ;
               }
-                  catch(error) {
+            });
-                    console.warn('Video Playlist Module: ' + settings.error.init);
           }
+          if ( $.isFunction( found ) ) {
+            return found.apply(context, passedArguments);
           }
-                $allModules
+          return found || false;
-                  .removeClass(className.active)
-                ;
-                $element
-                  .addClass(className.active)
-                ;
         }
+      };
+
+      if(methodInvoked) {
+        if(instance === undefined) {
+          module.initialize();
         }
+        invokedResponse = module.invoke(query);
+      }
+      else {
+        if(instance !== undefined) {
+          module.destroy();
         }
-        ;
         module.initialize();
+      }
     })
   ;
 
-    if(settings.playFirst) {
+  return (invokedResponse)
-      $allModules
+    ? invokedResponse
-        .eq(0)
+    : this
-        .trigger('click')
-      ;
-      // we all like a good hack
-      if($iframe.size() > 0) {
-        $iframe
-          .attr('src', $iframe.attr('src').replace('autoplay=1', 'autoplay=0') )
   ;
-      }
+};
-
-    }
-
-  };
 
-  $.fn.video.settings = {
+$.fn.video.settings = {
 
   moduleName  : 'Video',
   namespace   : 'video',
-    debug       : false,
+
+  debug       : true,
+  verbose     : true,
+  performance : true,
+  
 
   metadata    : {
     source : 'source',
-      flv         : 'flv'
+    id     : 'id',
+    url    : 'url'
   },
   
   onPlay   : function(){},
@@ -336,9 +394,8 @@
   onChange : function(){},
   
   // callbacks not coded yet (needs to use jsapi)
-    play        : function() {},
+  onPause  : function() {},
-    pause       : function() {},
+  onStop   : function() {},
-    stop        : function() {},
   
   width    : 'auto',
   height   : 'auto',
@@ -349,7 +406,8 @@
   showUI   : false,
   api      : true,
   
-    errors      : {
+  error      : {
+    noVideo     : 'No video specified',
     method      : 'The method you called is not defined'
   },
   
@@ -362,30 +420,7 @@
     placeholder : '.placeholder',
     playButton  : '.play'
   }
-  };
+};
-
-  $.fn.videoPlaylist.settings = {
-    moduleName      : 'Video Playlist',
-    namespace       : 'videoPlaylist',
-
-    source          : 'vimeo',
-    showPlaceholder : false,
-    playFirst       : true,
-
-    metadata: {
-      flv         : 'flv',
-      source      : 'source',
-      placeholder : 'placeholder'
-    },
-
-    errors: {
-      init   : 'The video player you specified was not yet initialized'
-    },
-
-    className : {
-      active  : 'active'
-    }
 
-  };
 
 })( jQuery, window , document );

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

@@ -338,7 +338,7 @@
   visibility: visible;
 }
 /*******************************
-          Variations
+             Types
 *******************************/
 /*--------------
     Vertical
@@ -475,32 +475,41 @@
   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
@@ -524,161 +533,190 @@
   background-color: rgba(0, 0, 0, 0.05);
 }
 /*--------------
-    Inverted
+   Secondary
 ---------------*/
-.ui.inverted.menu {
+.ui.secondary.menu {
-  background-color: #333333;
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
   box-shadow: none;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
 }
-.ui.inverted.menu .header.item {
+.ui.secondary.menu > .item {
-  margin: 0em;
-  background-color: rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
+  border: none;
+  min-height: 0em !important;
+  margin: 0em 0.25em;
+  padding: 0.5em 1em;
+  -webkit-border-radius: 0.3125em;
+  -moz-border-radius: 0.3125em;
+  border-radius: 0.3125em;
 }
-.ui.inverted.menu .item,
+.ui.secondary.menu > .item:before {
-.ui.inverted.menu .item > a {
+  display: none !important;
-  color: #FFFFFF;
 }
-.ui.inverted.menu .item .item,
+.ui.secondary.menu .link.item,
-.ui.inverted.menu .item .item > a {
+.ui.secondary.menu a.item {
-  color: rgba(255, 255, 255, 0.8);
+  color: rgba(0, 0, 0, 0.4);
 }
-.ui.inverted.menu .item .item > a:hover {
+.ui.secondary.menu .header.item {
-  background-color: rgba(255, 255, 255, 0.03);
+  background-color: transparent;
-  color: rgba(255, 255, 255, 0.9);
+  border-right: 0.1em solid rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
 }
-.ui.inverted.menu .item > p:only-child {
+/* active */
-  color: rgba(255, 255, 255, 0.75);
+.ui.secondary.menu > .active.item {
+  border-top: none;
+  padding-top: 0.5em;
+  background-color: rgba(0, 0, 0, 0.08);
+  color: rgba(0, 0, 0, 0.8);
 }
-.ui.inverted.menu .dropdown.item .menu .item,
+.ui.secondary.vertical.menu > .active.item {
-.ui.inverted.menu .dropdown.item .menu .item a {
+  -webkit-border-radius: 0.3125em;
-  color: rgba(0, 0, 0, 0.75) !important;
+  -moz-border-radius: 0.3125em;
+  border-radius: 0.3125em;
 }
-.ui.inverted.menu .item.disabled,
+.ui.secondary.inverted.menu > .active.item {
-.ui.inverted.menu .item.disabled:hover,
+  background-color: rgba(255, 255, 255, 0.2);
-.ui.inverted.menu .item.disabled.hover {
-  color: rgba(255, 255, 255, 0.2);
 }
-/*--- Border ---*/
+/* disable variations */
-.ui.inverted.menu .item:before {
+.ui.secondary.item.menu > .item {
-  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%);
+  margin: 0em;
-  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 {
+.ui.secondary.attached.menu {
-  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%);
+  -webkit-box-shadow: none;
-  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%);
+  -moz-box-shadow: none;
-  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%);
+  box-shadow: none;
-  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,
+   Secondary Pointing
-.ui.inverted.menu .item.hover,
+-----------------------*/
-.ui.inverted.menu .link.item:hover,
+.ui.secondary.pointing.menu {
-.ui.inverted.menu a.item:hover,
+  border-bottom: 3px solid rgba(0, 0, 0, 0.1);
-.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.secondary.pointing.menu > .item {
-.ui.inverted.menu .item.hover,
+  margin: 0em 0em -3px;
-.ui.inverted.menu .item > a:hover,
+  padding: 0.6em 0.95em;
-.ui.inverted.menu .item .menu a.item:hover,
+  border-bottom: 3px solid rgba(0, 0, 0, 0);
-.ui.inverted.menu .item .menu a.item.hover,
+  -webkit-border-radius: 0em;
-.ui.inverted.menu .item .menu .link.item:hover,
+  -moz-border-radius: 0em;
-.ui.inverted.menu .item .menu .link.item.hover {
+  border-radius: 0em;
-  color: #ffffff;
+  -webkit-transition: color 0.2s
+  ;
+  -moz-transition: color 0.2s
+  ;
+  -o-transition: color 0.2s
+  ;
+  -ms-transition: color 0.2s
+  ;
+  transition: color 0.2s
+  ;
 }
-/*--- Down ---*/
+.ui.secondary.pointing.menu > .item:after {
-.ui.inverted.menu .item.down,
+  display: none;
-.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 ---*/
+/* Hover */
-.ui.inverted.menu .active.item {
+.ui.secondary.pointing.menu > .item.hover,
-  border-color: transparent !important;
+.ui.secondary.pointing.menu > .item:hover {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: transparent;
+  color: rgba(0, 0, 0, 0.7);
 }
-.ui.inverted.menu .active.item,
+/* Down */
-.ui.inverted.menu .active.item a {
+.ui.secondary.pointing.menu > .item:active,
-  color: #ffffff;
+.ui.secondary.pointing.menu > .item.down {
+  background-color: transparent;
+  border-color: rgba(0, 0, 0, 0.2);
 }
-.ui.inverted.vertical.menu .item .menu .active.item {
+/* Active */
-  background-color: rgba(255, 255, 255, 0.2);
+.ui.secondary.pointing.menu > .item.active {
-  color: #ffffff;
+  background-color: transparent;
+  border-color: rgba(0, 0, 0, 0.4);
 }
-/*--- Pointers ---*/
+/*---------------------
-.ui.inverted.pointing.menu .active.item:after {
+   Secondary Vertical
-  background-color: #505050;
+-----------------------*/
-  box-shadow: none;
+.ui.secondary.vertical.pointing.menu {
+  border: none;
+  border-right: 3px solid rgba(0, 0, 0, 0.1);
 }
-.ui.inverted.pointing.menu .active.item:hover:after {
+.ui.secondary.vertical.menu > .item {
-  background-color: #3B3B3B;
+  border: none;
+  margin: 0em 0em 0.3em;
+  padding: 0.6em 0.8em;
+  -webkit-border-radius: 0.1875em;
+  -moz-border-radius: 0.1875em;
+  border-radius: 0.1875em;
 }
-/*--------------
+.ui.secondary.vertical.menu > .header.item {
-     Floated
+  -webkit-border-radius: 0em;
----------------*/
+  -moz-border-radius: 0em;
-.ui.floated.menu {
+  border-radius: 0em;
-  float: left;
-  margin: 0rem 0.5rem 0rem 0rem;
 }
-.ui.right.floated.menu {
+.ui.secondary.vertical.pointing.menu > .item {
-  float: right;
+  margin: 0em -3px 0em 0em;
-  margin: 0rem 0rem 0rem 0.5rem;
+  border-bottom: none;
+  border-right: 3px solid transparent;
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
+}
+/* Hover */
+.ui.secondary.vertical.pointing.menu > .item.hover,
+.ui.secondary.vertical.pointing.menu > .item:hover {
+  background-color: transparent;
+  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 Colors
+    Inverted
 ---------------*/
-/*--- Light Colors  ---*/
+.ui.secondary.inverted.menu {
-.ui.grey.menu {
+  background-color: transparent;
-  background-color: #F0F0F0;
 }
-/*--- Inverted Colors  ---*/
+.ui.secondary.inverted.pointing.menu {
-.ui.inverted.green.menu {
+  border-bottom: 3px solid rgba(255, 255, 255, 0.1);
-  background-color: #A1CF64;
 }
-.ui.inverted.green.pointing.menu .active.item:after {
+.ui.secondary.inverted.pointing.menu > .item {
-  background-color: #A1CF64;
+  color: rgba(255, 255, 255, 0.7);
-}
-.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 {
+/* Hover */
-  background-color: #F05940;
+.ui.secondary.inverted.pointing.menu > .item.hover,
+.ui.secondary.inverted.pointing.menu > .item:hover {
+  color: rgba(255, 255, 255, 0.85);
 }
-.ui.inverted.orange.pointing.menu .active.item:after {
+/* Down */
-  background-color: #F05940;
+.ui.secondary.inverted.pointing.menu > .item:active,
+.ui.secondary.inverted.pointing.menu > .item.down {
+  border-color: rgba(255, 255, 255, 0.4) !important;
 }
-.ui.inverted.teal.menu {
+/* Active */
-  background-color: #00B5AD;
+.ui.secondary.inverted.pointing.menu > .item.active {
+  border-color: rgba(255, 255, 255, 0.8) !important;
+  color: #ffffff;
 }
-.ui.inverted.teal.pointing.menu .active.item:after {
+/*---------------------
-  background-color: #00B5AD;
+   Inverted Vertical
+----------------------*/
+.ui.secondary.inverted.vertical.pointing.menu {
+  border-right: 3px solid rgba(255, 255, 255, 0.1);
+  border-bottom: none;
 }
 /*--------------
     Text Menu
@@ -802,236 +840,236 @@
   color: #00B5AD;
 }
 /*--------------
-   Secondary
+    Icon Only
 ---------------*/
-.ui.secondary.menu {
+.ui.icon.menu,
-  background-color: transparent;
+.ui.vertical.icon.menu {
-  -webkit-box-shadow: none;
+  width: auto;
-  -moz-box-shadow: none;
+  display: inline-block;
-  box-shadow: none;
+  min-height: 0em;
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
-  border-radius: 0px;
 }
-.ui.secondary.menu > .item {
+.ui.icon.menu .item {
-  -webkit-box-shadow: none;
+  text-align: center;
-  -moz-box-shadow: none;
+  color: rgba(60, 60, 60, 0.7);
-  box-shadow: none;
-  border: none;
-  min-height: 0em !important;
-  margin: 0em 0.25em;
-  padding: 0.5em 1em;
-  -webkit-border-radius: 0.3125em;
-  -moz-border-radius: 0.3125em;
-  border-radius: 0.3125em;
 }
-.ui.secondary.menu > .item:before {
+.ui.icon.menu .item .icon {
-  display: none !important;
+  display: block;
+  float: none;
+  opacity: 1;
+  margin: 0em auto;
 }
-.ui.secondary.menu .link.item,
+.ui.icon.menu .icon:before {
-.ui.secondary.menu a.item {
+  opacity: 1;
-  color: rgba(0, 0, 0, 0.4);
 }
-.ui.secondary.menu .header.item {
+/* Item Icon Only */
-  background-color: transparent;
+.ui.menu .icon.item .icon {
-  border-right: 0.1em solid rgba(0, 0, 0, 0.1);
+  margin: 0em;
-  -webkit-border-radius: 0em;
-  -moz-border-radius: 0em;
-  border-radius: 0em;
 }
-/* active */
+/*--- inverted ---*/
-.ui.secondary.menu > .active.item {
+.ui.inverted.icon.menu .item {
-  border-top: none;
+  color: rgba(255, 255, 255, 0.8);
-  padding-top: 0.5em;
-  background-color: rgba(0, 0, 0, 0.08);
-  color: rgba(0, 0, 0, 0.8);
 }
-.ui.secondary.vertical.menu > .active.item {
+.ui.inverted.icon.menu .icon {
-  -webkit-border-radius: 0.3125em;
+  color: #ffffff;
-  -moz-border-radius: 0.3125em;
-  border-radius: 0.3125em;
 }
-.ui.secondary.inverted.menu > .active.item {
+/*--------------
-  background-color: rgba(255, 255, 255, 0.2);
+   Labeled Icon
+---------------*/
+.ui.labeled.icon.menu {
+  text-align: center;
 }
-/* disable variations */
+.ui.labeled.icon.menu .icon {
-.ui.secondary.item.menu > .item {
+  display: block;
-  margin: 0em;
+  font-size: 1.5em;
+  margin: 0em auto 0.3em;
 }
-.ui.secondary.attached.menu {
+/*******************************
+           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,
-   Secondary Pointing
+.ui.inverted.menu .item > a {
------------------------*/
+  color: #FFFFFF;
-.ui.secondary.pointing.menu {
-  border-bottom: 3px solid rgba(0, 0, 0, 0.1);
 }
-.ui.secondary.pointing.menu > .item {
+.ui.inverted.menu .item .item,
-  margin: 0em 0em -3px;
+.ui.inverted.menu .item .item > a {
-  padding: 0.6em 0.95em;
+  color: rgba(255, 255, 255, 0.8);
-  border-bottom: 3px solid rgba(0, 0, 0, 0);
-  -webkit-border-radius: 0em;
-  -moz-border-radius: 0em;
-  border-radius: 0em;
-  -webkit-transition: color 0.2s
-  ;
-  -moz-transition: color 0.2s
-  ;
-  -o-transition: color 0.2s
-  ;
-  -ms-transition: color 0.2s
-  ;
-  transition: color 0.2s
-  ;
 }
-.ui.secondary.pointing.menu > .item:after {
+.ui.inverted.menu .item .item > a:hover {
-  display: none;
+  background-color: rgba(255, 255, 255, 0.03);
+  color: rgba(255, 255, 255, 0.9);
 }
-/* Hover */
+.ui.inverted.menu .item > p:only-child {
-.ui.secondary.pointing.menu > .item.hover,
+  color: rgba(255, 255, 255, 0.75);
-.ui.secondary.pointing.menu > .item:hover {
-  background-color: transparent;
-  color: rgba(0, 0, 0, 0.7);
 }
-/* Down */
+.ui.inverted.menu .dropdown.item .menu .item,
-.ui.secondary.pointing.menu > .item:active,
+.ui.inverted.menu .dropdown.item .menu .item a {
-.ui.secondary.pointing.menu > .item.down {
+  color: rgba(0, 0, 0, 0.75) !important;
-  background-color: transparent;
-  border-color: rgba(0, 0, 0, 0.2);
 }
-/* Active */
+.ui.inverted.menu .item.disabled,
-.ui.secondary.pointing.menu > .item.active {
+.ui.inverted.menu .item.disabled:hover,
-  background-color: transparent;
+.ui.inverted.menu .item.disabled.hover {
-  border-color: rgba(0, 0, 0, 0.4);
+  color: rgba(255, 255, 255, 0.2);
 }
-/*------- Vertical------- */
+/*--- Border ---*/
-.ui.secondary.vertical.pointing.menu {
+.ui.inverted.menu .item:before {
-  border: none;
+  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%);
-  border-right: 3px solid rgba(0, 0, 0, 0.1);
+  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.secondary.vertical.menu > .item {
+.ui.vertical.inverted.menu .item:before {
-  border: none;
+  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%);
-  margin: 0em 0em 0.3em;
+  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%);
-  padding: 0.6em 0.8em;
+  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%);
-  -webkit-border-radius: 0.1875em;
+  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%);
-  -moz-border-radius: 0.1875em;
+  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%);
-  border-radius: 0.1875em;
 }
-.ui.secondary.vertical.menu > .header.item {
+/*--- Hover ---*/
-  -webkit-border-radius: 0em;
+.ui.link.inverted.menu .item:hover,
-  -moz-border-radius: 0em;
+.ui.inverted.menu .item.hover,
-  border-radius: 0em;
+.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.secondary.vertical.pointing.menu > .item {
+.ui.inverted.menu a.item:hover,
-  margin: 0em -3px 0em 0em;
+.ui.inverted.menu .item.hover,
-  border-bottom: none;
+.ui.inverted.menu .item > a:hover,
-  border-right: 3px solid transparent;
+.ui.inverted.menu .item .menu a.item:hover,
-  -webkit-border-radius: 0em;
+.ui.inverted.menu .item .menu a.item.hover,
-  -moz-border-radius: 0em;
+.ui.inverted.menu .item .menu .link.item:hover,
-  border-radius: 0em;
+.ui.inverted.menu .item .menu .link.item.hover {
+  color: #ffffff;
 }
-/* Hover */
+/*--- Down ---*/
-.ui.secondary.vertical.pointing.menu > .item.hover,
+.ui.inverted.menu .item.down,
-.ui.secondary.vertical.pointing.menu > .item:hover {
+.ui.inverted.menu a.item:active,
-  background-color: transparent;
+.ui.inverted.menu .item > a:active,
-  color: rgba(0, 0, 0, 0.7);
+.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);
 }
-/* Down */
+/*--- Active ---*/
-.ui.secondary.vertical.pointing.menu > .item:active,
+.ui.inverted.menu .active.item {
-.ui.secondary.vertical.pointing.menu > .item.down {
+  border-color: transparent !important;
-  background-color: transparent;
+  background-color: rgba(255, 255, 255, 0.2);
-  border-color: rgba(0, 0, 0, 0.2);
 }
-/* Active */
+.ui.inverted.menu .active.item,
-.ui.secondary.vertical.pointing.menu > .item.active {
+.ui.inverted.menu .active.item a {
-  background-color: transparent;
+  color: #ffffff;
-  border-color: rgba(0, 0, 0, 0.4);
-  color: rgba(0, 0, 0, 0.85);
 }
-/*------- Inverted------- */
+.ui.inverted.vertical.menu .item .menu .active.item {
-.ui.secondary.inverted.pointing.menu {
+  background-color: rgba(255, 255, 255, 0.2);
-  border-bottom: 3px solid rgba(255, 255, 255, 0.1);
+  color: #ffffff;
 }
-.ui.secondary.inverted.pointing.menu > .item {
+/*--- Pointers ---*/
-  color: rgba(255, 255, 255, 0.7);
+.ui.inverted.pointing.menu .active.item:after {
+  background-color: #505050;
+  box-shadow: none;
 }
-/* Hover */
+.ui.inverted.pointing.menu .active.item:hover:after {
-.ui.secondary.inverted.pointing.menu > .item.hover,
+  background-color: #3B3B3B;
-.ui.secondary.inverted.pointing.menu > .item:hover {
-  color: rgba(255, 255, 255, 0.85);
 }
-/* Down */
+/*--------------
-.ui.secondary.inverted.pointing.menu > .item:active,
+     Floated
-.ui.secondary.inverted.pointing.menu > .item.down {
+---------------*/
-  border-color: rgba(255, 255, 255, 0.4);
+.ui.floated.menu {
+  float: left;
+  margin: 0rem 0.5rem 0rem 0rem;
 }
-/* Active */
+.ui.right.floated.menu {
-.ui.secondary.inverted.pointing.menu > .item.active {
+  float: right;
-  border-color: rgba(255, 255, 255, 0.8);
+  margin: 0rem 0rem 0rem 0.5rem;
-  color: #ffffff;
 }
 /*--------------
- Inverted Sec
+ Inverted Colors
 ---------------*/
-.ui.secondary.inverted.vertical.pointing.menu {
+/*--- Light Colors  ---*/
-  border-right: 3px solid rgba(255, 255, 255, 0.1);
+.ui.grey.menu {
-  border-bottom: none;
+  background-color: #F0F0F0;
 }
-/* Down */
+/*--- Inverted Colors  ---*/
-.ui.secondary.inverted.vertical.pointing.menu .item:active,
+.ui.inverted.green.menu {
-.ui.secondary.inverted.vertical.pointing.menu .item.down {
+  background-color: #A1CF64;
-  box-shadow: 0.2em 0em 0em 0em rgba(255, 255, 255, 0.2);
 }
-/* Active */
+.ui.inverted.green.pointing.menu .active.item:after {
-.ui.secondary.inverted.vertical.pointing.menu .item.active {
+  background-color: #A1CF64;
-  box-shadow: 0.2em 0em 0em 0em rgba(255, 255, 255, 0.4);
 }
-/*--------------
+.ui.inverted.red.menu {
-    Icon Only
+  background-color: #EF4D6D;
----------------*/
-.ui.icon.menu,
-.ui.vertical.icon.menu {
-  width: auto;
-  display: inline-block;
-  min-height: 0em;
 }
-.ui.icon.menu .item {
+.ui.inverted.red.pointing.menu .active.item:after {
-  text-align: center;
+  background-color: #F16883;
-  color: rgba(60, 60, 60, 0.7);
 }
-.ui.icon.menu .item .icon {
+.ui.inverted.blue.menu {
-  display: block;
+  background-color: #6ECFF5;
-  float: none;
-  opacity: 1;
-  margin: 0em auto;
 }
-.ui.icon.menu .icon:before {
+.ui.inverted.blue.pointing.menu .active.item:after {
-  opacity: 1;
+  background-color: #6ECFF5;
 }
-/* Item Icon Only */
+.ui.inverted.purple.menu {
-.ui.menu .icon.item .icon {
+  background-color: #564F8A;
-  margin: 0em;
 }
-/*--- inverted ---*/
+.ui.inverted.purple.pointing.menu .active.item:after {
-.ui.inverted.icon.menu .item {
+  background-color: #564F8A;
-  color: rgba(255, 255, 255, 0.8);
 }
-.ui.inverted.icon.menu .icon {
+.ui.inverted.orange.menu {
-  color: #ffffff;
+  background-color: #F05940;
 }
-/*--------------
+.ui.inverted.orange.pointing.menu .active.item:after {
-   Labeled Icon
+  background-color: #F05940;
----------------*/
-.ui.labeled.icon.menu {
-  text-align: center;
 }
-.ui.labeled.icon.menu .icon {
+.ui.inverted.teal.menu {
-  display: block;
+  background-color: #00B5AD;
-  font-size: 1.5em;
+}
-  margin: 0em auto 0.3em;
+.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,12 +11,24 @@
 
 ;(function ($, window, document, undefined) {
 
-  $.fn.video = function(parameters) {
+$.fn.video = function(parameters) {
 
   var
-      settings = $.extend(true, {}, $.fn.video.settings, parameters),
+    $allModules     = $(this),
-      // make arguments available
+
-      moduleArguments = arguments || false,
+    settings        = ( $.isPlainObject(parameters) )
+      ? $.extend(true, {}, $.fn.video.settings, parameters)
+      : $.fn.video.settings,
+
+    moduleSelector  = $allModules.selector || '',
+
+    time            = new Date().getTime(),
+    performance     = [],
+
+    query           = arguments[0],
+    methodInvoked   = (typeof query == 'string'),
+    queryArguments  = [].slice.call(arguments, 1),
+
     invokedResponse
   ;
 
@@ -28,14 +40,17 @@
         $playButton  = $module.find(settings.selector.playButton),
         $embed       = $module.find(settings.selector.embed),
         
-          element       = this,
+        eventNamespace  = '.' + settings.namespace,
-          instance      = $module.data('module-' + settings.namespace),
+        moduleNamespace = settings.namespace + '-module', 
-          methodInvoked = (typeof parameters == 'string'),
 
-          namespace    = settings.namespace,
+        selector        = settings.selector,
-          metadata     = settings.metadata,
         className       = settings.className,
+        error           = settings.error,
+        metadata        = settings.metadata,
+        namespace       = settings.namespace,
         
+        element         = this,
+        instance        = $module.data(moduleNamespace),
         module
       ;
 
@@ -44,24 +59,36 @@
         initialize: function() {
           module.debug('Initializing video');
           $placeholder
-              .off('.video')
+            .on('click' + eventNamespace, module.play)
-              .on('click.' + namespace, module.play)
           ;
           $playButton
-              .off('.video')
+            .on('click' + eventNamespace, module.play)
-              .on('click.' + namespace, module.play)
+          ;
+          module.instantiate();
+        },
+
+        instantiate: function() {
+          instance = module;
+          $module
+            .data(moduleNamespace, module)
           ;
+        },
+
+        destroy: function() {
+          module.verbose('Destroying previous instance of video');
           $module
-              .data('module-' + namespace, module)
+            .removeData(moduleNamespace)
+            .off(eventNamespace)
           ;
         },
 
         // sets new video
-          change: function(source, flv) {
+        change: function(source, id, url) {
-            module.debug('Changing video to ', flv);
+          module.debug('Changing video to ', source, id, url);
           $module
             .data(metadata.source, source)
-              .data(metadata.flv, flv)
+            .data(metadata.id, id)
+            .data(metadata.url, url)
           ;
           settings.onChange();
         },
@@ -85,11 +112,12 @@
         play: function() {
           module.debug('Playing video');
           var
-              source = $module.data(metadata.source),
+            source = $module.data(metadata.source) || false, 
-              flv    = $module.data(metadata.flv)
+            url    = $module.data(metadata.url)    || false,
+            id     = $module.data(metadata.id)     || false
           ;
           $embed
-              .html( module.generate.html(source, flv) )
+            .html( module.generate.html(source, id, url) )
           ;
           $module
             .addClass(className.active)
@@ -99,7 +127,7 @@
 
         generate: {
           // generates iframe html
-            html: function(source, flv) {
+          html: function(source, id, url) {
             module.debug('Generating embed html');
             var
               width = (settings.width == 'auto')
@@ -110,20 +138,32 @@
                 : settings.height,
               html
             ;
+            if(source && id) {
               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>'
+                ;
+              }
+            }
+            else if(url) {
+              html = ''
+                + '<iframe src="' + url + '"'
                 + ' width="' + width + '" height="' + height + '"'
                 + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
               ;
             }
+            else {
+              module.error(error.noVideo);
+            }
             return html;
           },
 
@@ -160,6 +200,14 @@
                 url += '&amp;color=' + settings.color;
               }
             }
+            if(source == 'ustream') {
+              url = ''
+                + 'autoplay=' + autoplay
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
+              }
+            }
             else if(source == 'youtube') {
               url = ''
                 +      'enablejsapi=' + api
@@ -176,159 +224,169 @@
           }
         },
 
-          /* standard module */
+        setting: function(name, value) {
-          debug: function(message, variableName) {
+          if(value !== undefined) {
-            if(settings.debug) {
+            if( $.isPlainObject(name) ) {
-              if(variableName !== undefined) {
+              $.extend(true, settings, name);
-                console.info(settings.moduleName + ': ' + message, variableName);
             }
             else {
-                console.info(settings.moduleName + ': ' + message);
+              settings[name] = value;
+            }
           }
+          else {
+            return settings[name];
           }
         },
-          error: function(errorMessage) {
+        internal: function(name, value) {
-            console.warn(settings.moduleName + ': ' + errorMessage);
+          if(value !== undefined) {
+            if( $.isPlainObject(name) ) {
+              $.extend(true, module, name);
+            }
+            else {
+              module[name] = value;
+            }
+          }
+          else {
+            return module[name];
+          }
         },
-          invoke: function(methodName, context, methodArguments) {
+        debug: function() {
-            var
+          if(settings.debug) {
-              method
+            if(settings.performance) {
-            ;
+              module.performance.log(arguments);
-            methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 );
-            if(typeof methodName == 'string' && instance !== undefined) {
-              methodName = methodName.split('.');
-              $.each(methodName, function(index, name) {
-                if( $.isPlainObject( instance[name] ) ) {
-                  instance = instance[name];
-                  return true;
-                }
-                else if( $.isFunction( instance[name] ) ) {
-                  method = instance[name];
-                  return true;
-                }
-                module.error(settings.errors.method);
-                return false;
-              });
             }
-            if ( $.isFunction( method ) ) {
+            else {
-              return method.apply(context, methodArguments);
+              module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
             }
-            // return retrieved variable or chain
-            return method;
           }
-        };
+        },
-        // check for invoking internal method
+        verbose: function() {
-        if(methodInvoked) {
+          if(settings.verbose && settings.debug) {
-          invokedResponse = module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) );
+            if(settings.performance) {
+              module.performance.log(arguments);
             }
-        // otherwise initialize
             else {
-          if(instance) {
+              module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
-            module.destroy();
             }
-          module.initialize();
           }
-
+        },
-      })
+        error: function() {
-    ;
+          module.error = Function.prototype.bind.call(console.warn, console, settings.moduleName + ':');
-    // chain or return queried method
+        },
-    return (invokedResponse !== undefined)
+        performance: {
-      ? invokedResponse
+          log: function(message) {
-      : this
-    ;
-  };
-
-
-  $.fn.videoPlaylist = function(video, parameters) {
             var
-      $allModules = $(this),
+              currentTime,
-      $video      = $(video),
+              executionTime,
-      $iframe     = $video.find('.embed iframe'),
+              previousTime
-
+            ;
-      settings    = $.extend({}, $.fn.videoPlaylist.settings, parameters, true)
+            if(settings.performance) {
-    ;
+              currentTime   = new Date().getTime();
-    $allModules
+              previousTime  = time || currentTime,
-      .each(function() {
+              executionTime = currentTime - previousTime;
+              time          = currentTime;
+              performance.push({
+                'Element'        : element,
+                'Name'           : message[0],
+                'Arguments'      : [].slice.call(message, 1) || '',
+                'Execution Time' : executionTime
+              });
+            }
+            clearTimeout(module.performance.timer);
+            module.performance.timer = setTimeout(module.performance.display, 100);
+          },
+          display: function() {
             var
-          $element    = $(this),
+              title = settings.moduleName + ':',
-
+              totalTime = 0
-          metadata    = settings.metadata,
-          namespace   = settings.namespace,
-          className   = settings.className,
-
-          module       = {
-            initialize: function() {
-              $element
-                .on('click.' + namespace , module.changeVideo)
             ;
+            time        = false;
+            $.each(performance, function(index, data) {
+              totalTime += data['Execution Time'];
+            });
+            title += ' ' + totalTime + 'ms';
+            if(moduleSelector) {
+              title += ' \'' + moduleSelector + '\'';
+            }
+            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+              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 = [];
+          }
         },
-            changeVideo: function() {
+        invoke: function(query, passedArguments, context) {
           var
-                flv         = $element.data(metadata.flv)         || false,
+            maxDepth,
-                source      = $element.data(metadata.source)      || false,
+            found
-                placeholder = $element.data(metadata.placeholder) || false
+          ;
-              ;
+          passedArguments = passedArguments || queryArguments;
-              if(flv && source) {
+          context         = element         || context;
-                $video
+          if(typeof query == 'string' && instance !== undefined) {
-                  .data(metadata.source, source)
+            query    = query.split(/[\. ]/);
-                  .data(metadata.flv, flv)
+            maxDepth = query.length - 1;
-                ;
+            $.each(query, function(depth, value) {
-                if(settings.showPlaceholder) {
+              if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
-                  $video
+                instance = instance[value];
-                    .removeClass(className.active)
+              }
-                    .find($.fn.video.selector.placeholder)
+              else if( instance[value] !== undefined ) {
-                      .attr('src', placeholder)
+                found = instance[value];
-                  ;
               }
               else {
-                  try {
+                module.error(error.method);
-                    $video
-                      .video('play')
-                    ;
               }
-                  catch(error) {
+            });
-                    console.warn('Video Playlist Module: ' + settings.error.init);
           }
+          if ( $.isFunction( found ) ) {
+            return found.apply(context, passedArguments);
           }
-                $allModules
+          return found || false;
-                  .removeClass(className.active)
-                ;
-                $element
-                  .addClass(className.active)
-                ;
         }
+      };
+
+      if(methodInvoked) {
+        if(instance === undefined) {
+          module.initialize();
         }
+        invokedResponse = module.invoke(query);
+      }
+      else {
+        if(instance !== undefined) {
+          module.destroy();
         }
-        ;
         module.initialize();
+      }
     })
   ;
 
-    if(settings.playFirst) {
+  return (invokedResponse)
-      $allModules
+    ? invokedResponse
-        .eq(0)
+    : this
-        .trigger('click')
-      ;
-      // we all like a good hack
-      if($iframe.size() > 0) {
-        $iframe
-          .attr('src', $iframe.attr('src').replace('autoplay=1', 'autoplay=0') )
   ;
-      }
+};
-
-    }
-
-  };
 
-  $.fn.video.settings = {
+$.fn.video.settings = {
 
   moduleName  : 'Video',
   namespace   : 'video',
-    debug       : false,
+
+  debug       : true,
+  verbose     : true,
+  performance : true,
+  
 
   metadata    : {
     source : 'source',
-      flv         : 'flv'
+    id     : 'id',
+    url    : 'url'
   },
   
   onPlay   : function(){},
@@ -336,9 +394,8 @@
   onChange : function(){},
   
   // callbacks not coded yet (needs to use jsapi)
-    play        : function() {},
+  onPause  : function() {},
-    pause       : function() {},
+  onStop   : function() {},
-    stop        : function() {},
   
   width    : 'auto',
   height   : 'auto',
@@ -349,7 +406,8 @@
   showUI   : false,
   api      : true,
   
-    errors      : {
+  error      : {
+    noVideo     : 'No video specified',
     method      : 'The method you called is not defined'
   },
   
@@ -362,30 +420,7 @@
     placeholder : '.placeholder',
     playButton  : '.play'
   }
-  };
+};
-
-  $.fn.videoPlaylist.settings = {
-    moduleName      : 'Video Playlist',
-    namespace       : 'videoPlaylist',
-
-    source          : 'vimeo',
-    showPlaceholder : false,
-    playFirst       : true,
-
-    metadata: {
-      flv         : 'flv',
-      source      : 'source',
-      placeholder : 'placeholder'
-    },
-
-    errors: {
-      init   : 'The video player you specified was not yet initialized'
-    },
-
-    className : {
-      active  : 'active'
-    }
 
-  };
 
 })( 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/collections/menu.less

@@ -449,7 +449,7 @@
 
 
 /*******************************
-          Variations
+             Types
 *******************************/
 
 /*--------------
@@ -622,34 +622,50 @@
   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;
-.ui.menu .red.active.item,
+  -moz-box-shadow: none;
-.ui.red.menu .active.item {
+  box-shadow: none;
-  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.teal.menu .active.item {
+.ui.tabular.menu .active.item {
-  border-color: #00B5AD !important;
+  position: relative;
+  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;
 }
 
 /*--------------
@@ -677,228 +693,230 @@
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-
 /*--------------
-    Inverted
+   Secondary
 ---------------*/
 
-.ui.inverted.menu {
+.ui.secondary.menu {
-  background-color: #333333;
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
   box-shadow: none;
-}
-.ui.inverted.menu .header.item {
-  margin: 0em;
 
-  background-color: rgba(0, 0, 0, 0.3);
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+}
+.ui.secondary.menu > .item {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
+
+  border: none;
+  min-height: 0em !important;
+
+  margin: 0em 0.25em;
+  padding: 0.5em 1em;
+
+  -webkit-border-radius: 0.3125em;
+  -moz-border-radius: 0.3125em;
+  border-radius: 0.3125em;
+}
+.ui.secondary.menu > .item:before {
+  display: none !important;
 }
 
-.ui.inverted.menu .item,
+.ui.secondary.menu .link.item,
-.ui.inverted.menu .item > a {
+.ui.secondary.menu a.item {
-  color: #FFFFFF;
+  color: rgba(0, 0, 0, 0.4);
 }
-.ui.inverted.menu .item .item,
+
-.ui.inverted.menu .item .item > a {
+.ui.secondary.menu .header.item {
-  color: rgba(255, 255, 255, 0.8);
+  background-color: transparent;
+  border-right: 0.1em solid rgba(0, 0, 0, 0.1);
+
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
 }
-.ui.inverted.menu .item .item > a:hover {
+
-  background-color: rgba(255, 255, 255, 0.03);
+/* active */
-  color: rgba(255, 255, 255, 0.9);
+.ui.secondary.menu > .active.item {
+  border-top: none;
+  padding-top: 0.5em;
+  background-color: rgba(0, 0, 0, 0.08);
+  color: rgba(0, 0, 0, 0.8);
 }
-.ui.inverted.menu .item > p:only-child {
+.ui.secondary.vertical.menu > .active.item {
-  color: rgba(255, 255, 255, 0.75);
+  -webkit-border-radius: 0.3125em;
+  -moz-border-radius: 0.3125em;
+  border-radius: 0.3125em;
 }
-.ui.inverted.menu .dropdown.item .menu .item,
+.ui.secondary.inverted.menu > .active.item {
-.ui.inverted.menu .dropdown.item .menu .item a {
+  background-color: rgba(255, 255, 255, 0.2);
-  color: rgba(0, 0, 0, 0.75) !important;
 }
-.ui.inverted.menu .item.disabled,
+
-.ui.inverted.menu .item.disabled:hover,
+/* disable variations */
-.ui.inverted.menu .item.disabled.hover {
+.ui.secondary.item.menu > .item {
-  color: rgba(255, 255, 255, 0.2);
+  margin: 0em;
+}
+.ui.secondary.attached.menu {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
 
+/*---------------------
+   Secondary Pointing
+-----------------------*/
 
+.ui.secondary.pointing.menu {
+  border-bottom: 3px solid rgba(0, 0, 0, 0.1);
 
-/*--- 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 {
+.ui.secondary.pointing.menu > .item {
-  background-image: -webkit-linear-gradient(left,
+  margin: 0em 0em -3px;
-    rgba(255, 255, 255, 0.03) 0%,
+  padding: 0.6em 0.95em;
-    rgba(255, 255, 255, 0.1) 50%,
+
-    rgba(255, 255, 255, 0.03) 100%)
+  border-bottom: 3px solid rgba(0, 0, 0, 0);
+
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
+
+  -webkit-transition:
+    color 0.2s
   ;
-  background-image: -moz-linear-gradient(left,
+  -moz-transition:
-    rgba(255, 255, 255, 0.03) 0%,
+    color 0.2s
-    rgba(255, 255, 255, 0.1) 50%,
-    rgba(255, 255, 255, 0.03) 100%)
   ;
-  background-image: -o-linear-gradient(left,
+  -o-transition:
-    rgba(255, 255, 255, 0.03) 0%,
+    color 0.2s
-    rgba(255, 255, 255, 0.1) 50%,
-    rgba(255, 255, 255, 0.03) 100%)
   ;
-  background-image: -ms-linear-gradient(left,
+  -ms-transition:
-    rgba(255, 255, 255, 0.03) 0%,
+    color 0.2s
-    rgba(255, 255, 255, 0.1) 50%,
-    rgba(255, 255, 255, 0.03) 100%)
   ;
-  background-image: linear-gradient(left,
+  transition:
-    rgba(255, 255, 255, 0.03) 0%,
+    color 0.2s
-    rgba(255, 255, 255, 0.1) 50%,
-    rgba(255, 255, 255, 0.03) 100%)
   ;
 }
-
+.ui.secondary.pointing.menu > .item:after {
-/*--- Hover ---*/
+  display: none;
-.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: rgba(255, 255, 255, 1);
 }
 
-/*--- Down ---*/
+/* Hover */
-.ui.inverted.menu .item.down,
+.ui.secondary.pointing.menu > .item.hover,
-.ui.inverted.menu a.item:active,
+.ui.secondary.pointing.menu > .item:hover {
-.ui.inverted.menu .item > a:active,
+  background-color: transparent;
-.ui.inverted.menu .item.down,
+  color: rgba(0, 0, 0, 0.7);
-.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 ---*/
+/* Down */
-.ui.inverted.menu .active.item {
+.ui.secondary.pointing.menu > .item:active,
-  border-color: transparent !important;
+.ui.secondary.pointing.menu > .item.down {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: transparent;
-}
+  border-color: rgba(0, 0, 0, 0.2);
-.ui.inverted.menu .active.item,
-.ui.inverted.menu .active.item a {
-  color: rgba(255, 255, 255, 1);
-}
-.ui.inverted.vertical.menu .item .menu .active.item {
-  background-color: rgba(255, 255, 255, 0.2);
-  color: rgba(255, 255, 255, 1);
 }
 
-/*--- Pointers ---*/
+/* Active */
-.ui.inverted.pointing.menu .active.item:after {
+.ui.secondary.pointing.menu > .item.active {
-  background-color: #505050;
+  background-color: transparent;
-  box-shadow: none;
+  border-color: rgba(0, 0, 0, 0.4);
-}
-.ui.inverted.pointing.menu .active.item:hover:after {
-  background-color: #3B3B3B;
 }
 
+/*---------------------
+   Secondary Vertical
+-----------------------*/
 
-/*--------------
+.ui.secondary.vertical.pointing.menu {
-     Floated
+  border: none;
----------------*/
+  border-right: 3px solid rgba(0, 0, 0, 0.1);
+}
+.ui.secondary.vertical.menu > .item {
+  border: none;
+  margin: 0em 0em 0.3em;
+  padding: 0.6em 0.8em;
 
-.ui.floated.menu {
+  -webkit-border-radius: 0.1875em;
-  float: left;
+  -moz-border-radius: 0.1875em;
-  margin: 0rem 0.5rem 0rem 0rem;
+  border-radius: 0.1875em;
 }
-.ui.right.floated.menu {
+.ui.secondary.vertical.menu > .header.item {
-  float: right;
+  -webkit-border-radius: 0em;
-  margin: 0rem 0rem 0rem 0.5rem;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
+}
+.ui.secondary.vertical.pointing.menu > .item {
+  margin: 0em -3px 0em 0em;
+  border-bottom: none;
+  border-right: 3px solid transparent;
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
+}
+/* Hover */
+.ui.secondary.vertical.pointing.menu > .item.hover,
+.ui.secondary.vertical.pointing.menu > .item:hover {
+  background-color: transparent;
+  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 Colors
+    Inverted
 ---------------*/
 
-/*--- Light Colors  ---*/
+.ui.secondary.inverted.menu {
-.ui.grey.menu {
+  background-color: transparent;
-  background-color: #F0F0F0;
 }
 
-/*--- Inverted Colors  ---*/
+.ui.secondary.inverted.pointing.menu {
-.ui.inverted.green.menu {
+  border-bottom: 3px solid rgba(255, 255, 255, 0.1);
-  background-color: #A1CF64;
 }
-.ui.inverted.green.pointing.menu .active.item:after {
+.ui.secondary.inverted.pointing.menu > .item {
-  background-color: #A1CF64;
+  color: rgba(255, 255, 255, 0.7);
 }
 
-.ui.inverted.red.menu {
+/* Hover */
-  background-color: #EF4D6D;
+.ui.secondary.inverted.pointing.menu > .item.hover,
-}
+.ui.secondary.inverted.pointing.menu > .item:hover {
-.ui.inverted.red.pointing.menu .active.item:after {
+  color: rgba(255, 255, 255, 0.85);
-  background-color: #F16883;
 }
 
-.ui.inverted.blue.menu {
+/* Down */
-  background-color: #6ECFF5;
+.ui.secondary.inverted.pointing.menu > .item:active,
-}
+.ui.secondary.inverted.pointing.menu > .item.down {
-.ui.inverted.blue.pointing.menu .active.item:after {
+  border-color: rgba(255, 255, 255, 0.4) !important;
-  background-color: #6ECFF5;
 }
 
-.ui.inverted.purple.menu {
+/* Active */
-  background-color: #564F8A;
+.ui.secondary.inverted.pointing.menu > .item.active {
-}
+  border-color: rgba(255, 255, 255, 0.8) !important;
-.ui.inverted.purple.pointing.menu .active.item:after {
+  color: rgba(255, 255, 255, 1);
-  background-color: #564F8A;
 }
 
-.ui.inverted.orange.menu {
+/*---------------------
-  background-color: #F05940;
+   Inverted Vertical
-}
+----------------------*/
-.ui.inverted.orange.pointing.menu .active.item:after {
-  background-color: #F05940;
-}
 
-.ui.inverted.teal.menu {
+.ui.secondary.inverted.vertical.pointing.menu {
-  background-color: #00B5AD;
+  border-right: 3px solid rgba(255, 255, 255, 0.1);
-}
+  border-bottom: none;
-.ui.inverted.teal.pointing.menu .active.item:after {
-  background-color: #00B5AD;
 }
 
-
 /*--------------
     Text Menu
 ---------------*/
@@ -1041,287 +1059,311 @@
   color: #00B5AD;
 }
 
-
-
-
 /*--------------
-   Secondary
+    Icon Only
 ---------------*/
 
-.ui.secondary.menu {
+.ui.icon.menu,
-  background-color: transparent;
+.ui.vertical.icon.menu {
-  -webkit-box-shadow: none;
+  width: auto;
-  -moz-box-shadow: none;
+  display: inline-block;
-  box-shadow: none;
+  min-height: 0em;
+}
+.ui.icon.menu .item {
+  text-align: center;
+  color: rgba(60, 60, 60, 0.7);
+}
+.ui.icon.menu .item .icon {
+  display: block;
+  float: none;
+  opacity: 1;
+  margin: 0em auto;
+}
+.ui.icon.menu .icon:before {
+  opacity: 1;
+}
 
-  -webkit-border-radius: 0px;
+/* Item Icon Only */
-  -moz-border-radius: 0px;
+.ui.menu .icon.item .icon {
-  border-radius: 0px;
+  margin: 0em;
 }
-.ui.secondary.menu > .item {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
 
-  border: none;
+/*--- inverted ---*/
-  min-height: 0em !important;
+.ui.inverted.icon.menu .item {
+  color: rgba(255, 255, 255, 0.8);
+}
+.ui.inverted.icon.menu .icon {
+  color: rgba(255, 255, 255, 1);
+}
 
-  margin: 0em 0.25em;
+/*--------------
-  padding: 0.5em 1em;
+   Labeled Icon
+---------------*/
 
-  -webkit-border-radius: 0.3125em;
+.ui.labeled.icon.menu {
-  -moz-border-radius: 0.3125em;
+  text-align: center;
-  border-radius: 0.3125em;
 }
-.ui.secondary.menu > .item:before {
+.ui.labeled.icon.menu .icon {
-  display: none !important;
+  display: block;
+  font-size: 1.5em;
+  margin: 0em auto 0.3em;
 }
 
-.ui.secondary.menu .link.item,
-.ui.secondary.menu a.item {
-  color: rgba(0, 0, 0, 0.4);
-}
 
 
-.ui.secondary.menu .header.item {
+/*******************************
-  background-color: transparent;
+           Variations
-  border-right: 0.1em solid rgba(0, 0, 0, 0.1);
+*******************************/
 
-  -webkit-border-radius: 0em;
+/*--------------
-  -moz-border-radius: 0em;
+    Colors
-  border-radius: 0em;
+---------------*/
-}
 
-/* active */
+/*--- Light Colors  ---*/
-.ui.secondary.menu > .active.item {
+.ui.menu .green.active.item,
-  border-top: none;
+.ui.green.menu .active.item {
-  padding-top: 0.5em;
+  border-color: #A1CF64 !important;
-  background-color: rgba(0, 0, 0, 0.08);
-  color: rgba(0, 0, 0, 0.8);
 }
-.ui.secondary.vertical.menu > .active.item {
+.ui.menu .red.active.item,
-  -webkit-border-radius: 0.3125em;
+.ui.red.menu .active.item {
-  -moz-border-radius: 0.3125em;
+  border-color: #EF4D6D !important;
-  border-radius: 0.3125em;
 }
-.ui.secondary.inverted.menu > .active.item {
+.ui.menu .blue.active.item,
-  background-color: rgba(255, 255, 255, 0.2);
+.ui.blue.menu .active.item {
+  border-color: #6ECFF5 !important;
 }
-
+.ui.menu .purple.active.item,
-/* disable variations */
+.ui.purple.menu .active.item {
-.ui.secondary.item.menu > .item {
+  border-color: #564F8A !important;
-  margin: 0em;
 }
-.ui.secondary.attached.menu {
+.ui.menu .orange.active.item,
-  -webkit-box-shadow: none;
+.ui.orange.menu .active.item {
-  -moz-box-shadow: none;
+  border-color: #F05940 !important;
-  box-shadow: none;
+}
+.ui.menu .teal.active.item,
+.ui.teal.menu .active.item {
+  border-color: #00B5AD !important;
 }
 
-/*---------------------
-   Secondary Pointing
------------------------*/
 
-.ui.secondary.pointing.menu {
+/*--------------
-  border-bottom: 3px solid rgba(0, 0, 0, 0.1);
+    Inverted
+---------------*/
 
+.ui.inverted.menu {
+  background-color: #333333;
+  box-shadow: none;
 }
-.ui.secondary.pointing.menu > .item {
+.ui.inverted.menu .header.item {
-  margin: 0em 0em -3px;
+  margin: 0em;
-  padding: 0.6em 0.95em;
 
-  border-bottom: 3px solid rgba(0, 0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
 
-  -webkit-border-radius: 0em;
+.ui.inverted.menu .item,
-  -moz-border-radius: 0em;
+.ui.inverted.menu .item > a {
-  border-radius: 0em;
+  color: #FFFFFF;
-
-  -webkit-transition:
-    color 0.2s
-  ;
-  -moz-transition:
-    color 0.2s
-  ;
-  -o-transition:
-    color 0.2s
-  ;
-  -ms-transition:
-    color 0.2s
-  ;
-  transition:
-    color 0.2s
-  ;
 }
-.ui.secondary.pointing.menu > .item:after {
+.ui.inverted.menu .item .item,
-  display: none;
+.ui.inverted.menu .item .item > a {
+  color: rgba(255, 255, 255, 0.8);
 }
-
+.ui.inverted.menu .item .item > a:hover {
-/* Hover */
+  background-color: rgba(255, 255, 255, 0.03);
-.ui.secondary.pointing.menu > .item.hover,
+  color: rgba(255, 255, 255, 0.9);
-.ui.secondary.pointing.menu > .item:hover {
-  background-color: transparent;
-  color: rgba(0, 0, 0, 0.7);
 }
-
+.ui.inverted.menu .item > p:only-child {
-/* Down */
+  color: rgba(255, 255, 255, 0.75);
-.ui.secondary.pointing.menu > .item:active,
-.ui.secondary.pointing.menu > .item.down {
-  background-color: transparent;
-  border-color: rgba(0, 0, 0, 0.2);
 }
-
+.ui.inverted.menu .dropdown.item .menu .item,
-/* Active */
+.ui.inverted.menu .dropdown.item .menu .item a {
-.ui.secondary.pointing.menu > .item.active {
+  color: rgba(0, 0, 0, 0.75) !important;
-  background-color: transparent;
+}
-  border-color: rgba(0, 0, 0, 0.4);
+.ui.inverted.menu .item.disabled,
+.ui.inverted.menu .item.disabled:hover,
+.ui.inverted.menu .item.disabled.hover {
+  color: rgba(255, 255, 255, 0.2);
 }
 
 
 
-/*------- Vertical------- */
+/*--- Border ---*/
-.ui.secondary.vertical.menu {
+.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.secondary.vertical.pointing.menu {
+.ui.vertical.inverted.menu .item:before {
-  border: none;
+  background-image: -webkit-linear-gradient(left,
-  border-right: 3px solid rgba(0, 0, 0, 0.1);
+    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%)
+  ;
 }
-.ui.secondary.vertical.menu > .item {
-  border: none;
-  margin: 0em 0em 0.3em;
-  padding: 0.6em 0.8em;
 
-  -webkit-border-radius: 0.1875em;
+/*--- Hover ---*/
-  -moz-border-radius: 0.1875em;
+.ui.link.inverted.menu .item:hover,
-  border-radius: 0.1875em;
+.ui.inverted.menu .item.hover,
-}
+.ui.inverted.menu .link.item:hover,
-.ui.secondary.vertical.menu > .header.item {
+.ui.inverted.menu a.item:hover,
-  -webkit-border-radius: 0em;
+.ui.inverted.menu .dropdown.item.hover,
-  -moz-border-radius: 0em;
+.ui.inverted.menu .dropdown.item:hover {
-  border-radius: 0em;
+  background-color: rgba(255, 255, 255, 0.1);
-}
-.ui.secondary.vertical.pointing.menu > .item {
-  margin: 0em -3px 0em 0em;
-  border-bottom: none;
-  border-right: 3px solid transparent;
-  -webkit-border-radius: 0em;
-  -moz-border-radius: 0em;
-  border-radius: 0em;
 }
-/* Hover */
+.ui.inverted.menu a.item:hover,
-.ui.secondary.vertical.pointing.menu > .item.hover,
+.ui.inverted.menu .item.hover,
-.ui.secondary.vertical.pointing.menu > .item:hover {
+.ui.inverted.menu .item > a:hover,
-  background-color: transparent;
+.ui.inverted.menu .item .menu a.item:hover,
-  color: rgba(0, 0, 0, 0.7);
+.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: rgba(255, 255, 255, 1);
 }
 
-/* Down */
+/*--- Down ---*/
-.ui.secondary.vertical.pointing.menu > .item:active,
+.ui.inverted.menu .item.down,
-.ui.secondary.vertical.pointing.menu > .item.down {
+.ui.inverted.menu a.item:active,
-  background-color: transparent;
+.ui.inverted.menu .item > a:active,
-  border-color: rgba(0, 0, 0, 0.2);
+.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 */
+/*--- Active ---*/
-.ui.secondary.vertical.pointing.menu > .item.active {
+.ui.inverted.menu .active.item {
-  background-color: transparent;
+  border-color: transparent !important;
-  border-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(255, 255, 255, 0.2);
-  color: rgba(0, 0, 0, 0.85);
 }
-
+.ui.inverted.menu .active.item,
-/*------- Inverted------- */
+.ui.inverted.menu .active.item a {
-.ui.secondary.inverted.pointing.menu {
+  color: rgba(255, 255, 255, 1);
-  border-bottom: 3px solid rgba(255, 255, 255, 0.1);
 }
-.ui.secondary.inverted.pointing.menu > .item {
+.ui.inverted.vertical.menu .item .menu .active.item {
-  color: rgba(255, 255, 255, 0.7);
+  background-color: rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, 1);
 }
 
-/* Hover */
+/*--- Pointers ---*/
-.ui.secondary.inverted.pointing.menu > .item.hover,
+.ui.inverted.pointing.menu .active.item:after {
-.ui.secondary.inverted.pointing.menu > .item:hover {
+  background-color: #505050;
-  color: rgba(255, 255, 255, 0.85);
+  box-shadow: none;
 }
-
+.ui.inverted.pointing.menu .active.item:hover:after {
-/* Down */
+  background-color: #3B3B3B;
-.ui.secondary.inverted.pointing.menu > .item:active,
-.ui.secondary.inverted.pointing.menu > .item.down {
-  border-color: rgba(255, 255, 255, 0.4);
 }
 
-/* Active */
-.ui.secondary.inverted.pointing.menu > .item.active {
-  border-color: rgba(255, 255, 255, 0.8);
-  color: rgba(255, 255, 255, 1);
-}
 
 /*--------------
- Inverted Sec
+     Floated
 ---------------*/
-.ui.secondary.inverted.vertical.pointing.menu {
-  border-right: 3px solid rgba(255, 255, 255, 0.1);
-  border-bottom: none;
-}
-/* Down */
-.ui.secondary.inverted.vertical.pointing.menu .item:active,
-.ui.secondary.inverted.vertical.pointing.menu .item.down {
-  box-shadow: 0.2em 0em 0em 0em rgba(255, 255, 255, 0.2);
-}
 
-/* Active */
+.ui.floated.menu {
-.ui.secondary.inverted.vertical.pointing.menu .item.active {
+  float: left;
-  box-shadow: 0.2em 0em 0em 0em rgba(255, 255, 255, 0.4);
+  margin: 0rem 0.5rem 0rem 0rem;
+}
+.ui.right.floated.menu {
+  float: right;
+  margin: 0rem 0rem 0rem 0.5rem;
 }
-
 
 
 /*--------------
-    Icon Only
+ Inverted Colors
 ---------------*/
 
-.ui.icon.menu,
+/*--- Light Colors  ---*/
-.ui.vertical.icon.menu {
+.ui.grey.menu {
-  width: auto;
+  background-color: #F0F0F0;
-  display: inline-block;
-  min-height: 0em;
 }
-.ui.icon.menu .item {
+
-  text-align: center;
+/*--- Inverted Colors  ---*/
-  color: rgba(60, 60, 60, 0.7);
+.ui.inverted.green.menu {
+  background-color: #A1CF64;
 }
-.ui.icon.menu .item .icon {
+.ui.inverted.green.pointing.menu .active.item:after {
-  display: block;
+  background-color: #A1CF64;
-  float: none;
-  opacity: 1;
-  margin: 0em auto;
 }
-.ui.icon.menu .icon:before {
+
-  opacity: 1;
+.ui.inverted.red.menu {
+  background-color: #EF4D6D;
+}
+.ui.inverted.red.pointing.menu .active.item:after {
+  background-color: #F16883;
 }
 
-/* Item Icon Only */
+.ui.inverted.blue.menu {
-.ui.menu .icon.item .icon {
+  background-color: #6ECFF5;
-  margin: 0em;
+}
+.ui.inverted.blue.pointing.menu .active.item:after {
+  background-color: #6ECFF5;
 }
 
-/*--- inverted ---*/
+.ui.inverted.purple.menu {
-.ui.inverted.icon.menu .item {
+  background-color: #564F8A;
-  color: rgba(255, 255, 255, 0.8);
 }
-.ui.inverted.icon.menu .icon {
+.ui.inverted.purple.pointing.menu .active.item:after {
-  color: rgba(255, 255, 255, 1);
+  background-color: #564F8A;
 }
 
-/*--------------
+.ui.inverted.orange.menu {
-   Labeled Icon
+  background-color: #F05940;
----------------*/
+}
+.ui.inverted.orange.pointing.menu .active.item:after {
+  background-color: #F05940;
+}
 
-.ui.labeled.icon.menu {
+.ui.inverted.teal.menu {
-  text-align: center;
+  background-color: #00B5AD;
 }
-.ui.labeled.icon.menu .icon {
+.ui.inverted.teal.pointing.menu .active.item:after {
-  display: block;
+  background-color: #00B5AD;
-  font-size: 1.5em;
-  margin: 0em auto 0.3em;
 }
 
 

src/modules/video.js

@@ -11,12 +11,24 @@
 
 ;(function ($, window, document, undefined) {
 
-  $.fn.video = function(parameters) {
+$.fn.video = function(parameters) {
 
   var
-      settings = $.extend(true, {}, $.fn.video.settings, parameters),
+    $allModules     = $(this),
-      // make arguments available
+
-      moduleArguments = arguments || false,
+    settings        = ( $.isPlainObject(parameters) )
+      ? $.extend(true, {}, $.fn.video.settings, parameters)
+      : $.fn.video.settings,
+
+    moduleSelector  = $allModules.selector || '',
+
+    time            = new Date().getTime(),
+    performance     = [],
+
+    query           = arguments[0],
+    methodInvoked   = (typeof query == 'string'),
+    queryArguments  = [].slice.call(arguments, 1),
+
     invokedResponse
   ;
 
@@ -28,14 +40,17 @@
         $playButton  = $module.find(settings.selector.playButton),
         $embed       = $module.find(settings.selector.embed),
         
-          element       = this,
+        eventNamespace  = '.' + settings.namespace,
-          instance      = $module.data('module-' + settings.namespace),
+        moduleNamespace = settings.namespace + '-module', 
-          methodInvoked = (typeof parameters == 'string'),
 
-          namespace    = settings.namespace,
+        selector        = settings.selector,
-          metadata     = settings.metadata,
         className       = settings.className,
+        error           = settings.error,
+        metadata        = settings.metadata,
+        namespace       = settings.namespace,
         
+        element         = this,
+        instance        = $module.data(moduleNamespace),
         module
       ;
 
@@ -44,24 +59,36 @@
         initialize: function() {
           module.debug('Initializing video');
           $placeholder
-              .off('.video')
+            .on('click' + eventNamespace, module.play)
-              .on('click.' + namespace, module.play)
           ;
           $playButton
-              .off('.video')
+            .on('click' + eventNamespace, module.play)
-              .on('click.' + namespace, module.play)
+          ;
+          module.instantiate();
+        },
+
+        instantiate: function() {
+          instance = module;
+          $module
+            .data(moduleNamespace, module)
           ;
+        },
+
+        destroy: function() {
+          module.verbose('Destroying previous instance of video');
           $module
-              .data('module-' + namespace, module)
+            .removeData(moduleNamespace)
+            .off(eventNamespace)
           ;
         },
 
         // sets new video
-          change: function(source, flv) {
+        change: function(source, id, url) {
-            module.debug('Changing video to ', flv);
+          module.debug('Changing video to ', source, id, url);
           $module
             .data(metadata.source, source)
-              .data(metadata.flv, flv)
+            .data(metadata.id, id)
+            .data(metadata.url, url)
           ;
           settings.onChange();
         },
@@ -85,11 +112,12 @@
         play: function() {
           module.debug('Playing video');
           var
-              source = $module.data(metadata.source),
+            source = $module.data(metadata.source) || false, 
-              flv    = $module.data(metadata.flv)
+            url    = $module.data(metadata.url)    || false,
+            id     = $module.data(metadata.id)     || false
           ;
           $embed
-              .html( module.generate.html(source, flv) )
+            .html( module.generate.html(source, id, url) )
           ;
           $module
             .addClass(className.active)
@@ -99,7 +127,7 @@
 
         generate: {
           // generates iframe html
-            html: function(source, flv) {
+          html: function(source, id, url) {
             module.debug('Generating embed html');
             var
               width = (settings.width == 'auto')
@@ -110,20 +138,32 @@
                 : settings.height,
               html
             ;
+            if(source && id) {
               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>'
+                ;
+              }
+            }
+            else if(url) {
+              html = ''
+                + '<iframe src="' + url + '"'
                 + ' width="' + width + '" height="' + height + '"'
                 + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
               ;
             }
+            else {
+              module.error(error.noVideo);
+            }
             return html;
           },
 
@@ -160,6 +200,14 @@
                 url += '&amp;color=' + settings.color;
               }
             }
+            if(source == 'ustream') {
+              url = ''
+                + 'autoplay=' + autoplay
+              ;
+              if(settings.color) {
+                url += '&amp;color=' + settings.color;
+              }
+            }
             else if(source == 'youtube') {
               url = ''
                 +      'enablejsapi=' + api
@@ -176,159 +224,169 @@
           }
         },
 
-          /* standard module */
+        setting: function(name, value) {
-          debug: function(message, variableName) {
+          if(value !== undefined) {
-            if(settings.debug) {
+            if( $.isPlainObject(name) ) {
-              if(variableName !== undefined) {
+              $.extend(true, settings, name);
-                console.info(settings.moduleName + ': ' + message, variableName);
             }
             else {
-                console.info(settings.moduleName + ': ' + message);
+              settings[name] = value;
+            }
           }
+          else {
+            return settings[name];
           }
         },
-          error: function(errorMessage) {
+        internal: function(name, value) {
-            console.warn(settings.moduleName + ': ' + errorMessage);
+          if(value !== undefined) {
+            if( $.isPlainObject(name) ) {
+              $.extend(true, module, name);
+            }
+            else {
+              module[name] = value;
+            }
+          }
+          else {
+            return module[name];
+          }
         },
-          invoke: function(methodName, context, methodArguments) {
+        debug: function() {
-            var
+          if(settings.debug) {
-              method
+            if(settings.performance) {
-            ;
+              module.performance.log(arguments);
-            methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 );
-            if(typeof methodName == 'string' && instance !== undefined) {
-              methodName = methodName.split('.');
-              $.each(methodName, function(index, name) {
-                if( $.isPlainObject( instance[name] ) ) {
-                  instance = instance[name];
-                  return true;
-                }
-                else if( $.isFunction( instance[name] ) ) {
-                  method = instance[name];
-                  return true;
-                }
-                module.error(settings.errors.method);
-                return false;
-              });
             }
-            if ( $.isFunction( method ) ) {
+            else {
-              return method.apply(context, methodArguments);
+              module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
             }
-            // return retrieved variable or chain
-            return method;
           }
-        };
+        },
-        // check for invoking internal method
+        verbose: function() {
-        if(methodInvoked) {
+          if(settings.verbose && settings.debug) {
-          invokedResponse = module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) );
+            if(settings.performance) {
+              module.performance.log(arguments);
             }
-        // otherwise initialize
             else {
-          if(instance) {
+              module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
-            module.destroy();
             }
-          module.initialize();
           }
-
+        },
-      })
+        error: function() {
-    ;
+          module.error = Function.prototype.bind.call(console.warn, console, settings.moduleName + ':');
-    // chain or return queried method
+        },
-    return (invokedResponse !== undefined)
+        performance: {
-      ? invokedResponse
+          log: function(message) {
-      : this
-    ;
-  };
-
-
-  $.fn.videoPlaylist = function(video, parameters) {
             var
-      $allModules = $(this),
+              currentTime,
-      $video      = $(video),
+              executionTime,
-      $iframe     = $video.find('.embed iframe'),
+              previousTime
-
+            ;
-      settings    = $.extend({}, $.fn.videoPlaylist.settings, parameters, true)
+            if(settings.performance) {
-    ;
+              currentTime   = new Date().getTime();
-    $allModules
+              previousTime  = time || currentTime,
-      .each(function() {
+              executionTime = currentTime - previousTime;
+              time          = currentTime;
+              performance.push({
+                'Element'        : element,
+                'Name'           : message[0],
+                'Arguments'      : [].slice.call(message, 1) || '',
+                'Execution Time' : executionTime
+              });
+            }
+            clearTimeout(module.performance.timer);
+            module.performance.timer = setTimeout(module.performance.display, 100);
+          },
+          display: function() {
             var
-          $element    = $(this),
+              title = settings.moduleName + ':',
-
+              totalTime = 0
-          metadata    = settings.metadata,
-          namespace   = settings.namespace,
-          className   = settings.className,
-
-          module       = {
-            initialize: function() {
-              $element
-                .on('click.' + namespace , module.changeVideo)
             ;
+            time        = false;
+            $.each(performance, function(index, data) {
+              totalTime += data['Execution Time'];
+            });
+            title += ' ' + totalTime + 'ms';
+            if(moduleSelector) {
+              title += ' \'' + moduleSelector + '\'';
+            }
+            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+              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 = [];
+          }
         },
-            changeVideo: function() {
+        invoke: function(query, passedArguments, context) {
           var
-                flv         = $element.data(metadata.flv)         || false,
+            maxDepth,
-                source      = $element.data(metadata.source)      || false,
+            found
-                placeholder = $element.data(metadata.placeholder) || false
+          ;
-              ;
+          passedArguments = passedArguments || queryArguments;
-              if(flv && source) {
+          context         = element         || context;
-                $video
+          if(typeof query == 'string' && instance !== undefined) {
-                  .data(metadata.source, source)
+            query    = query.split(/[\. ]/);
-                  .data(metadata.flv, flv)
+            maxDepth = query.length - 1;
-                ;
+            $.each(query, function(depth, value) {
-                if(settings.showPlaceholder) {
+              if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
-                  $video
+                instance = instance[value];
-                    .removeClass(className.active)
+              }
-                    .find($.fn.video.selector.placeholder)
+              else if( instance[value] !== undefined ) {
-                      .attr('src', placeholder)
+                found = instance[value];
-                  ;
               }
               else {
-                  try {
+                module.error(error.method);
-                    $video
-                      .video('play')
-                    ;
               }
-                  catch(error) {
+            });
-                    console.warn('Video Playlist Module: ' + settings.error.init);
           }
+          if ( $.isFunction( found ) ) {
+            return found.apply(context, passedArguments);
           }
-                $allModules
+          return found || false;
-                  .removeClass(className.active)
-                ;
-                $element
-                  .addClass(className.active)
-                ;
         }
+      };
+
+      if(methodInvoked) {
+        if(instance === undefined) {
+          module.initialize();
         }
+        invokedResponse = module.invoke(query);
+      }
+      else {
+        if(instance !== undefined) {
+          module.destroy();
         }
-        ;
         module.initialize();
+      }
     })
   ;
 
-    if(settings.playFirst) {
+  return (invokedResponse)
-      $allModules
+    ? invokedResponse
-        .eq(0)
+    : this
-        .trigger('click')
-      ;
-      // we all like a good hack
-      if($iframe.size() > 0) {
-        $iframe
-          .attr('src', $iframe.attr('src').replace('autoplay=1', 'autoplay=0') )
   ;
-      }
+};
-
-    }
-
-  };
 
-  $.fn.video.settings = {
+$.fn.video.settings = {
 
   moduleName  : 'Video',
   namespace   : 'video',
-    debug       : false,
+
+  debug       : true,
+  verbose     : true,
+  performance : true,
+  
 
   metadata    : {
     source : 'source',
-      flv         : 'flv'
+    id     : 'id',
+    url    : 'url'
   },
   
   onPlay   : function(){},
@@ -336,9 +394,8 @@
   onChange : function(){},
   
   // callbacks not coded yet (needs to use jsapi)
-    play        : function() {},
+  onPause  : function() {},
-    pause       : function() {},
+  onStop   : function() {},
-    stop        : function() {},
   
   width    : 'auto',
   height   : 'auto',
@@ -349,7 +406,8 @@
   showUI   : false,
   api      : true,
   
-    errors      : {
+  error      : {
+    noVideo     : 'No video specified',
     method      : 'The method you called is not defined'
   },
   
@@ -362,30 +420,7 @@
     placeholder : '.placeholder',
     playButton  : '.play'
   }
-  };
+};
-
-  $.fn.videoPlaylist.settings = {
-    moduleName      : 'Video Playlist',
-    namespace       : 'videoPlaylist',
-
-    source          : 'vimeo',
-    showPlaceholder : false,
-    playFirst       : true,
-
-    metadata: {
-      flv         : 'flv',
-      source      : 'source',
-      placeholder : 'placeholder'
-    },
-
-    errors: {
-      init   : 'The video player you specified was not yet initialized'
-    },
-
-    className : {
-      active  : 'active'
-    }
 
-  };
 
 })( 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 {
+
+.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;
 }