 $(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')
 


  #--- Tree branches ---

  # find middle of node
  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
  verticalBranchDist = (node, lastChild) ->
    distanceToTop(node, lastChild) + middleOfHeight(node)

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

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

    $('.panel-header').each ->
      if $(this).hasClass('selectable')
        $(this).removeClass('selectable')

  changePseudoHeight = (node, oldHeight, pseudoElement) ->
    additionalVal = $(node).height() - oldHeight
    currentHeight = parseInt pseudoElement.style.height.replace('px','')
    purposeHeight = (currentHeight + additionalVal).toString()

    pseudoElement.style.height = purposeHeight.concat('px')

  # inherit color from parent panel on load
  # if parent has no color, inherit from parent of parent
