Equine Skeletal System

by nickadeemus2002

HTML

<script src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>
<script src="http://plugins.jquery.com/files/jquery.color.js.txt"></script>
<html><head>
    
    <script src="SkeletonJointExample_files/jquery-1.js" type="text/javascript"></script>
    <script src="SkeletonJointExample_files/jquery.js" type="text/javascript"></script>
    
    <div id="main_skeleton_joint_div" style="width:1070px; height:788px;">
        <div style="width:675px; overflow: hidden; float:left;">
            <div style="display: block; background: url(&quot;http://i52.tinypic.com/29ncevs.jpg&quot;) repeat scroll 0% 0% transparent; position: relative; padding: 0px; width: 675px; height: 788px;" id="mapster_wrap_0"><canvas style="position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px none; opacity: 0.5;" height="788" width="675"></canvas><canvas style="position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px none; display: block;" height="788" width="675"></canvas><img style="opacity: 0; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px none;" id="ProximalSesamoid" src="http://i52.tinypic.com/29ncevs.jpg" usemap="#joint_map_name" alt="Skeleton joint image" height="788" width="675">
            </div>
            <asp:panel runat="server" id="jointlist" style="float:left; padding-left: 10px; width:675px; height: 788px; ">
                <div id="jl_ps_div" style="float:left; width:300px">
                    <asp:label id="PS_Label" runat="server" style="font-family:arial;float:left;width:300px">Proximal Sesamoid</asp:label>
                    <div id="L_PS" style="font-family:arial;font-size:small;float:left;padding-left:3px">
                 <label style="font-family:arial;font-weight:bolder">L:</label>
                 <input id="jl_L_PS_Mild" name="L_PS" type="checkbox"><span style="font-family:arial;font-size:small" class="sel" key="L_PS">Mild</span>
                 <input id="jl_L_PS_Moderate" "="" name="L_PS"...

JavaScript

$(document).ready(function() {

    var $jointlist, $joint_map, default_options, mapsterConfigured;


    //$toolTipList = $('#hidden_divs');
    $jointlist = $('#jointlist');
    $joint_map = $('#ProximalSesamoid');


    function getFullCheckBoxID(item) {

        var checkBoxName = item.attr('name');
        var checkBoxId = item.attr('id');
        var subType;

        if (checkBoxId.indexOf("_Mild") >= 1) {
            subType = "_Mild"
        } else if (checkBoxId.indexOf("_Comminuted") >= 1) {
            subType = "_Comminuted"
        }
        return checkBoxName + subType;
    }

    function setMapsterArea(selectedInputs, name) {
        selected = selectedInputs.length > 0;
        $joint_map.mapster('set', selected, name);
    }

    function doCheckBoxAreaAction(chkBox, checked) {
        var fullID = getFullCheckBoxID(chkBox);
        var checkBoxName = chkBox.attr('name');
        var listCheckbox = $jointlist.find('#jl_' + fullID);
        listCheckbox.attr('checked', checked);

        setMapsterArea($('#' + checkBoxName + '_divID').find('input:checked'), checkBoxName);
    }

    function setToolTipCheckBoxEvent(data) {
        // Get the two checkboxes within the 
        var checkBoxes = data.toolTip.find('input');

        checkBoxes.each(function() {

            var span = $(this).parent().find('span');

            span.unbind('click').bind('click', function(e) {
                var chk = $(this).parent().find('input');
                var isChecked = chk.is(':checked');
                // want to do opposite of what the check box is
                // set the checkbox
                chk.attr('checked', !isChecked);
                doCheckBoxAreaAction(chk, !isChecked);
            });

            var ttName = $(this).attr('name');

            var checkBoxId = getFullCheckBoxID($(this));
            var listCheckbox = $jointlist.find('#jl_' + checkBoxId);

            if (listCheckbox.attr('name') == ttName) {
               ...