 $(document).on 'ready page:load turbolinks:load', ->
+  # get css rule as js object. Useful for changing css rules
+  getCSSRule = (ruleName, deleteFlag) ->
+    ruleName = ruleName.toLowerCase()
+    if document.styleSheets
+      i = 0
+      while i < document.styleSheets.length
+        styleSheet = document.styleSheets[i]
+        ii = 0
+        cssRule = false
+        loop
+          if styleSheet.cssRules
+            cssRule = styleSheet.cssRules[ii]
+          else
+            cssRule = styleSheet.rules[ii]
+          if cssRule
+            if cssRule.selectorText.toLowerCase() == ruleName
+              if deleteFlag == 'delete'
+                if styleSheet.cssRules
+                  styleSheet.deleteRule ii
+                else
+                  styleSheet.removeRule ii
+                return true
+              else
+                return cssRule
+          ii++
+          unless cssRule
+            break
+        i++
+    false
+
+  # add css rule. Useful for adding pseudoelements
+  addCSSRule = (ruleName, properies) ->
+    if document.styleSheets
+      if !getCSSRule(ruleName)
+        if document.styleSheets[0].addRule
+          document.styleSheets[0].addRule ruleName, properies, 0
+        else
+          document.styleSheets[0].insertRule ruleName + " { #{properies} }", 0
   findPanelHeader = (object) ->
     object.find('.panel').find('.panel-header')
 

    baseBranchProp

  # add vertical line ( :before pseudoelement) to panel which has children
  addVerticalLine = (node) ->
    id        = $(node).attr 'id'
    lastChild = $(node).parent().find ".panel-container[data-last-child=#{id}]"

    if $(lastChild).length
      distance = verticalBranchDist(node, lastChild)
      document.styleSheets[0].addRule(
        "[id='#{id}']::before",
        "#{veticalBranchProp(id, distance)}"
        )

  # add horizontal line (:after pseudoelement) to all panels except root
  addHorizontalLine = (node) ->
    if $(node).hasClass('panel-root')
      true
    else
      id = $(node).attr('id')
      height = middleOfHeight(node)
      document.styleSheets[0].addRule(
        "[id='#{id}']::after",
        "#{horizontalBranchProp(height)}"
        )

  $('.panel-parent').each ->
    addVerticalLine(this)

  $('.panel-container').each ->
    addHorizontalLine(this)

  getCSSRule = (ruleName, deleteFlag) ->
    ruleName = ruleName.toLowerCase()
    if document.styleSheets
      i = 0
      while i < document.styleSheets.length
        styleSheet = document.styleSheets[i]
        ii = 0
        cssRule = false
        loop
          if styleSheet.cssRules
            cssRule = styleSheet.cssRules[ii]
          else
            cssRule = styleSheet.rules[ii]
          if cssRule
            if cssRule.selectorText.toLowerCase() == ruleName
              if deleteFlag == 'delete'
                if styleSheet.cssRules
                  styleSheet.deleteRule ii
                else
                  styleSheet.removeRule ii
                return true
              else
                return cssRule
          ii++
          unless cssRule
            break
        i++
    false

  killCSSRule = (ruleName) ->
    getCSSRule ruleName, 'delete'

  addCSSRule = (ruleName) ->
    if document.styleSheets
      if !getCSSRule(ruleName)
        if document.styleSheets[0].addRule
          document.styleSheets[0].addRule ruleName, null, 0
        else
          document.styleSheets[0].insertRule ruleName + ' { }', 0
    getCSSRule ruleName

  #--- Tree branches ---

  # find middle of node (px)
  middleOfHeight = (node) ->
    Math.abs $(node).height() / 2

  distanceToTop = (node, target) ->
    Math.abs $(node).offset().top - $(target).offset().top

  # find distance btw node and its last child (px)
  verticalBranchDist = (node, lastChild) ->
    distanceToTop(node, lastChild) + middleOfHeight(node)

  baseBranchProp =
    "transition: 0.2s; " +
    "content: ''; " +
    "position: absolute; " +
    "border: 0.1em solid gray; "

  # vertical line properies with dynamic height
  veticalBranchProp = (height) ->
    "margin-left: 2em; " +
    "height: #{height}px; " +
    "z-index: -1; " +
