/*
Collapsible Panels for the UW-Madison KnowledgeBase
by: Daniel Simanek <dsimanek@wisc.edu>
version 3.0beta

To use:
Add this code at the top of your document body:
<script type="text/javascript" src="/images/group148/shared/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/images/group148/shared/collapsiblePanels.js"></script>

DO NOT ADD THIS STYLESHEET TO DOCUMENTS. It will be added automatically by the javascript files above.

To create a panel:
Add <div class="collapsible" title="insert title here"></div> and put all content you wish to be collapsible in that div.
Replace 'insert title here' with a more appropriate title.

To style a panel:
Panels will come with default style which can be overwriten by users. To style panel, simply add CSS definitions
to the panel's style attribute. The following properties are available:

background: the background of the panel's content (excluding the header). Use and vaild CSS background format. Default is none.
background-color: the background color of the panel's content (excluding the header). Use any valid CSS color format. Default is none.
background-image: the background image of the panel's content (excluding the header). Use the CSS file link format. Default is none.
background-repeat: the panel content (excluding the header) background image's repeat setting. Use any valid CSS attribute. Default is repeat.
background-attachment: the panel content (excluding the header) background image's attachment setting. Use any valid CSS attribute. Default is scroll.
background-position: the panel content (excluding the header) background image's staring position. Use any valid CSS attribute. Default is 0% 0%.
border: all borders in the panel, including border-middle (see below). Use any valid CSS border format. Default is 1px solid black.
border-bottom: the bottom border of the panel. Use any valid CSS border format. Default is 1px solid black.
border-left: the left border of the panel. Use any valid CSS border format. Default is 1px solid black.
border-middle: the border between the panel's header and body. Use any valid CSS border format. Default is 1px solid black.[1]
border-right: the right border of the panel. Use any valid CSS border format. Default is 1px solid black.
border-top: the top border of the panel. Use any valid CSS border format. Default is 1px solid black.[2]
collapse-state: controls if the panel starts opened or closed on page load. Choose from collapsed or uncollapsed. Default is collapsed.[3]
content-padding: the padding between the outside border of the collapsible area and the content. Default is 15px.
header-backgound-color: the backgound color of the header. Use any vaild CSS color format. Default is lightgrey.
header-height: the height of the header element (excludes padding, border, and margin).[4] Default is auto.[5]
header-hover-background-color: the background color of the header durring mouse over. Use any valid CSS color format. Default is header-background-color.
header-padding-bottom: the padding between the bottom header border and the header content. Default is 5px.
header-padding-left: the padding between the left header border and the header content. Default is 0px.
header-padding-right: the padding between the right header border and the header content. Default is 0px.
header-padding-top: the padding between the top header border and the header content. Default is 5px.
header-type: the type of header tags used to display the header title. Choose from h1, h2, h3, h4, h5, or h6. Default is h4.

Using classes:
Panels cannot be styled using normal CSS, because the of the way this module constructs them. Classes can be used, however, and 
the code to define their rules is very similar to the traditional method. Here is how to define styles for classes used on the panels:

<script type="text/javascript">
var classStyles = {
  "testClass1": {
    "property1": "value1",
    "property2": "value2"
  },
  "testClass2": {
    "property3": "value3"
  }
};
</script>

testClass1 and testClass2 are the two class styles defined in this example. You can define as many classes as you would like, just 
be sure to sperate each class by a comma. property1, property2, and property3 are CSS properties. You may use any of the properties
in the list above. value1, value2, and value3 are the values you want to be applied to the corresponding property. See the properties
list above for acceptable values.

Expand and collapse all:
You can add links to expand and collapse all panels by adding <div class="collapsibleExpander"></div> to you document. The links will
automatically be added to that div. You may style that div using the usual CSS methods.

Expanding panels on page load with URL hash:
If you give you collapsible div's names, you can use URL hashes to open the panels at the time of page load, and then jump directly to them. 
For example: <div class="collapsible" name="jump" title="insert title here"></div> would allow you to use the URL "example.com#jump" to open 
the designated panel and cause the top of the viewport to move directly to it.

[1] border-middle will be hidden when the panel is collapsed.
[2] border-top will be hidden on collapsed elements that appear consecutively, except on the first element in the sequence.
[3] Replaces the depricated 'uncollapsed' class. If that class is used, a user provided value will override it.
[4] Objects in the header will be vertically centered in this span.
[5] The user-set value will reset to auto if the provided value is too small to contain the objects in the header.

*/

.collapsibleBody {
  display: none;
  position: relative;
  border-collapse:collapse;
  padding: 15px 15px 50px 15px;
  width: 100%;
}

.collapsibleBody.showing {
  display: block;
}

.collapsibleHeader {
  border-collapse:collapse;
  width: 100%;
  background-color: lightgrey;
}

.collapsibleHeader * {
  display: inline-block;
  position: relative; 
  /*vertical-align: middle;*/
  margin: 0px;
  cursor: pointer;
}

.collapsibleHeader .fas {
  margin-right: 7px;
}

.collapsibleHeader h1,
.collapsibleHeader h2,
.collapsibleHeader h3,
.collapsibleHeader h4,
.collapsibleHeader h5,
.collapsibleHeader h6 {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;
  cursor: pointer;
}

.collapsibleHeader p {
  padding: 0px 15px;
  font-weight:bold;
  color: dimgray;
}

.collapsible {
  border-collapse:collapse;
  border: 1px solid black;
  border-top: none;
  flex-wrap: wrap!important;
}

.collapsibleCloseLink, .collapsibleCloseLinkHelper{
  display: block!important;
  position: absolute;
  right: 20px;
  bottom: 15px;
}

.collapsibleCloseLinkHelper {
}

.collapsibleCloseLink {

}

@media print {
  .collapsibleBody {
    display: none;
  }
  .collapsibleHeader {
    border-bottom: 1px solid black;
  }
}