Create Custom gallery plugin.

.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

Gemfile

@@ -0,0 +1,14 @@
+source "https://rubygems.org"
+
+# Declare your gem's dependencies in custom_gallery.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'

Gemfile.lock

@@ -0,0 +1,104 @@
+PATH
+  remote: .
+  specs:
+    custom_gallery (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.1.20140414130214)
+    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.3)
+    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.3)
+    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.3.1)
+    sprockets (2.12.1)
+      hike (~> 1.2)
+      multi_json (~> 1.0)
+      rack (~> 1.0)
+      tilt (~> 1.1, != 1.3.0)
+    sprockets-rails (2.1.3)
+      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
+  custom_gallery!

MIT-LICENSE

@@ -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.

README.rdoc

@@ -0,0 +1,6 @@
+= CustomGallery
+
+This project rocks and uses MIT-LICENSE.
+
+
+### 20190116 jason Join edit

Rakefile

@@ -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    = 'CustomGallery'
+  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

app/assets/javascripts/custom_gallery.js

@@ -0,0 +1,548 @@
+function rotate(){
+  $("#crop_div").dialog("open");
+}
+function change_degree(degree_change){
+  var degree_org = parseInt($('#show_degree').text())
+  degree_org+=degree_change
+  if (degree_org==360 || degree_org==-360){
+    degree_org = 0
+  }
+  $('#show_degree').text(degree_org)
+}
+function init_upload(temp_length){
+  var value = $("input[name='all_upload_length']")
+  if (value.val()==''){
+    value.val(temp_length)
+    $.ajax({
+      type : "post",
+      url : "/admin/custom_galleries/init_upload",
+      dataType : "json",
+      data:{all_length: value.val()},
+      async: false,
+      global:false,
+      success: function()
+             {
+             },
+      error : function(data){
+        alert('init upload process failed, please try again later.')
+      }
+    });
+    if (value.val()=='1'){
+      value.val('')
+    }
+  }
+}
+function form_submit() {
+  var temp_length = $('#file-list').find('li.template-upload').length
+  init_upload(temp_length)
+  var length_upload
+  var count_upload
+  var send_start
+  if (temp_length>1){
+    $( 'form#fileupload' ).ajaxSuccess(function() {
+      if (typeof length_upload == "undefined"){
+        count_upload = 1
+        length_upload = $('#file-list').find('li.template-upload').length
+      }
+      else{
+        count_upload ++
+      }
+      if (count_upload === length_upload){
+        send_start = undefined
+        $.ajax({
+          url : "/admin/custom_galleries/start_upload_process",
+          dataType : "json",
+          type : "post",
+          error: function(){
+            alert('init upload process failed, please try again later.')
+          },
+          success: function(){
+            window.location.href = '/admin/custom_galleries/upload_process'
+          }
+        })
+        $.ajax({
+          url : "/admin/custom_galleries/start_upload_process",
+          dataType : "json",
+                type : "post",
+          error: function(){
+            alert('init upload process failed, please try again later.')
+          },
+          success: function(){
+            window.location.href = '/admin/custom_galleries/upload_process'
+          }
+        })
+      }
+    });
+  }
+}
+function form_only_one_submit() {
+    var temp_length = 1
+  init_upload(temp_length)
+}
+!function ($) {
+  $.fn.checkListLength = function (param){
+      _defaultSettings = {
+          onlyOne: null,
+      };
+      _set = $.extend(_defaultSettings, param);
+      $this = this;
+      $li = this.children('li');
+      $dropzone = $('#dropzone');
+      if(($li.length - _set.onlyOne) === 0) {
+      $('#dropzone').fadeIn(300);
+  } else {
+      $('#dropzone').fadeOut(300);
+  }
+  $('#file-list').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
+  };
+}(window.jQuery);
+
+$(function () {
+  'use strict';
+  // Initialize the jQuery File Upload widget:
+  if($('#fileupload').length){
+    $('#fileupload').fileupload({
+        //maxFileSize: 5000000,=
+        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
+        dropZone: $('#dropzone'),
+        headers:{
+          'X-CSRF-Token': $('meta[name="csrf-token"]').attr("content")
+        }
+    });
+  }
+});
+Array.prototype.uniq = function(){
+  var attr = this
+  attr = $.grep(attr, function(v, k){
+      return $.inArray(v ,attr) === k;
+  });
+  return attr;
+}
+
+function batch_crop(){
+  var check_li = $('#imgholder').find("input[type='checkbox']:checked").parents('li');
+  var image_ids =[];
+  if (check_li.length>0){
+    check_li.each(function(){
+        image_ids.push($(this).data('image-id'));
+    });
+    if (navigator.onLine) {
+        window.location.href = '/admin/custom_galleries/batch_crop?image_ids=' + image_ids.join(',') 
+    } else {
+        alert('Please connect the network and try again later!')
+    }
+  }else{
+      alert('Please select at least one')
+  }
+}
+function select_all() {
+  $('#imgholder').find("input[type='checkbox']:not(:checked)").trigger('click')
+}
+function translate(ele,pretext,text,return_flag){
+  var return_value
+  if (navigator.onLine) {
+    $.ajax({
+      url : "/admin/custom_galleries/translate",
+      dataType : "json",
+      type : "post",
+      async: false,
+      data:{text:text},
+      success:function(data){
+        if (return_flag){
+          return_value = data.translate
+        }
+        else{
+          ele.html(pretext + data.translate)
+        }
+      },
+      error:function(){
+        var back = text.split('.')[1].split('_')
+        var result = []
+        for (i=0;i<back.length;i++){
+            result.push(back[i].charAt(0).toUpperCase() + back[i].slice(1))
+        }
+        if (return_flag){
+          return_value = result.join(' ')
+        }
+        else{
+            ele.html(pretext + result.join(' '))
+        }
+        alert('Your server has some problem, please try again later!')
+      }
+    })
+  } else {
+    var back = text.split('.')[1].split('_')
+    var result = []
+    for (i=0;i<back.length;i++){
+      result.push(back[i].charAt(0).toUpperCase() + back[i].slice(1))
+    }
+    if (return_flag){
+      return_value = result.join(' ')
+    }
+    else{
+      ele.html(pretext + result.join(' '))
+    }
+    alert('Please connect the network and try again later!')
+  }
+  if (return_flag){
+    return return_value
+  }
+}
+
+$(function() {
+  var config = {}
+  config.autoGrow_minHeight = 50;
+  config.allowedContent = false;
+  config.disallowedContent = 'img';
+  config.toolbar = [
+    { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
+    { name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
+    
+    { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
+    '/',
+    { name: 'insert', items: [ 'SpecialChar'] },
+    { name: 'styles', items: [ 'Font' ] },
+    { name: 'colors', items: [ 'TextColor', 'BGColor' ] }
+  ];
+
+  var $container = $('.custom_gallery'),
+    $containerData = $container.data();
+  $container.data("order-edit","0");
+  $container.sortable({
+     disabled: true
+  });
+  $container.imagesLoaded(function(){
+    var $custom_albumname = $('.custom_albumname'),
+    $img = $('.rgcustom_album img');
+    $('.rgcustom_album > a').rsImg();
+    if($containerData.custom_galleryId == 'custom_gallery') {
+      // $container.masonry({
+      //  itemSelector : '.rgcustom_album',
+      //  isAnimated: true,
+      // });
+      $custom_albumname.each(function(i) {
+        var $custom_albumblock = $(this).closest('a').height(),
+          $H = $(this).outerHeight(true);
+        if($H > $custom_albumblock) {
+          $(this).css({
+            'bottom': "auto",
+            'top': 0,
+          });
+          $(this).hover(function() {
+            $(this).stop(true, true).delay(500).animate({
+              'top': '-='+($H-$custom_albumblock),
+            },($H-$custom_albumblock)*10)
+          },function() {
+            $(this).stop(true, true);
+            $(this).css({
+              'bottom': "auto",
+              'top': 0,
+            });
+          });
+        };
+      });
+      $('#orbit_custom_gallery').delegate('.icons-tag', clickEvent, function(){
+        var tmp = $(this).parents('.rgcustom_album').eq(0)
+        var now_this = $(this)
+        if (tmp.find('.custom_albumtag').eq(0).find('li.label').length == 0){
+          var ele_id = tmp.attr('data-image-id')
+          $.ajax({
+            type : "post",
+            url : "/admin/custom_galleries/get_tag",
+            dataType : "text",
+            data:{ele_id: ele_id},
+            global:false,
+            success: function(data)
+                   {
+                    tmp.find('.custom_albumtag').eq(0).html(data)
+                    now_this.parents('.custom_gallery_info').nextAll('.custom_albumtag').slideToggle(300);
+                   },
+            error : function(data){
+              alert('init process failed, please try again later.')
+            }
+          });
+        }else{
+          $(this).parents('.custom_gallery_info').nextAll('.custom_albumtag').slideToggle(300);
+        }
+      });
+    };
+  });
+
+  var bindEvent = function(instance,elem){
+    var $e = elem,
+    image_id = $e.closest(".rgcustom_album").data("image-id");
+    obj = photosData.custom_galleries.filter(function(a) {
+            return a.id == image_id;
+          })[0];
+    switch($e.attr("for")){
+      case "description":
+        instance.find(".description-editor").each(function(){
+          var locale = $(this).attr("for")
+          $(this).html(obj.description ? obj.description[locale] : '');
+          CKEDITOR.replace(this,config);
+        })
+        
+        instance.find(".title-editor").each(function(){
+          var locale = $(this).attr("for")
+          $(this).html(obj.title ? obj.title[locale] : '');
+          CKEDITOR.replace(this,config);
+        })
+        instance.find("a[data-toggle=\"tab\"],div[role=\"tabpanel\"]").each(function(){
+          $(this).attr('id',$(this).attr('id').replace('-fake',''))
+        })
+        instance.find("input[type=hidden]").val(image_id);
+        instance.find("form").bind("ajax:success",function(evt, data, status){
+          $.pageslide.close();
+          photosData = data;
+        })
+        instance.find('.btn-group a[data-toggle="tab"]').click(function(){
+          $(this).tab('show');
+          $(this).parents('.btn-group').eq(0).children('a[data-toggle="tab"]').removeClass('active in');
+          $(this).addClass('active in')
+          var inst = $($(this).attr('href')).find('textarea')
+          window.setTimeout(function(){
+            CKEDITOR.instances[inst.attr('name')].execCommand('autogrow')
+          },300)
+        })
+        break;
+      case "tags":
+        instance.find('.tags-groups').cardCheck({
+              item: '.card'
+          });
+          for(i = 0; i < obj.tags.length; i++){
+            instance.find("input[value="+obj.tags[i]+"]").parent().addClass('active');
+            instance.find("input[value="+obj.tags[i]+"]").prop("checked","checked");
+          }
+          instance.find("form").submit(function(event) {
+            var checkboxes = $(this).find("input[type=checkbox]:checked"),
+              tag_ids = [],
+              image_ids =[image_id];
+
+            checkboxes.each(function(){
+              tag_ids.push($(this).val());
+            })          
+            $.post("/admin/custom_galleries/image_tagging",{"image_ids":image_ids,"tag_ids":tag_ids},function(json){
+              $.pageslide.close();
+              photosData = json;
+            })
+            return false;
+          });
+          break;
+        case "batch":
+          instance.find('.tags-groups').cardCheck({
+              item: '.card'
+          });
+          instance.find("form").submit(function(event) {
+            var checkboxes = $(this).find("input[type=checkbox]:checked"),
+              tag_ids = [],
+              image_ids =[],
+              images =  $("#imgholder .rgcustom_album.active");
+            checkboxes.each(function(){
+              tag_ids.push($(this).val());
+            })
+            images.each(function(){
+              image_ids.push($(this).data("image-id"));
+            })
+            $.post("/admin/custom_galleries/image_tagging",{"image_ids":image_ids,"tag_ids":tag_ids},function(json){
+              $.pageslide.close();
+              photosData = json;
+            })
+            return false;
+          });
+          break;
+    }
+  }
+
+  if($("#imgholder").length){
+      $('.open').pageslide({
+        W: '40vw',
+        loadComplete: function(instance,elem) {
+          bindEvent(instance,elem);
+        }
+      })
+  }
+  $("#imgholder").on(clickEvent, '.photo_cover', function(event) {
+    var image_id = $(this).closest(".rgcustom_album").data("image-id"),
+      custom_album_id = $("#imgholder").data("custom_gallery-id"),
+      set_cover = true;
+    if($(this).children().hasClass("icons-star-2")){
+      $(".icons-star").removeClass("icons-star").addClass('icons-star-2');
+      $(this).children().removeClass("icons-star-2").addClass("icons-star");
+    }else{
+      $(this).children().removeClass("icons-star").addClass("icons-star-2");
+      set_cover = false;
+    }
+    $.post("/admin/custom_galleries/set_cover",{"custom_album_id":custom_album_id,"image_id":image_id,"set_cover":set_cover});
+
+  });
+
+  $("#delete_selected_photos_btn").click(function(){
+    var photos_to_delete = [],
+      delete_cover = false,
+      $photos = $(".rgcustom_album.active"),
+      custom_album_id = $("#imgholder").data("custom_gallery-id");
+    $('.modal-body .spinning').fadeIn('fast');
+    $('.modal-body .text-warning').hide(0);
+    $photos.each(function(){
+      photos_to_delete.push($(this).data('image-id'));
+      if ($(this).find(".icons-star").length) {
+        delete_cover = true;
+      };
+    });
+     $.ajax({
+      url : "/admin/custom_galleries/delete_photos",
+      type : "POST",
+      data : {"images":photos_to_delete,"delete_cover":delete_cover,"custom_album_id":custom_album_id},
+      success : function(){
+        $photos.slideUp(300,function() {
+          $(this).remove();
+        });
+        $('#dialog').modal('hide');
+        $('.modal-body .spinning').hide();
+        $('.modal-body .text-warning').show();
+        $('.deletephoto, .deselect, .addtags').addClass('hide')
+      }
+     });
+  })
+
+  $('#imgholder').on(clickEvent, '.checkbox', function() {
+    $(this).prop('checked') ? $(this).closest('.rgcustom_album').addClass('active') : $(this).closest('.rgcustom_album').removeClass('active');
+    var checkLength = $("#imgholder .rgcustom_album.active");
+    checkLength.length ? $('.deletephoto, .deselect, .addtags, .crop').removeClass('hide') : $('.deletephoto, .deselect, .addtags, .crop').addClass('hide');
+  });
+  $('.deselect').on(clickEvent, function(event) {
+    $('.rgcustom_album').removeClass('active');
+    $('.checkbox').prop('checked', false)
+    $('.deletephoto, .deselect, .addtags').addClass('hide')
+    event.preventDefault();
+  });
+  $('.phtot-action').delegate('li', clickEvent, function(event) {
+    $('.checkbox').prop('checked', false)
+    $('.rgcustom_album').removeClass('active');
+    $('.deletephoto, .deselect, .addtags').removeClass('hide')
+  });
+  var images_order = [];
+  $("#edit-order-btn").on("click",function(){
+    var el = $(this);
+    if($container.data("order-edit") == "0"){
+      $container.sortable("enable");
+      $(".order-edit-notification").slideDown();
+      images_order = $container.sortable( "toArray", { attribute: "data-image-id" });
+      images_order = images_order.uniq();
+      $container.data("order-edit","1");
+      translate(el,'','custom_gallery.save_order',false)
+    }else{
+      var temp = $container.sortable( "toArray", { attribute: "data-image-id" }),
+        type = $container.attr("id");
+        temp = temp.uniq()
+      if(images_order.toString() != temp.toString()){
+        $.ajax({
+          url : "/admin/custom_galleries/order",
+          data : {"imageids" : temp, "type" : type},
+          type : "post",
+          dataType : "json"
+        })
+      }
+      $(".order-edit-notification").slideUp();
+      $container.sortable("disable");
+      $container.data("order-edit","0");
+      translate(el,'','custom_gallery.edit_order',false)
+    }
+    return false;
+  })
+
+    // 
+
+    var last_image_id = null;
+  $('.add-imgs').on({
+    click: function() {
+      $('#fileupload').slideToggle(300, function() {
+        if(!$(this).is(':hidden')) {
+            translate($('.add-imgs'),'<i class="icons-cross-2"></i> ','custom_gallery.close_panel',false)
+          $('.rgbody').stop(true, false).animate({'padding-bottom': 280}, 300);
+          $("#edit-order-btn").hide();
+          $.ajax({
+            url : "/admin/custom_galleries/last_image_id",
+            data : {"custom_albumid" : $("#fileupload_aid").val()},
+            dataType : "json",
+            type : "get"
+          }).done(function(d){
+            last_image_id = d.last_image_id;
+          })
+        } else {
+            translate($('.add-imgs'),'<i class="icons-plus"></i> ','custom_gallery.add_image',false)
+          $('.files').empty()
+          $('#file-list').checkListLength();
+          $('.rgbody').stop(true, false).animate({'padding-bottom': 0}, 300);
+          $("#edit-order-btn").show();
+          fetchNewImages();
+        };
+      });
+      return false;
+    }
+  });
+  var fetchNewImages = function(){
+    var custom_albumid = $("#fileupload_aid").val();
+      
+    $.getJSON('/admin/custom_galleries/get_photoData_json?id='+custom_albumid, function(json, textStatus) {
+      photosData = json;
+    });
+
+    $.ajax({
+      url : "/admin/custom_galleries/new_images",
+      data : {"last_image_id" : last_image_id, "custom_album_id" : custom_albumid},
+      success : function(data){
+        var $e = $(data);
+        $imgs = $e.find("img");
+        $("#imgholder").prepend($e);
+        $os = $e.find("a.open");
+        $os.pageslide({
+          W: '40vw',
+          loadComplete: function(instance,elem) {
+            bindEvent(instance,elem);
+          }
+        });
+      }
+    })
+
+  }
+  var buttons_option={}
+  var op_fn1 = function() { 
+    var check_img = $('#imgholder').find("input[type='checkbox']:checked").parents('li').find('img');
+    check_img.each(function(){
+            check_img.css('transform','rotate('+$('#show_degree').text()+'deg)');
+        });
+  }
+  var op_fn2 = function() { 
+    var confirm_msg = translate('','','custom_gallery.confirm_msg',true)
+    if ( confirm (confirm_msg) ){
+      var check_li = $('#imgholder').find("input[type='checkbox']:checked").parents('li');
+      var image_ids =[];
+      check_li.each(function(){
+              image_ids.push($(this).data('image-id'));
+          });
+          if (navigator.onLine) {
+              window.location.href = '/admin/custom_galleries/rotate_images?image_ids=' + image_ids.join(',') +'&rotate_angle=' + $('#show_degree').text()
+          } else {
+              alert('Please connect the network and try again later!')
+          }
+          console.log(image_ids)
+      $(this).dialog("close"); 
+    }
+    
+  }
+  var op_fn3 = function() { $(this).dialog("close"); }
+  var op1 = translate('','','custom_gallery.review',true)
+  var op2 = translate('','','custom_gallery.rotate',true)
+  var op3 = translate('','','custom_gallery.close_panel',true)
+  buttons_option[op1] = op_fn1
+  buttons_option[op2] = op_fn2
+  buttons_option[op3] = op_fn3
+  $("#crop_div").dialog({
+        autoOpen: false,
+        show: "blind",
+        hide: "explode",
+        buttons: buttons_option
+    });
+});
+

app/assets/javascripts/custom_galleryAPI.js.erb

@@ -0,0 +1,297 @@
+<%# encoding: utf-8 %>
+$.extend($.expr[':'], {
+	'containsi': function (elem, i, match, array) {
+		return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
+	}
+});
+var custom_galleryAPI = function(){
+	g = this;
+	this.urlVars = rcom.getUrlVars();
+	this.custom_albumArea = $("#orbit_custom_gallery");
+	this.loadArea = null;
+	this.tagList = $("ul#custom_gallery_tag_list");
+	this.loading = $("#loading");
+
+	this.fullscreen_mode = false;
+	
+	this.loadTheater = function(id){
+		
+		g.loadstart();
+		var imageArray = [];
+		var imagecount = 0;
+		var picHeight = 0;
+		var bindHandlers = function(){
+			var $slidelist = $('.slidelist'),
+				$rslide = $('.rslide'),
+				$rslidenav = $('.rslidenav'),
+				$img = $("#main_pic img"),
+				wHeight = $(window).height();
+
+				$("#main_pic").height(picHeight);
+				$img.height("100%");
+			
+			$('.bt-tag').click(function(){
+				if(!$(this).hasClass("active"))
+					updatePhotoTag();
+				$(this).toggleClass("active");
+				var $tag_panel = $('#tag_panel'),
+					tag_panel_position = 0;
+
+				if( $tag_panel.css('right') == '0px' ){
+					tag_panel_position = -200;
+				}
+				$tag_panel.animate({'right':tag_panel_position}, 300);
+
+				g.custom_albumArea
+					.delay(200)
+					.animate({'margin-right':tag_panel_position+200},300);
+				return false;
+			});
+			var updatePhotoTag = function(){
+				var tags = imageArray[imagecount].tag_ids;
+				if(tags.length > 0 && g.tagList.find("li").length == 0){
+					var tagnames = imageArray[imagecount].tag_names;
+					g.tagList.empty();
+					for(i in tagnames){
+						$li = $("<li><label>"+tagnames[i]+"</label><span style='display:none;'>"+tagnames[i]+"</span></li>");
+						g.tagList.append($li);
+					}
+				}else if(tags.length > 0 && g.tagList.find("li").length > 0) {
+					g.tagList.find("input").attr("checked",false);
+					for(tag in tags){
+						g.tagList.find("li[data-content="+tags[tag]+"] input").attr("checked",true);
+					}
+				}else if(tags.length == 0){
+					if(g.tagList.find("input").length == 0)
+						g.tagList.empty();
+					else
+						g.tagList.find("input").attr("checked",false);
+				}
+			}
+			g.custom_albumArea.find("#tag_search_box").keyup(function(e){
+				sval = $(this).val();
+				if(sval == "<%= I18n.t('custom_gallery.search_tags') %>")
+						sval = "";
+				sval = sval.replace(/(^\s*)|(\s*$)/g,'');
+				if(sval){
+					var re1 = new RegExp("^[\u4E00-\uFA29]*$"); //Chinese character range 
+					var re2 = new RegExp("^[\uE7C7-\uE7F3]*$");
+					if ((re1.test(sval) && (re2.test(sval)))){
+						$("#custom_gallery_tag_list li span:not(:contains("+sval+"))").parent().slideUp();
+					}else{
+						$("#custom_gallery_tag_list li span:not(:containsi("+sval+"))").parent().slideUp();
+					}
+						
+				}else{
+					$("#custom_gallery_tag_list li").slideDown();
+				}
+			})
+			g.custom_albumArea.find("#tag_panel .bt-save").click(function(){
+				g.saveTags(imageArray[imagecount]._id,"pic",function(tagids){
+					imageArray[imagecount].tag_ids = tagids;					
+				})
+			})
+			$(".slidectrl a.togglelist").click(function(){
+				var rslide_h = $rslide.outerHeight();
+				if ( $slidelist.height() < 1 ){
+					$slidelist.stop().animate({'height':rslide_h - 30}, 300);
+					$slidelist.find("ul").show();
+				} else {
+					$slidelist.stop().animate({'height':'0px'}, 300);
+					$slidelist.find("ul").hide();
+				}
+			})
+			$(".slidectrl .togglescreen").click(function(){
+				toggleFullscreen();
+			})
+			$(".slidectrl .browserfullscreen").click(function(){
+				browserFullScreen();
+			})
+			$slidelist.find(".list_element").click(function(){
+				imagecount = parseInt($(this).parent().attr("for"));
+				changeImage($(this));
+			})
+			$rslidenav.find(".navN").click(function(){
+				nextpic($(this));
+			})
+			$rslidenav.find("a.navP").click(function(){
+				prevpic($(this));
+			})
+			$("#nextpic").click(function(){
+				nextpic($(this));
+			})
+
+			$(document).keydown(function(e){
+			    if (e.keyCode == 37){ 
+			    	prevpic($rslidenav.find(".navP"));
+			       return false;
+			    }
+			    if(e.keyCode == 39){
+			    	nextpic($rslidenav.find(".navN"));
+			    	return false;
+			    }
+			    if(e.keyCode == 27){
+			    	toggleFullscreen();
+			    	$rslide.removeClass('browserFullScreen');
+			    	return false;
+			    }
+			    if(e.keyCode == 70 || e.keyCode == 102){
+			    	if($rslide.hasClass("fullscreen"))
+			    	 browserFullScreen();
+			    }
+			});
+			var browserFullScreen = function(){
+				if(g.fullscreen_mode==false){
+					var el = document.documentElement,
+      				rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen;
+    			rfs.call(el);
+    			g.fullscreen_mode = true;
+				}else{
+					var el = document,
+      				rfs = el.exitFullscreen || el.msExitFullscreen || el.webkitExitFullscreen || el.mozCancelFullScreen;
+    			rfs.call(el);
+    			g.fullscreen_mode = false;
+				}
+			}
+			$(window).resize(function(){
+				if(window.innerWidth == screen.width && window.innerHeight == screen.height) {
+					$rslide.addClass('browserFullScreen');
+				} else {
+					$rslide.removeClass('browserFullScreen');
+				}
+			})
+			var nextpic = function(dom){
+				if(imagecount == imageArray.length - 1)
+					imagecount = 0;
+				else
+					imagecount++;
+				changeImage(dom);
+			}
+			var prevpic = function(dom){
+				if(imagecount == 0)
+					imagecount = imageArray.length - 1
+				else
+					imagecount--;
+				changeImage(dom);
+			}
+			var toggleFullscreen = function(){
+				if($rslide.hasClass("fullscreen")){
+					$rslide.css("position","relative");
+					$rslide.removeClass("fullscreen");
+					$(".slidectrl .browserfullscreen").hide();
+					$img.css({"padding":""})
+					$("#main_pic").height(picHeight );
+				}else{
+					 $("#main_pic").height(wHeight);
+					// $img.height("100%");
+					$rslide.css("position","");
+					$rslide.addClass("fullscreen");
+					$img.css({"padding":($rslide.height()-$img.height())/2})
+					$(".slidectrl .browserfullscreen").show();
+				}
+			}
+			window.onpopstate = function(){
+				var image_id = document.URL.split('/')[document.URL.split('/').length-1];
+				var image = imageArray.filter(function(a){return a._id == image_id})[0];
+				imagecount = imageArray.indexOf(image);
+				changeTheaterImage(image.file.theater.url);
+			}
+			var changeImage = function(dom){
+				var pageurl = dom.attr('href');
+
+				if(rcom.getInternetExplorerVersion() == -1){
+				    if(pageurl!=window.location){
+				      window.history.pushState({path:pageurl},'',pageurl);
+				    }
+				}else{
+			   		window.location.hash = pageurl;
+			   	}
+
+			   	changeTheaterImage(dom.attr("data-content"));
+			}
+			var changeTheaterImage = function(url){
+				$img.fadeOut(200,function(){
+					g.loadstart();
+					$img.attr("src","");
+					$img.attr({"src":url,"height":picHeight+"px"}).load(function(){
+						$img.fadeIn(200);
+						g.loadcomplete();
+					});
+					
+	 				if($rslide.hasClass("fullscreen")){
+	 					$img.css({"padding":($rslide.height()-$img.height())/2})
+	 				}
+	 				$slidelist.stop().animate({'height':'0px'}, 300);
+					$slidelist.find("ul").hide();
+				    // $(".slideinfo b.info").text(imageArray[imagecount].title);
+				    if($('.bt-tag').hasClass("active"))
+				    	updatePhotoTag();
+				    if(imageArray[imagecount].description)
+				    	$(".slideinfo .info").text(imageArray[imagecount].description);
+				    else
+				    	$(".slideinfo .info").text("");
+				    if(imageArray.length > 1)
+				    	updateNavigation();
+			    })
+			}
+			var updateNavigation = function(){
+				var next, prev;
+				if(imagecount == 0){
+					next = 1;
+					prev = imageArray.length - 1; 
+				}else if(imagecount == imageArray.length - 1){
+					next = 0
+					prev = imageArray.length - 2;
+				}else{
+					next = imagecount + 1;
+					prev = imagecount - 1;
+				}
+				$(".navN").attr({"href":imageArray[next]._id,"data-content":imageArray[next].file.theater.url});
+				$(".navP").attr({"href":imageArray[prev]._id,"data-content":imageArray[prev].file.theater.url});
+			};
+			if(imageArray.length > 1)
+				updateNavigation();
+		}
+		
+		var preparestage = function(custom_albumid){
+			$.getJSON("../custom_galleries/"+custom_albumid+"/imgs",function(custom_album){
+				// imageArray = eval(custom_album.images);
+				$.each(custom_album.images,function(i,image){
+					imageArray.push(image)
+					if(image._id == id)
+						imagecount = i;
+				})
+				bindHandlers();
+			})
+		}
+		
+		if(rcom.getInternetExplorerVersion()!=-1){
+			var photo_id = window.location.hash.replace("#","");
+			if(photo_id){
+				var url = window.location.href;
+				var params = url.split("/");
+				// params[params.length-1] = photo_id;
+				url = url.replace(params[params.length-1],photo_id);
+
+				window.location.href = url;
+			}
+		}
+		
+		var custom_albumid = $("#main_pic").attr("data-content");
+		g.custom_albumArea.find(".bt-back").attr("href",'/'+g.locale+"/admin/custom_galleries/"+custom_albumid);
+		g.custom_albumArea.find(".bt-edit").attr("href","../custom_albums/"+custom_albumid+"/edit");	
+		g.custom_albumArea.css("margin-bottom","0");
+		picHeight = $(window).height() - ($("#orbit-bar").outerHeight() + $("#orbit_custom_gallery .form-actions").outerHeight());
+		preparestage(custom_albumid);
+		
+	}
+	this.loadcomplete = function(){
+		g.loading.hide();
+	}
+	this.loadstart = function(){
+		g.loading.show();
+	}
+	
+}
+  custom_galleryAPI.prototype.locale = "<%= I18n.locale %>";
+

app/assets/javascripts/custom_galleryAPI_frontend.js.erb

@@ -0,0 +1,273 @@
+<%# encoding: utf-8 %>
+$.extend($.expr[':'], {
+	'containsi': function (elem, i, match, array) {
+		return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
+	}
+});
+
+var custom_galleryAPI = function(){
+	g = this;
+	this.urlVars = rcom.getUrlVars();
+	this.custom_albumArea = $("#orbit_custom_gallery");
+	this.loadArea = "theater";
+	this.tagList = $(".taglist ul");
+	this.loading = $("#loading");
+	this.fullscreen_mode = false;
+	// this.authenticated = false;
+	this.initialize = function(callbackFn){
+		 if(g.loadArea == "theater"){
+ 			if(rcom.getInternetExplorerVersion()!=-1){
+ 				var photo_id = window.location.hash.replace("#","");
+				if(photo_id){
+					var params = rcom.getUrlVars();
+					var url = window.location.href.split("?")[0];
+					params["image_id"] = photo_id;
+					for(i=0;i<params.length;i++){
+						if(i == 0)
+							url+="?"+params[i]+"="+params[params[i]];
+						else
+							url+="&"+params[i]+"="+params[params[i]];
+						 
+					}
+ 					window.location.href = url;
+				}
+ 			}
+ 		}
+
+	}
+
+	this.loadTheater = function(custom_albumid,id){
+		var imageArray;
+		var imagecount = 0;
+		// var picHeight = 0;
+		g.loadstart();
+		var bindHandlers = function(){
+			var $slidelist = $('.slidelist'),
+				$rslide = $('.rslide'),
+				$rslidenav = $('.rslidenav'),
+				$img = $("#main_pic img"),
+				wHeight = $(window).height();
+
+				$("#main_pic").height("auto");
+				$img.css("height","auto");
+			
+			var updatePhotoTag = function(){
+				var tags = imageArray[imagecount].tags;
+				g.tagList.empty();
+				for(tag in tags){
+					g.tagList.append("<li>"+tags[tag].name+"</li>");
+				}
+				
+			}
+			
+			
+			$(".slidectrl a.togglelist").click(function(){
+				var rslide_h = $rslide.outerHeight();
+				if ( $slidelist.height() < 1 ){
+					$slidelist.stop().animate({'height':rslide_h - 30}, 300);
+					$slidelist.find("ul").show();
+				} else {
+					$slidelist.stop().animate({'height':'0px'}, 300);
+					$slidelist.find("ul").hide();
+				}
+			})
+			$(".slidectrl .togglescreen").click(function(){
+				toggleFullscreen();
+			})
+			$(".slidectrl .browserfullscreen").click(function(){
+				browserFullScreen();
+			})
+			$slidelist.find(".list_element").click(function(){
+				imagecount = parseInt($(this).parent().attr("for"));
+				changeImage($(this));
+			})
+			$rslidenav.find(".navN").click(function(){
+				nextpic($(this));
+			})
+			$rslidenav.find("a.navP").click(function(){
+				prevpic($(this));
+			})
+			$("#nextpic").click(function(){
+				nextpic($(this));
+			})
+
+			$(document).keydown(function(e){
+			    if (e.keyCode == 37){ 
+			    	prevpic($rslidenav.find(".navP"));
+			       return false;
+			    }
+			    if(e.keyCode == 39){
+			    	nextpic($rslidenav.find(".navN"));
+			    	return false;
+			    }
+			    if(e.keyCode == 27){
+			    	toggleFullscreen();
+			    	$rslide.removeClass('browserFullScreen');
+			    	return false;
+			    }
+			    if(e.keyCode == 70 || e.keyCode == 102){
+			    	if($rslide.hasClass("fullscreen"))
+			    	 browserFullScreen();
+			    }
+			});
+			var browserFullScreen = function(){
+				if(g.fullscreen_mode==false){
+					var el = document.documentElement,
+      				rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen;
+    			rfs.call(el);
+    			g.fullscreen_mode = true;
+				}else{
+					var el = document,
+      				rfs = el.exitFullscreen || el.msExitFullscreen || el.webkitExitFullscreen || el.mozCancelFullScreen;
+    			rfs.call(el);
+    			g.fullscreen_mode = false;
+				}
+			}
+			$(window).resize(function(){
+				if(window.innerWidth == screen.width && window.innerHeight == screen.height) {
+					$rslide.addClass('browserFullScreen');
+				} else {
+					$rslide.removeClass('browserFullScreen');
+				}
+			})
+			var nextpic = function(dom){
+				if(imagecount == imageArray.length - 1)
+					imagecount = 0;
+				else
+					imagecount++;
+				changeImage(dom);
+			}
+			var prevpic = function(dom){
+				if(imagecount == 0)
+					imagecount = imageArray.length - 1
+				else
+					imagecount--;
+				changeImage(dom);
+			}
+			var toggleFullscreen = function(){
+				if($rslide.hasClass("fullscreen")){
+					$rslide.css("position","relative");
+					$rslide.removeClass("fullscreen");
+					$(".slidectrl .browserfullscreen").hide();
+					$img.css({"padding":""})
+					$("#main_pic").height("auto");
+				}else{
+					$("#main_pic").height(wHeight);
+					$img.css("height","auto");
+					$rslide.css("position","");
+					$rslide.addClass("fullscreen");
+					$img.css({"padding":($rslide.height()-$img.height())/2})
+					$(".slidectrl .browserfullscreen").show();
+				}
+			}
+			window.onpopstate = function(){
+				var image_id = window.location.pathname.split('/')[window.location.pathname.split('/').length-1].split('-');
+				var image = imageArray.filter(function(a){return a._id == image_id[1]})[0];
+				imagecount = imageArray.indexOf(image);
+				changeTheaterImage(image.file.theater.url);
+			}
+			var changeImage = function(dom){
+				var pageurl = dom.attr('href');
+
+				if(rcom.getInternetExplorerVersion() == -1){
+				    if(pageurl!=window.location){
+				    	var segments = window.location.pathname.split("/"),
+				    		uid = segments[segments.length-1];
+				    	pageurl = window.location.pathname.replace(uid,"-"+pageurl)+"?method=theater";
+				      window.history.pushState({path:pageurl},'',pageurl);
+				    }
+				}else{
+			   		window.location.hash = pageurl;
+			   	}
+
+			   	changeTheaterImage(dom.attr("data-content"));
+			}
+			var changeTheaterImage = function(url){
+				$img.fadeOut(200,function(){
+					g.loadstart();
+					if($rslide.hasClass("fullscreen")){
+						
+						$img.attr({"src":url}).css("height","100%").load(function(){
+							g.loadcomplete();
+							$img.fadeIn(200);
+						});
+					}else{
+						$img.attr({"src":url}).css("height","auto").load(function(){
+							g.loadcomplete();
+							$img.fadeIn(200);
+						});;
+					}
+	 				if($rslide.hasClass("fullscreen")){
+	 					$img.css({"padding":($rslide.height()-$img.height())/2})
+	 				}
+	 				$slidelist.stop().animate({'height':'0px'}, 300);
+					$slidelist.find("ul").hide();
+				    // $(".slideinfo b.info").text(imageArray[imagecount].title);
+				    	updatePhotoTag();
+				    if(imageArray[imagecount].description)
+				    	$(".slideinfo .info").text(imageArray[imagecount].description);
+				    else
+				    	$(".slideinfo .info").text("");
+				    if(imageArray.length > 1)
+				    	updateNavigation();
+			    })
+
+			}
+			var updateNavigation = function(){
+				var next, prev;
+				if(imagecount == 0){
+					next = 1;
+					prev = imageArray.length - 1; 
+				}else if(imagecount == imageArray.length - 1){
+					next = 0
+					prev = imageArray.length - 2;
+				}else{
+					next = imagecount + 1;
+					prev = imagecount - 1;
+				}
+				$(".navN").attr({"href":imageArray[next]._id,"data-content":imageArray[next].file.theater.url});
+				$(".navP").attr({"href":imageArray[prev]._id,"data-content":imageArray[prev].file.theater.url});
+			};
+			if(imageArray.length > 1)
+				updateNavigation();
+		}
+		
+		var preparestage = function(images){
+			// $.getJSON("/custom_galleries/imgs?id=" + custom_albumid, function(custom_album){
+				imageArray = images;
+				$.each(images,function(i,image){
+					if(image._id == id)
+						imagecount = i;
+				})
+				bindHandlers();
+			// })
+		}
+		// if(rcom.getInternetExplorerVersion()!=-1){
+		//  	var url_constructor = window.location.href.split("/");
+		// 	var url = "";
+		// 	for(x=0;x<=url_constructor.length-1;x++){
+		// 		if(x == url_constructor.length-1){
+		// 			url+="#!/"+url_constructor[x];
+		// 		}else{
+		// 	   		url+=url_constructor[x]+"/";
+		// 	   	}
+		// 	 }
+			 
+		// 	 window.location.href = url;
+		// }
+		
+		var custom_albumid = $("#main_pic").attr("data-content");
+		g.custom_albumArea.css("margin-bottom","0");
+		// picHeight = $(window).height() - ($("#orbit-bar").outerHeight() + $("#orbit_custom_gallery .form-actions").outerHeight());
+		preparestage(json_image_data);
+		
+	}
+	this.loadcomplete = function(){
+		g.loading.hide();
+	}
+	this.loadstart = function(){
+		g.loading.show();
+	}
+
+}
+custom_galleryAPI.prototype.locale = "en";

app/assets/javascripts/custom_gallery_old.js

@@ -0,0 +1 @@
+//= require custom_galleryAPI

app/assets/javascripts/custom_theater.js

@@ -0,0 +1,539 @@
+window.CustomGalleryTheater = function(){
+  var parent_divs = $('.custom_gallery').parents('div'),
+      parent_div_z_index = parent_divs.eq(parent_divs.length-1).css('z-index')
+  parent_divs.eq(parent_divs.length-1).css('z-index','2000')
+  var gt = this,
+      currentPic = {},
+      windowHeight = 0,
+      windowWidth = 0,
+      swipeController = null,
+      resizing = null;
+      loadingInterval = null,
+      mainPicLoading = 0,
+      nextPicLoading = 0,
+      prevPicLoading = 0,
+      currentSwipeImageDom = null,
+      currentSwipeImageDomLeftPos = 0,
+      windowScreenThresholdForTouch = 0,
+      loadingProcess = 0;
+      gt.stage = null;
+      gt.stripNextBtn = null;
+      gt.stripPrevBtn = null;
+      gt.thumbToggle = null;
+      gt.descriptionToggle = null;
+      gt.closeBtn = null;
+      gt.imageContainer = null;
+      gt.custom_albumData = {};
+      gt.loader = null;
+      gt.thumbStrip = null;
+      gt.descriptionArea = null;
+      gt.isTheaterInitialized = false;
+
+  var play_flag = false;
+  var button_left_string = '<button id ="theaterPreviousButton" class="theaterButton">< </button>',
+      button_right_string = '<button id ="theaterNextButton" class="theaterButton">> </button>',
+      button_play_string = '<button id ="theaterPlayButton" class="theaterButton">▶ </button>',
+      button_stop_string = '<button id ="theaterStopButton" class="theaterButton">|| </button>',
+      playtimeoutID;
+  var initialize = function(){
+    gt.stage = $("#custom_gallery-theater-stage");
+    gt.closeBtn = gt.stage.find(".custom_gallery-close");
+    gt.switchBtn = gt.stage.find(".custom_gallery-theme-switch");
+    gt.imageContainer = gt.stage.find(".image-container");
+    gt.thumbStrip = gt.stage.find(".custom_gallery-thumb-wrap");
+    gt.thumbToggle = gt.stage.find(".custom_gallery-thumb-toggle");
+    gt.loader = gt.stage.find(".custom_gallery-loader");
+    gt.stripNextBtn = gt.stage.find(".custom_gallery-thumb-next");
+    gt.stripPrevBtn = gt.stage.find(".custom_gallery-thumb-prev");
+    gt.descriptionArea = gt.stage.find(".custom_gallery-img-desc");
+    gt.descriptionToggle = gt.stage.find(".custom_gallery-toggle-desc");
+    windowScreenThresholdForTouch = windowWidth / 3;
+    startLoading();
+    windowHeight = $(window).height();
+    windowWidth = $(window).width();
+    var addButton = function () {
+      $('.theaterButton').remove();
+      if (!play_flag){
+        $(button_left_string+button_play_string+button_right_string).insertAfter($('img.gal-active'));
+      }
+      else{
+        $(button_left_string+button_stop_string+button_right_string).insertAfter($('img.gal-active'));
+      }
+      if (!$(".gal-prev").length) { $('#theaterPreviousButton').remove(); }
+      if (!$(".gal-next").length) { $('#theaterNextButton').remove(); }
+
+      $('#theaterPreviousButton').click(function () {
+        gt.previousPic();
+      });
+      $('#theaterNextButton').click(function () {
+        gt.nextPic();
+      });
+      $('#theaterPlayButton').click(function () {
+        play_flag = true;
+        playtimeoutID = window.setInterval(function(){
+          gt.playallPic();
+        },3000)
+        window.onhashchange()
+      });
+      $('#theaterStopButton').click(function () {
+        play_flag = false;
+        window.onhashchange()
+        window.clearInterval(playtimeoutID)
+      });
+    }
+    window.onhashchange = locationHashChanged;
+    bindHandler();
+    if(window.location.hash != "" && window.location.hash != "#"){
+      var id = window.location.hash.split("#")[1];
+      gt.createTheater("/xhr/custom_galleries/theater/" + id);
+    }
+    
+
+    addButton();
+    function locationHashChanged() {
+      addButton();
+    }
+
+  }
+
+  var bindHandler = function(){
+    // handler to close the theater
+    gt.closeBtn.on("click",gt.destroyTheater);
+
+    // handler to show theater
+    $("#main-content div[data-list=images] a").on("click",function(){
+      gt.createTheater($(this).attr("href"));
+      return false;
+    })
+
+     gt.switchBtn.on("click",gt.switchTheme);
+     gt.descriptionToggle.on("click", gt.toggleDescription)
+     gt.stripPrevBtn.on("click", gt.scrollStripRight);
+     gt.stripNextBtn.on("click", gt.scrollStripLeft);
+
+     if(Modernizr.touch){
+      gt.imageContainer.swipe({
+        swipe : function(event, direction, distance, duration, fingerCount){
+          if(direction == "left"){
+            gt.nextPic();
+          }else if(direction == "right"){
+            gt.previousPic();
+          }
+        }
+      })
+      gt.thumbToggle.swipe({
+        swipe : function(event, direction, distance, duration, fingerCount){
+          if(direction == "up"){
+            gt.thumbStrip.parent().addClass("show");
+            gt.thumbToggle.addClass("up");
+            gt.thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down");
+          }else if(direction == "down"){
+            gt.thumbStrip.parent().removeClass("show");
+            gt.thumbToggle.removeClass("up");
+            gt.thumbToggle.find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up");
+          }
+        }
+      })
+     }
+
+     //handler for window resize
+     $(window).resize(function(){
+       clearTimeout(resizing);
+       resizing = setTimeout(doneResizing,1000);
+     })
+  }
+
+  var bindKeyHandlers = function(){
+    if(!Modernizr.touch){
+      $(document.body).on("click",".gal-active", gt.nextPic);
+      $(document.body).on("click",".gal-prev", gt.previousPic);
+      $(document.body).on("click",".gal-next", gt.nextPic);
+      $(document).on("keyup",function(e){
+        switch(e.keyCode){
+          case 39:
+            gt.nextPic();
+            break;
+          case 37:
+            gt.previousPic();
+            break;
+          case 27:
+            gt.destroyTheater();
+          break;
+        }
+       })
+    }
+  }
+
+
+  var doneResizing = function(){
+    windowHeight = $(window).height();
+    windowWidth = $(window).width();
+    setThumbNavs();
+  }
+
+  var unBindKeyHandlers = function(){
+    $(document).unbind("keyup");
+  }
+
+  gt.destroyTheater = function(){
+    parent_divs.eq(parent_divs.length-1).css('z-index',parent_div_z_index)
+    gt.stage.hide();
+    $("body").removeClass("custom_gallery-mode-on");
+    gt.imageContainer.empty()
+    unBindKeyHandlers();
+    window.location.hash = "";
+  }
+
+  gt.createTheater = function(link){
+    gt.stage.show();
+    $("body").addClass("custom_gallery-mode-on");
+    bindKeyHandlers();
+	gt.isTheaterInitialized = false;
+    if(!gt.isTheaterInitialized){
+      $.ajax({
+        url : link,
+        dataType : "json",
+        type : "get",
+        async:false
+      }).done(function(data){
+        gt.custom_albumData = data.data;
+        var cp =  gt.custom_albumData.images.filter(function(x){return x._id == gt.custom_albumData.image})[0];
+        currentPic = {"image" : cp, "index" : gt.custom_albumData.images.indexOf(cp)};
+        createThumbStrip();
+      })
+    }else{
+      var id = link.split("/")[4],
+          cp =  gt.custom_albumData.images.filter(function(x){return x._id == id})[0];
+      currentPic = {"image" : cp, "index" : gt.custom_albumData.images.indexOf(cp)};
+      createThumbStrip();
+    }
+	window.currentPic = currentPic;
+  }
+
+  gt.hasNextImage = function(){
+    return (currentPic.index + 1) <= (gt.custom_albumData.images.length - 1);
+  }
+
+  gt.hasPreviousImage = function(){
+    return (currentPic.index > 0);
+  }
+
+  gt.nextPic = function(){
+    if(loadingProcess == 0){
+      if(gt.hasNextImage()){
+        startLoading();
+        currentPic.image = gt.custom_albumData.images[currentPic.index + 1];
+        currentPic.index = currentPic.index + 1;
+        setMainPic("next");
+      }
+    }
+  }
+  gt.playallPic = function(){
+    if(loadingProcess == 0){
+      mainPicLoading = 1;
+      nextPicLoading = 1;
+      prevPicLoading = 1;
+      if(gt.hasNextImage()){
+        currentPic.image = gt.custom_albumData.images[currentPic.index + 1];
+        currentPic.index = currentPic.index + 1;
+        setMainPic("next");
+      }
+      else{
+        currentPic.image = gt.custom_albumData.images[0];
+        currentPic.index = 0;
+        setMainPic();
+        gt.isTheaterInitialized = false;
+        setTimeout(function(){
+          loadingProcess = 0;
+          nextPicLoading = 0;
+          $('.theaterButton').remove()
+          $("img.custom_gallery-image.gal-prev.gal-inactive").remove();
+          img = $("img.custom_gallery-image.gal-active");
+          img.eq(0).remove();
+          window.onhashchange()
+        },100)
+      }
+    }
+  }
+
+
+   gt.previousPic = function(){
+    if(loadingProcess == 0){
+      if(gt.hasPreviousImage()) {
+        startLoading();
+        currentPic.image = gt.custom_albumData.images[currentPic.index - 1];
+        currentPic.index = currentPic.index - 1;
+        setMainPic("prev");
+      }
+    }
+   }
+
+   gt.scrollStripLeft = function(){
+      pixels_to_move = parseInt(gt.thumbStrip.css("left")) - (66 * 3);
+      maximum_pixels = (windowWidth / 2) - (66 * (gt.custom_albumData.images.length - 1));
+      if(pixels_to_move < maximum_pixels){
+        pixels_to_move = maximum_pixels;
+      }
+      gt.thumbStrip.css("left",pixels_to_move + "px");
+   }
+
+    gt.scrollStripRight = function(){
+      pixels_to_move = parseInt(gt.thumbStrip.css("left")) + (66 * 3);
+      maximum_pixels = (windowWidth / 2);
+      if(pixels_to_move > maximum_pixels){
+        pixels_to_move = maximum_pixels;
+      }
+      gt.thumbStrip.css("left",pixels_to_move + "px");
+   }
+
+
+   gt.switchTheme = function(){
+     var themeWhiteKlass = "theme-white",
+          nightKlass = "fa fa-circle",
+          dayKlass = "fa fa-circle-o",
+          $body = $("body");
+
+      if (!gt.switchBtn.hasClass(themeWhiteKlass)) {
+        gt.switchBtn
+          .addClass(themeWhiteKlass)
+          .find("i")
+          .attr("class", dayKlass);
+
+        $body.addClass(themeWhiteKlass);
+
+      } else {
+        gt.switchBtn
+          .removeClass(themeWhiteKlass)
+          .find("i")
+          .attr("class", nightKlass);
+
+        $body.removeClass(themeWhiteKlass);
+
+      }
+   }
+
+   gt.toggleDescription = function(){
+    $(this).toggleClass("active");
+     gt.descriptionArea.toggleClass("active");
+   }
+
+   var startLoading = function(){
+    loadingProcess = 1;
+    mainPicLoading = 0;
+    nextPicLoading = 0;
+    prevPicLoading = 0;
+    gt.loader.show();
+    loadingInterval = setInterval(stopLoading, 300);
+
+   }
+
+   var stopLoading = function(){
+    if(mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1){
+      clearInterval(loadingInterval);
+      setTimeout(function(){
+        loadingProcess = 0;
+        gt.loader.hide();
+      },100)
+    }
+   }
+
+  var createThumbStrip = function(){
+    if(!gt.isTheaterInitialized){
+      $.each(gt.custom_albumData.images,function(index, image){
+        var li = $("<li class='custom_gallery-item'></li>"),
+            a = $("<a href=''></a>"),
+            img = $("<img class='custom_gallery-thumb' src='' alt='Image Thumb'>");
+          a.on("click",function(){ 
+            startLoading();
+            var old_index = currentPic.index;
+            currentPic.image = gt.custom_albumData.images[index];
+            currentPic.index = index;
+            if(old_index > index){
+              setMainPic("prev",true);
+            }else if(old_index < index){
+              setMainPic("next",true);
+            }
+            return false;
+          })
+          
+          img.attr("src",image.file.thumb.url);
+          img.attr("alt",image.alt_title);
+          li.attr("data-index",index);
+          a.append(img);
+          li.append(a);
+          gt.thumbStrip.append(li);
+      })
+      setThumbNavs();
+    }
+    setMainPic();
+    if (!$('.theaterButton').length){
+      window.onhashchange()
+    }
+  }
+
+
+  var setThumbNavs = function() {
+    var $thumbNav = gt.stage.find('.custom_gallery-thumb-navs'),
+        $thumb = gt.thumbStrip.find('img'),
+        thumbs = $thumb.length,
+        thumbWidth = $thumb.eq(0).width(),
+        thumbGap = parseInt($thumb.closest('li').css('margin-right'), 10),
+        widthSum = (thumbWidth + thumbGap) * thumbs,
+        margin = widthSum * 0.1,
+        totalWidth = widthSum + margin;
+
+    if (windowWidth < totalWidth) {
+      $thumbNav.addClass('show');
+    }else{
+      $thumbNav.removeClass('show');
+    }
+  };
+  function one_load(img){
+    if (img[0].complete){
+      setTimeout(loaded(img),100)
+    }else{
+      setTimeout(one_load,20)
+    }
+  }
+  function loaded(img){
+    calculateHeight(img);
+    mainPicLoading = 1;
+    img.fadeIn(100);
+  }
+  window.setMainPic = function(direction,selectedFromStrip){
+    var img = null;
+    $('div.custom_gallery-show-original a').eq(0).attr('href',currentPic.image.url)
+    if(direction == null){
+      img = $("<img class='custom_gallery-image gal-active'>");
+      img.hide();
+      img.attr("src", currentPic.image.file.theater.url);
+      gt.imageContainer.append(img);
+      img.one("load", function(){
+        one_load(img)
+      })
+      gt.isTheaterInitialized = true;
+    }else{
+      img =  gt.imageContainer.find(".gal-active");
+      if(selectedFromStrip){
+        gt.imageContainer.find(".gal-" + direction).attr("src",currentPic.image.file.theater.url);  
+      }
+      if(direction == "next"){
+        gt.imageContainer.find(".gal-prev").remove();
+        img.removeClass("gal-active").addClass("gal-prev gal-inactive temp");
+        gt.imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active");
+        gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) - 66) + "px");
+      }else if(direction == "prev"){
+        gt.imageContainer.find(".gal-next").remove();
+        img.removeClass("gal-active").addClass("gal-next gal-inactive temp");
+        gt.imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active");
+        gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) + 66) + "px");
+      }
+      mainPicLoading = 1;
+    }
+    gt.descriptionArea.html("<p>" + currentPic.image.description + "</p>");
+    if(currentPic.image.description == null){
+      gt.descriptionArea.addClass("hide");
+    }else{
+      gt.descriptionArea.removeClass("hide");
+    }
+    if (direction!=null){
+      calculateHeight(gt.imageContainer.find(".gal-active"));
+    }
+    gt.thumbStrip.find("li.active").removeClass("active");
+    gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
+
+    setStripToCenter();
+    setNextPic();
+    setPrevPic();
+    changeUrl();
+  }
+
+  var calculateHeight = function(img){
+    var h = 0,
+        w = 0,
+        new_width = 0;
+    if(!Modernizr.touch){
+      if(typeof currentPic.image.height == "undefined"){
+        h = img.height();
+        currentPic.image.height = h;
+        w = img.width();
+        currentPic.image.width = w;
+      }else{
+        h = currentPic.image.height;
+        w = currentPic.image.width;
+      }
+    }else{
+      h = img.height();
+      w = img.width();
+    }
+    if(h > (windowHeight - 150)){
+      new_width = Math.round((windowHeight - 100) * w / h);
+      new_width = (new_width / windowWidth) * 100;
+      img.width(new_width + "%");
+    }else{
+      if(windowWidth < 770){
+        img.width("90%");
+      }else{
+        img.width("65%");
+      }
+    }
+    if (typeof set_custom_gallery_height != 'undefined'){
+      set_custom_gallery_height()
+    }
+  }
+
+  var changeUrl = function(){
+    window.location.hash = currentPic.image._id
+  }
+
+  var setStripToCenter = function(){
+    left = (windowWidth / 2) - (66 * currentPic.index);
+    gt.thumbStrip.css("left",left + "px");
+  }
+
+  var setNextPic = function(){
+    gt.imageContainer.find(".gal-next.temp").remove()
+    if(gt.hasNextImage()) {
+      var obj = gt.custom_albumData.images[currentPic.index + 1],
+          nextImg = $("<img class='custom_gallery-image gal-next gal-inactive'>");
+      nextImg.attr("src",obj.file.theater.url);
+      nextImg.hide();
+      gt.imageContainer.append(nextImg);
+      nextImg.on("load",function(){
+        calculateHeight(nextImg);
+        nextPicLoading = 1;
+        nextImg.fadeIn(100);
+      })
+    }else{
+      nextPicLoading = 1;
+    }
+  }
+
+  var setPrevPic = function(){
+    gt.imageContainer.find(".gal-prev.temp").remove()
+    if(gt.hasPreviousImage()) {
+      var obj = gt.custom_albumData.images[currentPic.index - 1],
+          prevImg = $("<img class='custom_gallery-image gal-prev gal-inactive'>");
+      prevImg.attr("src",obj.file.theater.url);
+      prevImg.hide();
+      gt.imageContainer.prepend(prevImg);
+      prevImg.on("load",function(){
+        calculateHeight(prevImg);
+        prevPicLoading = 1;
+        prevImg.fadeIn(100);
+      })
+    }else{
+      prevPicLoading = 1;
+    }
+  }
+
+  var l = function(x){
+    console.log(x)
+  }
+
+  $(document).ready(function(){
+    initialize();
+  })
+}
+
+// custom_gallery-image gal-prev gal-inactive

app/assets/javascripts/jquery-cropper.js

@@ -0,0 +1,75 @@
+/*!
+ * jQuery Cropper v1.0.0
+ * https://github.com/fengyuanchen/jquery-cropper
+ *
+ * Copyright (c) 2018 Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2018-04-01T06:20:13.168Z
+ */
+
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery'), require('cropperjs')) :
+  typeof define === 'function' && define.amd ? define(['jquery', 'cropperjs'], factory) :
+  (factory(global.jQuery,global.Cropper));
+}(this, (function ($,Cropper) { 'use strict';
+
+  $ = $ && $.hasOwnProperty('default') ? $['default'] : $;
+  Cropper = Cropper && Cropper.hasOwnProperty('default') ? Cropper['default'] : Cropper;
+
+  if ($.fn) {
+    var AnotherCropper = $.fn.cropper;
+    var NAMESPACE = 'cropper';
+
+    $.fn.cropper = function jQueryCropper(option) {
+      for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+
+      var result = void 0;
+
+      this.each(function (i, element) {
+        var $element = $(element);
+        var isDestroy = option === 'destroy';
+        var cropper = $element.data(NAMESPACE);
+
+        if (!cropper) {
+          if (isDestroy) {
+            return;
+          }
+
+          var options = $.extend({}, $element.data(), $.isPlainObject(option) && option);
+
+          cropper = new Cropper(element, options);
+          $element.data(NAMESPACE, cropper);
+        }
+
+        if (typeof option === 'string') {
+          var fn = cropper[option];
+
+          if ($.isFunction(fn)) {
+            result = fn.apply(cropper, args);
+
+            if (result === cropper) {
+              result = undefined;
+            }
+
+            if (isDestroy) {
+              $element.removeData(NAMESPACE);
+            }
+          }
+        }
+      });
+
+      return result !== undefined ? result : this;
+    };
+
+    $.fn.cropper.Constructor = Cropper;
+    $.fn.cropper.setDefaults = Cropper.setDefaults;
+    $.fn.cropper.noConflict = function noConflict() {
+      $.fn.cropper = AnotherCropper;
+      return this;
+    };
+  }
+
+})));

app/assets/javascripts/jquery.lite.image.resize.js

@@ -0,0 +1,136 @@
+/* ===================================================
+ * jquery-lite-image-resize v.1.0.1
+ * https://github.com/RayChang/jquery-lite-image-resize
+ * ===================================================
+ * How to use ?
+ *
+ * HTML element closest to the image to add class "resizeimg".
+ * 
+ * Example:
+ * <div class="resizeimg">
+ *     <img src="images url" />
+ * </div>
+ *
+ * Or you can use:
+ * $('your class').rsImg();
+ *
+ * Note : HTML structure must be a structure like the example above.
+ * 
+*/
+
+!function ($) {
+
+    "use strict";
+    
+    var ResizeImg = function(element, elementLength, i) {
+        this.element = $(element);
+        this.element.data('exists', true);
+        this.elementLength = elementLength;
+        this.index = i;
+    };
+    ResizeImg.prototype.resize = function(callback) {
+        var $img = this.element.children('img').eq(0),
+            elW = this.element.innerWidth(),
+            elH = this.element.innerHeight(),
+            elScale = elW/elH,
+            ell = this.elementLength,
+            index = this.index,
+            image = document.createElement("img");
+        image.src = $img.attr('src');
+        this.element.css({
+            'position': 'relative',
+            'overflow': 'hidden',
+        });
+        function imageLoadComplete() {
+            var imgW = image.width,
+                imgH = image.height,
+                imgScale = imgW/imgH,
+                portrait = {
+                    'position': 'absolute',
+                    'height': '100%',
+                    'width': 'auto',
+                    'max-width': 'none',
+                    'left': '50%',
+                    'top': 0,
+                    'margin-left': imgW*(elH/imgH)/-2
+                },
+                landscape = {
+                    'position': 'absolute',
+                    'height': 'auto',
+                    'max-height': 'none',
+                    'width': '100%',
+                    'left': 0,
+                    'top': '50%',
+                    'margin-top': imgH*(elW/imgW)/-2
+                },
+                center = {
+                    'position': 'absolute',
+                    'height': '100%',
+                    'width': '100%',
+                    'top': 0,
+                    'left': 0
+                };
+            if(imgScale < 1) {
+                if(elScale < 1) {
+                    if(elScale > imgScale) {
+                        $img.css(landscape);
+                    } else {
+                        $img.css(portrait);
+                    };
+                } else {
+                   $img.css(landscape); 
+                };
+            };
+
+            if(imgScale > 1) {
+                if(elScale > 1) {
+                    if(elScale > imgScale) {
+                        $img.css(landscape);
+                    } else {
+                        $img.css(portrait);
+                    };
+                } else {
+                    $img.css(portrait);
+                };
+            };
+
+            if(imgScale == 1) {
+                if(elScale < 1) {
+                    $img.css(portrait);
+                } else if(elScale > 1) {
+                    $img.css(landscape);
+                } else {
+                    $img.css(center);
+                };
+            };
+            $img.fadeTo(500, 1);
+            
+            if(index == ell && callback) {
+                ResizeImg.prototype.callback(callback)
+            }
+        }
+        if(/MSIE 8.0/g.test($ua)) {
+            imageLoadComplete();
+        } else {
+            image.onload = imageLoadComplete;
+        }
+    };
+
+    ResizeImg.prototype.callback = function(callback) {
+        callback();
+    };
+
+    $.fn.rsImg = function (callback) {
+        var elementLength = this.length - 1;
+        this.each(function (i) {
+            if(!$(this).data('exists')) {
+                $(this).children("img").fadeTo(0,0);
+                new ResizeImg(this, elementLength, i).resize(callback);
+            };
+        });
+    };
+
+    $(function() {
+        $('.resizeimg').rsImg();
+    });
+}(window.jQuery);

app/assets/javascripts/rss.js

@@ -0,0 +1,586 @@
+//Created by Harry Bomrah on Sep 21 2011
+$rss = jQuery.noConflict();
+var rcom={
+//Pass dom and will return binded dom with starting year till current
+insertDatePanel : function(dom,year){
+	if(!year)year=1901;
+	if(dom=="")return false;
+	domid=dom.attr("id");
+	var dt = new Date();
+	current_year=dt.getFullYear();
+	var dthtml="Year: <select name='"+domid+"_year'>";
+	for(i=current_year;i>=year;i--){
+		dthtml+="<option value='"+i+"'>"+i+"</option>";
+	}
+	dthtml+="</select> Date: <select name='"+domid+"_date'>";
+	for(i=1;i<=31;i++){
+		if(i<10)
+			dthtml+="<option value='0"+i+"'>"+i+"</option>";
+		else
+			dthtml+="<option value='"+i+"'>"+i+"</option>";
+	}
+	dthtml+="</select> Month: <select name='"+domid+"_month'>";
+	var months= Array("","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
+	for(i=1;i<12;i++){
+		if(i<10)
+			dthtml+="<option value='0"+i+"'>"+months[i]+"</option>";
+		else
+			dthtml+="<option value='"+i+"'>"+months[i]+"</option>";
+	}
+	dthtml+="</select>"; 
+	dom.html(dthtml);
+},
+
+//loading overlay around a dom...
+loadingWrapper : function(dom, display){
+	if(display){
+		dom.prepend("<div id='loading_wrapper' class='loading'></div>");
+		$rss("#loading_wrapper").height(dom.height());
+		$rss("#loading_wrapper").width(dom.width());
+	}else{
+		domId=dom.attr("id");
+		$rss("#"+domId+" #loading_wrapper").remove();
+		}
+	},
+	
+//validating a dom.... 
+validate : function(dom, validation, errormsg){
+	var domValue = dom.val();
+	var error = false;
+	var regex="";
+	var msg = "";
+	switch(validation){
+		case "required":
+			if(domValue=="")error=true;
+			msg="Cannot be empty.";
+			break;
+		case "email":
+			regex=/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
+			msg="Invalid Email Address.";
+			break;
+		case "number":
+			regex=/^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
+			msg = "Only numbers are accepted.";
+			break;
+		case "alphanumeric":
+			regex=/^\s*[a-zA-Z0-9,\s]+\s*$/;
+			msg="Only numbers, alphabets and spaces are allowed.";
+			break;
+		}
+		domId=dom.attr("name");
+		if(errormsg=="")errormsg=msg;
+		if(regex!="")if(!regex.test(domValue))error=true;
+		if(error){$rss("#"+domId+"_error").remove();dom.after("<span id='"+domId+"_error' class='error'>"+errormsg+"</span>");return false;} else{ $rss("#"+domId+"_error").remove();return true;}
+	},
+	
+bindToSpinner : function(dom,data,callbackFn){
+		var domId = dom.attr("id");
+		var dhtml="";
+		var spinnerValue=Array();
+		var spinnerDisplay=Array();
+		$rss.each(data,function(i,it){
+			$rss.each(data[i],function(key,it){
+				spinnerValue.push(it);
+			});
+		});
+		dhtml="<select name='"+domId+"'>";
+		for(i=0,y=1,z=0;i<spinnerValue.length/2;i++,y+=2,z+=2){
+			dhtml+="<option value='"+spinnerValue[z]+"'>"+spinnerValue[y]+"</option>";
+		}
+		dhtml+="</select>";
+		dom.html(dhtml);
+		if(typeof callbackFn=="function")
+			callbackFn.call(this, dhtml);
+	},
+	
+	//binds the recieved json to a table
+bindToTable : function(dom,data,headers,actions,css_class,callbackFn){
+	if(!css_class)css_class="";
+	var dhtml="<table width='100%' cellpadding='5' cellspacing='5' class='"+css_class+"' ><thead><tr>";
+	var domId = dom.attr("id");
+	if(actions){
+		var btnTitles=Array();
+		var btnFunctions=Array();
+		$rss.each(actions,function(title,func){
+			btnTitles.push(title);
+			btnFunctions.push(func);
+		});
+		rcom.translate(btnTitles,function(convertedData){
+				btnTitles=convertedData.slice();
+		
+			rcom.translate(headers,function(convertedData){
+				headers=convertedData;
+				if(!data)return;
+				$rss.each(headers,function(i,head){
+					dhtml+="<th>"+head+"</th>";
+				});
+				dhtml+="</thead></tr>";
+				if(data.length==0)dhtml+="<tr><td colspan='"+headers.length+"' align='center'>No Data</td></tr>";
+				$rss.each(data,function(i,item){
+					var cl="";
+					if(i%2!=0)cl="even";
+					dhtml+="<tr id='"+domId+"_"+item.id+"' class='"+cl+"'>";
+					$rss.each(item,function(i,it){
+						if(i!="id"){
+							if(it==null)it="Not Set";
+								dhtml+="<td align='center'>"+it+"</td>";
+						}
+					})
+					dhtml+="<td align='center'>";
+					for(x=0;x<btnTitles.length;x++){
+						dhtml+="<button onclick='"+btnFunctions[x]+"("+item.id+")'>"+btnTitles[x]+"</button>";
+					}
+					dhtml+="</td>";
+					dhtml+="</tr>";
+				});
+				dhtml+="</table>";
+				dom.html(dhtml);
+				});
+		});
+	}else{
+			rcom.translate(headers,function(convertedData){
+				headers=convertedData;
+				if(!data)return;
+				if(headers.length>0){
+					$rss.each(headers,function(i,head){
+						dhtml+="<th>"+head+"</th>";
+					});
+				}
+				dhtml+="</thead></tr>";
+				if(data.length==0)dhtml+="<tr><td colspan='"+headers.length+"' align='center'>No Data</td></tr>";
+				
+				$rss.each(data,function(i,item){
+					var cl="";
+					if(i%2!=0)cl="even";
+					dhtml+="<tr id='"+domId+"_"+item.id+"' class='"+cl+"'>";
+					$rss.each(item,function(i,it){
+						if(i!="id"){
+							if(it==null)it="Not Set";
+								dhtml+="<td align='center'>"+it+"</td>";
+						}
+					})
+					dhtml+="</tr>";
+				});
+				dhtml+="</table>";
+				dom.html(dhtml);
+				});	
+	}
+	
+	if(typeof callbackFn=="function")
+		callbackFn.call(this, dhtml);
+},
+	//convert to date string which can be directly inserted in database or according to any format.
+convertToInsertableDate : function(y,m,d,format){
+		var dt="";
+		if(m<10)m="0"+m;
+		if(d<10)d="0"+d;
+		switch(format){
+			case "yyyy-mm-dd":
+				dt= y+"-"+m+"-"+d;
+			break;
+			case "dd-mm-yyyy":
+				dt= d+"-"+m+"-"+y;
+			break;
+			case "mm-dd-yyyy":
+				dt= m+"-"+d+"-"+y;
+			break;
+			default:
+				dt= y+"-"+m+"-"+d;
+			break;
+		}
+		return dt; 
+	},
+//a fucntion to show specific divs and hide all other	
+showDoms : function(doms){
+	$rss("body").find("div").each(function(){$rss(this).hide();});
+	$rss.each(doms,function(i,dom){
+			dom.show();
+		});
+	},
+
+//a function to translate the word or array..
+translate : function(data,callbackFn){
+		var cdata="";
+		var status =true;
+		if(!data){
+			if(typeof callbackFn=="function")
+						callbackFn.call(this,cdata);
+				status=false;
+			}
+		if(data==""){
+			if(typeof callbackFn=="function")
+						callbackFn.call(this,cdata);
+				status=false;
+			}
+		if(status){
+			$rss.getJSON("../../classes/translate.php", {fn:"translateThis",tData:data},function(convertedData){			
+				if(typeof callbackFn=="function")
+						callbackFn.call(this, convertedData);
+			});
+		}
+	},
+
+// a function to bind JSON to list
+bindToList : function(dom,data,callbackFn){
+		var domId = dom.attr("id");
+		var dhtml="";
+		var listValue=Array();
+		var listDisplay=Array();
+		$rss.each(data,function(i,it){
+			$rss.each(data[i],function(key,it){
+				listValue.push(it);
+			});
+		});
+		dhtml="<ul id='"+domId+"_list'>";
+		for(i=0,y=1,z=0;i<listValue.length/2;i++,y+=2,z+=2){
+			dhtml+="<li id='li_"+listValue[z]+"'>"+listValue[y]+"</li>";
+		}
+		dhtml+="</ul>";
+		dom.html(dhtml);
+		if(typeof callbackFn=="function")
+			callbackFn.call(this,dhtml);
+	},
+makeDraggable : function(handler,dom){
+	handler.css("position","absolute");
+	dom.css("position","absolute");
+	var puranix=0;
+	var nayeex=0;
+	var puraniy=0;
+	var nayeey=0;
+	var offset="";
+	var zIndex=dom.css("z-index");
+		handler.mousedown(function(e){
+			puranix=e.clientX;
+			puraniy=e.clientY;
+			offset=dom.offset();
+			$rss(this).mousemove(function(e){
+				nayeex=e.clientX-puranix;
+				nayeex+=offset.left;
+				nayeey=e.clientY-puraniy;
+				nayeey+=offset.top;
+				dom.css({"left":nayeex+"px","top":nayeey+"px","z-index":"9999"});
+			})
+		}).mouseup(function(){
+			$rss(this).unbind("mousemove");
+			dom.css("z-index",zIndex);
+		})
+	},
+	
+//automatically scrolls to the bottom of the div	
+scrollToBottom : function(dom){
+	var domId = dom.attr("id");
+//	var domScrollHeight = document.getElementById(domId).scrollHeight; 
+	var obj = document.getElementById(domId);
+	
+	if((obj.scrollTop+100) >= (obj.scrollHeight - obj.offsetHeight))
+		dom.scrollTop(obj.scrollHeight);
+	},
+	
+/*ajax loading of images... needs following settings
+dom:in which images ve to be loaded
+url:the server url for making ajax calls
+limit:how many images to load
+divClass:the class of div surrounding each image
+nameClass:class for span showing name
+fn:function to be called in on the server
+imageSrc:the image source of all the images.
+bindTo:to bind images to a onclick function or else will be binded to normal a tag.
+urlKey:to specify the key of the value.. if bindTo is used, this will be neglected..
+returns json;
+*/
+loadImages : function(settings,callbackFn){
+
+		var dom = settings.dom;
+		var domid= dom.attr("id");
+		var temp_array=Array();
+		var starting = $rss("#"+domid+" img:last").attr("id");
+		if(typeof starting != 'undefined'){
+			starting = starting.substr(4,starting.length-1);	
+		}else{starting = 0};
+		var temp_var="";
+		var json = "";
+		var dhtml="";
+		var extraparam="";
+		if(typeof settings.extraParam != "undefined"){
+			extraparam = settings.extraParam;
+		}
+		$rss.getJSON(settings.url,{fn:settings.fn,id:settings.whereId,limit:settings.limit,start:starting,extra:extraparam},function(images){
+				json = eval(images);
+				$rss.each(images,function(i,pic){
+					var temp_array=Array();
+					var a_var=Array();
+					var name_var="";
+					var title="";
+					$rss.each(pic,function(i,value){
+						temp_array.push(value);
+						})
+						if(temp_array.length>=4){
+							name_var="<span class='"+settings.nameClass+"'>"+temp_array[3]+"</span></div>" 	
+						}
+						if(temp_array[2]==null)
+							title = "";
+						else
+							title = temp_array[2];
+						if(typeof settings.bindTo!="undefined"){
+							a_var[1]="onclick='"+settings.bindTo+"("+temp_array[0]+");return false;'";
+							a_var[0]="";
+						}else{a_var[0]='?'+settings.urlKey+'='+temp_array[0];a_var[1]="";}
+					dhtml="<div class='"+settings.divClass+"' id='img_holder_"+temp_array[0]+"' ><a href='"+a_var[0]+"' "+a_var[1]+" title='"+title+"'><img  id='pic_"+temp_array[0]+"' style='display:none' src='"+settings.imageSrc+temp_array[1]+"' /></a>"+name_var;
+				dom.delay(100).append(dhtml);	
+				$rss("#pic_"+pic.id).delay(100).fadeIn(200);
+				
+				})
+				if(typeof callbackFn=="function")
+					callbackFn.call(this,json);
+		})
+		
+		
+	},
+	
+//function to get url variables...
+getUrlVars : function(){
+    var vars = [], hash;
+    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+    for(var i = 0; i < hashes.length; i++){
+        hash = hashes[i].split('=');
+        vars.push(hash[0]);
+        vars[hash[0]] = hash[1];
+    }
+    if(vars[0] == window.location.href){
+    	vars =[];
+    }
+    return vars;
+},
+/*function to open a modalwindow on a page.. self reliant no images, no css needed.
+settings
+
+width:in percentage or pixcel
+height:in percentage or pixcel
+closeBtn:true or false
+envClose:closing through background click, true or flase
+loadDiv:load html from a div
+loadPage:load a page
+loadHtml: load html
+
+*/
+modalWindow : function(settings,callbackFn){
+	
+	var envClose = settings.envClose;
+	var dhtml="";
+	if(typeof envClose == "undefined")
+		envClose = true;
+	var closeBtn = settings.closeBtn;
+	if(typeof closeBtn == "undefined")
+		closeBtn = true;
+
+	var rgmaskHeight = $rss(window).height();
+	var rgmaskWidth = $rss(window).width();
+	var tempheight = settings.height;
+	var tempwidth = settings.width;
+		
+	var maxheight = (rgmaskHeight*85)/100;
+	var maxwidth = (rgmaskWidth*85)/100;
+		
+	if(typeof tempheight!="undefined"){
+		tempheight = tempheight.toString();
+		if(tempheight.charAt(tempheight.length-1)=='%')
+			tempheight=(rgmaskHeight*parseInt(tempheight.substr(0,tempheight.length)))/100;
+		if(tempheight>maxheight)
+			tempheight=maxheight;	
+	}else{tempheight="auto";}
+	if(typeof tempwidth!="undefined"){
+		tempwidth = tempwidth.toString();
+		if(tempwidth.charAt(tempwidth.length-1)=='%')
+			tempwidth=(rgmaskWidth*parseInt(tempwidth.substr(0,tempwidth.length)))/100;
+		if(tempwidth>maxwidth)
+			tempwidth=maxwidth;
+	}else{tempwidth="auto";}
+	$rss("body").append('<div class="rgmask" id="rgsheath" style="height:'+rgmaskHeight+'px"></div>');
+	$rss("#rgsheath").css({background: "#000", width: "100%", position: "fixed", top: 0, left: 0,opacity:0.5,'z-index':199});
+	$rss("body").append('<div id="rgWindow"></div>');
+	$rss("#rgWindow").css({"position": "fixed", "z-index": "999", "background": "#fff", "border": "solid 1px #ccc", "padding": "10px", "border-radius": "5px", "-webkit-border-radius": "5px", "-moz-border-radius": "5px", "-ms-border-radius": "5px",	"box-shadow": "0 0 20px rgba(0,0,0,0.7)","-webkit-box-shadow": "0 0 20px rgba(0,0,0,0.7)","-moz-box-shadow": "0 0 20px rgba(0,0,0,0.7)","-ms-box-shadow": "0 0 20px rgba(0,0,0,0.7)"});
+		var rgWTop = (rgmaskHeight-20)/2;
+		var rgWLeft = (rgmaskWidth-20)/2;
+		$rss("#rgWindow").css({top:rgWTop+"px", left:rgWLeft+"px"});
+	if(typeof settings.loadDiv!="undefined"){
+		dhtml = $rss(settings.loadDiv).html();
+		$rss("#rgWindow").html(dhtml).hide();
+		prepareWindow();
+	}
+	if(typeof settings.loadHtml!="undefined"){
+		dhtml = settings.loadHtml;
+		$rss("#rgWindow").html(dhtml).hide();
+		prepareWindow();
+	}
+	if(typeof settings.loadPage!="undefined"){
+		$rss("#rgWindow").load(settings.loadPage,function(){$rss(this).hide();dhtml=$rss(this).html();prepareWindow();});
+	}
+	function prepareWindow(){
+		if(tempheight!="auto")
+			rgWTop = (rgmaskHeight-tempheight)/2;
+		else{
+			tempheight=$rss("#rgWindow").height()+30;
+			if(tempheight>maxheight)
+				tempheight=maxheight;
+			rgWTop=(rgmaskHeight-tempheight)/2;
+		}
+		if(tempwidth!="auto")
+			rgWLeft = (rgmaskWidth-tempwidth)/2;
+		else{
+			tempwidth=$rss("#rgWindow").width();
+			if(tempwidth>maxwidth)
+				tempwidth=maxwidth;
+			rgWLeft=(rgmaskWidth-tempwidth)/2;
+		}
+		tempwidth=parseInt(tempwidth)+25;
+		$rss("#rgWindow").empty().show();
+		var closebtn = "";
+		if(closeBtn)
+			closebtn='<a href="" style="display:block; width:20px; height:20px; line-height:19px; text-align:center; position:absolute; right:-10px; top: -10px; font-family:Tahoma; font-weight:bold; border:solid 1px #000; border-radius: 10px;text-shadow:0px 1px 0 #DDD; background-color:#CCC; font-size:10px; text-decoration:none; color:#666; padding-left:1px; box-shadow: 0 0 5px #000000;" id="close_modal">X</a>';
+		$rss("#rgWindow").animate({"width":tempwidth+"px","height":tempheight+"px",top:rgWTop+"px", left:rgWLeft+"px"},500,function(){$rss("#rgWindow").html(closebtn+"<div id='rgContent' style='padding:5px; overflow:auto; overflow-x:none; height:"+tempheight+"px;'>"+dhtml+"</div>");
+		$rss("#close_modal").mouseover(function(){$rss(this).css("color","#999");}).mouseout(function(){$rss(this).css("color","#666");})
+		$rss("#close_modal").click(function(){rcom.modalWindowClose(); return false;})
+			if(envClose)
+				$rss("#rgsheath").click(function(){
+					rcom.modalWindowClose();
+				})
+				$rss(document).one("keydown",function(e){
+				    if (e.keyCode == 27){ 
+				    	rcom.modalWindowClose();
+				       return false;
+				    }
+			})
+
+			if(typeof callbackFn=="function")
+				callbackFn.call(this,$rss("#rgWindow"));
+		});
+	}
+},
+modalWindowUpdate : function(settings,callbackFn){
+	var rgmaskHeight = $rss(window).height();
+	var rgmaskWidth = $rss(window).width();
+	var tempheight = settings.height;
+	var tempwidth = settings.width;
+	var dhtml = "";
+	var maxheight = (rgmaskHeight*85)/100;
+	var maxwidth = (rgmaskWidth*85)/100;
+	if(typeof tempheight!="undefined"){
+		tempheight = tempheight.toString();
+		if(tempheight.charAt(tempheight.length-1)=='%')
+			tempheight=(rgmaskHeight*parseInt(tempheight.substr(0,tempheight.length)))/100;
+		if(tempheight>maxheight)
+			tempheight=maxheight;	
+	}else{tempheight="auto";}
+	if(typeof tempwidth!="undefined"){
+		tempwidth = tempwidth.toString();
+		if(tempwidth.charAt(tempwidth.length-1)=='%')
+			tempwidth=(rgmaskWidth*parseInt(tempwidth.substr(0,tempwidth.length)))/100;
+		if(tempwidth>maxwidth)
+			tempwidth=maxwidth;
+	}else{tempwidth="auto";};
+	$rss("body").append("<div id='rgwindow_temp_div'></div>");
+	
+	if(typeof settings.loadDiv!="undefined"){
+		dhtml = $rss("#"+settings.loadDiv).html();
+		$rss("#rgwindow_temp_div").html(dhtml).hide();
+		prepareWindow();
+	}
+	if(typeof settings.loadHtml!="undefined"){
+		dhtml = settings.loadHtml;
+		$rss("#rgwindow_temp_div").html(dhtml).hide();
+		prepareWindow();
+	}
+	if(typeof settings.loadPage!="undefined"){
+		$rss("#rgwindow_temp_div").load(settings.loadPage,function(){$rss(this).hide();dhtml=$rss(this).html();prepareWindow();});
+	}
+	function prepareWindow(){
+		if(tempheight!="auto")
+			rgWTop = (rgmaskHeight-tempheight)/2;
+		else{
+			tempheight=$rss("#rgwindow_temp_div").height()+30;
+			if(tempheight>maxheight)
+				tempheight=maxheight;
+			rgWTop=(rgmaskHeight-tempheight)/2;
+		}
+		if(tempwidth!="auto")
+			rgWLeft = (rgmaskWidth-tempwidth)/2;
+		else{
+			tempwidth=$rss("#rgwindow_temp_div").width();
+			if(tempwidth>maxwidth)
+				tempwidth=maxwidth;
+			rgWLeft=(rgmaskWidth-tempwidth)/2;
+		}
+		tempwidth=parseInt(tempwidth)+25;
+			$rss("#rgContent").empty();
+		$rss("#rgWindow").animate({"width":tempwidth+"px","height":tempheight+"px",top:rgWTop+"px", left:rgWLeft+"px"},500,function(){$rss("#rgContent").css("height",tempheight+"px").html(dhtml)});
+		$rss("#rgwindow_temp_div").remove();
+		}
+},
+modalWindowClose : function(callbackFn){
+	if($rss("#rgWindow").length>0){
+		$rss("#rgWindow").empty();
+		var rgmaskHeight = $rss(window).height();
+		var rgmaskWidth = $rss(window).width();
+		var x = (rgmaskHeight-20)/2;
+		var y = (rgmaskWidth-20)/2
+		$rss("#rgWindow").animate({top:x+"px", left:y+"px","width":"50px","height":"50px"},300,function(){$rss(this).fadeOut(100).remove();$rss("#rgsheath").fadeOut(500).remove();})
+	}
+		if(typeof callbackFn=="function")
+				callbackFn.call(this,"harry");
+},
+bindDomToHead :  function(dom){
+	var gc = dom.css("background");
+	var t = dom.offset();
+	var gw = dom.width();
+	$rss(window).scroll(function(){
+		var wt = $rss(window).scrollTop();
+		if ( wt > t.top ) {
+			var cssObj = { 
+				'position':'fixed',
+				'top':0,
+				'width':gw,
+				'background':gc,
+				'box-shadow':'0 1px 0 rgba(0,0,0,0.2)',
+				'z-index':99
+				}
+			dom.css(cssObj);
+		} else {
+			dom.attr('style',"");
+		}
+	});
+},
+progressBar : function(dom,settings){
+	var domid = dom.prop("id");
+	if($rss("#rss_progressbar_div_"+domid).length==0){
+		if(typeof settings.top == "undefined")
+			settings.value = 1;
+		if(typeof settings.top == "undefined")
+			settings.top = (dom.height()-12)/2;
+		dom.append("<div id='rss_progressbar_div_"+domid+"' style='display:none;padding: 2px;background: #333;background: -webkit-linear-gradient(#111, #333);background: -moz-linear-gradient(#111, #333);background: -ms-linear-gradient(#111, #333);position: absolute;top: "+settings.top+"px;left: 50%;margin-left: -45%;width: 84%;box-shadow: inset 0 0 2px #000;border-radius: 4px;'><div id='rss_progressbar_"+domid+"' style='height: 8px;	background: #36c;background: -webkit-linear-gradient(#7A98E7, #36c);background: -moz-linear-gradient(#7A98E7, #36c);background: -ms-linear-gradient(#7A98E7, #36c);border-radius: 2px; width: "+settings.value+"%;'></div></div>");
+		$rss("#rss_progressbar_div_"+domid).fadeIn(500);
+	}
+},
+progressBarValue : function(dom,value){
+	var domid = dom.prop("id");
+	if($rss("#rss_progressbar_div_"+domid).length==1){
+		$rss("#rss_progressbar_"+domid).animate({"width":value+"%"},100);
+		
+	}
+},
+progressBarClose : function(dom){
+	var domid = dom.prop("id");
+	$rss("#rss_progressbar_div_"+domid).fadeOut(500,function(){$(this).remove();});
+},
+getInternetExplorerVersion: function(){
+   var rv = -1; // Return value assumes failure.
+   if (navigator.appName == 'Microsoft Internet Explorer')
+   {
+      var ua = navigator.userAgent;
+      var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
+      if (re.exec(ua) != null)
+         rv = parseFloat( RegExp.$1 );
+   }
+   return rv;
+   }
+}
+$ = jQuery.noConflict();

app/assets/javascripts/theater-widget.js

@@ -0,0 +1,536 @@
+var CustomGalleryTheaterWidget = function(widget){
+  var parent_divs = widget,
+      parent_div_z_index = parent_divs.eq(parent_divs.length-1).css('z-index')
+  parent_divs.eq(parent_divs.length-1).css('z-index','2000')
+  var gt = this,
+      currentPic = {},
+      windowHeight = 0,
+      windowWidth = 0,
+      swipeController = null,
+      resizing = null;
+      loadingInterval = null,
+      mainPicLoading = 0,
+      nextPicLoading = 0,
+      prevPicLoading = 0,
+      currentSwipeImageDom = null,
+      currentSwipeImageDomLeftPos = 0,
+      windowScreenThresholdForTouch = 0,
+      loadingProcess = 0;
+      gt.stage = null;
+      gt.stripNextBtn = null;
+      gt.stripPrevBtn = null;
+      gt.thumbToggle = null;
+      gt.descriptionToggle = null;
+      gt.closeBtn = null;
+      gt.imageContainer = null;
+      gt.custom_albumData = {};
+      gt.loader = null;
+      gt.thumbStrip = null;
+      gt.descriptionArea = null;
+      gt.isTheaterInitialized = false;
+
+  var play_flag = false;
+  var button_left_string = '<button id ="theaterPreviousButton" class="theaterButton">< </button>',
+      button_right_string = '<button id ="theaterNextButton" class="theaterButton">> </button>',
+      button_play_string = '<button id ="theaterPlayButton" class="theaterButton">▶ </button>',
+      button_stop_string = '<button id ="theaterStopButton" class="theaterButton">|| </button>',
+      playtimeoutID;
+  var initialize = function(){
+    gt.stage = widget.find('#custom_gallery-theater-stage');
+    gt.closeBtn = gt.stage.find(".custom_gallery-close");
+    gt.switchBtn = gt.stage.find(".custom_gallery-theme-switch");
+    gt.imageContainer = gt.stage.find(".image-container");
+    gt.thumbStrip = gt.stage.find(".custom_gallery-thumb-wrap");
+    gt.thumbToggle = gt.stage.find(".custom_gallery-thumb-toggle");
+    gt.loader = gt.stage.find(".custom_gallery-loader");
+    gt.stripNextBtn = gt.stage.find(".custom_gallery-thumb-next");
+    gt.stripPrevBtn = gt.stage.find(".custom_gallery-thumb-prev");
+    gt.descriptionArea = gt.stage.find(".custom_gallery-img-desc");
+    gt.descriptionToggle = gt.stage.find(".custom_gallery-toggle-desc");
+    windowScreenThresholdForTouch = windowWidth / 3;
+    startLoading();
+    windowHeight = $(window).height();
+    windowWidth = $(window).width();
+    var addButton = function () {
+      widget.find('.theaterButton').remove();
+      if (!play_flag){
+        $(button_left_string+button_play_string+button_right_string).insertAfter(widget.find('img.gal-active'));
+      }
+      else{
+        $(button_left_string+button_stop_string+button_right_string).insertAfter(widget.find('img.gal-active'));
+      }
+      if (!widget.find(".gal-prev").length) { widget.find('#theaterPreviousButton').remove(); }
+      if (!widget.find(".gal-next").length) { widget.find('#theaterNextButton').remove(); }
+
+      widget.find('#theaterPreviousButton').click(function () {
+        gt.previousPic();
+        addButton()
+      });
+      widget.find('#theaterNextButton').click(function () {
+        gt.nextPic();
+        addButton()
+      });
+      widget.find('#theaterPlayButton').click(function () {
+        play_flag = true;
+        playtimeoutID = window.setInterval(function(){
+          gt.playallPic();
+        },3000)
+        addButton()
+      });
+      widget.find('#theaterStopButton').click(function () {
+        play_flag = false;
+        addButton()
+        window.clearInterval(playtimeoutID)
+      });
+    }
+    bindHandler();
+    gt.createTheater();
+    
+    addButton();
+
+  }
+
+  var bindHandler = function(){
+    // handler to close the theater
+    gt.closeBtn.on("click",gt.destroyTheater);
+
+    // handler to show theater
+    widget.find("div[data-list=images] a").on("click",function(){
+      gt.createTheater();
+      return false;
+    })
+
+     gt.switchBtn.on("click",gt.switchTheme);
+     gt.descriptionToggle.on("click", gt.toggleDescription)
+     gt.stripPrevBtn.on("click", gt.scrollStripRight);
+     gt.stripNextBtn.on("click", gt.scrollStripLeft);
+
+     if(Modernizr.touch){
+      gt.imageContainer.swipe({
+        swipe : function(event, direction, distance, duration, fingerCount){
+          if(direction == "left"){
+            gt.nextPic();
+          }else if(direction == "right"){
+            gt.previousPic();
+          }
+        }
+      })
+      gt.thumbToggle.swipe({
+        swipe : function(event, direction, distance, duration, fingerCount){
+          if(direction == "up"){
+            gt.thumbStrip.parent().addClass("show");
+            gt.thumbToggle.addClass("up");
+            gt.thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down");
+          }else if(direction == "down"){
+            gt.thumbStrip.parent().removeClass("show");
+            gt.thumbToggle.removeClass("up");
+            gt.thumbToggle.find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up");
+          }
+        }
+      })
+     }
+
+     //handler for window resize
+     $(window).resize(function(){
+       clearTimeout(resizing);
+       resizing = setTimeout(doneResizing,1000);
+     })
+  }
+
+  var bindKeyHandlers = function(){
+    if(!Modernizr.touch){
+      widget.on("click",".gal-active", gt.nextPic);
+      widget.on("click",".gal-prev", gt.previousPic);
+      widget.on("click",".gal-next", gt.nextPic);
+      $(document).on("keyup",function(e){
+        switch(e.keyCode){
+          case 39:
+            gt.nextPic();
+            break;
+          case 37:
+            gt.previousPic();
+            break;
+          case 27:
+            gt.destroyTheater();
+          break;
+        }
+       })
+    }
+  }
+
+
+  var doneResizing = function(){
+    windowHeight = $(window).height();
+    windowWidth = $(window).width();
+    setThumbNavs();
+  }
+
+  var unBindKeyHandlers = function(){
+    $(document).unbind("keyup");
+  }
+
+  gt.destroyTheater = function(){
+    parent_divs.eq(parent_divs.length-1).css('z-index',parent_div_z_index)
+    gt.stage.hide();
+    widget.removeClass("custom_gallery-mode-on");
+    gt.imageContainer.empty()
+    unBindKeyHandlers();
+  }
+
+  gt.createTheater = function(){
+    gt.stage.show();
+    widget.addClass("custom_gallery-mode-on");
+    bindKeyHandlers();
+	  gt.isTheaterInitialized = false;
+    gt.custom_albumData = {}
+    gt.custom_albumData.images = $.map(widget.find('img.custom_gallery-thumb'),function(v){
+     var url = $(v).attr('data-link'),
+         theater_url = $(v).attr('data-theater-url'),
+         thumb_url = $(v).attr('src')
+     return {'url': url, 
+              'file': {'theater': {url: theater_url},
+                       'thumb': {url: thumb_url}
+                      }
+            }
+    })
+    var cp =  gt.custom_albumData.images[0];
+    currentPic = {"image" : cp, "index" : 0};
+    createThumbStrip();
+
+	  currentPic = currentPic;
+  }
+
+  gt.hasNextImage = function(){
+    return (currentPic.index + 1) <= (gt.custom_albumData.images.length - 1);
+  }
+
+  gt.hasPreviousImage = function(){
+    return (currentPic.index > 0);
+  }
+
+  gt.nextPic = function(){
+    if(loadingProcess == 0){
+      if(gt.hasNextImage()){
+        startLoading();
+        currentPic.image = gt.custom_albumData.images[currentPic.index + 1];
+        currentPic.index = currentPic.index + 1;
+        setMainPic("next");
+      }
+    }
+  }
+  gt.playallPic = function(){
+    if(loadingProcess == 0){
+      mainPicLoading = 1;
+      nextPicLoading = 1;
+      prevPicLoading = 1;
+      if(gt.hasNextImage()){
+        currentPic.image = gt.custom_albumData.images[currentPic.index + 1];
+        currentPic.index = currentPic.index + 1;
+        setMainPic("next");
+      }
+      else{
+        currentPic.image = gt.custom_albumData.images[0];
+        currentPic.index = 0;
+        setMainPic();
+        gt.isTheaterInitialized = false;
+        setTimeout(function(){
+          loadingProcess = 0;
+          nextPicLoading = 0;
+          widget.find('.theaterButton').remove()
+          widget.find("img.custom_gallery-image.gal-prev.gal-inactive").remove();
+          img = widget.find("img.custom_gallery-image.gal-active");
+          img.eq(0).remove();
+        },100)
+      }
+    }
+  }
+
+
+   gt.previousPic = function(){
+    if(loadingProcess == 0){
+      if(gt.hasPreviousImage()) {
+        startLoading();
+        currentPic.image = gt.custom_albumData.images[currentPic.index - 1];
+        currentPic.index = currentPic.index - 1;
+        setMainPic("prev");
+      }
+    }
+   }
+
+   gt.scrollStripLeft = function(){
+      pixels_to_move = parseInt(gt.thumbStrip.css("left")) - (66 * 3);
+      maximum_pixels = (windowWidth / 2) - (66 * (gt.custom_albumData.images.length - 1));
+      if(pixels_to_move < maximum_pixels){
+        pixels_to_move = maximum_pixels;
+      }
+      gt.thumbStrip.css("left",pixels_to_move + "px");
+   }
+
+    gt.scrollStripRight = function(){
+      pixels_to_move = parseInt(gt.thumbStrip.css("left")) + (66 * 3);
+      maximum_pixels = (windowWidth / 2);
+      if(pixels_to_move > maximum_pixels){
+        pixels_to_move = maximum_pixels;
+      }
+      gt.thumbStrip.css("left",pixels_to_move + "px");
+   }
+
+
+   gt.switchTheme = function(){
+     var themeWhiteKlass = "theme-white",
+          nightKlass = "fa fa-circle",
+          dayKlass = "fa fa-circle-o",
+          $body = widget;
+
+      if (!gt.switchBtn.hasClass(themeWhiteKlass)) {
+        gt.switchBtn
+          .addClass(themeWhiteKlass)
+          .find("i")
+          .attr("class", dayKlass);
+
+        $body.addClass(themeWhiteKlass);
+
+      } else {
+        gt.switchBtn
+          .removeClass(themeWhiteKlass)
+          .find("i")
+          .attr("class", nightKlass);
+
+        $body.removeClass(themeWhiteKlass);
+
+      }
+   }
+
+   gt.toggleDescription = function(){
+    $(this).toggleClass("active");
+     gt.descriptionArea.toggleClass("active");
+   }
+
+   var startLoading = function(){
+    loadingProcess = 1;
+    mainPicLoading = 0;
+    nextPicLoading = 0;
+    prevPicLoading = 0;
+    gt.loader.show();
+    loadingInterval = setInterval(stopLoading, 300);
+
+   }
+
+   var stopLoading = function(){
+    if(mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1){
+      clearInterval(loadingInterval);
+      setTimeout(function(){
+        loadingProcess = 0;
+        gt.loader.hide();
+      },100)
+    }
+   }
+
+  var createThumbStrip = function(){
+    if(!gt.isTheaterInitialized){
+      gt.thumbStrip.html('')
+      $.each(gt.custom_albumData.images,function(index, image){
+        var li = $("<li class='custom_gallery-item'></li>"),
+            a = $("<a style=\"cursor: pointer;\"></a>"),
+            img = $("<img class='custom_gallery-thumb' src='' alt='Image Thumb'>");
+          a.on("click",function(){ 
+            startLoading();
+            var old_index = currentPic.index;
+            currentPic.image = gt.custom_albumData.images[index];
+            currentPic.index = index;
+            if(old_index > index){
+              setMainPic("prev",true);
+            }else if(old_index < index){
+              setMainPic("next",true);
+            }
+            return false;
+          })
+          
+          img.attr("src",image.file.thumb.url);
+          img.attr("alt",image.alt_title);
+          li.attr("data-index",index);
+          a.append(img);
+          li.append(a);
+          gt.thumbStrip.append(li);
+      })
+      setThumbNavs();
+    }
+    setMainPic();
+  }
+
+
+  var setThumbNavs = function() {
+    var $thumbNav = gt.stage.find('.custom_gallery-thumb-navs'),
+        $thumb = gt.thumbStrip.find('img'),
+        thumbs = $thumb.length,
+        thumbWidth = $thumb.eq(0).width(),
+        thumbGap = parseInt($thumb.closest('li').css('margin-right'), 10),
+        widthSum = (thumbWidth + thumbGap) * thumbs,
+        margin = widthSum * 0.1,
+        totalWidth = widthSum + margin;
+
+    if (windowWidth < totalWidth) {
+      $thumbNav.addClass('show');
+    }else{
+      $thumbNav.removeClass('show');
+    }
+  };
+  function one_load(img){
+    if (img[0].complete){
+      setTimeout(loaded(img),100)
+    }else{
+      setTimeout(one_load,20)
+    }
+  }
+  function loaded(img){
+    calculateHeight(img);
+    mainPicLoading = 1;
+    img.fadeIn(100);
+  }
+  window.setMainPic = function(direction,selectedFromStrip){
+    var img = null;
+    widget.find('div.custom_gallery-show-original a').eq(0).attr('href',currentPic.image.url)
+    if(direction == null){
+      img = $("<img class='custom_gallery-image gal-active'>");
+      img.hide();
+      img.attr("src", currentPic.image.file.theater.url);
+      gt.imageContainer.append(img);
+      img.one("load", function(){
+        one_load(img)
+      })
+      gt.isTheaterInitialized = true;
+    }else{
+      img =  gt.imageContainer.find(".gal-active");
+      if(selectedFromStrip){
+        gt.imageContainer.find(".gal-" + direction).attr("src",currentPic.image.file.theater.url);  
+      }
+      if(direction == "next"){
+        gt.imageContainer.find(".gal-prev").remove();
+        img.removeClass("gal-active").addClass("gal-prev gal-inactive temp");
+        gt.imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active");
+        gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) - 66) + "px");
+      }else if(direction == "prev"){
+        gt.imageContainer.find(".gal-next").remove();
+        img.removeClass("gal-active").addClass("gal-next gal-inactive temp");
+        gt.imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active");
+        gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) + 66) + "px");
+      }
+      mainPicLoading = 1;
+    }
+    gt.descriptionArea.html("<p>" + currentPic.image.description + "</p>");
+    if(currentPic.image.description == null){
+      gt.descriptionArea.addClass("hide");
+    }else{
+      gt.descriptionArea.removeClass("hide");
+    }
+    if (direction!=null){
+      calculateHeight(gt.imageContainer.find(".gal-active"));
+    }
+    gt.thumbStrip.find("li.active").removeClass("active");
+    gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
+
+    setStripToCenter();
+    setNextPic();
+    setPrevPic();
+  }
+
+  var calculateHeight = function(img){
+    var h = 0,
+        w = 0,
+        new_width = 0;
+    if(!Modernizr.touch){
+      if(typeof currentPic.image.height == "undefined"){
+        h = img.height();
+        currentPic.image.height = h;
+        w = img.width();
+        currentPic.image.width = w;
+      }else{
+        h = currentPic.image.height;
+        w = currentPic.image.width;
+      }
+    }else{
+      h = img.height();
+      w = img.width();
+    }
+    if(h > (windowHeight - 150)){
+      new_width = Math.round((windowHeight - 100) * w / h);
+      new_width = (new_width / windowWidth) * 100;
+      img.width(new_width + "%");
+    }else{
+      if(windowWidth < 770){
+        img.width("90%");
+      }else{
+        img.width("65%");
+      }
+    }
+    if (typeof set_custom_gallery_height != 'undefined'){
+      set_custom_gallery_height(widget)
+    }
+  }
+
+  var setStripToCenter = function(){
+    left = (windowWidth / 2) - (66 * currentPic.index);
+    gt.thumbStrip.css("left",left + "px");
+  }
+
+  var setNextPic = function(){
+    gt.imageContainer.find(".gal-next.temp").remove()
+    if(gt.hasNextImage()) {
+      var obj = gt.custom_albumData.images[currentPic.index + 1],
+          nextImg = $("<img class='custom_gallery-image gal-next gal-inactive'>");
+      nextImg.attr("src",obj.file.theater.url);
+      nextImg.hide();
+      gt.imageContainer.append(nextImg);
+      nextImg.on("load",function(){
+        calculateHeight(nextImg);
+        nextPicLoading = 1;
+        nextImg.fadeIn(100);
+      })
+    }else{
+      nextPicLoading = 1;
+    }
+  }
+
+  var setPrevPic = function(){
+    gt.imageContainer.find(".gal-prev.temp").remove()
+    if(gt.hasPreviousImage()) {
+      var obj = gt.custom_albumData.images[currentPic.index - 1],
+          prevImg = $("<img class='custom_gallery-image gal-prev gal-inactive'>");
+      prevImg.attr("src",obj.file.theater.url);
+      prevImg.hide();
+      gt.imageContainer.prepend(prevImg);
+      prevImg.on("load",function(){
+        calculateHeight(prevImg);
+        prevPicLoading = 1;
+        prevImg.fadeIn(100);
+      })
+    }else{
+      prevPicLoading = 1;
+    }
+  }
+
+  var l = function(x){
+    console.log(x)
+  }
+
+  initialize();
+}
+if (typeof bind_custom_gallery_widget_slide == 'undefined'){
+  function set_custom_gallery_height(widget){
+    var h = widget.find('.custom_gallery-thumb-container').height()+widget.find('.custom_gallery-image.gal-active').height()+widget.find('.custom_gallery-actions').height()+widget.find('.theaterButton').height()+20
+    widget.find('.show-custom_gallery-2.custom_gallery').css('height',h)
+  }
+  var bind_custom_gallery_widget_slide = function(){
+    $('.widget-custom_gallery.widget5').each(function(){
+      CustomGalleryTheaterWidget($(this));
+      $(window).resize(function(){
+        set_custom_gallery_height($(this))
+      });
+    })
+  }
+  $(document).ready(function(){
+    bind_custom_gallery_widget_slide()
+  })
+}
+
+// custom_gallery-image gal-prev gal-inactive

app/assets/javascripts/theater_bak.js

@@ -0,0 +1,261 @@
+var CustomGalleryTheater = function(){
+  var gt = this,
+      currentPic = {},
+      windowHeight = 0,
+      windowWidth = 0;
+      gt.stage = null;
+      gt.closeBtn = null;
+      gt.mainStageImage = null;
+      gt.prevStageImage = null;
+      gt.nextStageImage = null;
+      gt.custom_albumData = {};
+      gt.thumbStrip = null;
+      gt.isTheaterInitialized = false;
+
+  var initialize = function(){
+    gt.stage = $("#custom_gallery-theater-stage");
+    gt.closeBtn = gt.stage.find(".custom_gallery-close");
+    gt.switchBtn = gt.stage.find(".custom_gallery-theme-switch");
+    gt.mainStageImage = gt.stage.find(".gal-active");
+    gt.prevStageImage = gt.stage.find(".gal-prev");
+    gt.nextStageImage = gt.stage.find(".gal-next");
+    gt.thumbStrip = gt.stage.find(".custom_gallery-thumb-wrap");
+    windowHeight = $(window).height();
+    windowWidth = $(window).width();
+    bindHandler();
+    if(window.location.hash != "" && window.location.hash != "#"){
+      var id = window.location.hash.split("#")[1];
+      gt.createTheater("/xhr/custom_galleries/theater/" + id);
+    }
+  }
+
+  var bindHandler = function(){
+    // handler to close the theater
+    gt.closeBtn.on("click",function(){
+      gt.destroyTheater();
+    })
+
+    // handler to show theater
+    $("div[data-list=images] a").on("click",function(){
+      gt.createTheater($(this).attr("href"));
+      return false;
+    })
+
+    // handler to show next image
+     gt.nextStageImage.on("click",function(){
+      if($(this).attr("src") != "#"){
+        gt.nextPic();
+      }
+     })
+     // handler to show prev image
+     gt.prevStageImage.on("click",function(){
+      if($(this).attr("src") != "#"){
+        gt.previousPic();
+      }
+     })
+
+     // handler to go to next image on center image click
+     gt.mainStageImage.on("click",gt.nextPic);
+
+     gt.switchBtn.on("click", function() {
+      var themeWhiteKlass = "theme-white",
+          nightKlass = "fa fa-circle",
+          dayKlass = "fa fa-circle-o",
+          $body = $("body");
+
+      if (!$(this).hasClass(themeWhiteKlass)) {
+        $(this)
+          .addClass(themeWhiteKlass)
+          .find("i")
+          .attr("class", dayKlass);
+
+        $body.addClass(themeWhiteKlass);
+
+      } else {
+        $(this)
+          .removeClass(themeWhiteKlass)
+          .find("i")
+          .attr("class", nightKlass);
+
+        $body.removeClass(themeWhiteKlass);
+
+      }
+
+      });
+
+     //handler for window resize
+     $(window).resize(function(){
+       windowHeight = $(window).height();
+       windowWidth = $(window).width();
+     })
+  }
+
+  var bindKeyHandlers = function(){
+    $(document).on("keyup",function(e){
+      switch(e.keyCode){
+        case 39:
+          gt.nextPic();
+          break;
+        case 37:
+          gt.previousPic();
+          break;
+        case 27:
+          gt.destroyTheater();
+        break;
+      }
+     })
+  }
+
+  var unBindKeyHandlers = function(){
+    $(document).unbind("keypress");
+  }
+
+  gt.destroyTheater = function(){
+    gt.stage.hide();
+    $("body").removeClass("custom_gallery-mode-on");
+    unBindKeyHandlers();
+    window.location.hash = "";
+  }
+
+  gt.createTheater = function(link){
+    gt.stage.show();
+    $("body").addClass("custom_gallery-mode-on");
+    bindKeyHandlers();
+    if(!gt.isTheaterInitialized){
+      $.ajax({
+        url : link,
+        dataType : "json",
+        type : "get"
+      }).done(function(data){
+        gt.custom_albumData = data.data;
+        var cp =  gt.custom_albumData.images.filter(function(x){return x._id == gt.custom_albumData.image})[0];
+        currentPic = {"image" : cp, "index" : gt.custom_albumData.images.indexOf(cp)};
+        createThumbStrip();
+      })
+    }else{
+      var id = link.split("/")[4],
+          cp =  gt.custom_albumData.images.filter(function(x){return x._id == id})[0];
+      currentPic = {"image" : cp, "index" : gt.custom_albumData.images.indexOf(cp)};
+      createThumbStrip();
+    }
+  }
+
+  gt.nextPic = function(){
+    if((currentPic.index + 1) <= (gt.custom_albumData.images.length - 1)){
+      currentPic.image = gt.custom_albumData.images[currentPic.index + 1];
+      currentPic.index = currentPic.index + 1;
+      setMainPic();
+    }
+  }
+
+   gt.previousPic = function(){
+    if(currentPic.index > 0) {
+      currentPic.image = gt.custom_albumData.images[currentPic.index - 1];
+      currentPic.index = currentPic.index - 1;
+      setMainPic();
+    }
+   }
+
+  var createThumbStrip = function(){
+    if(!gt.isTheaterInitialized){
+      $.each(gt.custom_albumData.images,function(index, image){
+        var li = $("<li class='custom_gallery-item'></li>"),
+            a = $("<a href=''></a>"),
+            img = $("<img class='custom_gallery-thumb' src='' alt='Image Thumb'>");
+          a.on("click",function(){ 
+            currentPic.image = gt.custom_albumData.images[index];
+            currentPic.index = index;
+            setMainPic();
+            return false;
+          })
+          img.attr("src",image.file.thumb.url);
+          img.attr("alt",image.alt_title);
+          li.attr("data-index",index);
+          a.append(img);
+          li.append(a);
+          gt.thumbStrip.append(li);
+      })
+      gt.isTheaterInitialized = true;
+    }
+    setMainPic();
+  }
+
+  var setMainPic = function(){
+    var obj = currentPic.image;
+    gt.mainStageImage.fadeOut(100,function(){
+      gt.mainStageImage.attr("src",obj.file.theater.url);
+      gt.mainStageImage.attr("alt",obj.alt_title);
+      gt.mainStageImage.one("load",function(){
+        var h = 0,
+            w = 0,
+            new_width = 0;
+        if(typeof currentPic.image.height == "undefined"){
+          h = gt.mainStageImage.height();
+          currentPic.image.height = h;
+          w = gt.mainStageImage.width();
+          currentPic.image.width = w;
+        }else{
+          h = currentPic.image.height;
+          w = currentPic.image.width;
+        }
+        if(h > (windowHeight - 100)){
+          new_width = Math.round((windowHeight - 100) * w / h);
+          new_width = (new_width / windowWidth) * 100;
+          gt.mainStageImage.width(new_width + "%");
+        }else{
+          if(windowWidth < 770){
+           gt.mainStageImage.width("90%");
+          }else{
+            gt.mainStageImage.width("65%");
+          }
+        }
+        gt.mainStageImage.fadeIn(100);
+      })
+    });
+    gt.thumbStrip.find("li.active").removeClass("active");
+    gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
+    changeUrl();
+    setNextPic();
+    setPrevPic();
+  }
+
+  var changeUrl = function(){
+    window.location.hash = currentPic.image._id
+  }
+
+  var setNextPic = function(){
+    gt.nextStageImage.attr("src","#");
+    if((currentPic.index + 1) <= (gt.custom_albumData.images.length - 1)) {
+      gt.nextStageImage.hide();
+      var obj = gt.custom_albumData.images[currentPic.index + 1];
+      gt.nextStageImage.attr("src",obj.file.theater.url);
+      gt.nextStageImage.on("load",function(){
+        gt.nextStageImage.show();
+      });
+    }else{
+      gt.nextStageImage.hide();
+    }
+  }
+
+  var setPrevPic = function(){
+    gt.prevStageImage.attr("src","#");
+    if(currentPic.index > 0) {
+      gt.prevStageImage.hide();
+      var obj = gt.custom_albumData.images[currentPic.index - 1];
+      gt.prevStageImage.attr("src",obj.file.theater.url);
+      gt.prevStageImage.on("load",function(){
+        gt.prevStageImage.show();
+      });
+    }else{
+      gt.prevStageImage.hide();
+    }
+  }
+
+  var l = function(x){
+    console.log(x)
+  }
+
+  $(document).ready(function(){
+    initialize();
+  })
+}

app/assets/javascripts/upload.js

@@ -0,0 +1,39 @@
+//https://github.com/blueimp/jQuery-File-Upload
+
+$(function () {
+
+    'use strict';
+    // Initialize the jQuery File Upload widget:
+    $('#fileupload').fileupload({
+        acceptFileTypes:/(\.|\/)(jpe?g|png)$/i,
+        headers:{
+            'X-CSRF-Token': $('meta[name="csrf-token"]').attr("content")
+        }
+    });
+	$('#fileupload').bind("fileuploadadd",function(e,data){$(".fileupload-content").css("background-image","none");})
+    // Load existing files:
+/*    $.getJSON($('#fileupload form').prop('action'),{custom_albumid:pagevars['id']}, function (files) {
+        var fu = $('#fileupload').data('fileupload');
+        fu._adjustMaxNumberOfFiles(-files.length);
+        fu._renderDownload(files)
+            .appendTo($('#fileupload .files'))
+            .fadeIn(function () {
+                // Fix for IE7 and lower:
+                $(this).show();
+            });
+    });
+*/
+    // Open download dialogs via iframes,
+    // to prevent aborting current uploads:
+    $('#fileupload .files').delegate(
+        'a:not([target^=_blank])',
+        'click',
+        function (e) {
+            e.preventDefault();
+            $('<iframe style="display:none;"></iframe>')
+                .prop('src', this.href)
+                .appendTo('body');
+        }
+    );
+
+});

app/assets/stylesheets/cropper.css

@@ -0,0 +1,304 @@
+/*!
+ * Cropper.js v1.5.5
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2019-08-04T02:26:27.232Z
+ */
+
+.cropper-container {
+  direction: ltr;
+  font-size: 0;
+  line-height: 0;
+  position: relative;
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.cropper-container img {
+  display: block;
+  height: 100%;
+  image-orientation: 0deg;
+  max-height: none !important;
+  max-width: none !important;
+  min-height: 0 !important;
+  min-width: 0 !important;
+  width: 100%;
+}
+
+.cropper-wrap-box,
+.cropper-canvas,
+.cropper-drag-box,
+.cropper-crop-box,
+.cropper-modal {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.cropper-wrap-box,
+.cropper-canvas {
+  overflow: hidden;
+}
+
+.cropper-drag-box {
+  background-color: #fff;
+  opacity: 0;
+}
+
+.cropper-modal {
+  background-color: #000;
+  opacity: 0.5;
+}
+
+.cropper-view-box {
+  display: block;
+  height: 100%;
+  outline: 1px solid #39f;
+  outline-color: rgba(51, 153, 255, 0.75);
+  overflow: hidden;
+  width: 100%;
+}
+
+.cropper-dashed {
+  border: 0 dashed #eee;
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+}
+
+.cropper-dashed.dashed-h {
+  border-bottom-width: 1px;
+  border-top-width: 1px;
+  height: calc(100% / 3);
+  left: 0;
+  top: calc(100% / 3);
+  width: 100%;
+}
+
+.cropper-dashed.dashed-v {
+  border-left-width: 1px;
+  border-right-width: 1px;
+  height: 100%;
+  left: calc(100% / 3);
+  top: 0;
+  width: calc(100% / 3);
+}
+
+.cropper-center {
+  display: block;
+  height: 0;
+  left: 50%;
+  opacity: 0.75;
+  position: absolute;
+  top: 50%;
+  width: 0;
+}
+
+.cropper-center::before,
+.cropper-center::after {
+  background-color: #eee;
+  content: ' ';
+  display: block;
+  position: absolute;
+}
+
+.cropper-center::before {
+  height: 1px;
+  left: -3px;
+  top: 0;
+  width: 7px;
+}
+
+.cropper-center::after {
+  height: 7px;
+  left: 0;
+  top: -3px;
+  width: 1px;
+}
+
+.cropper-face,
+.cropper-line,
+.cropper-point {
+  display: block;
+  height: 100%;
+  opacity: 0.1;
+  position: absolute;
+  width: 100%;
+}
+
+.cropper-face {
+  background-color: #fff;
+  left: 0;
+  top: 0;
+}
+
+.cropper-line {
+  background-color: #39f;
+}
+
+.cropper-line.line-e {
+  cursor: ew-resize;
+  right: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-n {
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+  top: -3px;
+}
+
+.cropper-line.line-w {
+  cursor: ew-resize;
+  left: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-s {
+  bottom: -3px;
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+}
+
+.cropper-point {
+  background-color: #39f;
+  height: 5px;
+  opacity: 0.75;
+  width: 5px;
+}
+
+.cropper-point.point-e {
+  cursor: ew-resize;
+  margin-top: -3px;
+  right: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-n {
+  cursor: ns-resize;
+  left: 50%;
+  margin-left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-w {
+  cursor: ew-resize;
+  left: -3px;
+  margin-top: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-s {
+  bottom: -3px;
+  cursor: s-resize;
+  left: 50%;
+  margin-left: -3px;
+}
+
+.cropper-point.point-ne {
+  cursor: nesw-resize;
+  right: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-nw {
+  cursor: nwse-resize;
+  left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-sw {
+  bottom: -3px;
+  cursor: nesw-resize;
+  left: -3px;
+}
+
+.cropper-point.point-se {
+  bottom: -3px;
+  cursor: nwse-resize;
+  height: 20px;
+  opacity: 1;
+  right: -3px;
+  width: 20px;
+}
+
+@media (min-width: 768px) {
+  .cropper-point.point-se {
+    height: 15px;
+    width: 15px;
+  }
+}
+
+@media (min-width: 992px) {
+  .cropper-point.point-se {
+    height: 10px;
+    width: 10px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .cropper-point.point-se {
+    height: 5px;
+    opacity: 0.75;
+    width: 5px;
+  }
+}
+
+.cropper-point.point-se::before {
+  background-color: #39f;
+  bottom: -50%;
+  content: ' ';
+  display: block;
+  height: 200%;
+  opacity: 0;
+  position: absolute;
+  right: -50%;
+  width: 200%;
+}
+
+.cropper-invisible {
+  opacity: 0;
+}
+
+.cropper-bg {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+}
+
+.cropper-hide {
+  display: block;
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+
+.cropper-hidden {
+  display: none !important;
+}
+
+.cropper-move {
+  cursor: move;
+}
+
+.cropper-crop {
+  cursor: crosshair;
+}
+
+.cropper-disabled .cropper-drag-box,
+.cropper-disabled .cropper-face,
+.cropper-disabled .cropper-line,
+.cropper-disabled .cropper-point {
+  cursor: not-allowed;
+}

app/assets/stylesheets/custom_gallery.css

@@ -0,0 +1,554 @@
+#orbit_custom_gallery {
+	margin: 0;
+	padding: 0 0 10px;
+	list-style: none;
+}
+#orbit_custom_gallery .rgcustom_album {
+	position: relative;
+	float: left;
+	margin: 5px;
+	padding: 5px;
+	width: 200px;
+	background: #FFFFFF;
+	overflow: hidden;
+	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
+	-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
+	box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
+	-o-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
+	-webkit-transition-property: left, right, top;
+	-moz-transition-property: left, right, top;
+	-ms-transition-property: left, right, top;
+	-o-transition-property: left, right, top;
+	transition-property: left, right, top;
+}
+#orbit_custom_gallery .rgcustom_album:hover {
+	box-shadow: 0px 0px 5px rgba(0,0,0,.2);
+}
+#orbit_custom_gallery .rgcustom_album > a {
+	position: relative;
+	display: block;
+	overflow: hidden;
+	margin: 0 0 10px;
+	width: 200px;
+	height: 200px;
+	-webkit-transition: all .2s linear;
+	   -moz-transition: all .2s linear;
+		 -o-transition: all .2s linear;
+			transition: all .2s linear;
+}
+#orbit_custom_gallery .rgcustom_album a img {
+	max-width: none;
+}
+#orbit_custom_gallery .rgcustom_album:hover a img {
+	-webkit-filter: blur(2px);
+}
+#orbit_custom_gallery .rgcustom_album > a:after {
+	content: "";
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	display: block;
+	margin: 0;
+	background-color: #000000;
+	opacity: .0;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	filter: alpha(opacity=0);
+	-webkit-transition: all .2s linear;
+	   -moz-transition: all .2s linear;
+		 -o-transition: all .2s linear;
+			transition: all .2s linear;
+}
+#orbit_custom_gallery .rgcustom_album:hover a:after {
+	opacity: .4;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+	filter: alpha(opacity=40);
+}
+#orbit_custom_gallery .rgcustom_album a .custom_albumname {
+	position: absolute;
+	bottom: 0;
+	margin: 0;
+	padding: 10px;
+	color: #F2F2F2;
+	text-shadow: 0px -1px 0 rgba(0,0,0,0.4);
+	letter-spacing: -0.5px;
+	font-size: 30px;
+	font-family: 'Playfair Display SC', sans-serif;
+	line-height: 28px;
+	z-index: 1;
+	opacity: .0;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	filter: alpha(opacity=0);
+	-webkit-transition: all .2s linear;
+	   -moz-transition: all .2s linear;
+		 -o-transition: all .2s linear;
+			transition: all .2s linear;
+}
+#orbit_custom_gallery .rgcustom_album:hover a .custom_albumname {
+	opacity: 1;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	filter: alpha(opacity=100);
+	-webkit-transition: all .2s linear;
+	   -moz-transition: all .2s linear;
+		 -o-transition: all .2s linear;
+			transition: all .2s linear;
+}
+#orbit_custom_gallery .rgcustom_album .custom_gallery_info {
+	margin: 0;
+	list-style: none;
+}
+#orbit_custom_gallery .rgcustom_album .custom_gallery_info li {
+	display: inline-block;
+	float: left;
+	color: #777777;
+	font-size: 1.2em;
+	line-height: 20px;
+	cursor: pointer;
+}
+#orbit_custom_gallery .rgcustom_album .custom_gallery_info li > a {
+	display: inline-block;
+	margin-left: 5px;
+	color: #777777;
+}
+#orbit_custom_gallery .rgcustom_album .custom_gallery_info li:hover > a {
+	color: #E41B2B;
+	text-decoration: none;
+}
+#orbit_custom_gallery .rgcustom_album .custom_gallery_info li:hover {
+	color: #0088CC;
+}
+#orbit_custom_gallery .rgcustom_album .custom_gallery_info li .icons-tag {
+	margin-left: 3px;
+}
+#orbit_custom_gallery .rgcustom_album .custom_gallery_info li.custom_albumcateg {
+	float: right;
+	overflow: hidden;
+	max-width: 125px;
+	text-align: right;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+#orbit_custom_gallery .rgcustom_album .custom_gallery_info li.view {
+	overflow: hidden;
+	max-width: 50px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+#orbit_custom_gallery .rgcustom_album .custom_albumtag {
+	display: none;
+	overflow: hidden;
+	margin: 0;
+}
+
+
+/* CustomGallery Body */
+div.rgbody{
+    margin-bottom:50px;
+}
+.rgbody .custom_gallery-info {
+	padding: 0 5px;
+}
+.rgbody .custom_gallery-info h3 {
+	margin: 5px 0 0;
+	color: #333;
+	text-shadow: 0 1px 0 #ffffff;
+	font-family: 'Playfair Display SC', sans-serif;
+}
+.rgbody .custom_gallery-info .muted {
+	font-family: 'Raleway', sans-serif;
+}
+
+#imgholder {
+	margin: 0;
+	padding: 0 0 10px;
+	list-style: none;
+}
+.rgcustom_album .photo_edit{
+    right: 100%;
+    transition-duration: 0.5s;
+}
+.rgcustom_album:hover .photo_edit{
+    transform: translate(100%);
+}
+#imgholder .rgcustom_album {
+	position: relative;
+	float: left;
+	margin: 5px;
+	padding: 5px;
+	width: 200px;
+	background: #FFFFFF;
+	overflow: hidden;
+	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
+	   -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
+			box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
+		 -o-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
+	-webkit-transition-property: left, right, top;
+	   -moz-transition-property: left, right, top;
+		-ms-transition-property: left, right, top;
+		 -o-transition-property: left, right, top;
+			transition-property: left, right, top;
+}
+#imgholder .rgcustom_album.active {
+	background-color: #51a351;
+}
+#imgholder .rgcustom_album.active-single {
+	background-color: #F89406;
+}
+#imgholder .rgcustom_album .photo-action {
+	margin: 0;
+	list-style: none;
+	left: 5px;
+	right: 5px;
+	height: 0;
+	position: absolute;
+	background-color: #FFF;
+	bottom: 5px;
+	opacity: .9;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+	filter: alpha(opacity=90);
+    -webkit-transition: all .2s linear;
+       -moz-transition: all .2s linear;
+         -o-transition: all .2s linear;
+            transition: all .2s linear;
+}
+#imgholder .rgcustom_album:hover .photo-action {
+	padding: 5px;
+	height: 30px;
+}
+#imgholder .rgcustom_album .photo-action li {
+	display: inline-block;
+	float: left;
+	color: #777;
+	font-size: 11px;
+	line-height: 30px;
+	cursor: pointer;
+	width: 33%;
+	text-align: center;
+	font-size: 1.2em;
+}
+#imgholder .rgcustom_album .photo-action a {
+	color: #777;
+	display: block;
+	text-decoration: none;
+	width: 100%;
+	height: 100%;
+}
+#imgholder .rgcustom_album .photo-action li:hover a {
+	color: #08C;
+}
+#imgholder .rgcustom_album .photo-action .icons-star {
+	color: #F8A900;
+	font-size: 1.4em;
+	line-height: 1.4em;
+}
+#imgholder .rgcustom_album a {
+	display: block;
+	overflow: hidden;
+	margin: 0;
+	width: 200px;
+	height: 200px;
+	-webkit-transition: all .2s linear;
+	   -moz-transition: all .2s linear;
+		 -o-transition: all .2s linear;
+			transition: all .2s linear;
+}
+#imgholder .rgcustom_album a img {
+	max-width: none;
+}
+
+#imgholder .rgcustom_album .check {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 40px;
+	height: 40px;
+}
+#imgholder .rgcustom_album .check:after {
+	font-family: FontAwesome;
+	font-weight: normal;
+	font-style: normal;
+	color: #F2F2F2;
+	text-decoration: inherit;
+	content: "\f00c";
+	line-height: 25px;
+	text-indent: 20px;
+	font-size: 1.3em;
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 0px;
+	height: 0px;
+	border-style: solid;
+	border-width: 0 40px 40px 0;
+	border-color: transparent #FFF transparent transparent;	
+}
+#imgholder .rgcustom_album.active .check:after {
+	color: #FFF;
+	border-color: transparent #51a351 transparent transparent;
+}
+#imgholder .rgcustom_album.active-single .check:after {
+	color: #FFF;
+	border-color: transparent #F89406 transparent transparent;
+}
+#imgholder .rgcustom_album input[type="checkbox"] {
+	position: absolute;
+	top: 0;
+	right: 0;
+	z-index: 3;
+	display: block;
+	margin: 0;
+	width: 100%;
+	height: 100%;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+	opacity: 0;
+}
+
+/* Page Silde */
+#view-photo-tags .phtot-tags {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+#view-photo-tags .phtot-tags li {
+	margin: 0 5px 5px 0;
+	white-space: nowrap;
+}
+
+/* Dialog */
+.modal-body {
+	min-height: 80px;
+	line-height: 80px;
+	text-align: center;
+}
+.modal-body .spinning {
+	display: none;
+	position: absolute;
+	width: 70px;
+	height: 70px;
+	top: 50%;
+	left: 50%;
+	margin: -35px 0 0 -35px;
+}
+
+/* File Upload */
+#upload-panel {
+	clear: both;
+}
+#upload-panel iframe {
+	width: 100%;
+	border: none;
+}
+#fileupload {
+	position: relative;
+	display: none;
+	clear: both;
+	overflow: hidden;
+	margin: 40px 0 15px;
+	height: 254px;
+	border: 1px solid #d4d4d4;
+	border-radius: 4px;
+	background-color: #FDFDFD;
+	/*-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .15) inset;
+			box-shadow: 0px 0px 10px rgba(0, 0, 0, .15) inset;*/
+}
+#fileupload table {
+	margin: 0;
+}
+#fileupload .fileupload-buttonbar .navbar {
+	margin-bottom: 0;
+}
+#fileupload .fileupload-buttonbar .navbar .add-photo {
+	border: none;
+	border-right: 1px solid #d4d4d4;
+	background-color: transparent;
+	padding: 10px 15px 10px;
+	color: #777777;
+	text-decoration: none;
+	text-shadow: 0 1px 0 #ffffff;
+}
+#fileupload .fileupload-buttonbar .navbar .add-photo:hover {
+	color: #333333;
+	text-decoration: none;
+	background-color: #EDEDED;
+}
+#fileupload .fileupload-buttonbar .navbar .fileinput-button {
+	position: relative;
+	overflow: hidden;
+}
+#fileupload .fileupload-buttonbar .navbar .fileinput-button input {
+	position: absolute;
+	top: 0;
+	right: 0;
+	margin: 0;
+	font-size: 23px;
+	opacity: 0;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	filter: alpha(opacity=0);
+	cursor: pointer;
+	-webkit-transform: translate(-300px, 0) scale(4);
+	   -moz-transform: translate(-300px, 0) scale(4);
+		-ms-transform: translate(-300px, 0) scale(4);
+		 -o-transform: translate(-300px, 0) scale(4);
+			transform: translate(-300px, 0) scale(4);
+	direction: ltr;
+}
+#fileupload .fileupload-buttonbar .navbar-inner {
+	border-width: 0 0 1px;
+	border-radius: 4px 4px 0 0;
+	padding: 0;
+}
+
+#fileupload .fileupload-progress .progress {
+	position: absolute;
+	right: 0;
+	left: 0;
+	margin-bottom: 0;
+	height: 5px;
+	border-radius: 0;
+	background-color: transparent;
+	background-image: none;
+}
+#fileupload .fileupload-progress .progress-success.progress-striped .bar {
+	background-color: #0088CC;
+}
+#fileupload .fileupload-progress .progress-extended {
+	position: absolute;
+	top: 1px;
+	right: 0;
+	padding-right: 15px;
+	color: #0088CC;
+	text-align: right;
+	text-shadow: 0 1px 0 #ffffff;
+	letter-spacing: -0.1em;
+	font-size: 12px;
+	font-family: 'Varela Round', sans-serif;
+	line-height: 40px;
+}
+#fileupload .fileupload-buttonbar {
+	position: relative;
+	z-index: 3;
+}
+#fileupload #dropzone {
+	margin: 15px 10px 10px;
+	padding: 30px;
+	text-align: center;
+	font-size: 2em;
+	font-family: 'Raleway';
+	line-height: 1.2em;
+	color: #e4e4e4;
+}
+#fileupload #dropzone div[data-icons] {
+	font-size: 4em;
+	height: 70px;
+	padding-top: 30px;
+	text-shadow: 0px -1px 0px #ececec;
+	color: #f5f5f5;
+}
+#fileupload #dropzone.drop {
+	position: absolute;
+	top: 37px;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	border: 2px dashed #0088CC;
+	border-radius: 10px;
+	color: #0088CC;
+	background-color: #FFFFFF;
+	z-index: 0;
+}
+#fileupload #dropzone.fade {
+	opacity: .3;
+}
+#fileupload #dropzone.in {
+	opacity: .7;
+	z-index: 2;
+	border-color: #faa732;
+	color: #faa732;
+}
+#fileupload #dropzone.drop div[data-icons] {
+	text-shadow: 0px -1px 0px #0c5f80;
+	color: #0088CC;
+}
+#fileupload #dropzone.in div[data-icons] {
+	text-shadow: 0px -1px 0px #a28a10;
+	color: #faa732;
+}
+#fileupload #file-list {
+	position: relative;
+	z-index: 1;
+	height: 209px;
+	margin: 2px 0;
+}
+#fileupload #file-list .pane {
+	margin-right: 2px;
+}
+#fileupload #file-list .files {
+	margin: 0;
+	padding: 10px 14px 10px 10px;
+	list-style: none;
+}
+#fileupload #file-list .files > li {
+	padding: 10px;
+}
+#fileupload #file-list .files > li:nth-child(even) {
+	background-color: #e9e9e9;
+	border-radius: 3px;
+}
+#fileupload #file-list .files ul {
+	position: relative;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+#fileupload #file-list .files ul li {
+	float: left;
+}
+#fileupload #file-list .files ul li.action-bnt {
+	float: right;
+}
+#fileupload #file-list .preview {
+	width: 80px;
+	min-height: 1px;
+	margin-right: 10px;
+	text-align: center;
+}
+#fileupload #file-list .name {
+	width: 150px;
+	max-width: 250px;
+	margin-left: 15px;
+}
+#fileupload #file-list .progress {
+	position: absolute;
+	left: -5px;
+	right: -5px;
+	bottom: -5px;
+	margin-bottom: 0;
+	height: 5px;
+	box-shadow: none;
+	background-color: transparent;
+	background-image: none;
+}
+#fileupload #file-list .size {
+	width: 80px;
+}
+#fileupload #file-list .action-bnt {
+	text-align: right;
+}
+.cke_contents.cke_reset{
+	position: relative;
+}
+.order-edit-notification{
+	background-color: #ffffd5;
+	z-index: 10;
+  display: none;
+  height: 25px;
+  margin-left: 40%;
+  position: fixed;
+  text-align: center;
+  margin-top: 5px;
+  top: 85px;
+  width: 250px;
+  font-size: 13px;
+}

app/assets/stylesheets/custom_gallery_card.css

@@ -0,0 +1,91 @@
+.custom_gallery.card-group .row {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+}
+.custom_gallery.card-group .card-back {
+  transform: rotateY(180deg) translateX(-100%);
+  position: absolute;
+  backface-visibility: hidden;
+  transition: transform 300ms;
+  transition-timing-function: linear;
+  display: block;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  background: white;
+  color: black;
+}
+.custom_gallery.card-group .card.card-flip.h-100:nth-child(4n) {
+  margin-right: 0em;
+}
+
+.custom_gallery.card-group .card.card-flip.h-100 {
+  position: relative;
+  overflow: hidden;
+  width: 25%;
+  width: calc( 25% - 0.75em);
+  background: white;
+  margin-right: 1em;
+  margin-bottom: 1em;
+}
+@media (max-width: 768px){
+  .custom_gallery.card-group .card.card-flip.h-100 {
+    width: 50%;
+    width: calc( 50% - 0.5em);
+  }
+  .custom_gallery.card-group .card.card-flip.h-100:nth-child(2n) {
+    margin-right: 0em;
+  }
+}
+@media (max-width: 575px){
+  .custom_gallery.card-group .card.card-flip.h-100 {
+    width: 100%;
+    margin-right: 0em;
+  }
+}
+.custom_gallery.card-group h3.card-title {
+  padding: 0.5em;
+  margin: 0;
+  font-size: 1.2em;
+}
+.custom_gallery.card-group .card-front{
+	backface-visibility: hidden;
+  width: 100%;
+  height: 100%;
+}
+.custom_gallery.card-group .card.card-flip.h-100:hover .card-back {
+  transform: rotateY(0deg);
+}
+.custom_gallery.card-group .card-button-group{
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  display: flex;  
+}
+.custom_gallery.card-group .card-body{
+  width: 100%;
+  position: inherit;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.custom_gallery.card-group .card-button-group a {
+  color: #fff;
+  display: block;
+  background: #6c757d;
+  padding: 0.5em;
+  width: 2.3em;
+  height: 2.3em;
+  margin-right: 0.1em;
+  border-radius: 0;
+}
+.custom_gallery.card-group .card-button-group a:hover {
+  color: #fff;
+  background-color: #5a6268;
+  border-color: #545b62;
+}
+.custom_gallery.card-group .card-button-group a:focus {
+  color: #fff;
+  outline: 0.1em dotted !important;
+}

app/assets/stylesheets/custom_gallery_frontend.css

@@ -0,0 +1,332 @@
+.rg, .rgp {
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+}
+.rg input, .rgp input, .rg textarea, .rgp textarea { 
+	resize: none;
+	margin: 0;
+	display: block;
+	font-size: 13px;
+	}
+.rgp textarea { overflow: auto; }
+.rg a, .rgp a {
+	text-decoration: none;
+	outline: none;
+	}
+.rg a:hover {  }
+
+/*.rg img { display: block; border: none; }*/
+	
+.rgmask { background: #000; width: 100%; position: fixed; top: 0; left: 0; }
+
+.rgui { 
+	display: inline-block;
+	cursor: pointer;
+	}
+.rghead,  .rgbody { overflow: hidden; }
+.rghead {
+	padding: 10px 0;
+	}
+.rgtitle {
+	color: #333;
+	text-shadow: 0 1px 0 #ddd;
+	font-size: 2em;
+	padding: 0 8px;
+	}
+.rgbody {
+	
+	}
+.rgfn { overflow: hidden; }
+.rgcustom_album, .rgphoto { float: left; margin: 0 10px 24px 0; }
+.rgcustom_album {
+	margin: 0 16px 16px 0;
+	padding: 6px;
+	width: 138px;
+	height: 220px;
+	border: solid 1px #ccc;
+
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+}
+.rgcustom_album > a {
+	display: block;
+	float: none;
+	margin: -6px -6px 0 -6px;
+}
+.rgcustom_album img {		
+	transition: all, 0.5s ease;
+	-webkit-transition: all, 0.5s ease;
+	-moz-transition: all 0.5s ease;
+	-ms-transition: all, 0.5s ease;
+	}
+.rgphoto {  }
+.rgphoto a {
+	display: block;
+
+	transition: all, 0.3s ease;
+	-webkit-transition: all, 0.3s ease;
+	-moz-transition: all, 0.3s ease;
+}
+.rgphoto a:hover img { 
+	opacity: 0.85;
+}
+.rgphoto img, .rgphoto_edit img { 
+	/*display: block;*/
+
+	transition: all, 0.3s ease;
+	-webkit-transition: all, 0.3s ease;
+	-moz-transition: all, 0.3s ease;
+	}
+.rgcustom_album .custom_albumname {
+	font-size: 1.25em;
+	/*line-height: ;*/
+	margin: 6px 0;
+	display: block;
+	height: 45px;
+	overflow: hidden;
+	transition: background 0.3s ease;
+	-webkit-transition: background 0.3s ease;
+	-moz-transition: background 0.3s ease;
+	-ms-transition: background 0.3s ease;
+	}
+.rgcustom_album a:hover img { 
+	opacity: 0.85;
+	}
+.rgcustom_album .categoryname {}
+.rgcustom_album .tagnames {
+	display: block;
+	margin-top: 8px;
+	padding-top: 8px;
+	line-height: 22px;
+	height: 22px;
+	overflow: hidden;
+	border-top: solid 1px #ccc;
+	color: #666;
+}
+
+.taglist {
+	padding: 10px 0;
+}
+.taglist_title {
+	font-size: 1.5em;
+	margin: 0 0 10px 0;
+}
+.taglist ul {
+	padding: 10px 0;
+	border-top: solid 1px #ddd;
+	overflow: hidden;
+}
+.taglist li {
+	float: left;
+	margin: 0 8px 8px 0;
+}
+
+.rgp .rgtitle { margin: 0 0 10px 0; }
+
+
+/* Ruling Slide */
+.rslide {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	overflow: hidden;
+	background: #222;
+	clear: both;
+	/*z-index: 99;*/
+	min-height: 250px;
+
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	}
+.rslide.fullscreen { position: fixed; z-index: 99; }
+.rslide.fullscreen .comp img{
+	width: auto;
+}
+.rslideinside {
+	}
+.comp  {
+	width: 100%;
+	height: auto;
+	overflow: hidden;
+	position: relative;
+
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	}
+.comp img{ display: block; width: 100%; height: auto; margin: 0 auto; cursor: pointer; min-height: 250px; }
+.comp .full{ width: auto; height: auto; max-width: 100%; max-height: 100%; }
+.rslidenav { 
+	position: absolute;
+	top: 50%;
+	left: 0;
+	right: 0;
+	margin-top: -35px;
+	}
+.rslidenav a {
+	position: absolute;
+	display: block;
+	width: 30px;
+	height: 40px;
+	overflow: hidden;
+	text-indent: -999px;
+	background: #000 0 center url(../../../assets/custom_gallery/slidenav.png) no-repeat;
+	background: rgba(0,0,0,0.9) 0 0 url(../../../assets/custom_gallery/slidenav.png) no-repeat;
+	
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	-ms-transition: all 0.3s ease;
+	}
+.rslidenav a:hover { 
+	background-color: #fff;
+	background-color: rgba(255,255,255,0.9);
+	}
+.rslidenav .navP { left: 0; border-radius: 0 4px 4px 0; background-position: 0 -40px; }
+.rslidenav .navN { right: 0; border-radius: 4px 0 0 4px; background-position: -30px 0; }
+.rslidenav a.navP:hover  { background-position: -30px -40px; }
+.rslidenav a.navN:hover  { background-position: 0 0; }
+.slidectrl {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	width: 100%;
+	height: 30px;
+	background: #000 left top url(../../../assets/custom_gallery/slidetitlebg.png) repeat-x;
+	background: rgba(0,0,0,0.9) left top url(../../../assets/custom_gallery/slidetitlebg.png) repeat-x;
+	/*z-index: 999;*/
+	}
+.slidectrl a {
+	display: block;
+	float: right;
+	text-indent: -9999px;
+	overflow: hidden;
+	width: 30px;
+	height: 30px;
+	background: transparent 0 0 url(../../../assets/custom_gallery/slideui.gif) no-repeat;
+	border-left: solid 1px #222;
+	}
+.slidectrl a.togglelist { background-position: 0 -30px; }
+.slidectrl a.togglescreen { background-position: 0 -90px; }
+.slidectrl a.toinline { background-position: -30px 0; }
+.slidectrl a.sharebt { background-position: -30px -30px; }
+.slidectrl a.browserfullscreen { display:none;}
+.slidectrl a.slidestop { background-position: 0 -60px; }
+.fullscreen .slidectrl a.togglescreen { background-position: -30px -90px; }
+.browserFullScreen .slidectrl a.browserfullscreen { background-position: -30px 0; }
+.browserFullScreen .togglescreen { display: none; }
+.slideinfo {
+	height: 30px;
+	line-height: 30px;
+	color: #fff;
+	font-size: 13px;
+	overflow: hidden;
+	}
+.slideinfo .info { padding: 0 0 0 6px; text-transform: uppercase; }
+.slideinfo span.info { color: #ccc; text-transform: none; }
+
+.slidelist {
+	position: absolute;
+	bottom: 30px;
+	z-index: 98;
+	width: 100%;
+	height: 0;
+	overflow: auto;
+	overflow-x: hidden;
+	background: transparent 0 0 url(../../../assets/custom_gallery/slidelistbg.png);
+	}
+.slidelist ul { 
+	margin: 0 auto;
+	padding: 10px 0 10px 10px;
+	list-style: none;
+	}
+.slidelist li {
+	display: inline-block;
+	margin: 0 10px 10px 0;
+	}
+.slidelist a {
+	border: solid 2px #fff;
+	display: block;
+	width: 120px;
+	height: 96px;
+	position: relative;
+	
+	box-shadow: 0 0 6px rgba(0,0,0,0.7);
+	-webkit-box-shadow: 0 0 6px rgba(0,0,0,0.7);
+	-moz-box-shadow: 0 0 6px rgba(0,0,0,0.7);
+	-ms-box-shadow: 0 0 6px rgba(0,0,0,0.7);
+	}
+.slidelist a.playall {
+	border: none;
+	width: 80px;
+	height: 32px;
+	margin: 31px 0 0 22px;
+	background: transparent 0 0 url(../../../assets/custom_gallery/playall.png) no-repeat;
+	
+	box-shadow: none;
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+	-ms-box-shadow: none;
+	}
+.slidelist a.playall:hover { background-position: 0 -32px; }
+#li_play_all { width: 124px; height: 94px; }
+.slidelist img { 
+	margin: 0;
+	background: #fff;
+	display: block;
+	
+	transition: all 0.2s ease;
+	-webkit-transition: all 0.2s ease;
+	-moz-transition: all 0.2s ease;
+	-ms-transition: all 0.2s ease;
+	}
+.slidelist a:hover img {
+	padding: 4px;
+	margin: -4px;
+	}
+
+.dm {
+	background: #fff;
+	border: solid 1px #a4a4a4;
+	border-right-color: #666;
+	position: absolute;
+	overflow: hidden;
+	padding: 2px 0;
+	display: none;
+	
+	border-radius: 4px;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	-ms-border-radius: 4px;
+	}
+.dm ul { margin: 0; padding: 0; list-style: none !important; }
+.dm li { 
+	margin: 0;
+	padding: 0;
+	border-bottom: solid 1px #ccc;
+	list-style: none !important;
+	}
+.dm li a {
+	display: block;
+	padding: 6px 10px;
+	font-size: 13px;
+	
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	-ms-transition: all 0.3s ease;
+	}
+.dm li a:hover { background: #eee; }
+
+
+
+/* orbit style implementation */
+#orbit_custom_gallery {
+	margin: 0 -10px 30px -10px;
+}

app/assets/stylesheets/custom_gallery_old.css

@@ -0,0 +1,564 @@
+.rg, .rgp {
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+}
+.rg input, .rgp input, .rg textarea, .rgp textarea { 
+	resize: none;
+	margin: 0;
+	display: block;
+	font-size: 13px;
+	}
+.rgp textarea { overflow: auto; }
+.rg a, .rgp a {
+	text-decoration: none;
+	outline: none;
+	}
+.rg a:hover {  }
+
+/*.rg img { display: block; border: none;}*/
+	
+.rgmask { background: #000; width: 100%; position: fixed; top: 0; left: 0; }
+
+.rgui { 
+	display: inline-block;
+	cursor: pointer;
+	}
+.rghead,  .rgbody { overflow: hidden; }
+.rghead {
+	border-bottom: solid 1px #ccc;
+	padding: 10px 0;
+	background: #fff;
+	}
+.rgtitle {
+	color: #333;
+	text-shadow: 0 1px 0 #ddd;
+	font-size: 2em;
+	padding: 0 8px;
+	}
+.rgbody {
+	
+	}
+.rgfn { overflow: hidden; padding: 4px 10px; }
+.rgcustom_album, .rgphoto { float: left; margin: 0 10px 24px 0; }
+.rgcustom_album {
+	padding: 16px;
+	margin: 0 8px 8px 0;
+	border: solid 1px #ccc;
+	width: 300px;
+	height: 120px;
+	border-radius: 4px;
+
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+}
+.rgcustom_album > a {
+	display: block;
+	float: left;
+	margin-right: 10px;
+}
+.rgcustom_album:hover {
+	box-shadow: 0 0 6px rgba(0,0,0,0.2);
+}
+.rgcustom_album img {		
+	transition: all, 0.5s ease;
+	-webkit-transition: all, 0.5s ease;
+	-moz-transition: all 0.5s ease;
+	-ms-transition: all, 0.5s ease;
+	}
+.rgphoto {  }
+.rgphoto a {
+	display: block;
+	padding: 4px;
+	border: solid 1px #ddd;
+	background-color: #fff;
+	border-radius: 4px;
+	transition: all, 0.3s ease;
+	-webkit-transition: all, 0.3s ease;
+	-moz-transition: all, 0.3s ease;
+}
+.rgphoto a:hover { 
+	border-color: #999;
+	box-shadow: 0 3px 6px rgba(0,0,0,0.2); 
+}
+.rgphoto img, .rgphoto_edit img { 
+	/*display: block;*/
+	border-radius: 3px;
+	transition: all, 0.3s ease;
+	-webkit-transition: all, 0.3s ease;
+	-moz-transition: all, 0.3s ease;
+	}
+.rgcustom_album .custom_albumname {
+	font-size: 18px;
+	padding: 6px 0;
+	display: block;
+	transition: background 0.3s ease;
+	-webkit-transition: background 0.3s ease;
+	-moz-transition: background 0.3s ease;
+	-ms-transition: background 0.3s ease;
+	}
+.rgcustom_album a:hover img { 
+	opacity: 0.85;
+	}
+
+.rgp .rgtitle { margin: 0 0 10px 0; }
+
+/* Photo Edit */
+.custom_albumname_edit label, .custom_albumname_edit .rginput, .rgphoto_edit > a, .rgphoto_edit .rginput { float: left; }
+.rgphoto_edit, .custom_albumname_edit {
+	clear: both;
+	overflow: hidden;
+	margin-bottom: 10px;
+}
+.custom_albumname_edit label { 
+	width: 150px;
+	margin: 0 10px 0 0;
+	text-align: right;
+	padding: 0;
+	line-height: 24px;
+}
+.custom_albumname_edit .rginput {  }
+.rgphoto_edit img { margin: 0 10px 10px 0; }
+.rgphoto_edit .rginput { margin-right: 10px; }
+.rgphoto_edit .edit_fn { float: left; margin-bottom: 10px; }
+.rgphoto_edit .edit_fn .bt-dels { }
+
+/* Delete List */
+.rglist { overflow: hidden; padding: 10px 0; }
+.list { table-layout:fixed; width: 100%; margin: 0 0 12px 0; }
+.list thead th { padding: 8px 4px; font-size: 30px; font-weight: bold; }
+.list th img { width: 60px; height: 45px; }
+.list .photoname { padding-left: 6px; }
+.list .photofn { padding-right: 4px; }
+.list .photofn a { float: right; margin-left: 4px; display: block; }
+.list th { padding: 4px 0 4px 4px; }
+.list tbody th, .list tbody td { border-bottom: solid 1px #ccc; }
+.list .odd th, .list .odd td { background: #f6f6f6; } 
+.list .c1 { width: 64px; }
+.list .c3 { width: 40px; }
+
+/* Ruling Slide */
+.rslide {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	overflow: hidden;
+	background: #222;
+	clear: both;
+	/*z-index: 99;*/
+	min-height: 250px;
+
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	}
+.rslide.fullscreen { position: fixed; z-index: 99; }
+.rslideinside {
+	/*
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	overflow: hidden;
+	*/
+	}
+.comp  {
+	width: 100%;
+	height: auto;
+	overflow: hidden;
+	position: relative;
+
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	}
+.comp img{ display: block; width: auto; height: auto; margin: 0 auto; cursor: pointer; min-height: 250px; }
+.comp .full{ width: auto; height: auto; max-width: 100%; max-height: 100%; }
+.rslidenav { 
+	position: absolute;
+	top: 50%;
+	left: 0;
+	right: 0;
+	margin-top: -35px;
+	}
+.rslidenav a {
+	position: absolute;
+	display: block;
+	width: 30px;
+	height: 40px;
+	overflow: hidden;
+	text-indent: -999px;
+	background: #000 0 center url(../../../assets/custom_gallery/slidenav.png) no-repeat;
+	background: rgba(0,0,0,0.9) 0 0 url(../../../assets/custom_gallery/slidenav.png) no-repeat;
+	
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	-ms-transition: all 0.3s ease;
+	}
+.rslidenav a:hover { 
+	background-color: #fff;
+	background-color: rgba(255,255,255,0.9);
+	}
+.rslidenav .navP { left: 0; border-radius: 0 4px 4px 0; background-position: 0 -40px; }
+.rslidenav .navN { right: 0; border-radius: 4px 0 0 4px; background-position: -30px 0; }
+.rslidenav a.navP:hover  { background-position: -30px -40px; }
+.rslidenav a.navN:hover  { background-position: 0 0; }
+.slidectrl {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	width: 100%;
+	height: 30px;
+	background: #000 left top url(../../../assets/custom_gallery/slidetitlebg.png) repeat-x;
+	background: rgba(0,0,0,0.9) left top url(../../../assets/custom_gallery/slidetitlebg.png) repeat-x;
+	/*z-index: 999;*/
+	}
+.slidectrl a {
+	display: block;
+	float: right;
+	text-indent: -9999px;
+	overflow: hidden;
+	width: 30px;
+	height: 30px;
+	background: transparent 0 0 url(../../../assets/custom_gallery/slideui.gif) no-repeat;
+	border-left: solid 1px #222;
+	}
+.slidectrl a.togglelist { background-position: 0 -30px; }
+.slidectrl a.togglescreen { background-position: 0 -90px; }
+.slidectrl a.toinline { background-position: -30px 0; }
+.slidectrl a.sharebt { background-position: -30px -30px; }
+.slidectrl a.browserfullscreen { display:none;}
+.slidectrl a.slidestop { background-position: 0 -60px; }
+.fullscreen .slidectrl a.togglescreen { background-position: -30px -90px; }
+.browserFullScreen .slidectrl a.browserfullscreen { background-position: -30px 0; }
+.browserFullScreen .togglescreen { display: none; }
+.slideinfo {
+	height: 30px;
+	line-height: 30px;
+	color: #fff;
+	font-size: 13px;
+	overflow: hidden;
+	}
+.slideinfo .info { padding: 0 0 0 6px; text-transform: uppercase; }
+.slideinfo span.info { color: #ccc; text-transform: none; }
+
+.slidelist {
+	position: absolute;
+	bottom: 30px;
+	z-index: 99;
+	width: 100%;
+	height: 0;
+	overflow: auto;
+	overflow-x: hidden;
+	background: transparent 0 0 url(../../../assets/custom_gallery/slidelistbg.png);
+	}
+.slidelist ul { 
+	margin: 0 auto;
+	padding: 10px 0 10px 10px;
+	list-style: none;
+	}
+.slidelist li {
+	display: inline-block;
+	margin: 0 10px 10px 0;
+	}
+.slidelist a {
+	border: solid 2px #fff;
+	display: block;
+	width: 150px;
+	height: 120px;
+	position: relative;
+	
+	box-shadow: 0 0 6px rgba(0,0,0,0.7);
+	-webkit-box-shadow: 0 0 6px rgba(0,0,0,0.7);
+	-moz-box-shadow: 0 0 6px rgba(0,0,0,0.7);
+	-ms-box-shadow: 0 0 6px rgba(0,0,0,0.7);
+	}
+.slidelist a.playall {
+	border: none;
+	width: 80px;
+	height: 32px;
+	margin: 31px 0 0 22px;
+	background: transparent 0 0 url(../../../assets/custom_gallery/playall.png) no-repeat;
+	
+	box-shadow: none;
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+	-ms-box-shadow: none;
+	}
+.slidelist a.playall:hover { background-position: 0 -32px; }
+#li_play_all { width: 124px; height: 94px; }
+.slidelist img { 
+	margin: 0;
+	background: #fff;
+	display: block;
+	
+	transition: all 0.2s ease;
+	-webkit-transition: all 0.2s ease;
+	-moz-transition: all 0.2s ease;
+	-ms-transition: all 0.2s ease;
+	}
+.slidelist a:hover img {
+	padding: 4px;
+	margin: -4px;
+	}
+
+.dm {
+	background: #fff;
+	border: solid 1px #a4a4a4;
+	border-right-color: #666;
+	position: absolute;
+	overflow: hidden;
+	padding: 2px 0;
+	display: none;
+	
+	border-radius: 4px;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	-ms-border-radius: 4px;
+	}
+.dm ul { margin: 0; padding: 0; list-style: none !important; }
+.dm li { 
+	margin: 0;
+	padding: 0;
+	border-bottom: solid 1px #ccc;
+	list-style: none !important;
+	}
+.dm li a {
+	display: block;
+	padding: 6px 10px;
+	font-size: 13px;
+	
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	-ms-transition: all 0.3s ease;
+	}
+.dm li a:hover { background: #eee; }
+
+/* Ruling CustomGallery UI */
+.rgbt {	
+	padding: 0 0 0 32px;
+	vertical-align: top;
+	
+	text-shadow: 0 1px 0 #fff;
+	-webkit-text-shadow: 0 1px 0 #fff;
+	-moz-text-shadow: 0 1px 0 #fff;
+	-ms-text-shadow: 0 1px 0 #fff;
+	}
+.rgbt span { 
+	padding: 0 12px 0 8px;
+	display: inline-block;
+	line-height: 30px;
+	height: 32px;
+	font-size: 14px;
+	}
+
+.rgbtsg {
+	padding: 6px;
+	}
+.rgphoto_edit .rgbtsg.active { display: inline-block; }
+.bt-finish { display: block; float: right; clear: both; }
+.bt-addnew {
+	margin: 0 auto;
+	width: 98px;
+	height: 100px;
+	display: block;
+	}
+.bt-next{ 
+	background-position: 0 -258px;
+	display: block;
+	float: right;
+	clear: both;
+	}
+.bt-next:hover { background-position: 0 -448px; }
+.bt-next:active { background-position: 0 -638px; }
+.bt-close {
+	position: absolute;
+	right: 6px;
+	top: 6px;
+	}
+
+
+.inputui {
+	margin: 0 0 8px 0;
+	}
+.inputui span {
+	padding: 0 4px 0 0;
+	display: block;
+	}
+.rginput { max-width: 400px; }
+.rginput input, .rginput textarea { color: #999; }
+.rginput.focus input, .rginput.focus textarea { color: #333; }
+
+.rgih26 { width: 208px; }
+.rgih26 span {  }
+.rgih26 input { width: 356px; }
+.rgih26.focus {  }
+.rgih26.focus span {  }
+.rgih68 { width: 396px; }
+.rgih68 span { padding: 3px 4px 3px 0; }
+.rgih68 textarea { width: 392px; height: 62px; }
+.rgih68.focus {  }
+.rgih68.focus span {  }
+.rgih98 { width: 396px; }
+.rgih98 span {  }
+.rgih98 textarea { width: 356px; height: 110px; }
+.rgih98.focus {  }
+.rgih98.focus span {  }
+
+.w380 { width: 386px; }
+
+#imgholder { overflow: hidden; }
+
+/* upload panel */
+#upload_panel_holder {
+	display: none;
+	margin: 16px 0 0 0;
+	clear: both;
+	float: right;
+	width: 100%;
+}
+#upload_panel {
+	background-color: #ddd;
+}
+
+/* tag panel */
+#tag_panel {
+	position: fixed;
+	right: -200px;
+	top: 31px;
+	width: 200px;
+	min-height: 100px;
+	border-left: solid 1px #ccc;
+	background-color: #fff;
+}
+#tag_panel .scrollbar {
+	right: 0px;
+	top: 0px;
+	width: 9px;
+}
+#tag_panel .viewport {
+	height: 100%;
+}
+
+.tag_list {
+	margin: 0;
+	padding: 0;
+}
+.tag_list li {
+	padding: 4px 6px;
+	border-top: solid 1px #f6f6f6;
+}
+.tag_list li:first-child {
+	border: 0;
+}
+.tag_list li:hover {
+	background-color: #08c;
+}
+.tag_list li:hover label {
+	color: #fff;
+}
+.tag_list input[type=checkbox], .tag_list label {
+	display: inline-block;
+	vertical-align: middle;
+	text-transform: capitalize;
+	margin: 0;
+}
+.tag_list label {
+	padding: 0 6px;
+}
+.tag_search {
+	position: absolute;
+	left: -1px;
+	bottom: -30px;
+	width: 200px;
+	height: 32px;
+	background-color: #f5f5f5;
+	border-left: solid 1px #ccc;
+	border-top: solid 1px #ddd;
+}
+.tag_search input[type=text] {
+	box-shadow: none;
+	width: 92px;
+	height: 25px;
+	line-height: 25px;
+	padding: 3px 6px 3px 24px;
+	border: 0;
+	border-top: solid 1px #fff;
+}
+.tag_search input[type=text]:focus {
+	background-color: #fff;
+}
+.tag_search .icon-search {
+	position: absolute;
+	left: 6px;
+	top: 50%;
+	margin-top: -7px;
+}
+#tag_panel .tag_save {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	height: 31px;
+	border-left: solid 1px #ccc;
+	background-color: #fff;
+	padding: 2px 4px 0 4px;
+}
+
+
+/* orbit style implementation */
+#orbit_custom_gallery {
+	margin-bottom: 30px;
+}
+#orbit_custom_gallery .nav-tabs, #orbit_custom_gallery .tab-pane {
+	margin-left: 8px;
+	margin-right: 8px;
+}
+.tab_content .tab-pane{
+	display: none;
+}
+.tab_content .active{
+	display: block;
+}
+#orbit_custom_gallery .btn { margin: 0; }
+#orbit_custom_gallery .btn i { margin-right: 4px; }
+#orbit_custom_gallery .rgfn .btn {
+	margin-left: 8px;
+}
+#orbit_custom_gallery .form-actions { background-color: whiteSmoke; }
+
+.o_custom_gallery .tagnames {
+	display: block;
+	margin-top: 6px;
+}
+.o_custom_gallery .label-tags {
+	display: inline-block;
+	margin: 0 6px 6px 0;
+}
+
+.o_custom_gallery .rgbody, .o_custom_album .rgbody {
+	padding: 10px 8px;
+}
+
+#categories .add-custom_album .control-label {
+	text-align: left;
+	width: 100px;
+	padding-left: 12px;
+	padding-right: 12px;
+}
+.o_custom_album_edit form {
+	margin-left: 8px;
+}
+
+#loading{
+	background: #fff 0 center url("../../../assets/loading.gif") no-repeat;
+    height: 16px;
+    margin: auto;
+    width: 220px;
+}

app/assets/stylesheets/custom_theater.css

@@ -0,0 +1,536 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto);
+
+/* Reset and basic styles */
+
+body {
+  overflow-x: hidden;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+.custom_gallery-mode-on {
+  /*overflow-y: hidden;*/
+}
+
+
+/* CustomGallery */
+
+#custom_gallery-theater-stage {
+  display: none;
+}
+
+#custom_gallery-theater-stage > .custom_gallery {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: #000;
+  z-index: 2000;
+}
+
+.custom_gallery-loader {
+  padding: 10px;
+  position: absolute;
+  display: none;
+  left: 50%;
+  top: 10px;
+  -webkit-transform: translate(-50%, 50%);
+  transform: translate(-50%, 50%);
+  border-radius: 2px;
+  z-index: 2000;
+  background-color: rgba(0, 0, 0, .6);
+  -webkit-transition: .3s all;
+  transition: .3s all;
+}
+
+.spinner {
+  margin: 0 auto;
+  width: 50px;
+  height: 20px;
+  text-align: center;
+  font-size: 0.625rem;
+}
+
+.spinner > div {
+  background-color: #e8e8e8;
+  height: 100%;
+  width: 4px;
+  display: inline-block;
+  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
+  animation: stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+@-webkit-keyframes stretchdelay {
+  0%,
+  40%,
+  100% {
+    -webkit-transform: scaleY(0.4)
+  }
+  20% {
+    -webkit-transform: scaleY(1.0)
+  }
+}
+
+@keyframes stretchdelay {
+  0%,
+  40%,
+  100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
+}
+
+.custom_gallery-actions {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  cursor: pointer;
+  background: rgba(255, 255, 255, .7);
+  border-radius: 2px;
+  z-index: 2000;
+}
+
+.custom_gallery-actions-btn {
+  padding: 8px 12px 8px 10px;
+  display: inline-block;
+}
+
+.custom_gallery-actions-btn:hover {
+  color: #fff;
+}
+
+.touch .custom_gallery-actions-btn {
+  padding: 12px 15px 12px 15px;
+}
+
+.custom_gallery-toggle-desc.active {
+  color: #fff;
+}
+
+.custom_gallery-theme-switch {
+  border-right: 1px solid rgba(255, 255, 255, .2);
+  border-left: 1px solid rgba(255, 255, 255, .2);
+}
+
+.custom_gallery-close {
+  color: #000;
+}
+
+.touch .image-container {
+  height: 100%;
+  padding-bottom: 150px;
+  z-index: 800;
+}
+
+.custom_gallery-image {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  width: 60%;
+  height: auto;
+  cursor: pointer;
+}
+
+.no-touch .custom_gallery-image {
+  -webkit-transition: .3s all;
+  transition: .3s all;
+}
+
+.gal-prev {
+  display: none;
+  left: 0;
+  -webkit-transform: translate(-95%, -50%);
+  transform: translate(-95%, -50%);
+}
+
+.gal-prev:hover {
+  -webkit-transform: translate(-94%, -50%);
+  transform: translate(-94%, -50%);
+}
+
+.gal-next {
+  display: none;
+  left: auto;
+  right: 0;
+  -webkit-transform: translate(95%, -50%);
+  transform: translate(95%, -50%);
+}
+
+.gal-next:hover {
+  -webkit-transform: translate(94%, -50%);
+  transform: translate(94%, -50%);
+}
+
+.gal-inactive {
+  -webkit-transition: .3s all;
+  transition: .3s all;
+  opacity: .3;
+}
+
+.gal-inactive:hover {
+  opacity: 1;
+}
+
+.gal-active {
+  display: none;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+
+/* Thumbnails */
+
+.custom_gallery-thumb-toggle {
+  position: absolute;
+  bottom: -1000px;
+}
+
+.custom_gallery-thumb-wrap {
+  overflow-y: hidden;
+  overflow-x: hidden;
+  list-style: none;
+  margin: 0 auto;
+  padding: 10px 0;
+  text-align: center;
+  white-space: nowrap;
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  -webkit-transition: .3s all;
+  transition: .3s all;
+}
+
+.custom_gallery-item {
+  margin-right: 1em;
+  display: inline-block;
+}
+
+.custom_gallery-item.active {
+  border-radius: 2px;
+  border-radius: 0.125rem;
+  border: 5px solid #fff;
+}
+
+.custom_gallery-thumb {
+  width: 50px;
+  height: 50px;
+  opacity: .5;
+  -webkit-transition: .3s opacity;
+  transition: .3s opacity;
+}
+
+.custom_gallery-thumb:hover {
+  opacity: 1;
+}
+
+.custom_gallery-thumb-container {
+  height: 80px;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background: #1b1b1b;
+}
+
+.custom_gallery-thumb-navs {
+  display: none;
+}
+
+.custom_gallery-thumb-navs.show {
+  display: block;
+}
+
+.custom_gallery-thumb-nav {
+  position: absolute;
+  cursor: pointer;
+  font-size: 1.4rem;
+  color: rgba(255, 255, 255, .7);
+  background: #222;
+  height: 80px;
+  line-height: 80px;
+  width: 50px;
+  text-align: center;
+  z-index: 900;
+}
+
+.custom_gallery-thumb-nav:hover {
+  color: #fff;
+}
+
+.custom_gallery-thumb-prev {
+  left: 0;
+}
+
+.custom_gallery-thumb-next {
+  right: 0;
+}
+
+.active .custom_gallery-thumb {
+  opacity: 1;
+}
+
+.custom_gallery-img-desc {
+  color: #000;
+  line-height: 1.7;
+  padding: 1rem 1.5rem;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.8125rem;
+  position: fixed;
+  top: 4rem;
+  left: 0;
+  right: 0;
+  margin: auto;
+  border-radius: 2px;
+  width: 90%;
+  background-color: #bdbdbd;
+  opacity: 0;
+  -webkit-transition: .3s all;
+  transition: .3s all;
+  z-index: 1000;
+}
+
+.custom_gallery-img-desc p {
+  overflow: hidden;
+  height: 90px;
+}
+
+.custom_gallery-img-desc:empty {
+  display: none;
+}
+
+.custom_gallery-img-desc.active {
+  opacity: 1;
+}
+
+
+/* White theme */
+
+.theme-white #custom_gallery-theater-stage > .custom_gallery {
+  background-color: #fffdf7;
+}
+
+.theme-white .custom_gallery-actions {
+  background-color: #eee;
+  border: 1px solid #ddd;
+}
+
+.theme-white .custom_gallery-toggle-desc.active {
+  color: #ff4444;
+}
+
+.theme-white .custom_gallery-theme-switch {
+  border-right: 1px solid #ddd;
+  border-left: 1px solid #ddd;
+}
+
+.theme-white .custom_gallery-thumb-toggle,
+.theme-white .custom_gallery-thumb-toggle:before,
+.theme-white .custom_gallery-thumb-toggle:after {
+  color: #777;
+  border-color: #aaa;
+}
+
+.theme-white .custom_gallery-thumb-container {
+  background-color: #e2e2e2;
+  border-top: 1px solid #c7c7c7;
+}
+
+.theme-white .custom_gallery-actions-btn {
+  color: #777;
+}
+
+.theme-white .custom_gallery-actions-btn:hover {
+  color: #ff4444;
+}
+
+.theme-white .custom_gallery-item.active {
+  border-color: #ff4444;
+}
+
+.theme-white .custom_gallery-thumb-nav {
+  color: #777;
+  background-color: #eee;
+}
+
+.theme-white .custom_gallery-thumb-prev {
+  border-right: 1px solid #c7c7c7;
+}
+
+.theme-white .custom_gallery-thumb-next {
+  border-left: 1px solid #c7c7c7;
+}
+
+.theme-white .custom_gallery-thumb-nav:hover {
+  color: #ff4444;
+}
+
+.theme-white .custom_gallery-img-desc {
+  background-color: #eee;
+}
+
+.theme-white .custom_gallery-loader {
+  background-color: #777;
+}
+
+.theme-white .spinner > div {
+  color: #ff4444;
+}
+
+@media screen and (max-width: 768px) {
+  .gal-prev {
+    -webkit-transform: translate(-101%, -50%);
+    transform: translate(-101%, -50%);
+  }
+  .gal-next {
+    -webkit-transform: translate(101%, -50%);
+    transform: translate(101%, -50%);
+  }
+  .custom_gallery-thumb-toggle {
+    bottom: 50px;
+    left: 0;
+    color: #fff;
+    width: 100%;
+    text-align: center;
+    -webkit-transition: .1s all;
+    transition: .1s all;
+  }
+  .custom_gallery-thumb-toggle.up {
+    bottom: 96px;
+  }
+  .custom_gallery-thumb-toggle:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 10%;
+    margin: auto;
+    width: 38%;
+    border-top: 1px solid rgba(255, 255, 255, .2);
+    height: 1px;
+  }
+  .custom_gallery-thumb-toggle:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: 10%;
+    margin: auto;
+    width: 38%;
+    border-top: 1px solid rgba(255, 255, 255, .2);
+    height: 1px;
+  }
+  .custom_gallery-thumb-container {
+    bottom: -1000px;
+    -webkit-transition: .1s all;
+    transition: .1s all;
+  }
+  .custom_gallery-thumb-container.show {
+    bottom: 0;
+  }
+}
+
+/* CSS for button */
+
+@media(max-width: 769px){
+  .custom_gallery .custom_gallery-thumb-toggle{
+    display: none;
+  }
+ }
+
+/* 相本裡的左右控制鍵 */
+#theaterPlayButton,#theaterStopButton{
+  left:30%;
+}
+#theaterStopButton{
+  -webkit-text-stroke: 0.02em #ffbb35;
+  text-shadow: 0em 0em 0.2em #ff0000;
+}
+.theaterButton{
+position: absolute;
+text-align: center;
+width: 35%;
+bottom: 1.8em;
+background-color: transparent;
+border: none;
+color: white;
+padding: 0.4em 1em;
+text-align: center;
+text-decoration: none;
+display: inline-block;
+font-size: 2.2rem;
+margin: 4px 2px;
+cursor: pointer;
+border-radius: 5px;
+-webkit-text-stroke: 1px #06a2ff;
+text-shadow: 0em 0em 0.2em #8F7;
+}
+
+#theaterNextButton{
+right:0;
+}
+#theaterPreviousButton{
+left:0;
+}
+
+.show-custom_gallery-2 .custom_gallery-thumb-container{
+  overflow: hidden;
+}
+.show-custom_gallery-2 img.custom_gallery-image{
+  position: absolute;
+}
+.show-custom_gallery-2 .image-container{
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+#custom_gallery-theater-stage > .show-custom_gallery-2.custom_gallery{
+  position: relative;
+  height: 0;
+  width: 100%;
+  z-index: unset;
+  overflow: hidden;
+}
+.show-custom_gallery-2 .custom_gallery-thumb-container{
+  position: absolute;
+}
+.show-custom_gallery-2 .custom_gallery-image {
+  top: 42%;
+}
+.show-custom_gallery-2 .custom_gallery-actions{
+  display: none;
+}
+.show-custom_gallery-2 .custom_gallery-img-desc{
+  position: absolute;
+}
+@media screen and (max-width: 768px){
+  .show-custom_gallery-2 .custom_gallery-thumb-container {
+      bottom: 0px;
+  }
+}

app/assets/stylesheets/filter.css

@@ -0,0 +1,84 @@
+/* Filter */
+#filter.open {
+  border-bottom: none;
+  padding-bottom: 10px; 
+}
+#filter .filter-nav {
+  margin-bottom: 0px;
+}
+#filter.open .filter-nav {
+  margin-bottom: 10px;
+}
+#filter .filter-nav a {
+  text-decoration: none;
+}
+#filter .filter-nav .accordion-group {
+  border: none;
+}
+#filter .filter-nav .accordion-group.active {
+  background-color: #08c;
+  position: relative;
+}
+#filter .filter-nav .accordion-group.active a {
+  color: #FFF;
+}
+#filter .filter-nav .accordion-group.active:after {
+  display: block;
+  height: 0px;
+  width: 0px;
+  position: absolute;
+  bottom: -12px;
+  left: 50%;
+  margin-left: -5px;
+  content: "";
+  border-style: solid;
+  border-width: 0 6px 6px 6px;
+  border-color: transparent transparent #e5e5e5 transparent;
+  z-index: 5
+}
+#filter .filter-group {
+  clear: both;
+  border: none;
+  margin-bottom: 0px;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+       -o-border-radius: 4px;
+          border-radius: 4px;
+}
+#filter .filter-group .accordion-body {
+  background-color: #e5e5e5;
+  border-radius: 3px;
+}
+#filter .filter-group .accordion-body .filter-clear {
+  padding: 4px;
+  border-top: 1px solid #D5D5D5;
+  text-align: right;
+  -webkit-box-shadow: inset 0px 1px 0px #ECECEC;
+     -moz-box-shadow: inset 0px 1px 0px #ECECEC;
+       -o-box-shadow: inset 0px 1px 0px #ECECEC;
+          box-shadow: inset 0px 1px 0px #ECECEC;
+}
+#filter .filter-group .accordion-body .filter-clear a {
+  text-decoration: none;
+}
+#filter .filter-group .collapse.in {
+}
+#filter .filter-group .accordion-inner {
+  padding: 8px 8px 5px;
+  /*margin-top: 10px;*/
+}
+#filter .filter-group .accordion-inner > .btn {
+  margin-bottom: 3px;
+}
+
+
+/* Responsive */
+@media (max-width: 480px) {
+  /* Filter */
+  #filter .filter-nav {
+    float: left;
+  }
+  #filter .accordion-inner.pagination-right {
+    text-align: left;
+  }
+}

app/assets/stylesheets/jquery-ui.css

@@ -0,0 +1,566 @@
+/*
+ * jQuery UI CSS Framework 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming/API
+ */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden { display: none; }
+.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
+.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
+.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+.ui-helper-clearfix { display: inline-block; }
+/* required comment for clearfix to work in Opera \*/
+* html .ui-helper-clearfix { height:1%; }
+.ui-helper-clearfix { display:block; }
+/* end clearfix */
+.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled { cursor: default !important; }
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+/*
+ * jQuery UI Accordion 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Accordion#theming
+ */
+/* IE/Win - Fix animation bug - #4615 */
+.ui-accordion { width: 100%; }
+.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
+.ui-accordion .ui-accordion-li-fix { display: inline; }
+.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
+.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
+.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
+.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
+.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
+.ui-accordion .ui-accordion-content-active { display: block; }
+/*
+ * jQuery UI Autocomplete 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Autocomplete#theming
+ */
+.ui-autocomplete { position: absolute; cursor: default; }	
+
+/* workarounds */
+* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
+
+/*
+ * jQuery UI Menu 1.8.16
+ *
+ * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Menu#theming
+ */
+.ui-menu {
+	list-style:none;
+	padding: 2px;
+	margin: 0;
+	display:block;
+	float: left;
+}
+.ui-menu .ui-menu {
+	margin-top: -3px;
+}
+.ui-menu .ui-menu-item {
+	margin:0;
+	padding: 0;
+	zoom: 1;
+	float: left;
+	clear: left;
+	width: 100%;
+}
+.ui-menu .ui-menu-item a {
+	text-decoration:none;
+	display:block;
+	padding:.2em .4em;
+	line-height:1.5;
+	zoom:1;
+}
+.ui-menu .ui-menu-item a.ui-state-hover,
+.ui-menu .ui-menu-item a.ui-state-active {
+	font-weight: normal;
+	margin: -1px;
+}
+/*
+ * jQuery UI Button 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Button#theming
+ */
+.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
+.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
+button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
+.ui-button-icons-only { width: 3.4em; } 
+button.ui-button-icons-only { width: 3.7em; } 
+
+/*button text element */
+.ui-button .ui-button-text { display: block; line-height: 1.4;  }
+.ui-button-text-only .ui-button-text { padding: .4em 1em; }
+.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
+.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
+.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
+.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
+/* no icon support for input elements, provide padding by default */
+input.ui-button { padding: .4em 1em; }
+
+/*button icon element(s) */
+.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
+.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
+.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
+.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
+.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
+
+/*button sets*/
+.ui-buttonset { margin-right: 7px; }
+.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }
+
+/* workarounds */
+button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
+/*
+ * jQuery UI Datepicker 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Datepicker#theming
+ */
+.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
+.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
+.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
+.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
+.ui-datepicker .ui-datepicker-prev { left:2px; }
+.ui-datepicker .ui-datepicker-next { right:2px; }
+.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
+.ui-datepicker .ui-datepicker-next-hover { right:1px; }
+.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
+.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
+.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
+.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
+.ui-datepicker select.ui-datepicker-month, 
+.ui-datepicker select.ui-datepicker-year { width: 49%;}
+.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
+.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
+.ui-datepicker td { border: 0; padding: 1px; }
+.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
+.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
+.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
+
+/* with multiple calendars */
+.ui-datepicker.ui-datepicker-multi { width:auto; }
+.ui-datepicker-multi .ui-datepicker-group { float:left; }
+.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
+.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
+.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
+.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
+.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
+.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; }
+
+/* RTL support */
+.ui-datepicker-rtl { direction: rtl; }
+.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
+.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
+.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
+.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
+.ui-datepicker-rtl .ui-datepicker-group { float:right; }
+.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
+.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
+
+/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
+.ui-datepicker-cover {
+    display: none; /*sorry for IE5*/
+    display/**/: block; /*sorry for IE5*/
+    position: absolute; /*must have*/
+    z-index: -1; /*must have*/
+    filter: mask(); /*must have*/
+    top: -4px; /*must have*/
+    left: -4px; /*must have*/
+    width: 200px; /*must have*/
+    height: 200px; /*must have*/
+}/*
+ * jQuery UI Dialog 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Dialog#theming
+ */
+.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
+.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
+.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
+.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
+.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
+.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
+.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
+.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
+.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
+.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
+.ui-draggable .ui-dialog-titlebar { cursor: move; }
+/*
+ * jQuery UI Progressbar 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Progressbar#theming
+ */
+.ui-progressbar { height:2em; text-align: left; }
+.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }/*
+ * jQuery UI Resizable 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Resizable#theming
+ */
+.ui-resizable { position: relative;}
+.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }
+.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
+.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
+.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
+.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
+.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
+.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
+.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
+.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
+.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/*
+ * jQuery UI Selectable 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Selectable#theming
+ */
+.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }
+/*
+ * jQuery UI Slider 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Slider#theming
+ */
+.ui-slider { position: relative; text-align: left; }
+.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
+.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
+
+.ui-slider-horizontal { height: .8em; }
+.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
+.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
+.ui-slider-horizontal .ui-slider-range-min { left: 0; }
+.ui-slider-horizontal .ui-slider-range-max { right: 0; }
+
+.ui-slider-vertical { width: .8em; height: 100px; }
+.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
+.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
+.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
+.ui-slider-vertical .ui-slider-range-max { top: 0; }/*
+ * jQuery UI Tabs 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Tabs#theming
+ */
+.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
+.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
+.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
+.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
+.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
+.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
+.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
+.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
+.ui-tabs .ui-tabs-hide { display: none !important; }
+/*
+ * jQuery UI CSS Framework 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming/API
+ *
+ * To view and modify this theme, visit http://jqueryui.com/themeroller/
+ */
+
+
+/* Component containers
+----------------------------------*/
+.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
+.ui-widget .ui-widget { font-size: 1em; }
+.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
+.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
+.ui-widget-content a { color: #222222/*{fcContent}*/; }
+.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; }
+.ui-widget-header a { color: #222222/*{fcHeader}*/; }
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3/*{borderColorDefault}*/; background: #e6e6e6/*{bgColorDefault}*/ url(images/ui-bg_glass_75_e6e6e6_1x400.png)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; }
+.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555/*{fcDefault}*/; text-decoration: none; }
+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999/*{borderColorHover}*/; background: #dadada/*{bgColorHover}*/ url(images/ui-bg_glass_75_dadada_1x400.png)/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcHover}*/; }
+.ui-state-hover a, .ui-state-hover a:hover { color: #212121/*{fcHover}*/; text-decoration: none; }
+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa/*{borderColorActive}*/; background: #ffffff/*{bgColorActive}*/ url(images/ui-bg_glass_65_ffffff_1x400.png)/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; }
+.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121/*{fcActive}*/; text-decoration: none; }
+.ui-widget :active { outline: none; }
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1/*{borderColorHighlight}*/; background: #fbf9ee/*{bgColorHighlight}*/ url(images/ui-bg_glass_55_fbf9ee_1x400.png)/*{bgImgUrlHighlight}*/ 50%/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/; color: #363636/*{fcHighlight}*/; }
+.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636/*{fcHighlight}*/; }
+.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a/*{borderColorError}*/; background: #fef1ec/*{bgColorError}*/ url(images/ui-bg_glass_95_fef1ec_1x400.png)/*{bgImgUrlError}*/ 50%/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/; color: #cd0a0a/*{fcError}*/; }
+.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a/*{fcError}*/; }
+.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a/*{fcError}*/; }
+.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
+.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
+.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
+.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
+.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsHeader}*/; }
+.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; }
+.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsHover}*/; }
+.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsActive}*/; }
+.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png)/*{iconsHighlight}*/; }
+.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/; }
+
+/* positioning */
+.ui-icon-carat-1-n { background-position: 0 0; }
+.ui-icon-carat-1-ne { background-position: -16px 0; }
+.ui-icon-carat-1-e { background-position: -32px 0; }
+.ui-icon-carat-1-se { background-position: -48px 0; }
+.ui-icon-carat-1-s { background-position: -64px 0; }
+.ui-icon-carat-1-sw { background-position: -80px 0; }
+.ui-icon-carat-1-w { background-position: -96px 0; }
+.ui-icon-carat-1-nw { background-position: -112px 0; }
+.ui-icon-carat-2-n-s { background-position: -128px 0; }
+.ui-icon-carat-2-e-w { background-position: -144px 0; }
+.ui-icon-triangle-1-n { background-position: 0 -16px; }
+.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+.ui-icon-triangle-1-e { background-position: -32px -16px; }
+.ui-icon-triangle-1-se { background-position: -48px -16px; }
+.ui-icon-triangle-1-s { background-position: -64px -16px; }
+.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+.ui-icon-triangle-1-w { background-position: -96px -16px; }
+.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+.ui-icon-arrow-1-n { background-position: 0 -32px; }
+.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+.ui-icon-arrow-1-e { background-position: -32px -32px; }
+.ui-icon-arrow-1-se { background-position: -48px -32px; }
+.ui-icon-arrow-1-s { background-position: -64px -32px; }
+.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+.ui-icon-arrow-1-w { background-position: -96px -32px; }
+.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+.ui-icon-arrow-4 { background-position: 0 -80px; }
+.ui-icon-arrow-4-diag { background-position: -16px -80px; }
+.ui-icon-extlink { background-position: -32px -80px; }
+.ui-icon-newwin { background-position: -48px -80px; }
+.ui-icon-refresh { background-position: -64px -80px; }
+.ui-icon-shuffle { background-position: -80px -80px; }
+.ui-icon-transfer-e-w { background-position: -96px -80px; }
+.ui-icon-transferthick-e-w { background-position: -112px -80px; }
+.ui-icon-folder-collapsed { background-position: 0 -96px; }
+.ui-icon-folder-open { background-position: -16px -96px; }
+.ui-icon-document { background-position: -32px -96px; }
+.ui-icon-document-b { background-position: -48px -96px; }
+.ui-icon-note { background-position: -64px -96px; }
+.ui-icon-mail-closed { background-position: -80px -96px; }
+.ui-icon-mail-open { background-position: -96px -96px; }
+.ui-icon-suitcase { background-position: -112px -96px; }
+.ui-icon-comment { background-position: -128px -96px; }
+.ui-icon-person { background-position: -144px -96px; }
+.ui-icon-print { background-position: -160px -96px; }
+.ui-icon-trash { background-position: -176px -96px; }
+.ui-icon-locked { background-position: -192px -96px; }
+.ui-icon-unlocked { background-position: -208px -96px; }
+.ui-icon-bookmark { background-position: -224px -96px; }
+.ui-icon-tag { background-position: -240px -96px; }
+.ui-icon-home { background-position: 0 -112px; }
+.ui-icon-flag { background-position: -16px -112px; }
+.ui-icon-calendar { background-position: -32px -112px; }
+.ui-icon-cart { background-position: -48px -112px; }
+.ui-icon-pencil { background-position: -64px -112px; }
+.ui-icon-clock { background-position: -80px -112px; }
+.ui-icon-disk { background-position: -96px -112px; }
+.ui-icon-calculator { background-position: -112px -112px; }
+.ui-icon-zoomin { background-position: -128px -112px; }
+.ui-icon-zoomout { background-position: -144px -112px; }
+.ui-icon-search { background-position: -160px -112px; }
+.ui-icon-wrench { background-position: -176px -112px; }
+.ui-icon-gear { background-position: -192px -112px; }
+.ui-icon-heart { background-position: -208px -112px; }
+.ui-icon-star { background-position: -224px -112px; }
+.ui-icon-link { background-position: -240px -112px; }
+.ui-icon-cancel { background-position: 0 -128px; }
+.ui-icon-plus { background-position: -16px -128px; }
+.ui-icon-plusthick { background-position: -32px -128px; }
+.ui-icon-minus { background-position: -48px -128px; }
+.ui-icon-minusthick { background-position: -64px -128px; }
+.ui-icon-close { background-position: -80px -128px; }
+.ui-icon-closethick { background-position: -96px -128px; }
+.ui-icon-key { background-position: -112px -128px; }
+.ui-icon-lightbulb { background-position: -128px -128px; }
+.ui-icon-scissors { background-position: -144px -128px; }
+.ui-icon-clipboard { background-position: -160px -128px; }
+.ui-icon-copy { background-position: -176px -128px; }
+.ui-icon-contact { background-position: -192px -128px; }
+.ui-icon-image { background-position: -208px -128px; }
+.ui-icon-video { background-position: -224px -128px; }
+.ui-icon-script { background-position: -240px -128px; }
+.ui-icon-alert { background-position: 0 -144px; }
+.ui-icon-info { background-position: -16px -144px; }
+.ui-icon-notice { background-position: -32px -144px; }
+.ui-icon-help { background-position: -48px -144px; }
+.ui-icon-check { background-position: -64px -144px; }
+.ui-icon-bullet { background-position: -80px -144px; }
+.ui-icon-radio-off { background-position: -96px -144px; }
+.ui-icon-radio-on { background-position: -112px -144px; }
+.ui-icon-pin-w { background-position: -128px -144px; }
+.ui-icon-pin-s { background-position: -144px -144px; }
+.ui-icon-play { background-position: 0 -160px; }
+.ui-icon-pause { background-position: -16px -160px; }
+.ui-icon-seek-next { background-position: -32px -160px; }
+.ui-icon-seek-prev { background-position: -48px -160px; }
+.ui-icon-seek-end { background-position: -64px -160px; }
+.ui-icon-seek-start { background-position: -80px -160px; }
+/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
+.ui-icon-seek-first { background-position: -80px -160px; }
+.ui-icon-stop { background-position: -96px -160px; }
+.ui-icon-eject { background-position: -112px -160px; }
+.ui-icon-volume-off { background-position: -128px -160px; }
+.ui-icon-volume-on { background-position: -144px -160px; }
+.ui-icon-power { background-position: 0 -176px; }
+.ui-icon-signal-diag { background-position: -16px -176px; }
+.ui-icon-signal { background-position: -32px -176px; }
+.ui-icon-battery-0 { background-position: -48px -176px; }
+.ui-icon-battery-1 { background-position: -64px -176px; }
+.ui-icon-battery-2 { background-position: -80px -176px; }
+.ui-icon-battery-3 { background-position: -96px -176px; }
+.ui-icon-circle-plus { background-position: 0 -192px; }
+.ui-icon-circle-minus { background-position: -16px -192px; }
+.ui-icon-circle-close { background-position: -32px -192px; }
+.ui-icon-circle-triangle-e { background-position: -48px -192px; }
+.ui-icon-circle-triangle-s { background-position: -64px -192px; }
+.ui-icon-circle-triangle-w { background-position: -80px -192px; }
+.ui-icon-circle-triangle-n { background-position: -96px -192px; }
+.ui-icon-circle-arrow-e { background-position: -112px -192px; }
+.ui-icon-circle-arrow-s { background-position: -128px -192px; }
+.ui-icon-circle-arrow-w { background-position: -144px -192px; }
+.ui-icon-circle-arrow-n { background-position: -160px -192px; }
+.ui-icon-circle-zoomin { background-position: -176px -192px; }
+.ui-icon-circle-zoomout { background-position: -192px -192px; }
+.ui-icon-circle-check { background-position: -208px -192px; }
+.ui-icon-circlesmall-plus { background-position: 0 -208px; }
+.ui-icon-circlesmall-minus { background-position: -16px -208px; }
+.ui-icon-circlesmall-close { background-position: -32px -208px; }
+.ui-icon-squaresmall-plus { background-position: -48px -208px; }
+.ui-icon-squaresmall-minus { background-position: -64px -208px; }
+.ui-icon-squaresmall-close { background-position: -80px -208px; }
+.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Corner radius */
+.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -khtml-border-top-left-radius: 4px/*{cornerRadius}*/; border-top-left-radius: 4px/*{cornerRadius}*/; }
+.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; -khtml-border-top-right-radius: 4px/*{cornerRadius}*/; border-top-right-radius: 4px/*{cornerRadius}*/; }
+.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-left-radius: 4px/*{cornerRadius}*/; border-bottom-left-radius: 4px/*{cornerRadius}*/; }
+.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-right-radius: 4px/*{cornerRadius}*/; border-bottom-right-radius: 4px/*{cornerRadius}*/; }
+
+/* Overlays */
+.ui-widget-overlay { background: #aaaaaa/*{bgColorOverlay}*/ url(images/ui-bg_flat_0_aaaaaa_40x100.png)/*{bgImgUrlOverlay}*/ 50%/*{bgOverlayXPos}*/ 50%/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityOverlay}*/; }
+.ui-widget-shadow { margin: -8px/*{offsetTopShadow}*/ 0 0 -8px/*{offsetLeftShadow}*/; padding: 8px/*{thicknessShadow}*/; background: #aaaaaa/*{bgColorShadow}*/ url(images/ui-bg_flat_0_aaaaaa_40x100.png)/*{bgImgUrlShadow}*/ 50%/*{bgShadowXPos}*/ 50%/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityShadow}*/; -moz-border-radius: 8px/*{cornerRadiusShadow}*/; -khtml-border-radius: 8px/*{cornerRadiusShadow}*/; -webkit-border-radius: 8px/*{cornerRadiusShadow}*/; border-radius: 8px/*{cornerRadiusShadow}*/; }

app/assets/stylesheets/jquery.fileupload-ui.css

@@ -0,0 +1,168 @@
+@charset 'UTF-8';
+/*
+ * jQuery File Upload UI Plugin CSS 5.0.6
+ * https://github.com/blueimp/jQuery-File-Upload
+ *
+ * Copyright 2010, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://creativecommons.org/licenses/MIT/
+ */
+body { margin: 0; }
+#fileupload { position: relative; }
+#fileupload form { margin: 0; }
+.fileupload-buttonbar .ui-button input {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0;
+  border: solid transparent;
+  border-width: 0 0 100px 200px;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  -o-transform: translate(250px, -50px) scale(1);
+  -moz-transform: translate(-300px, 0) scale(4);
+  direction: ltr;
+  cursor: pointer;
+}
+
+.fileinput-button {
+  overflow: hidden;
+}
+
+/* Fix for IE 6: */
+/**html .fileinput-button {
+  padding: 2px 0;
+}*/
+
+/* Fix for IE 7: */
+/**+html .fileinput-button {
+  padding: 2px 0;
+}*/
+
+.fileupload-buttonbar {
+	height: 44px;
+	border-bottom: none;
+	background: transparent 0 0 url(../../../assets/custom_gallery/uppt.png) repeat-x;
+	position: relative;
+	z-index: 9;
+	}
+
+.fileupload-buttonbar .ui-button {
+	vertical-align: middle;
+	font-size: 13px;
+	font-family: mako;
+	border: none;
+	margin: 0;
+	padding: 0;
+	background: none;
+	}
+.fileupload-buttonbar .ui-button .ui-button-text {
+	height: 40px;
+	line-height: 40px;
+	padding: 0 14px 0 26px;
+	background: transparent right center url(../../../assets/custom_gallery/upsep.png) no-repeat;
+	text-shadow: 1px 1px 0 #fff;
+	}
+
+.fileupload-content {
+	border-top-width: 0;
+	height: 250px;
+	overflow: auto;
+	overflow-x:hidden;
+	background: #FAFAFA center center url(../../../assets/custom_gallery/uploadbg.gif) no-repeat;
+	position: relative;
+	margin-top: -2px;
+	z-index: 2;
+	}
+
+.fileupload-content .ui-progressbar {
+	width: auto;
+	height: 18px;
+	}
+
+.fileupload-content .ui-progressbar-value {
+	background: url(../../../assets/custom_gallery/pbar-ani.gif);
+	height: 16px;
+	margin: 0;
+	border-left: none;
+	border-right: none;
+	border-radius: 6px;
+	}
+.files .ui-progressbar-value { border: none; height: 18px; border-radius: 2px; }
+.fileupload-content .fileupload-progressbar {
+	width: 400px;
+	margin: -20px 0 0 -202px;
+	padding: 2px;
+	background: rgba(0,0,0,0.8);
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	border: 0;
+	border-radius: 4px;
+	box-shadow: 0 2px 3px rgba(0,0,0,0.4);
+	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.4);
+	-moz-box-shadow: 0 2px 3px rgba(0,0,0,0.4);
+	-ms-box-shadow: 0 2px 3px rgba(0,0,0,0.4);
+	}
+
+.files {
+  margin: 0;
+  border-collapse: collapse;
+  width: 100%;
+  table-layout:fixed;
+  font-family: mako;
+}
+
+.files td {
+	padding: 5px 4px;
+	border-spacing: 0;
+	font-size: 13px;
+	}
+
+.files img { border: none; width: 80px; }
+
+.files .name {  }
+
+.files .size {
+	text-align: right;
+	white-space: nowrap;
+	width: 100px;
+	}
+.files .preview { width: 88px; }
+/*.files .progress { width: ; }*/
+.files .start { width: 40px; }
+.files .cancel { width: 40px; }
+
+.ui-state-disabled .ui-state-disabled {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+
+.ui-state-disabled input {
+  cursor: default;
+}
+.fileupload-buttonbar .ui-icon {
+	background: transparent center 0 url(../../../assets/custom_gallery/upicon.png) no-repeat;
+	height: 16px;
+	margin: 0;
+	padding: 12px 0;
+	top: 0;
+	}
+.ui-icon.ui-icon-plusthick {}
+.ui-button:hover .ui-icon.ui-icon-plusthick { background-position: center -40px; }
+.ui-icon.ui-icon-circle-arrow-e { background-position: center -80px; }
+.ui-button:hover .ui-icon.ui-icon-circle-arrow-e { background-position: center -120px; }
+.ui-icon.ui-icon-cancel { background-position: center -160px; }
+.ui-button:hover .ui-icon.ui-icon-cancel { background-position: center -200px; }
+.ui-icon.ui-icon-trash { background-position: center -240px; }
+.ui-button:hover .ui-icon.ui-icon-trash { background-position: center -280px; }
+
+.files .ui-icon { background: transparent center 0 url(../../../assets/custom_gallery/upicon.png) no-repeat; }
+.files .ui-icon.ui-icon-circle-arrow-e { background-position: center -91px; }
+.files .ui-button:hover .ui-icon.ui-icon-circle-arrow-e { background-position: center -131px; }
+.files .ui-icon.ui-icon-cancel { background-position: center -171px; }
+.files .ui-button:hover .ui-icon.ui-icon-cancel { background-position: center -211px; }
+.files .ui-icon.ui-icon-trash { background-position: center -251px; }
+.files .ui-button:hover .ui-icon.ui-icon-trash { background-position: center -291px; }

app/assets/stylesheets/jquery.minicolors.css

@@ -0,0 +1,432 @@
+.minicolors {
+  position: relative;
+}
+
+.minicolors-sprite {
+  background-image: url(jquery.minicolors.png);
+}
+
+.minicolors-swatch {
+  position: absolute;
+  vertical-align: middle;
+  background-position: -80px 0;
+  border: solid 1px #ccc;
+  cursor: text;
+  padding: 0;
+  margin: 0;
+  display: inline-block;
+}
+
+.minicolors-swatch-color {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.minicolors input[type=hidden] + .minicolors-swatch {
+  width: 28px;
+  position: static;
+  cursor: pointer;
+}
+
+.minicolors input[type=hidden][disabled] + .minicolors-swatch {
+  cursor: default;
+}
+
+/* Panel */
+.minicolors-panel {
+  position: relative;
+  width: 173px;
+  background: white;
+  border: solid 1px #CCC;
+  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
+  z-index: 99999;
+  box-sizing: content-box;
+  display: none;
+}
+
+.minicolors-panel.minicolors-visible {
+  display: block;
+}
+
+/* Panel positioning */
+.minicolors-position-top .minicolors-panel {
+  top: -154px;
+}
+
+.minicolors-position-right .minicolors-panel {
+  right: 0;
+}
+
+.minicolors-position-bottom .minicolors-panel {
+  top: auto;
+}
+
+.minicolors-position-left .minicolors-panel {
+  left: 0;
+}
+
+.minicolors-with-opacity .minicolors-panel {
+  width: 194px;
+}
+
+.minicolors .minicolors-grid {
+  position: relative;
+  top: 1px;
+  left: 1px; /* LTR */
+  width: 150px;
+  height: 150px;
+  margin-bottom: 2px;
+  background-position: -120px 0;
+  cursor: crosshair;
+}
+[dir=rtl] .minicolors .minicolors-grid {
+  right: 1px;
+}
+
+.minicolors .minicolors-grid-inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 150px;
+  height: 150px;
+}
+
+.minicolors-slider-saturation .minicolors-grid {
+  background-position: -420px 0;
+}
+
+.minicolors-slider-saturation .minicolors-grid-inner {
+  background-position: -270px 0;
+  background-image: inherit;
+}
+
+.minicolors-slider-brightness .minicolors-grid {
+  background-position: -570px 0;
+}
+
+.minicolors-slider-brightness .minicolors-grid-inner {
+  background-color: black;
+}
+
+.minicolors-slider-wheel .minicolors-grid {
+  background-position: -720px 0;
+}
+
+.minicolors-slider,
+.minicolors-opacity-slider {
+  position: absolute;
+  top: 1px;
+  left: 152px; /* LTR */
+  width: 20px;
+  height: 150px;
+  background-color: white;
+  background-position: 0 0;
+  cursor: row-resize;
+}
+[dir=rtl] .minicolors-slider,
+[dir=rtl] .minicolors-opacity-slider {
+  right: 152px;
+}
+
+.minicolors-slider-saturation .minicolors-slider {
+  background-position: -60px 0;
+}
+
+.minicolors-slider-brightness .minicolors-slider {
+  background-position: -20px 0;
+}
+
+.minicolors-slider-wheel .minicolors-slider {
+  background-position: -20px 0;
+}
+
+.minicolors-opacity-slider {
+  left: 173px; /* LTR */
+  background-position: -40px 0;
+  display: none;
+}
+[dir=rtl] .minicolors-opacity-slider {
+  right: 173px;
+}
+
+.minicolors-with-opacity .minicolors-opacity-slider {
+  display: block;
+}
+
+/* Pickers */
+.minicolors-grid .minicolors-picker {
+  position: absolute;
+  top: 70px;
+  left: 70px;
+  width: 12px;
+  height: 12px;
+  border: solid 1px black;
+  border-radius: 10px;
+  margin-top: -6px;
+  margin-left: -6px;
+  background: none;
+}
+
+.minicolors-grid .minicolors-picker > div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 8px;
+  border: solid 2px white;
+  box-sizing: content-box;
+}
+
+.minicolors-picker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 18px;
+  height: 2px;
+  background: white;
+  border: solid 1px black;
+  margin-top: -2px;
+  box-sizing: content-box;
+}
+
+/* Swatches */
+.minicolors-swatches,
+.minicolors-swatches li {
+  margin: 5px 0 3px 5px; /* LTR */
+  padding: 0;
+  list-style: none;
+  overflow: hidden;
+}
+[dir=rtl] .minicolors-swatches,
+[dir=rtl] .minicolors-swatches li {
+  margin: 5px 5px 3px 0;
+}
+
+.minicolors-swatches .minicolors-swatch {
+  position: relative;
+  float: left; /* LTR */
+  cursor: pointer;
+  margin:0 4px 0 0; /* LTR */
+}
+[dir=rtl] .minicolors-swatches .minicolors-swatch {
+  float: right;
+  margin:0 0 0 4px;
+}
+
+.minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
+  margin-right: 7px; /* LTR */
+}
+[dir=rtl] .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
+  margin-right: 0;
+  margin-left: 7px;
+}
+
+.minicolors-swatch.selected {
+  border-color: #000;
+}
+
+/* Inline controls */
+.minicolors-inline {
+  display: inline-block;
+}
+
+.minicolors-inline .minicolors-input {
+  display: none !important;
+}
+
+.minicolors-inline .minicolors-panel {
+  position: relative;
+  top: auto;
+  left: auto; /* LTR */
+  box-shadow: none;
+  z-index: auto;
+  display: inline-block;
+}
+[dir=rtl] .minicolors-inline .minicolors-panel {
+  right: auto;
+}
+
+/* Default theme */
+.minicolors-theme-default .minicolors-swatch {
+  top: 5px;
+  left: 5px; /* LTR */
+  width: 18px;
+  height: 18px;
+}
+[dir=rtl] .minicolors-theme-default .minicolors-swatch {
+  right: 5px;
+}
+.minicolors-theme-default .minicolors-swatches .minicolors-swatch {
+  margin-bottom: 2px;
+  top: 0;
+  left: 0; /* LTR */
+  width: 18px;
+  height: 18px;
+}
+[dir=rtl] .minicolors-theme-default .minicolors-swatches .minicolors-swatch {
+  right: 0;
+}
+.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
+  left: auto; /* LTR */
+  right: 5px; /* LTR */
+}
+[dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-swatch {
+  right: auto;
+  left: 5px;
+}
+.minicolors-theme-default.minicolors {
+  width: auto;
+  display: inline-block;
+}
+.minicolors-theme-default .minicolors-input {
+  height: 20px;
+  width: auto;
+  display: inline-block;
+  padding-left: 26px; /* LTR */
+}
+[dir=rtl] .minicolors-theme-default .minicolors-input {
+  text-align: right;
+  unicode-bidi: plaintext;
+  padding-left: 1px;
+  padding-right: 26px;
+}
+.minicolors-theme-default.minicolors-position-right .minicolors-input {
+  padding-right: 26px; /* LTR */
+  padding-left: inherit; /* LTR */
+}
+[dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-input {
+  padding-right: inherit;
+  padding-left: 26px;
+}
+
+/* Bootstrap theme */
+.minicolors-theme-bootstrap .minicolors-swatch {
+  z-index: 2;
+  top: 3px;
+  left: 3px; /* LTR */
+  width: 28px;
+  height: 28px;
+  border-radius: 3px;
+}
+[dir=rtl] .minicolors-theme-bootstrap .minicolors-swatch {
+  right: 3px;
+}
+.minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
+  margin-bottom: 2px;
+  top: 0;
+  left: 0; /* LTR */
+  width: 20px;
+  height: 20px;
+}
+[dir=rtl] .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
+  right: 0;
+}
+.minicolors-theme-bootstrap .minicolors-swatch-color {
+  border-radius: inherit;
+}
+.minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
+  left: auto; /* LTR */
+  right: 3px; /* LTR */
+}
+[dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left > .minicolors-swatch {
+  right: auto;
+  left: 3px;
+}
+.minicolors-theme-bootstrap .minicolors-input {
+  float: none;
+  padding-left: 44px; /* LTR */
+}
+[dir=rtl] .minicolors-theme-bootstrap .minicolors-input {
+  text-align: right;
+  unicode-bidi: plaintext;
+  padding-left: 12px;
+  padding-right: 44px;
+}
+.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
+  padding-right: 44px; /* LTR */
+  padding-left: 12px; /* LTR */
+}
+[dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left .minicolors-input {
+  padding-right: 12px;
+  padding-left: 44px;
+}
+.minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
+  top: 4px;
+  left: 4px; /* LTR */
+  width: 37px;
+  height: 37px;
+  border-radius: 5px;
+}
+[dir=rtl] .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
+  right: 4px;
+}
+.minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
+  width: 24px;
+  height: 24px;
+}
+.minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
+  width: 18px;
+  height: 18px;
+}
+.input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
+  border-top-left-radius: 0; /* LTR */
+  border-bottom-left-radius: 0; /* LTR */
+}
+[dir=rtl] .input-group .minicolors-theme-bootstrap .minicolors-input {
+  border-radius: 4px;
+}
+[dir=rtl] .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+[dir=rtl] .input-group .minicolors-theme-bootstrap:not(:last-child) .minicolors-input {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+/* bootstrap input-group rtl override */
+[dir=rtl] .input-group .form-control,
+[dir=rtl] .input-group-addon,
+[dir=rtl] .input-group-btn > .btn,
+[dir=rtl] .input-group-btn > .btn-group > .btn,
+[dir=rtl] .input-group-btn > .dropdown-toggle {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+[dir=rtl] .input-group .form-control:first-child,
+[dir=rtl] .input-group-addon:first-child,
+[dir=rtl] .input-group-btn:first-child > .btn,
+[dir=rtl] .input-group-btn:first-child > .btn-group > .btn,
+[dir=rtl] .input-group-btn:first-child > .dropdown-toggle,
+[dir=rtl] .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+[dir=rtl] .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 0;
+}
+[dir=rtl] .input-group .form-control:last-child,
+[dir=rtl] .input-group-addon:last-child,
+[dir=rtl] .input-group-btn:last-child > .btn,
+[dir=rtl] .input-group-btn:last-child > .btn-group > .btn,
+[dir=rtl] .input-group-btn:last-child > .dropdown-toggle,
+[dir=rtl] .input-group-btn:first-child > .btn:not(:first-child),
+[dir=rtl] .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Semantic Ui theme */
+.minicolors-theme-semanticui .minicolors-swatch {
+  top: 0;
+  left: 0; /* LTR */
+  padding: 18px;
+}
+[dir=rtl] .minicolors-theme-semanticui .minicolors-swatch {
+  right: 0;
+}
+.minicolors-theme-semanticui input {
+  text-indent: 30px;
+}

app/assets/stylesheets/widget_custom_gallery.css

@@ -0,0 +1,70 @@
+.widget_custom_gallery {
+	margin-bottom: 20px;
+}
+.widget_custom_gallery:after {
+	display: table;
+	width: 100%;
+	content: '';
+}
+.widget_custom_gallery ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+.widget_custom_gallery li a {
+	display: block;
+}
+.widget_custom_gallery li a img {
+	height: auto;
+	display: block;
+}
+
+/* widget 1 */
+.w1 ul {
+	margin: 0 -1%;
+}
+.w1 li {
+	float: left;
+	margin: 1%;
+}
+.w1.c2 li { width: 48%; }
+.w1.c3 li { width: 31.3333%; }
+.w1.c4 li { width: 23%; }
+.w1.c5 li { width: 18%; }
+.w1.c6 li { width: 14.6666%; }
+.w1 li a {
+	-webkit-transition: opacity 0.3s ease;
+	   -moz-transition: opacity 0.3s ease;
+			transition: opacity 0.3s ease;
+}
+.w1 li a:hover {
+	opacity: 0.8;
+	position: relative;
+}
+.w1 li a img {
+	width: 100%;
+}
+
+/* widget 2 */
+.w2 li {
+	width: 100%;
+}
+.w2 li a img {
+	width: 100%;
+	height: auto;
+}
+.w2 li a {
+	position: relative;
+	overflow: hidden;
+	color: #fff;
+	text-transform: capitalize;
+}
+.w2 li a .desc {
+	position: absolute;
+	bottom: -60px;
+	opacity: 0;
+	display: block;
+	width: 100%;
+	padding: 5%;
+	background-color: rgba(8, 166, 255, 0.8);
+}

app/controllers/admin/custom_galleries_controller.rb

@@ -0,0 +1,673 @@
+require 'rubyXL'
+class Admin::CustomGalleriesController < OrbitAdminController
+  include Admin::CustomGalleriesHelper
+  before_filter :setup_vars
+  before_action :authenticate_user, :except => "imgs"
+  before_action :log_user_action
+  layout :compute_layout
+  find_tag = Tag.all.select{|value| value.name==I18n.t('custom_gallery.not_show_desc')}
+  if find_tag.length==0
+    module_app_id = ModuleApp.where(:key=>"custom_gallery").first[:_id]
+    tags = ModuleApp.where(:key=>"custom_gallery").first.tags
+    tag0 = Tag.new(is_default: false,module_app_ids: [module_app_id])
+    tag1 = Tag.new(is_default: false,module_app_ids: [module_app_id])
+    nowlocale = I18n.locale
+    I18n.available_locales.each do |locale|
+      I18n.locale = locale
+      tag0.name = I18n.t('custom_gallery.show_desc')
+      tag1.name = I18n.t('custom_gallery.not_show_desc')
+    end
+    I18n.locale = nowlocale
+    tag0.save
+    tag1.save
+    tags << tag0
+    tags << tag1
+  elsif find_tag.length>1
+    show_tags = Tag.all.select{|value| value.name==I18n.t('custom_gallery.show_desc')}
+    show_tags.each_with_index do |show_tag,index1|
+      if index1>0
+        if show_tag.taggings.count==0
+          show_tag.delete
+        end
+      end
+    end
+    find_tag.each_with_index do |not_show_tag,index1|
+      if index1>0
+        if not_show_tag.taggings.count==0
+          not_show_tag.delete
+        end
+      end
+    end
+  end
+  def compute_layout
+    if action_name== 'index' && !params['page_no'].nil?
+      false
+    else
+      'back_end'
+    end
+  end
+  def get_tag
+    custom_album = CustomAlbum.find(params['ele_id']) rescue nil
+    if !custom_album.nil?
+      text =  custom_album.tags.collect do |tag|
+                "<li class=\"label\"> #{tag.name}</li>"
+              end.join
+      render :text => text
+    else
+      render :text => ''
+    end
+  end
+  def rotate_images
+    begin
+      image_ids = params['image_ids'].split(',')
+      count = image_ids.count
+      rot_ang = params[:rotate_angle].to_i
+      variable = CustomAlbumVariable.first
+      if variable.nil?
+        variable = CustomAlbumVariable.new
+      end
+      variable.finish = false
+      variable.save!
+      Thread.new do
+        variable = CustomAlbumVariable.first
+        image_ids.each_with_index do |image_id,index|
+          image = CustomAlbumImage.find(image_id) rescue nil
+          next if image.nil?
+          if !(image.custom_album_crops.first.nil?)
+            w_and_h = image.file.get_w_and_h
+            cords = image.custom_album_crops.map{|v| [[v.crop_x.to_f,v.crop_y.to_f],
+                                              [v.crop_x.to_f,v.crop_y.to_f+v.crop_h.to_f],
+                                              [v.crop_w.to_f+v.crop_x.to_f,v.crop_y.to_f],
+                                              [v.crop_w.to_f+v.crop_x.to_f,v.crop_y.to_f+v.crop_h.to_f]]}[0]
+            rot_diff = rot_ang/90
+            if (rot_diff) % 2 == 1
+              new_w = (w_and_h[1]).to_f
+              new_h = (w_and_h[0]).to_f
+            else
+              new_w = (w_and_h[0]).to_f
+              new_h = (w_and_h[1]).to_f
+            end
+            
+            rot_times = rot_diff % 4
+            deg = (90.0*rot_times/180*Math::PI)
+            cords = cords.collect do |cord|
+              x = cord[0]-w_and_h[0].to_f/2
+              y = cord[1]-w_and_h[1].to_f/2
+              [x*Math.cos(deg)-y*Math.sin(deg)+new_w/2,x*Math.sin(deg)+y*Math.cos(deg)+new_h/2]
+            end
+            all_x = cords.collect do |cord|
+              cord[0]
+            end
+            all_y = cords.collect do |cord|
+              cord[1]
+            end
+            image.custom_album_crops.first.update_attributes(crop_x: all_x.min,crop_y: all_y.min,crop_w: all_x.max - all_x.min,crop_h: all_y.max - all_y.min)
+          end
+          variable.progress_percent = (index*100.0/count).floor.to_s+'%'
+          image.file.rotate_ang(rot_ang)
+          all_version = image.file.versions.map{|k,v| k}
+          begin
+            variable.progress_filename = image[:file].to_s
+            all_version.each do |version|
+                if !(version.to_s == 'resized' && crop_but_no_backup(image)) 
+                    image.file.recreate_versions! version
+                    image.save!
+                end
+            end
+          rescue => e
+            variable.progress_filename = e.inspect.to_s
+            puts e.inspect
+          end
+          variable.save!
+        end
+        variable.finish = true
+        variable.save!
+    end
+    rescue => e
+        puts e.inspect
+    end
+    redirect_to :controller=> 'images' ,:action => 'crop_process'
+  end
+  
+  def save_crop
+    begin
+      images = CustomAlbumImage.where(:id.in => Array(params[:id]))
+      x = params['x']
+      y = params['y']
+      w = params['w']
+      h = params['h']
+      cords = x.zip(y,w,h)
+      count = cords.length
+      variable = CustomAlbumVariable.first
+      if variable.nil?
+        variable = CustomAlbumVariable.new
+      end
+      variable.finish = false
+      variable.save!
+      Thread.new do
+        variable = CustomAlbumVariable.first
+          image_ids= images.pluck(:id)
+          image_ids.each_with_index do |image_id,index|
+            image = CustomAlbumImage.find(image_id)
+            cord = cords[index]
+            if image.custom_album_crops.first.nil?
+                image.custom_album_crops.create(crop_x: cord[0],crop_y: cord[1],crop_w: cord[2],crop_h: cord[3])
+            else
+                image.custom_album_crops.first.update_attributes(crop_x: cord[0],crop_y: cord[1],crop_w: cord[2],crop_h: cord[3])
+            end
+            variable.progress_percent = (index*100.0/count).floor.to_s+'%'
+            all_version = image.file.versions.map{|k,v| k}
+            begin
+                #org_fname = image.file.path
+                #org_extname = File.extname(org_fname)
+                #org_fname.slice! org_extname
+                #FileUtils.cp(org_fname + org_extname, org_fname + '_resized' + org_extname)
+                variable.progress_filename = image[:file].to_s
+                all_version.each do |version|
+                    if !(version.to_s == 'resized' && crop_but_no_backup(image)) 
+                        image.file.recreate_versions! version
+                        image.save!
+                    end
+                end
+            rescue => e
+                variable.progress_filename = e.inspect.to_s
+                puts e.inspect
+            end
+            variable.save!
+        end
+        variable.finish = true
+        variable.save!
+    end
+    rescue => e
+        puts e.inspect
+    end
+    redirect_url = "/admin/custom_galleries/crop_process"
+    render :json => {'href' => redirect_url}.to_json
+  end
+  def call_translate
+    text = params['text']
+    render :json => {'translate' => "#{t(text.to_s)}" }.to_json
+  end
+  def recreate_image
+    notalive =  ((CustomAlbumVariable.first.notalive.nil? ? true : CustomAlbumVariable.first.notalive) rescue true)
+    if notalive
+      if !params['custom_album_id'].to_s.empty?
+        variable = CustomAlbumVariable.first
+        if variable.nil?
+          variable = CustomAlbumVariable.new
+        end
+        variable.finish = false
+        variable.save!
+        choice_ids = params['custom_album_id'].split(',')
+        custom_albums = CustomAlbum.where(:id.in => choice_ids)
+        if !(params['use_default']=='true')
+          color = params['color_choice'].to_s.empty? ? 'transparent' : params['color_choice']
+          custom_albums.each do |custom_album|
+            if custom_album.custom_album_colors.first.nil?
+              custom_album.custom_album_colors.create('color' => color)
+            else
+              custom_album.custom_album_colors.first.update_attributes('color' => color, 'updated_at' => Time.now)
+            end
+          end
+        end
+        count = custom_albums.reduce(0){|x,i| i.custom_album_images.count+x}
+        Thread.new do
+          i = 0
+          custom_album_ids = custom_albums.pluck(:id)
+          custom_album_ids.each do |custom_album_id|
+            custom_album = CustomAlbum.find(custom_album_id) rescue CustomAlbum.new()
+            custom_album_image_ids = custom_album.custom_album_images.pluck(:id)
+            custom_album_image_ids.each do |image_id|
+              image = CustomAlbumImage.find(image_id)
+              error = nil
+              all_version = image.file.versions.map{|k,v| k}
+              begin
+                all_version.each do |version|
+                  if !(version.to_s == 'resized' && crop_but_no_backup(image)) 
+                      image.file.recreate_versions! version
+                      image.save!
+                  end
+                end
+              rescue => error
+              end
+              variable = CustomAlbumVariable.first
+              variable.progress_percent = (i*100.0/count).floor.to_s+'%'
+              if !error.nil?
+                  variable.progress_filename = error.inspect.to_s.encode('UTF-8', invalid: :replace, undef: :replace, replace: '?')
+                  sleep(1)
+              else
+                  variable.progress_filename = image[:file].to_s
+              end
+              variable.save!
+              i+=1
+            end
+          end
+          variable = CustomAlbumVariable.first
+          variable.finish = true
+          variable.save!
+        end
+      else
+        variable = CustomAlbumVariable.first
+        variable.finish = true
+        variable.progress_filename = ''
+        variable.progress_percent = '100%'
+        variable.save!
+      end
+    end
+  end
+  def finish_recreate
+    variable = CustomAlbumVariable.first
+    variable.progress_percent = '0%'
+    variable.progress_filename = ''
+    variable.notalive = true
+    variable.save!
+    render :text => ''
+  end
+  def recreate_progress
+    progress_percent = CustomAlbumVariable.first.progress_percent rescue '0%'
+    progress_filename = CustomAlbumVariable.first.progress_filename rescue ''
+    finish = CustomAlbumVariable.first.finish rescue false
+    render :json => {'percent' => progress_percent, 'filename' => progress_filename, 'finish' => finish }.to_json
+  end
+  def filter_custom_album
+    @tags = @module_app.tags
+    categories = @module_app.categories.enabled
+    @filter_fields = filter_fields(categories, @tags)
+    @filter_fields.delete(:status)
+    custom_albums1 = CustomAlbum.where(:order.in => [nil,-1]).desc(:created_at).with_categories(filters("category")).with_tags(filters("tag"))
+    custom_albums1 = search_data(custom_albums1,[:name])
+    custom_albums2 = CustomAlbum.all.where(:order.ne=>-1).and(:order.ne=>nil).asc(:order).with_categories(filters("category")).with_tags(filters("tag"))
+    custom_albums2 = search_data(custom_albums2,[:name])
+    @fiter_custom_albums = custom_albums1.concat(custom_albums2)
+  end
+  def update_custom_album_setting
+    if params[:custom_album_setting_limit]
+      params_custom_album_setting = {:limit=>params[:custom_album_setting_limit]}
+    else
+      params_custom_album_setting = params.require(:custom_album_setting).permit!
+    end
+    CustomAlbumSetting.first.update_attributes(params_custom_album_setting)
+    redirect_to '/admin/custom_galleries'
+  end
+  def setting
+    @custom_album_setting = CustomAlbumSetting.first
+  end
+  def index
+    custom_album_length = CustomAlbum.where(:custom_module=>params[:custom_module],:bind_uid=>params[:bind_uid]).count
+    custom_album_sort = CustomAlbum.where(:custom_module=>params[:custom_module],:bind_uid=>params[:bind_uid]).asc(:created_at)
+    if (custom_album_sort.first.custom_album_colors.first.nil? rescue false)
+      custom_album_sort.each_with_index do |custom_album|
+        if custom_album.custom_album_colors.first.nil?
+            custom_album.custom_album_colors.create('color' => 'transparent')
+        end
+      end
+    end
+    @url = request.original_fullpath
+    @limit_count = CustomAlbumSetting.first.limit.to_i
+    @limit_count = custom_album_length if @limit_count == 0
+    if params['page_no'].nil?
+      @show_script = true 
+      @custom_albums = filter_custom_album.take @limit_count
+    else
+      @show_script = false 
+      start = (params['page_no'].to_i - 1)*@limit_count
+      @custom_albums = filter_custom_album[start...start+@limit_count]
+    end
+    if CustomAlbumColor.count!=0
+      if CustomAlbumColor.all.desc('updated_at').first[:color] == 'transparent'
+          @color_save = ''
+      else
+          @color_save = CustomAlbumColor.desc('updated_at').first[:color]
+      end
+    else
+        @color_save = 'transparent'
+    end
+    @custom_album_configs = CustomAlbumConfig.all
+    if request.xhr?
+      render :partial => "custom_albums"
+    elsif params[:custom_module].blank? || params[:bind_uid].blank?
+      render "display_enable_modules"
+    end
+  end
+
+  def show
+    @custom_album = CustomAlbum.find(params[:id])
+    @images = @custom_album.custom_album_images.where(:order.in => [nil,-1]).desc(:created_at)
+    images = @custom_album.custom_album_images.where(:order.gt => -1).asc(:order)
+    @images = @images.concat(images)
+    image_content = []
+    @images.each do |image|
+      image_content << {"id" => image.id.to_s,"title"=> image.title_translations, "description" => image.description_translations,"tags" => image.tags.collect{|t| t.id.to_s}}
+    end
+    @tags = @module_app.tags
+    @photos_data = {"custom_galleries" => image_content}.to_json
+  end
+
+  def new
+    @custom_album = CustomAlbum.new
+    @tags = @module_app.tags
+    @categories = @module_app.categories
+  end
+
+  def create
+    custom_album = CustomAlbum.new(custom_album_params)
+    custom_album.save!
+    custom_module = custom_album.custom_module
+    bind_uid = custom_album.bind_uid
+    if custom_module.present?
+      redirect_to admin_custom_galleries_path + "/#{custom_module}#{bind_uid.present? ? ('-'+bind_uid) : ''}"
+    else
+      redirect_to admin_custom_galleries_path
+    end
+  end
+
+  def destroy
+    custom_album = CustomAlbum.find(params[:id])
+    custom_module = custom_album.custom_module
+    bind_uid = custom_album.bind_uid
+    custom_album.destroy
+    if custom_module.present?
+      redirect_to admin_custom_galleries_path + "/#{custom_module}#{bind_uid.present? ? ('-'+bind_uid) : ''}"
+    else
+      redirect_to admin_custom_galleries_path
+    end
+  end
+
+  def edit
+      @custom_album = CustomAlbum.find(params[:id])
+      if can_edit_or_delete?(@custom_album)
+        @tags = @module_app.tags
+        @categories = @module_app.categories
+      else
+        render_401
+      end
+  end
+
+  def import
+    @custom_album = CustomAlbum.find(params[:id])
+  end
+
+  def importimages
+    custom_album = CustomAlbum.find(params[:id])
+    workbook = RubyXL::Parser.parse(params["import_file"].tempfile)
+    sheet = workbook[0]
+    if sheet.count <= 203
+      sheet.each_with_index do |row, i|
+        next if i < 3
+        v = row.cells.first.value rescue nil
+        next if v.blank?
+        import_this_image(row, custom_album)
+      end
+      redirect_to admin_custom_gallery_path(custom_album.id)
+    else
+      redirect_to import_admin_custom_gallery_path(:error => "1")
+    end
+  end
+
+  def excel_format
+    @custom_album = CustomAlbum.find(params[:id])
+    respond_to do |format|
+      format.xlsx {
+        response.headers['Content-Disposition'] = 'attachment; filename="custom_gallery_import_format.xlsx"'
+      }
+    end
+  end
+
+  def set_cover
+    if params[:set_cover] == "true"
+      custom_album = CustomAlbum.find(params[:custom_album_id])
+      image = CustomAlbumImage.find(params[:image_id])
+      custom_album.update_attributes({:cover_path => image.file.thumb.url, :cover=>params[:image_id]})
+    else
+      custom_album = CustomAlbum.find(params[:custom_album_id])
+      custom_album.update_attributes({:cover_path => nil, :cover=>"default"})
+    end
+    render :json =>{"success"=>true}.to_json
+  end
+
+  def get_photoData_json
+    @custom_album = CustomAlbum.find(params[:id])
+    @images = @custom_album.custom_album_images.where(:order => [nil,-1]).desc(:created_at)
+    images = @custom_album.custom_album_images.where(:order.gt => -1).asc(:order)
+    @images = @images.concat(images)
+    image_content = []
+    @images.each do |image|
+      image_content << {"id" => image.id.to_s,"title"=> image.title_translations, "description" => image.description_translations,"tags" => image.tags.collect{|t| t.id.to_s}}
+    end
+    render :json=>{"custom_galleries" => image_content}.to_json
+  end
+
+  def get_custom_album_json
+    custom_albums = CustomAlbum.all
+    output = Array.new
+
+    custom_albums.each do |custom_album|
+      tag_names = Array.new
+
+      custom_album.tag_ids.each do |tag|
+        tag_names << get_tags.include?(tag)
+      end
+      if custom_album.cover_path
+        cover_path = custom_album.cover_path
+      else
+        cover_path = "/assets/custom_gallery/default.jpg"
+      end
+      output << {
+        custom_album_cover_file: "http://#{request.host_with_port}"+cover_path,
+        custom_album_name: custom_album.name,
+        custom_album_tag_names: tag_names,
+        custom_album_link:"http://#{request.host_with_port}#{panel_custom_gallery_back_end_custom_album_get_imgs_json_path(custom_album)}",
+      }
+    end
+
+    render :json=>JSON.pretty_generate(output)
+  end
+
+  def get_imgs_json
+    custom_album = CustomAlbum.find(params[:custom_album_id])
+    images = custom_album.custom_album_images.all
+    output = Array.new
+
+    images.each do |image|
+      tags = Array.new
+
+      image.tag_ids.each do |tag|
+        tags << get_tags.include?(tag)
+      end
+       
+      if image.file.theater.present?
+        @image_file = image.file.theater.url
+      else
+        @image_file = image.file.url
+      end
+
+      output << {
+        image_title: image.title,
+        image_description: image.description,
+        image_file: { url: "http://#{request.host_with_port}#{@image_file}",
+                      thumb: "http://#{request.host_with_port}#{image.file.thumb.to_s}"},
+                      image_tag_names: tags}
+    end
+
+    render :json=>JSON.pretty_generate(output)
+  end
+
+  def imgs
+    @custom_album = CustomAlbum.find(params[:custom_gallery_id])
+    @tag_names = Array.new
+    @images = @custom_album.custom_album_images.asc(:order)
+    @output =  Array.new
+    @images.each do |values|
+    @output << { _id:  values.id.to_s,
+                 theater_link: admin_image_path(values),
+                 description: values.description,
+                 title: values.title,
+                 file: values.file.as_json[:file],
+                 custom_gallery_custom_album_id: values.custom_album_id,
+                 order: values.order,
+                 tags: values.tags}
+    end
+      render :json=>{"images" => @output, "tags" => @custom_album.tags}.to_json
+  end
+
+
+  def upload_process
+    if CustomAlbumUnprocess.first.upload_success
+      custom_album_unprocess = Array(CustomAlbumUnprocess.all)
+      count = custom_album_unprocess.count
+      Thread.new do
+        custom_album_unprocess.each_with_index do |un_image,i|
+          begin
+            custom_album = CustomAlbumImage.all.select{|value| value.id.to_s == un_image.image_id.to_s}[0]
+            custom_album.file = un_image.save_var
+            custom_album.save!
+            file = un_image.save_var.tempfile
+            file.close
+            File.delete file.path
+            un_image.delete
+            variable = CustomAlbumVariable.first
+            variable.progress_filename = custom_album[:file]
+            variable.progress_percent = ((i+1)*100.0/count).floor.to_s + '%'
+            variable.save!
+          rescue => e
+            puts ['err',un_image.inspect,e.inspect]
+            un_image.destroy
+          end
+        end
+        variable = CustomAlbumVariable.first
+        variable.finish = true
+        variable.save!
+      end
+      custom_album_temp = CustomAlbumUnprocess.first
+      custom_album_temp.upload_success = false
+      custom_album_temp.save!
+    end
+  end
+  def start_upload_process
+    custom_album_temp = CustomAlbumUnprocess.first
+    custom_album_temp.upload_success = true
+    custom_album_temp.save!
+    render :json => {}.to_json
+  end
+  def init_upload
+    variable = CustomAlbumVariable.first
+    if variable.nil?
+      variable = CustomAlbumVariable.new
+    end
+    variable.count = params['all_length'].to_i
+    variable.finish = false
+    variable.progress_percent = '0%'
+    variable.progress_filename = 'processing!!'
+    variable.notalive = true
+    variable.save!
+    render :json => {}.to_json
+  end
+  def upload_image
+    custom_album = CustomAlbum.find(params[:custom_album_id])
+    files = params['files']
+    custom_album_unprocess = CustomAlbumUnprocess.new()
+    files.each do |file|
+        image = custom_album.custom_album_images.new
+        image.tags = (custom_album.tags rescue [])
+        if(CustomAlbumVariable.first.count==1 rescue true)
+          image.file = file
+        else
+          custom_album_unprocess.image_id = image.id
+          custom_album_unprocess.upload_success = false
+          custom_album_unprocess.save_var = file
+          custom_album_unprocess.save!
+          ObjectSpace.undefine_finalizer(file.tempfile)
+        end
+        image.save!
+    end
+    render :json=>{"files"=>[{}]}.to_json
+  end
+
+  def last_image_id
+    custom_album = CustomAlbum.find(params[:custom_albumid])
+    lastimage = custom_album.custom_album_images.last
+    render :json => {"last_image_id" => lastimage.id.to_s}.to_json
+  end
+
+  def new_images 
+    @custom_album = CustomAlbum.find(params[:custom_album_id])
+    if params[:last_image_id].present?
+      lastimage = CustomAlbumImage.find(params[:last_image_id])
+      @newimages = @custom_album.custom_album_images.where(:created_at.gt => lastimage.created_at,:order => -1).desc(:created_at)
+    else
+      @newimages = @custom_album.custom_album_images.where(:order => [nil,-1]).desc(:created_at)
+    end
+    render :layout=>false
+  end
+
+
+  def images_tags
+    custom_album = CustomAlbum.find(params[:custom_album_id])
+    tags = Array.new
+    images = custom_album.custom_album_images.all
+    images.each do |image|
+      tags << {"id"=>image.id, "tags" => image.tags}
+    end
+    render :json=>tags.to_json
+  end
+
+  def update
+    custom_album = CustomAlbum.find(params[:id])
+    tagsToDestroy = []
+    tagsToAdd = []
+    new_tags = params[:custom_album][:tags] || []
+    old_tags = custom_album.tags.collect{|t| t.id.to_s}
+    old_tags.each do |tag|
+       if !new_tags.include?(tag)
+        tagsToDestroy << tag
+        end
+    end
+    if new_tags != nil
+      new_tags.each do |tag|
+        if !old_tags.include?(tag)
+          tagsToAdd << tag
+        end
+      end
+    end
+    update_children_image_tag(custom_album,tagsToDestroy,tagsToAdd)
+    custom_album.update_attributes(custom_album_params)
+    redirect_to "/admin/custom_galleries/"+custom_album.id.to_s
+  end
+
+  def update_children_image_tag(custom_album,tagsToDestroy,tagsToAdd)
+      # tagsToDestroy will contain  all tag ids which have to be deleted from the galley_images
+      # tagsToAdd will contain all tag ids which ve to be added in tall custom_album_images
+      images = custom_album.custom_album_images
+      images.each do |image|
+        image_tags = image.tags.collect{|t| t.id.to_s}
+        tagsToAdd.each do |tag|
+          image_tags << tag
+        end
+        tagsToDestroy.each do |tag|
+          if image_tags.include?tag
+            image_tags.delete(tag)
+          end
+        end
+        image.tags = image_tags
+        image.save
+      end
+  end
+
+  private
+    def crop_but_no_backup image
+      fname = image.file.path
+      extension = File.extname(fname)
+      base_name = fname.chomp(extension)
+      base_name += ('_resized'+ extension)
+      File.file?(base_name)
+    end
+    def setup_vars
+      @module_app = ModuleApp.where(:key=>"custom_gallery").first
+    end
+
+    def custom_album_params
+      p = params.require(:custom_album).permit!
+      p["tags"] = p["tags"] || []
+      p
+    end
+end

app/controllers/admin/custom_images_controller.rb

@@ -0,0 +1,107 @@
+class Admin::CustomImagesController < OrbitAdminController
+	before_filter :setup_vars
+	def crop_process
+	end
+	def batch_crop
+        images = params['image_ids'].split(',')
+        @img = []
+		images.each do |image|
+			@img << CustomAlbumImage.find(image)
+		end
+		render 'batch_crop'
+	end
+	def edit
+		@image = CustomAlbumImage.find(params[:id])
+		render 'edit_image'
+	end
+	def show
+		@image = CustomAlbumImage.find(params[:id])
+		@custom_albumid = @image.custom_album_id
+		@custom_album = CustomAlbum.find(@custom_albumid)
+		@images = @custom_album.custom_album_images.asc(:order)
+	end
+
+	def changeorder
+		type = params[:type]
+		if type == "imgholder"
+			images = params[:imageids]
+			images.each_with_index do |image, i|
+				img = CustomAlbumImage.find(image) rescue nil
+				if !img.nil?
+					img.order = i
+					img.save 
+				end
+			end
+		elsif type == "orbit_custom_gallery"
+			custom_albums = params[:imageids]
+			custom_albums.each_with_index do |custom_albumid, i|
+				custom_album = CustomAlbum.find(custom_albumid) rescue nil
+				if !custom_album.nil?
+					custom_album.order = i
+					custom_album.save 
+				end
+			end
+		end
+    	render :json => {"success" => true}.to_json
+  	end
+
+	def delete_photos
+		images = params['images']
+		images.each do |image|
+			img = CustomAlbumImage.find(image)
+			begin
+				FileUtils.rm_rf(File.dirname(img.file.path))
+			rescue => e
+				puts ["can't delete",e]
+			end
+			img.delete
+		end
+		if params['delete_cover'] == "true"
+			custom_album = CustomAlbum.find(params['custom_album_id'])
+			custom_album.update_attributes(:cover=>"default",:cover_path => nil)
+		end
+		render :json =>{"success"=>true}.to_json
+	end
+
+	def image_tagging
+		images = params[:image_ids]
+		tags = params[:tag_ids] || []
+		i = nil
+		images.each do |image|
+			img = CustomAlbumImage.find(image)
+			img.tags = tags
+			img.save
+			i = img
+		end
+		@custom_album = CustomAlbum.find(i.custom_album_id.to_s)
+		@images = @custom_album.custom_album_images
+	    @image_content = []
+	    @images.each do |image|
+	      @image_content << {"id" => image.id.to_s, "description" => image.description_translations,"tags" => image.tags.collect{|t| t.id.to_s}}
+	    end
+		render :json=>{"custom_galleries" => @image_content}.to_json
+	end
+
+	def update_image
+		image = CustomAlbumImage.find(params[:image_id])
+		image.update_attributes(update_params)
+		image.save!
+		@custom_album = CustomAlbum.find(image.custom_album_id.to_s)
+		@images = @custom_album.custom_album_images
+	    @image_content = []
+	    @images.each do |image|
+	      @image_content << {"id" => image.id.to_s, "description" => image.description_translations,"tags" => image.tags.collect{|t| t.id.to_s}}
+	    end
+		render :json=>{"custom_galleries" => @image_content}.to_json
+	end
+
+	private 
+
+	def setup_vars
+  		@module_app = ModuleApp.where(:key=>"custom_gallery").first
+	end
+
+	def update_params
+		params.require(:custom_album_image).permit!
+	end
+end

app/controllers/custom_galleries_controller.rb

@@ -0,0 +1,284 @@
+class CustomGalleriesController < ApplicationController
+
+  find_tag = Tag.all.select{|value| value.name==I18n.t('custom_gallery.not_show_desc')}
+  if find_tag.length==0
+    module_app_id = ModuleApp.where(:key=>"custom_gallery").first[:_id]
+    tags = ModuleApp.where(:key=>"custom_gallery").first.tags
+    tag0 = Tag.new(is_default: false,module_app_ids: [module_app_id])
+    tag1 = Tag.new(is_default: false,module_app_ids: [module_app_id])
+    nowlocale = I18n.locale
+    I18n.available_locales.each do |locale|
+      I18n.locale = locale
+      tag0.name = I18n.t('custom_gallery.show_desc')
+      tag1.name = I18n.t('custom_gallery.not_show_desc')
+    end
+    I18n.locale = nowlocale
+    tag0.save
+    tag1.save
+    tags << tag0
+    tags << tag1
+  elsif find_tag.length>1
+    show_tags = Tag.all.select{|value| value.name==I18n.t('custom_gallery.show_desc')}
+    show_tags.each_with_index do |show_tag,index1|
+      if index1>0
+        if show_tag.taggings.count==0
+          show_tag.delete
+        end
+      end
+    end
+    find_tag.each_with_index do |not_show_tag,index1|
+      if index1>0
+        if not_show_tag.taggings.count==0
+          not_show_tag.delete
+        end
+      end
+    end
+  end
+
+  def index
+    @custom_album_setting = CustomAlbumSetting.first
+    params = OrbitHelper.params
+    page = OrbitHelper.page rescue nil
+    unless page
+      page = Page.where(url:params['url']).first
+    end
+    custom_data_field = page.custom_data_field rescue nil
+    if custom_data_field.nil?
+      custom_data_field = {}
+    elsif custom_data_field["bind_module_app"]
+      custom_data_field["custom_module"] = custom_data_field["bind_module_app"]
+      custom_data_field.delete('bind_module_app')
+    end
+    custom_album_tp = CustomAlbum.where(custom_data_field).filter_by_categories.filter_by_tags
+    all_count = custom_album_tp.count
+    page_data_count = OrbitHelper.page_data_count
+    no_order_count = custom_album_tp.where(:order.in=>[-1,nil]).count
+    with_order_count = all_count - no_order_count
+    with_order_total_pages = (with_order_count.to_f / page_data_count).ceil
+    custom_albums_with_order = custom_album_tp.asc(:order).where(:order.ne=>-1).and(:order.ne=>nil).to_a rescue []
+    page_no = (params[:page_no] || 1).to_i
+    if page_no < with_order_total_pages
+      custom_albums_no_order = []
+    elsif page_no == with_order_total_pages
+      if custom_albums_with_order.count == page_data_count
+        custom_albums_no_order = []
+      else
+        custom_albums_no_order = custom_album_tp.desc(:created_at).where(:order.in=>[-1,nil]).page(nil).per(all_count)[0...(page_data_count - custom_albums_with_order.count)]
+      end
+    else
+      custom_albums_with_order = []
+      start_index = (page_data_count - (with_order_count % page_data_count) + page_data_count*(page_no - 1 - with_order_total_pages))
+      custom_albums_no_order = custom_album_tp.desc(:created_at).where(:order.in=>[-1,nil]).page(nil).per(all_count)[start_index...(start_index+page_data_count)].to_a
+    end
+    custom_albums = custom_albums_with_order.concat(custom_albums_no_order)
+    custom_album_color_map = CustomAlbumColor.where(:custom_album_id.in=> custom_albums.map{|v| v.id}).pluck(:custom_album_id,:color,:custom_album_card_background_color,:custom_album_card_text_color).map{|v| [v[0],v[1..-1]]}.to_h
+    custom_galleries = custom_albums.collect do |a|
+      doc = Nokogiri::HTML(a.description.to_s)
+      alt_text = doc.text.empty? ? 'custom_gallery image' : doc.text
+      colors = custom_album_color_map[a.id]
+      {
+        "custom_album-name" => a.name,
+        "custom_album-description" => a.description,
+        "alt_title" => alt_text,
+        "link_to_show" =>  OrbitHelper.url_to_show(a.to_param),
+        "thumb-src" => a.cover_path || "/assets/custom_gallery/default.jpg",
+        "custom_album_color" => iterate_data(colors[1],colors[0],@custom_album_setting.custom_album_card_background_color,'transparent'),
+        "custom_album_card_text_color" => iterate_data(colors[2],@custom_album_setting.custom_album_card_text_color)
+      }
+    end
+    {
+      "custom_albums" => custom_galleries,
+      "extras" => {"widget-title"=>"CustomGallery"},
+      "total_pages" => custom_album_tp.total_pages
+    }
+  end
+  def show
+    @custom_album_setting = CustomAlbumSetting.first
+    params = OrbitHelper.params
+    custom_album = CustomAlbum.find_by_param(params[:uid])
+    flag = show_desc?
+    colors = CustomAlbumColor.where(:custom_album_id=> custom_album.id).pluck(:color,:custom_album_card_background_color,:custom_album_card_text_color)[0] rescue []
+    images = custom_album.custom_album_images.asc(:order).collect do |a|
+      alt_text = (a.description.blank? ? "custom_gallery image" : Nokogiri::HTML(a.description.to_s).text())
+      {
+        "image-description" => (flag ? a.description : ''),
+        "image_short_description" => a.title,
+        "alt_title" => alt_text,
+        "link_to_show" =>  "#" + a.id.to_s,
+        "thumb-src" => a.file.thumb.url,
+        "thumb-large-src" => a.file.thumb_large.url,
+        "mobile-src" => a.file.mobile.url,
+        "theater-src" => a.file.theater.url,
+
+        "custom_album_color" => iterate_data(colors[1],colors[0],@custom_album_setting.custom_album_card_background_color,'transparent'),
+        "custom_album_card_text_color" => iterate_data(colors[2],@custom_album_setting.custom_album_card_text_color)
+      }
+    end
+    {
+      "images" => images,
+      "data" => {"custom_album-title"=>custom_album.name,
+                 "custom_album-description" => (flag ? "<p><span>#{custom_album.description}</span></p>" : "")}
+    }
+  end
+  def iterate_data(*args)
+    tmp = nil
+    args.each do |arg|
+      if !arg.blank? && arg != 'transparent'
+        tmp = arg
+        break
+      end
+    end
+    tmp
+  end
+  def self.custom_widget_data
+    @custom_configs = CustomAlbumConfig.all.to_a
+    ac = ActionController::Base.new
+    ac.render_to_string("custom_galleries/custom_widget_data",:locals=>{:@custom_data_field=>@custom_data_field,:@custom_configs=>@custom_configs,:@field_name=>@field_name})
+  end
+  def custom_album_widget
+    @custom_album_setting = CustomAlbumSetting.first
+    params = OrbitHelper.params
+    tags = OrbitHelper.widget_tags.empty? ? ["all"] : OrbitHelper.widget_tags
+    custom_album_tp = CustomAlbum.filter_by_widget_categories(OrbitHelper.widget_categories,false).filter_by_tags(tags)
+    all_count = custom_album_tp.count
+    page_data_count = OrbitHelper.widget_data_count
+    no_order_count = custom_album_tp.where(:order.in=>[-1,nil]).count
+    with_order_count = all_count - no_order_count
+    with_order_total_pages = (with_order_count.to_f / page_data_count).ceil
+    custom_albums_with_order = custom_album_tp.asc(:order).where(:order.ne=>-1).and(:order.ne=>nil).to_a rescue []
+    page_no = (params[:page_no] || 1).to_i
+    if page_no < with_order_total_pages
+      custom_albums_no_order = []
+      custom_albums_with_order = custom_albums_with_order[(page_no-1)*page_data_count...page_no*page_data_count]
+    elsif page_no == with_order_total_pages
+      if custom_albums_with_order.count == page_data_count
+        custom_albums_no_order = []
+      else
+        custom_albums_no_order = custom_album_tp.desc(:created_at).where(:order.in=>[-1,nil]).page(nil).per(all_count)[0...(page_data_count - custom_albums_with_order.count)]
+      end
+    else
+      custom_albums_with_order = []
+      start_index = (page_data_count - (with_order_count % page_data_count) + page_data_count*(page_no - 1 - with_order_total_pages))
+      custom_albums_no_order = custom_album_tp.desc(:created_at).where(:order.in=>[-1,nil]).page(nil).per(all_count)[start_index...(start_index+page_data_count)].to_a
+    end
+    custom_albums = custom_albums_with_order.concat(custom_albums_no_order)
+    custom_album_color_map = CustomAlbumColor.where(:custom_album_id.in=> custom_albums.map{|v| v.id}).pluck(:custom_album_id,:color,:custom_album_card_background_color,:custom_album_card_text_color).map{|v| [v[0],v[1..-1]]}.to_h
+    custom_galleries = custom_albums.collect.with_index do |a,i|
+      doc = Nokogiri::HTML(a.description.to_s)
+      alt_text = doc.text.empty? ? 'custom_gallery image' : doc.text.strip
+      colors = custom_album_color_map[a.id]
+      thumb_src = a.cover_path || "/assets/custom_gallery/default.jpg"
+      cover_image = CustomAlbumImage.find(a.cover) rescue a.custom_album_images.first
+      image_description = a.description
+      image_short_description = a.name
+      {
+        "link_text" => a.name,
+        "custom_album-name" => a.name,
+        "custom_album-description" => a.description,
+        "alt_title" => alt_text,
+        "link_to_show" =>  OrbitHelper.widget_more_url + "/" + a.to_param + "#" + (cover_image.id.to_s rescue ""),
+        "src" => thumb_src.gsub("thumb_",""),
+        "thumb-src" => thumb_src,
+        "thumb-large-src" => thumb_src.gsub("thumb_","thumb_large_"),
+        "mobile-src" => thumb_src.gsub("thumb_","mobile_"),
+        "theater-src" => thumb_src.gsub("thumb_","theater_"),
+        "image_description" => image_description,
+        "image_short_description" => image_short_description,
+        "custom_album_color" => iterate_data(colors[1],colors[0],@custom_album_setting.custom_album_card_background_color,'transparent'),
+        "custom_album_card_text_color" => iterate_data(colors[2],@custom_album_setting.custom_album_card_text_color),
+        "i" => i
+      }
+    end
+    {
+      "images" => custom_galleries,
+      "extras" => {"widget-title"=>"CustomGallery","more_url" => OrbitHelper.widget_more_url,"more_text"=>(locale == :en ? 'more' : '更多照片')}
+    }
+  end
+  def widget
+    @custom_album_setting = CustomAlbumSetting.first
+    tags = OrbitHelper.widget_tags.empty? ? ["all"] : OrbitHelper.widget_tags
+    custom_album_ids = CustomAlbum.filter_by_widget_categories(OrbitHelper.widget_categories,false).filter_by_tags(tags).pluck(:id)
+    custom_album_color_map = CustomAlbumColor.where(:custom_album_id.in=> custom_album_ids).pluck(:custom_album_id,:color,:custom_album_card_background_color,:custom_album_card_text_color).map{|v| [v[0],v[1..-1]]}.to_h
+    params = OrbitHelper.params
+    counts = OrbitHelper.widget_data_count
+    images = CustomAlbumImage.where({custom_album_id:{"$in"=>custom_album_ids}}).desc(:id).limit(counts *5).sample(counts)
+    images = images.each_with_index.collect do |a,i|
+      colors = custom_album_color_map[a.custom_album_id]
+      alt_text = (a.description.blank? ? "custom_gallery image" : Nokogiri::HTML(a.description).text().strip)
+      {
+        "link_text" => "",
+        "link_to_show" =>  OrbitHelper.widget_more_url + "/" + a.custom_album.to_param + "#" + a.id.to_s,
+        "alt_title" => alt_text,
+        "src" => a.file.url,
+        "thumb-src" => a.file.thumb.url,
+        "thumb-large-src" => a.file.thumb_large.url,
+        "image_description" => a.description,
+        "image_short_description" => a.title,
+        "mobile-src" => a.file.mobile.url,
+        "theater-src" => a.file.theater.url,
+        "custom_album-name" => a.custom_album.name_translations[I18n.locale],
+        "custom_album_color" => iterate_data(colors[1],colors[0],@custom_album_setting.custom_album_card_background_color,'transparent'),
+        "custom_album_card_text_color" => iterate_data(colors[2],@custom_album_setting.custom_album_card_text_color),
+        "i" => i
+      }
+    end
+    {
+      "images" => images,
+      "extras" => {"widget-title"=>"CustomGallery","more_url" => OrbitHelper.widget_more_url,"more_text"=>(locale == :en ? 'more' : '更多照片')}
+    }
+  end
+  def imgs(custom_album_id)
+    custom_album = CustomAlbum.find(custom_album_id)
+    tag_names = Array.new
+    images = custom_album.custom_album_images.asc(:order)
+    output =  Array.new
+    images.each do |values|
+      alt_text = (values.description.nil? || values.description == "" ? "custom_gallery image" : values.description)
+      output << { _id:  values.id.to_s,
+                  description: values.description,
+                  title: values.title,
+                  alt_title: alt_text,
+                  url: values.file.url,
+                  file: values.file.as_json[:file],
+                  custom_gallery_custom_album_id: values.custom_album_id,
+                  tags: values.tags}
+    end
+    return output
+  end
+  def theater
+    if params[:id].include?('page=')
+      custom_album = CustomAlbum.where(uid: params[:id].sub('page=','')).first
+      custom_albumid = custom_album.id
+      image = custom_album.custom_album_images.first
+    else
+      image = CustomAlbumImage.find(params[:id])
+      custom_albumid = image.custom_album_id
+      custom_album = CustomAlbum.find(custom_albumid)
+    end
+    images = custom_album.custom_album_images.asc(:order)
+    data = {
+      "custom_album" => custom_album,
+      "image" => image.id.to_s,
+      "images" => imgs(custom_albumid)
+    }
+    render :json => {"data" => data}.to_json
+  end
+
+  private
+
+  def show_desc?
+    tags = OrbitHelper.page_tags if tags.blank?
+    tags = [tags].flatten.uniq
+    flag = true
+    tag_temp = Tag.all.select{|value| tags.include? value.id.to_s}
+    tag_temp_length = 0
+    tag_temp.each do |value|
+      if value.name==I18n.t('custom_gallery.show_desc')
+        flag = true
+      elsif value.name==I18n.t('custom_gallery.not_show_desc')
+        flag = false
+      end
+    end
+    flag
+  end
+end

app/helpers/admin/custom_galleries_helper.rb

@@ -0,0 +1,46 @@
+module Admin::CustomGalleriesHelper
+  def back_end_breadcrumb
+    if params[:controller] == "admin/custom_galleries"
+      res = ''
+      divider = "<span class='divider'>/</span>"
+      res << "<li><a href='#{admin_dashboards_path}'>#{t(:dashboard_)}</a>#{divider}</li>"
+      if params[:custom_module]
+        trans_name = I18n.t("module_name.#{params[:custom_module]}")
+        if trans_name.include?("translation missing")
+          trans_name = params[:custom_module]
+        end
+        res << "<li><a href='/admin/#{params[:custom_module].pluralize}'>#{trans_name}</a>#{divider}</li>"
+      end
+      if params[:action] != "index"
+        if params[:custom_module]
+          extra_url = "/#{params[:custom_module]}#{params[:bind_uid].present? ? ('-'+params[:bind_uid]) : ''}"
+        end
+        res << "<li><a href='/#{params[:controller]}#{extra_url}'>#{t('module_name.'+@module_app.key)}</a>#{divider}</li>"
+        res << "<li class='active'>#{t(params[:action], scope: 'restful_actions')}</li>"
+      else
+        res << "<li>#{t('module_name.'+@module_app.key)}</li>"
+      end
+      res.html_safe
+    else
+      super
+    end
+  end
+  def import_this_image(row,custom_album)
+    value = {}
+    image = CustomAlbumImage.new
+    image.custom_album = custom_album
+    row.cells.each_with_index do |cell,index|
+      val = cell.value rescue nil
+      next if val.blank?
+      case index
+      when 0
+        image.remote_file_url = val
+      when 1
+        value["zh_tw"] = val
+        value["en"] = (row.cells[index + 1].value rescue "")
+        image.description_translations = value
+      end
+    end
+    image.save
+  end
+end

app/models/custom_album.rb

@@ -0,0 +1,119 @@
+class CustomAlbum
+  include Mongoid::Document
+  include Mongoid::Timestamps
+
+  include OrbitCategory::Categorizable
+  include OrbitTag::Taggable
+  include Slug
+
+  field :custom_module
+  field :bind_uid
+  field :name, as: :slug_title, localize: true
+  field :description, localize: true
+  field :cover, default: "default"
+  field :cover_path   #can  refact
+  field :tag_names
+  field :uid, type: String
+  field :rss2_id, type: String
+  field :order, type: Integer, default: -1
+  field :resize_gravity
+	# has_and_belongs_to_many :tags, :class_name => "CustomGalleryTag"
+  has_many :custom_album_images, :autosave => true, :dependent => :destroy
+  has_many :custom_album_colors, :autosave => true, :dependent => :destroy
+  accepts_nested_attributes_for :custom_album_images, :allow_destroy => true
+  accepts_nested_attributes_for :custom_album_colors, :allow_destroy => true
+  before_save do |record|
+    if record.order.nil? || record.order == -1
+      topest_order = CustomAlbum.all.pluck(:order).sort{|a,b| a.to_i<=>b.to_i}.first
+      if topest_order.nil? || topest_order == 0
+        record.order = -2
+      else
+        record.order = topest_order - 1
+      end
+    end
+  end
+  after_create do
+    custom_record_callback(1)
+  end
+  after_destroy do
+    custom_record_callback(-1)
+  end
+  def custom_record_callback(num)
+    if self.custom_module && self.bind_uid.present?
+      custom_album_config = CustomAlbumConfig.where(:module=>self.custom_module).first
+      if custom_album_config && custom_album_config.custom_record_callback.present? && custom_album_config.bind_model.present?
+        target_model = custom_album_config.bind_model.constantize rescue nil
+        if target_model
+          target_record = target_model.where(custom_album_config.uid_field=>self.bind_uid).first
+          target_record.send(custom_album_config.custom_record_callback,num)
+        end
+      end
+    end
+  end
+  def resize_gravity
+    """
+    NorthWestGravity
+      Position object at top-left of region
+    NorthGravity
+      Position object at top-center of region
+    NorthEastGravity
+      Position object at top-right of region
+    WestGravity
+      Position object at left-center of region
+    CenterGravity
+      Position object at center of region
+    EastGravity
+      Position object at right-center of region
+    SouthWestGravity
+      Position object at left-bottom of region
+    SouthGravity
+      Position object at bottom-center of region
+    SouthEastGravity
+      Position object at bottom-right of region
+    """
+    tmp = self[:resize_gravity]
+    (tmp.blank? ? (CustomAlbumSetting.first.resize_gravity.blank? ? "Center" : CustomAlbumSetting.first.resize_gravity)  : tmp) rescue 'Center'
+  end
+  def self.find_by_param(input)
+    self.find_by(uid: input)
+  end
+  def self.filter_by_tags(tags=[])
+    tags = OrbitHelper.page_tags if tags.blank?
+    tags = [tags].flatten.uniq
+    if !(tags.include?("all"))
+        tag_temp = Tag.all.select{|value| tags.include? value.id.to_s}
+        tag_temp_length = 0
+        tag_temp.each do |value| 
+          if value.name==I18n.t('custom_gallery.show_desc') || value.name==I18n.t('custom_gallery.not_show_desc')
+            tag_temp_length+=1
+          end
+        end
+        if tag_temp_length!=0
+            if (tags.length - tag_temp_length) == 0
+               tags = ['all'] 
+            end
+        end
+    end
+    if tags.blank? || (tags.include?("all") rescue false)
+      self.all
+    else
+      tags
+      taggings = Tagging.where(:tag_id.in=>tags).map{|item| item.taggable_id}
+      self.where(:id.in=>taggings)
+    end
+  end
+  def cover
+    tmp = self['cover']
+    if tmp=='default'
+      tmp = (self.custom_album_images.first.id.to_s rescue 'default')
+    end
+    tmp
+  end
+  def cover_path
+    tmp = self['cover_path']
+    if tmp.nil?
+      tmp = (self.custom_album_images.first.file.thumb.url rescue nil)
+    end
+    tmp
+  end
+end

app/models/custom_album_color.rb

@@ -0,0 +1,9 @@
+class CustomAlbumColor
+  include Mongoid::Document
+  include Mongoid::Timestamps
+  field :color, type: String
+  field :custom_album_card_background_color, type: String
+  field :custom_album_card_text_color, type: String
+  
+  belongs_to :custom_album
+end

app/models/custom_album_config.rb

@@ -0,0 +1,10 @@
+class CustomAlbumConfig
+  include Mongoid::Document
+  include Mongoid::Timestamps
+  field :module
+  field :bind_model , :type => String
+  field :title_field , :type => String , :default => "slug_title"
+  field :uid_field , :type => String , :default => "uid"
+  field :custom_record_callback #if exists, it will call 'custom_record_callback(num)' 
+  								#where num is 1 when create bulletin, num is -1 when destroy.
+end

app/models/custom_album_crop.rb

@@ -0,0 +1,8 @@
+class CustomAlbumCrop
+  include Mongoid::Document
+  field :crop_x, type: String
+  field :crop_y, type: String
+  field :crop_w, type: String
+  field :crop_h, type: String
+  belongs_to :custom_album_image
+end

app/models/custom_album_image.rb

@@ -0,0 +1,27 @@
+require 'net/http'
+class CustomAlbumImage 
+  include Mongoid::Document
+  include Mongoid::Timestamps
+  include OrbitTag::Taggable
+	mount_uploader :file, CustomGalleryUploader
+	field :title
+  field :title_translations, type: Hash, default: {}
+	field :description, localize: true
+	field :rss2_id, type: String
+	field :order, type: Integer, default: -1
+  
+	# has_and_belongs_to_many :tags, :class_name => "CustomGalleryTag"
+  def title_translations
+    tmp = super || {}
+    if tmp == {}
+      tmp = I18n.available_locales.collect{|locale| [locale,self[:title]]}.to_h
+    end
+    tmp
+  end
+  def title
+    self.title_translations[I18n.locale]
+  end
+	belongs_to :custom_album
+    has_many :custom_album_crops, :autosave => true, :dependent => :destroy
+    accepts_nested_attributes_for :custom_album_crops, :allow_destroy => true
+end

app/models/custom_album_setting.rb

@@ -0,0 +1,9 @@
+class CustomAlbumSetting
+  include Mongoid::Document
+  include Mongoid::Timestamps
+  field :limit
+  field :resize_gravity, type: String, default: 'center'
+  ResizeGravities = %w[Center NorthWest North NorthEast West East SouthWest South SouthEast]
+  field :custom_album_card_background_color, default: ''
+  field :custom_album_card_text_color, default: '#000000'
+end

app/models/custom_album_unprocess.rb

@@ -0,0 +1,18 @@
+class CustomAlbumUnprocess 
+	include Mongoid::Document
+	field :image_id
+	field :save_var, type: String
+	field :upload_success, type: Boolean
+	def save_var
+		temp = YAML.load(self[:save_var])
+		temp[:tempfile] = File.open(temp[:tempfile])
+		ActionDispatch::Http::UploadedFile.new(temp)
+	end
+	def save_var=(value)
+		temp = {:filename => value.original_filename, 
+				:type => value.content_type, 
+				:head => value.headers, 
+				:tempfile => value.tempfile.path}
+		self[:save_var] = temp.to_yaml
+	end
+end

app/models/custom_album_variable.rb

@@ -0,0 +1,8 @@
+class CustomAlbumVariable
+	include Mongoid::Document
+	field :count, type: Integer
+	field :progress_percent, type: String
+	field :progress_filename, type: String
+	field :finish, type: Boolean
+	field :notalive, type: Boolean
+end

app/uploaders/custom_gallery_uploader.rb

@@ -0,0 +1,183 @@
+# encoding: utf-8
+module CarrierWave
+  module Uploader
+    module Versions
+      def store_dir
+        "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
+      end
+    end
+  end
+end
+
+class CustomGalleryUploader < CarrierWave::Uploader::Base
+  # Include RMagick or ImageScience support:
+  # include CarrierWave::RMagick
+  # include CarrierWave::ImageScience
+    include CarrierWave::MiniMagick
+  # 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/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
+  end
+  def get_org_url
+    if have_crop?
+        model.file.resized.url
+    else
+        model.file.url
+    end
+  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
+  #   "/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
+  process :resizer
+  process :optimize
+  version :resized, :if => :have_crop?  do #backup
+    def full_filename(for_file)
+        extension = File.extname(super(for_file))
+        base_name = super(for_file).split('resized_').join('').chomp(extension)
+        base_name + '_resized'+ extension
+    end
+  end
+  version :crop_from_org, :if => :have_crop?  do
+    process :crop_it
+    def full_filename(for_file)
+        super(for_file).split('crop_from_org_').join('')
+    end
+  end
+  version :thumb do
+    process :convert => 'png', :if => :transparent?
+    process :pad_process => [200,200]
+  end
+  version :thumb_large do
+    process :convert => 'png', :if => :transparent?
+    process :pad_process => [600,600]
+  end
+  version :theater do
+    process :limit_process => [1920, 1080]
+  end
+  version :mobile do
+    process :limit_process => [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)
+# end
+
+# Override the filename of the uploaded files:
+# def filename
+#   "something.jpg" if original_filename
+# end
+  
+#  def manipulate!
+#    raise current_path.inspect
+#    image = ::MiniMagick::Image.open(current_path)
+#    image = yield(image)
+#    image.write(current_path)
+#    ::MiniMagick::Image.open(current_path)
+#  rescue ::MiniMagick::Error, ::MiniMagick::Invalid => e
+#    raise CarrierWave::ProcessingError.new("Failed to manipulate with MiniMagick, maybe it is not an image? Original Error: #{e}")
+#  end
+  def get_w_and_h
+    if have_crop?
+        img = MiniMagick::Image.open(model.file.resized.path)
+    else
+        img = MiniMagick::Image.open(model.file.path)
+    end
+    [img[:width], img[:height]]
+  end
+  def rotate_ang(angle)
+    if have_crop?
+      img_path = model.file.resized.path
+    else
+      img_path = model.file.path
+    end
+    puts img_path
+    img = MiniMagick::Image.open(img_path)
+    img.rotate(angle)
+    puts img
+    img.write(img_path)
+  end
+  def optimize (*arg)
+    manipulate! do |img|
+        return img unless img.mime_type.match /image\/jpeg/
+        img.strip
+        img.combine_options do |c|
+            c.quality "90"
+            c.depth "24"
+            c.interlace "plane"
+        end
+        img
+    end
+  end
+  private
+  def resizer
+    size_of_file = size.to_f / (2**20)
+    if size_of_file > 5
+        img = MiniMagick::Image.open(path)
+        img_width = img[:width]
+        img_height = img[:height]
+        multiple = [img_width/Math.sqrt(size_of_file/5)/1920,img_height/Math.sqrt(size_of_file/5)/1080].max
+        if (multiple - multiple.to_i)>0.5
+            multiple = multiple.to_i + 0.5
+        else
+            multiple = multiple.to_i
+        end
+        resize_to_limit(multiple*1920,multiple*1080)
+    else
+        manipulate! do |img|
+            img
+        end
+    end
+  end
+  def limit_process(w,h)
+    resize_to_limit(w,h)
+  end
+  def have_crop?(*arg)
+    !(model.custom_album_crops.first.nil?)
+  end
+  def crop_it
+    crops = model.custom_album_crops.first
+    x=(crops.crop_x).to_i.abs.to_s
+    y=(crops.crop_y).to_i.abs.to_s
+    w=crops.crop_w.to_i
+    h=crops.crop_h.to_i
+    crop_image("#{w}x#{h}+#{x}+#{y}")
+  end
+  def crop_image(geometry)
+    img = MiniMagick::Image.open(model.file.resized.path)
+    img.crop(geometry)
+    img.write(model.file.crop_from_org.path)
+  end  
+  def transparent?(*arg)
+    now_custom_album = model.custom_album
+    now_custom_album.custom_album_colors.first['color']=='transparent' rescue true
+  end
+  def pad_process (w,h)
+    now_custom_album = model.custom_album
+    resize_and_pad(w, h, (transparent? ? :transparent : now_custom_album.custom_album_colors.first['color']), (now_custom_album.resize_gravity rescue 'Center'))
+  end
+end
+

app/views/admin/custom_galleries/_custom_album.html.erb

@@ -0,0 +1,29 @@
+<li class="rgcustom_album" data-image-id="<%= custom_album.id %>">
+  <div class="check">
+    <input type="checkbox" class="checkbox" name='custom_album_id' value='<%= custom_album.id %>'>
+  </div>
+  <a href="<%= admin_custom_gallery_path(custom_album.id) %>">
+    <% if custom_album.cover == "default" %>
+     <%= image_tag "custom_gallery/default.jpg" %>
+    <% else %>
+     <img src="<%= custom_album.cover_path %>">
+    <% end %>
+    <p class="custom_albumname"><%= custom_album.name %></p>
+  </a>
+  <ul class="custom_gallery_info clearfix">
+    <!-- <li class="view"><i class="icons-eye"></i> 321</li> -->
+    <li><i class="icons-tag"></i></li>
+    <% if can_edit_or_delete?(custom_album) %>
+      <li><%= link_to (content_tag(:i,"",:class=>"icon-trash danger")), admin_custom_gallery_path(custom_album.id), "data-confirm" => "Are you sure?", :method=>:delete %></li>
+    <% end %>
+    <li class="custom_albumcateg"><%= (Category.find(custom_album.category_id).title rescue custom_album.category_id) %></li>
+  </ul>
+  <ul class="custom_albumtag">
+    <!--
+      <%# custom_album.tags.each do |tag| %>
+        <%# r = @tags.select { |k| k.id.to_s == tag.id.to_s } %>
+         <li class="label"><%# r.map {|t| t.name}[0]%></li>
+      <%# end%>
+    -->
+  </ul>
+</li>

app/views/admin/custom_galleries/_custom_albums.html.erb

@@ -0,0 +1,14 @@
+<%= render :partial => "custom_album", :collection => @custom_albums %>
+<script type="text/javascript">
+  $(document).ready(function(){
+    if( params()['keywords']){
+        $('#edit-order-btn').css("display",'none');
+    }else{
+        $('#edit-order-btn').css("display",''); 
+    }
+    max_page = <%= (@fiter_custom_albums.length/@limit_count).ceil rescue 1 %>
+    if( max_page > 1 && max_page >= page_no){
+        $("#edit-order-btn").hide();
+    }
+  })
+</script>

app/views/admin/custom_galleries/_form.html.erb

@@ -0,0 +1,202 @@
+<% content_for :page_specific_css do %>
+  <%= stylesheet_link_tag "lib/main-forms" %>
+  <%= stylesheet_link_tag "lib/fileupload" %>
+  <%= stylesheet_link_tag "lib/main-list" %>
+  <%= stylesheet_link_tag "jquery.minicolors" %>
+<% 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/modal-preview" %>
+  <%= javascript_include_tag "lib/file-type" %>
+  <%= javascript_include_tag "jquery.minicolors" %>
+<% end %>
+<style>
+.main-forms fieldset .input-area .module-area {
+    padding: 20px;
+    overflow: visible;
+}
+input.minicolors-input{
+    height: 2.5em;
+    max-width: 90%;
+}
+</style>
+<script type="text/javascript">
+  function set_transparent(trigger) {
+      var color_input_box = $(trigger).parents('.control-group').eq(0).find('.minicolors-input')
+      if (trigger.checked){
+          color_input_box.attr('data-color',color_input_box.val())
+          color_input_box.minicolors('value','transparent')
+          color_input_box.prop('disabled',true)
+      }
+      else{
+          color_input_box.minicolors('value',color_input_box.attr('data-color'))
+          color_input_box.prop('disabled',false)
+      }
+  }
+  $(document).ready( function() {
+      $('.minicolors-input').minicolors({
+        defaultValue: '',
+        format: 'hex',
+        letterCase: 'lowercase',
+        position: 'bottom left',
+        change: function(value, opacity) {
+          if( !value ) return;
+          if( opacity ) value += ', ' + opacity;
+        },
+        theme: 'bootstrap'
+      });
+      $('.minicolors-input').attr('autocomplete','off')
+      $('.minicolors').css('margin','0 10px')
+      $('.minicolors').css('height','34px')
+      $('*').submit(function () {
+        $.each($(this).find('input.minicolors-input'),function(){
+          var value = $(this).val();
+          if (value == ''){
+              $(this).find('input.minicolors-input').val('transparent');
+              $(this).find('input.minicolors-input').prop('disabled',false); 
+          }
+        })
+        return true
+      })
+  });
+</script>
+   <fieldset>           
+            <!-- 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="#tag" data-toggle="tab"><%= t(:tags) %></a>
+                </li>
+                <li>
+                  <a href="#frame_color" data-toggle="tab"><%= t('custom_gallery.recreate_thumb') %></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>
+            <!-- Tag Module -->
+                <div class="tab-pane fade" id="tag">
+
+                  <!-- Tag -->
+                  <div class="control-group">
+                    <label class="control-label muted"><%= t(:tags) %></label>
+                    <%= select_tags(f, @module_app) %>
+                  </div>
+                </div>
+            <!-- Frame Color Module -->
+                <% if @custom_album.custom_album_colors.first.nil? %>
+                    <% @custom_album.custom_album_colors.new('color' => 'transparent') %>
+                <% end %>
+                <%= f.fields_for :custom_album_colors do |custom_album_color_form| %>
+                    <div class="tab-pane fade" id="frame_color">
+                      <!-- Frame Color -->
+                      <div class="control-group" style='display: flex;'>
+                        <label class="control-label muted"><%= t('custom_gallery.recreate_thumb') %></label>
+                        <%= custom_album_color_form.text_field :color , :class => 'input-block-level minicolors-input' %>
+                        <span style='font-size: 20px;display: flex;align-items: center;'>
+                        <input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
+                        <%= t('custom_gallery.transparent') %>
+                        </span>
+                      </div>
+                      <div class="control-group" style='display: flex;'>
+                        <label class="control-label muted"><%= t('custom_gallery.custom_album_card_background_color') %></label>
+                        <%= custom_album_color_form.text_field :custom_album_card_background_color, :class => 'input-block-level minicolors-input' %>
+                        <span style='font-size: 20px;display: flex;align-items: center;'>
+                        <input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
+                        <%= t('custom_gallery.transparent') %>
+                        </span>
+                      </div>
+                      <div class="control-group" style='display: flex;'>
+                        <label class="control-label muted"><%= t('custom_gallery.custom_album_card_text_color') %></label>
+                        <%= custom_album_color_form.text_field :custom_album_card_text_color, :class => 'input-block-level minicolors-input' %>
+                        <span style='font-size: 20px;display: flex;align-items: center;'>
+                        <input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
+                        <%= t('custom_gallery.transparent') %>
+                        </span>
+                      </div>
+                      <div class="control-group">
+                        <label class="control-label muted">
+                          <%= t('custom_gallery.thumb_resize_reference') %>
+                        </label>
+                        <div class="controls">
+                          <%= f.select :resize_gravity, [["---#{t("default")}: #{t("custom_gallery.gravity.#{CustomAlbumSetting::ResizeGravities[0]}")}---",nil]]+CustomAlbumSetting::ResizeGravities.collect{|v| [t("custom_gallery.gravity.#{v}"),v]} %>
+                        </div>
+                      </div>
+                    </div>
+                <% end %>
+              </div>
+              </div>
+              <div class='input-area'>
+                  <div class="nav-name"><strong><%= t(:language) %></strong></div>
+                     <ul class="nav nav-pills language-nav">
+                      <% @site_in_use_locales.each_with_index do |locale, i| %>
+                          <li <%= (i == 0 ? 'class=active' : '') %>>
+                            <a href=".<%= locale %>" data-toggle="tab"><%= t(locale.to_s) %></a>
+                          </li>
+                       <% end %>
+                    </ul>
+                    <div class="tab-content language-area">
+                  <!-- Language Tabs -->
+                   
+                     
+                        <% @site_in_use_locales.each_with_index do |locale, i| %>
+    
+                             <div class="tab-pane fade in <%= (i == 0 ? 'active' : '') %> <%= locale %>">
+                              <div class="control-group input-title">
+                                <%= f.fields_for :name_translations do |name| %>
+                                    <%= label_tag(locale, t("custom_gallery.custom_album_name"),:class=>"control-label muted") %>
+                                    <div class="controls">
+                                       <%= name.text_field locale, :class => "input-block-level", :placeholder=>"#{t(:title)}",:value => (@custom_album.name_translations[locale] rescue nil) %>
+                                    </div>
+                                 <% end %> 
+                              </div>
+                              <div class="control-group input-content">
+                                 <%= f.fields_for :description_translations do |desc| %>
+                                     <%= label_tag(locale, t("custom_gallery.custom_album_desc"), :class=>"control-label muted") %>
+                                    <div class="controls">
+                                      <div class="textarea">
+                                        <%= desc.text_area locale, :class => "ckeditor input-block-level", :value => (@custom_album.description_translations[locale] rescue nil)%>
+                                      </div>
+                                    </div>
+                                <% end %>
+                              </div>
+                            </div>
+                        <% end %>
+                               
+                  </div>
+                 
+                </div>
+                <!-- Form Actions -->
+                <div class="form-actions">
+                  <%= f.submit t("custom_gallery.save"), :class=> "btn btn-primary bt-form-save" %>
+                  <%= link_to t('cancel'), admin_custom_galleries_path + (params[:custom_module].blank? ? '' : "/#{params[:custom_module]}#{(params[:bind_uid].blank? ? '' : ('-'+params[:bind_uid]))}"), :class=>"btn" %> 
+                  <% if params[:custom_module].present? %>
+                    <%= f.hidden_field :custom_module, :value=> params[:custom_module] %>
+                    <% if params[:bind_uid].present? %>
+                      <%= f.hidden_field :bind_uid, :value=> params[:bind_uid] %>
+                    <% end %>
+                  <% end %>
+                </div>
+            </div>
+          </fieldset>

app/views/admin/custom_galleries/_image.html.erb

@@ -0,0 +1,18 @@
+<li class="rgcustom_album" data-image-id="<%= image.id.to_s %>">
+	<a href="<%= admin_image_path(image.id) %>">
+    	<img src="<%= image.file.thumb %>">
+	</a>
+	<% if can_edit_or_delete?(@custom_album) %>
+		<span class="photo_edit" style="position: absolute;top: 0;background: #fff;padding: 5px;">
+		<a style="height:auto;color: #000;width: auto;" href="/<%= I18n.locale.to_s%>/admin/images/<%=image.id.to_s %>/edit">
+		<i class="<%= (@custom_album.cover.to_s == image.id.to_s)? "editimage" : "editimage-2" %>"></i>edit</a></span>
+		<ul class="photo-action clearfix">
+			<li class="photo_cover"><i class="<%= (@custom_album.cover.to_s == image.id.to_s)? "icons-star" : "icons-star-2" %>"></i></li>
+			<li class="phtot_depiction"><a href="#view-photo-depiction" class="open" for="description"><i class="icon-comment-alt"></i></a></li>
+			<li class="phtot_tag"><a href="#view-photo-tags" class="open" for="tags"><i class="icons-tag"></i></a></li>
+		</ul>
+	<% end %>
+	<div class="check">
+		<input type="checkbox" class="checkbox">
+	</div>
+</li>

app/views/admin/custom_galleries/_recreate_thumb.html.erb

@@ -0,0 +1,106 @@
+<%= javascript_include_tag "jquery.minicolors.js" %>
+<%= stylesheet_link_tag "jquery.minicolors.css" %>
+<nobr style='display: block;display: flex;flex-wrap: wrap;width: 100%;'>
+<form method="get" action="/admin/custom_galleries/recreate_image?" name="thumb_recreate_form" 
+    style='display: block;display: inline-flex;flex-wrap: wrap;align-items: center;width: 100%;'>
+<span style="display:inline-flex;align-items:center;padding:0 1%;height:34px;font-size: 1.5em;">
+<%= t('custom_gallery.recreate_thumb')+':' %>
+</span>
+<input style='height:26px;max-width: 80%;' class='minicolors-input' type="text" name="color_choice" value="<%= @color_save.to_s %>" autocomplete="off">
+<span style='font-size: 20px;'>
+<input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
+<%= t('custom_gallery.transparent') %>
+</span>
+<button type="button" onclick='submit_msg()' style='margin: 0 10px;height: 34px;'>
+<%= t('custom_gallery.recreate') %>
+</button>
+<input type="hidden" name="custom_album_id" value="">
+<span style='display: inline-flex;align-items: center;'>
+<input type='checkbox' name='use_default' value='true' onchange='hide_input(this)' style='width: 18px;height: 18px;margin: 0;'> 
+<label style='font-size: 20px;margin: 0;'><%= t('custom_gallery.use_set') %></label>
+</span>
+</form>
+<span style='display: inline-flex;align-items: center;padding-bottom: 20px;padding-left: 10px;'>
+<input type='radio' name='checkbox' onchange='set_checked(this)'> 
+<label style='font-size: 20px;margin: 0;'><%= t('custom_gallery.checked') %></label>
+<input type='radio' name='checkbox' onchange='set_unchecked(this)'> 
+<label style='font-size: 20px;margin: 0;'><%= t('custom_gallery.unchecked') %></label>
+</span>
+</nobr>
+<script type="text/javascript"> 
+function hide_input(trigger) {
+    if (trigger.checked){
+        $('.minicolors').css('display','none')
+    }
+    else{
+        $('.minicolors').css('display','block')
+    }
+}
+function set_transparent(trigger) {
+    if (trigger.checked){
+        $('.minicolors-input').attr('data-color',$('.minicolors-input').val())
+        $('.minicolors-input').minicolors('value','')
+        $('.minicolors-input').prop('disabled',true)
+    }
+    else{
+        $('.minicolors-input').minicolors('value',$('.minicolors-input').attr('data-color'))
+        $('.minicolors-input').prop('disabled',false)
+    }
+}
+function set_checked(trigger) {
+    if (trigger.checked){
+        $(".rgbody input[name='custom_album_id']").prop('checked',true)
+    }
+}
+function set_unchecked(trigger) {
+    if (trigger.checked){
+        $(".rgbody input[name='custom_album_id']").prop('checked',false)
+    }
+}
+function submit_msg() { 
+    var msg = "<%= t('custom_gallery.sure?') %>"; 
+    if (confirm(msg)==true){ 
+        $("form[name='thumb_recreate_form']").submit();
+        return true; 
+    }else{ 
+        return false; 
+    } 
+} 
+$("form[name='thumb_recreate_form']").submit(function () {
+    var formdata = new Array;
+    var data = $(".rgbody input[name='custom_album_id']")
+    var count=data.length; 
+    var permit = true
+    for (i=0;i<count;i++){
+		if (data[i].checked){
+			formdata.push($(data[i]).val())
+		}
+    }
+    if (formdata.length===0){
+        permit = false
+    }
+	$("form[name='thumb_recreate_form']").find("input[name='custom_album_id']").val(formdata.join(','))
+	if (permit){
+        return true;
+    }
+    else{
+        alert('<%= t('custom_gallery.no_choose') %>')
+        return false;
+    }
+})
+$(document).ready( function() {
+    $('.minicolors-input').minicolors({
+      defaultValue: $(this).data('defaultValue') || '',
+      format: 'hex',
+      letterCase: 'lowercase',
+      position: 'bottom left',
+      change: function(value, opacity) {
+        if( !value ) return;
+        if( opacity ) value += ', ' + opacity;
+      },
+      theme: 'bootstrap'
+    });
+    $('.minicolors').css('margin','0 10px')
+    $('.minicolors').css('height','34px')
+});
+</script>

app/views/admin/custom_galleries/create.js.erb

@@ -0,0 +1,3 @@
+var gal = new custom_galleryAPI();
+gal.loadCustomAlbums("all");
+rcom.modalWindowClose();

app/views/admin/custom_galleries/display_enable_modules.html.erb

@@ -0,0 +1,74 @@
+<% if params[:custom_module].blank? %>
+	<div class="bind_modules_list">
+		<ul>
+			<% @custom_album_configs.each do |c|%>
+				<% target_model = c.bind_model.constantize rescue nil %>
+				<% next if target_model.nil? %>
+				<li>
+					<a href="<%= admin_custom_galleries_path + "/#{c.module}" %>">
+						<% icon_class = OrbitApp::Module::SideBarRegistration.all.select{|r| r.get_module_app_key == c.module}.first.get_icon_class rescue '' %>
+						<i class="<%= icon_class %> icon_big"></i>
+						<%= t("module_name.#{c.module}") %>
+					</a>
+				</li>
+			<% end %>
+		</ul>
+	</div>
+<% else %>
+	<% config = @custom_album_configs.where(:module=>params[:custom_module]).first %>
+	<% target_model = config.bind_model.constantize %>
+	<% page_num = params[:page] || 1 %>
+	<% target_records = target_model.where(config.title_field.to_sym.nin=>[nil,""]).page(page_num).per(10) %>
+	<% if params[:search_title].present?
+		  target_records = target_records.where(config.title_field.to_sym=>/#{params[:search_title].gsub(/(\[|\]|\(|\)|\.)/){|f| "\\"+f}}/)
+	   end %>
+	<h3><%= t("module_name.#{config.module}") %></h3>
+	<form>
+		<input id="search_title" type="text" name="search_title" placeholder="<%= t(:title) %>" value="<%=params[:search_title]%>"><button><%= t(:search_) %></button>
+	</form>
+	<table class="table main-list footable-loaded tablet">
+		<thead>
+			<th class="span5"><%= t(:title) %></th>
+			<th class="span2"><%= t("custom_gallery.total_amount") %></th>
+		</thead>
+		<% target_records.each do |record| %>
+			<tr>
+				<% uid = record.send(config.uid_field) %>
+				<td>
+					<a href="<%= admin_custom_galleries_path + "/#{config.module}-#{uid}" %>" title="<%=record.send(config.title_field)%>"><%= record.send(config.title_field) %></a>
+				</td>
+				<td>
+					<%= CustomAlbum.where(:custom_module=>params[:custom_module],:bind_uid=>uid).count %>
+				</td>
+			</tr>
+		<% end %>
+	</table>
+	<%=
+	  content_tag :div, class: "bottomnav clearfix" do
+	    content_tag :div, paginate(target_records), class: "pagination pagination-centered"
+	  end
+	%>
+<% end %>
+<style type="text/css">
+	 i.icon_big{
+        font-size: 3em;
+        display: block;
+    }
+    .bind_modules_list li{
+        font-size: 1.3em;
+        list-style: none;
+        float: left;
+        margin: 0.8em;
+    }
+    .bind_modules_list a{
+        color: black;
+    }
+    .bind_modules_list a:hover {
+	    text-decoration: none;
+	    color: #403f3f;
+	}
+	#search_title{
+		margin-bottom: 0;
+		margin-right: 1em;
+	}
+</style>

app/views/admin/custom_galleries/edit.html.erb

@@ -0,0 +1,3 @@
+<%= form_for @custom_album, :url => {:action => "update"}, :html => {:class => 'form-horizontal main-forms'} do |f| %>
+  <%= render :partial => 'form', :locals => {:f => f} %>
+<% end %>

app/views/admin/custom_galleries/excel_format.xlsx.axlsx

@@ -0,0 +1,28 @@
+# encoding: utf-8
+
+wb = xlsx_package.workbook
+
+wb.add_worksheet(name: @custom_album.name[0..100]) do |sheet|
+
+  sheet.merge_cells "A1:C1"
+  heading = sheet.styles.add_style(:b => true, :locked => true, :alignment=>{:horizontal => :center})
+  example = sheet.styles.add_style(:i => true)
+  row = []
+  row1 = []
+  row2 = []
+
+  row << "Import for custom_album #{@custom_album.name}"
+
+  row1 << t("custom_gallery.img_link")
+  row2 << "http://www.example.com/example.jpg"
+
+  row1 << t("custom_gallery.img_description") + "(" + t(:zh_tw) + ")"
+  row2 << "This is an image"
+  row1 << t("custom_gallery.img_description") + "(" + t(:en) + ")"
+  row2 << "This is an image"
+
+  sheet.add_row row, :style => heading
+  sheet.add_row row1
+  sheet.add_row row2, :style => example
+
+end

app/views/admin/custom_galleries/import.html.erb

@@ -0,0 +1,36 @@
+<% content_for :page_specific_javascript do %>
+	<script type="text/javascript" src="/assets/validator.js"></script>
+<% end %>
+<form action="<%= importimages_admin_custom_gallery_path(@custom_album.id) %>" method="post" class="form-horizontal main-forms" id="import-images-xls"  enctype="multipart/form-data">
+	<h3 style="padding-left: 30px;">Import from Excel for custom_album <i><%= @custom_album.name %></i></h3>
+	<%= hidden_field_tag :authenticity_token, form_authenticity_token %>
+	<div class="input-area">
+		<div class="control-group">
+			<div class="controls">
+		 		<a href="<%= excel_format_admin_custom_gallery_path(@custom_album.id,:format => "xlsx") %>">Download example sheet here.</a>  
+		 	</div>
+		 </div>
+		 <div class="control-group">
+		    <label for="import-images" class="control-label muted">Upload :</label>
+		    <div class="controls">
+		       <input type="file" id="import-images" name="import_file" data-fv-validation="required;mustbexls;" data-fv-messages="Cannot be empty; Must be an excel file.;" />
+	       <span class="help-block"> Only excel file is allowed. Max 200 entries.</span>
+	    </div>
+	  </div>
+	</div>
+	<div class="form-actions">
+		<input type="submit" value="Import" class="btn btn-primary">
+	</div>
+</form>
+
+<script type="text/javascript">
+	var form = new FormValidator($("#import-images-xls"));
+	form.validate_functions.mustbexls = function(val){
+		var t = val.split("."),
+			ext = t[t.length - 1];
+		return (ext == "xls" || ext == "xlsx")
+	}
+	<% if params[:error] == "1" %>
+		alert("More than 200 rows present.");
+	<% end %>
+</script>

app/views/admin/custom_galleries/index.html.erb

@@ -0,0 +1,87 @@
+<% if @show_script %>
+  <%= stylesheet_link_tag "custom_gallery" %>
+  <%= stylesheet_link_tag "lib/tags-groups" %>
+  <% content_for :page_specific_javascript do %>
+   <%= javascript_include_tag "lib/jquery-ui-1.10.0.custom.min" %>
+    <%= javascript_include_tag "jquery.masonry.min.js" %>
+    <%= javascript_include_tag "jquery.lite.image.resize.js" %>
+    <%= javascript_include_tag "custom_gallery" %>
+    <script type="text/javascript">
+      var page_no = 2
+      var catch_flag = true
+      var max_page = <%= (@fiter_custom_albums.length/@limit_count).ceil rescue 1 %>
+      if( max_page > 1){
+        $("#edit-order-btn").hide();
+      }
+      $('.bottomnav').ready(function(){
+        function load_html_func(){
+          $('#load_html').text("<%= t('custom_gallery.wait_time') %>")
+          if (catch_flag){
+            catch_flag = true;
+            $.ajax({
+              type : "get",
+              url : "<%= @url %>",
+              dataType : "text",
+              data:{page_no: page_no},
+              global:false,
+              success: function(data)
+               {
+                $('#orbit_custom_gallery').append(data)
+                page_no++
+                catch_flag = true
+                if (max_page < page_no){
+                  $("#edit-order-btn").show();
+                  $('#load_html').hide();
+                }
+                $('#load_html').text("<%= t('custom_gallery.load_html') %>")
+               },
+              error : function(data){
+                catch_flag = true
+                alert('please try again later.')
+              }
+            });
+          }
+        }
+        $('#load_html').click(load_html_func)
+      })
+    </script>
+  <% end %>
+
+  <%=  render_filter @filter_fields, "orbit_custom_gallery" %>
+  <% custom_config = CustomAlbumConfig.where(:module=>params[:custom_module]).first %>
+  <% target_model = custom_config.bind_model.constantize %>
+  <h3><%= target_model.where(custom_config.uid_field=>params[:bind_uid]).first.send(custom_config.title_field) %></h3>
+  <div class="order-edit-notification">CustomAlbums re-ordering enabled.</div>
+  <%= render 'recreate_thumb' %>
+  <script type="text/javascript">
+    $(document).ready(function(){
+      $('form.update_custom_album_setting_form').submit(function(){
+        window.setTimeout(function(){alert('success')},500)
+      })
+    })
+  </script>
+  <%= form_tag '/admin/custom_galleries/update_custom_album_setting',remote: true,:class=>'update_custom_album_setting_form' do %>
+    <%= t('custom_gallery.custom_album_limit_for_one_page') %>:
+    <%= text_field_tag :custom_album_setting_limit, CustomAlbumSetting.first.limit,:placeholder => t('custom_gallery.blank_for_nil') %>
+    <input type="submit" value="<%= t('submit') %>">
+  <% end %>
+  <div class="rgbody" style='float: left;'>
+  	<ul id="orbit_custom_gallery" class="custom_gallery clearfix" data-custom_gallery-id="custom_gallery" 
+  	    style='display: inline-flex;flex-wrap: wrap;'>
+  	        <%= render :partial => "custom_albums"%>
+  	</ul>
+  </div>
+  <div class="bottomnav clearfix">
+    <div class="action pull-right">
+      <% if can_edit_or_delete?(nil) %>
+        <a href="#" class="btn btn-small btn-info order-btn-class" id="edit-order-btn"><%= t('custom_gallery.edit_order') %></a>
+      <% end %>
+      <% if @fiter_custom_albums.length > @limit_count %>
+        <button class="btn btn-small btn-info" id="load_html"><%= t('custom_gallery.load_html') %></button>
+      <% end %>
+      <a class="btn btn-small btn-primary" href="<%= (params[:custom_module].blank? ? "#{@module_app.key.pluralize}/new" : "#{params[:custom_module]}#{params[:bind_uid].present? ? ('-'+params[:bind_uid]) : ''}/new") %>"><%=t(:new_)%></a>
+    </div>
+  </div>
+<% else %>
+  <%= render :partial => "custom_albums" %>
+<% end %>

app/views/admin/custom_galleries/new.html.erb

@@ -0,0 +1,5 @@
+<div id="poststuff">
+<%= form_for @custom_album, :url => {:action => "create"},  :html => {:class => 'form-horizontal main-forms'} do |f| %>
+       <%= render :partial => 'form', :locals => {:f => f} %>
+<% end %>
+</div>

app/views/admin/custom_galleries/new_images.html.erb

@@ -0,0 +1,3 @@
+<% @newimages.each do |image| %>
+	<%= render :partial=>"image", :object=>image %>
+<% end %> 

app/views/admin/custom_galleries/recreate_image.html.erb

@@ -0,0 +1,39 @@
+<%= t('custom_gallery.progressbar')+':' %>
+<div style='width:100%;'>
+  <div class="progress">
+    <div class="progress-bar" style="width: 0%;text-align:center;background:#86f9fe;background: linear-gradient(90deg,#86f9fe,#2900f8);">0</div>
+  </div>
+  <div class="message" style='width:100%;text-align:center;'></div>
+</div>
+<SCRIPT LANGUAGE=javascript> 
+function get_data(){
+    var finish=false;
+    $.ajax({
+        url : "/admin/custom_galleries/recreate_image/recreate_progress",
+        dataType : "json",
+        type : "post",
+        success:function(data){
+            $(".progress-bar").text(data.percent)
+            $(".message").text(data.filename)
+            finish = data.finish
+            if (finish){
+                $.get('/admin/custom_galleries/recreate_image/finish_recreate')
+                clearInterval(id)
+                document.location.href = '/admin/custom_galleries'
+                console.log('finish!')
+            }
+            $(".progress-bar").css('width',data.percent)
+        },
+        error:function(XMLHttpRequest, textStatus){
+            console.log(XMLHttpRequest);  //XMLHttpRequest.responseText    XMLHttpRequest.status   XMLHttpRequest.readyState
+            console.log(textStatus);
+            $(".progress-bar").text("<%= t('custom_gallery.error') %>");
+            console.log('error')
+            $.get('/admin/custom_galleries/recreate_image/finish_recreate')
+            $(".progress-bar").css('width','100%')
+            clearInterval(id)
+        }
+        })
+}
+var id = setInterval(get_data,1000)
+</SCRIPT>

app/views/admin/custom_galleries/setting.html.erb

@@ -0,0 +1,79 @@
+<%= javascript_include_tag "jquery.minicolors" %>
+<%= stylesheet_link_tag "jquery.minicolors" %>
+<style type="text/css">
+  .control-group {
+    align-items: center;
+  }
+  .control-group {
+    align-items: center;
+  }
+</style>
+<script type="text/javascript">
+  function set_transparent(trigger) {
+      var color_input_box = $(trigger).parents('.control-group').eq(0).find('.minicolors-input')
+      if (trigger.checked){
+          color_input_box.attr('data-color',color_input_box.val())
+          color_input_box.minicolors('value','transparent')
+          color_input_box.prop('disabled',true)
+      }
+      else{
+          color_input_box.minicolors('value',color_input_box.attr('data-color'))
+          color_input_box.prop('disabled',false)
+      }
+  }
+  $(document).ready( function() {
+      $('.minicolors-input').minicolors({
+        defaultValue: '',
+        format: 'hex',
+        letterCase: 'lowercase',
+        position: 'bottom left',
+        change: function(value, opacity) {
+          if( !value ) return;
+          if( opacity ) value += ', ' + opacity;
+        },
+        theme: 'bootstrap'
+      });
+      $('.minicolors-input').attr('autocomplete','off')
+      $('.minicolors').css('margin','0 10px')
+      $('.minicolors').css('height','34px')
+      $('*').submit(function () {
+        $.each($(this).find('input.minicolors-input'),function(){
+          var value = $(this).val();
+          if (value == ''){
+              $(this).find('input.minicolors-input').val('transparent');
+              $(this).find('input.minicolors-input').prop('disabled',false); 
+          }
+        })
+        return true
+      })
+  });
+</script>
+<%= form_for @custom_album_setting, url: '/admin/custom_galleries/update_custom_album_setting',:class=>'update_custom_album_setting_form',method: 'post' do |f| %>
+  <div class="control-group" style='display: flex;'>
+    <label class="control-label muted"><%= t('custom_gallery.custom_album_limit_for_one_page') %></label>
+    <%= f.text_field :limit,:placeholder => t('custom_gallery.blank_for_nil') %>
+  </div>
+  <div class="control-group" style='display: flex;'>
+    <label class="control-label muted"><%= t('custom_gallery.thumb_resize_reference') %></label>
+    <%= f.select :resize_gravity, [["---#{t("default")}: #{t("custom_gallery.gravity.#{CustomAlbumSetting::ResizeGravities[0]}")}---",nil]]+CustomAlbumSetting::ResizeGravities.collect{|v| [t("custom_gallery.gravity.#{v}"),v]} %>
+  </div>
+  <div class="control-group" style='display: flex;'>
+    <label class="control-label muted"><%= t('custom_gallery.custom_album_card_background_color') %></label>
+    <%= f.text_field :custom_album_card_background_color, :class => 'input-block-level minicolors-input' %>
+    <span style='font-size: 20px;display: flex;align-items: center;'>
+    <input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
+    <%= t('custom_gallery.transparent') %>
+    </span>
+  </div>
+  <div class="control-group" style='display: flex;'>
+    <label class="control-label muted"><%= t('custom_gallery.custom_album_card_text_color') %></label>
+    <%= f.text_field :custom_album_card_text_color, :class => 'input-block-level minicolors-input' %>
+    <span style='font-size: 20px;display: flex;align-items: center;'>
+    <input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
+    <%= t('custom_gallery.transparent') %>
+    </span>
+  </div>
+    
+  <%= f.hidden_field :id %>
+  <%= f.submit t('submit'),:class=>'btn btn-primary' %>
+<% end %>

app/views/admin/custom_galleries/show.html.erb

@@ -0,0 +1,275 @@
+<%= stylesheet_link_tag "custom_gallery" %>
+<%= stylesheet_link_tag "lib/tags-groups" %>
+<!-- <div class="topnav clearfix">
+  <ul class="breadcrumb text-info pull-left">
+    <li><a href="/orbit_4.0.1/admin/dashboards/dashboards.shtml"><%= t('custom_gallery.dashboard') %></a> <span class="divider">/</span></li>
+    <li><a href="<%#= panel_custom_gallery_back_end_custom_albums_path %>"><%= t('custom_gallery.custom_gallery') %></a> <span class="divider">/</span></li>
+    <li class="active"><%#= @custom_album.name %></li>
+  </ul>
+</div> -->
+<!-- Bottom Nav -->
+<input name='all_upload_length' type="hidden">
+<div class="order-edit-notification">Images re-ordering enabled.</div>
+<div class="bottomnav clearfix">
+  <div class="action pull-left">
+    <a href="<%= admin_custom_galleries_path %>" class="btn btn-small"><i class="icons-back"></i> <%= t('custom_gallery.back') %></a>
+    <a href="javascript:select_all()" class='btn btn-small'> <%= t('custom_gallery.checked') %></a>
+  </div>
+  <div class="action pull-right">
+    <div id="crop_div" style="text-align: center;">
+      <%= t('custom_gallery.crop_div').html_safe %>
+      <br>
+      <span id="show_degree">0</span>°
+      <br>
+      <button onclick="change_degree(90)"><%= t('custom_gallery.add_degree') %></button>
+      <button onclick="change_degree(-90)"><%= t('custom_gallery.reduce_degree') %></button>    
+    </div>
+    <a href="javascript:rotate()" class="btn btn-small hide crop"><%= t('custom_gallery.rotate_images') %></a>
+    <a href="javascript:batch_crop()" class="btn btn-small hide crop"><%= t('custom_gallery.batch_crop') %></a>
+    <a href="#" class="btn btn-inverse btn-small deselect hide"><%= t('custom_gallery.deselect') %></a>
+    <% if can_edit_or_delete?(@custom_album) %>
+      <a href="#dialog" data-toggle="modal" class="btn btn-warning btn-small deletephoto hide"><i class="icons-cross-3"></i><%= t('custom_gallery.delete_photo') %></a>
+      <a href="#view-photo-tags" class="btn btn-primary btn-small addtags open hide" for="batch"><i class="icons-tag"></i><%= t('custom_gallery.add_tags') %></a>
+      <a href="<%= import_admin_custom_gallery_path(@custom_album.id) %>" class="btn btn-small btn-info"><i class="icons-download"></i><%= t('custom_gallery.import') %></a>
+      <b class="divider"></b>
+      <a href="<%= edit_admin_custom_gallery_path(@custom_album.id) %>" class="btn btn-small btn-success"><i class="icon-edit"></i> <%= t('custom_gallery.edit') %></a>
+      <a href="#" class="btn btn-small btn-info order-btn-class" id="edit-order-btn"><%= t('custom_gallery.edit_order') %></a>
+      <b class="divider"></b>
+     
+      <a href="#" class="add-imgs btn btn-small btn-primary"><i class="icons-plus"></i><%= t('custom_gallery.add_image') %></a>
+    <% end %>
+  </div>
+  <form action="<%= admin_custom_galleries_upload_image_path %>", id='fileupload'>
+    <!-- Redirect browsers with JavaScript disabled to the origin page -->
+    <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
+    <div class="fileupload-buttonbar">
+      <div class="navbar">
+        <div class="navbar-inner">
+          <ul class="nav">
+            <li>
+              <div class="fileinput-button add-photo">
+                <i class="icon-plus icon-white"></i>
+                <span><%= t('custom_gallery.add_files') %>...</span>
+                <input type="file" name="files[]" multiple>
+              </div>
+                <input type="hidden" value="<%= @custom_album.id.to_s %>" name="custom_album_id" id="fileupload_aid" />
+            </li>
+            <li>
+              <button type="submit" class="start add-photo" onclick="form_submit()">
+                <i class="icon-upload icon-white"></i>
+                <span><%= t('custom_gallery.start_upload') %></span>
+              </button>
+            </li>
+            <li>
+              <button type="reset" class="cancel add-photo">
+                <i class="icon-ban-circle icon-white"></i>
+                <span><%= t('custom_gallery.cancel_upload') %></span>
+              </button>
+            </li>
+            <!-- <li>
+              <button type="button" class="delete">
+                <i class="icons-trash icon-white"></i>
+                <span><%= t('custom_gallery.delete') %></span>
+              </button>
+            </li> -->
+          </ul>
+        </div>
+      </div>
+      <!-- The global progress information -->
+      <div class="fileupload-progress">
+          <!-- The global progress bar -->
+          <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+              <div class="bar" style="width:0%;"></div>
+          </div>
+          <!-- The extended global progress information -->
+          <div class="progress-extended"></div>
+      </div>
+    </div>
+    <!-- Drop Zone -->
+    <div id="dropzone" class="drop">
+      <div data-icons="&#xe0a3;"></div>
+      <%= t('custom_gallery.drop_files_here') %>
+    </div>
+    <!-- The loading indicator is shown during file processing -->
+    <div class="fileupload-loading"></div>
+    <!-- The table listing the files available for upload/download -->
+    <div id="file-list" class="nano">
+      <div class="content">
+        <ul role="presentation" class="files clearfix">
+        </ul>
+      </div>
+    </div>
+  </form>
+</div>
+
+<div class="rgbody">
+  <div class="custom_gallery-info">
+    <h3><%= @custom_album.name %></h3>
+    <p class="muted"><%= @custom_album.description.html_safe %></p>
+  </div> 
+  <ul id="imgholder" class="custom_gallery clearfix" data-custom_gallery-id="<%= @custom_album.id.to_s %>">
+    <% @images.each do |image| %>
+      <%= render :partial=>"image", :object=>image %>
+    <% end %>
+  </ul>
+</div>
+ <div id="dialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="Delete item" aria-hidden="true">
+    <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+      <h3>Delete Photo?</h3>
+    </div>
+    <div class="modal-body">
+      <span class="text-warning text-center">This action can not be restored, are you sure you want to delete?</span>
+      <div class="spinning">
+        <i class="icon-spinner icon-spin icon-4x"></i>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+      <button class="delete-item btn btn-danger" id="delete_selected_photos_btn">Delete</button>
+    </div>
+  </div>
+ <div id="view-photo-tags" class="nano" style="display:none">
+      <div class="content">
+        <form>
+          <fieldset style="display: contents;">
+           <legend>Tags</legend>
+            <ul class="tags-groups">
+              <% @tags.each do |tag| %>
+              <li class="filter-item">
+                <p class="card pull-left">
+                  <input type="checkbox" value="<%= tag.id.to_s %>">
+                </p>
+                <a>
+                  <% @site_in_use_locales.each_with_index do |locale, i| %>
+                    <span class="tag"><%= tag.name_translations[locale] %></span>
+                    <% if @site_in_use_locales.count-1 != i %>
+                      /
+                    <% end %>  
+                  <% end %>
+                </a>
+              </li>
+              <% end %>
+            </ul>
+            <div class="form-actions">
+              <a href="javascript:$.pageslide.close()" class="btn btn-small"><%= t('custom_gallery.cancel')  %></a>
+              <input type="submit" value="Save" class="btn btn-primary" />
+            </div>
+          </fieldset>
+        </form>
+      </div>
+    </div>
+
+    <div id="view-photo-depiction" class="nano" style="display:none">
+      <div class="content">
+        <form for="description" method="post" data-remote="true" action="/admin/custom_galleries/update_image">
+          <fieldset>
+            <div class="btn-group">
+              <% @site_in_use_locales.each_with_index do |locale, i| %>
+                <a class="btn<%= ' active in' if i == 0 %>" id="btn-<%= locale %>-fake" data-toggle="tab" href="#form-<%= locale %>"><%= t(locale) %></a>
+              <% end %>
+            </div>
+            <div class="tab-content">
+              <% @site_in_use_locales.each_with_index do |locale, i| %>
+                  <div id="form-<%= locale %>-fake" role="tabpanel" aria-labelledby="btn-<%= locale %>" class="tab-pane fade <%= ( i == 0 ) ? "in active" : '' %>">
+                    <legend><%= I18n.t('description') %></legend>
+                    <textarea class="ckeditor_reduce description-editor" rows="10" name="custom_album_image[description_translations][<%= locale %>]" for="<%= locale %>"></textarea>
+
+                    <legend><%= I18n.t('custom_gallery.short-description') %></legend>
+                    <textarea class="ckeditor_reduce title-editor" rows="10" name="custom_album_image[title_translations][<%= locale %>]" for="<%= locale %>"></textarea>
+                  </div>
+              <% end %>
+            </div>
+            <div class="form-actions">
+              <a href="javascript:$.pageslide.close()" class="btn btn-small"><%= t('custom_gallery.cancel')  %></a>
+              <input type="submit" value="Save" class="btn btn-primary" />
+              <input type="hidden" value="" name="image_id" />
+            </div>
+          </fieldset>
+        </form>
+      </div>
+    </div>
+
+<script type="text/javascript">
+  var photosData = <%= @photos_data.html_safe %>;
+</script>
+
+<% content_for :page_specific_javascript do %>
+  <%= javascript_include_tag "jquery.masonry.min.js" %>
+  <%= javascript_include_tag "jquery.lite.image.resize.js" %>
+  <%= javascript_include_tag "lib/checkbox.card" %>
+  <%= javascript_include_tag "file-upload/vendor/jquery.ui.widget.js" %>
+  <%= javascript_include_tag "file-upload/tmpl.min.js" %>
+  <%= javascript_include_tag "file-upload/load-image.min.js" %>
+  <%= javascript_include_tag "file-upload/canvas-to-blob.min.js" %>
+  <%= javascript_include_tag "file-upload/jquery.iframe-transport.js" %>
+  <%= javascript_include_tag "file-upload/jquery.fileupload.js" %>
+  <%= javascript_include_tag "file-upload/jquery.fileupload-fp.js" %>
+  <%= javascript_include_tag "file-upload/jquery.fileupload-ui.js" %>
+  <%= javascript_include_tag "file-upload/drop-zone.js" %>
+  <%= javascript_include_tag "custom_gallery" %>
+<% end %>
+ <!-- The template to display files available for upload -->
+<script id="template-upload" type="text/x-tmpl">
+    {% for (var i=0, file; file=o.files[i]; i++) { %}
+      <li class="template-upload fade">
+        <ul class="clearfix">
+            <li class="action-bnt">
+              {% if (o.files.valid && !i) { %}
+                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
+                  <div class="bar" style="width:0%;"></div>
+                </div>
+                {% if (!o.options.autoUpload) { %}
+                  <button class="btn btn-primary start" onclick="form_only_one_submit()">
+                    <i class="icon-upload icon-white"></i>
+                  </button>
+                {% } %}
+              {% } %}
+              {% if (!i) { %}
+                <button class="btn btn-warning cancel">
+                  <i class="icon-ban-circle icon-white"></i>
+                </button>
+              {% } %}
+            </li>
+            <li class="preview pull-left"><span class="fade"></span></li>
+            <li class="name-size">
+              <p>{%=file.name%}</p>
+              {% if (file.error) { %}
+                <p class="error"><span class="label label-important">Error</span> {%=file.error%}</p>
+              {% } else if (o.files.valid && !i) { %}
+                <p class="label label-info">{%=o.formatFileSize(file.size)%}</p>
+              {% } %}
+            </li>
+          </ul>
+      </li>
+    {% } %}
+  </script>
+  <!-- The template to display files available for download -->
+<script id="template-download" type="text/x-tmpl">
+  {% for (var i=0, file; file=o.files[i]; i++) { %}
+    <li class="template-download fade">
+      <ul class="clearfix">
+        {% if (file.error) { %}
+          <li class="name-size">
+            <p>{%=file.name%}</p>
+            <p class="error"><span class="label label-important">Error</span> {%=file.error%}</p>
+          </li>
+        {% } else { %}
+          <li class="preview">
+            {% if (file.thumbnail_url) { %}
+              <a href="{%=file.url%}" title="{%=file.name%}" data-custom_gallery="custom_gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
+            {% } %}
+          </li>
+          <li class="name-size">
+            <p><a href="{%=file.url%}" title="{%=file.name%}" data-custom_gallery="{%=file.thumbnail_url&&'custom_gallery'%}" download="{%=file.name%}">{%=file.name%}</a></p>
+            <p ><span class="label label-success"><%= t('custom_gallery.success') %></span><%= t('custom_gallery.file_uploaded_successfully') %>!</p>
+            <p class="label label-info">{%=o.formatFileSize(file.size)%}</p>
+          </li>
+        {% } %}
+      </ul>
+    </li>
+  {% } %}
+</script>
+
+
+

app/views/admin/custom_galleries/upload_panel.html.erb

@@ -0,0 +1,107 @@
+<html>
+<head>
+<%= csrf_meta_tag %>
+<%= javascript_include_tag "jquery-latest" %>
+<%= stylesheet_link_tag "jquery-ui" %>
+<%= stylesheet_link_tag "jquery.fileupload-ui.css" %>
+
+</head>
+<body>
+<div id='scroller_for_panel'>
+<div id="fileupload">
+    <%= form_for @custom_album, :url => panel_custom_gallery_back_end_upload_image_path, :html => {:class => 'clear'} do |f| %>
+        <div class="fileupload-buttonbar">
+            <label class="fileinput-button">
+                <span><%= t('custom_gallery.add_files') %>...</span>
+                <input type="file" name="files[]" multiple>
+            </label>
+             <input type="hidden" value="<%= params[:custom_album_id] %>" name="custom_album_id" id="fileupload_aid" />
+            <button type="submit" class="start"><%= t('custom_gallery.start_upload') %></button>
+            <button type="reset" class="cancel"><%= t('custom_gallery.cancel_upload') %></button>
+           <!-- <button type="button" class="delete">Delete files</button>-->
+        </div>
+    <!-- </form> -->
+    <% end %>
+    <div class="fileupload-content">
+        <table class="files"></table>
+        <div class="fileupload-progressbar"></div>
+    </div>
+</div>
+<script id="template-upload" type="text/x-jquery-tmpl">
+    <tr class="template-upload{{if error}} ui-state-error{{/if}}">
+        <td class="preview"></td>
+        <td class="name">{{if name}}${name}{{else}}Untitled{{/if}}</td>
+        <td class="size">${sizef}</td>
+        {{if error}}
+            <td class="error" colspan="2">Error:
+                {{if error === 'maxFileSize'}}File is too big
+                {{else error === 'minFileSize'}}File is too small
+                {{else error === 'acceptFileTypes'}}Filetype not allowed
+                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
+                {{else}}${error}
+                {{/if}}
+            </td>
+        {{else}}
+            <td class="progress"><div></div></td>
+            <td class="start"><button>Start</button></td>
+        {{/if}}
+        <td class="cancel"><button>Cancel</button></td>
+    </tr>
+</script>
+<script id="template-download" type="text/x-jquery-tmpl">
+    <tr class="template-download{{if error}} ui-state-error{{/if}}">
+        {{if error}}
+            <td></td>
+            <td class="name">${name}</td>
+            <td class="size">${sizef}</td>
+            <td class="error" colspan="2">Error:
+                {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
+                {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
+                {{else error === 3}}File was only partially uploaded
+                {{else error === 4}}No File was uploaded
+                {{else error === 5}}Missing a temporary folder
+                {{else error === 6}}Failed to write file to disk
+                {{else error === 7}}File upload stopped by extension
+                {{else error === 'maxFileSize'}}File is too big
+                {{else error === 'minFileSize'}}File is too small
+                {{else error === 'acceptFileTypes'}}Filetype not allowed
+                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
+                {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
+                {{else error === 'emptyResult'}}Empty file upload result
+                {{else}}${error}
+                {{/if}}
+            </td>
+        {{else}}
+            <td class="preview">
+                {{if thumbnail_url}}
+                    <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
+                {{/if}}
+            </td>
+            <td class="name">
+                <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a>
+            </td>
+            <td class="size">${sizef}</td>
+            <td colspan="2"></td>
+        {{/if}}
+       
+    </tr>
+</script>
+
+</div>
+
+    <%= javascript_include_tag "jquery-ui.min" %>
+    <%= javascript_include_tag "jquery.tmpl.min" %>
+    <%= javascript_include_tag "jquery.iframe-transport" %>
+    <%= javascript_include_tag "jquery.fileupload" %>
+    <%= javascript_include_tag "jquery.fileupload-ui" %>
+    <%= javascript_include_tag "upload" %>
+    
+</body>
+</html>
+
+<!-- <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
+<script src="../../js/custom_gallery/jquery.iframe-transport.js"></script>
+<script src="../../js/custom_gallery/jquery.fileupload.js"></script>
+<script src="../../js/custom_gallery/jquery.fileupload-ui.js"></script>
+<script src="../../js/custom_gallery/upload.js"></script> -->

app/views/admin/custom_galleries/upload_process.html.erb

@@ -0,0 +1,39 @@
+<%= t('custom_gallery.progressbar')+':' %>
+<div style='width:100%;'>
+  <div class="progress">
+    <div class="progress-bar" style="width: 0%;text-align:center;background:#86f9fe;background: linear-gradient(90deg,#86f9fe,#2900f8);">0</div>
+  </div>
+  <div class="message" style='width:100%;text-align:center;'></div>
+</div>
+<SCRIPT LANGUAGE=javascript> 
+function get_data(){
+    var finish=false;
+    $.ajax({
+        url : "/admin/custom_galleries/recreate_image/recreate_progress",
+        dataType : "json",
+        type : "post",
+        success:function(data){
+            $(".progress-bar").text(data.percent)
+            $(".message").text(data.filename)
+            finish = data.finish
+            if (finish){
+                $.get('/admin/custom_galleries/recreate_image/finish_recreate')
+                clearInterval(id)
+                document.location.href = '/admin/custom_galleries'
+                console.log('finish!')
+            }
+            $(".progress-bar").css('width',data.percent)
+        },
+        error:function(XMLHttpRequest, textStatus){
+            console.log(XMLHttpRequest);  //XMLHttpRequest.responseText    XMLHttpRequest.status   XMLHttpRequest.readyState
+            console.log(textStatus);
+            $(".progress-bar").text("<%= t('custom_gallery.error') %>");
+            console.log('error')
+            $.get('/admin/custom_galleries/recreate_image/finish_recreate')
+            $(".progress-bar").css('width','100%')
+            clearInterval(id)
+        }
+        })
+}
+var id = setInterval(get_data,1000)
+</SCRIPT>

app/views/admin/images/batch_crop.html.erb

@@ -0,0 +1,102 @@
+<style>
+    body{max-width: 100%;}
+</style>
+<script type="text/javascript" src="/assets/cropper.js"></script>
+<script type="text/javascript" src="/assets/jquery-cropper.js"></script>
+<link href="/assets/cropper.css" rel="stylesheet"></link>
+<div style='padding-left: 10px;display:flex; flex-wrap: wrap;width:100%;align-items: center;'>
+<div style='display:inline-flex;flex-direction:column;margin-right: 10px;'>
+<span style='display:inline-flex;'>
+<label style='padding: 5px;'><%= t('custom_gallery.width') %>:</label><input type="text" name="width">
+</span>
+<span style='display:inline-flex;'>
+<label style='padding: 5px;'><%= t('custom_gallery.height') %>:</label><input type="text" name="height">
+</span>
+</div>
+<button style='height: 50px;' onclick='change_config()'>修改裁減框長寬比</button>
+</div>
+<div style='display:flex; flex-wrap: wrap;width:100%'>
+    <% @img.each do |image| %>
+        <div class='<%= image.id %>' style='width:40%;max-width:40%;margin:10px 20px;'>
+            <img class='editimage' src="<%= image.file.get_org_url %>">
+        </div>
+    <% end %>
+</div>
+<button onclick='save_data()'><%= t('custom_gallery.save') %></button>
+<script>
+    var cropper_img = [],options=[]
+    function change_config(){
+        var count = cropper_img.length
+        var aspect_value = parseInt($("input[name='width']").val())/parseInt($("input[name='height']").val())
+        for (var i=0;i<count;i++){
+            if (isNaN(aspect_value)){
+                try{
+                    delete options[i]['aspectRatio']
+                }
+                catch{
+                }
+            }else{
+                options[i].aspectRatio = aspect_value
+            }
+            $('.editimage').eq(i).cropper('destroy').cropper(options[i])   
+        }
+    }
+    var x=[],y=[],w=[],h=[]
+    var id = []
+    <% @img.each do |image| %>
+        <% if image.custom_album_crops.first.nil? %>
+            <% image.custom_album_crops.new() %>
+        <% end %>
+        <% if !image.custom_album_crops.first.crop_x.to_s.empty? %>
+            x.push(<%= image.custom_album_crops.first.crop_x %>)
+            y.push(<%= image.custom_album_crops.first.crop_y %>)
+            w.push(<%= image.custom_album_crops.first.crop_w %>)
+            h.push(<%= image.custom_album_crops.first.crop_h %>)
+        <% else %>
+            x.push('')
+            y.push('')
+            w.push('')
+            h.push('')
+        <% end %>
+    <% end %>
+    $('img.editimage').on('load',function() {
+        var temp = $('.editimage').parent()
+        temp.each(function(){id.push($(this).attr('class'))})
+        var image = $('.editimage')
+        var count = image.length
+        <% @img.each_with_index do |_,i| %>
+            options[<%= i %>] = {
+                data: {
+                    x: x[<%= i %>],
+                    y: y[<%= i %>],
+                    width: w[<%= i %>],
+                    height: h[<%= i %>]
+                },
+                crop: function (e) {
+                  x[<%= i %>] = e.detail.x
+                  y[<%= i %>] = e.detail.y
+                  w[<%= i %>] = e.detail.width
+                  h[<%= i %>] = e.detail.height
+                },
+                viewMode: 2,
+                zoomOnWheel: false,
+                autoCropArea: 1
+              };
+            cropper_img.push($('.editimage').eq(<%= i %>).cropper(options[<%= i %>]));
+        <% end %>
+    });
+    function save_data(){
+        $.ajax({
+        url : '/admin/custom_galleries/save_crop',
+        dataType : "json",
+        type : "post",
+        data:{x:x,y:y,w:w,h:h,id:id},
+        success:function(data){
+            window.location.href = data.href;
+        },
+        error:function(){
+            alert('Your server has some problem, please try again later!')
+        }
+        })
+    }
+</script>

app/views/admin/images/crop_process.html.erb

@@ -0,0 +1,39 @@
+<%= t('custom_gallery.progressbar')+':' %>
+<div style='width:100%;'>
+  <div class="progress">
+    <div class="progress-bar" style="width: 0%;text-align:center;background:#86f9fe;background: linear-gradient(90deg,#86f9fe,#2900f8);">0</div>
+  </div>
+  <div class="message" style='width:100%;text-align:center;'></div>
+</div>
+<SCRIPT LANGUAGE=javascript> 
+function get_data(){
+    var finish=false;
+    $.ajax({
+        url : "/admin/custom_galleries/recreate_image/recreate_progress",
+        dataType : "json",
+        type : "post",
+        success:function(data){
+            $(".progress-bar").text(data.percent)
+            $(".message").text(data.filename)
+            finish = data.finish
+            if (finish){
+                $.get('/admin/custom_galleries/recreate_image/finish_recreate')
+                clearInterval(id)
+                document.location.href = '/admin/custom_galleries'
+                console.log('finish!')
+            }
+            $(".progress-bar").css('width',data.percent)
+        },
+        error:function(XMLHttpRequest, textStatus){
+            console.log(XMLHttpRequest);  //XMLHttpRequest.responseText    XMLHttpRequest.status   XMLHttpRequest.readyState
+            console.log(textStatus);
+            $(".progress-bar").text("<%= t('custom_gallery.error') %>");
+            console.log('error')
+            $.get('/admin/custom_galleries/recreate_image/finish_recreate')
+            $(".progress-bar").css('width','100%')
+            clearInterval(id)
+        }
+        })
+}
+var id = setInterval(get_data,200)
+</SCRIPT>

app/views/admin/images/edit_image.html.erb

@@ -0,0 +1,60 @@
+<style>
+    body{max-width: 100%;}
+</style>
+<script type="text/javascript" src="/assets/cropper.js"></script>
+<link href="/assets/cropper.css" rel="stylesheet"></link>
+<img class='editimage'src="<%= @image.file.get_org_url %>">
+<div class='img-preview'></div>
+<button onclick='save_data()'><%= t('custom_gallery.save') %></button>
+<script>
+    var x=[],y=[],w=[],h=[]
+    <% if @image.custom_album_crops.first.nil? %>
+        <% @image.custom_album_crops.new() %>
+    <% end %>
+    <% if !(@image.custom_album_crops.first.crop_x.to_s.empty?) %>
+        x.push(<%= @image.custom_album_crops.first.crop_x %>)
+        y.push(<%= @image.custom_album_crops.first.crop_y %>)
+        w.push(<%= @image.custom_album_crops.first.crop_w %>)
+        h.push(<%= @image.custom_album_crops.first.crop_h %>)
+    <% end %>
+    $('img.editimage').on('load',function() {
+        var image = $('.editimage')
+        var options = {
+            data: {
+                x: x[0],
+                y: y[0],
+                width: w[0],
+                height: h[0]
+            },
+            crop: function (e) {
+              x[0] = e.detail.x
+              y[0] = e.detail.y
+              w[0] = e.detail.width
+              h[0] = e.detail.height
+              console.log('x:'+x+'y:'+y)
+            },
+            viewMode: 2,
+            zoomOnWheel: false,
+            autoCropArea: 1,
+            minContainerWidth: parseInt($('.editimage').width()),
+            minContainerHeight: parseInt($('.editimage').height())
+          };
+        var cropper = new Cropper(image[0],options);
+    });
+    function save_data(){
+        var temp = location.href.split('/').slice(-2)
+        var id = [temp[0]]
+        $.ajax({
+        url : '/admin/custom_galleries/save_crop',
+        dataType : "json",
+        type : "post",
+        data:{x:x,y:y,w:w,h:h,id:id},
+        success:function(data){
+            window.location.href = data.href;
+        },
+        error:function(){
+            alert('Your server has some problem, please try again later!')
+        }
+        })
+    }
+</script>

app/views/admin/images/show.html.erb

@@ -0,0 +1,59 @@
+
+<%= stylesheet_link_tag "custom_gallery_old" %>
+
+<div id="orbit_custom_gallery" class="rg">
+  <div class="rgbody">
+    <div id="imgholder">
+      <div class="rslide" style="position:relative; width:100%;">
+        <div class="rslideinside"><div id="loading" style="display:none;"></div>
+          <div class="comp" id='main_pic' data-content='<%= @image.custom_album_id %>'><a href="" id="nextpic" class="navN" title="下一張" onclick="return false;" ><img src="<%= @image.file.theater.url %>" alt="" /></a></div>
+          <div class="rslidenav">
+            <a href="" class="navP" title="上一張" onclick="return false;">Prev</a>
+            <a href="" class="navN" title="下一張" onclick="return false;">Next</a>
+          </div>
+        </div>
+        <div class="slidelist">
+          <ul id='custom_galleryimagelist' style="display:none;">
+            <% @images.each_with_index do |image,i| %>
+              <li for="<%= i %>"><a href="<%= image.id %>" class="list_element" data-content="<%= image.file.theater.url %>" onclick="return false;"><img src="<%= image.file.thumb.url %>" alt="" /></a></li>
+            <% end  %>
+          </ul>
+        </div>
+        <div class="slidectrl">
+          <a href="" class="togglescreen" title="切換全螢幕" onclick="return false;">Screen</a>
+          <a href="" class="togglelist" title="顯示照片清單" onclick="return false;">List</a>
+          <a href="" class="browserfullscreen" title="顯示照片清單" onclick="return false;">F</a>
+          <div class="slideinfo">
+            <span class="info"><%= @image.description.html_safe %></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="form-actions form-fixed pagination-right rghead">
+  <div class="rgfn">
+    <%= link_to (content_tag(:i,I18n.t("custom_gallery.back_to_photos"),:class=>"icon-arrow-left icon-black")),"",:class=>"bt-back btn pull-left btn-primary",:title=>I18n.t("custom_gallery.back_to_photos")%>
+
+  </div>
+</div>
+</div>
+
+<%# content_for :page_specific_javascript do %>
+  <%= javascript_include_tag "rss" %>
+  <%= javascript_include_tag "custom_galleryAPI" %>
+<%# end %>
+
+<script type="text/javascript">
+
+  var custom_gallery = new custom_galleryAPI();
+   custom_gallery.loadArea = "theater";
+   custom_gallery.loadTheater("<%= params[:id] %>");
+  $(document).ready(function(){
+    custom_gallery.loadcomplete();
+  })
+</script>
+
+
+
+
+

app/views/admin/images/upload_panel.html.erb

@@ -0,0 +1,111 @@
+<html>
+<head>
+<%= csrf_meta_tag %>
+<%= javascript_include_tag "jquery-latest" %>
+<%= stylesheet_link_tag "jquery-ui" %>
+<%= stylesheet_link_tag "jquery.fileupload-ui.css" %>
+
+</head>
+<body>
+<div id='scroller_for_panel'>
+<div id="fileupload">
+<%= form_for @custom_album, :url => panel_custom_gallery_back_end_custom_album_path(@custom_album), :html => {:class => 'clear'} do |f| %>
+
+    <!-- <form action="upload_image" method="POST" enctype="multipart/form-data"> -->
+        <div class="fileupload-buttonbar">
+            <label class="fileinput-button">
+                <span>Add files...</span>
+                <input type="file" name="files[]" multiple>
+            </label>
+          <!--   <input type="hidden" value="" name="aid" id="fileupload_aid" /> -->
+            <button type="submit" class="start">Start upload</button>
+            <button type="reset" class="cancel">Cancel upload</button>
+           <!-- <button type="button" class="delete">Delete files</button>-->
+        </div>
+    <!-- </form> -->
+    <% end %>
+    <div class="fileupload-content">
+        <table class="files"></table>
+        <div class="fileupload-progressbar"></div>
+    </div>
+</div>
+<script id="template-upload" type="text/x-jquery-tmpl">
+    <tr class="template-upload{{if error}} ui-state-error{{/if}}">
+        <td class="preview"></td>
+        <td class="name">{{if name}}${name}{{else}}Untitled{{/if}}</td>
+        <td class="size">${sizef}</td>
+        {{if error}}
+            <td class="error" colspan="2">Error:
+                {{if error === 'maxFileSize'}}File is too big
+                {{else error === 'minFileSize'}}File is too small
+                {{else error === 'acceptFileTypes'}}Filetype not allowed
+                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
+                {{else}}${error}
+                {{/if}}
+            </td>
+        {{else}}
+            <td class="progress"><div></div></td>
+            <td class="start"><button>Start</button></td>
+        {{/if}}
+        <td class="cancel"><button>Cancel</button></td>
+    </tr>
+</script>
+<script id="template-download" type="text/x-jquery-tmpl">
+    <tr class="template-download{{if error}} ui-state-error{{/if}}">
+        {{if error}}
+            <td></td>
+            <td class="name">${name}</td>
+            <td class="size">${sizef}</td>
+            <td class="error" colspan="2">Error:
+                {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
+                {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
+                {{else error === 3}}File was only partially uploaded
+                {{else error === 4}}No File was uploaded
+                {{else error === 5}}Missing a temporary folder
+                {{else error === 6}}Failed to write file to disk
+                {{else error === 7}}File upload stopped by extension
+                {{else error === 'maxFileSize'}}File is too big
+                {{else error === 'minFileSize'}}File is too small
+                {{else error === 'acceptFileTypes'}}Filetype not allowed
+                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
+                {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
+                {{else error === 'emptyResult'}}Empty file upload result
+                {{else}}${error}
+                {{/if}}
+            </td>
+        {{else}}
+            <td class="preview">
+                {{if thumbnail_url}}
+                    <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
+                {{/if}}
+            </td>
+            <td class="name">
+                <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a>
+            </td>
+            <td class="size">${sizef}</td>
+            <td colspan="2"></td>
+        {{/if}}
+       
+    </tr>
+</script>
+<script type="text/javascript">
+    $("input#fileupload_aid").val(parent.g.urlVars['custom_album']);
+</script>
+</div>
+
+    <%= javascript_include_tag "jquery-ui.min" %>
+    <%= javascript_include_tag "jquery.tmpl.min" %>
+    <%= javascript_include_tag "jquery.iframe-transport" %>
+    <%= javascript_include_tag "jquery.fileupload" %>
+    <%= javascript_include_tag "jquery.fileupload-ui" %>
+    <%= javascript_include_tag "upload" %>
+    
+</body>
+</html>
+
+<!-- <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
+<script src="../../js/custom_gallery/jquery.iframe-transport.js"></script>
+<script src="../../js/custom_gallery/jquery.fileupload.js"></script>
+<script src="../../js/custom_gallery/jquery.fileupload-ui.js"></script>
+<script src="../../js/custom_gallery/upload.js"></script> -->

app/views/custom_galleries/custom_widget_data.html.erb

@@ -0,0 +1,39 @@
+<% active_module = @custom_data_field[:bind_module_app] rescue nil %>
+<% active_uid = @custom_data_field[:bind_uid] rescue nil %>
+<% active_module = @custom_configs.first.module if active_module.nil? %>
+<div class="control-group input-content">
+  <label class="control-label muted" for="custom_bind_module_app"><%=t("custom_gallery.use_module")%> :</label>
+  <div class="controls">
+	<%= select_tag("#{@field_name}[custom_data_field][bind_module_app]", options_for_select(@custom_configs.map{|c| [t("module_name.#{c.module}"),c.module]},active_module),{:id=>"custom_bind_module_app"})%>
+  </div>
+</div>
+<div class="control-group input-content">
+  <label class="control-label muted" for="custom_bind_uid"><%=t("custom_gallery.use_content")%> :</label>
+  <div class="controls">
+  	<% @custom_configs.each do |c| %>
+  		<% title_field = c.title_field
+  		   uid_field = c.uid_field
+  		   bind_model = c.bind_model.constantize rescue nil
+  		%>
+  		<% if bind_model %>
+	  		<div class="<%=(c.module == active_module) ? "show bind_modules" : "hide bind_modules" %>" data-module="<%= c.module %>">
+				<%= select_tag("#{@field_name}[custom_data_field][bind_uid]", options_for_select(bind_model.where(title_field.to_sym.nin=>[nil,""]).map{|target_model| [target_model.send(title_field),target_model.send(uid_field)]},active_uid),{:id=>"custom_bind_uid"})%>
+			</div>
+		<% end %>
+	<% end %>
+  </div>
+</div>
+<script type="text/javascript">
+	if($(".bind_modules.hide").length != 0){
+		$(".bind_modules.hide").eq(-1).after($(".bind_modules.show"));
+	}
+	$("#custom_bind_module_app").change(function(){
+		var value = $(this).val();
+		console.log(value)
+		$(".bind_modules").removeClass("show").addClass("hide");
+		$("[data-module=\""+value+"\"]").removeClass("hide").addClass("show");
+		if($(".bind_modules.hide").length != 0){
+			$(".bind_modules.hide").eq(-1).after($(".bind_modules.show"));
+		}
+	})
+</script>

app/views/custom_galleries/index.html.erb

@@ -0,0 +1,2 @@
+<%= render_view %>
+

app/views/custom_galleries/show.html.erb

@@ -0,0 +1,144 @@
+<%
+  params = OrbitHelper.params
+  page = Page.where(url:params['url']).first
+  @layout_type = 0
+  if page.methods.include?(:select_option_items)
+    @show_option_items = ModuleApp.where(key: 'custom_gallery').last.show_option_items rescue nil
+    page.select_option_items.each do |select_option_item|
+      if !(@show_option_items.nil?) && select_option_item.field_name == @show_option_items.keys.first.to_s
+        value = YAML.load(select_option_item.value)
+        tmp = value[:en]
+        I18n.with_locale(:en) do
+          if tmp == t('custom_gallery.grid_style')
+            @layout_type = 0
+          elsif tmp == t('custom_gallery.card_style')
+            @layout_type = 1
+          elsif tmp == t('custom_gallery.slideshow_style')
+            @layout_type = 2
+          end
+        end
+      end
+    end
+  end
+  data = action_data 
+%>
+<% if @layout_type==0 %>
+<%= render_view %>
+<% elsif @layout_type==1 %>
+
+<div class="show-custom_gallery custom_gallery card-group">
+  <h1 class="show-title">
+    <span><%= data['data']['custom_album-title'] %></span>
+  </h1>
+  <%= data['data']['custom_album-description'].html_safe %>
+  <link rel="stylesheet" type="text/css" href="/assets/custom_gallery_card.css">
+  <div class="row show-content" data-level="0" data-list="images">
+    <% data['images'].each do |image| %>
+      <div class="card card-flip h-100">
+        <div class="card-front">
+          <div class="card-body" style="padding:0;">
+            <img
+              srcset="
+              <%= image['thumb-large-src'] %> 1024w,
+              <%= image['thumb-src'] %> 768w"
+              src="<%= image['thumb-src'] %>"
+              alt="<%= image['alt_title'] %>"
+            >
+            <div class="card-footer">
+              <h3 class="card-title"><%= image['image_short_description'] %></h3>
+            </div>
+          </div>
+        </div>
+        <div class="card-back">
+          <div class="card-body" style="background-color: <%= image['custom_album_color'] %>;color: <%= image['custom_album_card_text_color'] %>;">
+            <h3 class="card-title"><%= image['image_short_description'] %></h3>
+            <%= image['image_description'] %></h3>
+            <div class="card-button-group">
+              <a href="<%= image['link_to_show'] %>" class="btn btn-secondary view" onclick="window.location.hash = '<%= image['link_to_show'] %>';CustomGalleryTheater();return false;">
+                <i class="fa fa-link" aria-hidden="true"></i>
+              </a>
+              <a href="<%= image['src'] %>" data-toggle="lightbox" data-custom_gallery="custom_gallery" class="btn btn-secondary preview" data-title="<%= image['alt_title'] %>" data-type="image">
+                <i class="fa fa-eye" aria-hidden="true"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
+<% elsif @layout_type==2 %>
+<script type="text/javascript">
+  if (window.location.hash==''){
+    window.location.hash = '#page='+window.location.href.split(/\/|-/).slice(-1)[0].split('#')[0]
+  }
+  function set_custom_gallery_height(){
+    var h = $('.custom_gallery-thumb-container').height()+$('.custom_gallery-image.gal-active').height()+$('.custom_gallery-actions').height()+$('.theaterButton').height()+20
+    $('.show-custom_gallery-2.custom_gallery').css('height',h)
+  }
+  $(window).resize(function(){
+    set_custom_gallery_height()
+  })
+</script>
+<% end %>
+<% OrbitHelper.render_css_in_head(["custom_theater.css"]) %>
+<%= javascript_include_tag "jquery.touchSwipe.min" %>
+<%= javascript_include_tag "custom_theater" %>
+<% OrbitHelper.render_meta_tags([{"name" => "mobile-web-app-capable","content" => "yes"},{"name" => "apple-mobile-web-app-status-bar-style","content" => "black-translucent"}]) %>
+<div id="custom_gallery-theater-stage">
+   <div class="<%= @layout_type==2 ? 'show-custom_gallery-2 ' : '' %>custom_gallery" style="margin-top: 2.4em;">
+    <div class="custom_gallery-loader">
+      <div class="spinner">
+          <div class="rect1"></div>
+          <div class="rect2"></div>
+          <div class="rect3"></div>
+          <div class="rect4"></div>
+          <div class="rect5"></div>
+      </div>
+    </div>
+    <div class="custom_gallery-actions">
+      <div class="custom_gallery-show-original custom_gallery-actions-btn">
+        <a title="<%= t('custom_gallery.show_original_image') %>"><i class="fa fa-image"></i></a>
+      </div>
+      <div class="custom_gallery-toggle-desc custom_gallery-actions-btn">
+        <i class="fa fa-comment"></i>
+      </div>
+      <div class="custom_gallery-theme-switch custom_gallery-actions-btn">
+        <i class="fa fa-circle"></i>
+      </div>
+       <div class="custom_gallery-close custom_gallery-actions-btn">
+         <i class="fa fa-times"></i>
+       </div>
+    </div>
+    <div class="image-container" id="image-container"></div>
+    <div class="custom_gallery-thumb-toggle custom_gallery-thumb-line">
+      <i class="fa fa-angle-double-up"></i>
+    </div>
+    <div class="custom_gallery-thumb-container">
+        <div class="custom_gallery-thumb-navs">
+          <div class="custom_gallery-thumb-prev custom_gallery-thumb-nav">
+            <i class="fa fa-arrow-circle-o-left"></i> 
+          </div>
+          <div class="custom_gallery-thumb-next custom_gallery-thumb-nav">
+            <i class="fa fa-arrow-circle-o-right"></i> 
+          </div>
+        </div>
+        <ul class="custom_gallery-thumb-wrap">
+        </ul>
+    </div>
+    <div class="custom_gallery-img-desc">
+      <div class="custom_gallery-img-desc-inner">
+      </div>
+    </div>
+    </div>
+</div>
+
+<script type="text/javascript">
+if(typeof Modernizr == "undefined"){
+  var script = $("<script>");
+  script.attr("src","/assets/modernizr.js");
+  $("head").append(script);
+}
+var gt = new CustomGalleryTheater();
+
+</script>

app/views/custom_galleries/theater.html.erb

@@ -0,0 +1,76 @@
+<% data = action_data 
+	@images = data["images"]
+	@custom_album = data["custom_album"]
+	@image = data["image"]
+	@back_link = data["back_to_custom_albums"]
+  @wall_images = data["wall_images"]
+%>
+<script type="text/javascript">
+  var json_image_data = <%= @wall_images.to_json.html_safe %>;
+</script>
+<%= stylesheet_link_tag "custom_gallery_frontend" %>
+
+<div id="orbit_custom_gallery" class="rg">
+  <div class="rgbody">
+    <div id="imgholder">
+      <div class="rslide" style="position:relative; width:100%;">
+        <div class="rslideinside"><div id="loading" style="display:none;"></div>
+          <div class="comp" id='main_pic' data-content='<%= @image.custom_album_id %>'><a href="" id="nextpic" class="navN" title="下一張"  ><img src="<%= @image.file.theater.url %>" alt="<%= @image.description.nil? || @image.description == "" ? "custom_gallery image" : @image.description %>" /></a></div>
+          <div class="rslidenav">
+            <a href="" class="navP" title="上一張" >Prev</a>
+            <a href="" class="navN" title="下一張" >Next</a>
+          </div>
+        </div>
+        <div class="slidelist">
+          <ul id='custom_galleryimagelist' style="display:none;">
+            <% @images.each_with_index do |image,i| %>
+              <li for="<%= i %>"><a href="<%= image.id %>" class="list_element" data-content="<%= image.file.theater.url %>" ><img src="<%= image.file.thumb.url %>" alt="<%= image.description.nil? || image.description == "" ? "custom_gallery image" : image.description %>" /></a></li>
+            <% end  %>
+          </ul>
+        </div>
+        <div class="slidectrl">
+          <a href="" class="togglescreen" title="切換全螢幕" >Screen</a>
+          <a href="" class="togglelist" title="顯示照片清單" >List</a>
+          <a href="" class="browserfullscreen" title="顯示照片清單" >F</a>
+          <div class="slideinfo">
+            <span class="info"><%= @image.description %></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- tag part -->
+  <div class="taglist"> 
+    <h3 class="taglist_title"><%= t('custom_gallery.photo_tag') %></h3>
+    <ul>
+      <% @image.tags.each do |tag| %>
+      	<li><%= tag.name %></li>
+      <% end %>
+    </ul>
+  </div>
+  <!-- tag end -->
+  <div class="form-actions form-fixed pagination-right rghead">
+  <div class="rgfn">
+    <a class="bt-back rgbt" title="<%= I18n.t("custom_gallery.back_to_custom_albums") %>" href="<%= @back_link %>"><i class="icon-arrow-left"></i> <%= I18n.t("custom_gallery.back_to_custom_albums") %></a>
+  </div>
+</div>
+</div>
+
+<%# content_for :page_specific_javascript do %>
+  <%= javascript_include_tag "custom_galleryAPI_frontend" %>
+   <%#= javascript_include_tag "jquery.tinyscrollbar" %>
+  <%= javascript_include_tag "rss" %>
+<%# end %>
+
+<script type="text/javascript">
+  custom_galleryAPI.prototype.locale = "<%= I18n.locale %>";
+    	var custom_gallery = new custom_galleryAPI();
+    	custom_gallery.initialize();
+    	custom_gallery.loadTheater("<%= params[:id] %>","<%= params[:image_id] %>");
+  $("#orbit_custom_gallery a").on("click",function(){return false;})
+</script>
+
+
+
+
+

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/custom_gallery/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'

config/locales/en.yml

@@ -0,0 +1,107 @@
+en:
+  module_name:
+    custom_gallery: Custom Gallery
+  custom_gallery:
+    total_amount: Total amount
+    use_module: Use Module
+    use_content: Use Content
+    inner_page_layout: Inner Page Layout
+    card_style: Card Style
+    grid_style: Grid Style
+    slideshow_style: Slideshow style
+    custom_album_card_background_color: Background Color for custom_album card
+    custom_album_card_text_color: Text Color for custom_album card
+    thumb_resize_reference: Resize reference for thumb
+    gravity:
+        Center: center
+        NorthWest: top-left
+        North: top-center
+        NorthEast: top-right
+        West: left-center
+        East: right-center
+        SouthWest: left-bottom
+        South: bottom-center
+        SouthEast: bottom-right
+    short-description: Short Description
+    custom_album_limit_for_one_page: Amount of limit for custom_album in one page
+    blank_for_nil: blank present no limit
+    load_html: Load next batch
+    wait_time: please wait a minute
+    show_desc: Show the custom_album description
+    not_show_desc: Don't show the custom_album description
+    show_original_image: Show the original picture
+    width: Width
+    height: Height
+    review: Review
+    rotate: Rotate
+    confirm_msg: Are you sure to rotate images
+    add_degree: Add 90 degree
+    reduce_degree: Reduce 90 degree
+    crop_div: "Please input the degree you want to rotate.<br>(positive for clockwise)"
+    rotate_images: Rotate images
+    batch_crop: Batch crop images
+    use_set: Use the previously configured color
+    add_files: Add files
+    start_upload: Start upload
+    cancel_upload: Cancel upload
+    drop_files_here: Drop files here
+    success: Success
+    file_uploaded_successfully: File uploaded successfully
+    close_panel: Close panel
+    no_choose: Please select at least one before apply
+    edit_order: Edit Order
+    save_order: Save Order
+    add_tags: Add tags
+    import: Import
+    delete_photo: Delete Photo
+    delete: Delete
+    deselect: Deselect
+    back: Back
+    edit: Edit
+    add_image: Add Image
+    progressbar: 'Progress bar'
+    error: 'Recreate thumb failed, please contact service agent or try again later'
+    'sure?': 'Are yoy sure to apply? it will recreate all the thumbs of you choose'
+    recreate_thumb: 'Frame color'
+    'recreate': 'Apply'
+    transparent: transparent
+    checked: select all
+    unchecked: unselect all
+    add_custom_album: Add CustomAlbum
+    add_images: Add Images
+    all: All
+    new: New
+    custom_album: CustomAlbum
+    custom_album_desc: CustomAlbum Description
+    custom_album_name: CustomAlbum Name
+    custom_album_not_found: CustomAlbum Not Found
+    custom_album_tag: CustomAlbum Tag
+    back_to_custom_albums: Back to CustomAlbums
+    back_to_photos: Back to Photos
+    cate_auth: Category Authorization
+    chinese: Chinese
+    cover: Cover
+    del_custom_album: Delete CustomAlbum
+    del_custom_album?: Delete this custom_album?
+    delete_selected: Delete Selected
+    english: English
+    frontend:
+      custom_albums: Front-end custom_albums
+    custom_gallery: CustomGallery
+    categories: Category
+    new_category: New Category
+    no_description: No Decription
+    photo_tag: Photo Tag
+    pic_not_found: Picture Not Found
+    img_link: Image Link
+    img_description: Image Description
+    save: Save
+    save_changes: Save Changes
+    search_tags: Search Tags
+    select_category: Select Category
+    set_cover: Set as Cover
+    widget:
+      widget1: Widget1
+    widget_option:
+      horizontal: Horizontal
+      vertical: Vertical

config/locales/zh_tw.yml

@@ -0,0 +1,107 @@
+zh_tw:
+  module_name:
+    custom_gallery: 客製相簿
+  custom_gallery:
+    total_amount: 總數
+    use_module: 使用模組
+    use_content: 使用內容
+    inner_page_layout: 內頁頁面樣式
+    card_style: 卡片樣式
+    grid_style: 格子排版樣式
+    slideshow_style: 輪播樣式
+    custom_album_card_background_color: 相簿卡片背景顏色
+    custom_album_card_text_color: 相簿卡片文字顏色
+    thumb_resize_reference: 縮圖縮放參考
+    gravity:
+        Center: 中心
+        NorthWest: 左上
+        North: 中心上方
+        NorthEast: 右上
+        West: 左側中心
+        East: 右側中心
+        SouthWest: 左下
+        South: 中心下方
+        SouthEast: 右下
+    short-description: 簡短描述
+    custom_album_limit_for_one_page: 一頁呈現的相簿數量
+    blank_for_nil: 留白表示無限制
+    load_html: 存取下一批資料
+    wait_time: 請稍等
+    show_desc: 顯示相簿描述
+    not_show_desc: 不顯示相簿描述
+    show_original_image: 顯示原始圖片
+    width: 寬
+    height: 高
+    review: 預覽
+    rotate: 旋轉
+    confirm_msg: 確定要旋轉圖片嗎?
+    add_degree: 增加90度
+    reduce_degree: 減少90度
+    crop_div: "請輸入需要旋轉的角度.<br>(順時針為正)"
+    rotate_images: 旋轉圖片
+    batch_crop: 批量裁減圖片
+    use_set: 使用先前已設定的顏色
+    add_files: 新增檔案
+    start_upload: 開始上傳
+    cancel_upload: 取消上傳
+    drop_files_here: 拖移檔案到此
+    success: 成功
+    file_uploaded_successfully: 檔案上傳成功
+    close_panel: 關閉面板
+    no_choose: 請至少選擇一項再按套用
+    edit_order: 改變排序
+    save_order: 儲存排序
+    add_tags: 新增標籤
+    import: 匯入
+    delete_photo: 刪除圖片
+    delete: 刪除
+    deselect: 反選
+    back: 返回
+    edit: 編輯
+    add_image: 新增圖片
+    cancel: 關閉
+    dashboard: 儀表板
+    progressbar: 進度條
+    error: '重新產生縮圖失敗，請聯絡客服或稍後再試'
+    'sure?': '您真的确定要套用嗎? 會重新產生整個相簿的縮圖喔!'
+    recreate_thumb: 相框底色
+    transparent: 透明
+    checked: 全選
+    unchecked: 全部反選
+    recreate: 套用
+    add_custom_album: 新增相冊
+    add_images: 新增影像
+    custom_album: 相冊
+    custom_album_desc: 相冊描述
+    custom_album_name: 相冊名稱
+    custom_album_not_found: 找不到相冊
+    custom_album_tag: 相冊標籤
+    back_to_custom_albums: 回到相冊
+    back_to_photos: 回到相片
+    cate_auth: 類別授權
+    chinese: 中文
+    cover: 封面
+    del_custom_album: 刪除相冊
+    del_custom_album?: 要刪除這本相簿嗎？
+    delete_selected: 刪除已選取項目
+    english: 英文
+    frontend:
+      custom_albums: 相簿前台
+    custom_gallery: 客製相簿
+    manage_categories: 管理類別
+    new_category: 新增類別
+    no_description: 沒有描述
+    photo_tag: 相片標籤
+    pic_not_found: 找不到圖片
+    img_link: 圖片連結
+    img_description: 圖片描述
+    save: 儲存
+    save_changes: 儲存變更
+    search_tags: 搜尋標籤
+    select_category: 選擇類別
+    set_cover: 設定為封面
+    widget:
+      widget1: 插件1
+    widget_option:
+      horizontal: 水平
+      vertical: 垂直

config/routes.rb

@@ -0,0 +1,49 @@
+Rails.application.routes.draw do
+  locales = Site.first.in_use_locales rescue I18n.available_locales
+  scope "(:locale)", locale: Regexp.new(locales.join("|")) do
+    get "/xhr/custom_galleries/theater/:id" => "custom_galleries#theater"
+    namespace :admin do
+      get "custom_galleries/get_photoData_json" => "custom_galleries#get_photoData_json"
+      get "custom_galleries/recreate_image" => "custom_galleries#recreate_image"
+      get "custom_galleries/crop_process" => "custom_images#crop_process"
+      post "custom_galleries/recreate_image/recreate_progress" => "custom_galleries#recreate_progress"
+      get "custom_galleries/recreate_image/finish_recreate" => "custom_galleries#finish_recreate"
+      get "custom_galleries/batch_crop" => "custom_images#batch_crop"
+      get "custom_galleries/new_images" => "custom_galleries#new_images"
+      get "custom_galleries/last_image_id" => "custom_galleries#last_image_id"
+      post "custom_galleries/set_cover" => "custom_galleries#set_cover"
+      post "custom_galleries/delete_photos" => "custom_images#delete_photos"
+      post "custom_galleries/update_image" => "custom_images#update_image"
+      post "custom_galleries/image_tagging" => "custom_images#image_tagging"
+      post "custom_galleries/order" => "custom_images#changeorder"
+      post "custom_galleries/translate" => "custom_galleries#call_translate"
+      post "custom_galleries/save_crop" => "custom_galleries#save_crop"
+      get "custom_galleries/rotate_images" => "custom_galleries#rotate_images"
+      get "custom_galleries/upload_process" => "custom_galleries#upload_process"
+      post "custom_galleries/start_upload_process" => "custom_galleries#start_upload_process"
+      post "custom_galleries/init_upload" => "custom_galleries#init_upload"
+      post "custom_galleries/get_tag" => "custom_galleries#get_tag"
+      post "custom_galleries/update_custom_album_setting" => "custom_galleries#update_custom_album_setting"
+      get "custom_galleries/setting" => "custom_galleries#setting"
+      resources :custom_galleries do
+        get "imgs" => "custom_galleries#imgs"
+        member do
+          get "import"
+          get "excel_format"
+          post "importimages"
+        end
+        collection do
+          get "/:custom_module-:bind_uid" => "custom_galleries#index"
+          get "/:custom_module-:bind_uid/new" => "custom_galleries#new"
+          get "/:custom_module-:bind_uid/:id/edit" => "custom_galleries#edit"
+          delete "/:custom_module-:bind_uid/:id/destroy" => "custom_galleries#destroy"
+
+          get "/:custom_module" => "custom_galleries#index", constraints: {custom_module: /.{1,23}/}
+        end
+      end
+      resources :custom_images
+      post "custom_galleries/upload_image" => "custom_galleries#upload_image"
+      # match "image_tagging" => "custom_album_images#image_tagging"
+    end
+  end
+end

custom_gallery.gemspec

@@ -0,0 +1,33 @@
+$:.push File.expand_path("../lib", __FILE__)
+
+# Maintain your gem's version:
+require "custom_gallery/version"
+bundle_update_flag = ARGV[0]=='update' || ARGV[0]=='install'
+if bundle_update_flag
+  env_pwd = ENV['PWD']
+  app_path = File.expand_path(__dir__)
+  template_path = env_pwd + '/app/templates'
+  all_template = Dir.glob(template_path+'/*/')
+  all_template.each do |folder|
+    if !folder.include?('mobile')
+      if Dir.exist?("#{folder}modules/")
+        Bundler.with_clean_env{system ('cp -r '+ app_path + '/modules/ ' + folder)}
+      end
+    end
+  end
+end
+#system  ('rm -r '+app_path + '/modules/')
+# Describe your gem and declare its dependencies:
+Gem::Specification.new do |s|
+  s.name        = "custom_gallery"
+  s.version     = CustomGallery::VERSION
+  s.authors     = ["Ruling Digital Inc."]
+  s.email       = ["orbit@rulingcom.com"]
+  s.homepage    = "http://www.rulingcom.com"
+  s.summary     = "Campus CustomGallery."
+  s.description = "Campus Galllery"
+  s.license     = "MIT"
+
+  s.files = Dir["{app,config,db,lib}/**/*", "MIT-LICENSE", "Rakefile", "README.rdoc"]
+  s.test_files = Dir["test/**/*"]
+end

lib/custom_gallery.rb

@@ -0,0 +1,4 @@
+require "custom_gallery/engine"
+module CustomGallery
+    
+end

lib/custom_gallery/engine.rb

@@ -0,0 +1,95 @@
+module CustomGallery
+  class Engine < ::Rails::Engine
+    initializer "custom_gallery" do
+      begin
+        translate_data = Dir["#{CustomGallery::Engine.root}/config/locales/*.yml"] .map{|yaml_file| YAML.load(File.read(yaml_file))}
+        data = {}
+        key1 = {}
+        value1 = {}
+        value2 = {}
+        value3 = {}
+        translate_data.each do |t_data|
+          v = t_data.values
+          k = t_data.keys[0]
+          key1[k] = v[0]['custom_gallery']['inner_page_layout']
+          value1[k] = v[0]['custom_gallery']['grid_style']
+          value2[k] = v[0]['custom_gallery']['card_style']
+          value3[k] = v[0]['custom_gallery']['slideshow_style']
+        end
+        data[key1] = [value1,value2,value3]
+      rescue  => e
+        puts ['error in custom_gallery',e]
+      end
+
+      require File.expand_path('../../../app/models/custom_album_setting', __FILE__)
+      if defined?(CustomAlbumSetting)
+        if CustomAlbumSetting.first.nil?
+          CustomAlbumSetting.create()
+        elsif CustomAlbumSetting.count > 1
+          CustomAlbumSetting.all.to_a[1..-1].each do |custom_album_setting|
+            custom_album_setting.destroy
+          end
+        end
+      end
+      
+      OrbitApp.registration "CustomGallery", :type => "ModuleApp" do
+        module_label "custom_gallery.custom_gallery"
+          base_url File.expand_path File.dirname(__FILE__)
+          widget_methods ["widget","custom_album_widget"]
+          # widget_settings []
+          widget_settings [{"data_count"=>30,"enable_custom_widget_data"=>true}]
+          models_to_cache [:custom_album,:custom_album_image]
+          taggable "CustomAlbum"
+          categorizable
+          authorizable
+          frontend_enabled
+          data_count 1..30
+
+          begin
+            show_option_items data
+          rescue => e
+            puts ['there_was_no_show_option_method',e]
+          end
+          side_bar do
+            head_label_i18n 'custom_gallery.custom_gallery', icon_class: "icons-pictures"
+            available_for "users"
+            active_for_controllers (['admin/custom_galleries','admin/images'])
+            head_link_path "admin_custom_galleries_path"
+
+            context_link 'custom_gallery.all',
+              :link_path=>"admin_custom_galleries_path" ,
+              :priority=>1,
+              :active_for_action=>{'admin/custom_galleries'=>"index"},
+              :available_for => 'users'
+
+            # context_link 'custom_gallery.new',
+            #   :link_path=>"new_admin_custom_gallery_path" ,
+            #   :priority=>2,
+            #   :active_for_action=>{'admin/custom_galleries'=>"new"},
+            #   :available_for => 'sub_managers'
+
+            context_link 'categories',
+              :link_path=>"admin_module_app_categories_path" ,
+              :link_arg=>"{:module_app_id=>ModuleApp.find_by(:key=>'custom_gallery').id}",
+              :priority=>3,
+              :active_for_action=>{'admin/custom_galleries'=>'categories'},
+              :active_for_category => 'CustomGallery',
+              :available_for => 'managers'
+                              
+            context_link 'tags',
+              :link_path=>"admin_module_app_tags_path" ,
+              :link_arg=>"{:module_app_id=>ModuleApp.find_by(:key=>'custom_gallery').id}",
+              :priority=>4,
+              :active_for_action=>{'admin/custom_galleries'=>'tags'},
+              :active_for_tag => 'CustomGallery',
+              :available_for => 'managers'
+            context_link 'setting',
+              :link_path=>"admin_custom_galleries_setting_path" ,
+              :priority=>5,
+              :active_for_action=>{'admin/custom_galleries'=>'setting'},
+              :available_for => 'managers'
+          end
+      end
+    end
+  end
+end