const marginContainer = document.querySelectorAll('.margin');
const borderContainer = document.querySelectorAll('.border');
const paddingContainer = document.querySelectorAll('.padding');
const contentContainer = document.querySelectorAll('.content');
const interactableContainers = document.querySelectorAll('.interactable-container');

// for all the interactable containers, add event listeners to:
//    reset all interactive containers to not have a hover state:
//    for the imediate hovered element, add a hover state.
interactableContainers.forEach((container, index) => {
  container.addEventListener('mouseover', (event) => {
    resetClasses();
    addHoverClass(event, container);
  });
});

// Listener for removing the hover class on the outermost container
marginContainer[0].addEventListener('mouseout', (event) => {
  resetClasses();
});

// Remove hover class from all containers
function resetClasses() {
  interactableContainers.forEach((container, index) => {
    container.classList.remove('hovered');
  });
}

// Add the hover class to all containers
function addHoverClass(event, container) {
  event.stopPropagation();
  container.classList.add('hovered');
}

/**
 * Dialogr events
 */
dialogr(marginContainer, {
  content: `<h2>Margin</h2>
<p>This is the space around the element, and outside of any defined borders. It can be set with any of the following properties:</p>
<pre>margin: "value";
margin-top: "value";
margin-right: "value";
margin-bottom: "value";
margin-left: "value";</pre>
<p>Here are the values that can be used with margins:</p>
<pre>'auto': let the browser take care of it!
'inherit': get a value from the parent element.
'number': this would be a number in px, inches, a percent, etc.
</pre>
<p>Couple notes. First, negative values work! Second, if you set the width of a container, the margin isn't included in that, so be careful.</p>
<p><a href="https://www.w3schools.com/css/css_margin.asp" target="_blank">Read More</a></p>`
});
dialogr(borderContainer, {
  content: `<h2>Border</h2>
<p>Set a border around an element, with a specific color, size, and type. It can be set either for the entirety of the element, OR for an individual side. Here's how you can set the border (or just an individual aspect of the border:</p>
<pre>
border: 'size' 'type' 'color';
border-width: 'size';
border-style: 'type';
border-color: 'color';
</pre>
<p>It's also possible to set a border radius to give your elements rounded corners! This is done with the 'border-radius' property.</p>
<p><a href="https://www.w3schools.com/css/css_border.asp" target="_blank">Read More</a></p>`
});
dialogr(paddingContainer, {
  content: `<h2>Padding</h2>
<p>This is spacing in between the element's border and its content. The values it accepts are the same as the margin property, accept for 'auto'. That doesn't really work with padding. Here's how to set padding:</p>
<pre>padding: "value";
padding-top: "value";
padding-right: "value";
padding-bottom: "value";
padding-left: "value";</pre>
<p>Quick tip: depending on how your element's <a href="https://www.w3schools.com/cssref/css3_pr_box-sizing.asp" target="_blank">box sizing</a> is set, your padding may or may not be included in the element's width. Also, an elements background extends over it's padding.</p>
<p><a href="https://www.w3schools.com/css/css_padding.asp" target="_blank">Read More</a></p>`
});
dialogr(contentContainer, {
  content: `<h2>Content</h2><p>This is your actual content: any text or child elements. When you set width & height for an element, this is what your setting it for (unless you took a look at that 'box-sizing' property).</p>`
});