serprot.html

<script type="text/javascript" src="jsmol/JSmol.min.js"></script>
<script type="text/javascript">
    var Info = {
        color: "#FFFFFF", // white background
        height: 400,
        width: "100%", // fill the JSMol box to its container's width
        coverImage: "images/white.png",
        deferApplet: true, // don't load until user clicks on JSMol box
        deferUncover: true, // don't uncover until script fully executed
        script: "script scripts/serprot1.txt",
        use: "HTML5",
        j2sPath: "jsmol/j2s",
        serverURL: "http://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php",
        disableInitialConsole: true,
        debug: false,
    };

    // don't load any JSMol until the page itself has finished loading
    $(document).ready(function(){
        // prevent JSMol from taking entire page
        Jmol.setDocument(0);
        // create new JSMol instance with parameters defined in Info above
        Jmol.getApplet("myJmol1", Info);
        // reuse Info parameters for subsequent JSMol instances, changing
        // only the script path
        Info.script = "script scripts/serprot2.txt";
        Jmol.getApplet("myJmol2", Info);
        Info.script = "script scripts/serprot3.txt";
        Jmol.getApplet("myJmol3", Info);
        Info.script = "script scripts/serprot4.txt";
        Jmol.getApplet("myJmol4", Info);
        Info.script = "script scripts/serprot5.txt";
        Jmol.getApplet("myJmol5", Info);
        Info.script = "script scripts/serprot6.txt";
        Jmol.getApplet("myJmol6", Info);
        Info.script = "script scripts/serprot7.txt";
        Jmol.getApplet("myJmol7", Info);
        // put JSMol code into the correct containers (id=jsmolWindowN)
        $("#jsmolWindow1").html(Jmol.getAppletHtml(myJmol1));
        $("#jsmolWindow2").html(Jmol.getAppletHtml(myJmol2));
        $("#jsmolWindow3").html(Jmol.getAppletHtml(myJmol3));
        $("#jsmolWindow4").html(Jmol.getAppletHtml(myJmol4));
        $("#jsmolWindow5").html(Jmol.getAppletHtml(myJmol5));
        $("#jsmolWindow6").html(Jmol.getAppletHtml(myJmol6));
        $("#jsmolWindow7").html(Jmol.getAppletHtml(myJmol7));
        // give our JSMol containers breathing room above and below
        $("#myJmol1_appletinfotablediv").css({
            "margin-top": "10px",
            "margin-right": "auto",
            "margin-bottom": "10px",
            "margin-left": "auto"
        });
        $("#myJmol2_appletinfotablediv").css({
            "margin-top": "10px",
            "margin-right": "auto",
            "margin-bottom": "10px",
            "margin-left": "auto"
        });
        $("#myJmol3_appletinfotablediv").css({
            "margin-top": "10px",
            "margin-right": "auto",
            "margin-bottom": "10px",
            "margin-left": "auto"
        });
        $("#myJmol4_appletinfotablediv").css({
            "margin-top": "10px",
            "margin-right": "auto",
            "margin-bottom": "10px",
            "margin-left": "auto"
        });
        $("#myJmol5_appletinfotablediv").css({
            "margin-top": "10px",
            "margin-right": "auto",
            "margin-bottom": "10px",
            "margin-left": "auto"
        });
        $("#myJmol6_appletinfotablediv").css({
            "margin-top": "10px",
            "margin-right": "auto",
            "margin-bottom": "10px",
            "margin-left": "auto"
        });
        $("#myJmol7_appletinfotablediv").css({
            "margin-top": "10px",
            "margin-right": "auto",
            "margin-bottom": "10px",
            "margin-left": "auto"
        });
        $("#resetBtn1").click(reset1);
        $("#resetBtn2").click(reset2);
        $("#resetBtn3").click(reset3);
        $("#resetBtn4").click(reset4);
        $("#resetBtn5").click(reset5);
        $("#resetBtn6").click(reset6);
        $("#resetBtn7").click(reset7);
        $("#spinBox1").click(spin1);
        $("#spinBox2").click(spin2);
        $("#spinBox3").click(spin3);
        $("#spinBox4").click(spin4);
        $("#spinBox5").click(spin5);
        $("#spinBox6").click(spin6);
        $("#spinBox7").click(spin7);
    });

    function reset1(event){
        Jmol.script(myJmol1, "script scripts/serprot1.txt")
    };

    function reset2(event){
        Jmol.script(myJmol2, "script scripts/serprot2.txt")
    };

    function reset3(event){
        Jmol.script(myJmol3, "script scripts/serprot3.txt")
    };

    function reset4(event){
        Jmol.script(myJmol4, "script scripts/serprot4.txt")
    };

    function reset5(event){
        Jmol.script(myJmol5, "script scripts/serprot5.txt")
    };

    function reset6(event){
        Jmol.script(myJmol6, "script scripts/serprot6.txt")
    };

    function reset7(event){
        Jmol.script(myJmol7, "script scripts/serprot7.txt")
    };

    function spin1(event){
        if (event.target.checked){
            Jmol.script(myJmol1, "set spin x 10; set spin y 10; spin on")
        } else {
            Jmol.script(myJmol1, "spin off")
        };
    };

    function spin2(event){
        if (event.target.checked){
            Jmol.script(myJmol2, "set spin x 10; set spin y 10; spin on")
        } else {
            Jmol.script(myJmol2, "spin off")
        };
    };

    function spin3(event){
        if (event.target.checked){
            Jmol.script(myJmol3, "set spin x 10; set spin y 10; spin on")
        } else {
            Jmol.script(myJmol3, "spin off")
        };
    };

    function spin4(event){
        if (event.target.checked){
            Jmol.script(myJmol4, "set spin x 10; set spin y 10; spin on")
        } else {
            Jmol.script(myJmol4, "spin off")
        };
    };

    function spin5(event){
        if (event.target.checked){
            Jmol.script(myJmol5, "set spin x 10; set spin y 10; spin on")
        } else {
            Jmol.script(myJmol5, "spin off")
        };
    };

    function spin6(event){
        if (event.target.checked){
            Jmol.script(myJmol6, "set spin x 10; set spin y 10; spin on")
        } else {
            Jmol.script(myJmol6, "spin off")
        };
    };

    function spin7(event){
        if (event.target.checked){
            Jmol.script(myJmol7, "set spin x 10; set spin y 10; spin on")
        } else {
            Jmol.script(myJmol7, "spin off")
        };
    };

    // turn off the JSMol alert that binary file loading is limited
    Jmol._alertNoBinary = false;
</script>

<!-- Page Title: Serine Protease -->
<h2>Introduction</h2>
<p>
    These scripts show some aspects of the mechanism of the serine protease
    chymotrypsin (Based on 8gch.pdb, Harel et al. (1991) Biochemistry
    <strong>30</strong>: 5217-5225 and 2tbs.pdb, Smalas et al. (1994) Proteins
    <strong>20</strong>: 149-166)
</p>
<br>

<h2>Serine Protease 1</h2>
<p>
    The catalytic triad is composed of <span style="color:red;">His57</span>,
    <span style="color:blue;">Asp102</span> and <span style="color:lime;">
    Ser195</span>.
</p>
<!-- JSMol Window Container -->
<div id="jsmolWindow1"></div>
<!-- UI Control Box -->
<div style="text-align: center;">
    <!-- give the button a right margin for spacing -->
    <button type="button" id="resetBtn1" style="margin-right: 10px;">Reset</button>
    <input type="checkbox" id="spinBox1"> Spin On/Off
</div>
<br>

<h2>Serine Protease 2</h2>
<p>
    Note how proton (<span style="color:gold;">YELLOW</span>) transfer is setup
    by the arrangement of the triad.
</p>
<div id="jsmolWindow2"></div>
<div style="text-align: center; margin-top: 10px;">
    <button type="button" id="resetBtn2" style="margin-right: 10px;">Reset</button>
    <input type="checkbox" id="spinBox2"> Spin On/Off
</div>
<br>

<h2>Serine Protease 3</h2>
<p>
    Here is a view of a <span style="color:magenta;">substrate analog</span>
    bound in the active site and the residues in the protein that interact with
    it.
</p>
<div id="jsmolWindow3"></div>
<div style="text-align: center; margin-top: 10px;">
    <button type="button" id="resetBtn3" style="margin-right: 10px;">Reset</button>
    <input type="checkbox" id="spinBox3"> Spin On/Off
</div>
<br>

<h2>Serine Protease 4</h2>
<p>
    Substrate binding involves two interactions: (1) the specificity pocket,
    which binds a <span style="color:lime;"><strong>Trp</strong></span>, and (2)
    nonspecific binding of the poylpeptide chain via hydrogen bonds
    (<span style="color:gold;">YELLOW</span>).
</p>
<div id="jsmolWindow4"></div>
<div style="text-align: center; margin-top: 10px;">
    <button type="button" id="resetBtn4" style="margin-right: 10px;">Reset</button>
    <input type="checkbox" id="spinBox4"> Spin On/Off
</div>
<br>

<h2>Serine Protease 5</h2>
<p>
    Here we see the <span style="color:blue;">catalytic traid</span> poised to
    attack the substrate.
</p>
<div id="jsmolWindow5"></div>
<div style="text-align: center; margin-top: 10px;">
    <button type="button" id="resetBtn5" style="margin-right: 10px;">Reset</button>
    <input type="checkbox" id="spinBox5"> Spin On/Off
</div>
<br>

<h2>Serine Protease 6</h2>
<p>
    Here we see that the tetrahedral intermediate is stablized by hydrogen bonds
    between the <span style="color:cyan;">oxygen</span> of the tetrahedral
    intermediate and the peptide backbone of the <span style="color:orange;">
    oxyanion hole</span>.
</p>
<div id="jsmolWindow6"></div>
<div style="text-align: center; margin-top: 10px;">
    <button type="button" id="resetBtn6" style="margin-right: 10px;">Reset</button>
    <input type="checkbox" id="spinBox6"> Spin On/Off
</div>
<br>

<h2>Serine Protease 7</h2>
<p>
    In trypsin, the specificity pocket has a negatively charged Asp that binds
    to the basic sidechains Lys or Arg. In this view an inhibitor, benzamidine,
    is bound to the active site.
</p>
<div id="jsmolWindow7"></div>
<div style="text-align: center; margin-top: 10px;">
    <button type="button" id="resetBtn7" style="margin-right: 10px;">Reset</button>
    <input type="checkbox" id="spinBox7"> Spin On/Off
</div>