atlas-anatomy-detail.html 12.9 KB
<style>
    .canvas-annotationStyle {
        display: none;
        background-color: transparent;
        z-index: 12001;
        position: absolute;
        left: 0;
        right: 0;
    }

    .canvas-annotationStyle1 {
        display: none;
        background-color: transparent;
        z-index: 12000;
        position: absolute;
        left: 0;
        right: 0;
    }

    /*.active {
        margin-left: 15px !important;
    }*/

    .tools1 {
        left: -96px;
    }

    .tooltip-custom + .tooltip > .tooltip-inner {
        background-color: #fff;
        border: 1px solid #000;
        color: #000;
        border-radius: 0;
    }

    .tooltip-custom + .tooltip > .tooltip-arrow {
        display: none;
    }


    .custom-tooltip {
        background-color: #333;
        border: 0 none;
        color: #fff !important;
        left: -52px;
        /*opacity: 0.9;*/
        padding: 7px;
        position: absolute;
        text-align: center;
        top: 45px;
        width: 120px;
        display: none;
        z-index: 10000;
        border: 1px solid #000;
        color: #000;
        border-radius: 0;
    }

    .pad0 {
        padding: 0;
    }
</style>
<div id="aaDetailPageDiv" class="bodyWrap row" ng-controller="TileViewListController">

    <!--<div class="col-sm-12 pageHeading">
        <!--<button type="button" class="btn btn-success pull-left toggleBar btn-sm" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"> <i class="fa fa-bars"></i> </button>-->
    <!--<div class=" pull-left toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"> <i class="fa fa-exchange"></i> </div>-->
    <!--<h4 class="pull-left">1<sup>st</sup> &amp; 2<sup>nd</sup> Intercostal Spaces</h4>-->
    <!--<div class="pull-right btn-group paddTop4 hidden-xs"> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-minus"></i></a> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-clone"></i></a> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-close"></i></a> </div>
    <div class="clearfix"></div>-->
    <!--</div>-->
    <div class="tools pull-left" style="top:44px;">
        <div class="toggle-icon toggleBar toggleHeadingButton" id="sideBarToggle" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"></div>
        <div class="sprit-icon">
            <div class="col-sm-6"><button onclick="hidePins(event)" id="hidePinBtn" class="btn btn-black btn-sm tooltip-custom" data-toggle="tooltip" data-placement="bottom" title="Hide Pins"></button> </div>
            <div class="col-sm-6"><button class="btn btn-black btn-sm pull-right tooltip-custom" id="selectedPin" onclick="showSelectedPins(event)" data-toggle="tooltip" data-placement="bottom" title="Show Selected Pins"></button></div>
            <div class="col-sm-6"><button class="btn btn-primary btn-sm marginTop5 tooltip-custom" id="allPinBtn" onclick="showAllPins(event)" data-toggle="tooltip" data-placement="bottom" title="Show All Pins in System(s)"></button></div>
            <div class="col-sm-6">
                <div class="custom-tooltip">Select System</div>
                <button class="btn btn-black btn-sm pull-right marginTop5 dropdown-toggle" type="button" id="dropdownMenu221" onclick="systemChange()"></button>
                <ul class="dropdown-menu" id="bodySystemList">
                    <li><a id="0" href="#" title="Current Structure" onclick="showSelectedSystemPins(event)">All</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="disabledSelectedSystem"><a id="1" href="#" title="Cardiovascular" onclick="showSelectedSystemPins(event)">Cardiovascular</a></li>
                    <li class="disabledSelectedSystem"><a id="2" href="#" title="Digestive" onclick="showSelectedSystemPins(event)">Digestive</a></li>
                    <li class="disabledSelectedSystem"><a id="3" href="#" title="Endocrine" onclick="showSelectedSystemPins(event)">Endocrine</a></li>
                    <li class="disabledSelectedSystem"><a id="4" href="#" title="Immune" onclick="showSelectedSystemPins(event)">Immune</a></li>
                    <li class="disabledSelectedSystem"><a id="5" href="#" title="Integumentary" onclick="showSelectedSystemPins(event)">Integumentary</a></li>
                    <li class="disabledSelectedSystem"><a id="6" href="#" title="Lymphatic" onclick="showSelectedSystemPins(event)">Lymphatic</a></li>
                    <li class="disabledSelectedSystem"><a id="7" href="#" title="Muscular" onclick="showSelectedSystemPins(event)">Muscular</a></li>
                    <li class="disabledSelectedSystem"><a id="8" href="#" title="Nervous" onclick="showSelectedSystemPins(event)">Nervous</a></li>
                    <li class="disabledSelectedSystem"><a id="9" href="#" title="Reproductive" onclick="showSelectedSystemPins(event)">Reproductive</a></li>
                    <li class="disabledSelectedSystem"><a id="10" href="#" title="Respiratory" onclick="showSelectedSystemPins(event)">Respiratory</a></li>
                    <li class="disabledSelectedSystem"><a id="11" href="#" title="Skeletal" onclick="showSelectedSystemPins(event)">Skeletal</a></li>
                    <li class="disabledSelectedSystem"><a id="12" href="#" title="Urinary" onclick="showSelectedSystemPins(event)">Urinary</a></li>
                </ul>
               </div>
            <div class="col-sm-12" data-toggle="tooltip" data-placement="top" title="Show/Hide Structure Name Boxes"><button onclick="showHideAnnotation(event)" class="btn btn-black btn-sm marginTop5 btn-block" id="comment-box"></button> </div>
        </div>
        <div class="pips-slider" style="margin-top:125px">
            <h3>Zoom <i class="fa fa-search-plus"></i></h3>
            <div class="slider" id="vertical-slider"></div>
        </div>
    </div>

    <div class="main2">
        <div class="col-sm-12 stickey-area">
            <div class="breadcrumb">
                <div class="">
                    <div class="input-group col-sm-8 col-xs-7 col-md-10 pull-left">
                        <!--<input class="form-control input-sm " type="text" placeholder="Anterior cutaneous branch of first intercostal nerve">-->
                        <!--<select class="form-control input-sm ">
                          <option>---Select---</option>
                          <option selected>Anterior cutaneous branch of first intercostal nerve</option>
                          <option>Anterior cutaneous branch of second intercostal nerve</option>
                          <option>Anterior cutaneous branch of third intercostal nerve</option>
                          <option>Anterior intercostal artery</option>
                          <option>Anterior intercostal vein</option>
                        </select>-->
                        <!--<div class="input-group-addon btn btn-primary btn-sm"></div>-->
                        <input type="text" class="form-control input-sm pull-left" id="selectedTermName" onclick="onSearchAA()" ondblclick="onSearchAA()" onblur="hideSearchList()" ng-model="searchFilter" placeholder=" search...">

                        <div id="backdrop" ng-show="IsSearchVisible">
                            <div id="searchListDivAA" class="col-sm-12 col-xs-12 col-md-12 col-lg-12 pull-left">
                                <ul id="termlistfilter" class="form-control dropdown-menu" style="height:90px;width:100%;overflow-y:scroll;position:absolute;display:none;z-index:60001;"></ul>
                            </div>
                        </div>
                    </div>
                    &nbsp;
                    <!-- Single button -->
                    <div class="btn-group pull-left" style="vertical-align:top;">

                        <button type="button" style="padding: 5px 10px 4px 10px !important;border: none;" class="btn btn-success btn-sm" onclick="onSearchAA()" onblur="hideSearchList()">
                            <!--<img src="~/../content/images/DA/go-to.png" style="height: 30px;width:50px">-->
                            <i class="fa fa-caret-down" style="font-size:20px;"></i>
                        </button>


                        <!--<button type="button" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-arrow-circle-right"></i>
        </button>-->
                        <!--<ul class="dropdown-menu">
            <li><a href="#">1<sup>st</sup> &amp; 2<sup>nd</sup> Intercostal Spaces</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">All</a></li>
        </ul>-->
                    </div>
                    <!--<div class="btn-group">
                        <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="navigatorMan">
                            <i class="fa fa-male"></i>
                        </button>
                        <ul class="dropdown-menu" style="min-width:auto;">
                            <li><img src="{navImg}"class="img-responsive"></li>
                        </ul>
                    </div>-->


                    <div class="btn-group open" id="da-body-nav">
                        <button id="navigatorBtn" type="button" style="padding:0px 0px 10px 1px !important;background-color:rgba(255,255,255,0.0); border:none;" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            <img src="~/../content/images/DA/navigator-view.png" style="height:30px; width:50px" />
                        </button>

                        <div class="dropdown-menu" id="navigatorDiv" style="min-height: auto; min-width: auto; margin-left: 15px !important;">
                            <div id="containment-wrapper" align="center" style="min-width:auto;height:119px; ">
                                <img id="navimg" alt="" />
                                <div id="draggable" class="draggable ui-widget-content" ng-mouseup="ScrollCanvasDiv()" ng-style="dragdivposition">
                                </div>
                            </div>

                        </div>
                    </div>


                </div>
            </div>
        </div>
        <!--<img id="scream" width="220" height="277" src="~/../../../content/images/noraml-pin.png" style="visibility:hidden" alt="The Scream">-->
        <!--<img src="../../../content/images/noraml-pin.png" style="visibility:hidden" id="normal-pin"/>-->
        <div class="col-sm-12">
            <div class="container-fluid">
                <div class="row">

                    <div class=" col-sm-12 img-thumbnail canvasDivClass" id="canvasDiv" style="overflow: scroll;">
                        <canvas id="canvasPaint" ng-click="FreeStylePaint($event)" width="2277" height="725" class="canvas-annotationStyle1"></canvas>
                        <canvas id="canvas" ng-click="onDrawingCanvasClick($event)" width="2277" height="725" class="canvas-annotationStyle"></canvas>

                        <img id="modItemImage" alt="" title="" style="left:0px;top:0px;position:absolute">
                        <!--<div class="clearfix">

                           <img id="modItemImage" ng-init="alert('hi')" alt="" title="" class="img-responsive">
                        </div>
                        <!--<div class="col-sm-1 img-thumbnail pull-right" align="center"><img src="../../content/images/1000x600.jpg" alt="" title="" class="img-responsive"></div>
        <div class="clearfix"></div>-->
                    </div>
                </div>
            </div>


        </div>

    </div>
</div>
<script>
    $(window).load(function () {
        $(".stickey-area").sticky();
    });
</script>
<script>
    $(".tooltip-custom").tooltip({
        tooltipClass: 'customTooltip'
    });
</script>
<script>
    $(function () {
        var $ua = navigator.userAgent;
        if (($ua.match(/(iPod|iPhone|iPad|android)/i))) {

        }
        else
        {
            $("#dropdownMenu221").mouseover(function () {
                $(".custom-tooltip").css("display", "block");
            });
            $("#dropdownMenu221").mouseout(function () {
                $(".custom-tooltip").css("display", "none");
            });
        }
        
    });
</script>

<script>
    var isSideBarBtnClicked = true;
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
        $("#sideBarToggle").click(function () {
            if (isSideBarBtnClicked == true) {
                $(".main2").addClass("active");
                $(".tools").addClass("tools1");
                isSideBarBtnClicked = false;

            }
            else {
                $(".main2").removeClass("active");
                $(".tools").removeClass("tools1");
                isSideBarBtnClicked = true;
            }

        });
    });
</script>


<script>
    $(function () {
        $("#draggable").draggable();
    });
</script>