<script>
function FilterExpand(iconId,resetId,panelId) {
    var im = document.getElementById(iconId);
    var el = document.getElementById(panelId);
    var fr = document.getElementById(resetId);
 
    if (el.style.display === 'none') {
        el.style.display = 'block';
        fr.style.display = 'block';
       
        $('#HiddenInput input').val(window.performance.now()).blur();

        if ( im.getBoundingClientRect().left >= parseInt(document.body.scrollWidth/2) ) {
            el.style.right = (document.body.scrollWidth - im.getBoundingClientRect().left + 5) + 'px';
            fr.style.left = (el.getBoundingClientRect().right) + 'px';
        } else {
            el.style.left = (im.getBoundingClientRect().left + parseInt(im.clientWidth) + 10 ) + 'px';
            fr.style.right = (document.body.scrollWidth - el.getBoundingClientRect().left) + 'px';
        }
        if ( im.getBoundingClientRect().top >= parseInt(document.body.scrollWidth/2) ) {
            fr.style.top = (im.getBoundingClientRect().top - parseInt(im.clientWidth) + 5 ) + 'px';
            el.style.bottom = '50px';
        } else {
            fr.style.top = (im.getBoundingClientRect().bottom + 5) + 'px';
            el.style.top = '85px';
        }
        el.style.maxHeight = (document.body.scrollHeight - parseInt(el.style.top) - 45) + 'px';
    } else {
        el.style.display = 'none';
        fr.style.display = 'none';
    }
}
</script>

<div class='filter-icon'></div>

<div class="filter-reset">
    Please add a filter reset action control button here
</div>
 
<div class="filter">
    <div id="HiddenInput" style="display: none;">
        Please add a Spotfire input field here and connect it to a string type document property. This is to fix the dropdown styling issue that occurs when the filter panel is opened. Don't worry this area will be hidden from your users.
    </div>
 
    Please place your filters Spotfire Controls here
</div>

window.onload = $('.filter-reset').each(function(i, li) {
    li.id = "filter-reset-" + i.toString();
	li.style.display = "none";
	li.style.width = "auto";
	li.style.maxWidth = "110px";
	li.style.background = "white";
	li.style.color = "black";
	li.style.border = "2px solid grey";
	li.style.borderRadius = "6px";
	li.style.padding = "3px";
	li.style.textAlign = "center";
	li.style.position = "fixed";
	li.style.zIndex = "11";
});

window.onload = $('.filter').each(function(i, li) {
    li.id = "filter-" + i.toString();
	li.style.display = "none";
    li.style.width = "315px";
	li.style.background = "white";
	li.style.color = "black";
	li.style.position = "fixed";
	li.style.zIndex = "10";
	li.style.border = "2px solid grey";
	li.style.padding = "5px";
	li.style.borderRadius = "6px";
	li.style.margin = "5px 0px 5px 0px";
	li.style.overflowY = "auto";
});

window.onload = $('.filter-icon').each(function(i, li) {
	li.innerHTML = "<div class='ui-icon ui-icon-search' id='filter-icon-" + i.toString() + "' style='transform: scale(2); margin: 5px auto 5px auto;'></div>";
	li.setAttribute("onclick","FilterExpand('filter-icon-" + i.toString() + "','filter-reset-" + i.toString() + "','filter-" + i.toString() + "');");
	li.style.cursor = "pointer";
});