First version.

2023-02-02 14:42:50 +08:00 · 2023-02-02 14:42:50 +08:00 · 28bd3dd766
commit 28bd3dd766
130 changed files with 9387 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,8 @@
+.bundle/
+log/*.log
+pkg/
+test/dummy/db/*.sqlite3
+test/dummy/db/*.sqlite3-journal
+test/dummy/log/*.log
+test/dummy/tmp/
+test/dummy/.sass-cache
--- a/14
+++ b/14
@ -0,0 +1,14 @@
+source "https://rubygems.org"
+
+# Declare your gem's dependencies in video_pro.gemspec.
+# Bundler will treat runtime dependencies like base dependencies, and
+# development dependencies will be added by default to the :development group.
+gemspec
+
+# Declare any dependencies that are still in development here instead of in
+# your gemspec. These might include edge Rails or gems from your path or
+# Git. Remember to move these dependencies to your gemspec before releasing
+# your gem to rubygems.org.
+
+# To use debugger
+# gem 'debugger'
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -0,0 +1,104 @@
+PATH
+  remote: .
+  specs:
+    video_pro (0.0.1)
+      mongoid (= 4.0.0.beta1)
+      rails (~> 4.1.0.rc2)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    actionmailer (4.1.0)
+      actionpack (= 4.1.0)
+      actionview (= 4.1.0)
+      mail (~> 2.5.4)
+    actionpack (4.1.0)
+      actionview (= 4.1.0)
+      activesupport (= 4.1.0)
+      rack (~> 1.5.2)
+      rack-test (~> 0.6.2)
+    actionview (4.1.0)
+      activesupport (= 4.1.0)
+      builder (~> 3.1)
+      erubis (~> 2.7.0)
+    activemodel (4.1.0)
+      activesupport (= 4.1.0)
+      builder (~> 3.1)
+    activerecord (4.1.0)
+      activemodel (= 4.1.0)
+      activesupport (= 4.1.0)
+      arel (~> 5.0.0)
+    activesupport (4.1.0)
+      i18n (~> 0.6, >= 0.6.9)
+      json (~> 1.7, >= 1.7.7)
+      minitest (~> 5.1)
+      thread_safe (~> 0.1)
+      tzinfo (~> 1.1)
+    arel (5.0.0)
+    bson (2.2.2)
+    builder (3.2.2)
+    connection_pool (2.0.0)
+    erubis (2.7.0)
+    hike (1.2.3)
+    i18n (0.6.9)
+    json (1.8.1)
+    mail (2.5.4)
+      mime-types (~> 1.16)
+      treetop (~> 1.4.8)
+    mime-types (1.25.1)
+    minitest (5.3.2)
+    mongoid (4.0.0.beta1)
+      activemodel (>= 4.0.0)
+      moped (~> 2.0.beta6)
+      origin (~> 2.1)
+      tzinfo (>= 0.3.37)
+    moped (2.0.0.rc1)
+      bson (~> 2.2)
+      connection_pool (~> 2.0)
+      optionable (~> 0.2.0)
+    multi_json (1.9.2)
+    optionable (0.2.0)
+    origin (2.1.1)
+    polyglot (0.3.4)
+    rack (1.5.2)
+    rack-test (0.6.2)
+      rack (>= 1.0)
+    rails (4.1.0)
+      actionmailer (= 4.1.0)
+      actionpack (= 4.1.0)
+      actionview (= 4.1.0)
+      activemodel (= 4.1.0)
+      activerecord (= 4.1.0)
+      activesupport (= 4.1.0)
+      bundler (>= 1.3.0, < 2.0)
+      railties (= 4.1.0)
+      sprockets-rails (~> 2.0)
+    railties (4.1.0)
+      actionpack (= 4.1.0)
+      activesupport (= 4.1.0)
+      rake (>= 0.8.7)
+      thor (>= 0.18.1, < 2.0)
+    rake (10.2.2)
+    sprockets (2.12.0)
+      hike (~> 1.2)
+      multi_json (~> 1.0)
+      rack (~> 1.0)
+      tilt (~> 1.1, != 1.3.0)
+    sprockets-rails (2.1.1)
+      actionpack (>= 3.0)
+      activesupport (>= 3.0)
+      sprockets (~> 2.8)
+    thor (0.19.1)
+    thread_safe (0.3.3)
+    tilt (1.4.1)
+    treetop (1.4.15)
+      polyglot
+      polyglot (>= 0.3.1)
+    tzinfo (1.1.0)
+      thread_safe (~> 0.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  video_pro!
--- a/20
+++ b/20
@ -0,0 +1,20 @@
+Copyright 2014 YOURNAME
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/README.rdoc
+++ b/README.rdoc
@ -0,0 +1,3 @@
+= VideoPro
+
+This project rocks and uses MIT-LICENSE.
--- a/32
+++ b/32
@ -0,0 +1,32 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'VideoPro'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test
--- a/app/assets/images/jplayer.blue.monday.jpg
+++ b/app/assets/images/jplayer.blue.monday.jpg
--- a/app/assets/images/jplayer.blue.monday.seeking.gif
+++ b/app/assets/images/jplayer.blue.monday.seeking.gif
--- a/app/assets/images/jplayer.blue.monday.video.pause.png
+++ b/app/assets/images/jplayer.blue.monday.video.pause.png
--- a/app/assets/images/jplayer.blue.monday.video.play.png
+++ b/app/assets/images/jplayer.blue.monday.video.play.png
--- a/app/assets/images/slideshow_preview_A.png
+++ b/app/assets/images/slideshow_preview_A.png
--- a/app/assets/images/slideshow_preview_B.png
+++ b/app/assets/images/slideshow_preview_B.png
--- a/app/assets/images/video_pro/.keep
+++ b/app/assets/images/video_pro/.keep
--- a/app/assets/images/video_pro/btn-play.png
+++ b/app/assets/images/video_pro/btn-play.png
--- a/app/assets/images/video_pro/icon_hd.png
+++ b/app/assets/images/video_pro/icon_hd.png
--- a/app/assets/images/video_pro/icon_view.png
+++ b/app/assets/images/video_pro/icon_view.png
--- a/app/assets/images/video_pro/search_btn.png
+++ b/app/assets/images/video_pro/search_btn.png
--- a/app/assets/javascripts/admin/video_pros.js
+++ b/app/assets/javascripts/admin/video_pros.js
@ -0,0 +1,21 @@
+$(function() {
+  $.pageslide.closeCallback(function(pageslide, item) {
+    $("tr").removeClass("active");
+    pageslide.find('.preview').cycle('destroy');
+  });
+  $.pageslide.loadComplete(function(pageslide, item) {
+    $("tr").removeClass("active");
+    item.closest('tr').addClass('active');
+    if(item.data('id') == 'new') {
+      resetForm();
+    	pageslide.find('form').attr('action', '/admin/video_pros/');
+    	pageslide.find('form').attr('method', 'post');
+    }
+    else {
+      setForm(item.data('form'));
+      pageslide.find('form').attr('action', '/admin/video_pros/' + item.data('id'));
+    	pageslide.find('form').attr('method', 'put');
+    }
+    setSlideshow(pageslide.find('.preview'), item.data());
+  });
+})
--- a/app/assets/javascripts/cycle2.js
+++ b/app/assets/javascripts/cycle2.js
@ -0,0 +1,4 @@
+//= require cycle2/jquery.cycle2.min.js
+//= require cycle2/transition/jquery.cycle2.flip.min.js
+//= require cycle2/transition/jquery.cycle2.scrollVert.min.js
+//= require cycle2/transition/jquery.cycle2.tile.min.js
--- a/app/assets/javascripts/cycle2/jquery.cycle2.min.js
+++ b/app/assets/javascripts/cycle2/jquery.cycle2.min.js
--- a/app/assets/javascripts/cycle2/jquery.cycle2.video.min.js
+++ b/app/assets/javascripts/cycle2/jquery.cycle2.video.min.js
@ -0,0 +1,2 @@
+/* Plugin for Cycle2; Copyright (c) 2012 M. Alsup; v20141007 */
+!function(a){"use strict";function b(){try{this.playVideo()}catch(a){}}function c(){try{this.pauseVideo()}catch(a){}}var d='<div class=cycle-youtube><iframe width="640" height="360" frameborder="0" allowfullscreen="" data-yt-api-binded="0" src="{{url}}"></iframe></div>';a.extend(a.fn.cycle.defaults,{youtubeAllowFullScreen:!0,youtubeAutostart:!1,youtubeAutostop:!0}),a(document).on("cycle-bootstrap",function(e,f){f.youtube&&(f.hideNonActive=!1,f.container.find(f.slides).each(function(b){if(void 0!==a(this).attr("href")){var c,e=a(this),g=e.attr("href"),h=f.youtubeAllowFullScreen?"true":"false";g+=(/\?/.test(g)?"&":"?")+"enablejsapi=1",f.youtubeAutostart&&f.startingSlide===b&&(g+="&autoplay=1"),c=f.API.tmpl(d,{url:g,allowFullScreen:h}),e.replaceWith(c)}}),f.slides=f.slides.replace(/(\b>?a\b)/,"div.cycle-youtube"),f.youtubeAutostart&&f.container.on("cycle-initialized cycle-after",function(c,d){var e="cycle-initialized"==c.type?d.currSlide:d.nextSlide;a(d.slides[e]).find("object,embed").each(b)}),f.youtubeAutostop&&f.container.on("cycle-before",function(b,d){a(d.slides[d.currSlide]).find("object,embed").each(c)}))})}(jQuery);
--- a/app/assets/javascripts/cycle2/transition/jquery.cycle2.flip.min.js
+++ b/app/assets/javascripts/cycle2/transition/jquery.cycle2.flip.min.js
@ -0,0 +1,2 @@
+/* Plugin for Cycle2; Copyright (c) 2012 M. Alsup; v20130909 */
+(function(e){"use strict";function t(t){return{preInit:function(e){e.slides.css(n)},transition:function(i,n,s,o,r){var l=i,c=e(n),a=e(s),d=l.speed/2;t.call(a,-90),a.css({display:"block","background-position":"-90px",opacity:1}),c.css("background-position","0px"),c.animate({backgroundPosition:90},{step:t,duration:d,easing:l.easeOut||l.easing,complete:function(){i.API.updateView(!1,!0),a.animate({backgroundPosition:0},{step:t,duration:d,easing:l.easeIn||l.easing,complete:r})}})}}}function i(t){return function(i){var n=e(this);n.css({"-webkit-transform":"rotate"+t+"("+i+"deg)","-moz-transform":"rotate"+t+"("+i+"deg)","-ms-transform":"rotate"+t+"("+i+"deg)","-o-transform":"rotate"+t+"("+i+"deg)",transform:"rotate"+t+"("+i+"deg)"})}}var n,s=document.createElement("div").style,o=e.fn.cycle.transitions,r=void 0!==s.transform||void 0!==s.MozTransform||void 0!==s.webkitTransform||void 0!==s.oTransform||void 0!==s.msTransform;r&&void 0!==s.msTransform&&(s.msTransform="rotateY(0deg)",s.msTransform||(r=!1)),r?(o.flipHorz=t(i("Y")),o.flipVert=t(i("X")),n={"-webkit-backface-visibility":"hidden","-moz-backface-visibility":"hidden","-o-backface-visibility":"hidden","backface-visibility":"hidden"}):(o.flipHorz=o.scrollHorz,o.flipVert=o.scrollVert||o.scrollHorz)})(jQuery);
--- a/app/assets/javascripts/cycle2/transition/jquery.cycle2.ie-fade.min.js
+++ b/app/assets/javascripts/cycle2/transition/jquery.cycle2.ie-fade.min.js
@ -0,0 +1,2 @@
+/*! Plugin for Cycle2; Copyright (c) 2012 M. Alsup; ver: 20121120 */
+(function(a){function b(a,b,c){if(a&&c.style.filter){b._filter=c.style.filter;try{c.style.removeAttribute("filter")}catch(d){}}else!a&&b._filter&&(c.style.filter=b._filter)}"use strict",a.extend(a.fn.cycle.transitions,{fade:{before:function(c,d,e,f){var g=c.API.getSlideOpts(c.nextSlide).slideCss||{};c.API.stackSlides(d,e,f),c.cssBefore=a.extend(g,{opacity:0,display:"block"}),c.animIn={opacity:1},c.animOut={opacity:0},b(!0,c,e)},after:function(a,c,d){b(!1,a,d)}},fadeout:{before:function(c,d,e,f){var g=c.API.getSlideOpts(c.nextSlide).slideCss||{};c.API.stackSlides(d,e,f),c.cssBefore=a.extend(g,{opacity:1,display:"block"}),c.animOut={opacity:0},b(!0,c,e)},after:function(a,c,d){b(!1,a,d)}}})})(jQuery);
--- a/app/assets/javascripts/cycle2/transition/jquery.cycle2.scrollVert.min.js
+++ b/app/assets/javascripts/cycle2/transition/jquery.cycle2.scrollVert.min.js
@ -0,0 +1,2 @@
+/*! Plugin for Cycle2; Copyright (c) 2012 M. Alsup; ver: 20121120 */
+(function(a){"use strict",a.fn.cycle.transitions.scrollVert={before:function(a,b,c,d){a.API.stackSlides(a,b,c,d);var e=a.container.css("overflow","hidden").height();a.cssBefore={top:d?-e:e,left:0,opacity:1,display:"block"},a.animIn={top:0},a.animOut={top:d?e:-e}}}})(jQuery);
--- a/app/assets/javascripts/cycle2/transition/jquery.cycle2.tile.min.js
+++ b/app/assets/javascripts/cycle2/transition/jquery.cycle2.tile.min.js
@ -0,0 +1,2 @@
+/* Plugin for Cycle2; Copyright (c) 2012 M. Alsup; v20130721 */
+(function(e){"use strict";e.fn.cycle.transitions.tileSlide=e.fn.cycle.transitions.tileBlind={before:function(t,i,n,s){t.API.stackSlides(i,n,s),e(i).show(),t.container.css("overflow","hidden"),t.tileDelay=t.tileDelay||"tileSlide"==t.fx?100:125,t.tileCount=t.tileCount||7,t.tileVertical=t.tileVertical!==!1,t.container.data("cycleTileInitialized")||(t.container.on("cycle-destroyed",e.proxy(this.onDestroy,t.API)),t.container.data("cycleTileInitialized",!0))},transition:function(t,i,n,s,o){function r(e){p.eq(e).animate(I,{duration:t.speed,easing:t.easing,complete:function(){(s?v-1===e:0===e)&&t._tileAniCallback()}}),setTimeout(function(){(s?v-1!==e:0!==e)&&r(s?e+1:e-1)},t.tileDelay)}t.slides.not(i).not(n).hide();var c,l,a,d,u,p=e(),f=e(i),y=e(n),v=t.tileCount,h=t.tileVertical,g=t.container.height(),m=t.container.width();h?(l=Math.floor(m/v),d=m-l*(v-1),a=u=g):(l=d=m,a=Math.floor(g/v),u=g-a*(v-1)),t.container.find(".cycle-tiles-container").remove();var I,A={left:0,top:0,overflow:"hidden",position:"absolute",margin:0,padding:0};I=h?"tileSlide"==t.fx?{top:g}:{width:0}:"tileSlide"==t.fx?{left:m}:{height:0};var S=e('<div class="cycle-tiles-container"></div>');S.css({zIndex:f.css("z-index"),overflow:"visible",position:"absolute",top:0,left:0,direction:"ltr"}),S.insertBefore(n);for(var x=0;v>x;x++)c=e("<div></div>").css(A).css({width:v-1===x?d:l,height:v-1===x?u:a,marginLeft:h?x*l:0,marginTop:h?0:x*a}).append(f.clone().css({position:"relative",maxWidth:"none",width:f.width(),margin:0,padding:0,marginLeft:h?-(x*l):0,marginTop:h?0:-(x*a)})),p=p.add(c);S.append(p),f.hide(),y.show().css("opacity",1),r(s?0:v-1),t._tileAniCallback=function(){y.show(),f.hide(),S.remove(),o()}},stopTransition:function(e){e.container.find("*").stop(!0,!0),e._tileAniCallback&&e._tileAniCallback()},onDestroy:function(){var e=this.opts();e.container.find(".cycle-tiles-container").remove()}}})(jQuery);
--- a/app/assets/javascripts/video_pro/jplayer.playlist.js
+++ b/app/assets/javascripts/video_pro/jplayer.playlist.js
@ -0,0 +1,496 @@
+/*
+ * Playlist Object for the jPlayer Plugin
+ * http://www.jplayer.org
+ *
+ * Copyright (c) 2009 - 2014 Happyworm Ltd
+ * Licensed under the MIT license.
+ * http://www.opensource.org/licenses/MIT
+ *
+ * Author: Mark J Panaghiston
+ * Version: 2.4.1
+ * Date: 19th November 2014
+ *
+ * Requires:
+ *  - jQuery 1.7.0+
+ *  - jPlayer 2.8.2+
+ */
+
+/*global jPlayerPlaylist:true */
+
+(function($, undefined) {
+
+	jPlayerPlaylist = function(cssSelector, playlist, options) {
+		var self = this;
+
+		this.current = 0;
+		this.loop = false; // Flag used with the jPlayer repeat event
+		this.shuffled = false;
+		this.removing = false; // Flag is true during remove animation, disabling the remove() method until complete.
+
+		this.cssSelector = $.extend({}, this._cssSelector, cssSelector); // Object: Containing the css selectors for jPlayer and its cssSelectorAncestor
+		this.options = $.extend(true, {
+			keyBindings: {
+				next: {
+					key: 221, // ]
+					fn: function() {
+						self.next();
+					}
+				},
+				previous: {
+					key: 219, // [
+					fn: function() {
+						self.previous();
+					}
+				},
+				shuffle: {
+					key: 83, // s
+					fn: function() {
+						self.shuffle();
+					}
+				}
+			},
+			stateClass: {
+				shuffled: "jp-state-shuffled"
+			}
+		}, this._options, options); // Object: The jPlayer constructor options for this playlist and the playlist options
+
+		this.playlist = []; // Array of Objects: The current playlist displayed (Un-shuffled or Shuffled)
+		this.original = []; // Array of Objects: The original playlist
+
+		this._initPlaylist(playlist); // Copies playlist to this.original. Then mirrors this.original to this.playlist. Creating two arrays, where the element pointers match. (Enables pointer comparison.)
+
+		// Setup the css selectors for the extra interface items used by the playlist.
+		this.cssSelector.details = this.cssSelector.cssSelectorAncestor + " .jp-details"; // Note that jPlayer controls the text in the title element.
+		this.cssSelector.playlist = this.cssSelector.cssSelectorAncestor + " .jp-playlist";
+		this.cssSelector.next = this.cssSelector.cssSelectorAncestor + " .jp-next";
+		this.cssSelector.previous = this.cssSelector.cssSelectorAncestor + " .jp-previous";
+		this.cssSelector.shuffle = this.cssSelector.cssSelectorAncestor + " .jp-shuffle";
+		this.cssSelector.shuffleOff = this.cssSelector.cssSelectorAncestor + " .jp-shuffle-off";
+
+		// Override the cssSelectorAncestor given in options
+		this.options.cssSelectorAncestor = this.cssSelector.cssSelectorAncestor;
+
+		// Override the default repeat event handler
+		this.options.repeat = function(event) {
+			self.loop = event.jPlayer.options.loop;
+		};
+
+		// Create a ready event handler to initialize the playlist
+		$(this.cssSelector.jPlayer).bind($.jPlayer.event.ready, function() {
+			self._init();
+		});
+
+		// Create an ended event handler to move to the next item
+		$(this.cssSelector.jPlayer).bind($.jPlayer.event.ended, function() {
+			self.next();
+		});
+
+		// Create a play event handler to pause other instances
+		$(this.cssSelector.jPlayer).bind($.jPlayer.event.play, function() {
+			$(this).jPlayer("pauseOthers");
+		});
+
+		// Create a resize event handler to show the title in full screen mode.
+		$(this.cssSelector.jPlayer).bind($.jPlayer.event.resize, function(event) {
+			if(event.jPlayer.options.fullScreen) {
+				$(self.cssSelector.details).show();
+			} else {
+				$(self.cssSelector.details).hide();
+			}
+		});
+
+		// Create click handlers for the extra buttons that do playlist functions.
+		$(this.cssSelector.previous).click(function(e) {
+			e.preventDefault();
+			self.previous();
+			self.blur(this);
+		});
+
+		$(this.cssSelector.next).click(function(e) {
+			e.preventDefault();
+			self.next();
+			self.blur(this);
+		});
+
+		$(this.cssSelector.shuffle).click(function(e) {
+			e.preventDefault();
+			if(self.shuffled && $(self.cssSelector.jPlayer).jPlayer("option", "useStateClassSkin")) {
+				self.shuffle(false);
+			} else {
+				self.shuffle(true);
+			}
+			self.blur(this);
+		});
+		$(this.cssSelector.shuffleOff).click(function(e) {
+			e.preventDefault();
+			self.shuffle(false);
+			self.blur(this);
+		}).hide();
+
+		// Put the title in its initial display state
+		if(!this.options.fullScreen) {
+			$(this.cssSelector.details).hide();
+		}
+
+		// Remove the empty <li> from the page HTML. Allows page to be valid HTML, while not interfereing with display animations
+		$(this.cssSelector.playlist + " ul").empty();
+
+		// Create .on() handlers for the playlist items along with the free media and remove controls.
+		this._createItemHandlers();
+
+		// Instance jPlayer
+		$(this.cssSelector.jPlayer).jPlayer(this.options);
+	};
+
+	jPlayerPlaylist.prototype = {
+		_cssSelector: { // static object, instanced in constructor
+			jPlayer: "#jquery_jplayer_1",
+			cssSelectorAncestor: "#jp_container_1"
+		},
+		_options: { // static object, instanced in constructor
+			playlistOptions: {
+				autoPlay: false,
+				loopOnPrevious: false,
+				shuffleOnLoop: true,
+				enableRemoveControls: false,
+				displayTime: 'slow',
+				addTime: 'fast',
+				removeTime: 'fast',
+				shuffleTime: 'slow',
+				itemClass: "jp-playlist-item",
+				freeGroupClass: "jp-free-media",
+				freeItemClass: "jp-playlist-item-free",
+				removeItemClass: "jp-playlist-item-remove"
+			}
+		},
+		option: function(option, value) { // For changing playlist options only
+			if(value === undefined) {
+				return this.options.playlistOptions[option];
+			}
+
+			this.options.playlistOptions[option] = value;
+
+			switch(option) {
+				case "enableRemoveControls":
+					this._updateControls();
+					break;
+				case "itemClass":
+				case "freeGroupClass":
+				case "freeItemClass":
+				case "removeItemClass":
+					this._refresh(true); // Instant
+					this._createItemHandlers();
+					break;
+			}
+			return this;
+		},
+		_init: function() {
+			var self = this;
+			this._refresh(function() {
+				if(self.options.playlistOptions.autoPlay) {
+					self.play(self.current);
+				} else {
+					self.select(self.current);
+				}
+			});
+		},
+		_initPlaylist: function(playlist) {
+			this.current = 0;
+			this.shuffled = false;
+			this.removing = false;
+			this.original = $.extend(true, [], playlist); // Copy the Array of Objects
+			this._originalPlaylist();
+		},
+		_originalPlaylist: function() {
+			var self = this;
+			this.playlist = [];
+			// Make both arrays point to the same object elements. Gives us 2 different arrays, each pointing to the same actual object. ie., Not copies of the object.
+			$.each(this.original, function(i) {
+				self.playlist[i] = self.original[i];
+			});
+		},
+		_refresh: function(instant) {
+			/* instant: Can be undefined, true or a function.
+			 *	undefined -> use animation timings
+			 *	true -> no animation
+			 *	function -> use animation timings and excute function at half way point.
+			 */
+			var self = this;
+
+			if(instant && !$.isFunction(instant)) {
+				$(this.cssSelector.playlist + " ul").empty();
+				$.each(this.playlist, function(i) {
+					$(self.cssSelector.playlist + " ul").append(self._createListItem(self.playlist[i]));
+				});
+				this._updateControls();
+			} else {
+				var displayTime = $(this.cssSelector.playlist + " ul").children().length ? this.options.playlistOptions.displayTime : 0;
+
+				$(this.cssSelector.playlist + " ul").slideUp(displayTime, function() {
+					var $this = $(this);
+					$(this).empty();
+					
+					$.each(self.playlist, function(i) {
+						$this.append(self._createListItem(self.playlist[i]));
+					});
+					self._updateControls();
+					if($.isFunction(instant)) {
+						instant();
+					}
+					if(self.playlist.length) {
+						$(this).slideDown(self.options.playlistOptions.displayTime);
+					} else {
+						$(this).show();
+					}
+				});
+			}
+		},
+		_createListItem: function(media) {
+			var self = this;
+
+			// Wrap the <li> contents in a <div>
+			var listItem = "<li><div>";
+
+			// Create remove control
+			listItem += "<a href='javascript:;' class='" + this.options.playlistOptions.removeItemClass + "'>&times;</a>";
+
+			// Create links to free media
+			if(media.free) {
+				var first = true;
+				listItem += "<span class='" + this.options.playlistOptions.freeGroupClass + "'>(";
+				$.each(media, function(property,value) {
+					if($.jPlayer.prototype.format[property]) { // Check property is a media format.
+						if(first) {
+							first = false;
+						} else {
+							listItem += " | ";
+						}
+						listItem += "<a class='" + self.options.playlistOptions.freeItemClass + "' href='" + value + "' tabindex='-1'>" + property + "</a>";
+					}
+				});
+				listItem += ")</span>";
+			}
+
+			// The title is given next in the HTML otherwise the float:right on the free media corrupts in IE6/7
+			listItem += "<a href='javascript:;' class='" + this.options.playlistOptions.itemClass + "' tabindex='0'>" + media.title + (media.artist ? " <span class='jp-artist'>by " + media.artist + "</span>" : "") + "</a>";
+			listItem += "</div></li>";
+
+			return listItem;
+		},
+		_createItemHandlers: function() {
+			var self = this;
+			// Create live handlers for the playlist items
+			$(this.cssSelector.playlist).off("click", "a." + this.options.playlistOptions.itemClass).on("click", "a." + this.options.playlistOptions.itemClass, function(e) {
+				e.preventDefault();
+				var index = $(this).parent().parent().index();
+				if(self.current !== index) {
+					self.play(index);
+				} else {
+					$(self.cssSelector.jPlayer).jPlayer("play");
+				}
+				self.blur(this);
+			});
+
+			// Create live handlers that disable free media links to force access via right click
+			$(this.cssSelector.playlist).off("click", "a." + this.options.playlistOptions.freeItemClass).on("click", "a." + this.options.playlistOptions.freeItemClass, function(e) {
+				e.preventDefault();
+				$(this).parent().parent().find("." + self.options.playlistOptions.itemClass).click();
+				self.blur(this);
+			});
+
+			// Create live handlers for the remove controls
+			$(this.cssSelector.playlist).off("click", "a." + this.options.playlistOptions.removeItemClass).on("click", "a." + this.options.playlistOptions.removeItemClass, function(e) {
+				e.preventDefault();
+				var index = $(this).parent().parent().index();
+				self.remove(index);
+				self.blur(this);
+			});
+		},
+		_updateControls: function() {
+			if(this.options.playlistOptions.enableRemoveControls) {
+				$(this.cssSelector.playlist + " ." + this.options.playlistOptions.removeItemClass).show();
+			} else {
+				$(this.cssSelector.playlist + " ." + this.options.playlistOptions.removeItemClass).hide();
+			}
+
+			if(this.shuffled) {
+				$(this.cssSelector.jPlayer).jPlayer("addStateClass", "shuffled");
+			} else {
+				$(this.cssSelector.jPlayer).jPlayer("removeStateClass", "shuffled");
+			}
+			if($(this.cssSelector.shuffle).length && $(this.cssSelector.shuffleOff).length) {
+				if(this.shuffled) {
+					$(this.cssSelector.shuffleOff).show();
+					$(this.cssSelector.shuffle).hide();
+				} else {
+					$(this.cssSelector.shuffleOff).hide();
+					$(this.cssSelector.shuffle).show();
+				}
+			}
+		},
+		_highlight: function(index) {
+			if(this.playlist.length && index !== undefined) {
+				$(this.cssSelector.playlist + " .jp-playlist-current").removeClass("jp-playlist-current");
+				$(this.cssSelector.playlist + " li:nth-child(" + (index + 1) + ")").addClass("jp-playlist-current").find(".jp-playlist-item").addClass("jp-playlist-current");
+				// $(this.cssSelector.details + " li").html("<span class='jp-title'>" + this.playlist[index].title + "</span>" + (this.playlist[index].artist ? " <span class='jp-artist'>by " + this.playlist[index].artist + "</span>" : ""));
+			}
+		},
+		setPlaylist: function(playlist) {
+			this._initPlaylist(playlist);
+			this._init();
+		},
+		add: function(media, playNow) {
+			$(this.cssSelector.playlist + " ul").append(this._createListItem(media)).find("li:last-child").hide().slideDown(this.options.playlistOptions.addTime);
+			this._updateControls();
+			this.original.push(media);
+			this.playlist.push(media); // Both array elements share the same object pointer. Comforms with _initPlaylist(p) system.
+
+			if(playNow) {
+				this.play(this.playlist.length - 1);
+			} else {
+				if(this.original.length === 1) {
+					this.select(0);
+				}
+			}
+		},
+		remove: function(index) {
+			var self = this;
+
+			if(index === undefined) {
+				this._initPlaylist([]);
+				this._refresh(function() {
+					$(self.cssSelector.jPlayer).jPlayer("clearMedia");
+				});
+				return true;
+			} else {
+
+				if(this.removing) {
+					return false;
+				} else {
+					index = (index < 0) ? self.original.length + index : index; // Negative index relates to end of array.
+					if(0 <= index && index < this.playlist.length) {
+						this.removing = true;
+
+						$(this.cssSelector.playlist + " li:nth-child(" + (index + 1) + ")").slideUp(this.options.playlistOptions.removeTime, function() {
+							$(this).remove();
+
+							if(self.shuffled) {
+								var item = self.playlist[index];
+								$.each(self.original, function(i) {
+									if(self.original[i] === item) {
+										self.original.splice(i, 1);
+										return false; // Exit $.each
+									}
+								});
+								self.playlist.splice(index, 1);
+							} else {
+								self.original.splice(index, 1);
+								self.playlist.splice(index, 1);
+							}
+
+							if(self.original.length) {
+								if(index === self.current) {
+									self.current = (index < self.original.length) ? self.current : self.original.length - 1; // To cope when last element being selected when it was removed
+									self.select(self.current);
+								} else if(index < self.current) {
+									self.current--;
+								}
+							} else {
+								$(self.cssSelector.jPlayer).jPlayer("clearMedia");
+								self.current = 0;
+								self.shuffled = false;
+								self._updateControls();
+							}
+
+							self.removing = false;
+						});
+					}
+					return true;
+				}
+			}
+		},
+		select: function(index) {
+			index = (index < 0) ? this.original.length + index : index; // Negative index relates to end of array.
+			if(0 <= index && index < this.playlist.length) {
+				this.current = index;
+				this._highlight(index);
+				$(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
+			} else {
+				this.current = 0;
+			}
+		},
+		play: function(index) {
+			index = (index < 0) ? this.original.length + index : index; // Negative index relates to end of array.
+			if(0 <= index && index < this.playlist.length) {
+				if(this.playlist.length) {
+					this.select(index);
+					$(this.cssSelector.jPlayer).jPlayer("play");
+				}
+			} else if(index === undefined) {
+				$(this.cssSelector.jPlayer).jPlayer("play");
+			}
+		},
+		pause: function() {
+			$(this.cssSelector.jPlayer).jPlayer("pause");
+		},
+		next: function() {
+			var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
+
+			if(this.loop) {
+				// See if we need to shuffle before looping to start, and only shuffle if more than 1 item.
+				if(index === 0 && this.shuffled && this.options.playlistOptions.shuffleOnLoop && this.playlist.length > 1) {
+					this.shuffle(true, true); // playNow
+				} else {
+					this.play(index);
+				}
+			} else {
+				// The index will be zero if it just looped round
+				if(index > 0) {
+					this.play(index);
+				}
+			}
+		},
+		previous: function() {
+			var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
+
+			if(this.loop && this.options.playlistOptions.loopOnPrevious || index < this.playlist.length - 1) {
+				this.play(index);
+			}
+		},
+		shuffle: function(shuffled, playNow) {
+			var self = this;
+
+			if(shuffled === undefined) {
+				shuffled = !this.shuffled;
+			}
+
+			if(shuffled || shuffled !== this.shuffled) {
+
+				$(this.cssSelector.playlist + " ul").slideUp(this.options.playlistOptions.shuffleTime, function() {
+					self.shuffled = shuffled;
+					if(shuffled) {
+						self.playlist.sort(function() {
+							return 0.5 - Math.random();
+						});
+					} else {
+						self._originalPlaylist();
+					}
+					self._refresh(true); // Instant
+
+					if(playNow || !$(self.cssSelector.jPlayer).data("jPlayer").status.paused) {
+						self.play(0);
+					} else {
+						self.select(0);
+					}
+
+					$(this).slideDown(self.options.playlistOptions.shuffleTime);
+				});
+			}
+		},
+		blur: function(that) {
+			if($(this.cssSelector.jPlayer).jPlayer("option", "autoBlur")) {
+				$(that).blur();
+			}
+		}
+	};
+})(jQuery);
--- a/app/assets/javascripts/video_pro/jplayer.playlist.min.js
+++ b/app/assets/javascripts/video_pro/jplayer.playlist.min.js
--- a/app/assets/javascripts/video_pro/jplayer_front.js
+++ b/app/assets/javascripts/video_pro/jplayer_front.js
--- a/app/assets/javascripts/video_pro/jqcloud.min.js
+++ b/app/assets/javascripts/video_pro/jqcloud.min.js
@ -0,0 +1,11 @@
+/*!
+ * jQCloud Plugin for jQuery
+ *
+ * Version 1.0.4
+ *
+ * Copyright 2011, Luca Ongaro
+ * Licensed under the MIT license.
+ *
+ * Date: 2013-05-09 18:54:22 +0200
+*/
+(function(e){"use strict";e.fn.jQCloud=function(t,n){var r=this,i=r.attr("id")||Math.floor(Math.random()*1e6).toString(36),s={width:r.width(),height:r.height(),center:{x:(n&&n.width?n.width:r.width())/2,y:(n&&n.height?n.height:r.height())/2},delayedMode:t.length>50,shape:!1,encodeURI:!0,removeOverflowing:!0};n=e.extend(s,n||{}),r.addClass("jqcloud").width(n.width).height(n.height),r.css("position")==="static"&&r.css("position","relative");var o=function(){var s=function(e,t){var n=function(e,t){return Math.abs(2*e.offsetLeft+e.offsetWidth-2*t.offsetLeft-t.offsetWidth)<e.offsetWidth+t.offsetWidth&&Math.abs(2*e.offsetTop+e.offsetHeight-2*t.offsetTop-t.offsetHeight)<e.offsetHeight+t.offsetHeight?!0:!1},r=0;for(r=0;r<t.length;r++)if(n(e,t[r]))return!0;return!1};for(var o=0;o<t.length;o++)t[o].weight=parseFloat(t[o].weight,10);t.sort(function(e,t){return e.weight<t.weight?1:e.weight>t.weight?-1:0});var u=n.shape==="rectangular"?18:2,a=[],f=n.width/n.height,l=function(o,l){var c=i+"_word_"+o,h="#"+c,p=6.28*Math.random(),d=0,v=0,m=0,g=5,y="",b="",w;l.html=e.extend(l.html,{id:c}),l.html&&l.html["class"]&&(y=l.html["class"],delete l.html["class"]),t[0].weight>t[t.length-1].weight&&(g=Math.round((l.weight-t[t.length-1].weight)/(t[0].weight-t[t.length-1].weight)*9)+1),w=e("<span>").attr(l.html).addClass("w"+g+" "+y),l.link?(typeof l.link=="string"&&(l.link={href:l.link}),n.encodeURI&&(l.link=e.extend(l.link,{href:encodeURI(l.link.href).replace(/'/g,"%27")})),b=e("<a>").attr(l.link).text(l.text)):b=l.text,w.append(b);if(!!l.handlers)for(var E in l.handlers)l.handlers.hasOwnProperty(E)&&typeof l.handlers[E]=="function"&&e(w).bind(E,l.handlers[E]);r.append(w);var S=w.width(),x=w.height(),T=n.center.x-S/2,N=n.center.y-x/2,C=w[0].style;C.position="absolute",C.left=T+"px",C.top=N+"px";while(s(w[0],a)){if(n.shape==="rectangular"){v++,v*u>(1+Math.floor(m/2))*u*(m%4%2===0?1:f)&&(v=0,m++);switch(m%4){case 1:T+=u*f+Math.random()*2;break;case 2:N-=u+Math.random()*2;break;case 3:T-=u*f+Math.random()*2;break;case 0:N+=u+Math.random()*2}}else d+=u,p+=(o%2===0?1:-1)*u,T=n.center.x-S/2+d*Math.cos(p)*f,N=n.center.y+d*Math.sin(p)-x/2;C.left=T+"px",C.top=N+"px"}if(n.removeOverflowing&&(T<0||N<0||T+S>n.width||N+x>n.height)){w.remove();return}a.push(w[0]),e.isFunction(l.afterWordRender)&&l.afterWordRender.call(w)},c=function(i){i=i||0;if(!r.is(":visible")){setTimeout(function(){c(i)},10);return}i<t.length?(l(i,t[i]),setTimeout(function(){c(i+1)},10)):e.isFunction(n.afterCloudRender)&&n.afterCloudRender.call(r)};n.delayedMode?c():(e.each(t,l),e.isFunction(n.afterCloudRender)&&n.afterCloudRender.call(r))};return setTimeout(function(){o()},10),r}})(jQuery);
--- a/app/assets/javascripts/video_pro/jquery.jplayer.inspector.js
+++ b/app/assets/javascripts/video_pro/jquery.jplayer.inspector.js
@ -0,0 +1,338 @@
+/*
+ * jPlayerInspector Plugin for jPlayer Plugin for jQuery JavaScript Library
+ * http://www.jplayer.org
+ *
+ * Copyright (c) 2009 - 2014 Happyworm Ltd
+ * Licensed under the MIT license.
+ * http://www.opensource.org/licenses/MIT
+ *
+ * Author: Mark J Panaghiston
+ * Version: 1.0.5
+ * Date: 1st April 2014
+ *
+ * For use with jPlayer Version: 2.6.0+
+ *
+ * Note: Declare inspector instances after jPlayer instances. ie., Otherwise the jPlayer instance is nonsense.
+ */
+
+(function($, undefined) {
+	$.jPlayerInspector = {};
+	$.jPlayerInspector.i = 0;
+	$.jPlayerInspector.defaults = {
+		jPlayer: undefined, // The jQuery selector of the jPlayer instance to inspect.
+		idPrefix: "jplayer_inspector_",
+		visible: false
+	};
+	
+	var methods = {
+		init: function(options) {
+			var self = this;
+			var $this = $(this);
+			
+			var config = $.extend({}, $.jPlayerInspector.defaults, options);
+			$(this).data("jPlayerInspector", config);
+
+			config.id = $(this).attr("id");
+			config.jPlayerId = config.jPlayer.attr("id");
+
+			config.windowId = config.idPrefix + "window_" + $.jPlayerInspector.i;
+			config.statusId = config.idPrefix + "status_" + $.jPlayerInspector.i;
+			config.configId = config.idPrefix + "config_" + $.jPlayerInspector.i;
+			config.toggleId = config.idPrefix + "toggle_" + $.jPlayerInspector.i;
+			config.eventResetId = config.idPrefix + "event_reset_" + $.jPlayerInspector.i;
+			config.updateId = config.idPrefix + "update_" + $.jPlayerInspector.i;
+			config.eventWindowId = config.idPrefix + "event_window_" + $.jPlayerInspector.i;
+			
+			config.eventId = {};
+			config.eventJq = {};
+			config.eventTimeout = {};
+			config.eventOccurrence = {};
+			
+			$.each($.jPlayer.event, function(eventName,eventType) {
+				config.eventId[eventType] = config.idPrefix + "event_" + eventName + "_" + $.jPlayerInspector.i;
+				config.eventOccurrence[eventType] = 0;
+			});
+			
+			var structure = 
+				'<p><a href="#" id="' + config.toggleId + '">' + (config.visible ? "Hide" : "Show") + '</a> jPlayer Inspector</p>' 
+				+ '<div id="' + config.windowId + '">'
+					+ '<div id="' + config.statusId + '"></div>'
+					+ '<div id="' + config.eventWindowId + '" style="padding:5px 5px 0 5px;background-color:#eee;border:1px dotted #000;">'
+						+ '<p style="margin:0 0 10px 0;"><strong>jPlayer events that have occurred over the past 1 second:</strong>'
+						+ '<br />(Backgrounds: <span style="padding:0 5px;background-color:#eee;border:1px dotted #000;">Never occurred</span> <span style="padding:0 5px;background-color:#fff;border:1px dotted #000;">Occurred before</span> <span style="padding:0 5px;background-color:#9f9;border:1px dotted #000;">Occurred</span> <span style="padding:0 5px;background-color:#ff9;border:1px dotted #000;">Multiple occurrences</span> <a href="#" id="' + config.eventResetId + '">reset</a>)</p>';
+			
+			// MJP: Would use the next 3 lines for ease, but the events are just slapped on the page.
+			// $.each($.jPlayer.event, function(eventName,eventType) {
+			// 	structure += '<div id="' + config.eventId[eventType] + '" style="float:left;">' + eventName + '</div>';
+			// });
+			
+			var eventStyle = "float:left;margin:0 5px 5px 0;padding:0 5px;border:1px dotted #000;";
+			// MJP: Doing it longhand so order and layout easier to control.
+			structure +=
+						'<div id="' + config.eventId[$.jPlayer.event.ready] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.setmedia] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.flashreset] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.resize] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.repeat] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.click] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.warning] + '" style="' + eventStyle + '"></div>'
+
+						+ '<div id="' + config.eventId[$.jPlayer.event.loadstart] + '" style="clear:left;' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.progress] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.timeupdate] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.volumechange] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.error] + '" style="' + eventStyle + '"></div>'
+
+						+ '<div id="' + config.eventId[$.jPlayer.event.play] + '" style="clear:left;' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.pause] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.waiting] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.playing] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.seeking] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.seeked] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.ended] + '" style="' + eventStyle + '"></div>'
+
+						+ '<div id="' + config.eventId[$.jPlayer.event.loadeddata] + '" style="clear:left;' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.loadedmetadata] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.canplay] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.canplaythrough] + '" style="' + eventStyle + '"></div>'
+
+						+ '<div id="' + config.eventId[$.jPlayer.event.suspend] + '" style="clear:left;' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.abort] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.emptied] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.stalled] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.ratechange] + '" style="' + eventStyle + '"></div>'
+						+ '<div id="' + config.eventId[$.jPlayer.event.durationchange] + '" style="' + eventStyle + '"></div>'
+
+						+ '<div style="clear:both"></div>';
+
+			// MJP: Would like a check here in case we missed an event.
+
+			// MJP: Check fails, since it is not on the page yet.
+/*			$.each($.jPlayer.event, function(eventName,eventType) {
+				if($("#" + config.eventId[eventType])[0] === undefined) {
+					structure += '<div id="' + config.eventId[eventType] + '" style="clear:left;' + eventStyle + '">' + eventName + '</div>';
+				}
+			});
+*/
+			structure +=
+					'</div>'
+					+ '<p><a href="#" id="' + config.updateId + '">Update</a> jPlayer Inspector</p>'
+					+ '<div id="' + config.configId + '"></div>'
+				+ '</div>';
+			$(this).html(structure);
+			
+			config.windowJq = $("#" + config.windowId);
+			config.statusJq = $("#" + config.statusId);
+			config.configJq = $("#" + config.configId);
+			config.toggleJq = $("#" + config.toggleId);
+			config.eventResetJq = $("#" + config.eventResetId);
+			config.updateJq = $("#" + config.updateId);
+
+			$.each($.jPlayer.event, function(eventName,eventType) {
+				config.eventJq[eventType] = $("#" + config.eventId[eventType]);
+				config.eventJq[eventType].text(eventName + " (" + config.eventOccurrence[eventType] + ")"); // Sets the text to the event name and (0);
+				
+				config.jPlayer.bind(eventType + ".jPlayerInspector", function(e) {
+					config.eventOccurrence[e.type]++;
+					if(config.eventOccurrence[e.type] > 1) {
+						config.eventJq[e.type].css("background-color","#ff9");
+					} else {
+						config.eventJq[e.type].css("background-color","#9f9");
+					}
+					config.eventJq[e.type].text(eventName + " (" + config.eventOccurrence[e.type] + ")");
+					// The timer to handle the color
+					clearTimeout(config.eventTimeout[e.type]);
+					config.eventTimeout[e.type] = setTimeout(function() {
+						config.eventJq[e.type].css("background-color","#fff");
+					}, 1000);
+					// The timer to handle the occurences.
+					setTimeout(function() {
+						config.eventOccurrence[e.type]--;
+						config.eventJq[e.type].text(eventName + " (" + config.eventOccurrence[e.type] + ")");
+					}, 1000);
+					if(config.visible) { // Update the status, if inspector open.
+						$this.jPlayerInspector("updateStatus");
+					}
+				});
+			});
+
+			config.jPlayer.bind($.jPlayer.event.ready + ".jPlayerInspector", function(e) {
+				$this.jPlayerInspector("updateConfig");
+			});
+
+			config.toggleJq.click(function() {
+				if(config.visible) {
+					$(this).text("Show");
+					config.windowJq.hide();
+					config.statusJq.empty();
+					config.configJq.empty();
+				} else {
+					$(this).text("Hide");
+					config.windowJq.show();
+					config.updateJq.click();
+				}
+				config.visible = !config.visible;
+				$(this).blur();
+				return false;
+			});
+
+			config.eventResetJq.click(function() {
+				$.each($.jPlayer.event, function(eventName,eventType) {
+					config.eventJq[eventType].css("background-color","#eee");
+				});
+				$(this).blur();
+				return false;
+			});
+
+			config.updateJq.click(function() {
+				$this.jPlayerInspector("updateStatus");
+				$this.jPlayerInspector("updateConfig");
+				return false;
+			});
+
+			if(!config.visible) {
+				config.windowJq.hide();
+			} else {
+				// config.updateJq.click();
+			}
+			
+			$.jPlayerInspector.i++;
+
+			return this;
+		},
+		destroy: function() {
+			$(this).data("jPlayerInspector") && $(this).data("jPlayerInspector").jPlayer.unbind(".jPlayerInspector");
+			$(this).empty();
+		},
+		updateConfig: function() { // This displays information about jPlayer's configuration in inspector
+		
+			var jPlayerInfo = "<p>This jPlayer instance is running in your browser where:<br />"
+
+			for(i = 0; i < $(this).data("jPlayerInspector").jPlayer.data("jPlayer").solutions.length; i++) {
+				var solution = $(this).data("jPlayerInspector").jPlayer.data("jPlayer").solutions[i];
+				jPlayerInfo += "&nbsp;jPlayer's <strong>" + solution + "</strong> solution is";				
+				if($(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].used) {
+					jPlayerInfo += " being <strong>used</strong> and will support:<strong>";
+					for(format in $(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].support) {
+						if($(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].support[format]) {
+							jPlayerInfo += " " + format;
+						}
+					}
+					jPlayerInfo += "</strong><br />";
+				} else {
+					jPlayerInfo += " <strong>not required</strong><br />";
+				}
+			}
+			jPlayerInfo += "</p>";
+
+			if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.active) {
+				if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").flash.active) {
+					jPlayerInfo += "<strong>Problem with jPlayer since both HTML5 and Flash are active.</strong>";
+				} else {
+					jPlayerInfo += "The <strong>HTML5 is active</strong>.";
+				}
+			} else {
+				if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").flash.active) {
+					jPlayerInfo += "The <strong>Flash is active</strong>.";
+				} else {
+					jPlayerInfo += "No solution is currently active. jPlayer needs a setMedia().";
+				}
+			}
+			jPlayerInfo += "</p>";
+
+			var formatType = $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.formatType;
+			jPlayerInfo += "<p><code>status.formatType = '" + formatType + "'</code><br />";
+			if(formatType) {
+				jPlayerInfo += "<code>Browser canPlay('" + $.jPlayer.prototype.format[formatType].codec + "')</code>";
+			} else {
+				jPlayerInfo += "</p>";
+			}
+			
+			jPlayerInfo += "<p><code>status.src = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.src + "'</code></p>";
+
+			jPlayerInfo += "<p><code>status.media = {<br />";
+			for(prop in $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.media) {
+				jPlayerInfo += "&nbsp;" + prop + ": " + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.media[prop] + "<br />"; // Some are strings
+			}
+			jPlayerInfo += "};</code></p>"
+
+			jPlayerInfo += "<p>";
+			jPlayerInfo += "<code>status.videoWidth = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.videoWidth + "'</code>";
+			jPlayerInfo += " | <code>status.videoHeight = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.videoHeight + "'</code>";
+			jPlayerInfo += "<br /><code>status.width = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.width + "'</code>";
+			jPlayerInfo += " | <code>status.height = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.height + "'</code>";
+			jPlayerInfo += "</p>";
+
+			+ "<p>Raw browser test for HTML5 support. Should equal a function if HTML5 is available.<br />";
+			if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.audio.available) {
+				jPlayerInfo += "<code>htmlElement.audio.canPlayType = " + (typeof $(this).data("jPlayerInspector").jPlayer.data("jPlayer").htmlElement.audio.canPlayType) +"</code><br />"
+			}
+			if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.video.available) {
+				jPlayerInfo += "<code>htmlElement.video.canPlayType = " + (typeof $(this).data("jPlayerInspector").jPlayer.data("jPlayer").htmlElement.video.canPlayType) +"</code>";
+			}
+			jPlayerInfo += "</p>";
+
+			jPlayerInfo += "<p>This instance is using the constructor options:<br />"
+			+ "<code>$('#" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").internal.self.id + "').jPlayer({<br />"
+
+			+ "&nbsp;swfPath: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "swfPath") + "',<br />"
+
+			+ "&nbsp;solution: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "solution") + "',<br />"
+
+			+ "&nbsp;supplied: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "supplied") + "',<br />"
+
+			+ "&nbsp;preload: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "preload") + "',<br />"
+			
+			+ "&nbsp;volume: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "volume") + ",<br />"
+			
+			+ "&nbsp;muted: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "muted") + ",<br />"
+
+			+ "&nbsp;backgroundColor: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "backgroundColor") + "',<br />"
+
+			+ "&nbsp;cssSelectorAncestor: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelectorAncestor") + "',<br />"
+
+			+ "&nbsp;cssSelector: {";
+
+			var cssSelector = $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelector");
+			for(prop in cssSelector) {
+				
+				// jPlayerInfo += "<br />&nbsp;&nbsp;" + prop + ": '" + cssSelector[prop] + "'," // This works too of course, but want to use option method for deep keys.
+				jPlayerInfo += "<br />&nbsp;&nbsp;" + prop + ": '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelector." + prop) + "',"
+			}
+
+			jPlayerInfo = jPlayerInfo.slice(0, -1); // Because the sloppy comma was bugging me.
+
+			jPlayerInfo += "<br />&nbsp;},<br />"
+
+			+ "&nbsp;errorAlerts: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "errorAlerts") + ",<br />"
+			
+			+ "&nbsp;warningAlerts: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "warningAlerts") + "<br />"
+
+			+ "});</code></p>";
+			$(this).data("jPlayerInspector").configJq.html(jPlayerInfo);
+			return this;
+		},
+		updateStatus: function() { // This displays information about jPlayer's status in the inspector
+			$(this).data("jPlayerInspector").statusJq.html(
+				"<p>jPlayer is " +
+				($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.paused ? "paused" : "playing") +
+				" at time: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentTime*10)/10 + "s." +
+				" (d: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.duration*10)/10 + "s" +
+				", sp: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.seekPercent) + "%" +
+				", cpr: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentPercentRelative) + "%" +
+				", cpa: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentPercentAbsolute) + "%)</p>"
+			);
+			return this;
+		}
+	};
+	$.fn.jPlayerInspector = function( method ) {
+		// Method calling logic
+		if ( methods[method] ) {
+			return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
+		} else if ( typeof method === 'object' || ! method ) {
+			return methods.init.apply( this, arguments );
+		} else {
+			$.error( 'Method ' +  method + ' does not exist on jQuery.jPlayerInspector' );
+		}    
+	};
+})(jQuery);
--- a/app/assets/javascripts/video_pro/jquery.jplayer.inspector.min.js
+++ b/app/assets/javascripts/video_pro/jquery.jplayer.inspector.min.js
--- a/app/assets/javascripts/video_pro/jquery.jplayer.js
+++ b/app/assets/javascripts/video_pro/jquery.jplayer.js
--- a/app/assets/javascripts/video_pro/jquery.jplayer.min.js
+++ b/app/assets/javascripts/video_pro/jquery.jplayer.min.js
--- a/app/assets/javascripts/video_pro/jquery.jplayer.swf
+++ b/app/assets/javascripts/video_pro/jquery.jplayer.swf
--- a/app/assets/javascripts/video_pro/popcorn.jplayer.js
+++ b/app/assets/javascripts/video_pro/popcorn.jplayer.js
@ -0,0 +1,579 @@
+/*
+ * jPlayer Player Plugin for Popcorn JavaScript Library
+ * http://www.jplayer.org
+ *
+ * Copyright (c) 2012 - 2014 Happyworm Ltd
+ * Licensed under the MIT license.
+ * http://opensource.org/licenses/MIT
+ *
+ * Author: Mark J Panaghiston
+ * Version: 1.1.6
+ * Date: 27th November 2014
+ *
+ * For Popcorn Version: 1.3
+ * For jPlayer Version: 2.9.0
+ * Requires: jQuery 1.7+
+ * Note: jQuery dependancy cannot be removed since jPlayer 2 is a jQuery plugin. Use of jQuery will be kept to a minimum.
+ */
+
+(function(Popcorn) {
+
+	var JQUERY_SCRIPT = '//code.jquery.com/jquery-1.11.1.min.js', // Used if jQuery not already present.
+	JPLAYER_SCRIPT = '//code.jplayer.org/2.9.0/jplayer/jquery.jplayer.min.js', // Used if jPlayer not already present.
+	JPLAYER_SWFPATH = '//code.jplayer.org/2.9.0/jplayer/jquery.jplayer.swf', // Used if not specified in jPlayer options via SRC Object.
+	SOLUTION = 'html,flash', // The default solution option.
+	DEBUG = false, // Decided to leave the debugging option and console output in for the time being. Overhead is trivial.
+	jQueryDownloading = false, // Flag to stop multiple instances from each pulling in jQuery, thus corrupting it.
+	jPlayerDownloading = false, // Flag to stop multiple instances from each pulling in jPlayer, thus corrupting it.
+	format = { // Duplicate of jPlayer 2.5.0 object, to avoid always requiring jQuery and jPlayer to be loaded before performing the _canPlayType() test.
+		mp3: {
+			codec: 'audio/mpeg',
+			flashCanPlay: true,
+			media: 'audio'
+		},
+		m4a: { // AAC / MP4
+			codec: 'audio/mp4; codecs="mp4a.40.2"',
+			flashCanPlay: true,
+			media: 'audio'
+		},
+		m3u8a: { // AAC / MP4 / Apple HLS
+			codec: 'application/vnd.apple.mpegurl; codecs="mp4a.40.2"',
+			flashCanPlay: false,
+			media: 'audio'
+		},
+		m3ua: { // M3U
+			codec: 'audio/mpegurl',
+			flashCanPlay: false,
+			media: 'audio'
+		},
+		oga: { // OGG
+			codec: 'audio/ogg; codecs="vorbis, opus"',
+			flashCanPlay: false,
+			media: 'audio'
+		},
+		flac: { // FLAC
+			codec: 'audio/x-flac',
+			flashCanPlay: false,
+			media: 'audio'
+		},
+		wav: { // PCM
+			codec: 'audio/wav; codecs="1"',
+			flashCanPlay: false,
+			media: 'audio'
+		},
+		webma: { // WEBM
+			codec: 'audio/webm; codecs="vorbis"',
+			flashCanPlay: false,
+			media: 'audio'
+		},
+		fla: { // FLV / F4A
+			codec: 'audio/x-flv',
+			flashCanPlay: true,
+			media: 'audio'
+		},
+		rtmpa: { // RTMP AUDIO
+			codec: 'audio/rtmp; codecs="rtmp"',
+			flashCanPlay: true,
+			media: 'audio'
+		},
+		m4v: { // H.264 / MP4
+			codec: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
+			flashCanPlay: true,
+			media: 'video'
+		},
+		m3u8v: { // H.264 / AAC / MP4 / Apple HLS
+			codec: 'application/vnd.apple.mpegurl; codecs="avc1.42E01E, mp4a.40.2"',
+			flashCanPlay: false,
+			media: 'video'
+		},
+		m3uv: { // M3U
+			codec: 'audio/mpegurl',
+			flashCanPlay: false,
+			media: 'video'
+		},
+		ogv: { // OGG
+			codec: 'video/ogg; codecs="theora, vorbis"',
+			flashCanPlay: false,
+			media: 'video'
+		},
+		webmv: { // WEBM
+			codec: 'video/webm; codecs="vorbis, vp8"',
+			flashCanPlay: false,
+			media: 'video'
+		},
+		flv: { // FLV / F4V
+			codec: 'video/x-flv',
+			flashCanPlay: true,
+			media: 'video'
+		},
+		rtmpv: { // RTMP VIDEO
+			codec: 'video/rtmp; codecs="rtmp"',
+			flashCanPlay: true,
+			media: 'video'
+		}
+	},
+	isObject = function(val) { // Basic check for Object
+		if(val && typeof val === 'object' && val.hasOwnProperty) {
+			return true;
+		} else {
+			return false;
+		}
+	},
+	getMediaType = function(url) { // Function to gleam the media type from the URL
+		var mediaType = false;
+		if(/\.mp3$/i.test(url)) {
+			mediaType = 'mp3';
+		} else if(/\.mp4$/i.test(url) || /\.m4v$/i.test(url)) {
+			mediaType = 'm4v';
+		} else if(/\.m4a$/i.test(url)) {
+			mediaType = 'm4a';
+		} else if(/\.ogg$/i.test(url) || /\.oga$/i.test(url)) {
+			mediaType = 'oga';
+		} else if(/\.ogv$/i.test(url)) {
+			mediaType = 'ogv';
+		} else if(/\.webm$/i.test(url)) {
+			mediaType = 'webmv';
+		}
+		return mediaType;
+	},
+	getSupplied = function(url) { // Function to generate a supplied option from an src object. ie., When supplied not specified.
+		var supplied = '',
+		separator = '';
+		if(isObject(url)) {
+			// Generate supplied option from object's properties. Non-format properties would be ignored by jPlayer. Order is unpredictable.
+			for(var prop in url) {
+				if(url.hasOwnProperty(prop)) {
+					supplied += separator + prop;
+					separator = ',';
+				}
+			}
+		}
+		if(DEBUG) console.log('getSupplied(): Generated: supplied = "' + supplied + '"');
+		return supplied;
+	};
+
+	Popcorn.player( 'jplayer', {
+		_canPlayType: function( containerType, url ) {
+			// url : Either a String or an Object structured similar a jPlayer media object. ie., As used by setMedia in jPlayer.
+			// The url object may also contain a solution and supplied property.
+
+			// Define the src object structure here!
+
+			var cType = containerType.toLowerCase(),
+			srcObj = {
+				media:{},
+				options:{}
+			},
+			rVal = false, // Only a boolean false means it is not supported.
+			mediaType;
+
+			if(cType !== 'video' && cType !== 'audio') {
+
+				if(typeof url === 'string') {
+					// Check it starts with http, so the URL is absolute... Well, it is not a perfect check.
+					if(/^http.*/i.test(url)) {
+						mediaType = getMediaType(url);
+						if(mediaType) {
+							srcObj.media[mediaType] = url;
+							srcObj.options.solution = SOLUTION;
+							srcObj.options.supplied = mediaType;
+						}
+					}
+				} else {
+					srcObj = url; // Assume the url is an src object.
+				}
+
+				// Check for Object and appropriate minimum data structure.
+				if(isObject(srcObj) && isObject(srcObj.media)) {
+
+					if(!isObject(srcObj.options)) {
+						srcObj.options = {};
+					}
+
+					if(!srcObj.options.solution) {
+						srcObj.options.solution = SOLUTION;
+					}
+
+					if(!srcObj.options.supplied) {
+						srcObj.options.supplied = getSupplied(srcObj.media);
+					}
+
+					// Figure out how jPlayer will play it.
+					// This may not work properly when both audio and video is supplied. ie., A media player. But it should return truethy and jPlayer can figure it out.
+					
+					var solution = srcObj.options.solution.toLowerCase().split(","), // Create the solution array, with prority based on the order of the solution string.
+					supplied = srcObj.options.supplied.toLowerCase().split(","); // Create the supplied formats array, with prority based on the order of the supplied formats string.
+
+					for(var sol = 0; sol < solution.length; sol++) {
+
+						var solutionType = solution[sol].replace(/^\s+|\s+$/g, ""), //trim
+						checkingHtml = solutionType === 'html',
+						checkingFlash = solutionType === 'flash',
+						mediaElem;
+
+						for(var fmt = 0; fmt < supplied.length; fmt++) {
+							mediaType = supplied[fmt].replace(/^\s+|\s+$/g, ""); //trim
+							if(format[mediaType]) { // Check format is valid.
+
+								// Create an HTML5 media element for the type of media.
+								if(!mediaElem && checkingHtml) {
+									mediaElem = document.createElement(format[mediaType].media);
+								}
+								// See if the HTML5 media element can play the MIME / Codec type.
+								// Flash also returns the object if the format is playable, so it is truethy, but that html property is false.
+								// This assumes Flash is available, but that should be dealt with by jPlayer if that happens.
+								var htmlCanPlay = !!(mediaElem && mediaElem.canPlayType && mediaElem.canPlayType(format[mediaType].codec)),
+								htmlWillPlay = htmlCanPlay && checkingHtml,
+								flashWillPlay = format[mediaType].flashCanPlay && checkingFlash;
+								// The first one found will match what jPlayer uses.
+								if(htmlWillPlay || flashWillPlay) {
+									rVal = {
+										html: htmlWillPlay,
+										type: mediaType
+									};
+									sol = solution.length; // Exit solution loop
+									fmt = supplied.length; // Exit supplied loop
+								}
+							}
+						}
+					}
+				}
+			}
+			return rVal;
+		},
+		// _setup: function( options ) { // Warning: options is deprecated.
+		_setup: function() {
+			var media = this,
+			myPlayer, // The jQuery selector of the jPlayer element. Usually a <div>
+			jPlayerObj, // The jPlayer data instance. For performance and DRY code.
+			mediaType = 'unknown',
+			jpMedia = {},
+			jpOptions = {},
+			ready = false, // Used during init to override the annoying duration dependance in the track event padding during Popcorn's isReady(). ie., We is ready after loadeddata and duration can then be set real value at leisure.
+			duration = 0, // For the durationchange event with both HTML5 and Flash solutions. Used with 'ready' to keep control during the Popcorn isReady() via loadeddata event. (Duration=0 is bad.)
+			durationchangeId = null, // A timeout ID used with delayed durationchange event. (Because of the duration=NaN fudge to avoid Popcorn track event corruption.)
+			canplaythrough = false,
+			error = null, // The MediaError object.
+
+			dispatchDurationChange = function() {
+				if(ready) {
+					if(DEBUG) console.log('Dispatched event : durationchange : ' + duration);
+					media.dispatchEvent('durationchange');
+				} else {
+					if(DEBUG) console.log('DELAYED EVENT (!ready) : durationchange : ' + duration);
+					clearTimeout(durationchangeId); // Stop multiple triggers causing multiple timeouts running in parallel.
+					durationchangeId = setTimeout(dispatchDurationChange, 250);
+				}
+			},
+
+			jPlayerFlashEventsPatch = function() {
+
+				/* Events already supported by jPlayer Flash:
+				 * loadstart
+				 * loadedmetadata (M4A, M4V)
+				 * progress
+				 * play
+				 * pause
+				 * seeking
+				 * seeked
+				 * timeupdate
+				 * ended
+				 * volumechange
+				 * error <- See the custom handler in jPlayerInit()
+				 */
+
+				/* Events patched:
+				 * loadeddata
+				 * durationchange
+				 * canplaythrough
+				 * playing
+				 */
+
+				/* Events NOT patched:
+				 * suspend
+				 * abort
+				 * emptied
+				 * stalled
+				 * loadedmetadata (MP3)
+				 * waiting
+				 * canplay
+				 * ratechange
+				 */
+
+				// Triggering patched events through the jPlayer Object so the events are homogeneous. ie., The contain the event.jPlayer data structure.
+
+				var checkDuration = function(event) {
+					if(event.jPlayer.status.duration !== duration) {
+						duration = event.jPlayer.status.duration;
+						dispatchDurationChange();
+					}
+				},
+
+				checkCanPlayThrough = function(event) {
+					if(!canplaythrough && event.jPlayer.status.seekPercent === 100) {
+						canplaythrough = true;
+						setTimeout(function() {
+							if(DEBUG) console.log('Trigger : canplaythrough');
+							jPlayerObj._trigger($.jPlayer.event.canplaythrough);
+						}, 0);
+					}
+				};
+
+				myPlayer.bind($.jPlayer.event.loadstart, function() {
+					setTimeout(function() {
+						if(DEBUG) console.log('Trigger : loadeddata');
+						jPlayerObj._trigger($.jPlayer.event.loadeddata);
+					}, 0);
+				})
+				.bind($.jPlayer.event.progress, function(event) {
+					checkDuration(event);
+					checkCanPlayThrough(event);
+				})
+				.bind($.jPlayer.event.timeupdate, function(event) {
+					checkDuration(event);
+					checkCanPlayThrough(event);
+				})
+				.bind($.jPlayer.event.play, function() {
+					setTimeout(function() {
+						if(DEBUG) console.log('Trigger : playing');
+						jPlayerObj._trigger($.jPlayer.event.playing);
+					}, 0);
+				});
+
+				if(DEBUG) console.log('Created CUSTOM event handlers for FLASH');
+			},
+
+			jPlayerInit = function() {
+				(function($) {
+
+					myPlayer = $('#' +  media.id);
+
+					if(typeof media.src === 'string') {
+						mediaType = getMediaType(media.src);
+						jpMedia[mediaType] = media.src;
+						jpOptions.supplied = mediaType;
+						jpOptions.solution = SOLUTION;
+					} else if(isObject(media.src)) {
+						jpMedia = isObject(media.src.media) ? media.src.media : {};
+						jpOptions = isObject(media.src.options) ? media.src.options : {};
+						jpOptions.solution = jpOptions.solution || SOLUTION;
+						jpOptions.supplied = jpOptions.supplied || getSupplied(media.src.media);
+					}
+
+					// Allow the swfPath to be set to local server. ie., If the jPlayer Plugin is local and already on the page, then you can also use the local SWF.
+					jpOptions.swfPath = jpOptions.swfPath || JPLAYER_SWFPATH;
+
+					myPlayer.bind($.jPlayer.event.ready, function(event) {
+						if(event.jPlayer.flash.used) {
+							jPlayerFlashEventsPatch();
+						}
+						// Set the media andd load it, so that the Flash solution behaves similar to HTML5 solution.
+						// This also allows the loadstart event to be used to know jPlayer is ready.
+						$(this).jPlayer('setMedia', jpMedia).jPlayer('load');
+					});
+
+					// Do not auto-bubble the reserved events, nor the loadeddata and durationchange event, since the duration must be carefully handled when loadeddata event occurs.
+					// See the duration property code for more details. (Ranting.)
+
+					var reservedEvents = $.jPlayer.reservedEvent + ' loadeddata durationchange',
+					reservedEvent = reservedEvents.split(/\s+/g);
+
+					// Generate event handlers for all the standard HTML5 media events. (Except durationchange)
+
+					var bindEvent = function(name) {
+						myPlayer.bind($.jPlayer.event[name], function(event) {
+							if(DEBUG) console.log('Dispatched event: ' + name + (event && event.jPlayer ? ' (' + event.jPlayer.status.currentTime + 's)' : '')); // Must be after dispatch for some reason on Firefox/Opera
+							media.dispatchEvent(name);
+						});
+						if(DEBUG) console.log('Created event handler for: ' + name);
+					};
+
+					for(var eventName in $.jPlayer.event) {
+						if($.jPlayer.event.hasOwnProperty(eventName)) {
+							var nativeEvent = true;
+							for(var iRes in reservedEvent) {
+								if(reservedEvent.hasOwnProperty(iRes)) {
+									if(reservedEvent[iRes] === eventName) {
+										nativeEvent = false;
+										break;
+									}
+								}
+							}
+							if(nativeEvent) {
+								bindEvent(eventName);
+							} else {
+								if(DEBUG) console.log('Skipped auto event handler creation for: ' + eventName);
+							}
+						}
+					}
+
+					myPlayer.bind($.jPlayer.event.loadeddata, function(event) {
+						if(DEBUG) console.log('Dispatched event: loadeddata' + (event && event.jPlayer ? ' (' + event.jPlayer.status.currentTime + 's)' : ''));
+						media.dispatchEvent('loadeddata');
+						ready = true;
+					});
+					if(DEBUG) console.log('Created CUSTOM event handler for: loadeddata');
+
+					myPlayer.bind($.jPlayer.event.durationchange, function(event) {
+						duration = event.jPlayer.status.duration;
+						dispatchDurationChange();
+					});
+					if(DEBUG) console.log('Created CUSTOM event handler for: durationchange');
+
+					// The error event is a special case. Plus jPlayer error event assumes it is a broken URL. (It could also be a decoder error... Or aborted or a Network error.)
+					myPlayer.bind($.jPlayer.event.error, function(event) {
+						// Not sure how to handle the error situation. Popcorn does not appear to have the error or error.code property documented here: http://popcornjs.org/popcorn-docs/media-methods/
+						// If any error event happens, then something has gone pear shaped.
+
+						error = event.jPlayer.error; // Saving object pointer, not a copy of the object. Possible garbage collection issue... But the player is dead anyway, so don't care.
+
+						if(error.type === $.jPlayer.error.URL) {
+							error.code = 4; // MEDIA_ERR_SRC_NOT_SUPPORTED since jPlayer makes this assumption. It is the most common error, then the decode error. Never seen either of the other 2 error types occur.
+						} else {
+							error.code = 0; // It was a jPlayer error, not an HTML5 media error.
+						}
+
+						if(DEBUG) console.log('Dispatched event: error');
+						if(DEBUG) console.dir(error);
+						media.dispatchEvent('error');
+					});
+					if(DEBUG) console.log('Created CUSTOM event handler for: error');
+
+					Popcorn.player.defineProperty( media, 'error', {
+						set: function() {
+							// Read-only property
+							return error;
+						},
+						get: function() {
+							return error;
+						}
+					});
+
+					Popcorn.player.defineProperty( media, 'currentTime', {
+						set: function( val ) {
+							if(jPlayerObj.status.paused) {
+								myPlayer.jPlayer('pause', val);
+							} else {
+								myPlayer.jPlayer('play', val);
+							}
+							return val;
+						},
+						get: function() {
+							return jPlayerObj.status.currentTime;
+						}
+					});
+
+					/* The joy of duration and the loadeddata event isReady() handler
+					 * The duration is assumed to be a NaN or a valid duration.
+					 * jPlayer uses zero instead of a NaN and this screws up the Popcorn track event start/end arrays padding.
+					 * This line here:
+					 *  videoDurationPlus = duration != duration ? Number.MAX_VALUE : duration + 1;
+					 * Not sure why it is not simply:
+					 *  videoDurationPlus = Number.MAX_VALUE; // Who cares if the padding is close to the real duration?
+					 * So if you trigger loadeddata before the duration is correct, the track event padding is screwed up. (It pads the start, not the end... Well, duration+1 = 0+1 = 1s)
+					 * That line makes the MP3 Flash fallback difficult to setup. The whole MP3 will need to load before the duration is known.
+					 * Planning on using a NaN for duration until a >0 value is found... Except with MP3, where seekPercent must be 100% before setting the duration.
+					 * Why not just use a NaN during init... And then correct the duration later?
+					 */
+
+					Popcorn.player.defineProperty( media, 'duration', {
+						set: function() {
+							// Read-only property
+							if(ready) {
+								return duration;
+							} else {
+								return NaN;
+							}
+						},
+						get: function() {
+							if(ready) {
+								return duration; // Popcorn has initialized, we can now use duration zero or whatever without fear.
+							} else {
+								return NaN; // Keep the duration a NaN until after loadeddata event has occurred. Otherwise Popcorn track event padding is corrupted.
+							}
+						}
+					});
+
+					Popcorn.player.defineProperty( media, 'muted', {
+						set: function( val ) {
+							myPlayer.jPlayer('mute', val);
+							return jPlayerObj.options.muted;
+						},
+						get: function() {
+							return jPlayerObj.options.muted;
+						}
+					});
+
+					Popcorn.player.defineProperty( media, 'volume', {
+						set: function( val ) {
+							myPlayer.jPlayer('volume', val);
+							return jPlayerObj.options.volume;
+						},
+						get: function() {
+							return jPlayerObj.options.volume;
+						}
+					});
+
+					Popcorn.player.defineProperty( media, 'paused', {
+						set: function() {
+							// Read-only property
+							return jPlayerObj.status.paused;
+						},
+						get: function() {
+							return jPlayerObj.status.paused;
+						}
+					});
+
+					media.play = function() {
+						myPlayer.jPlayer('play');
+					};
+					media.pause = function() {
+						myPlayer.jPlayer('pause');
+					};
+
+					myPlayer.jPlayer(jpOptions); // Instance jPlayer. Note that the options should not have a ready event defined... Kill it by default?
+					jPlayerObj = myPlayer.data('jPlayer');
+
+				}(jQuery));
+			},
+
+			jPlayerCheck = function() {
+				if (!jQuery.jPlayer) {
+					if (!jPlayerDownloading) {
+						jPlayerDownloading = true;
+						Popcorn.getScript(JPLAYER_SCRIPT, function() {
+							jPlayerDownloading = false;
+							jPlayerInit();
+						});
+					} else {
+						setTimeout(jPlayerCheck, 250);
+					}
+				} else {
+					jPlayerInit();
+				}
+			},
+
+			jQueryCheck = function() {
+				if (!window.jQuery) {
+					if (!jQueryDownloading) {
+						jQueryDownloading = true;
+						Popcorn.getScript(JQUERY_SCRIPT, function() {
+							jQueryDownloading = false;
+							jPlayerCheck();
+						});
+					} else {
+						setTimeout(jQueryCheck, 250);
+					}
+				} else {
+					jPlayerCheck();
+				}
+			};
+
+			jQueryCheck();
+		},
+		_teardown: function() {
+			jQuery('#' +  this.id).jPlayer('destroy');
+		}
+	});
+
+}(Popcorn));
--- a/app/assets/javascripts/video_pro/popcorn.jplayer.min.js
+++ b/app/assets/javascripts/video_pro/popcorn.jplayer.min.js
--- a/app/assets/javascripts/video_pro/video_data_preview.js
+++ b/app/assets/javascripts/video_pro/video_data_preview.js
@ -0,0 +1,76 @@
+function slideshow (element, video_dataEffect, video_dataTime, video_dataSpeed) {
+    element.cycle('destroy');
+    element.children('img').removeAttr('class');;
+    element.cycle({
+        fx: video_dataEffect,
+        timeout: video_dataTime,
+        speed: video_dataSpeed,
+    });
+};
+function setSlideshow(element, data) {
+    slideshow(element, data['fx'], 2000, 1000);
+}
+
+function preview() {
+    $('.open-modal').on('click', function() {
+        var _data = $(this).data();
+        video_dataName = _data.name;
+        video_dataEffect = _data.fx;
+        video_dataTime = _data.time;
+        video_dataSpeed = _data.speed;
+        video_dataW = _data.w;
+        video_dataH = _data.h;
+        $('#preview').modal('show');
+    });
+
+    $('#preview').on('shown', function() {
+        $(this).attr('aria-labelledby', video_dataName.toString()).find('h3').text(video_dataName.toString())
+        if(video_dataW > 500) {
+            var resize = 500/video_dataW
+            video_dataW = Math.floor(video_dataW*resize);
+            video_dataH = Math.floor(video_dataH*resize);
+            console.log(video_dataW)
+        };
+        if(video_dataH > 300) {
+            var resize = 300/video_dataH
+            video_dataW = Math.floor(video_dataW*resize);
+            video_dataH = Math.floor(video_dataH*resize);
+        }
+        slideshow($(this).find('.preview'), video_dataEffect, video_dataTime, video_dataSpeed);
+        $(this).find('.preview').css({
+            'width': video_dataW,
+            'height': video_dataH
+        });
+        $(this).find('.preview img').css({
+            'width': '100%',
+            'height': '100%'
+        });
+    });
+    $('#preview').on('hidden', function() {
+        $(this).attr('aria-labelledby', '').find('h3').text('')
+        $(this).find('.preview').cycle('destroy');
+        $(this).find('.preview img').removeAttr('style');
+    });
+};
+
+$(function() {
+    var video_dataName = null,
+        video_dataEffect = null,
+        video_dataTime = null,
+        video_dataSpeed = null,
+        video_dataW = null,
+        video_dataH = null,
+        $preview = $('.main-forms .preview');
+
+    $(".video_pro_ad_fx").change(function () {
+        var suckIE = false;
+        // video_dataTime = $("#pageslide #timeout").val()*1000;
+        // video_dataSpeed = $("#pageslide #speed").val()*1000;
+
+        video_dataTime = parseInt(video_dataTime) || 300;
+        video_dataSpeed = parseInt(video_dataSpeed) || 300;
+        slideshow($preview, $(this).val(), 2000, 1000);
+    });
+    preview();
+});
+
--- a/app/assets/stylesheets/admin/video_images.css
+++ b/app/assets/stylesheets/admin/video_images.css
@ -0,0 +1,4 @@
+/*
+  Place all the styles related to the matching controller here.
+  They will automatically be included in application.css.
+*/
--- a/app/assets/stylesheets/admin/video_pros.css
+++ b/app/assets/stylesheets/admin/video_pros.css
@ -0,0 +1,4 @@
+/*
+  Place all the styles related to the matching controller here.
+  They will automatically be included in application.css.
+*/
--- a/app/assets/stylesheets/video_pro/.keep
+++ b/app/assets/stylesheets/video_pro/.keep
--- a/app/assets/stylesheets/video_pro/jplayer.blue.monday.css
+++ b/app/assets/stylesheets/video_pro/jplayer.blue.monday.css
@ -0,0 +1,555 @@
+/*! Blue Monday Skin for jPlayer 2.9.2 ~ (c) 2009-2014 Happyworm Ltd ~ MIT License */
+
+/*
+ * Skin for jPlayer Plugin (jQuery JavaScript Library)
+ * http://www.jplayer.org
+ *
+ * Skin Name: Blue Monday
+ *
+ * Copyright (c) 2010 - 2014 Happyworm Ltd
+ * Licensed under the MIT license.
+ *  - http://www.opensource.org/licenses/mit-license.php
+ *
+ * Author: Silvia Benvenuti
+ * Skin Version: 5.1 (jPlayer 2.8.0)
+ * Date: 13th November 2014
+ */
+.jp-audio *:focus,
+.jp-audio-stream *:focus,
+.jp-video *:focus {
+  /* Disable the browser focus highlighting. */
+  outline: none; }
+
+.jp-audio button::-moz-focus-inner,
+.jp-audio-stream button::-moz-focus-inner,
+.jp-video button::-moz-focus-inner {
+  /* Disable the browser CSS3 focus highlighting. */
+  border: 0; }
+
+.jp-audio,
+.jp-audio-stream,
+.jp-video {
+  font-size: 1em;
+  font-family: Verdana, Arial, sans-serif;
+  line-height: 1.6;
+  color: #666;
+  border: 1px solid #009be3;
+  background-color: #eee; }
+
+.jp-audio {
+  width: 420px; }
+
+.jp-audio-stream {
+  width: 182px; }
+
+.jp-video-270p {
+  width: 480px; }
+
+.jp-video-360p {
+  width: 640px; }
+
+.jp-video-full {
+  /* Rules for IE6 (full-screen) */
+  width: 480px;
+  height: 270px;
+  /* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */
+  position: static !important;
+  position: relative; }
+
+/* The z-index rule is defined in this manner to enable Popcorn plugins that add overlays to video area. EG. Subtitles. */
+.jp-video-full div div {
+  z-index: 1000; }
+
+.jp-video-full .jp-jplayer {
+  top: 0;
+  left: 0;
+  position: fixed !important;
+  position: relative;
+  /* Rules for IE6 (full-screen) */
+  overflow: hidden; }
+
+.jp-video-full .jp-gui {
+  position: fixed !important;
+  position: static;
+  /* Rules for IE6 (full-screen) */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1001;
+  /* 1 layer above the others. */ }
+
+.jp-video-full .jp-interface {
+  position: absolute !important;
+  position: relative;
+  /* Rules for IE6 (full-screen) */
+  bottom: 0;
+  left: 0; }
+
+.jp-interface {
+  position: relative;
+  background-color: #eee;
+  width: 100%; }
+
+.jp-audio .jp-interface {
+  height: 80px; }
+
+.jp-audio-stream .jp-interface {
+  height: 80px; }
+
+.jp-video .jp-interface {
+  border-top: 1px solid #009be3; }
+
+/* @group CONTROLS */
+.jp-controls-holder {
+  clear: both;
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+  overflow: hidden;
+  top: -8px;
+  /* This negative value depends on the size of the text in jp-currentTime and jp-duration */ }
+
+.jp-interface .jp-controls {
+  margin: 0;
+  padding: 0;
+  overflow: hidden; }
+
+.jp-audio .jp-controls {
+  width: 380px;
+  padding: 20px 20px 0 20px; }
+
+.jp-audio-stream .jp-controls {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 142px; }
+
+.jp-video .jp-type-single .jp-controls {
+  width: 78px;
+  margin-left: 200px; }
+
+.jp-video .jp-type-playlist .jp-controls {
+  width: 134px;
+  margin-left: 172px; }
+
+.jp-video .jp-controls {
+  float: left; }
+
+.jp-controls button {
+  display: block;
+  float: left;
+  overflow: hidden;
+  text-indent: -9999px;
+  border: none;
+  cursor: pointer; }
+
+.jp-play {
+  width: 40px;
+  height: 40px; }
+
+.jp-play {
+  background: url("/assets/jplayer.blue.monday.jpg") 0 0 no-repeat; }
+
+.jp-play:focus {
+  background: url("/assets/jplayer.blue.monday.jpg") -41px 0 no-repeat; }
+
+.jp-state-playing .jp-play {
+  background: url("/assets/jplayer.blue.monday.jpg") 0 -42px no-repeat; }
+
+.jp-state-playing .jp-play:focus {
+  background: url("/assets/jplayer.blue.monday.jpg") -41px -42px no-repeat; }
+
+.jp-stop, .jp-previous, .jp-next {
+  width: 28px;
+  height: 28px;
+  margin-top: 6px; }
+
+.jp-stop {
+  background: url("/assets/jplayer.blue.monday.jpg") 0 -83px no-repeat;
+  margin-left: 10px; }
+
+.jp-stop:focus {
+  background: url("/assets/jplayer.blue.monday.jpg") -29px -83px no-repeat; }
+
+.jp-previous {
+  background: url("/assets/jplayer.blue.monday.jpg") 0 -112px no-repeat; }
+
+.jp-previous:focus {
+  background: url("/assets/jplayer.blue.monday.jpg") -29px -112px no-repeat; }
+
+.jp-next {
+  background: url("/assets/jplayer.blue.monday.jpg") 0 -141px no-repeat; }
+
+.jp-next:focus {
+  background: url("/assets/jplayer.blue.monday.jpg") -29px -141px no-repeat; }
+
+/* @end */
+/* @group progress bar */
+.jp-progress {
+  overflow: hidden;
+  background-color: #ddd; }
+
+.jp-audio .jp-progress {
+  position: absolute;
+  top: 32px;
+  height: 15px; }
+
+.jp-audio .jp-type-single .jp-progress {
+  left: 110px;
+  width: 186px; }
+
+.jp-audio .jp-type-playlist .jp-progress {
+  left: 166px;
+  width: 130px; }
+
+.jp-video .jp-progress {
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 10px; }
+
+.jp-seek-bar {
+  background: url("/assets/jplayer.blue.monday.jpg") 0 -202px repeat-x;
+  width: 0px;
+  height: 100%;
+  cursor: pointer; }
+
+.jp-play-bar {
+  background: url("/assets/jplayer.blue.monday.jpg") 0 -218px repeat-x;
+  width: 0px;
+  height: 100%; }
+
+/* The seeking class is added/removed inside jPlayer */
+.jp-seeking-bg {
+  background: url("/assets/jplayer.blue.monday.seeking.gif"); }
+
+/* @end */
+/* @group volume controls */
+.jp-state-no-volume .jp-volume-controls {
+  display: none; }
+
+.jp-volume-controls {
+  position: absolute;
+  top: 32px;
+  left: 308px;
+  width: 200px; }
+
+.jp-audio-stream .jp-volume-controls {
+  left: 70px; }
+
+.jp-video .jp-volume-controls {
+  top: 12px;
+  left: 50px; }
+
+.jp-volume-controls button {
+  display: block;
+  position: absolute;
+  overflow: hidden;
+  text-indent: -9999px;
+  border: none;
+  cursor: pointer; }
+
+.jp-mute,
+.jp-volume-max {
+  width: 18px;
+  height: 15px; }
+
+.jp-volume-max {
+  left: 74px; }
+
+.jp-mute {
+  background: url("/assets/jplayer.blue.monday.jpg") 0 -170px no-repeat; }
+
+.jp-mute:focus {
+  background: url("/assets/jplayer.blue.monday.jpg") -19px -170px no-repeat; }
+
+.jp-state-muted .jp-mute {
+  background: url("/assets/jplayer.blue.monday.jpg") -60px -170px no-repeat; }
+
+.jp-state-muted .jp-mute:focus {
+  background: url("/assets/jplayer.blue.monday.jpg") -79px -170px no-repeat; }
+
+.jp-volume-max {
+  background: url("/assets/jplayer.blue.monday.jpg") 0 -186px no-repeat; }
+
+.jp-volume-max:focus {
+  background: url("/assets/jplayer.blue.monday.jpg") -19px -186px no-repeat; }
+
+.jp-volume-bar {
+  position: absolute;
+  overflow: hidden;
+  background: url("/assets/jplayer.blue.monday.jpg") 0 -250px repeat-x;
+  top: 5px;
+  left: 22px;
+  width: 46px;
+  height: 5px;
+  cursor: pointer; }
+
+.jp-volume-bar-value {
+  background: url("/assets/jplayer.blue.monday.jpg") 0 -256px repeat-x;
+  width: 0px;
+  height: 5px; }
+
+/* @end */
+/* @group current time and duration */
+.jp-audio .jp-time-holder {
+  position: absolute;
+  top: 50px; }
+
+.jp-audio .jp-type-single .jp-time-holder {
+  left: 110px;
+  width: 186px; }
+
+.jp-audio .jp-type-playlist .jp-time-holder {
+  left: 166px;
+  width: 130px; }
+
+.jp-current-time,
+.jp-duration {
+  width: 60px;
+  font-size: .64em;
+  font-style: oblique; }
+
+.jp-current-time {
+  float: left;
+  display: inline;
+  cursor: default; }
+
+.jp-duration {
+  float: right;
+  display: inline;
+  text-align: right;
+  cursor: pointer; }
+
+.jp-video .jp-current-time {
+  margin-left: 20px; }
+
+.jp-video .jp-duration {
+  margin-right: 20px; }
+
+/* @end */
+/* @group playlist */
+.jp-details {
+  font-weight: bold;
+  text-align: center;
+  cursor: default; }
+
+.jp-details,
+.jp-playlist {
+  width: 100%;
+  background-color: #ccc;
+  border-top: 1px solid #009be3; }
+
+.jp-type-single .jp-details,
+.jp-type-playlist .jp-details {
+  border-top: none; }
+
+.jp-details .jp-title {
+  margin: 0;
+  padding: 5px 20px;
+  font-size: .72em;
+  font-weight: bold; }
+
+.jp-playlist ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0 20px;
+  font-size: .72em; }
+
+.jp-playlist li {
+  padding: 5px 0 4px 20px;
+  border-bottom: 1px solid #eee; }
+
+.jp-playlist li div {
+  display: inline; }
+
+/* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */
+div.jp-type-playlist div.jp-playlist li:last-child {
+  padding: 5px 0 5px 20px;
+  border-bottom: none; }
+
+div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
+  list-style-type: square;
+  list-style-position: inside;
+  padding-left: 7px; }
+
+div.jp-type-playlist div.jp-playlist a {
+  color: #333;
+  text-decoration: none; }
+
+div.jp-type-playlist div.jp-playlist a:hover {
+  color: #0d88c1; }
+
+div.jp-type-playlist div.jp-playlist a.jp-playlist-current {
+  color: #0d88c1; }
+
+div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove {
+  float: right;
+  display: inline;
+  text-align: right;
+  margin-right: 10px;
+  font-weight: bold;
+  color: #666; }
+
+div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {
+  color: #0d88c1; }
+
+div.jp-type-playlist div.jp-playlist span.jp-free-media {
+  float: right;
+  display: inline;
+  text-align: right;
+  margin-right: 10px; }
+
+div.jp-type-playlist div.jp-playlist span.jp-free-media a {
+  color: #666; }
+
+div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover {
+  color: #0d88c1; }
+
+span.jp-artist {
+  font-size: .8em;
+  color: #666; }
+
+/* @end */
+.jp-video-play {
+  width: 100%;
+  overflow: hidden;
+  /* Important for nested negative margins to work in modern browsers */
+  cursor: pointer;
+  background-color: transparent;
+  /* Makes IE9 work with the active area over the whole video area. IE6/7/8 only have the button as active area. */ }
+
+.jp-video-270p .jp-video-play {
+  margin-top: -270px;
+  height: 270px; }
+
+.jp-video-360p .jp-video-play {
+  margin-top: -360px;
+  height: 360px; }
+
+.jp-video-full .jp-video-play {
+  height: 100%; }
+
+.jp-video-play-icon {
+  position: relative;
+  display: block;
+  width: 112px;
+  height: 100px;
+  margin-left: -56px;
+  margin-top: -50px;
+  left: 50%;
+  top: 50%;
+  background: url("/assets/jplayer.blue.monday.video.play.png") 0 0 no-repeat;
+  text-indent: -9999px;
+  border: none;
+  cursor: pointer; }
+
+.jp-video-play-icon:focus, .jp-video-play-icon:hover {
+  background: url("/assets/jplayer.blue.monday.video.play.png") 0 -100px no-repeat; }
+.jp-state-playing .jp-video-play-icon {
+  background: url("/assets/jplayer.blue.monday.video.pause.png") 0 0 no-repeat;}
+
+.jp-state-playing .jp-video-play-icon:focus, .jp-state-playing .jp-video-play-icon:hover {
+  background: url("/assets/jplayer.blue.monday.video.pause.png") 0 -105px no-repeat; }
+.jp-jplayer audio,
+.jp-jplayer {
+  width: 0px;
+  height: 0px; }
+
+.jp-jplayer {
+  background-color: #000000; }
+
+/* @group TOGGLES */
+/* The audio toggles are nested inside jp-time-holder */
+.jp-toggles {
+  padding: 0;
+  margin: 0 auto;
+  overflow: hidden; }
+
+.jp-audio .jp-type-single .jp-toggles {
+  width: 25px; }
+
+.jp-audio .jp-type-playlist .jp-toggles {
+  width: 55px;
+  margin: 0;
+  position: absolute;
+  left: 325px;
+  top: 50px; }
+
+.jp-video .jp-toggles {
+  position: absolute;
+  left: 280px;
+  margin: 0;
+  margin-top: 10px;
+  width: 100px; }
+
+.jp-toggles button {
+  display: block;
+  float: left;
+  width: 25px;
+  height: 18px;
+  text-indent: -9999px;
+  line-height: 100%;
+  /* need this for IE6 */
+  border: none;
+  cursor: pointer; }
+
+.jp-full-screen {
+  background: url("/assets/jplayer.blue.monday.jpg") 0 -310px no-repeat;
+  margin-left: 20px; }
+
+.jp-full-screen:focus {
+  background: url("/assets/jplayer.blue.monday.jpg") -30px -310px no-repeat; }
+
+.jp-state-full-screen .jp-full-screen {
+  background: url("/assets/jplayer.blue.monday.jpg") -60px -310px no-repeat; }
+
+.jp-state-full-screen .jp-full-screen:focus {
+  background: url("/assets/jplayer.blue.monday.jpg") -90px -310px no-repeat; }
+
+.jp-repeat {
+  background: url("/assets/jplayer.blue.monday.jpg") 0 -290px no-repeat; }
+
+.jp-repeat:focus {
+  background: url("/assets/jplayer.blue.monday.jpg") -30px -290px no-repeat; }
+
+.jp-state-looped .jp-repeat {
+  background: url("/assets/jplayer.blue.monday.jpg") -60px -290px no-repeat; }
+
+.jp-state-looped .jp-repeat:focus {
+  background: url("/assets/jplayer.blue.monday.jpg") -90px -290px no-repeat; }
+
+.jp-shuffle {
+  background: url("/assets/jplayer.blue.monday.jpg") 0 -270px no-repeat;
+  margin-left: 5px; }
+
+.jp-shuffle:focus {
+  background: url("/assets/jplayer.blue.monday.jpg") -30px -270px no-repeat; }
+
+.jp-state-shuffled .jp-shuffle {
+  background: url("/assets/jplayer.blue.monday.jpg") -60px -270px no-repeat; }
+
+.jp-state-shuffled .jp-shuffle:focus {
+  background: url("/assets/jplayer.blue.monday.jpg") -90px -270px no-repeat; }
+
+/* @end */
+/* @group NO SOLUTION error feedback */
+.jp-no-solution {
+  padding: 5px;
+  font-size: .8em;
+  background-color: #eee;
+  border: 2px solid #009be3;
+  color: #000;
+  display: none; }
+
+.jp-no-solution a {
+  color: #000; }
+
+.jp-no-solution span {
+  font-size: 1em;
+  display: block;
+  text-align: center;
+  font-weight: bold; }
+
+/* @end */
--- a/app/assets/stylesheets/video_pro/jplayer.blue.monday.min.css
+++ b/app/assets/stylesheets/video_pro/jplayer.blue.monday.min.css
--- a/app/assets/stylesheets/video_pro/jqcloud.min.css
+++ b/app/assets/stylesheets/video_pro/jqcloud.min.css
@ -0,0 +1 @@
+div.jqcloud{font-family:Helvetica,Arial,sans-serif;font-size:10px;line-height:normal}div.jqcloud a{font-size:inherit;text-decoration:none}div.jqcloud span.w10{font-size:550%}div.jqcloud span.w9{font-size:500%}div.jqcloud span.w8{font-size:450%}div.jqcloud span.w7{font-size:400%}div.jqcloud span.w6{font-size:350%}div.jqcloud span.w5{font-size:300%}div.jqcloud span.w4{font-size:250%}div.jqcloud span.w3{font-size:200%}div.jqcloud span.w2{font-size:150%}div.jqcloud span.w1{font-size:100%}div.jqcloud{color:#09f}div.jqcloud a{color:inherit}div.jqcloud a:hover{color:#0df}div.jqcloud a:hover{color:#0cf}div.jqcloud span.w10{color:#0cf}div.jqcloud span.w9{color:#0cf}div.jqcloud span.w8{color:#0cf}div.jqcloud span.w7{color:#39d}div.jqcloud span.w6{color:#90c5f0}div.jqcloud span.w5{color:#90a0dd}div.jqcloud span.w4{color:#90c5f0}div.jqcloud span.w3{color:#a0ddff}div.jqcloud span.w2{color:#9ce}div.jqcloud span.w1{color:#aab5f0}div.jqcloud{overflow:hidden;position:relative}div.jqcloud span{padding:0}
--- a/app/assets/stylesheets/video_pros.css
+++ b/app/assets/stylesheets/video_pros.css
@ -0,0 +1,4 @@
+/*
+  Place all the styles related to the matching controller here.
+  They will automatically be included in application.css.
+*/
--- a/app/controllers/.keep
+++ b/app/controllers/.keep
--- a/app/controllers/admin/video_pros_controller.rb
+++ b/app/controllers/admin/video_pros_controller.rb
@ -0,0 +1,76 @@
+class Admin::VideoProsController < OrbitAdminController
+  before_action ->(module_app = @app_title) { set_variables module_app }
+
+  def index
+    @tags = @module_app.tags
+    @filter_fields = filter_fields(@categories, @tags)
+    @video_pro_setting = VideoProSetting.first
+    @video_images = VideoImage.order_by(sort).with_categories(filters("category"))
+                                             .with_tags(filters("tag"))
+                                             .with_status(filters("status"))
+    @video_images = search_data(@video_images,[:title]).page(params[:page]).per(10)
+    @table_fields = [:status, :category, :video_image, :title, "video_pro.postdate", "video_pro.deadline", "video_pro.desc", "video_pro.keyword", "video_pro.post_agency"]
+    if request.xhr?
+      render :partial=>'index_table'
+    end
+  end
+
+  def edit
+    @video_image = VideoImage.find(params[:id])
+    @item = [['Youtube',"1"],[t('video'),"2"]] #[['Youtube',"1"],[t('video'),"2"],[t('image'),"3"]]
+    @item_choose = @video_image.exchange_item
+    unless can_edit_or_delete?(@video_image)
+      render_401
+    end
+  end
+  
+  def update
+    video_image = VideoImage.find(params[:id])
+    video_image.update_user_id = current_user.id.to_s
+    video_image.save
+    video_image.update_attributes(video_image_params)
+    redirect_to params[:referer_url]
+  end
+  
+  def new 
+    @video_image = VideoImage.new
+    @item = [['Youtube',"1"],[t('video'),"2"]] #[['Youtube',"1"],[t('video'),"2"],[t('image'),"3"]]
+    @tags = @module_app.tags || []
+    @video_image.postdate = Date.today
+  end
+  
+  def create
+    video_image = VideoImage.new(video_image_params)
+    video_image.update_user_id = current_user.id.to_s
+    video_image.create_user_id = current_user.id.to_s
+    video_image.save
+    redirect_to params[:referer_url]
+  end
+  
+  def destroy
+    video_image = VideoImage.find params[:id]
+    video_image.destroy
+    redirect_to admin_video_pro_path(:page => params[:page])
+  end
+
+  def settings
+    @video_pro_setting = VideoProSetting.first
+  end
+  def update_settings
+    @video_pro_setting = VideoProSetting.first
+    @video_pro_setting.update_attributes(video_pro_setting_params)
+    redirect_to settings_admin_video_pros_path
+  end
+
+  private
+  def video_pro_setting_params
+    params.require(:video_pro_setting).permit!
+  end
+  def video_image_params
+    params.require(:video_image).permit!
+  end
+
+  def setup_vars
+    @module_app = ModuleApp.where(:key => "video_pro").first
+  end
+end
--- a/app/controllers/video_pros_controller.rb
+++ b/app/controllers/video_pros_controller.rb
@ -0,0 +1,242 @@
+class VideoProsController < ApplicationController
+  def self.custom_widget_data
+    ac = ActionController::Base.new
+    ac.render_to_string("video_pros/custom_widget_data",:locals=>{:@custom_data_field=>@custom_data_field,:@field_name=>@field_name})
+  end
+  def show
+    params = OrbitHelper.params
+    uid = params[:uid]
+    video_image = VideoImage.where(:uid => uid).first
+    snapshot_url = video_image && video_image.get_snapshot_url
+    return if snapshot_url.nil?
+    video_image.view_count += 1
+    video_image.inc_count
+    {
+      "video_image" => video_image
+    }
+  end
+  def show_api
+    uid = params[:uid]
+    @video_image = VideoImage.where(:uid => uid).first
+    snapshot_url = @video_image && @video_image.get_snapshot_url
+    if snapshot_url.nil?
+      render :file => "#{Rails.root}/app/views/errors/404.html", :layout => false, :status => :not_found, :formats => [:html]
+      return
+    end
+    @video_image.view_count += 1
+    @video_image.inc_count
+    render :layout=>false   
+  end
+  def index
+    params = OrbitHelper.params
+    page = OrbitHelper.page rescue Page.where(:url=>params[:url]).first
+    page_categories = OrbitHelper.page_categories
+    categories = [{:name=>I18n.t("video_pro.all_category"), :value=>"all"}]
+    if page_categories.blank? || page_categories.include?('all')
+      categories_for_page = Category.where(:module_app_id=>ModuleApp.where(:key=>'video_pro').pluck(:id).first)
+    else
+      categories_for_page = Category.where(:id=>page_categories)
+    end
+    categories += categories_for_page.map do |c|
+      {:name=>c.title, :value=>c.id.to_s}
+    end
+    selected_category = params["category"]
+    if selected_category.present? && selected_category != 'all'
+      categories.each do |h|
+        if h[:value] == selected_category
+          h[:is_selected] = "selected"
+          break
+        end
+      end
+      filter_categories = [selected_category]
+    else
+      filter_categories = page_categories
+    end
+    @video_pro_setting = VideoProSetting.first
+    post_agencies = []
+    id_name_mapping = User.where(:id.in=>@video_pro_setting.exist_user_ids.to_a).pluck(:id, "member_name.#{I18n.locale}").map{|k,v| [k.to_s, (v ? v.values.last : nil)]}.to_h
+    if @video_pro_setting.enable_name_mapping
+      @video_pro_setting.user_mapping.to_h.each do |id, name_trans|
+        id_name_mapping[id] = name_trans
+      end
+    end
+    @video_pro_setting.exist_user_ids.each do |user_id|
+      name_trans = id_name_mapping[user_id]
+      post_agencies << {:name=>name_trans, :value=>"m-#{user_id}"} if name_trans.present?
+    end
+    tmp_post_agencies = @video_pro_setting.post_agencies
+    @video_pro_setting.exist_post_agencies.each do |idx|
+      name_trans = tmp_post_agencies[idx]
+      post_agencies << {:name=>name_trans, :value=>"p-#{idx}"} if name_trans.present?
+    end
+    selected_post_agency = params["poster"]
+    if selected_post_agency.blank? && post_agencies.count > 0 && params["layout_type"].include?('post_agency')
+      selected_post_agency = post_agencies[0][:value]
+    end
+    if selected_post_agency.present?
+      post_agencies.each do |h|
+        if h[:value] == selected_post_agency
+          h[:is_selected] = "selected"
+          break
+        end
+      end
+    end
+    post_agencies = post_agencies.map do |post_agency|
+      {"option"=>"<option value=\"#{post_agency[:value]}\" #{post_agency[:is_selected]}>#{post_agency[:name]}</option>"}
+    end
+    categories = categories.map do |category|
+      {"option"=>"<option value=\"#{category[:value]}\" #{category[:is_selected]}>#{category[:name]}</option>"}
+    end
+    video_images = VideoImage.where(:title.nin => ["",nil])
+    page_url = "/#{I18n.locale}#{(page.get_url rescue page.url)}"
+    page_tabs = [
+      {"klass"=>"", "url"=>page_url, "title"=>I18n.t('video_pro.latest_ranking')},
+      {"klass"=>"", "url"=>page_url + '?hot=hot', "title"=>I18n.t('video_pro.top_ranking')}
+    ]
+    if params[:hot] == 'hot'
+      video_images = video_images.order(:view_count=>-1)
+      page_tabs[1]["klass"] = "now_view"
+    else
+      page_tabs[0]["klass"] = "now_view"
+    end
+    selected_tag = params['tags']
+    if selected_tag.present?
+      filter_tags = [selected_tag]
+    else
+      filter_tags = OrbitHelper.page_tags
+    end
+    video_images = video_images.can_display_and_sorted.filter_by_categories(filter_categories).filter_by_tags(filter_tags)
+    search_value = params[:search].to_s.strip
+    if search_value.present?
+      keywords = search_value.split(/\s+(?=(?:[^"]*"[^"]*")*[^"]*$)/)
+      regex = Regexp.union(keywords.map{|word| Regexp.new(".*"+Regexp.escape(word)+".*", "i")})
+      video_images = video_images.where({"title" => regex})
+    end
+    if selected_post_agency.present?
+      selected_type = selected_post_agency[0]
+      if selected_type == 'm'
+        video_images = video_images.where(:use_override_post_agency=>false, :update_user_id=>selected_post_agency.split('-').last)
+      elsif selected_type == 'p'
+        video_images = video_images.where(:use_override_post_agency=>true, :override_post_agency=>selected_post_agency.split('-').last)
+      end
+    end
+    custom_data_field = (page.custom_data_field || {} rescue {})
+    videos = get_videos(video_images, OrbitHelper.url_to_show(''), custom_data_field)
+    hd_icon_url = "/assets/video_pro/icon_hd.png"
+    view_icon_url = "/assets/video_pro/icon_view.png"
+    search_placeholder = I18n.t("video_pro.search_placeholder")
+    search_text1 = I18n.t("video_pro.search_text1")
+    search_text2 = I18n.t("video_pro.search_text2")
+    {
+      "extras" => {
+        "search_placeholder" => search_placeholder,
+        "search_text1" => search_text1,
+        "search_text2" => search_text2,
+        "search_value" => search_value,
+        "keyword_trans" => I18n.t("video_pro.keyword"),
+        "view_count_trans" => I18n.t("video_pro.view_count"),
+        "hd_icon_url" => hd_icon_url,
+        "view_icon_url" => view_icon_url,
+        "more" => "More",
+      },
+      "categories" => categories,
+      "post_agencies" => post_agencies,
+      "page_tabs" => page_tabs,
+      "videos" => videos,
+      "total_pages" => video_images.total_pages
+    }
+  end
+  def widget
+    subpart = OrbitHelper.get_current_widget
+    if subpart.widget_type.include?('jqcloud')
+      tags = subpart.tags
+      if tags.include?('all')
+        tags = Tag.where(:module_app_ids.in=>ModuleApp.where(:key=>'video_pro').pluck(:id)).to_a
+      else
+        tags = Tag.where(:id.in=>tags).to_a
+      end
+      show_url = OrbitHelper.widget_item_url('')
+      jqcloud_words = tags.map do |tag|
+        {
+          "text" => tag.name,
+          "weight"=> Tagging.where(:tag_id=>tag).count,
+          "link" => "#{show_url}?tags=#{tag.id}"
+        }
+      end.sort_by{|h| h["weight"]}.reverse!
+      {
+        "extras" => {
+          "jqcloud_words" => jqcloud_words.to_json
+        }
+      }
+    else
+    	video_images = VideoImage.where(:title.nin => ["",nil]).can_display_and_sorted.filter_by_widget_categories.to_a
+      custom_data_field = subpart.custom_data_field || {}
+      @video_pro_setting = VideoProSetting.first
+      videos = get_videos(video_images, OrbitHelper.widget_item_url(''), custom_data_field)
+      hd_icon_url = "/assets/video_pro/icon_hd.png"
+      view_icon_url = "/assets/video_pro/icon_view.png"
+      {
+        "extras" => {
+          "keyword_trans" => I18n.t("video_pro.keyword"),
+          "view_count_trans" => I18n.t("video_pro.view_count"),
+          "hd_icon_url" => hd_icon_url,
+          "view_icon_url" => view_icon_url,
+          "more" => "More",
+        },
+        "videos" => videos
+      }
+    end
+  end
+
+  private
+  def get_videos(video_images, show_url, custom_data_field={})
+    @autoplay_video = custom_data_field[:autoplay_video] rescue "0"
+    @hide_video_tools = custom_data_field[:hide_video_tools] == "1" rescue false
+    videos = []
+    video_images.each_with_index do |video_image,i|
+       if video_image.language_enabled.include?(I18n.locale.to_s)
+        snapshot_url = video_image.get_snapshot_url
+        next if snapshot_url.nil?
+        video_post_agency = video_image.post_agency(@video_pro_setting)
+        video_postdate = video_image.postdate.to_s
+        video_category = video_image.category_title
+        statuses = video_image.statuses_with_classname
+        video_desc = video_image.desc
+        video_desc_escape = video_desc.gsub('"',"&quot;") rescue ""
+        video_title = video_image.title.to_s
+        video_title_escape = video_title.gsub('"','&quot;')
+        video_keyword = video_image.keyword.to_s
+        if video_image.exchange_item == "1"
+          video_url = video_image.embed_url
+          video_webm_url = ""
+          video_type = "youtube"
+        elsif video_image.exchange_item == "2"
+          video_url = video_image.video_file.url rescue nil
+          video_type = "jplayer"
+          video_webm_url = video_image.video_file_webm.url rescue nil
+          has_jplayer = true
+        end
+        slug = video_image.to_param
+        api_url = "/xhr/video_pro/show_api/#{slug}"
+        videos << {
+          "api_url" => api_url,
+          "video_show_url" => show_url + slug,
+          "video_category" => video_category,
+          "statuses" => statuses,
+          "video_post_agency" => video_post_agency,
+          "video_postdate" => video_postdate,
+          "video_url" => video_url,
+          "video_webm_url" => video_webm_url,
+          "video_type" => video_type,
+          "snapshot_url" => snapshot_url,
+          "video_title" => video_title,
+          "video_title_escape" => video_title_escape,
+          "video_desc" => video_desc,
+          "video_keyword" => video_keyword,
+          "view_count" => video_image.view_count
+        }
+      end
+    end
+    videos
+  end
+end
--- a/app/helpers/admin/video_pros_helper.rb
+++ b/app/helpers/admin/video_pros_helper.rb
@ -0,0 +1,2 @@
+module Admin::VideoProsHelper
+end
--- a/app/helpers/video_pros_helper.rb
+++ b/app/helpers/video_pros_helper.rb
@ -0,0 +1,2 @@
+module VideoProsHelper
+end
--- a/app/mailers/.keep
+++ b/app/mailers/.keep
--- a/app/models/video_image.rb
+++ b/app/models/video_image.rb
@ -0,0 +1,243 @@
+require 'uri'
+
+class VideoImage
+  include Mongoid::Document
+  include Mongoid::Timestamps
+  include OrbitModel::Status
+  include OrbitModel::Impression
+  include OrbitTag::Taggable
+  include OrbitCategory::Categorizable
+  include Slug
+  mount_uploader :file, VideoDataImageUploader
+  mount_uploader :video_snapshot, VideoDataImageUploader
+  mount_uploader :video_file, VideoDataUploader
+  mount_uploader :video_file_webm, VideoDataUploader
+  field :default_video_snapshot, type: Boolean, default: false
+  field :auto_convert_video, type: Boolean, default: false
+  field :title, as: :slug_title, type: String, localize: true
+  field :keyword, type: String, localize: true
+  field :desc, type: String, localize: true
+  # field :weight, type: Integer, default: 1
+  # field :out_link, type: String
+  # field :link_open, type: String
+  field :postdate , type: Date, default: Date.today
+  field :deadline , type: Date
+  field :is_youtube, type: Boolean, default: false
+  field :youtube , type: String
+  field :youtube_id, type: String
+  field :sort_number, type: Integer
+  field :language_enabled, type: Array, default: ["en","zh_tw"]
+  field :exchange_item, default: "1" # 1=>youtube, 2=>video file, 3=>image
+  field :use_override_post_agency, type: Boolean, default: false
+  field :override_post_agency, type: Integer, default: 0
+  field :create_user_id
+  field :update_user_id
+  field :view_count, type: Integer, default: 0
+  field :scale, type: Float
+  # LINK_OPEN_TYPES = ["local", "new_window"]
+
+  # before_save :add_http
+  # validates :file, presence: true
+  # validates :out_link, format: {:with=> /\A(http:\/\/|https:\/\/|\/)/i}, allow_blank: true
+  # validates :title, presence: true
+  scope :open_in_future, ->{where(:is_hidden.ne=>true,:is_preview.ne => true,:postdate.gt=>Time.now).order(postdate: :asc)}
+  scope :can_display, ->{where(:is_hidden.ne=>true).valid_time_range}
+  scope :can_display_and_sorted, ->{can_display.sorted}
+  scope :valid_time_range, ->{any_of({:postdate.lte=>Time.now, :deadline.gte=>Time.now},{:postdate.lte=>Time.now, :deadline=>nil},{:postdate=>nil,:deadline.gte=>Time.now},{:postdate=>nil,:deadline=>nil})}
+  scope :sorted, ->{order({is_top: :desc,postdate: :desc,id: :desc})}
+  
+  scope :is_expired, ->{self.and(VideoImage.unscoped.or({:deadline.lte=>Time.now}).selector)}
+  scope :not_expired, ->{self.and(VideoImage.unscoped.or({:deadline.gte=>Time.now},{:deadline=>nil}).selector)}
+  before_save do
+    unless @skip_callback
+      uri = URI.parse(self.youtube) rescue nil
+      self.is_youtube = (uri && uri.host == "www.youtube.com")
+      if self.is_youtube
+        if uri.path.start_with?('/embed/')
+          self.youtube_id = uri.path.split('/embed/').last.split(/[\/#?]/).first
+          if self.youtube_id.blank?
+            self.is_youtube = false
+            self.youtube_id = nil
+          end
+        else
+          params = CGI.parse(uri.query.to_s)
+          v = params.blank? ? nil : params['v'].first
+          if v.blank?
+            self.is_youtube = false
+            self.youtube_id = nil
+          else
+            self.youtube_id = v
+          end
+        end
+        if self.is_youtube
+          begin
+            temp_file = Tempfile.new('0.jpg', encoding: 'ascii-8bit')
+            snapshot_content = Net::HTTP.get_response(URI.parse("http:"+self.get_snapshot_url)).body rescue nil
+            temp_file.write(snapshot_content)
+            temp_file.close
+            image = MiniMagick::Image.open(temp_file.path)
+            self.scale = (1.0 * image[:height] / image[:width] * 100).round(2)
+          rescue => e
+            puts e.to_s
+            self.scale = nil
+          end
+        else
+          self.scale = nil
+        end
+      else
+        self.youtube_id = nil
+        image = MiniMagick::Image.open(self.video_snapshot.file.path) rescue nil
+        if image
+          self.scale = (1.0 * image[:height] / image[:width] * 100).round(2)
+        end
+      end
+      if self.video_snapshot_changed?
+        self.default_video_snapshot = false
+      end
+      VideoProSetting.first.update_user_id(self)
+    end
+  end
+  after_destroy do
+    VideoProSetting.first.remove_user_id(self)
+  end
+  after_save do
+    unless @skip_callback
+      if (self.video_file_changed? || self.auto_convert_video_changed?) && self.auto_convert_video
+        Thread.new do
+          self.generate_webm
+        end
+      end
+      if self.video_file? && self.video_file_changed? && (!(self.video_snapshot?) || self.default_video_snapshot)
+        Thread.new do
+          self.generate_video_snapshot
+        end
+      end
+    end
+  end
+  def inc_count
+    self.class.where(:id=>self.id).update_all({"$inc"=>{"view_count"=>1}})
+  end
+  def category_title
+    self.category.title rescue ""
+  end
+  def post_agencies_translations
+    if defined?(OrbitHelper::SharedHash) && OrbitHelper::SharedHash
+      OrbitHelper::SharedHash['video_pro'][:post_agencies_translations] rescue VideoProSetting.first.post_agencies_translations
+    else
+      VideoProSetting.first.post_agencies_translations rescue {}
+    end
+  end
+  def get_override_post_agency
+    self.post_agencies_translations[I18n.locale.to_s][self.override_post_agency] rescue ""
+  end
+  def post_agency(video_pro_setting=nil)
+    if self.use_override_post_agency
+      self.get_override_post_agency
+    else
+      if video_pro_setting.nil?
+        video_pro_setting = VideoProSetting.first
+      end
+      if video_pro_setting && video_pro_setting.enable_name_mapping
+        tmp = video_pro_setting.user_mapping[self.update_user_id] rescue nil
+        if tmp.blank?
+          user_name = User.where(:id=>self.update_user_id).pluck(:member_name).first[I18n.locale.to_s] rescue nil
+        else
+          user_name = tmp
+        end
+      else
+        user_name = User.where(:id=>self.update_user_id).pluck(:member_name).first[I18n.locale.to_s] rescue nil
+      end
+      user_name
+    end
+  end
+  def generate_video_snapshot
+    if self.video_file?
+      self.default_video_snapshot = true
+      self[:video_snapshot] = File.basename(self.video_file.file.path).split(/\.[^.]+$/)[0] + ".jpg"
+      FileUtils.mkdir_p(File.dirname(self.video_snapshot.file.path))
+      system("tmp/ffmpeg/ffmpeg -i #{self.video_file.file.path} -vframes 1 #{self.video_snapshot.file.path}")
+      @skip_callback = true
+      self.save
+      @skip_callback = false
+      true
+    end
+  end
+  def generate_webm
+    video_path = self.video_file.path rescue nil
+    if !video_path.blank?
+      video_webm = video_path.split('.')[0...-1].join('.')+".webm"
+      core_num = [`cat /proc/cpuinfo | grep processor | wc -l`.to_i/2,1].max
+      flag = system("tmp/ffmpeg/ffmpeg -i #{video_path} -c:v libvpx-vp9 -crf 35 -b:v 0 -b:a 96k -c:a libopus -filter:v fps=20 #{video_webm} -cpu-used #{core_num}")
+      if flag
+        self.video_file_webm = File.open(video_webm)
+        @skip_callback = true
+        self.save
+        @skip_callback = false
+        true
+      else
+        puts "generate webm failed"
+      end
+    end
+  end
+
+  def expired?
+    self.deadline<Time.now rescue false
+  end
+
+  def embed_url
+    if self.is_youtube
+      return "//www.youtube.com/embed/#{self.youtube_id}"
+    else
+      return ""
+    end
+  end
+
+  def youtube_thumb
+    if self.is_youtube
+      return "//img.youtube.com/vi/#{self.youtube_id}/0.jpg"
+    else
+      return ""
+    end
+  end
+  def statuses
+    statuses = []
+    statuses << top_text if is_top?
+    statuses << hot_text if is_hot?
+    statuses << hidden_text if is_hidden?
+    statuses
+  end
+  def statuses_with_classname
+    statuses = []
+    statuses << {"name" => top_text, "classname" => "top"} if is_top?
+    statuses << {"name" => hot_text, "classname" => "hot"} if is_hot?
+    statuses << {"name" => hidden_text, "classname" => "hidden"} if is_hidden?
+    statuses
+  end
+  def status_for_table
+    status = ""
+    status << "<span class='label label-success'>#{top_text}</span> " if self.is_top
+    status << "<span class='label label-important'>#{hot_text}</span> " if self.is_hot
+    status << "<span class='label'>#{hidden_text}</span>"if self.is_hidden
+    status.html_safe
+  end
+  def top_text
+    I18n.t("announcement.status.top")
+  end
+  def hot_text
+    I18n.t("announcement.status.hot")
+  end
+  def hidden_text
+    I18n.t("announcement.status.hidden")
+  end
+
+  def get_snapshot_url
+    (self.is_youtube ? self.youtube_thumb : (self.video_snapshot.url))
+  end
+  protected
+
+  def add_http
+    # unless self.out_link.blank? || self.out_link[/^http:\/\//] || self.out_link[/^https:\/\//] || self.out_link[/^\//]
+    #   self.out_link = 'https://' + self.out_link
+    # end
+  end
+end
--- a/app/models/video_pro_setting.rb
+++ b/app/models/video_pro_setting.rb
@ -0,0 +1,153 @@
+require 'uri'
+
+class VideoProSetting
+  include Mongoid::Document
+  include Mongoid::Timestamps
+  field :enable_name_mapping, type: Boolean, default: false
+  field :post_agencies, type: Array, default: [], localize: true
+  field :user_mapping, type: Hash, default: {}, localize: true
+  field :exist_user_ids, type: Array, default: [], localize: true
+  field :exist_post_agencies, type: Array, default: [], localize: true
+  before_save do
+    can_update_shared_hash = (defined?(OrbitHelper::SharedHash) && OrbitHelper::SharedHash)
+    if can_update_shared_hash
+      OrbitHelper::SharedMutex.synchronize do
+        if self.post_agencies_changed?
+          OrbitHelper::SharedHash["video_pro"][:post_agencies_translations] = self.post_agencies_translations
+        end
+      end
+    end
+    tmp = self.user_mapping_translations
+    tmp.each do |locale, mapping|
+      mapping = mapping.select{|k,v| v.present?}
+      tmp[locale] = mapping
+    end
+    self.user_mapping_translations = tmp
+  end
+  def update_user_id(video_image)
+    save_flag = false
+    if video_image.use_override_post_agency
+      post_agency_was = video_image.override_post_agency_was
+      post_agency = video_image.override_post_agency
+      if video_image.override_post_agency_changed? || video_image.use_override_post_agency_changed?
+        tmp = self.exist_post_agencies_translations
+        if post_agency_was.present?
+          video_image.title_translations.each do |k, v|
+            tmp2 = tmp[k]
+            tmp2 = [] if tmp2.nil?
+            if v.present? && tmp2.include?(post_agency_was) && VideoImage.where(:id.ne=>video_image.id, :override_post_agency=>post_agency_was, :use_override_post_agency=>true).count == 0
+              save_flag = true
+              tmp2.delete(post_agency_was)
+            end
+          end
+        end
+        if post_agency.present?
+          video_image.title_translations.each do |k, v|
+            if v.present?
+              tmp2 = tmp[k]
+              tmp2 = [] if tmp2.nil?
+              save_flag = true
+              tmp2 << post_agency unless tmp2.include?(post_agency)
+            end
+          end
+        end
+        self.exist_post_agencies_translations = tmp
+      end
+    else
+      user_id_was = video_image.update_user_id_was
+      user_id = video_image.update_user_id
+      if video_image.update_user_id_changed? || video_image.use_override_post_agency_changed?
+        tmp = self.exist_user_ids_translations
+        if user_id_was.present?
+          video_image.title_was.each do |k, v|
+            tmp2 = tmp[k]
+            tmp2 = [] if tmp2.nil?
+            if v.present? && tmp2.include?(user_id_was) && VideoImage.where(:id.ne=>video_image.id, :update_user_id=>user_id_was, :use_override_post_agency=>false).count == 0
+              save_flag = true
+              tmp2.delete(user_id_was)
+            end
+          end
+        end
+        video_image.title_translations.each do |k, v|
+          if v.present?
+            tmp2 = tmp[k]
+            tmp2 = [] if tmp2.nil?
+            save_flag = true
+            tmp2 << user_id unless tmp2.include?(user_id)
+          end
+        end
+        self.exist_user_ids_translations = tmp
+      end
+    end
+    self.save if save_flag
+  end
+  def add_user_id(video_image)
+    save_flag = false
+    if video_image.use_override_post_agency
+      post_agency = video_image.override_post_agency
+      tmp = self.exist_post_agencies_translations
+      if post_agency.present?
+        video_image.title_translations.each do |k, v|
+          if v.present?
+            tmp2 = tmp[k]
+            tmp2 = [] if tmp2.nil?
+            save_flag = true
+            tmp2 << post_agency unless tmp2.include?(post_agency)
+          end
+        end
+      end
+      self.exist_post_agencies_translations = tmp
+    else
+      user_id = video_image.update_user_id
+      tmp = self.exist_user_ids_translations
+      video_image.title_translations.each do |k, v|
+        if v.present?
+          tmp2 = tmp[k]
+          tmp2 = [] if tmp2.nil?
+          save_flag = true
+          tmp2 << user_id unless tmp2.include?(user_id)
+        end
+      end
+      self.exist_user_ids_translations = tmp
+    end
+    self.save if save_flag
+  end
+  def remove_user_id(video_image)
+    save_flag = false
+    if video_image.use_override_post_agency
+      post_agency = video_image.override_post_agency
+      tmp = self.exist_post_agencies_translations
+      if post_agency.present?
+        video_image.title_translations.each do |k, v|
+          tmp2 = tmp[k]
+          tmp2 = [] if tmp2.nil?
+          if v.present? && tmp2.include?(post_agency) && VideoImage.where(:id.ne=>video_image.id, :override_post_agency=>post_agency, :use_override_post_agency=>true).count == 0
+            save_flag = true
+            tmp2.delete(post_agency)
+          end
+        end
+      end
+      self.exist_post_agencies_translations = tmp
+    else
+      user_id = video_image.update_user_id
+      tmp = self.exist_user_ids_translations
+      video_image.title_translations.each do |k, v|
+        tmp2 = tmp[k]
+        tmp2 = [] if tmp2.nil?
+        if v.present? && tmp2.include?(user_id) && VideoImage.where(:id.ne=>video_image.id, :update_user_id=>user_id, :use_override_post_agency=>false).count == 0
+          save_flag = true
+          tmp2.delete(user_id)
+        end
+      end
+      self.exist_user_ids_translations = tmp
+    end
+    self.save if save_flag
+  end
+  def get_user_name(user_id)
+    tmp = self.user_mapping[user_id] rescue nil
+    (tmp ? tmp : User.where(:id=>user_id).pluck(:member_name).first[I18n.locale.to_s] rescue nil)
+  end
+  def self.get_user_name(user_id)
+    User.where(:id=>user_id).pluck(:member_name).first[I18n.locale.to_s] rescue nil
+  end
+end
--- a/app/uploaders/video_data_image_uploader.rb
+++ b/app/uploaders/video_data_image_uploader.rb
@ -0,0 +1,90 @@
+# encoding: utf-8
+require 'carrierwave/processing/mime_types'
+
+class VideoDataImageUploader < CarrierWave::Uploader::Base
+
+  # Include RMagick or MiniMagick support:
+  # include CarrierWave::RMagick
+  # include CarrierWave::MiniMagick
+  include CarrierWave::MiniMagick
+  include CarrierWave::MimeTypes
+
+  # Choose what kind of storage to use for this uploader:
+  storage :file
+  # storage :fog
+
+  # Override the directory where uploaded files will be stored.
+  # This is a sensible default for uploaders that are meant to be mounted:
+  def store_dir
+    "uploads/video_data_image/#{mounted_as}/#{model.id}"
+  end
+
+   # override
+  def filename
+    @original_filename
+  end
+
+  # override
+  def original_filename=(filename)
+    @original_filename = super(filename)
+
+    if(@original_filename.bytesize > 200)
+      original_file_extension = File.extname(@original_filename)
+
+      @original_filename.force_encoding("ascii-8bit")
+      @original_filename = @original_filename[0, (200 - original_file_extension.bytesize)]
+      @original_filename.encode!("UTF-16BE", "UTF-8", :invalid => :replace, :undef => :replace, :replace => '')
+      @original_filename.encode!("UTF-8")
+
+      @original_filename += original_file_extension
+    end
+
+    @original_filename
+  end
+
+  def fix_exif_rotation 
+    manipulate! do |img|
+      img.tap(&:auto_orient)
+    end
+  end
+  # Provide a default URL as a default if there hasn't been a file uploaded:
+  # def default_url
+  #   # For Rails 3.1+ asset pipeline compatibility:
+  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
+  #
+  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
+  # end
+
+  # Process files as they are uploaded:
+  # process :scale => [200, 300]
+  #
+  # def scale(width, height)
+  #   # do something
+  # end
+
+  # Create different versions of your uploaded files:
+   version :thumb do
+     process :fix_exif_rotation
+     process :resize_to_fit => [400, 400]
+   end
+
+   version :mobile do
+    process :fix_exif_rotation
+    process :resize_to_limit => [1152, 768]
+  end
+
+  # Add a white list of extensions which are allowed to be uploaded.
+  # For images you might use something like this:
+  def extension_white_list
+     %w(jpg jpeg gif png bmp)
+  end
+
+  # Override the filename of the uploaded files:
+  # Avoid using model.id or version_name here, see uploader/store.rb for details.
+  # def filename
+  #   "something.jpg" if original_filename
+  # end
+
+
+
+end
--- a/app/uploaders/video_data_uploader.rb
+++ b/app/uploaders/video_data_uploader.rb
@ -0,0 +1,75 @@
+# encoding: utf-8
+require 'carrierwave/processing/mime_types'
+
+class VideoDataUploader < CarrierWave::Uploader::Base
+
+  include CarrierWave::MimeTypes
+    
+  process :set_content_type
+
+  # Include RMagick or ImageScience support:
+  # include CarrierWave::RMagick
+  # include CarrierWave::ImageScience
+
+  # Choose what kind of storage to use for this uploader:
+  # storage :file
+  # storage :s3
+
+  # Override the directory where uploaded files will be stored.
+  # This is a sensible default for uploaders that are meant to be mounted:
+  def store_dir
+    "uploads/video_data_image/#{mounted_as}/#{model.id}"
+  end
+
+    # override
+  def filename
+    @original_filename
+  end
+
+  # override
+  def original_filename=(filename)
+    @original_filename = super(filename)
+
+    if(@original_filename.bytesize > 200)
+      original_file_extension = File.extname(@original_filename)
+      @original_filename.encode!("UTF-8")
+      @original_filename = @original_filename[0, (200 - original_file_extension.bytesize)]
+      @original_filename += original_file_extension
+    end
+
+    @original_filename
+  end
+
+  # Provide a default URL as a default if there hasn't been a file uploaded:
+  # def default_url
+  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
+  # end
+
+  # Process files as they are uploaded:
+  # process :scale => [200, 300]
+  #
+  # def scale(width, height)
+  #   # do something
+  # end
+
+  # Create different versions of your uploaded files:
+  # version :thumb do
+  #   process :scale => [50, 50]
+  # end
+
+  # Add a white list of extensions which are allowed to be uploaded.
+  # For images you might use something like this:
+  # def extension_white_list
+  #   %w(jpg jpeg gif png)
+  # end
+
+  # Override the filename of the uploaded files:
+  # def filename
+  #   model.filename
+  # end
+
+  def cache_dir
+    "#{Rails.root}/tmp/uploads"
+  end
+
+end
--- a/app/views/.keep
+++ b/app/views/.keep
--- a/app/views/admin/video_pros/_form.html.erb
+++ b/app/views/admin/video_pros/_form.html.erb
@ -0,0 +1,369 @@
+<% content_for :page_specific_css do %>
+  <%= stylesheet_link_tag "lib/main-forms" %>
+  <%= stylesheet_link_tag "lib/fileupload" %>
+  <%= stylesheet_link_tag "video_data/jplayer.blue.monday.min" %>
+<% end %>
+<% content_for :page_specific_javascript do %>
+  <%= javascript_include_tag "lib/bootstrap-fileupload" %>
+  <%= javascript_include_tag "lib/bootstrap-datetimepicker" %>
+  <%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %>
+  <%= javascript_include_tag "lib/module-area" %>
+  <%= javascript_include_tag "validator" %>
+  <%= javascript_include_tag "video_data/jquery.jplayer.min" %>
+<% end %>
+<style type="text/css">
+  .fileupload .video-thumbnail{
+    max-height: none;
+    display: inline-block;
+    width:  30em;
+    height: 20em;
+  }
+</style>
+<%#= f.error_messages %>
+<%
+  @video_pro_setting = VideoProSetting.first
+  @video_pro_setting = nil if @video_pro_setting && (!@video_pro_setting.enable_name_mapping)
+%>
+<!-- Input Area -->
+<div class="input-area">
+  <!-- Module Tabs -->
+  <div class="nav-name"><strong><%= t(:module) %></strong></div>
+  <ul class="nav nav-pills module-nav">
+    <li class="active"><a href="#basic" data-toggle="tab"><%= t(:basic) %></a></li>
+    <li><a href="#status" data-toggle="tab"><%= t(:status) %></a></li>
+    <li><a href="#tag" data-toggle="tab"><%= t(:tags) %></a></li>
+  </ul>
+  <!-- Module -->
+  <div class="tab-content module-area">
+
+    <!-- Basic Module -->
+    <div class="tab-pane fade in active" id="basic">
+      <!-- Category -->
+      <div class="control-group">
+        <label class="control-label muted"><%= t(:category) %></label>
+        <div class="controls">
+          <%= select_category(f, @module_app) %>
+        </div>
+      </div>
+      <div class="control-group">
+        <label class="control-label muted"><%= t(:type) %></label>
+        <div class="controls">
+          <div><%= t("choose_type") %></div>
+          <%=
+            select_tag "video_image[exchange_item]", options_for_select(@item,@item_choose)
+          %>
+        </div>
+      </div>
+
+      <div id="exchange_item_3" style="display:none">
+        <!-- Images Upload -->
+        <div class="control-group">
+          <label class="control-label muted"><%= t(:image) %></label>
+          <div class="controls">
+            <div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if @video_image.file.file %>" data-provides="fileupload">
+              <div class="fileupload-new thumbnail pull-left">
+                <% if @video_image.file.file %>
+                  <%= image_tag @video_image.file.url %>
+                <% else %>
+                  <img src="https://via.placeholder.com/200x80/EFEFEF/AAAAAA" />
+                <% end %>
+              </div>
+              <div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
+              <span class="btn btn-file">
+                <span class="fileupload-new"><%= t(:select_image) %></span>
+                <span class="fileupload-exists"><%= t(:change) %></span>
+                <%= f.file_field :file, accept: "image/*" %>
+              </span>
+              <a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a>
+              <div class="controls" data-toggle="buttons-checkbox">
+                <label class="checkbox inline btn btn-danger fileupload-remove">
+                  <%= f.check_box :remove_file %><%= t(:remove) %>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="exchange_item_1" style="display:none">
+        <div class="control-group input-title">
+          <label class="control-label muted"><%= t(:youtube) %></label>
+          <div class="controls">
+            <div><%= 'ex. https://www.youtube.com/watch?v=UHF2e3lyPVU' %></div>
+              <%= f.text_field :youtube, placeholder: t(:youtube), class: 'input-block-level' %>
+          </div>
+        </div>
+      </div>
+
+      <div id="exchange_item_2" style="display:none">
+        <!-- Video Upload -->
+        <div class="control-group">
+          <label class="control-label muted"><%= t(:video) %></label>
+          <div class="controls">
+            <div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if @video_image.file.file %>" data-provides="fileupload">
+              <div class="fileupload-new video-thumbnail thumbnail pull-left">
+                <%= render partial: "jplayer",locals:{i: 1,file_name: f.object["video_file"],file_url: f.object.video_file.url,file_webm_url: (f.object.video_file_webm.url rescue nil),not_ready: true } %>
+              </div>
+              <div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
+              <span class="btn btn-file">
+                <span class="fileupload-new"><%= t("video_pro.select_video") %></span>
+                <span class="fileupload-exists"><%= t(:change) %></span>
+                <%= f.file_field :video_file, accept: "video/mp4,video/x-m4v,video/ogg,video/webm" %>
+              </span>
+              <a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a>
+              <div class="controls" data-toggle="buttons-checkbox">
+                <label class="checkbox inline btn btn-danger fileupload-remove">
+                  <%= f.check_box :remove_file %><%= t(:remove) %>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="control-group">
+          <label class="control-label muted"><%= t("video_pro.video_snapshot") %></label>
+          <div class="controls">
+            <div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if @video_image.video_snapshot.file %>" data-provides="fileupload">
+              <div class="fileupload-new thumbnail pull-left">
+                <% if @video_image.video_snapshot.file %>
+                  <%= image_tag @video_image.video_snapshot.url %>
+                <% else %>
+                  <img src="https://via.placeholder.com/200x80/EFEFEF/AAAAAA" />
+                <% end %>
+              </div>
+              <div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
+              <span class="btn btn-file">
+                <span class="fileupload-new"><%= t(:select_image) %></span>
+                <span class="fileupload-exists"><%= t(:change) %></span>
+                <%= f.file_field :video_snapshot, accept: "image/*" %>
+              </span>
+              <a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a>
+              <div class="controls" data-toggle="buttons-checkbox">
+                <label class="checkbox inline btn btn-danger fileupload-remove">
+                  <%= f.check_box :remove_file %><%= t(:remove) %>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="control-group">
+          <label for="auto_convert_video" class="control-label muted" function="field_label">
+            <%= t("video_pro.auto_convert_video")%>
+          </label>
+          <div class="controls">
+            <label class="checkbox">
+              <%= f.check_box :auto_convert_video, id: "auto_convert_video" %>
+            </label>
+          </div>
+        </div>
+      </div>
+      <!-- Post Agency -->
+      <div class="control-group">
+        <label class="control-label muted"><%= t("video_pro.post_agency") %></label>
+        <div class="controls">
+          <%
+            current_user_id = current_user.id.to_s
+            if @video_image.update_user_id.blank?
+              update_user_id = current_user_id
+            else
+              update_user_id = @video_image.update_user_id
+            end
+            post_agency_text = ""
+            if @video_pro_setting
+              if update_user_id == current_user_id
+                post_agency_text = @video_pro_setting.get_user_name(update_user_id)
+              else
+                post_agency_text = "#{@video_pro_setting.get_user_name(update_user_id)} -> #{@video_pro_setting.get_user_name(current_user_id)}"
+              end
+            else
+              if update_user_id == current_user_id
+                post_agency_text = VideoProSetting.get_user_name(update_user_id)
+              else
+                post_agency_text = "#{VideoProSetting.get_user_name(update_user_id)} -> #{VideoProSetting.get_user_name(current_user_id)}"
+              end
+            end
+          %>
+          <%= select_tag "#{f.object_name}[use_override_post_agency]", options_for_select([[t("video_pro.the_same_as_publisher"), "0"], [t("video_pro.other"), "1"]], f.object.use_override_post_agency ? "1" : "0"), id: 'use_override_post_agency' %>
+          <div id="original_post_agency" class="<%= 'hide' if f.object.use_override_post_agency %>">
+            <%= post_agency_text %>
+          </div>
+          <div id="override_post_agency" class="<%= 'hide' unless f.object.use_override_post_agency %>">
+            <%= f.select("override_post_agency", (options_for_select(VideoProSetting.first.post_agencies.to_a.map.with_index{|agency,i| [agency, i] },:selected => f.object.override_post_agency)  rescue [])) %>
+          </div>
+        </div>
+      </div>
+
+      <!-- Date Time Picker -->
+      <div class="control-group">
+        <label class="control-label muted" for="video_pro_postdate"><%= t("video_pro.postdate") %></label>
+        <div class="controls">
+          <%= f.datetime_picker :postdate, :no_label => true, :picker_type=>'date', :format=>'yyyy/MM/dd' %>
+        </div>
+      </div>
+
+      <!-- Date Time Picker -->
+      <div class="control-group">
+        <label class="control-label muted" for="video_pro_deadline"><%= t("video_pro.deadline") %></label>
+        <div class="controls">
+          <%= f.datetime_picker :deadline, :no_label => true, :picker_type=>'date', :format=>'yyyy/MM/dd', :new_record => @video_image.new_record? %>
+        </div>
+      </div>
+
+      <!-- language-selection -->
+      <div class="control-group">
+        <label class="control-label muted"><%= t("video_pro.language_enabled") %></label>
+        <div class="controls">
+         <% @site_in_use_locales.each do |locale| %>
+          <label class="checkbox">
+            <%= check_box_tag "video_image[language_enabled][]", locale, (@video_image.language_enabled.include?(locale.to_s) rescue false) %>
+            <%= t(locale.to_s) %>
+          </label>
+          <% end %>
+        </div>
+      </div>
+
+    </div>
+    <div class="tab-pane fade" id="status">
+      <!-- Status -->
+      <div class="control-group">
+        <label class="control-label muted"><%= t(:status) %></label>
+        <div class="controls" data-toggle="buttons-checkbox">
+          <label class="checkbox inline btn <%= 'active' if f.object.is_top? %>">
+            <%= f.check_box :is_top %> <%= t(:top) %>
+          </label>
+          <label class="checkbox inline btn <%= 'active' if f.object.is_hot? %>">
+            <%= f.check_box :is_hot %> <%= t(:hot) %>
+          </label>
+          <label class="checkbox inline btn <%= 'active' if f.object.is_hidden? %>">
+            <%= f.check_box :is_hidden %> <%= t(:hide) %>
+          </label>
+        </div>
+      </div>
+    </div>
+    <!-- Tag Module -->
+    <div class="tab-pane fade" id="tag">
+      <div class="control-group">
+        <label class="control-label muted"><%= t(:tags) %></label>
+        <%= select_tags(f, @module_app) %>
+      </div>
+    </div>
+  </div>
+
+  <!-- Language Tabs -->
+  <ul class="nav nav-pills language-nav">
+    <% @site_in_use_locales.each_with_index do |locale, i| %>
+      <li class="<%= 'active' if i == 0 %>">
+        <a data-toggle="tab" href=".<%= locale %>"><%= t(locale.to_s) %></a>
+      </li>
+    <% end %>
+  </ul>
+
+  <!-- Language -->
+  <div class="tab-content language-area">
+
+    <% @site_in_use_locales.each_with_index do |locale, i| %>
+    
+      <div class="<%= locale %> tab-pane fade <%= ( i == 0 ) ? "in active" : '' %>">
+        <!-- Title-->
+        <div class="control-group input-content">
+          <label for="video_title" class="control-label muted"><%= t("title")%></label>
+          <div class="controls">
+            <%= f.fields_for :title_translations do |f| %>
+              <%= f.text_field locale, class: "input-block-level", value: (@video_image.title_translations[locale] rescue nil), placeholder: "#{t(locale.to_s)+t("title")}" %>
+            <% end %>
+          </div>
+        </div>
+        <!-- Description -->
+        <div class="control-group input-content">
+          <label class="control-label muted"><%= t(:description) %> (<%= t(locale.to_s) %>)</label>
+          <div class="controls">
+            <div class="textarea">
+              <%= f.fields_for :desc_translations do |f| %>
+                <%= f.cktext_area locale, rows: 5, class: "input-block-level", :value => (@video_image.desc_translations[locale] rescue nil) %>
+              <% end %>
+            </div>
+          </div>
+        </div>
+        <!-- Keyword -->
+        <div class="control-group input-content">
+          <label class="control-label muted"><%= t("video_pro.keyword") %> (<%= t(locale.to_s) %>)</label>
+          <div class="controls">
+            <%= f.fields_for :keyword_translations do |f| %>
+              <%= f.text_field locale, class: "input-block-level", value: (@video_image.keyword_translations[locale] rescue nil) %>
+            <% end %>
+          </div>
+        </div>
+      </div>
+
+    <% end %>
+
+  </div>
+
+</div>
+
+<!-- Form Actions -->
+<div class="form-actions">
+  <input type="hidden" name="referer_url" value="<%= request.referer %>">
+  <%= f.submit t('submit'), class: 'btn btn-primary' %>
+</div>
+<script type="text/javascript">
+  var form  = new FormValidator($("#new_video_image"));
+  $("div#exchange_item_" + $("#video_image_exchange_item").val()).show();
+  $("#video_image_exchange_item").on("change",function(){
+    $("div[id*=exchange_item]").hide();
+    $("div#exchange_item_" + $(this).val()).show();
+  })
+  function checkSelect()
+  {
+    if(document.getElementById("video_image_exchange_item").value == "")
+    {
+      alert("<%= t('video_pro.please_choose_exchange_item') %>");
+      return false;
+    }
+    return true;
+  }
+  $(document).ready(function(){
+    jplayer_ready_func_1();
+    $('#video_image_video_file').change(function(){
+      var file = this.files ? this.files[0] : null;
+      var value = this.value;
+      if(file || value){
+        var file_name = file ? file.name : value.split(/[\/\\]/).last();
+        var type = get_video_type(file_name);
+        var file_url =  window.URL ? window.URL.createObjectURL(file) : "file://"+ value;
+        $("#jquery_jplayer_1").parents('.fileupload-new').css('display','');
+        $("#jquery_jplayer_1").jPlayer('destroy');
+        jPlayer_1_data["title"] = file_name;
+        jPlayer_1_data[type] = file_url;
+        $("#jquery_jplayer_1").jPlayer(jPlayer_1);
+      }
+    })
+    $('#exchange_item_2 [data-dismiss="fileupload"]').on("click",function(){
+      $("#jquery_jplayer_1").parents('.fileupload-new').css('display','none');
+    })
+    $('#video_image_out_link').on('paste', function(e){
+      var pastedData = e.originalEvent.clipboardData.getData('text');
+      var _this = $(this);
+      pastedData = pastedData.replace(new RegExp('^http(s|)://' + window.location.host), '');
+      window.setTimeout(function(){
+        _this.val(pastedData);
+      }, 0);
+    });
+    $("#use_override_post_agency").on("change", function(){
+      var val = $(this).val();
+      if(val == "1"){
+        $('#override_post_agency').removeClass('hide');
+        $('#original_post_agency').addClass('hide');
+      }else{
+        $('#override_post_agency').addClass('hide');
+        $('#original_post_agency').removeClass('hide');
+      }
+    })
+  })
+</script>
+
+
+
+
+
+
+
--- a/app/views/admin/video_pros/_index_table.html.erb
+++ b/app/views/admin/video_pros/_index_table.html.erb
@ -0,0 +1,71 @@
+<table class="table main-list">
+  <thead>
+    <tr class="sort-header">
+      <% @table_fields.each do |f| %>
+      <%= thead(f) %>
+      <% end %>
+    </tr>
+  </thead>
+  <tbody>
+  <% @video_images.each do |image| %>
+    <tr>
+      <td>
+        <%= image.status_for_table %>
+      </td>
+      <td>
+        <%= image.category_title %>
+      </td>
+      <td>
+      <% if image.exchange_item == "1" %>
+        <iframe height="140" src="<%= image.embed_url %>"></iframe>
+      <% elsif image.exchange_item == "2" %>
+        <%
+         video_snapshot_url = ""
+         video_snapshot_url = image.video_snapshot.url if image.video_snapshot.file %>
+        <video width="320" height="240" controls poster="<%=video_snapshot_url%>">
+          <source src="<%= image.video_file.url %>" type="video/mp4">
+          Your browser does not support the video tag.
+        </video>
+      <% elsif image.exchange_item == "3" %>
+        <%= image_tag image.file.thumb, :class => "video_data-image" %>
+      <% end %>
+      </td>
+      <td>
+        <%= image.title.to_s.html_safe rescue "" %>
+        <% if can_edit_or_delete?(@video_data) %>
+          <div class="quick-edit">
+            <ul class="nav nav-pills">
+              <li><a href="<%= edit_admin_video_pro_path(image.id, :page => params[:page]) %>"><%= t(:edit) %></a></li>
+              <li><a href="<%= admin_video_pro_path(image.id, :page => params[:page]) %>" class="delete text-error" data-method="delete" data-confirm="Are you sure?" ><%= t(:delete_) %></a></li>
+            </ul>
+          </div>
+         <% end %>
+      </td>
+      <td>
+        <%= image.postdate.strftime("%Y-%m-%d") rescue "" %>
+      </td>
+      <td>
+        <%= image.deadline.strftime("%Y-%m-%d") rescue "" %>
+      </td>
+      <td>
+        <%= image.desc %>
+      </td>
+      <td>
+        <%= image.keyword %>
+      </td>
+      <td>
+        <%= image.post_agency(@video_pro_setting) %>
+        <div><%= image.updated_at.strftime("%Y-%m-%d %H:%M") rescue "" %></div>
+      </td>
+    </tr>
+  <% end %>
+  </tbody>
+</table>
+<div class="bottomnav clearfix" style="left: 81px;">
+  <div class="action pull-right">
+    <a class="btn btn-primary" href="<%= new_admin_video_pro_path(:page => params[:page]) %>">
+      <%= t("video_pro.add") %>
+    </a>
+  </div>
+ <%= content_tag :div, paginate(@video_images), class: "pagination pagination-centered" %>
+</div>
--- a/app/views/admin/video_pros/_jplayer.html.erb
+++ b/app/views/admin/video_pros/_jplayer.html.erb
@ -0,0 +1,421 @@
+<%= javascript_include_tag "video_data/jplayer_front" %>
+<style type="text/css">
+@media screen and (max-width: 500px) {
+
+    /* jplayer */
+    .jp-video video, .jp-audio, .jp-controls-holder {
+        width: 100% !important;
+    }
+
+   .jp-video-360p {
+       max-width: 570px !important;
+   }
+
+   .jp-video-270p {
+       max-width: 480px !important;
+   }
+
+   .jp-progress {
+       width: 130px;
+   }
+
+}
+.jp-interface{
+  bottom: 0;
+  height: 6em;
+  position: absolute;
+}
+.jp-video-play,.jp-jplayer{
+  height: 100%;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding-bottom: 6em;
+}
+.jp-gui{
+  width: 100%;
+  height: 100%;
+}
+.jp-jplayer{
+  width: 100%;
+  position: absolute;
+  overflow: hidden;
+  clip-path: 0 0;
+  box-sizing: content-box;
+  transform: translatez(0);
+}
+.jp-type-single{
+  position: relative;
+  height: 100%;
+}
+.jp-video{
+  width: 100%;
+  height: 100%;
+}
+[id^="jp_video_"]{
+  box-sizing: content-box;
+  position: absolute;
+  top: -100%;
+  bottom: -100%;
+  left: -100%;
+  right: -100%;    
+  margin: auto;
+
+  min-width: 100%;
+  min-height: 100%;
+  object-fit: cover;
+  transform: translatez(0);
+}
+.jp-video.hide-ui .jp-jplayer,.jp-video.hide-ui .jp-video-play{
+  padding-bottom: 0em;
+}
+.jp-video.hide-ui .jp-gui{
+  display: none;
+}
+.jp-video.hide-ui [id^="jp_video_"]{
+  cursor: none;
+}
+.jp-video.hide-ui.auto_play [id^="jp_video_"]{
+  cursor: default;
+}
+.jp-no-solution
+  position: absolute;
+  width: 100%;
+  display: block;
+}
+</style>
+<div id="jp_container_<%= i %>" class="jp-video hide-ui<%= " auto_play" if @autoplay_video%>" role="application" aria-label="media player">
+  <div class="jp-type-single">
+    <div id="jquery_jplayer_<%= i %>" class="jp-jplayer"></div>
+    <% unless @hide_video_tools %>
+    <div class="jp-gui">
+      <div class="jp-video-play">
+        <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
+      </div>
+      <div class="jp-interface">
+        <div class="jp-progress">
+          <div class="jp-seek-bar">
+            <div class="jp-play-bar"></div>
+          </div>
+        </div>
+        <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
+        <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
+        <div class="jp-controls-holder">
+          <div class="jp-controls">
+            <button class="jp-play" role="button" tabindex="0">play</button>
+            <button class="jp-stop" role="button" tabindex="0">stop</button>
+          </div>
+          <div class="jp-volume-controls">
+            <button class="jp-mute" role="button" tabindex="0">mute</button>
+            <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
+            <div class="jp-volume-bar">
+              <div class="jp-volume-bar-value"></div>
+            </div>
+          </div>
+          <div class="jp-toggles">
+            <button class="jp-repeat" role="button" tabindex="0">repeat</button>
+            <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
+          </div>
+        </div>
+        <div class="jp-details">
+          <div class="jp-title" aria-label="title">&nbsp;</div>
+        </div>
+      </div>
+    </div>
+    <% end %>
+    <div class="jp-no-solution">
+      <span>Update Required</span>
+      To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
+    </div>
+  </div>
+</div>
+<script type="text/javascript">
+  if (typeof(get_video_type)=='undefined'){
+    function get_video_type(file_name){
+      var type;
+      if(file_name){
+        if(file_name.match(/\.(ogg|ogv)/)){
+          type = "ogv";
+        }else if(file_name.match(/\.webm/)){
+          type = "webmv";
+        }else{
+          type = "m4v";
+        }
+        return type;
+      }else{
+        return "";
+      }   
+    }
+  }
+  var play_<%= i %>_flag = false;
+  function ad_call_on_play_jplayer_<%= i %>(ele){
+    var video_box = $(ele).parents("div.video_box_wrap").eq(0);
+    if(video_box.length == 1){
+      //$(ele).jPlayer("pauseOthers");
+      hide_jplayer_ui_<%= i %>(ele);
+    }
+
+  }
+  function ad_call_on_pause_jplayer_<%= i %>(ele){
+    var video_box = $(ele).parents("div.video_box_wrap").eq(0);
+    if(video_box.length == 1){
+      hide_jplayer_ui_<%= i %>(ele);
+    }
+  }
+  function hide_jplayer_ui_<%= i %>(ele) {
+    var jpalyer_video = $(ele).parents('.jp-video').eq(0);
+    jpalyer_video.find(".jp-gui").css("display","");
+    jpalyer_video.addClass('hide-ui');
+  }
+  function show_jplayer_ui_<%= i %>(ele) {
+    <% unless @hide_video_tools %>
+    var jpalyer_video = $(ele).parents('.jp-video').eq(0);
+    jpalyer_video.removeClass('hide-ui');
+    <% end %>
+  }
+  function click_jplayer_<%= i %>(){
+    $("#jp_container_<%= i %> .jp-video-play").css('display','')
+    if (play_<%= i %>_flag){
+      $("#jquery_jplayer_<%= i %>").jPlayer("pause");
+    }else{
+      $("#jquery_jplayer_<%= i %>").jPlayer("play");
+    }
+    <% unless @hide_video_tools %>
+    $(this).parents('.jp-video').eq(0).removeClass('hide-ui');
+    <% end %>
+  }
+  function jplayer_center_video_front(ele){
+    /*
+    $(ele).css('margin-left',-Math.abs($(ele).parent().width()-$(ele).width())/2);
+    if($(ele).parents('.w-ba-video_data').length>0){
+      var p_h = $(ele).parents('.w-ba-video_data').eq(-1).height();
+      var h = ele.videoHeight || $(ele).height();
+      $(ele).height()
+      $(ele).css('margin-top',-Math.abs(p_h-h)/2);
+    }
+    $(ele).css('transform','unset');
+    */
+  }
+  function jplayer_auto_height_<%= i %>(ele){
+    var is_frontend = <%= @is_frontend ? true : false %>;
+    if(is_frontend){
+      var video_box = $(ele).parents("div.video_box_wrap").eq(0);
+      if(video_box.height() == 0 || video_box.data("auto-height")){
+        video_box.data("auto-height",true);
+        var video_block = video_box.find('video')[0];
+        if(video_block != undefined){
+          video_block.addEventListener( "loadedmetadata", function (e) {
+            video_box.css("padding-bottom",'0');
+            video_box.height(video_box.width() * video_block.videoHeight / video_block.videoWidth);
+            if(!(video_box.data("bind-resize"))){
+              video_box.data("bind-resize",true);
+              $(window).resize(function(){
+                video_box.height(video_box.width() * video_block.videoHeight / video_block.videoWidth);
+              })
+            }
+            <% if @bind_autoheight_callback %>
+            <%=@bind_autoheight_callback%>();
+            <% end %>
+          }, false );
+        }
+      }
+    }
+  }
+  $(window).resize(function() {
+    $('.w-ba-video_data video[id^=jp_video_]').each(function(){
+      jplayer_center_video_front(this);
+    });
+  })
+  if (typeof(default_video_data)=='undefined'){
+    var default_video_data = {
+      cssSelectorAncestor: "#jp_container_<%= i %>",
+      ready: function () {
+        $(this).jPlayer("setMedia", {
+          title: "Big Buck Bunny Trailer",
+          m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
+          ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
+          webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",
+          poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
+        })
+      },
+      play: function() { // To avoid multiple jPlayers playing together.
+        play_<%= i %>_flag = true;
+        ad_call_on_play_jplayer_<%= i %>(this);
+        jplayer_center_video_front($(this).find('video'));
+        jplayer_auto_height_<%= i %>(this);
+      },
+      click: function(){
+        click_jplayer_<%= i %>();
+      },
+      pause: function(){
+        play_<%= i %>_flag = false;
+        $(this).jPlayer("pause");
+        ad_call_on_pause_jplayer_<%= i %>(this);
+        window.console.log("pause");
+      },
+      abort: function(){
+        play_<%= i %>_flag = false;
+        <% unless @hide_video_tools %>
+        $(this).parents('.jp-video').eq(0).removeClass('hide-ui');
+        <% end %>
+        window.console.log("abort");
+      },
+      ended: function(){
+        play_<%= i %>_flag = false;
+        <% unless @hide_video_tools %>
+        $(this).parents('.jp-video').eq(0).removeClass('hide-ui');
+        <% end %>
+        <% if @apply_autoplay_script %>
+        var is_frontend = <%= @is_frontend ? true : false %>;
+        var video_box = $(this).parents("div.video_box_wrap").eq(0);
+        var autoHeight = video_box.data("auto-height");
+        <% end %>
+        window.console.log("end");
+      },
+      swfPath: "/assets/video_data",
+      supplied: "webmv, ogv, m4v",
+      globalVolume: true,
+      useStateClassSkin: true,
+      autoBlur: false,
+      smoothPlayBar: true,
+      keyEnabled: true,
+      preload: 'auto',
+      keyBindings: {
+        play: {
+          key: 80, // p
+          fn: function(f) {
+            if(f.status.paused) {
+              f.play();
+            } else {
+              f.pause();
+            }
+          }
+        },
+        fullScreen: {
+          key: 70, // f
+          fn: function(f) {
+            if(f.status.video || f.options.audioFullScreen) {
+              f._setOption("fullScreen", !f.options.fullScreen);
+            }
+          }
+        },
+        muted: {
+          key: 77, // m
+          fn: function(f) {
+            f._muted(!f.options.muted);
+          }
+        },
+        volumeUp: {
+          key: 190, // .
+          fn: function(f) {
+            f.volume(f.options.volume + 0.1);
+          }
+        },
+        volumeDown: {
+          key: 188, // ,
+          fn: function(f) {
+            f.volume(f.options.volume - 0.1);
+          }
+        },
+        loop: {
+          key: 76, // l
+          fn: function(f) {
+            f._loop(!f.options.loop);
+          }
+        }
+      },
+      wmode: "window",
+      solution: "html, flash",
+      size: {
+        width: "100%",
+        height: "",
+        cssClass: ""
+      }
+    };
+  }
+  <% if file_url %>
+  var jPlayer_<%= i %>_name = "<%= file_name %>";
+  var jPlayer_<%= i %>_type = get_video_type(jPlayer_<%= i %>_name);
+  var jPlayer_<%= i %>_data = {
+    title: jPlayer_<%= i %>_name,
+  };
+  var jPlayer_<%= i %> = $.extend({},default_video_data);
+  jPlayer_<%= i %>_data[jPlayer_<%= i %>_type] = "<%= file_url %>";
+  <% if file_webm_url %>
+  jPlayer_<%= i %>_data['webmv'] = "<%= file_webm_url %>";
+  <% end %>
+  <% if @file_poster %>
+  jPlayer_<%= i %>_data['poster'] = "<%= @file_poster %>";
+  <% end %>
+  //jPlayer_<%= i %>_data["autoPlay"] = <%= @autoplay_video == true %>;
+  jPlayer_<%= i %>["ready"] = function () {
+    $(this).jPlayer("setMedia", jPlayer_<%= i %>_data);
+    <% if @autoplay_video == true %>
+    var $video_ele = $(this).find('video');
+    if ($video_ele.length>0){
+      $video_ele.eq(0).attr('autoplay','autoplay').attr('muted','muted').attr('playsinline',true);
+      $video_ele.attr('poster', "<%= @file_poster %>");
+    }
+    $(this).jPlayer("mute", true).jPlayer("play",0);
+    <% elsif @file_poster %>
+    var $video_ele = $(this).find('video');
+    if ($video_ele.length>0){
+      $video_ele.attr('poster', "<%= @file_poster %>");
+    }
+    <% end %> 
+    <% unless @hide_video_tools %>
+    $(this).parents('.jp-video').eq(0).removeClass('hide-ui');
+    <% end %>
+    jplayer_auto_height_<%= i %>(this);
+  }
+  <% else %>
+  var jPlayer_<%= i %> = default_video_data;
+  <% end %>
+  function jplayer_ready_func_<%= i %>(){
+    $("#jquery_jplayer_<%= i %>").jPlayer(jPlayer_<%= i %>);
+    $("#jquery_jplayer_<%= i %>, #jquery_jplayer_<%= i %> +.jp-gui .jp-video-play-icon").click(function(event){
+      click_jplayer_<%= i %>();
+      //event.stopPropagation();
+    })
+    $("#jquery_jplayer_<%= i %> *[id^='jp_video'],#jquery_jplayer_<%= i %>").mouseover(function( event ) {
+      var $this = $(this);
+      var wrapper = $this.parents('.jp-video').eq(0)
+      var video_item;
+      try{
+        video_item = $this.data('jPlayer').internal.video.jq;
+      }catch(e){};
+      if(video_item)
+        video_item.removeAttr('title');
+      <% unless @hide_video_tools %>
+      wrapper.removeClass('hide-ui');
+      <% end %>
+    });
+    function mousemove(target,callback_move,callback_stop) {
+      target = target || window;
+      $(target).mousemove((function(event) {
+        var t;
+        return function(event) {
+          if(typeof t !='undefined')
+             clearTimeout(t);
+          var _this = event.target;
+          if(callback_move){
+            t = setTimeout(function() {callback_move.call(_this,_this)},0);
+          }
+          if(callback_stop){
+            t = setTimeout(function() {
+              if(typeof t !='undefined'){
+                clearTimeout(t);
+              }
+              callback_stop.call(_this,_this);
+            }, 1000)
+          }
+        }
+      })())
+    }
+    mousemove("#jquery_jplayer_<%= i %> *[id^='jp_video'],#jquery_jplayer_<%= i %>",show_jplayer_ui_<%= i %>,hide_jplayer_ui_<%= i %>)
+  }
+  <% if defined?(not_ready).nil? || !not_ready %>
+  $(document).ready(function(){
+    jplayer_ready_func_<%= i %>();
+  })
+  <% end %>
+</script>
--- a/app/views/admin/video_pros/edit.html.erb
+++ b/app/views/admin/video_pros/edit.html.erb
@ -0,0 +1,5 @@
+<%= form_for @video_image, url: admin_video_pro_path(@video_image.id), html: {class: "form-horizontal main-forms", onSubmit: "return checkSelect();"} do |f| %>
+  <fieldset>
+    <%= render partial: 'form', locals: {f: f} %>
+  </fieldset>
+<% end %>
--- a/app/views/admin/video_pros/index.html.erb
+++ b/app/views/admin/video_pros/index.html.erb
@ -0,0 +1,37 @@
+<% content_for :page_specific_javascript do %>
+  <%= javascript_include_tag "lib/jquery-ui-sortable.min" %>
+<% end %>
+<% content_for :page_specific_css do %>
+  <style type="text/css">
+    .video_data-image{
+      height: 140px;
+      background-repeat: no-repeat;
+    }
+    .order-list{
+      list-style: none;
+    }
+    .order-list-image i{
+      font-size: 20px;
+      cursor: move;
+    }
+    
+    .order-list-image h4{
+      display: inline-block;
+      margin-left: 30px;
+    }
+
+   #sort-images-modal .modal-body {
+      max-height: 60vh;
+    }
+
+    #sort-images-modal .modal-body .order-list-image img {
+      width: 150px;
+      margin: 0 0 10px 10px;
+    }
+
+  </style>
+<% end %>
+<%=  render_filter @filter_fields, "index_table" %>
+<span id="index_table">
+  <%= render 'index_table'%>
+</span>
--- a/app/views/admin/video_pros/new.html.erb
+++ b/app/views/admin/video_pros/new.html.erb
@ -0,0 +1,5 @@
+<%= form_for @video_image, url: admin_video_pros_path, html: {class: "form-horizontal main-forms", onSubmit: "return checkSelect();"} do |f| %>
+  <fieldset>
+    <%= render partial: 'form', locals: {f: f} %>
+  </fieldset>
+<% end %>
--- a/app/views/admin/video_pros/settings.html.erb
+++ b/app/views/admin/video_pros/settings.html.erb
@ -0,0 +1,107 @@
+<%= stylesheet_link_tag "lib/togglebox"%>
+<style>
+  ul.inline > li.control-group{
+    display: table;
+  }
+  .control-group .toggle-control .togglebox{
+    margin-top: 0;
+  }
+</style>
+<%= form_for @video_pro_setting, url: update_settings_admin_video_pros_path, html: {class: "form-horizontal main-forms"} do |f| %>
+  <fieldset>
+    <div class="control-group">
+      <label for="video_pro_post_agency" class="control-label muted">
+        <%= t("video_pro.post_agency")%>
+      </label>
+      <div class="controls">
+        <div id="post_agencies_block">
+          <% f.object.post_agencies.to_a.each_with_index do |dept, idx| %>
+            <div class="post_agency">
+              <div class="tab-content">
+                <% @site_in_use_locales.each_with_index do |locale, i| %>
+                  <div class="tab-pane fade <%= ( i == 0 ) ? "active in" : '' %>" id="post_agencies_<%=idx%>_<%= locale %>">
+                    <%= f.fields_for :post_agencies_translations,f.object do |f| %>
+                      <%= f.text_field "#{locale}][", :value => (f.object.post_agencies_translations[locale][idx] rescue ""), :placeholder=>t("video_pro.post_agency", :id=>nil) %>
+                    <% end %>
+                  </div>
+                <% end %>
+              </div>
+              <div class="btn-group" data-toggle="buttons-radio">
+                <% @site_in_use_locales.each_with_index do |locale, i| %>
+                  <a class="btn <%= ( i == 0 ) ? "active" : '' %>" href="#post_agencies_<%=idx%>_<%= locale %>" data-toggle="tab"><%= t(locale.to_s) %></a>
+                <% end %>
+              </div>
+              <button class="remove_agency btn btn-danger" type="button">X</button>
+            </div>
+          <% end %>
+          <button class="add_agency btn btn-primary" type="button"><%= t(:add) %></button>
+        </div>
+      </div>
+    </div>
+    <div class="control-group">
+      <label for="video_pro_setting_enable" class="control-label muted">
+        <%= t("video_pro.enable_name_mapping")%>
+      </label>
+      <div class="controls">
+        <label class="checkbox">
+          <%= f.check_box :enable_name_mapping, :id => "video_pro_setting_enable", :class => "toggle-check", "data-disabled" => "#{(f.object.enable_name_mapping == false)}" %>
+        </label>
+      </div>
+    </div>
+    <!-- Language Tabs -->
+    <ul class="nav nav-pills language-nav">
+      <% @site_in_use_locales.each_with_index do |locale, i| %>
+        <li class="<%= 'active' if i == 0 %>">
+          <a data-toggle="tab" href=".<%= locale %>"><%= t(locale.to_s) %></a>
+        </li>
+      <% end %>
+    </ul>
+    <!-- Language -->
+    <div class="tab-content language-area">
+      <% @site_in_use_locales.each_with_index do |locale, i| %>
+        <ul class="inline <%= locale %> tab-pane fade <%= ( i == 0 ) ? "in active" : '' %>">
+          <% User.where(:beta_tester.ne=>true).each do |user| %>
+          <% user_id = user.id.to_s %>
+          <li class="control-group">
+            <label class="control-label"><%= user.member_name %></label>
+            <div class="controls">
+              <div class="textarea">
+                <%= f.fields_for :user_mapping_translations do |f| %>
+                  <%= f.fields_for locale do |f| %>
+                    <%= f.text_field user_id, value: (@video_pro_setting.user_mapping_translations[locale][user_id] rescue nil), class: "input-block-level" %>
+                  <% end %>
+                <% end %>
+              </div>
+            </div>
+          </li>
+          <% end %>
+        </ul>
+      <% end %>
+    </div>
+    <!-- Form Actions -->
+    <div class="form-actions">
+      <input type="hidden" name="referer_url" value="<%= request.referer %>">
+      <%= f.submit t('submit'), class: 'btn btn-primary' %>
+    </div>
+  </fieldset>
+<% end %>
+<script>
+  $(document).ready(function(){
+    $(document).on("click",".remove_agency",function(){
+      if(window.confirm("Are you sure?"))
+        $(this).parents(".post_agency").eq(0).remove();
+    })
+    $(".add_agency").click(function(){
+      var tmp_text = '<div class="post_agency"><div class="tab-content">';
+      <% @site_in_use_locales.each_with_index do |locale, i| %>
+        tmp_text += '<div class="tab-pane fade <%= ( i == 0 ) ? "active in" : '' %>" id="post_agencies_new_idx_<%= locale %>"><input name="video_pro_setting[post_agencies_translations][<%=locale%>][]" placeholder="<%=t('video_pro.post_agency')%>" type="text" title="<%=t('video_pro.post_agency')%>"></div>';
+      <% end %>
+      tmp_text += '</div><div class="btn-group" data-toggle="buttons-radio">';
+      <% @site_in_use_locales.each_with_index do |locale, i| %>
+        tmp_text += '<a class="btn <%= ( i == 0 ) ? "active" : '' %>" href="#post_agencies_new_idx_<%=locale%>" data-toggle="tab"><%= t(locale.to_s) %></a>';
+      <% end %>
+      tmp_text += '</div><button class="remove_agency btn btn-danger" type="button">X</button></div';
+      $(this).before(tmp_text.replace(/new_idx/g,$(".post_agency").length.toString()));
+    })
+  })
+</script>
--- a/app/views/video_pros/custom_widget_data.html.erb
+++ b/app/views/video_pros/custom_widget_data.html.erb
@ -0,0 +1,28 @@
+<div class="hide" id="video_data_data">
+<div class="control-group input-content">
+  <label class="control-label muted" for="autoplay_video"><%=t("video_pro.autoplay_video")%> :</label>
+  <div class="controls">
+  	<%= hidden_field_tag("#{@field_name}[custom_data_field][autoplay_video]","0") %>
+	<%= check_box_tag("#{@field_name}[custom_data_field][autoplay_video]", "1" ,(@custom_data_field["autoplay_video"] == "1" rescue false), :id=>"autoplay_video" )%>
+  </div>
+</div>
+<div class="control-group input-content">
+  <label class="control-label muted" for="hide_video_tools"><%=t("video_pro.hide_video_tools")%> :</label>
+  <div class="controls">
+  	<%= hidden_field_tag("#{@field_name}[custom_data_field][hide_video_tools]","0") %>
+	<%= check_box_tag("#{@field_name}[custom_data_field][hide_video_tools]", "1" ,(@custom_data_field["hide_video_tools"] == "1" rescue false), :id=>"hide_video_tools" )%>
+  </div>
+</div>
+</div>
+<script>
+	if($('#page_layout').val().indexOf("_video") != -1){
+		$("#video_data_data").removeClass("hide");
+	}
+	$('#page_layout').on("change",function(){
+		if($(this).val().indexOf("_video") != -1){
+			$("#video_data_data").removeClass("hide");
+		}else{
+			$("#video_data_data").addClass("hide");
+		}
+	})
+</script>
--- a/app/views/video_pros/index.html.erb
+++ b/app/views/video_pros/index.html.erb
@ -0,0 +1 @@
+<%= render_view %>
--- a/app/views/video_pros/show.html.erb
+++ b/app/views/video_pros/show.html.erb
@ -0,0 +1,86 @@
+<%
+  data = action_data
+  video_image = data["video_image"]
+  video_title = video_image.title.to_s
+  video_desc = video_image.desc.to_s
+  video_post_agency = video_image.post_agency.to_s
+  video_postdate = video_image.postdate.to_s
+  if video_image.is_youtube
+    video_url = video_image.embed_url
+    video_webm_url = nil
+  else
+    video_url = video_image.video_file.url
+    video_webm_url = video_image.video_file_webm.url
+  end
+  hd_icon_url = "/assets/video_pro/icon_hd.png"
+  view_icon_url = "/assets/video_pro/icon_view.png"
+  view_count_trans = I18n.t("video_pro.view_count")
+  view_count = video_image.view_count
+  autoplay_video = false
+  hide_video_tools = false
+  snapshot_url = video_image.get_snapshot_url
+  @is_frontend = true
+  video_scale = (video_image.scale ? video_image.scale : 56.25)
+%>
+<div class="video_detail">
+  <h3><%= video_title %></h3>
+  <% if video_image.is_youtube %>
+    <div class="video_yt_box video_box_wrap">
+      <iframe id="muteYouTubeVideoPlayer" frameborder="0" allowfullscreen="1"src="<%= video_url%>"></iframe>
+    </div>
+  <% else %>
+    <%= stylesheet_link_tag("video_pro/jplayer.blue.monday.min.css") %>
+    <%= javascript_include_tag("video_pro/jquery.jplayer.min.js") %>
+    <div class="video_box_wrap" data-auto-height="true">
+      <div class="video_box jplayer_slide">
+        <%= render partial: "admin/video_pros/jplayer", locals:{i: "video_file",file_name: video_title,file_url: video_url,file_webm_url: video_webm_url,:@autoplay_video=> autoplay_video,:@apply_autoplay_script=>true,:@hide_video_tools=> hide_video_tools,:@is_frontend=>true,:@file_poster=> snapshot_url} %>
+      </div>
+    </div>
+  <% end %>
+  <div class="imglst_desc">
+    <div class="video_group_time"><%= video_post_agency %> | <%= video_postdate %></div>
+    <div class="movie_desc"><%= video_desc %></div>
+    <div class="view_info">
+      <span><img src="<%= hd_icon_url %>" alt="HD"></span>
+      <span><img src="<%= view_icon_url %>" alt="<%= view_count_trans %>">x <%= view_count %></span>
+    </div>
+  </div>
+  <style>
+    .video_box_wrap{
+      height: 0;
+      padding-bottom: <%=video_scale%>%;
+      position: relative;
+      overflow: hidden;
+    }
+    .video_box{
+      width: 100%;
+      height: 100%;
+      position: absolute;
+    }
+    .video_yt_box iframe{
+      width: 100%;
+      height: 100%;
+      position: absolute;
+    }
+    .video_group_time{
+      color: #4487cb;
+    }
+    .video_category{
+      color: #e4374a;
+    }
+    .video_title h4{
+      font-size: 1.6em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .view_info{
+      float: right;
+    }
+    .view_info img{
+      margin-right: 5px;
+    }
+  </style>
+</div>
--- a/app/views/video_pros/show_api.html.erb
+++ b/app/views/video_pros/show_api.html.erb
@ -0,0 +1,58 @@
+<%
+  autoplay_video = false
+  hide_video_tools = false
+  snapshot_url = @video_image.get_snapshot_url
+  @is_frontend = true
+  video_scale = (@video_image.scale ? @video_image.scale : 56.25)
+%>
+<style>
+  .video_box_wrap{
+    height: 0;
+    padding-bottom: <%=video_scale%>%;
+    position: relative;
+    overflow: hidden;
+  }
+  .video_box{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+  .video_yt_box iframe{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+</style>
+<% if @video_image.is_youtube %>
+<div class="video_yt_box video_box_wrap">
+  <iframe id="muteYouTubeVideoPlayer" frameborder="0" allowfullscreen="1"src="<%= @video_image.embed_url %>"></iframe>
+</div>
+<% else %>
+<%= stylesheet_link_tag("video_pro/jplayer.blue.monday.min.css") %>
+<%= javascript_include_tag("video_pro/jquery.jplayer.min.js") %>
+<div class="video_box_wrap" data-auto-height="true">
+  <div class="video_box jplayer_slide">
+    <%= render partial: "admin/video_pros/jplayer", locals:{i: "video_file",file_name: @video_image.title,file_url: @video_image.video_file.url,file_webm_url: @video_image.video_file_webm.url,:@autoplay_video=> autoplay_video,:@apply_autoplay_script=>true,:@hide_video_tools=> hide_video_tools,:@is_frontend=>true,:@file_poster=> snapshot_url,:@bind_autoheight_callback=>'window.fix_video_modal_width'} %>
+  </div>
+</div>
+<% end %>
+<script type="text/javascript">
+  window.fix_video_modal_width = function(){
+    var modal = $('.video_box_wrap').parents('.modal');
+    var $window = $(window);
+    if(modal.length != 0){
+      var modal_dialog = modal.find('.modal-dialog');
+      var font_size = parseFloat(modal_dialog.css('font-size'));
+      modal_dialog.css('width', '');
+      modal_dialog.width(Math.min(1.0 * $window.height() / (modal_dialog.height() + font_size * 7.5) * modal_dialog.width(), $window.width() - 20));
+      $window.resize(function(){
+        modal_dialog.css('width', '');
+        var font_size = parseFloat(modal_dialog.css('font-size'));
+        modal_dialog.width(Math.min(1.0 * $window.height() / (modal_dialog.height() + font_size * 7.5) * modal_dialog.width(), $window.width() - 20));
+      })
+    }
+  }
+  $(document).ready(function(){
+    window.fix_video_modal_width();
+  })
+</script>
--- a/bin/rails
+++ b/bin/rails
@ -0,0 +1,16 @@
+#!/usr/bin/env ruby
+# This command will automatically be run when you run "rails" with Rails 4 gems installed from the root of your application.
+
+ENGINE_ROOT = File.expand_path('../..', __FILE__)
+ENGINE_PATH = File.expand_path('../../lib/video_pro/engine', __FILE__)
+
+# Set up gems listed in the Gemfile.
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
+require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE'])
+
+require "action_controller/railtie"
+require "action_mailer/railtie"
+require "sprockets/railtie"
+require "rails/test_unit/railtie"
+require "mongoid"
+require 'rails/engine/commands'
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@ -0,0 +1,71 @@
+en:
+  module_name:
+    video_pro: "Video"
+  video_image: "Video"
+  video_pro:
+    latest_ranking: "Latest Ranking"
+    top_ranking: "Top Ranking"
+    search_placeholder: "Please input keywords"
+    search_text1: "Search"
+    search_text2: "Search"
+    all_category: "All Category"
+    view_count: "View Count"
+    the_same_as_publisher: "The same as Publisher"
+    other: "Other"
+    post_agency: "Post Agency"
+    desc: "Description"
+    enable_name_mapping: "Enable Name Mapping"
+    keyword: "Keyword"
+    language_enabled: "Language Enabled"
+    postdate: "Post Date"
+    deadline: "End Date"
+    video_snapshot: "Video Snapshot"
+    auto_convert_video: Auto Convert Video to webm(reduce usage for network traffic)
+    autoplay_video: "Autoplay Video(play mute)"
+    hide_video_tools: Hide video tools
+    select_video: Select Video
+    please_choose_exchange_item: Please Choose Item Type
+    video_pro: Video
+    video_data: Video
+    video_data_name: Video Name
+    edit_video_data: Edit Video
+    effect: Effect
+    enter_number: Please enter a number
+    enter_url: Please enter the URL
+    local: Open In Current page
+    name_only_english: Video Name can only in English
+    new_video_data: New Video
+    new_window: Open In New window
+    no_ie_10_effect_support: IE10 earlier do not support this effect
+    number_milliseconds: Please enter the number of milliseconds
+    number_seconds: Please enter the number of seconds
+    size: Size
+    transition_interval: Interval
+    transition_speed: Speed
+    type: Link Open Type
+    video_data_name_note: Video Name only english
+    ste: Transition Interval
+    ste_note: Please enter the number of seconds
+    best_size: Best Size
+    all: All
+    categories: Categories
+    add: Add
+    duration: Duration
+    setting: Settings
+    expired: Expired
+    order: Order
+    order_images: Order Images
+    save_changes: Save Changes
+    close: Close
+    resume: Resume
+    pause: Pause
+    prev: Prev
+    next: Next
+    muted: Muted
+    unmuted: Unmuted
+  video: Video
+  new_image:  New Image or Video
+  youtube: youtube embed URL
+  type: Image or Video
+  choose_type: Please Select One Type First
+  select: Please Select One
--- a/config/locales/zh_tw.yml
+++ b/config/locales/zh_tw.yml
@ -0,0 +1,68 @@
+zh_tw:
+  module_name:
+    video_pro: "影片模組"
+  video_image: "影片"
+  video_pro:
+    latest_ranking: "最新排行"
+    top_ranking: "熱門排行"
+    search_placeholder: "請輸入關鍵字查詢"
+    search_text1: "搜尋"
+    search_text2: "查詢"
+    all_category: "全部類別"
+    view_count: "觀看人數"
+    the_same_as_publisher: "同發佈人"
+    other: "其他"
+    post_agency: "發佈單位"
+    desc: "描述"
+    enable_name_mapping: "啟用名字對照表"
+    keyword: "關鍵字"
+    language_enabled: "顯示語系"
+    postdate: "發佈時間"
+    deadline: "結束時間"
+    video_snapshot: "影片縮圖"
+    auto_convert_video: 自動轉換成webm格式(節省播放流量)
+    autoplay_video: "自動播放影片(會自動靜音)"
+    hide_video_tools: 隱藏影片工具
+    select_video: 選擇影片
+    please_choose_exchange_item: 請選擇欄位類型
+    video_pro: 影片模組
+    video_data: 橫幅
+    video_data_name: 橫幅名稱
+    name_only_english: 橫幅名稱只能為英文
+    edit_video_data: 編輯橫幅
+    enter_number: 請輸入數字
+    enter_url: 請輸入網址
+    local: 當前視窗開啟
+    new_video_data: 新增橫幅
+    new_window: 新視窗開啟
+    ste: 轉換間隔時間
+    number_seconds: 請輸入秒數
+    number_milliseconds: 請輸入毫秒數
+    best_size: 最佳尺寸
+    effect: 效果
+    all: 全部
+    categories: 類別
+    add: 新增
+    size: 大小
+    settings: 設定
+    transition_interval: 轉換間隔
+    transition_speed: 轉換速度
+    type: 開啟方式
+    expired: 已下架
+    duration: 期間
+    order: 排序
+    order_images: 圖片順序
+    save_changes: 儲存變更
+    close: 取消
+    resume: 繼續播放
+    pause: 暫停播放
+    prev: 上一張
+    next: 下一張
+    muted: 靜音
+    unmuted: 取消靜音
+  video: 影片
+  new_image:  新增圖片 或 影片
+  youtube: youtube網址嵌入
+  type: 圖片 或 影片
+  choose_type: 請先選擇類型
+  select: 請選擇
--- a/config/routes.rb
+++ b/config/routes.rb
@ -0,0 +1,22 @@
+Rails.application.routes.draw do
+  if ENV['worker_num']=='0' && File.basename($0) != 'rake' && !Rails.const_defined?('Console')
+    video_pro_setting = VideoProSetting.first
+    if video_pro_setting.nil?
+      video_pro_setting = VideoProSetting.create
+    end
+  end
+  locales = Site.find_by(site_active: true).in_use_locales rescue I18n.available_locales
+  scope "(:locale)", locale: Regexp.new(locales.join("|")) do
+   namespace :admin do
+      post "/video_pro/save_image_order", to: "video_pros#save_image_order"
+      resources :video_pros do
+        collection do
+          get 'settings'
+          post 'update_settings'
+          patch 'update_settings'
+        end
+      end
+   end
+  end
+  get '/xhr/video_pro/show_api/(:title)-(:uid)', to: 'video_pros#show_api'
+end
--- a/lib/tasks/video_pro_tasks.rake
+++ b/lib/tasks/video_pro_tasks.rake
@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :video_pro do
+#   # Task goes here
+# end
--- a/lib/video_pro.rb
+++ b/lib/video_pro.rb
@ -0,0 +1,4 @@
+require "video_pro/engine"
+
+module VideoPro
+end
--- a/lib/video_pro/engine.rb
+++ b/lib/video_pro/engine.rb
@ -0,0 +1,52 @@
+module VideoPro
+  class Engine < ::Rails::Engine
+    initializer "video_pro" do 
+      OrbitApp.registration "VideoPro", :type => "ModuleApp" do
+        module_label "video_pro.video_pro"
+        base_url File.expand_path File.dirname(__FILE__)
+        widget_methods ["widget"]
+        widget_settings [{"multiselect"=>false,"display_field"=>"title","enable_custom_widget_data"=>true}]
+        # models_to_cache [:video_data,:video_image]
+        taggable "VideoImage"
+        categorizable
+        authorizable
+        frontend_enabled
+        data_count 1..30
+
+        side_bar do
+          head_label_i18n 'video_pro.video_pro', icon_class: "icons-video"
+          available_for "sub_managers"
+          active_for_controllers (['admin/video_pros','admin/video_images'])
+          head_link_path "admin_video_pros_path"
+
+          context_link 'video_pro.all',
+            :link_path=>"admin_video_pros_path" ,
+            :priority=>1,
+            :active_for_action=>{'admin/video_pros'=>"index"},
+            :available_for => 'sub_managers'
+
+          context_link 'setting',
+            :link_path=>"settings_admin_video_pros_path" ,
+            :priority=>1,
+            :active_for_action=>{'admin/video_pros'=>"settings"},
+            :available_for => 'sub_managers'
+
+          context_link 'categories',
+            :link_path=>"admin_module_app_categories_path" ,
+            :link_arg=>"{:module_app_id=>ModuleApp.find_by(:key=>'video_pro').id}",
+            :priority=>3,
+            :active_for_action=>{'admin/video_pros'=>'categories'},
+            :active_for_category => 'VideoPro',
+            :available_for => 'managers'
+          context_link 'tags',
+            :link_path=>"admin_module_app_tags_path" ,
+            :link_arg=>"{:module_app_id=>ModuleApp.find_by(:key=>'video_pro').id}",
+            :priority=>5,
+            :active_for_action=>{'admin/video_pros'=>'tags'},
+            :active_for_tag => 'VideoPro',
+            :available_for => 'managers'
+        end
+      end
+    end
+  end
+end
--- a/lib/video_pro/version.rb
+++ b/lib/video_pro/version.rb
@ -0,0 +1,3 @@
+module VideoPro
+  VERSION = "0.0.1"
+end
--- a/modules/video_pro/_video_pro_widget1.html.erb
+++ b/modules/video_pro/_video_pro_widget1.html.erb
@ -0,0 +1,42 @@
+<div class="w-video_data video_data-widget-1">
+  <ul class="video_data__wrap" data-list="videos" data-level="0">
+    <li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+      <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+        <img class="video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_info">
+          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
+          <div class="video_category">{{video_category}}</div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_desc">{{video_desc}}</div>
+          <div class="view_info">
+            <span><img src="{{hd_icon_url}}" alt="HD"></span>
+            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_group_time{
+      color: #4487cb;
+    }
+    .video_category{
+      color: #e4374a;
+    }
+    .video_title h4{
+      font-size: 1.6em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .view_info{
+      float: right;
+    }
+    .view_info img{
+      margin-right: 5px;
+    }
+  </style>
+</div>
--- a/modules/video_pro/_video_pro_widget_jqcloud1.html.erb
+++ b/modules/video_pro/_video_pro_widget_jqcloud1.html.erb
@ -0,0 +1,20 @@
+<div class="w-video_data video_data-widget-2">
+  <%= javascript_include_tag 'video_pro/jqcloud.min' %>
+  <%= stylesheet_link_tag 'video_pro/jqcloud.min' %>
+  <div class="my_favorite_latin_words jqcloud" style="height: 100px;"></div>
+  <script>
+    $(document).ready(function(){
+      $('[data-subpart-id="{{subpart-id}}"] .my_favorite_latin_words').jQCloud({{jqcloud_words}}, {
+          autoResize: true,
+          afterCloudRender: function(){
+            var is_chinese = (window.I18n && I18n.locale == "zh_tw" || I18n.locale == "zh_cn");
+            $(this).find('a').each(function(i,v){
+              var $v = $(v);
+              $v.attr('title', is_chinese ? ('另開新視窗前往' + $v.text()) : ('Open ' + $v.text() + ' in new tab'));
+              $v.attr('target', '_blank');
+            })
+          }
+      });
+    })
+  </script>
+</div>
--- a/modules/video_pro/info.json
+++ b/modules/video_pro/info.json
@ -0,0 +1,54 @@
+{
+    "widgets" : [
+        {
+            "filename" : "video_pro_widget1",
+            "name" : {
+                "zh_tw" : "1. 影片列表1 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "1. Video List 1 ( snapshot, video info, page link)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "video_pro_widget_jqcloud1",
+            "name" : {
+                "zh_tw" : "2. 影片文字雲(標籤)",
+                "en" : "2. Video Word Cloud(tags)"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ],
+    "frontend" : [
+        {
+            "filename" : "video_pro_index1",
+            "name" : {
+                "zh_tw" : "1. 影片列表1 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "1. Video List 1 ( snapshot, video info, page link)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "video_pro_index2",
+            "name" : {
+                "zh_tw" : "2. 影片列表1 + 類別 + 搜尋 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "2. Video List 1 + Category filter + Search ( snapshot, video info, page link)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "video_pro_index3",
+            "name" : {
+                "zh_tw" : "3. 影片列表2 + 懸浮框 ( 縮圖, 影片資訊)",
+                "en" : "3. Video List 2 + Modal window ( snapshot, video info)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "video_pro_index_post_agency1",
+            "name" : {
+                "zh_tw" : "4. 影片列表3 + 發佈單位篩選 ( 縮圖, 影片資訊, 關鍵字, 頁面連結)",
+                "en" : "4. Video List 3 + Post Agency filter ( snapshot, video info, keyword, page link)"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ]
+}
--- a/modules/video_pro/thumbs/thumb.png
+++ b/modules/video_pro/thumbs/thumb.png
--- a/modules/video_pro/video_pro_index1.html.erb
+++ b/modules/video_pro/video_pro_index1.html.erb
@ -0,0 +1,43 @@
+<div class="i-video_data video_data-index-1">
+  <ul class="video_data__wrap" data-list="videos" data-level="0">
+    <li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+      <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+        <img class="video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_info">
+          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
+          <div class="video_category">{{video_category}}</div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_desc">{{video_desc}}</div>
+          <div class="view_info">
+            <span><img src="{{hd_icon_url}}" alt="HD"></span>
+            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_group_time{
+      color: #4487cb;
+    }
+    .video_category{
+      color: #e4374a;
+    }
+    .video_title h4{
+      font-size: 1.6em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .view_info{
+      float: right;
+    }
+    .view_info img{
+      margin-right: 5px;
+    }
+  </style>
+</div>
+{{pagination_goes_here}}
--- a/modules/video_pro/video_pro_index2.html.erb
+++ b/modules/video_pro/video_pro_index2.html.erb
@ -0,0 +1,141 @@
+<div class="i-video_data video_data-index-2">
+  <div class="video_filter_area col-sm-12">
+    <form>
+      <div class="category_box col-sm-6">
+        <select name="category" id="filter_category_box" data-list="categories" data-level="0">
+          {{option}}
+        </select>
+      </div>
+      <div class="search_box col-sm-6">
+        <div class="search_input">
+          <div class="search_keyword"><input accesskey="S" type="text" id="search" name="search" value="{{search_value}}" placeholder="{{search_placeholder}}"></div>
+          <div class="search_submit"><input type="submit" value="{{search_text1}}" title="{{search_text2}}"></div>
+        </div>
+      </div>
+    </form>
+    <div class="clearfix"></div>
+  </div>
+  <div class="page_tab_box col-sm-12">
+    <ul class="video_tablist" data-list="page_tabs" data-level="0">
+      <li class="{{klass}}"><a title="{{title}}" href="{{url}}">{{title}}</a></li>
+    </ul>
+  </div>
+  <ul class="video_data_wrap" data-list="videos" data-level="0">
+    <li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+      <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+        <img class="video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_info">
+          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
+          <div class="video_category">{{video_category}}</div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_desc">{{video_desc}}</div>
+          <div class="view_info">
+            <span><img src="{{hd_icon_url}}" alt="HD"></span>
+            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_filter_area {
+      margin-bottom: 20px;
+    }
+    #filter_category_box {
+      width: 100%;
+      line-height: 50px;
+      height: 50px;
+      max-width: none;
+      border: none;
+      padding: 0 1em;
+    }
+    .category_box {
+      padding: 0;
+    }
+    .search_box {
+      padding-right: 0;
+    }
+    @media (max-width: 767px){
+      .search_box {
+        padding: 0;
+        margin-top: 0.5em;
+      }
+    }
+    .search_keyword {
+      margin-right: 50px;
+    }
+    .search_input input[type=text] {
+      padding: 0 1em;
+      line-height: 50px;
+    }
+    .search_input input {
+      max-width: none;
+      width: 100%;
+      height: 50px;
+      border: none;
+    }
+    .search_submit {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 50px;
+      height: 100%;
+    }
+    .search_input input[type=submit] {
+      background: url(/assets/video_pro/search_btn.png) center center no-repeat #c9c9c9;
+      font-size: 0;
+    }
+    .video_tablist {
+      overflow: hidden;
+      letter-spacing: 0.1em;
+      margin-bottom: 15px;
+      padding: 0;
+    }
+    .video_tablist>li, .album_tablist>li {
+      width: 50%;
+      float: left;
+    }
+    .video_tablist li.now_view a {
+      background-color: #c47f27;
+    }
+    .video_tablist a {
+      display: block;
+      padding: 10px 0;
+      text-align: center;
+      background-color: #8d681e;
+      color: #fff;
+      text-decoration: none;
+      font-size: 120%;
+    }
+    .video_data_wrap {
+      padding-left: 0;
+    }
+    .video_group_time {
+      color: #4487cb;
+    }
+    .video_category {
+      color: #e4374a;
+    }
+    .video_title h4 {
+      font-size: 1.6em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .view_info {
+      float: right;
+    }
+    .view_info img {
+      margin-right: 5px;
+    }
+  </style>
+  <script>
+    $('#filter_category_box').on('change', function(){
+      $(this).prop('form').submit();
+    })
+  </script>
+</div>
+{{pagination_goes_here}}
--- a/modules/video_pro/video_pro_index3.html.erb
+++ b/modules/video_pro/video_pro_index3.html.erb
@ -0,0 +1,70 @@
+<div class="i-video_data video_data-index-3 video_data-modal-view">
+  <div class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" title="<%= I18n.t(:close) %>" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body video_goes_here">
+        </div>
+      </div>
+    </div>
+  </div>
+  <ul class="video_data__wrap" data-list="videos" data-level="0">
+    <li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+      <a class="video_link" href="javascript:void(0)" title="{{video_title_escape}}" data-api-url="{{api_url}}">
+        <div class="video_snapshot_wrap">
+          <img class="video_snapshot" src="{{snapshot_url}}"/>
+          <img src="/assets/video_pro/btn-play.png" alt="" class="play_icon">
+        </div>
+        <div class="video_info">
+          <div class="video_time"><span date-format="%Y/%m/%d">{{video_postdate}}</span></div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_desc">{{video_desc}}</div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_title h4{
+      font-size: 1.1em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .video_snapshot_wrap {
+      position: relative;
+    }
+    .video_data-modal-view .modal-dialog {
+      width: 80%;
+    }
+    .video_data-modal-view .play_icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      -webkit-transform: translateX(-50%) translateY(-50%);
+      -moz-transform: translateX(-50%) translateY(-50%);
+      transform: translateX(-50%) translateY(-50%);
+      width: 55px;
+    }
+  </style>
+  <script>
+    $(".video_data-modal-view .video_link").off('click').on('click', function(){
+      var _this = $(this);
+      var modal_window = _this.parents('.video_data-modal-view').find('.modal');
+      if(modal_window.length != 0){
+        var api_url = _this.data('api-url');
+        $.get(api_url).done(function(html){
+          modal_window.find('.video_goes_here').html(html);
+          modal_window.modal('show');
+        })
+      }
+    })
+  </script>
+</div>
+{{pagination_goes_here}}
--- a/modules/video_pro/video_pro_index_post_agency1.html.erb
+++ b/modules/video_pro/video_pro_index_post_agency1.html.erb
@ -0,0 +1,97 @@
+<div class="i-video_data video_data-post-agency-1">
+  <div class="video_filter_area col-sm-12">
+    <form>
+      <div class="category_box col-sm-12">
+        <select name="poster" id="filter_category_box" data-list="post_agencies" data-level="0">
+          {{option}}
+        </select>
+      </div>
+    </form>
+    <div class="clearfix"></div>
+  </div>
+  <ul class="video_data_wrap" data-list="videos" data-level="0">
+    <li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+      <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+        <img class="video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_info">
+          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
+          <div class="video_keyword">{{keyword_trans}}: {{video_keyword}}</div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_desc">{{video_desc}}</div>
+          <div class="view_info">
+            <span><img src="{{hd_icon_url}}" alt="HD"></span>
+            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_filter_area {
+      margin-bottom: 20px;
+    }
+    #filter_category_box {
+      width: 100%;
+      line-height: 50px;
+      height: 50px;
+      max-width: none;
+      border: none;
+      padding: 0 1em;
+    }
+    .category_box {
+      padding: 0;
+    }
+    .video_tablist {
+      overflow: hidden;
+      letter-spacing: 0.1em;
+      margin-bottom: 15px;
+      padding: 0;
+    }
+    .video_tablist>li, .album_tablist>li {
+      width: 50%;
+      float: left;
+    }
+    .video_tablist li.now_view a {
+      background-color: #c47f27;
+    }
+    .video_tablist a {
+      display: block;
+      padding: 10px 0;
+      text-align: center;
+      background-color: #8d681e;
+      color: #fff;
+      text-decoration: none;
+      font-size: 120%;
+    }
+    .video_data_wrap {
+      padding-left: 0;
+    }
+    .video_group_time {
+      color: #4487cb;
+    }
+    .video_category {
+      color: #e4374a;
+    }
+    .video_title h4 {
+      font-size: 1.6em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .view_info {
+      float: right;
+    }
+    .view_info img {
+      margin-right: 5px;
+    }
+  </style>
+  <script>
+    $('#filter_category_box').on('change', function(){
+      $(this).prop('form').submit();
+    })
+  </script>
+</div>
+{{pagination_goes_here}}
--- a/test/controllers/admin/video_pros_controller_test.rb
+++ b/test/controllers/admin/video_pros_controller_test.rb
@ -0,0 +1,19 @@
+require 'test_helper'
+
+class Admin::VideoProsControllerTest < ActionController::TestCase
+  test "should get index" do
+    get :index
+    assert_response :success
+  end
+
+  test "should get new" do
+    get :new
+    assert_response :success
+  end
+
+  test "should get create" do
+    get :create
+    assert_response :success
+  end
+
+end
--- a/test/controllers/video_pros_controller_test.rb
+++ b/test/controllers/video_pros_controller_test.rb
@ -0,0 +1,9 @@
+require 'test_helper'
+
+class VideoProsControllerTest < ActionController::TestCase
+  test "should get widget" do
+    get :widget
+    assert_response :success
+  end
+
+end
--- a/test/dummy/README.rdoc
+++ b/test/dummy/README.rdoc
@ -0,0 +1,28 @@
+== README
+
+This README would normally document whatever steps are necessary to get the
+application up and running.
+
+Things you may want to cover:
+
+* Ruby version
+
+* System dependencies
+
+* Configuration
+
+* Database creation
+
+* Database initialization
+
+* How to run the test suite
+
+* Services (job queues, cache servers, search engines, etc.)
+
+* Deployment instructions
+
+* ...
+
+
+Please feel free to use a different markup language if you do not plan to run
+<tt>rake doc:app</tt>.
--- a/test/dummy/Rakefile
+++ b/test/dummy/Rakefile
@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require File.expand_path('../config/application', __FILE__)
+
+Rails.application.load_tasks
--- a/test/dummy/app/assets/images/.keep
+++ b/test/dummy/app/assets/images/.keep
--- a/test/dummy/app/assets/javascripts/application.js
+++ b/test/dummy/app/assets/javascripts/application.js
@ -0,0 +1,13 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file.
+//
+// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require_tree .
--- a/test/dummy/app/assets/stylesheets/application.css
+++ b/test/dummy/app/assets/stylesheets/application.css
@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any styles
+ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
+ * file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */
--- a/test/dummy/app/controllers/application_controller.rb
+++ b/test/dummy/app/controllers/application_controller.rb
@ -0,0 +1,5 @@
+class ApplicationController < ActionController::Base
+  # Prevent CSRF attacks by raising an exception.
+  # For APIs, you may want to use :null_session instead.
+  protect_from_forgery with: :exception
+end
--- a/test/dummy/app/controllers/concerns/.keep
+++ b/test/dummy/app/controllers/concerns/.keep
--- a/test/dummy/app/helpers/application_helper.rb
+++ b/test/dummy/app/helpers/application_helper.rb
@ -0,0 +1,2 @@
+module ApplicationHelper
+end
--- a/test/dummy/app/mailers/.keep
+++ b/test/dummy/app/mailers/.keep
--- a/test/dummy/app/models/.keep
+++ b/test/dummy/app/models/.keep
--- a/test/dummy/app/models/concerns/.keep
+++ b/test/dummy/app/models/concerns/.keep
--- a/test/dummy/app/views/layouts/application.html.erb
+++ b/test/dummy/app/views/layouts/application.html.erb
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Dummy</title>
+  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
+  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+  <%= csrf_meta_tags %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>
--- a/test/dummy/bin/bundle
+++ b/test/dummy/bin/bundle
@ -0,0 +1,3 @@
+#!/usr/bin/env ruby
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
+load Gem.bin_path('bundler', 'bundle')
--- a/test/dummy/bin/rails
+++ b/test/dummy/bin/rails
@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+APP_PATH = File.expand_path('../../config/application',  __FILE__)
+require_relative '../config/boot'
+require 'rails/commands'
--- a/test/dummy/bin/rake
+++ b/test/dummy/bin/rake
@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+require_relative '../config/boot'
+require 'rake'
+Rake.application.run
--- a/test/dummy/config.ru
+++ b/test/dummy/config.ru
@ -0,0 +1,4 @@
+# This file is used by Rack-based servers to start the application.
+
+require ::File.expand_path('../config/environment',  __FILE__)
+run Rails.application
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				div.jqcloud{font-family:Helvetica,Arial,sans-serif;font-size:10px;line-height:normal}div.jqcloud a{font-size:inherit;text-decoration:none}div.jqcloud span.w10{font-size:550%}div.jqcloud span.w9{font-size:500%}div.jqcloud span.w8{font-size:450%}div.jqcloud span.w7{font-size:400%}div.jqcloud span.w6{font-size:350%}div.jqcloud span.w5{font-size:300%}div.jqcloud span.w4{font-size:250%}div.jqcloud span.w3{font-size:200%}div.jqcloud span.w2{font-size:150%}div.jqcloud span.w1{font-size:100%}div.jqcloud{color:#09f}div.jqcloud a{color:inherit}div.jqcloud a:hover{color:#0df}div.jqcloud a:hover{color:#0cf}div.jqcloud span.w10{color:#0cf}div.jqcloud span.w9{color:#0cf}div.jqcloud span.w8{color:#0cf}div.jqcloud span.w7{color:#39d}div.jqcloud span.w6{color:#90c5f0}div.jqcloud span.w5{color:#90a0dd}div.jqcloud span.w4{color:#90c5f0}div.jqcloud span.w3{color:#a0ddff}div.jqcloud span.w2{color:#9ce}div.jqcloud span.w1{color:#aab5f0}div.jqcloud{overflow:hidden;position:relative}div.jqcloud span{padding:0}