atlas-anatomy-detail.html 8.96 KB

<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" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"></div>
        <div class="">
            <div class="col-sm-6" title="Hide Pins"><button class="btn btn-black btn-sm" ng-click="alert('hi pin')"> <img src="../../../content/images/aa/LeftMenu/hide-pin.png" alt="" title=""></button> </div>
            <div class="col-sm-6" title="Show Selected Pins"><button class="btn btn-black btn-sm pull-right"><img src="../../../content/images/aa/LeftMenu/draw-pin.png" alt="" title=""></button></div>
            <div class="col-sm-6" title="Show All Pins in System(s)"><button class="btn btn-primary btn-sm marginTop5"><img src="../../../content/images/aa/LeftMenu/all-pin.png" alt="" title=""></button></div>
            <div class="col-sm-6" title="Select System">
                <button class="btn btn-black btn-sm pull-right marginTop5 dropdown-toggle" type="button" id="dropdownMenu221" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><img src="../../../content/images/aa/LeftMenu/icon-highlight.png" alt="" title=""></button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu221">
                    <li><a href="#" title="Current Structure">All</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a id="1" href="#" title="Cardiovascular"  onclick="showSelectedSystemPins(event)">Cardiovascular</a></li>
                    <li><a id="2" href="#" title="Digestive" onclick="showSelectedSystemPins(event)">Digestive</a></li>
                    <li class="disabled"><a id="3" href="#" title="Endocrine" onclick="showSelectedSystemPins(event)">Endocrine</a></li>
                    <li ><a id="4" href="#" title="Immune" onclick="showSelectedSystemPins(event)">Immune</a></li>
                    <li class="disabled"><a id="5" href="#" title="Integumentary" onclick="showSelectedSystemPins(event)">Integumentary</a></li>
                    <li class="disabled"><a id="6" href="#" title="Lymphatic" onclick="showSelectedSystemPins(event)">Lymphatic</a></li>
                    <li><a id="7" href="#" title="Muscular" onclick="showSelectedSystemPins(event)">Muscular</a></li>
                    <li class="disabled"><a id="8" href="#" title="Nervous" onclick="showSelectedSystemPins(event)">Nervous</a></li>
                    <li class="disabled"><a id="9" href="#" title="Reproductive" onclick="showSelectedSystemPins(event)">Reproductive</a></li>
                    <li class="disabled"><a id="10" href="#" title="Respiratory" onclick="showSelectedSystemPins(event)">Respiratory</a></li>
                    <li><a id="11" href="#" title="Skeletal" onclick="showSelectedSystemPins(event)">Skeletal</a></li>
                    <li class="disabled"><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 class="btn btn-black btn-sm marginTop5 btn-block"> <img src="../../../content/images/aa/LeftMenu/comment-box.png" alt="" title=""></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>-->
                    </div>
                    &nbsp;
                    <!-- Single button -->
                    <div class="btn-group">
                        <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" ng-click="alert('hi nav')">
                            <i class="fa fa-male"></i>
                        </button>
                        <ul class="dropdown-menu" style="min-width:auto;">
                            <li><img src="../../../content/images/aa/LeftMenu/position.jpg" class="img-responsive"></li>
                        </ul>
                    </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"  id="imageDiv" style="height: 478px; overflow: scroll;">
                        <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>
    $(function () {
        $("#slider-range-min-2").slider({
            range: "min",
            min: 1,
            max: 60,
            value: 10,
            slide: function (event, ui) {
                $("#amount-2").val(ui.value);
            }
        });
        $("#amount-2").val($("#slider-vertical-2").slider("value"));

    });
</script>

<script>
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>
<script src="js/jquery-ui-slider-pips.js"></script>
<script>
    $(".slider")

    .slider({
        min: 25,
        max: 100,
        value: 100,
        range: "min",
        orientation: "vertical"
    })

    .slider("pips", {
        rest: "label",
        step: "15"
    });
</script>

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

<script src="app/controllers/TileViewListController.js"></script>