overlay_me 0.12.1 → 0.13.0

data/javascripts/menu.js.coffee

@@ -35,4 +35,5 @@ class OverlayMe.MenuClass extends OverlayMe.Draggable
 
 
 # create only 1 menu
-OverlayMe.menu = new OverlayMe.MenuClass() unless OverlayMe.menu_box
+if OverlayMe.mustLoad() # dont do it anytime
+  OverlayMe.menu = new OverlayMe.MenuClass() unless OverlayMe.menu_box

data/javascripts/mixins/hideable.js.coffee

@@ -1,13 +1,26 @@
 OverlayMe.Mixin.Hideable = {
 
   isDisplayed: ->
-    return $o(@el).css('display') != 'none'
+    element = @el || this
+    return $o(element).css('display') != 'none'
   
   toggleDisplay: (default_display_type='block') ->
     if @isDisplayed()
-      $o(@el).css { display: 'none' }
+      @hide()
     else
-      $o(@el).css { display: default_display_type }
-    @saveCss()
+      @show(default_display_type)
 
+  show: (default_display_type='block') ->
+    element = @el || this
+    $o(element).css { display: default_display_type }
+    @saveState()
+
+  hide: ->
+    element = @el || this
+    $o(element).css { display: 'none' }
+    @saveState()
+
+  saveState: ->
+    element = @el || this
+    @saveCss(element) if @saveCss
 }

data/javascripts/mixins/storable.js.coffee

@@ -1,16 +1,20 @@
 OverlayMe.Mixin.Storable = {
 
   loadCss: (element=@el, default_css) ->
+    return unless @id
     if ( cssData = localStorage.getItem(@id) )
       $o(element).css(JSON.parse(cssData))
+      # console.log 'load: ', @id, cssData
     else
       $o(element).css(default_css) unless default_css == undefined
     
   saveCss: (element=@el) ->
+    return unless @id
     @css_attributes_to_save = ['top', 'left', 'display', 'opacity'] unless @css_attributes_to_save
     cssData = {}
     for css_attribute in @css_attributes_to_save
       cssData[css_attribute] = $o(element).css(css_attribute)
+    # console.log 'save: ', @id, JSON.stringify(cssData)
     localStorage.setItem(@id, JSON.stringify(cssData))
 
 }

data/javascripts/overlays/image.js.coffee

@@ -6,17 +6,18 @@ class OverlayMe.Overlays.Image extends Backbone.View
   tagName: 'div'
   className: 'overlay-image-block'
 
-  initialize: (image_src, options = { destroyable: false }) ->
+  initialize: (image_src, options) ->
+    $o.extend { destroyable: false }, options
     @image_src = image_src
     @image_id = OverlayMe.Overlays.urlToId(image_src)
     $o(@el).attr 'data-img-id', @image_id
 
-    OverlayMe.images_container = new OverlayMe.Overlays.ImagesContainer() unless OverlayMe.images_container
+    images_container = new OverlayMe.Overlays.ImagesContainer({ parent_path: options.parent_path })
 
     @default_css = $o.extend {display: 'none', opacity: 0.5}, options.default_css
 
-    unless $o("##{@image_id}", OverlayMe.images_container.el).length > 0
-      $o(OverlayMe.images_container.el).append @image()
+    unless $o("##{@image_id}", images_container.el).length > 0
+      $o(images_container.el).append @image()
 
     $o(@el).append @checkbox()
     $o(@el).append @label()
@@ -25,7 +26,8 @@ class OverlayMe.Overlays.Image extends Backbone.View
     slider_block.appendChild @make 'label', {}, 'Opacity'
     slider_block.appendChild @slider()
     $o(@el).append @delButton() if options.destroyable
-    $o(@el).bind 'click', (event) =>
+    $o(@el).bind 'click', (e) =>
+      e.stopPropagation()
       @flickCheckbox()
     $o(@el).bind 'mouseover', (event) =>
       $o(@image.el).addClass 'highlight'

data/javascripts/overlays/images_container.js.coffee

@@ -1,22 +1,61 @@
 #= require 'mixins/storable'
 #= require 'mixins/hideable'
 
-class OverlayMe.Overlays.ImagesContainer extends Backbone.View
+class OverlayMe.Overlays.ContainerItself extends Backbone.View
 
-  id: 'overlay_me_images_container'
+  tagName: 'div'
   css_attributes_to_save: ['display']
 
-  initialize: ->
-    container = $o('#overlay_me_images_container')
-    if container.length < 1 # happen only if the container div doesn't already exist
-      container = @make 'div', { id: 'overlay_me_images_container' }
-      $o('body').append container
-      @el = container
+  initialize: (attributes, options) ->
+    super(attributes, options)
     @loadCss()
-    $o(window).bind 'overlay_me:toggle_all_display', =>
-      @toggleDisplay()
+    $o(window).bind "overlay_me:toggle_#{@id}_display", (event, options) =>
+      if options
+        if options.show then @show() else @hide()
+      else
+        @toggleDisplay()
+
+_.extend OverlayMe.Overlays.ContainerItself.prototype, OverlayMe.Mixin.Storable
+_.extend OverlayMe.Overlays.ContainerItself.prototype, OverlayMe.Mixin.Hideable
+
+
+
+
+class OverlayMe.Overlays.ImagesContainer extends Backbone.View
+
+  initialize: (options) ->
+    # the master image_container will be referenced publicly
+    unless OverlayMe.images_container
+      OverlayMe.images_container = new OverlayMe.Overlays.ContainerItself id:'overlay_me_images_container'
+      $o('body').append OverlayMe.images_container.el
+
+    # if it's a local file, we build its eventual multi-directories structure
+    if options.parent_path
+      container = @subDirContainer(options.parent_path)
+    # either, the default main container is the one returned
+    else
+      container = OverlayMe.images_container
+
+    # I know, it's ugly but I just want the proper DOM element, Backbone Object or not
+    @el = container.el || container
+
+
+  subDirContainer: (path, done_bits=[]) ->
+    path_bits = _.difference(path.split('/'), _.union(done_bits, ''))
+    the_dir = path_bits.slice(0, 1).toString()
+    if done_bits.length > 0
+      sub_container_parent_post_string = done_bits.join(' ').replace(/\ ?(\w+)/g, ' #$1_container')
+    else
+      sub_container_parent_post_string = ''
 
-# extending few mixins - thx Derick - http://stackoverflow.com/questions/7853731/proper-way-of-doing-view-mixins-in-backbone
-_.extend OverlayMe.Overlays.ImagesContainer.prototype, OverlayMe.Mixin.Storable
-_.extend OverlayMe.Overlays.ImagesContainer.prototype, OverlayMe.Mixin.Hideable
+    sub_container = $o("#overlay_me_images_container #{sub_container_parent_post_string} ##{the_dir+'_container'}")
+    if sub_container.length < 1 # if the sub_container div doesn't already exist
+      sub_container = new OverlayMe.Overlays.ContainerItself id: the_dir+'_container'
+      $o("#overlay_me_images_container #{sub_container_parent_post_string}").append sub_container.el
 
+    if path_bits.length > 1
+      done_bits.push the_dir
+      return @subDirContainer path, done_bits
+    else
+      return sub_container
+      

data/javascripts/overlays/images_directory.js.coffee

@@ -0,0 +1,46 @@
+#= require 'mixins/hideable'
+
+class OverlayMe.Overlays.ImagesDirectory extends Backbone.View
+
+  tagName: 'div'
+  className: 'images_dir'
+
+  initialize: (dirname) ->
+    @dirname = dirname
+    @contentBlock = @make 'div', { id: @dirname, class: 'sub-block' }
+    _.extend @contentBlock, OverlayMe.Mixin.Hideable
+    _.extend @contentBlock, OverlayMe.Mixin.Storable
+    @contentBlock.css_attributes_to_save = ['display']
+    @contentBlock.loadCss(@contentBlock)
+    $o(@el).append @checkbox()
+    $o(@el).append @label()
+    $o(@el).append @contentBlock
+    $o(@el).bind 'click', (e) =>
+      e.stopPropagation()
+      @checkbox.click()
+
+  checkbox: ->
+    @checkbox = @make 'input', { type: "checkbox" }
+    if @contentBlock.isDisplayed()
+      @checkbox.checked = true
+    $o(@checkbox).bind 'click', (e) =>
+      e.stopPropagation()
+      @flickVisibility()
+    @checkbox
+
+  flickVisibility: ->
+    if @checkbox.checked
+      @contentBlock.show()
+    else
+      @contentBlock.hide()
+    $o(window).trigger "overlay_me:toggle_#{@dirname}_container_display", { show: @checkbox.checked }
+
+  label: ->
+    @label = @make 'label', {}, '/'+@dirname+'/'
+
+  append: (block) ->
+    @contentBlock.appendChild block
+
+  render: ->
+    this.el
+

data/javascripts/overlays/images_mngt_div.js.coffee

@@ -5,15 +5,6 @@ class OverlayMe.Overlays.ImagesManagementDiv extends Backbone.View
 
   initialize: ->
     $o(@el).append @make 'legend', {}, 'Overlaying images'
-    @controlBlock = @make 'div', { class: 'controls' }
-    $o(@el).append @controlBlock
-
-    @controlBlock.appendChild @checkAllbox()
-    check_all_label = @make 'label', {}, 'All/None'
-    $o(check_all_label).bind 'click', =>
-      $o(@checkAllBox).trigger 'click'
-    @controlBlock.appendChild check_all_label
-
     @overlaysListBlock = @make 'div', { class: 'overlays-list' }
     $o(@el).append @overlaysListBlock
 
@@ -43,24 +34,6 @@ class OverlayMe.Overlays.ImagesManagementDiv extends Backbone.View
     OverlayMe.dyn_manager.addImage @image_url_input.value
     @image_url_input.value = ''
 
-  checkAllbox: ->
-    @checkAllBox = @make 'input', { type: "checkbox", class: 'check-all' }
-    $o(@checkAllBox).bind 'change', (event) =>
-      @checkAll()
-    @checkAllBox
-
-  checkAll: ->
-    checkbox_state = @checkAllBox.checked
-    for checkbox in $o('.overlay-image-block input[type=checkbox]')
-      if checkbox.checked != checkbox_state
-        $o(checkbox).trigger 'click'
-    @saveState()
-
-  # adding some retention (or not)
-  saveState: ->
-    # localStorage.setItem(@id, JSON.stringify({
-    # }))
-
   render: ->
     this.el
 

data/javascripts/overlays.js.coffee

@@ -2,6 +2,7 @@
 #= require 'menu_item'
 #= require 'overlays/init'
 #= require 'overlays/image'
+#= require 'overlays/images_directory'
 #= require 'overlays/dynamic_images_mngmt'
 #= require 'overlays/content_div_mngmt'
 #= require 'overlays/images_mngt_div'
@@ -42,8 +43,45 @@ if OverlayMe.mustLoad()
       if data.length == 0 # in case all is empty (default for newcomers)
         OverlayMe.loadDefaultImage()
       else
-        $o.each data, (index, img_path) ->
-          OverlayMe.images_management_div.append new OverlayMe.Overlays.Image(img_path).render()
+        buildTree data
     error: ->
       OverlayMe.loadDefaultImage()
 
+  files_tree = {}
+  buildTree = (data) ->
+    $o.each data, (index, img_path) ->
+      bits = img_path.split('/')
+      position = files_tree
+      parent_path = '/'
+      while bits.length > 0
+        bit = bits[0]
+        bits = bits.slice(1)
+        continue if bit == ""
+        parent_path += bit + '/'
+        if position[bit] == undefined
+          if bits.length > 0
+            position[bit] = { parent_path: parent_path }
+          else
+            position['files'] = [] if position['files'] == undefined
+            position['files'].push bit
+        position = position[bit]
+    files_tree = shiftTofiles(files_tree)
+    displayTree(OverlayMe.images_management_div, files_tree)
+
+  shiftTofiles = (tree) ->
+    return tree if tree.files
+    keys = Object.keys(tree)
+    return tree if keys.length > 2 # parent_path + sub_dir
+    keys = _.without(keys, 'parent_path')
+    shiftTofiles(tree[keys[0]])
+
+  displayTree = (parent, tree) ->
+    for dir in Object.keys(tree)
+      continue if dir == 'files' || dir == 'parent_path'
+      sub_dir = new OverlayMe.Overlays.ImagesDirectory(dir)
+      parent.append sub_dir.render()
+      displayTree(sub_dir, tree[dir])
+    if tree.files
+      for img in tree.files
+        parent.append new OverlayMe.Overlays.Image(tree.parent_path+img, { parent_path: tree.parent_path }).render()
+

data/lib/overlay_me/version.rb

@@ -1,7 +1,7 @@
 module OverlayMe
   MAJOR_VERSION = 0
-  MINOR_VERSION = 12
-  PATCH_LEVEL = 1
+  MINOR_VERSION = 13
+  PATCH_LEVEL = 0
 
   VERSION = [MAJOR_VERSION, MINOR_VERSION, PATCH_LEVEL].join '.'
 end

data/lib/overlay_me.rb

@@ -7,7 +7,7 @@ module OverlayMe
   class App
     def self.call(env)
       Dir.chdir OverlayMe.root_dir if Dir[OverlayMe.root_dir]
-      images_urls = Dir[ OverlayMe.overlays_directory + '/*.*' ].map{|path| '/'+path}
+      images_urls = Dir[ OverlayMe.overlays_directory + '/**/*.*' ].map{|path| '/'+path}
       [200, {"Content-Type" => "text/html"}, images_urls.to_json]
     end
   end

data/overlay_me.css

@@ -50,14 +50,14 @@ button {
   vertical-align: baseline;
 }
 
-/* line 49, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 52, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 .menu-item {
   text-align: left;
   background-color: #CCC;
   border: 1px solid rgba(255, 255, 255, 0.2);
   width: 200px;
 }
-/* line 54, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 57, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 .menu-item a.collaps-button {
   cursor: pointer;
   position: absolute;
@@ -68,16 +68,16 @@ button {
   border: none;
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIlJREFUeNpivHDhQujz589TmZiYvjMQAP/+/eOQkZGZyfD//38ZIL77nzhwG4ilQJpA2BiIPxHQ8BGIDUHqYZpAOIWApiSYWmRNIDfPxaYaKD4bWR2KJiDmA+KzaHrOQMVxagJhfSD+ALXhA5TPQEgTCCcD8V+gpmRs8rg0MQI1eANpJmzyAAEGAKD/bax/HrzbAAAAAElFTkSuQmCC) no-repeat center 3px;
 }
-/* line 63, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 66, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 .menu-item a.collaps-button span {
   display: none;
   color: yellow;
 }
-/* line 66, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 69, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 .menu-item a.collaps-button span:hover {
   color: yellow;
 }
-/* line 71, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 74, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 .menu-item label.title {
   padding-left: 20px;
   color: white;
@@ -87,21 +87,21 @@ button {
   font-size: 14px;
   background: none;
 }
-/* line 81, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 84, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 .menu-item.collapsed .item-content {
   display: none;
 }
-/* line 82, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 85, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 .menu-item.collapsed a.collaps-button {
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAANCAYAAAB7AEQGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKtJREFUeNpiuHz5ctD///+lgJgBF2Z68uRJOgMDw0EgNmTAAZiA4AeQVgHiA0CchFUREpsPiOcCjZ8NZWNVBAaMjIwpQGofEOvjVAQFxkATDwJxMkgNCy7HAk3kB1KzgApf4DIJBD4CcRpQ8TZcJp2D+vQiVjcBjZ8HpBxhCtAVfQbiVKDxIMd+QtbI8u/fP04gfQ+Iw4D4LDa7WSQlJUGBdxyIn+DyAUCAAQDxsEXD9kreLQAAAABJRU5ErkJggg==) no-repeat center top;
 }
 
-/* line 90, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 93, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel .content-mgnt-block {
   position: relative;
   line-height: 10px;
 }
-/* line 93, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 96, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel .content-mgnt-block .unicorns {
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAklJREFUeNqEks1u00AQx3d27V3HdezY+SBpkKBFoBZxQEKIOwfegBs3rtwoPABvw3sgceKAuFWtUBBSaT6ctvHXer2zOElTVaoKI/2lWWl/O//ZGZi8jgSPxFv3JX93+CJvfJ4/09++vzH6S/SVH59+IohH5JagxBilC4zNHHigSLvtTCPRnLYxtB4b29ojGglBc1PG1PAyLfUxzszIX7B86MwLP/iVkS566DWeEgo+gfrWdV1VJoZgpUdqon84p1a+wxI1CA+l3Z+yqu89N5a9v65EVgK8TOpgH/edZS6JAZ97/AkfKjF3pTpRkUrlfQFnoGlaHNc2F0sAzPIFWIl9WMEGTYUZJfyB12ED2l9UE6bkDAcoy+0QznXJ8nIEBosNuIb3xLoBNIlRhNlc7Ho9dDA6l1OC8gKGUGEnhAyBFmpSu8zqf9jAzqZ/RIUxFDR0G2LQ6ueIwUzGFIuE95livS4p2RaUVQYas/p+xQ4eiavPqO2nKPUcCrvlCR50uqlirXGeiUWeua4uva6vebNDwHIJErq2fW0Mdfcxpjqmqe37Nnd73US64Ummt8a5bCpZhh5UrZanfS9gBw/5tcorGSz1TJ/rCTljoomOGDTLsh+NUz8Ypdz/ndBwlpFeIdn7Hevm9miD9QNxdVGNSQzGSR3ao6Duekm23fqT3Al/Ju3waAEnr1xyayxnymhgNcU9Z7sx5LtWA+6bquxXaeLr5J+wMZebRQwDiwW2x0O7I1y7ZxOrS+X/4Y0DXJ0pANhgM4sKRv4KMACD6UDbVgTzkgAAAABJRU5ErkJggg==) no-repeat center center;
   width: 15px;
@@ -110,12 +110,12 @@ button {
   right: 0;
   top: 6px;
 }
-/* line 104, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 107, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel label {
   margin: 0;
   font-size: 14px;
 }
-/* line 109, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 112, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel .content-mgnt-block, #overlay_panel #images_mgnt {
   text-align: left;
   padding: 3px 4px;
@@ -127,52 +127,63 @@ button {
   -o-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 116, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 119, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel .content-mgnt-block legend, #overlay_panel #images_mgnt legend {
   font-size: 10px;
   padding: 0 3px;
   margin-left: 10px;
 }
-/* line 123, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 126, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel .slider-block {
   display: block;
 }
-/* line 125, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 128, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel .slider-block label {
-  font-size: 70%;
+  font-size: 60%;
   margin: 0 5px 0 0;
   vertical-align: top;
 }
-/* line 130, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 133, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel .slider-block input[type=range] {
   margin: 0;
+  height: 14px;
+  width: 120px;
 }
-/* line 135, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 140, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel #images_mgnt {
   width: 186px;
 }
-/* line 139, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 144, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel #images_mgnt .controls {
-  padding-bottom: 5px;
+  padding-bottom: 2px;
 }
-/* line 141, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 146, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel #images_mgnt .controls label {
   margin-right: 5px;
 }
-/* line 146, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 151, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+#overlay_panel #images_mgnt .overlay-image-block, #overlay_panel #images_mgnt .images_dir {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-right: none;
+  border-left: none;
+  padding-top: 2px;
+}
+/* line 156, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+#overlay_panel #images_mgnt .overlay-image-block:first-child, #overlay_panel #images_mgnt .images_dir:first-child {
+  border-top: none;
+  padding-top: 0;
+}
+/* line 162, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel #images_mgnt .overlay-image-block {
   text-align: left;
   position: relative;
   width: 186px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-right: none;
-  border-left: none;
 }
-/* line 153, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 166, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel #images_mgnt .overlay-image-block.hovered {
   background-color: rgba(255, 255, 0, 0.5);
 }
-/* line 156, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 169, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel #images_mgnt .overlay-image-block .del-button {
   position: absolute;
   right: 0;
@@ -187,73 +198,107 @@ button {
   font-weight: bold;
   padding: 0 3px;
 }
-/* line 173, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 185, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+#overlay_panel #images_mgnt .images_dir {
+  line-height: 18px;
+}
+/* line 187, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+#overlay_panel #images_mgnt .images_dir .sub-block {
+  border-left: 2px white solid;
+  padding-left: 2px;
+  margin-left: 5px;
+}
+/* line 192, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+#overlay_panel #images_mgnt .images_dir > input[type=checkbox] {
+  -webkit-appearance: none;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAANCAYAAAB7AEQGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKtJREFUeNpiuHz5ctD///+lgJgBF2Z68uRJOgMDw0EgNmTAAZiA4AeQVgHiA0CchFUREpsPiOcCjZ8NZWNVBAaMjIwpQGofEOvjVAQFxkATDwJxMkgNCy7HAk3kB1KzgApf4DIJBD4CcRpQ8TZcJp2D+vQiVjcBjZ8HpBxhCtAVfQbiVKDxIMd+QtbI8u/fP04gfQ+Iw4D4LDa7WSQlJUGBdxyIn+DyAUCAAQDxsEXD9kreLQAAAABJRU5ErkJggg==) no-repeat center center;
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+}
+/* line 198, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+#overlay_panel #images_mgnt .images_dir > input[type=checkbox]:checked {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIlJREFUeNpivHDhQujz589TmZiYvjMQAP/+/eOQkZGZyfD//38ZIL77nzhwG4ilQJpA2BiIPxHQ8BGIDUHqYZpAOIWApiSYWmRNIDfPxaYaKD4bWR2KJiDmA+KzaHrOQMVxagJhfSD+ALXhA5TPQEgTCCcD8V+gpmRs8rg0MQI1eANpJmzyAAEGAKD/bax/HrzbAAAAAElFTkSuQmCC) no-repeat center center;
+  width: 13px;
+  height: 13px;
+  margin: -2px 5px 0 0;
+}
+/* line 207, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+#overlay_panel #images_mgnt .dynamic-adds {
+  padding-top: 4px;
+}
+/* line 209, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel #images_mgnt .dynamic-adds label {
   font-size: 75%;
 }
-/* line 176, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 212, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel #images_mgnt .dynamic-adds input {
   width: 95px;
   font-size: 10px;
+  margin-left: 2px;
 }
-/* line 183, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 217, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+#overlay_panel #images_mgnt .dynamic-adds button {
+  font-size: 10px;
+}
+/* line 223, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel input[type=checkbox], #overlay_panel label, #overlay_panel #contentSlider, #overlay_panel .zindex-switch {
   display: inline;
 }
-/* line 187, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 227, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_panel input[type=checkbox] {
   vertical-align: middle;
   margin: -3px 5px 0 0;
 }
 
-/* line 194, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 234, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_me_images_container {
   position: absolute;
   z-index: 4;
   top: 0;
   left: 0;
 }
-/* line 199, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 239, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_me_images_container div {
   position: absolute;
 }
-/* line 201, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 241, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_me_images_container div.highlight {
   border: 2px solid red;
   margin-top: -2px;
   margin-left: -2px;
 }
-/* line 206, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 246, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_me_images_container div:hover {
   cursor: move;
 }
-/* line 210, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 250, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_me_images_container img {
   position: absolute;
   top: 0;
   left: 0;
 }
 
-/* line 218, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 258, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_me_menu.collapsed .drag-me, #overlay_me_menu.collapsed .menu-item {
   width: 25px;
 }
-/* line 221, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 261, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_me_menu.collapsed .drag-me {
   height: 10px;
   overflow: hidden;
 }
-/* line 225, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 265, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_me_menu.collapsed button {
   height: 10px;
   overflow: hidden;
 }
-/* line 229, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 269, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_me_menu.collapsed .overlay-image-block {
   height: 14px;
   margin-top: 3px;
 }
-/* line 233, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
+/* line 273, /Users/ffmini/Programming/overlay_me/stylesheets/overlay_me.css.scss */
 #overlay_me_menu.collapsed .overlay-image-block label, #overlay_me_menu.collapsed #content_div_management_block, #overlay_me_menu.collapsed .controls, #overlay_me_menu.collapsed input[type=range], #overlay_me_menu.collapsed #overlay_panel #contentSlider, #overlay_me_menu.collapsed legend, #overlay_me_menu.collapsed .dynamic-adds, #overlay_me_menu.collapsed .unicorns, #overlay_me_menu.collapsed button.reset, #overlay_me_menu.collapsed button.hide, #overlay_me_menu.collapsed button.del-button {
   display: none;
 }