// PG. Styles the index page. CP version.

// Inject styles for the icons on the index page to align with the name of the item.
function injectStyles(rule) {
	var div = $("<div />", {
	html: '&shy;<style>' + rule + '</style>'
	}).appendTo("body");
	}

injectStyles('div.index-page i { display: table-cell; }');

$(document).ready(function() {

		// Insert the banner.		
		$('<div class="banner"><a href="/docs/op5-monitor/"><div class="container"><div class="doc-main-logo"></div></div></a></div>' ).insertAfter(".breadcrumbContainer");

		// Insert the line seperating the Archived section from the rest of the page
		$('<div class="row align-items-center" style="display:block; background-color:#FFFFFF"><div class="seperating-line"></div></div>').insertBefore("#archived-section");

		// Add "Expand" button handler.
		$(".btn-expand-collapse").on("click", function() {
				var $button = $(this);

				var $toggler = $('.MCToggler');

				// Open all togglers
				if ($button.hasClass('closed')) {
					$toggler.removeClass('MCToggler_Closed');
					$toggler.addClass('MCToggler_Open');

				// Close all togglers
				} else {

					$toggler.removeClass('MCToggler_Open');
					$toggler.addClass('MCToggler_Closed');
				}

				// Change button text
				if ($(this).html() == 'COLLAPSE ALL') {
					$(this).html('EXPAND ALL');
				} else {
					$(this).html('COLLAPSE ALL');
				}

				// Change button status
				$button.toggleClass('closed');
			})

			$(".MCToggler").on("click", function() {
				var $button = (".btn-expand-collapse");
				var $toggler = $(this);

				var $other_togglers = $('.index-page').find('.MCToggler')

				if ($toggler.hasClass('MCToggler_Open')) {
					if ($other_togglers.hasClass('MCToggler_Open')) {
						$button.removeClass('closed');
						$button.html('COLLAPSE ALL');
					}
				}
		})

	});