Team:NJU NJUT China/project

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
-
<link rel="stylesheet" type="text/css" href="http://igem.3vfree.us/css/style1.css" />
+
<head>
-
<script src="http://igem.3vfree.us/js/FancyZoom_zzjs_net.js" language="JavaScript" type="text/javascript"></script>
+
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
-
<script src="http://igem.3vfree.us/js/FancyZoomHTML.js" language="JavaScript" type="text/javascript"></script>
+
<title>main</title>
<style type="text/css">
<style type="text/css">
-
/* hiding the top section*/
 
-
body{position:absolute; top:0px; width:100%; height:1380px;}
 
#top-section{
#top-section{
   height:0px;
   height:0px;
Line 49: Line 48:
#globalWrapper{position:absolute; top:0px;left:0px; width:100%; padding:0 0 0 0;margin:0 0 0 0;height:100%;}
#globalWrapper{position:absolute; top:0px;left:0px; width:100%; padding:0 0 0 0;margin:0 0 0 0;height:100%;}
#content{
#content{
-
    font-family: Arial, Helvetica, sans-serif;
+
 
-
    font-size: 12px;
+
 
     background-color:transparent;
     background-color:transparent;
     border:none;
     border:none;
Line 72: Line 71:
     }
     }
/* end of global setting*/
/* end of global setting*/
-
<script type="text/javascript">
+
#cover{
-
Cufon.replace('h1',{ textShadow: '1px 1px #000'});
+
    width:100%;
-
Cufon.replace('h2',{ textShadow: '1px 1px #000'});
+
height:100%;
-
Cufon.replace('.footer',{ textShadow: '1px 1px #000'});
+
position:absolute;
-
Cufon.replace('.pxs_loading',{ textShadow: '1px 1px #000'});
+
top:0px;
-
</script>
+
left:0px;
 +
    z-index:0;
 +
}
 +
#cover img{
 +
width:100%;
 +
height:100%;
 +
}
 +
#guide0
 +
{
 +
position:absolute;
 +
width:11%;
 +
height:16%;
 +
left:60%;
 +
top:2%;
 +
z-index:10;
 +
}
 +
#guide1
 +
{
 +
position:absolute;
 +
width:11%;
 +
height:16%;
 +
left:71%;
 +
top:2%;
 +
z-index:10;
 +
}
 +
#guide2
 +
{
 +
position:absolute;
 +
width:11%;
 +
height:16%;
 +
left:81%;
 +
top:2%;
 +
z-index:10;
 +
}
 +
#guide3
 +
{
 +
position:absolute;
 +
width:14%;
 +
height:15%;
 +
left:80%;
 +
top:19%;
 +
z-index:10;
 +
}
 +
#guide4
 +
{
 +
position:absolute;
 +
width:14%;
 +
height:16%;
 +
left:80%;
 +
top:36%;
 +
z-index:10;
 +
}
 +
#guide5
 +
{
 +
position:absolute;
 +
width:13.5%;
 +
height:16%;
 +
left:80%;
 +
top:54%;
 +
z-index:10;
 +
}
 +
#guide6
 +
{
 +
position:absolute;
 +
width:13.5%;
 +
height:16%;
 +
left:80%;
 +
top:70.5%;
 +
z-index:10;
 +
}
 +
#mycontent{
 +
width:63.9%;;/*63.9%*/
 +
height:60.6%;
 +
position:absolute;
 +
top:24.8%;
 +
left:13.1%;
 +
z-index:5;
 +
overflow-y:scroll;
 +
}
 +
</style>
 +
<style type="text/css">
 +
#content
 +
{
 +
position:relative;
 +
left:5%;
 +
    width:90%;
 +
height:auto;
 +
border: 0px solid #333;
 +
    font-family: 'MS Sans Serif', Geneva, sans-serif;
 +
font-size: 15px;
 +
color:#000000;
 +
}
 +
</style>
<style>
<style>
-
body{
+
/*---滚动条默认显示样式--*/
-
            font-family:Arial;
+
::-webkit-scrollbar-thumb{ 
-
        }
+
  background-color:#999900;
-
        .header
+
  height:50px;
-
        {
+
  outline-offset:-2px;
-
            width:600px;
+
  outline:0px solid #fff;
-
            height:56px;
+
  -webkit-border-radius:4px;
-
            position:absolute;
+
  border: 0px solid #fff;
-
            top:50%;
+
}
-
            left:10px;
+
/*---鼠标点击滚动条显示样式--*/ 
-
            background:#fff url(title.png) no-repeat top left;
+
::-webkit-scrollbar-thumb:hover{ 
-
        }
+
  background-color:#993300;
-
        a.back{
+
  height:50px;
-
            width:256px;
+
  -webkit-border-radius:4px;
-
            height:73px;
+
}
-
            position:absolute;
+
/*---滚动条大小--*/ 
-
            bottom:15px;
+
::-webkit-scrollbar{
-
            right:15px;
+
  width:12px;
-
            background:#fff url(codrops_back.png) no-repeat top left;
+
  height:8px;
-
        }
+
}
-
        a.dry{
+
/*---滚动框背景样式--*/ 
-
            position:absolute;
+
::-webkit-scrollbar-track-piece{ 
-
            bottom:15px;
+
  background-color:#CC9900; 
-
            left:15px;
+
  -webkit-border-radius:0;
-
            text-align:left;
+
-
            font-size:12px;
+
-
            color:#ccc;
+
-
            text-transform:uppercase;
+
-
            text-decoration:none;
+
-
        }
+
-
.aa {height:105px; overflow:hidden;}
+
-
.bb {}
+
-
    </style>
+
-
<style>
+
-
*{
+
-
margin: 0;
+
-
padding: 0;
+
-
}
+
-
 
+
-
body {
+
-
margin: 0;
+
-
padding: 0;
+
-
background:url(http://igem.3vfree.us/images/bg1.jpg) repeat-x top left;
+
-
color: #787878;
+
}
}
 +
</style>
 +
</head>
 +
<body onload="setupZoom()";>
 +
<div id="cover">
 +
  <img src="https://static.igem.org/mediawiki/igem.org/6/61/NJU_NJUT_CHINA_Projectb.jpg" />
 +
  </div>
 +
  <div id="guide0">
 +
<a href="https://2013.igem.org/Team:NJU_NJUT_China" > <img  src="https://static.igem.org/mediawiki/igem.org/2/26/NJU_NJUT_CHINA_Home.jpg" /></a>
 +
</div>
 +
<div id="guide1">
 +
<a href="https://2013.igem.org/Team:NJU_NJUT_China/team" target="team" ><img  src="https://static.igem.org/mediawiki/igem.org/3/31/NJU_NJUT_CHINA_Teamb.jpg"  target="team"/></a>
 +
</div>
 +
<div id="guide2">
 +
<a href="https://2013.igem.org/Team:NJU_NJUT_China/project" target="team"><img src="https://static.igem.org/mediawiki/igem.org/3/32/NJU_NJUT_CHINA_Project.jpg" border="0"  > </a></div>
 +
<div id="guide3">
 +
<a href="../project/project.html" target="team" ><img src="https://static.igem.org/mediawiki/igem.org/5/59/NJU_NJUT_CHINA_Model.jpg"/> </a>
 +
</div>
 +
<div id="guide4">
 +
<a href=""><img src="https://static.igem.org/mediawiki/igem.org/8/80/NJU_NJUT_CHINA_Data.jpg"/></a>
 +
</div>
 +
<div id="guide5">
 +
<a href=""><img src="https://static.igem.org/mediawiki/igem.org/1/16/NJU_NJUT_CHINA_Safety.jpg"/></a>
 +
</div>
 +
<div id="guide6">
 +
<a href=""><img src="https://static.igem.org/mediawiki/igem.org/4/44/NJU_NJUT_CHINA_Hump.jpg"/></a>
 +
</div>
 +
  <div id="mycontent">
 +
<div id="content">
 +
<div class="post">
 +
  <h2 class="title"><a href="#" >Poject Introduction</a></h2>
 +
<p class="meta"> basic information</p>
 +
  <div class="entry">
 +
  <p> &nbsp;&nbsp;&nbsp;&nbsp;All cellular systems evolve ways to combat predators and genomic parasites. In bacteria and archaea, numerous resistance mechanisms have been developed against phage. Clustered regularly interspaced short palindromic repeats (CRISPR)/CRISPR-associated (Cas) adaptive immune systems are found in bacteria and archaea to protect the hosts against the invasion of viruses and plasmids. Most of the bacteria and archaea acquire virus resistance by integrating short viral nucleotide acid fragments into the CRISPR sequences. It is believed that the integrated CRISPR sequences have the ability to form a genetic memory which prevents the host from being infected. The CRISPRs and Cas (CRISPR-associated) interact and form this prokaryotic adaptive immune system. A CRISPR array consists of the palindromic repeating sequences of typically 30bp that are interspaced by similar-sized acquired spacer sequences. The CRISPR loci are generally flanked by an AT-rich leader sequence which contains promoter and the binding sites for regulatory proteins. Highly-variable CRISPR loci provide insights into the phage and host population dynamics, and new avenues for enhanced phage resistance and genetic typing and tagging of industrial strains.</p>
 +
<center><a href="https://static.igem.org/mediawiki/igem.org/e/e9/NJU_NJUT_CHINA_Pro1.jpg" title=""><img src="https://static.igem.org/mediawiki/igem.org/8/84/NJU_NJUT_CHINA_Pro1min.jpg" width="200" height="85" border="0" alt="" id="img-mwsf-2" class="photo" /></a></center>
 +
<p>&nbsp;&nbsp;&nbsp;&nbsp;The CRISPR/Cas immune system encompasses a multistep process by which DNA-encoded spacers lead to sequence-specific interference of invasive nucleic acids, mediated by a ribonucleoproteic complex. There are two main processes characteristic of CRISPR-based immunity, namely spacer acquisition (immunization) and crRNA-mediated interference (immunity). Thus far, most of the molecular basis for the CRISPR/Cas mechanism of action has focused on the interference step, with notable focus on the biochemical details of crRNA biogenesis and target nucleic acid interaction.</p>
 +
<p>&nbsp;&nbsp;&nbsp;&nbsp;There are three highly diverse CRISPR/Cas types exist, and major structural and functional differences are displayed in their mode of generating resistance against the invading DNA and/or RNA elements. The CRISPR-associated protein Cas9 that belongs to the type II CRISPR/Cas system has attracted much attention due to its potential use in genomic engineering. The cas9 signature gene encodes a large multifunctional protein with the ability to generate crRNA and targets phage and plasmid DNA for degradation. Cas9 contains a RuvC-like nuclease domain and a McrA-like HNH nuclease domain. The functional S. thermophilus CRISPR model is a Type II system that has been shown to provide defense against bacteriophage and plasmid DNA. </p>
 +
<center><a href="https://static.igem.org/mediawiki/igem.org/3/32/NJU_NJUT_CHINA_Pro4.jpg" title=""><img src="https://static.igem.org/mediawiki/igem.org/3/33/NJU_NJUT_CHINA_Pro4min.jpg" width="200" height="125" border="0" alt="" id="img-mwsf-2" class="photo" /></a></center>
 +
<p>　&nbsp;&nbsp;&nbsp;&nbsp;In the spacer acquisition process, small fragments of invasive nucleic acid are incorporated into the host genome between CRISPR repeats at the leader end of the locus. The polarized integration of novel repeat-spacer units at the leader end provides a chronological time line of spacer acquisition events. The sequence on the viral genome that corresponds to a spacer is termed proto-spacer. In most cases, a very short stretch of nucleotides is conserved in the immediate vicinity of the proto-spacer, the CRISPR motif, or the proto-spacer-associated motif (PAM). The ability to acquire novel spacers in vivo has been experimentally documented in S. thermophilus and Streptococcus mutans, in which trans-encoded small CRISPR RNA (tracrRNA) is involved in the processing of pre-CRISPR RNA (pre-crRNA) into crRNA. Subsequent recruitment of a housekeeping RNase III catalyzes, together with Cas9, cleavage of the pre-crRNA in the repeat; this yields 66-nt crRNA molecules that are further trimmed at the 5’end to produce 39–42-nt mature crRNA containing a 20-nt spacer sequence. During Type II CRISPR interference, target DNA is cleaved in the proto-spacer sequence by the CRISPR/Cas complex.  </p>
 +
<center><a href="https://static.igem.org/mediawiki/igem.org/9/9b/NJU_NJUT_CHINA_Pro2.jpg" title=""><img src="https://static.igem.org/mediawiki/igem.org/8/89/NJU_NJUT_CHINA_Pro2min.jpg" width="200" height="220" border="0" alt="" id="img-mwsf-2" class="photo" /></a></center>
 +
<p>&nbsp;&nbsp;&nbsp;&nbsp;All organisms need to continuously adapt to changes in their environment. Horizontal gene transfer (HGT), a dominant evolutionary process, at least, in prokaryotes, appears to be a form of Lamarckian inheritance. Obviously, the CRISPR system is a much more impressive example. Now, genome-editing by Cas9 is so efficient that it creates a popular method to knock out one gene from the host genome. However, people met lots of problems during attempts to specifically-targeting and cleavage-facilitating. As the best result of natural selection, we are sure that the CRISPR/Cas systems have their specification and high-efficiency when choosing the spacer. Based on the CRISPR library of S. thermophiles, E. Coli, Lactobacillus and Salmonella, we design one model to simulate the selection of spacer with the help of PAM (proto-spacer associated motifs), and then develop a theory to guide the choosing target-sites. </p>
 +
<center><a href="https://static.igem.org/mediawiki/igem.org/1/1f/NJU_NJUT_CHINA_Pro3.jpg" title=" "><img src="https://static.igem.org/mediawiki/igem.org/0/04/NJU_NJUT_CHINAPro3min.jpg" width="200" height="147" border="0" alt="" id="img-mwsf-2" class="photo" /></a></center>
 +
<p>&nbsp;&nbsp;&nbsp;&nbsp;As the imaginary result of our model, we choose the CRISPR sequence from E.coli K12, which is the most usual bacteria with the CRISPR/Cas system, to be our genetic memory loaded into the vector plasmid1 has been well designed. This plasmid is taken to generate the guiding-RNA (crRNA & tracrRNA) and interact with the Cas9 protein produced by the Cas9 plasmid2. We also design a set of target plasmids3 which have the linear structure of eGFP-target sequence. The target sequence is one existing spacer in the CRISPR of E.coli K12, which can pair with crRNA produced by the plasmid1. This linear structure will be destroyed, theoretically, when the Cas9/gRNA complex recognize the target-site, which is a 30nt sequence, and then cleavage the GFP gene, which is adjacent to the 30-nt target site.  </p>
 +
<p>　&nbsp;&nbsp;&nbsp;&nbsp;In some sense, our experiments is significant. Firstly, our model give us an efficient and novel method to design the DNA sequence which can be transcribed into the crRNA, which works with the core protein Cas9 to recognize the target site. With the help of our model, we can import this system into the superbugs, which can produce the well-selected guiding-RNA specifically paired with the resistance genes. Meanwhile, it is believed that the chance that this kind of crRNAs pair with other sites is very low. Subsequently, Cas9 interacts with gRNA and then forms the protein-nucleic acid complex. This complex can theoretically destroy any chosen resistance genes, and its carrier, or rather the common plasmids, can exist in the bacteria steady and continuously. Secondly, we can use this system into several fields, such as fermentation, antiviral field, improving the plants and any other bioindustrial works. At the same time, the mechanism of heredity and genome evolution embodied in the CRISPR-Cas system seems to be bona fide Lamarckian we can also learn the co-evolution of bacteria and virus from these systems.</p>
 +
    <hr />
 +
  </div>
 +
</div>
 +
<div class="post">
 +
  <h2 class="title">Project ...</h2>
 +
  <p>This is <strong>IGEM_TEST </strong>参考文献</p>
 +
  <div style="clear: both;"></div>
 +
                <br />
 +
    </div>
 +
  </div>
 +
</div>
 +
  </div>
 +
</div>
 +
</div>
 +
<script type="text/javascript">
 +
var includeCaption = true; // Turn on the "caption" feature, and write out the caption HTML
 +
var zoomTime      = 5;    // Milliseconds between frames of zoom animation
 +
var zoomSteps      = 15;  // Number of zoom animation frames
 +
var includeFade    = 1;    // Set to 1 to fade the image in / out as it zooms
 +
var minBorder      = 90;  // Amount of padding between large, scaled down images, and the window edges
 +
var shadowSettings = '0px 5px 25px rgba(0, 0, 0, '; // Blur, radius, color of shadow for compatible browsers
-
h1, h2, h3 {
+
var zoomImagesURI  = 'images-global/zoom/'; // Location of the zoom and shadow images
-
margin: 0;
+
-
padding: 0;
+
-
font-family: Georgia, "Times New Roman", Times, serif;
+
-
font-weight: normal;
+
-
color: #181818;
+
-
}
+
-
h1 {
+
// Init. Do not add anything below this line, unless it's something awesome.
-
font-size: 2em;
+
-
}
+
-
h2 {
+
var myWidth = 0, myHeight = 0, myScroll = 0; myScrollWidth = 0; myScrollHeight = 0;
-
font-size: 1.8em;
+
var zoomOpen = false, preloadFrame = 1, preloadActive = false, preloadTime = 0, imgPreload = new Image();
-
font-family:Verdana, Geneva, sans-serif;
+
var preloadAnimTimer = 0;
 +
 
 +
var zoomActive = new Array(); var zoomTimer  = new Array();
 +
var zoomOrigW  = new Array(); var zoomOrigH  = new Array();
 +
var zoomOrigX  = new Array(); var zoomOrigY  = new Array();
 +
 
 +
var zoomID        = "ZoomBox";
 +
var theID          = "ZoomImage";
 +
var zoomCaption    = "ZoomCaption";
 +
var zoomCaptionDiv = "ZoomCapDiv";
 +
 
 +
if (navigator.userAgent.indexOf("MSIE") != -1) {
 +
var browserIsIE = true;
}
}
-
h3 {
+
// Zoom: Setup The Page! Called in your <body>'s onLoad handler.
-
font-size: 1.6em;
+
 
 +
function setupZoom() {
 +
prepZooms();
 +
insertZoomHTML();
 +
zoomdiv = document.getElementById(zoomID); 
 +
zoomimg = document.getElementById(theID);
}
}
-
p, ul, ol {
+
// Zoom: Inject Javascript functions into hrefs pointing to images, one by one!
-
margin-top: 0;
+
// Skip any href that contains a rel="nozoom" tag.
-
line-height: 180%;
+
// This is done at page load time via an onLoad() handler.
 +
 
 +
function prepZooms() {
 +
if (! document.getElementsByTagName) {
 +
return;
 +
}
 +
var links = document.getElementsByTagName("a");
 +
for (i = 0; i < links.length; i++) {
 +
if (links[i].getAttribute("href")) {
 +
if (links[i].getAttribute("href").search(/(.*)\.(jpg|jpeg|gif|png|bmp|tif|tiff)/gi) != -1) {
 +
if (links[i].getAttribute("rel") != "nozoom") {
 +
links[i].onclick = function (event) { return zoomClick(this, event); };
 +
links[i].onmouseover = function () { zoomPreload(this); };
 +
}
 +
}
 +
}
 +
}
}
}
-
ul, ol {
+
// Zoom: Load an image into an image object. When done loading, function sets preloadActive to false,
 +
// so other bits know that they can proceed with the zoom.
 +
// Preloaded image is stored in imgPreload and swapped out in the zoom function.
 +
 
 +
function zoomPreload(from) {
 +
 
 +
var theimage = from.getAttribute("href");
 +
 
 +
// Only preload if we have to, i.e. the image isn't this image already
 +
 
 +
if (imgPreload.src.indexOf(from.getAttribute("href").substr(from.getAttribute("href").lastIndexOf("/"))) == -1) {
 +
preloadActive = true;
 +
imgPreload = new Image();
 +
 
 +
// Set a function to fire when the preload is complete, setting flags along the way.
 +
 
 +
imgPreload.onload = function() {
 +
preloadActive = false;
 +
}
 +
 
 +
// Load it!
 +
imgPreload.src = theimage;
 +
}
}
}
-
a {
+
// Zoom: Start the preloading animation cycle.
-
text-decoration: none;
+
 
-
color: #B94E0E;
+
function preloadAnimStart() {
 +
preloadTime = new Date();
 +
document.getElementById("ZoomSpin").style.left = (myWidth / 2) + 'px';
 +
document.getElementById("ZoomSpin").style.top = ((myHeight / 2) + myScroll) + 'px';
 +
document.getElementById("ZoomSpin").style.visibility = "visible";
 +
preloadFrame = 1;
 +
document.getElementById("SpinImage").src = zoomImagesURI+'zoom-spin-'+preloadFrame+'.png';
 +
preloadAnimTimer = setInterval("preloadAnim()", 100);
}
}
-
a:hover {
+
// Zoom: Display and ANIMATE the jibber-jabber widget. Once preloadActive is false, bail and zoom it up!
 +
 
 +
function preloadAnim(from) {
 +
if (preloadActive != false) {
 +
document.getElementById("SpinImage").src = zoomImagesURI+'zoom-spin-'+preloadFrame+'.png';
 +
preloadFrame++;
 +
if (preloadFrame > 12) preloadFrame = 1;
 +
} else {
 +
document.getElementById("ZoomSpin").style.visibility = "hidden";   
 +
clearInterval(preloadAnimTimer);
 +
preloadAnimTimer = 0;
 +
zoomIn(preloadFrom);
 +
}
}
}
-
#wrapper {
+
// ZOOM CLICK: We got a click! Should we do the zoom? Or wait for the preload to complete?
-
margin: 0 auto;
+
// todo?: Double check that imgPreload src = clicked src
-
padding: 0;
+
 
-
background:url(http://igem.3vfree.us/images/img05.jpg) repeat-x top left;
+
function zoomClick(from, evt) {
 +
 
 +
var shift = getShift(evt);
 +
 
 +
// Check for Command / Alt key. If pressed, pass them through -- don't zoom!
 +
if (! evt && window.event && (window.event.metaKey || window.event.altKey)) {
 +
return true;
 +
} else if (evt && (evt.metaKey|| evt.altKey)) {
 +
return true;
}
}
-
/* Header */
+
// Get browser dimensions
 +
getSize();
-
#header-wrapper {
+
// If preloading still, wait, and display the spinner.
-
z-index:10;
+
if (preloadActive == true) {
 +
// But only display the spinner if it's not already being displayed!
 +
if (preloadAnimTimer == 0) {
 +
preloadFrom = from;
 +
preloadAnimStart();
 +
}
 +
} else {
 +
// Otherwise, we're loaded: do the zoom!
 +
zoomIn(from, shift);
 +
}
 +
 +
return false;
 +
}
}
 +
// Zoom: Move an element in to endH endW, using zoomHost as a starting point.
 +
// "from" is an object reference to the href that spawned the zoom.
-
#header {
+
function zoomIn(from, shift) {
-
position: absolute;
+
-
left:197px;
+
-
list-style: none;
+
-
z-index:10;
+
-
width: 960px;
+
-
height: 240px;
+
-
margin: 0 auto;
+
-
background: url(http://igem.3vfree.us/images/logo2.jpg) no-repeat left top;
+
-
top: 1px;
+
-
}
+
-
/* Logo */
+
zoomimg.src = from.getAttribute("href");
-
#logo {
+
// Determine the zoom settings from where we came from, the element in the <a>.
-
float: left;
+
// If there's no element in the <a>, or we can't get the width, make stuff up
-
height: 240px;
+
-
margin: 0;
+
-
padding: 0px;
+
-
color: #FFFFFF;
+
-
}
+
-
#logo h1, #logo p {
+
if (from.childNodes[0].width) {
-
margin: 0;
+
startW = from.childNodes[0].width;
-
padding: 0;
+
startH = from.childNodes[0].height;
-
}
+
startPos = findElementPos(from.childNodes[0]);
 +
} else {
 +
startW = 50;
 +
startH = 12;
 +
startPos = findElementPos(from);
 +
}
-
#logo h1 {
+
hostX = startPos[0];
-
float: left;
+
hostY = startPos[1];
-
padding-left: 25px;
+
-
letter-spacing: -1px;
+
-
font-size: 2.6em;
+
-
}
+
-
#logo p {
+
// Make up for a scrolled containing div.
-
float: left;
+
// TODO: This HAS to move into findElementPos.
-
margin: 0;
+
-
padding: 12px 0 0 10px;
+
if (document.getElementById('scroller')) {
-
font: normal 14px Georgia, "Times New Roman", Times, serif;
+
hostX = hostX - document.getElementById('scroller').scrollLeft;
-
font-style: italic;
+
}
-
}  
+
-
#logo a {
+
// Determine the target zoom settings from the preloaded image object
-
    position: relative;
+
-
    left: 350px;
+
-
border: none;
+
-
background: none;
+
-
text-decoration: none;
+
-
color: #000000;
+
-
}
+
-
#page {
+
-
    position: absolute;
+
-
top:705px;
+
-
left:194px;
+
-
width: 960px;
+
-
margin: 0 auto;
+
-
padding: 0;
+
-
background: url(http://igem.3vfree.us/images/img04.jpg) repeat-y left top;
+
-
}
+
-
#page-bgtop {
+
endW = imgPreload.width;
-
}
+
endH = imgPreload.height;
-
#page-bgbtm {
+
// Start! But only if we're not zooming already!
-
padding: 30px 20px 0px 20px;
+
-
}
+
-
/* Content */
+
if (zoomActive[theID] != true) {
-
#content {
+
// Clear everything out just in case something is already open
-
float: left;
+
-
width: 600px;
+
-
padding: 0;
+
-
}
+
-
.post {
+
if (document.getElementById("ShadowBox")) {
-
}
+
document.getElementById("ShadowBox").style.visibility = "hidden";
 +
} else if (! browserIsIE) {
 +
 +
// Wipe timer if shadow is fading in still
 +
if (fadeActive["ZoomImage"]) {
 +
clearInterval(fadeTimer["ZoomImage"]);
 +
fadeActive["ZoomImage"] = false;
 +
fadeTimer["ZoomImage"] = false;
 +
}
 +
 +
document.getElementById("ZoomImage").style.webkitBoxShadow = shadowSettings + '0.0)';
 +
}
 +
 +
document.getElementById("ZoomClose").style.visibility = "hidden";   
-
.post .title {
+
// Setup the CAPTION, if existing. Hide it first, set the text.
-
height: 38px;
+
-
padding: 12px 0 0 20px;
+
-
letter-spacing: -.5px;
+
-
color: #181818;
+
if (includeCaption) {
-
}
+
document.getElementById(zoomCaptionDiv).style.visibility = "hidden";
 +
if (from.getAttribute('title') && includeCaption) {
 +
// Yes, there's a caption, set it up
 +
document.getElementById(zoomCaption).innerHTML = from.getAttribute('title');
 +
} else {
 +
document.getElementById(zoomCaption).innerHTML = "";
 +
}
 +
}
-
.post .title a {
+
// Store original position in an array for future zoomOut.
-
color: #181818;
+
-
font-family:Verdana, Geneva, sans-serif;
+
-
border: none;
+
-
}
+
-
.post .meta {
+
zoomOrigW[theID] = startW;
-
margin-top: -10px;
+
zoomOrigH[theID] = startH;
-
padding-bottom: 5px;
+
zoomOrigX[theID] = hostX;
-
padding-left: 20px;
+
zoomOrigY[theID] = hostY;
-
text-align: left;
+
-
}
+
-
.post .meta a {
+
// Now set the starting dimensions
-
}
+
-
.post .entry {
+
zoomimg.style.width = startW + 'px';
-
text-align: justify;
+
zoomimg.style.height = startH + 'px';
-
margin-bottom: 25px;
+
zoomdiv.style.left = hostX + 'px';
-
padding: 30px 20px 10px 20px;
+
zoomdiv.style.top = hostY + 'px';
-
}
+
-
.links {
+
// Show the zooming image container, make it invisible
-
display: block;
+
 
-
width: 130px;
+
if (includeFade == 1) {
-
margin: 20px 0px;
+
setOpacity(0, zoomID);
-
padding: 5px;
+
}
-
background:#669;
+
zoomdiv.style.visibility = "visible";
-
border-left: 20px solid #666;
+
 
-
text-align: center;
+
// If it's too big to fit in the window, shrink the width and height to fit (with ratio).
-
text-transform: uppercase;
+
 
-
font-size: 10px;
+
sizeRatio = endW / endH;
-
color: #FFFFFF;
+
if (endW > myWidth - minBorder) {
 +
endW = myWidth - minBorder;
 +
endH = endW / sizeRatio;
 +
}
 +
if (endH > myHeight - minBorder) {
 +
endH = myHeight - minBorder;
 +
endW = endH * sizeRatio;
 +
}
 +
 
 +
zoomChangeX = ((myWidth / 2) - (endW / 2) - hostX);
 +
zoomChangeY = (((myHeight / 2) - (endH / 2) - hostY) + myScroll);
 +
zoomChangeW = (endW - startW);
 +
zoomChangeH = (endH - startH);
 +
 +
// Shift key?
 +
 +
if (shift) {
 +
tempSteps = zoomSteps * 7;
 +
} else {
 +
tempSteps = zoomSteps;
 +
}
 +
 
 +
// Setup Zoom
 +
 
 +
zoomCurrent = 0;
 +
 
 +
// Setup Fade with Zoom, If Requested
 +
 
 +
if (includeFade == 1) {
 +
fadeCurrent = 0;
 +
fadeAmount = (0 - 100) / tempSteps;
 +
} else {
 +
fadeAmount = 0;
 +
}
 +
 
 +
// Do It!
 +
 +
zoomTimer[theID] = setInterval("zoomElement('"+zoomID+"', '"+theID+"', "+zoomCurrent+", "+startW+", "+zoomChangeW+", "+startH+", "+zoomChangeH+", "+hostX+", "+zoomChangeX+", "+hostY+", "+zoomChangeY+", "+tempSteps+", "+includeFade+", "+fadeAmount+", 'zoomDoneIn(zoomID)')", zoomTime);
 +
zoomActive[theID] = true;  
 +
}
}
}
-
/* Sidebar */
+
// Zoom it back out.
-
#sidebar {
+
function zoomOut(from, evt) {
-
position:absolute;
+
 
-
left:678px;
+
// Get shift key status.
-
top:24px;
+
// IE events don't seem to get passed through the function, so grab it from the window.
-
float: right;
+
 
-
width: 272px;
+
if (getShift(evt)) {
-
padding: 10px 0px 0px 0px;
+
tempSteps = zoomSteps * 7;
-
color: #787878;
+
} else {
-
height: 665px;
+
tempSteps = zoomSteps;
 +
}
 +
 
 +
// Check to see if something is happening/open
 +
 
 +
if (zoomActive[theID] != true) {
 +
 
 +
// First, get rid of the shadow if necessary.
 +
 
 +
if (document.getElementById("ShadowBox")) {
 +
document.getElementById("ShadowBox").style.visibility = "hidden";
 +
} else if (! browserIsIE) {
 +
 +
// Wipe timer if shadow is fading in still
 +
if (fadeActive["ZoomImage"]) {
 +
clearInterval(fadeTimer["ZoomImage"]);
 +
fadeActive["ZoomImage"] = false;
 +
fadeTimer["ZoomImage"] = false;
 +
}
 +
 +
document.getElementById("ZoomImage").style.webkitBoxShadow = shadowSettings + '0.0)';
 +
}
 +
 
 +
// ..and the close box...
 +
 
 +
document.getElementById("ZoomClose").style.visibility = "hidden";
 +
 
 +
// ...and the caption if necessary!
 +
 
 +
if (includeCaption && document.getElementById(zoomCaption).innerHTML != "") {
 +
// fadeElementSetup(zoomCaptionDiv, 100, 0, 5, 1);
 +
document.getElementById(zoomCaptionDiv).style.visibility = "hidden";
 +
}
 +
 
 +
// Now, figure out where we came from, to get back there
 +
 
 +
startX = parseInt(zoomdiv.style.left);
 +
startY = parseInt(zoomdiv.style.top);
 +
startW = zoomimg.width;
 +
startH = zoomimg.height;
 +
zoomChangeX = zoomOrigX[theID] - startX;
 +
zoomChangeY = zoomOrigY[theID] - startY;
 +
zoomChangeW = zoomOrigW[theID] - startW;
 +
zoomChangeH = zoomOrigH[theID] - startH;
 +
 
 +
// Setup Zoom
 +
 
 +
zoomCurrent = 0;
 +
 
 +
// Setup Fade with Zoom, If Requested
 +
 
 +
if (includeFade == 1) {
 +
fadeCurrent = 0;
 +
fadeAmount = (100 - 0) / tempSteps;
 +
} else {
 +
fadeAmount = 0;
 +
}
 +
 
 +
// Do It!
 +
 
 +
zoomTimer[theID] = setInterval("zoomElement('"+zoomID+"', '"+theID+"', "+zoomCurrent+", "+startW+", "+zoomChangeW+", "+startH+", "+zoomChangeH+", "+startX+", "+zoomChangeX+", "+startY+", "+zoomChangeY+", "+tempSteps+", "+includeFade+", "+fadeAmount+", 'zoomDone(zoomID, theID)')", zoomTime);
 +
zoomActive[theID] = true;
 +
}
}
}
-
#sidebar ul {
+
// Finished Zooming In
-
margin: 0;
+
 
-
padding: 0;
+
function zoomDoneIn(zoomdiv, theID) {
-
list-style: none;
+
 
 +
// Note that it's open
 +
 
 +
zoomOpen = true;
 +
zoomdiv = document.getElementById(zoomdiv);
 +
 
 +
// Position the table shadow behind the zoomed in image, and display it
 +
 
 +
if (document.getElementById("ShadowBox")) {
 +
 
 +
setOpacity(0, "ShadowBox");
 +
shadowdiv = document.getElementById("ShadowBox");
 +
 
 +
shadowLeft = parseInt(zoomdiv.style.left) - 13;
 +
shadowTop = parseInt(zoomdiv.style.top) - 8;
 +
shadowWidth = zoomdiv.offsetWidth + 26;
 +
shadowHeight = zoomdiv.offsetHeight + 26;  
 +
 +
shadowdiv.style.width = shadowWidth + 'px';
 +
shadowdiv.style.height = shadowHeight + 'px';
 +
shadowdiv.style.left = shadowLeft + 'px';
 +
shadowdiv.style.top = shadowTop + 'px';
 +
 
 +
document.getElementById("ShadowBox").style.visibility = "visible";
 +
fadeElementSetup("ShadowBox", 0, 100, 5);
 +
 +
} else if (! browserIsIE) {
 +
// Or, do a fade of the modern shadow
 +
fadeElementSetup("ZoomImage", 0, .8, 5, 0, "shadow");
 +
}
 +
 +
// Position and display the CAPTION, if existing
 +
 
 +
if (includeCaption && document.getElementById(zoomCaption).innerHTML != "") {
 +
// setOpacity(0, zoomCaptionDiv);
 +
zoomcapd = document.getElementById(zoomCaptionDiv);
 +
zoomcapd.style.top = parseInt(zoomdiv.style.top) + (zoomdiv.offsetHeight + 15) + 'px';
 +
zoomcapd.style.left = (myWidth / 2) - (zoomcapd.offsetWidth / 2) + 'px';
 +
zoomcapd.style.visibility = "visible";
 +
// fadeElementSetup(zoomCaptionDiv, 0, 100, 5);
 +
} 
 +
 +
// Display Close Box (fade it if it's not IE)
 +
 
 +
if (!browserIsIE) setOpacity(0, "ZoomClose");
 +
document.getElementById("ZoomClose").style.visibility = "visible";
 +
if (!browserIsIE) fadeElementSetup("ZoomClose", 0, 100, 5);
 +
 
 +
// Get keypresses
 +
document.onkeypress = getKey;
 +
}
}
-
#sidebar li {
+
// Finished Zooming Out
-
margin: 0;
+
 
-
padding: 0;
+
function zoomDone(zoomdiv, theID) {
 +
 
 +
// No longer open
 +
 
 +
zoomOpen = false;
 +
 
 +
// Clear stuff out, clean up
 +
 
 +
zoomOrigH[theID] = "";
 +
zoomOrigW[theID] = "";
 +
document.getElementById(zoomdiv).style.visibility = "hidden";
 +
zoomActive[theID] == false;
 +
 
 +
// Stop getting keypresses
 +
 
 +
document.onkeypress = null;
 +
 
}
}
-
#sidebar li ul {
+
// Actually zoom the element
-
margin: 0px 15px;
+
 
-
padding-bottom: 30px;
+
function zoomElement(zoomdiv, theID, zoomCurrent, zoomStartW, zoomChangeW, zoomStartH, zoomChangeH, zoomStartX, zoomChangeX, zoomStartY, zoomChangeY, zoomSteps, includeFade, fadeAmount, execWhenDone) {
 +
 
 +
// console.log("Zooming Step #"+zoomCurrent+ " of "+zoomSteps+" (zoom " + zoomStartW + "/" + zoomChangeW + ") (zoom " + zoomStartH + "/" + zoomChangeH + ")  (zoom " + zoomStartX + "/" + zoomChangeX + ")  (zoom " + zoomStartY + "/" + zoomChangeY + ") Fade: "+fadeAmount);
 +
   
 +
// Test if we're done, or if we continue
 +
 
 +
if (zoomCurrent == (zoomSteps + 1)) {
 +
zoomActive[theID] = false;
 +
clearInterval(zoomTimer[theID]);
 +
 
 +
if (execWhenDone != "") {
 +
eval(execWhenDone);
 +
}
 +
} else {
 +
 +
// Do the Fade!
 +
 
 +
if (includeFade == 1) {
 +
if (fadeAmount < 0) {
 +
setOpacity(Math.abs(zoomCurrent * fadeAmount), zoomdiv);
 +
} else {
 +
setOpacity(100 - (zoomCurrent * fadeAmount), zoomdiv);
 +
}
 +
}
 +
 
 +
// Calculate this step's difference, and move it!
 +
 +
moveW = cubicInOut(zoomCurrent, zoomStartW, zoomChangeW, zoomSteps);
 +
moveH = cubicInOut(zoomCurrent, zoomStartH, zoomChangeH, zoomSteps);
 +
moveX = cubicInOut(zoomCurrent, zoomStartX, zoomChangeX, zoomSteps);
 +
moveY = cubicInOut(zoomCurrent, zoomStartY, zoomChangeY, zoomSteps);
 +
 +
document.getElementById(zoomdiv).style.left = moveX + 'px';
 +
document.getElementById(zoomdiv).style.top = moveY + 'px';
 +
zoomimg.style.width = moveW + 'px';
 +
zoomimg.style.height = moveH + 'px';
 +
 +
zoomCurrent++;
 +
 +
clearInterval(zoomTimer[theID]);
 +
zoomTimer[theID] = setInterval("zoomElement('"+zoomdiv+"', '"+theID+"', "+zoomCurrent+", "+zoomStartW+", "+zoomChangeW+", "+zoomStartH+", "+zoomChangeH+", "+zoomStartX+", "+zoomChangeX+", "+zoomStartY+", "+zoomChangeY+", "+zoomSteps+", "+includeFade+", "+fadeAmount+", '"+execWhenDone+"')", zoomTime);
 +
}
}
}
-
#sidebar li li {
+
// Zoom Utility: Get Key Press when image is open, and act accordingly
-
line-height: 35px;
+
 
-
border-bottom: 1px dashed #D1D1D1;
+
function getKey(evt) {
-
padding-left: 15px;
+
if (! evt) {
 +
theKey = event.keyCode;
 +
} else {
 +
theKey = evt.keyCode;
 +
}
 +
 
 +
if (theKey == 27) { // ESC
 +
zoomOut(this, evt);
 +
}
}
}
-
#sidebar li li span {
+
////////////////////////////
-
display: block;
+
//
-
margin-top: -20px;
+
// FADE Functions
-
padding: 0;
+
//
-
font-size: 11px;
+
 
-
font-style: italic;
+
function fadeOut(elem) {
 +
if (elem.id) {
 +
fadeElementSetup(elem.id, 100, 0, 10);
 +
}
}
}
-
#sidebar h2 {
+
function fadeIn(elem) {
-
height: 38px;
+
if (elem.id) {
-
padding: 12px 0 0 15px;
+
fadeElementSetup(elem.id, 0, 100, 10);
-
letter-spacing: -.5px;
+
}
-
color: #181818;
+
}
}
-
#sidebar p {
+
// Fade: Initialize the fade function
-
margin: 0 0px;
+
 
-
padding: 0px 20px 20px 20px;
+
var fadeActive = new Array();
-
text-align: justify;
+
var fadeQueue  = new Array();
 +
var fadeTimer  = new Array();
 +
var fadeClose  = new Array();
 +
var fadeMode  = new Array();
 +
 
 +
function fadeElementSetup(theID, fdStart, fdEnd, fdSteps, fdClose, fdMode) {
 +
 
 +
// alert("Fading: "+theID+" Steps: "+fdSteps+" Mode: "+fdMode);
 +
 
 +
if (fadeActive[theID] == true) {
 +
// Already animating, queue up this command
 +
fadeQueue[theID] = new Array(theID, fdStart, fdEnd, fdSteps);
 +
} else {
 +
fadeSteps = fdSteps;
 +
fadeCurrent = 0;
 +
fadeAmount = (fdStart - fdEnd) / fadeSteps;
 +
fadeTimer[theID] = setInterval("fadeElement('"+theID+"', '"+fadeCurrent+"', '"+fadeAmount+"', '"+fadeSteps+"')", 15);
 +
fadeActive[theID] = true;
 +
fadeMode[theID] = fdMode;
 +
 +
if (fdClose == 1) {
 +
fadeClose[theID] = true;
 +
} else {
 +
fadeClose[theID] = false;
 +
}
 +
}
}
}
-
#sidebar a {
+
// Fade: Do the fade. This function will call itself, modifying the parameters, so
-
border: none;
+
// many instances can run concurrently. Can fade using opacity, or fade using a box-shadow.
-
color: #B94E0E;
+
 
 +
function fadeElement(theID, fadeCurrent, fadeAmount, fadeSteps) {
 +
 
 +
if (fadeCurrent == fadeSteps) {
 +
 
 +
// We're done, so clear.
 +
 
 +
clearInterval(fadeTimer[theID]);
 +
fadeActive[theID] = false;
 +
fadeTimer[theID] = false;
 +
 
 +
// Should we close it once the fade is complete?
 +
 
 +
if (fadeClose[theID] == true) {
 +
document.getElementById(theID).style.visibility = "hidden";
 +
}
 +
 
 +
// Hang on.. did a command queue while we were working? If so, make it happen now
 +
 
 +
if (fadeQueue[theID] && fadeQueue[theID] != false) {
 +
fadeElementSetup(fadeQueue[theID][0], fadeQueue[theID][1], fadeQueue[theID][2], fadeQueue[theID][3]);
 +
fadeQueue[theID] = false;
 +
}
 +
} else {
 +
 
 +
fadeCurrent++;
 +
 +
// Now actually do the fade adjustment.
 +
 +
if (fadeMode[theID] == "shadow") {
 +
 
 +
// Do a special fade on the webkit-box-shadow of the object
 +
 +
if (fadeAmount < 0) {
 +
document.getElementById(theID).style.webkitBoxShadow = shadowSettings + (Math.abs(fadeCurrent * fadeAmount)) + ')';
 +
} else {
 +
document.getElementById(theID).style.webkitBoxShadow = shadowSettings + (100 - (fadeCurrent * fadeAmount)) + ')';
 +
}
 +
 +
} else {
 +
 +
// Set the opacity depending on if we're adding or subtracting (pos or neg)
 +
 +
if (fadeAmount < 0) {
 +
setOpacity(Math.abs(fadeCurrent * fadeAmount), theID);
 +
} else {
 +
setOpacity(100 - (fadeCurrent * fadeAmount), theID);
 +
}
 +
}
 +
 
 +
// Keep going, and send myself the updated variables
 +
clearInterval(fadeTimer[theID]);
 +
fadeTimer[theID] = setInterval("fadeElement('"+theID+"', '"+fadeCurrent+"', '"+fadeAmount+"', '"+fadeSteps+"')", 15);
 +
}
}
}
-
#sidebar a:hover {
+
////////////////////////////
-
text-decoration: underline;
+
//
 +
// UTILITY functions
 +
//
 +
 
 +
// Utility: Set the opacity, compatible with a number of browsers. Value from 0 to 100.
 +
 
 +
function setOpacity(opacity, theID) {
 +
 
 +
var object = document.getElementById(theID).style;
 +
 
 +
// If it's 100, set it to 99 for Firefox.
 +
 
 +
if (navigator.userAgent.indexOf("Firefox") != -1) {
 +
if (opacity == 100) { opacity = 99.9999; } // This is majorly awkward
 +
}
 +
 
 +
// Multi-browser opacity setting
 +
 
 +
object.filter = "alpha(opacity=" + opacity + ")"; // IE/Win
 +
object.opacity = (opacity / 100);                // Safari 1.2, Firefox+Mozilla
 +
 
}
}
-
/* Calendar */
+
// Utility: Math functions for animation calucations - From http://www.robertpenner.com/easing/
 +
//
 +
// t = time, b = begin, c = change, d = duration
 +
// time = current frame, begin is fixed, change is basically finish - begin, duration is fixed (frames),
-
#calendar {
+
function linear(t, b, c, d)
 +
{
 +
return c*t/d + b;
}
}
-
#calendar_wrap {
+
function sineInOut(t, b, c, d)
-
padding: 20px;
+
{
 +
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
}
-
#calendar table {
+
function cubicIn(t, b, c, d) {
-
width: 100%;
+
return c*(t/=d)*t*t + b;
}
}
-
#calendar tbody td {
+
 
-
text-align: center;
+
function cubicOut(t, b, c, d) {
-
}
+
return c*((t=t/d-1)*t*t + 1) + b;
-
#calendar #next {
+
-
text-align: right;
+
}
}
-
/* Footer */
 
-
#footer-wrapper {
+
function cubicInOut(t, b, c, d)
-
position:absolute;
+
{
-
bottom:-1286px;
+
if ((t/=d/2) < 1) return c/2*t*t*t + b;
-
width: 100%;
+
return c/2*((t-=2)*t*t + 2) + b;
-
background: #231202;
+
-
left: 193px;
+
}
}
-
#myfooter {
+
function bounceOut(t, b, c, d)
-
position:absolute;
+
{
-
width: 960px;
+
if ((t/=d) < (1/2.75)){
-
height: 100px;
+
return c*(7.5625*t*t) + b;
-
margin: 0 auto;
+
} else if (t < (2/2.75)){
-
padding: 0px 0 15px 0;
+
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
-
background: url(http://igem.3vfree.us/images/img01.jpg) repeat-x left top;
+
} else if (t < (2.5/2.75)){
-
font-family: Arial, Helvetica, sans-serif;
+
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
-
left: 0px;
+
} else {
 +
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
 +
}
}
}
-
#myfooter p {
+
 
-
margin: 0;
+
// Utility: Get the size of the window, and set myWidth and myHeight
-
padding-top: 40px;
+
// Credit to quirksmode.org
-
line-height: normal;
+
 
-
font-size: 9px;
+
function getSize() {
-
text-transform: uppercase;
+
 
-
text-align: center;
+
// Window Size
-
color: #D78983;
+
 
 +
if (self.innerHeight) { // Everyone but IE
 +
myWidth = window.innerWidth;
 +
myHeight = window.innerHeight;
 +
myScroll = window.pageYOffset;
 +
} else if (document.documentElement && document.documentElement.clientHeight) { // IE6 Strict
 +
myWidth = document.documentElement.clientWidth;
 +
myHeight = document.documentElement.clientHeight;
 +
myScroll = document.documentElement.scrollTop;
 +
} else if (document.body) { // Other IE, such as IE7
 +
myWidth = document.body.clientWidth;
 +
myHeight = document.body.clientHeight;
 +
myScroll = document.body.scrollTop;
 +
}
 +
 
 +
// Page size w/offscreen areas
 +
 
 +
if (window.innerHeight && window.scrollMaxY) {
 +
myScrollWidth = document.body.scrollWidth;
 +
myScrollHeight = window.innerHeight + window.scrollMaxY;
 +
} else if (document.body.scrollHeight > document.body.offsetHeight) { // All but Explorer Mac
 +
myScrollWidth = document.body.scrollWidth;
 +
myScrollHeight = document.body.scrollHeight;
 +
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
 +
myScrollWidth = document.body.offsetWidth;
 +
myScrollHeight = document.body.offsetHeight;
 +
}
}
}
 +
function getShift(evt) {
 +
var shift = false;
 +
if (! evt && window.event) {
 +
shift = window.event.shiftKey;
 +
} else if (evt) {
 +
shift = evt.shiftKey;
 +
if (shift) evt.stopPropagation(); // Prevents Firefox from doing shifty things
 +
}
 +
return shift;
 +
}
 +
function findElementPos(elemFind)
 +
{
 +
var elemX = 0;
 +
var elemY = 0;
 +
do {
 +
elemX += elemFind.offsetLeft;
 +
elemY += elemFind.offsetTop;
 +
} while ( elemFind = elemFind.offsetParent )
-
#myfooter a {
+
return Array(elemX, elemY);
-
color: #FFDBD9;
+
}
}
-
</style>
+
function insertZoomHTML() {
-
</head>
+
 
-
<body onLoad="setupZoom();">
+
// All of this junk creates the three <div>'s used to hold the closebox, image, and zoom shadow.
-
<div id="wrapper">
+
-
<div id="header">
+
-
      <div id="logo">
+
-
  </div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<!-- end #header -->
+
-
        <ul id="navigation">
+
-
            <li class="home" style="width: 100px;"><a href="https://2013.igem.org/Team:NJU_NJUT_China"><span>Home</span></a></li>
+
-
            <li class="about" style="width: 115px;"><a href="https://2013.igem.org/Team:NJU_NJUT_China/team" style="width:115px;"><span>TEAM</span></a></li>
+
-
            <li class="search" style="width: 135px;"><a href="https://2013.igem.org/Team:NJU_NJUT_China/project" style="width:135px;"<span>PROJECT</span></a></li>
+
-
            <li class="photos" style="width: 150px;"><a href="" style="width:150px;"><span>MODELING</span></a></li>
+
-
            <li class="rssfeed" style="width: 115px;"><a href="" style="width:115px;"><span>DATA</span></a></li>
+
-
            <li class="podcasts" style="width: 125px;"><a href=""style="width:125px;"><span>SFATY</span></a></li>
+
-
            <li class="contact" style="width: 205px;"><a href=""style="width:205px;"><span>HUMANPRACTICE</span></a></li>
+
-
  </ul>
+
-
<div style="clear: both;">&nbsp;</div>
+
var inBody = document.getElementsByTagName("body").item(0);
-
<!-- end #menu -->
+
-
<div id="page" style=" position:absolute;top:270px">
+
// WAIT SPINNER
-
<div id="page-bgtop">
+
-
<div id="page-bgbtm">
+
var inSpinbox = document.createElement("div");
-
  <div id="content">
+
inSpinbox.setAttribute('id', 'ZoomSpin');
-
     
+
inSpinbox.style.position = 'absolute';
-
     
+
inSpinbox.style.left = '10px';
-
<div class="post">
+
inSpinbox.style.top = '10px';
-
  <h2 class="title"><a href="#" >Poject Introduction</a></h2>
+
inSpinbox.style.visibility = 'hidden';
-
<p class="meta"> basic information</p>
+
inSpinbox.style.zIndex = '525';
-
  <div class="entry">
+
inBody.insertBefore(inSpinbox, inBody.firstChild);
-
  <p> &nbsp;&nbsp;&nbsp;&nbsp;Most of the bacteria and archaea acquire virus resistance by integrating short viral nucleotide acid fragments into the clusters of regularly interspaced short palindromic repeats (CRISPRs). And CRISPR-based defense system can also protects them against the invading DNA and/or RNA elements. It is believed that the integrated CRISPR sequences have the ability to form a genetic memory which prevents the host from being infected. The CRISPRs and Cas (CRISPR-associated) interact and form this prokaryotic adaptive immune system.</p>
+
-
<a href="http://igem.3vfree.us/images/pro1.jpg" title="the E.coli CRISPR loci"><img src="http://igem.3vfree.us/images/pro1min.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-2" class="photo" /></a>
+
var inSpinImage = document.createElement("img");
-
<p>;&nbsp;&nbsp;A CRISPR array consists of the palindromic repeating sequences of typically 30bp that are interspaced by similar-sized acquired spacer sequences. The CRISPR loci are generally flanked bu an AT-rich leader sequence which contains promoter and the binding sites for regulatory proteins.</p>
+
inSpinImage.setAttribute('id', 'SpinImage');
-
<p>There three highly diverse CRISPR/Ca types exist, and major structural and functional differences are displayed in their mode of generating resistance against the invading DNA and/or RNA elements.</p>
+
inSpinImage.setAttribute('src', zoomImagesURI+'zoom-spin-1.png');
-
<p>We focus on  the type I-E CRISPR/Cas system from the model bacterium Escberichia coli k12 w3110 whose CRISPR loci has been identified so that we can download the essential sequence from NCBI(http://www.ncbi.nlm.nih.gov/nuccore/85674274?report=graph). </p>
+
inSpinbox.appendChild(inSpinImage);
-
<a href="http://igem.3vfree.us/images/pro2.jpg" title="the maturation of crRNA"><img src="http://igem.3vfree.us/images/pro2min.jpg" width="575" height="123" border="0" alt="" id="img-mwsf-2" class="photo" /></a>
+
-
<p>The mechanism of all CRISPR/Cas systems is divided into three stages: adaption, expression, and interference. At the adaption stage, the host cell acquires the resistance by integration of a new spacer sequence into a CRISPR loci. During the expression stage, cas genes are transcribed and translated. At the same time, CRISPRs are transcribed into pre-crRNAs (precursor CRISPR RNAs), and a Cas6 homolog in</p>
+
-
<a href="http://igem.3vfree.us/images/pro3.jpg" title=" Schematic diagram of the CRISPR/Cas gene cluster of Escberichia coli k12 w3110"><img src="http://igem.3vfree.us/images/pro3min.jpg" width="232" height="123" border="0" alt="" id="img-mwsf-2" class="photo" /></a>
+
-
<p>Type I cleave it subsequently.  </p>
+
-
<p>At the interference stage, the complex formed by the Cas proteins and the mature<a href="http://igem.3vfree.us/images/pro4.jpg" title=" the overall model of the immune system against the virus"><img src="http://igem.3vfree.us/images/pro4min.jpg" width="204" height="145" border="0" alt="" id="img-mwsf-2" class="photo" /></a>crRNA cleave the complementary invading nucleic acids.</p>
+
-
    <hr />
+
-
  </div>
+
-
</div>
+
-
<div class="post">
+
-
  <h2 class="title">Project ...</h2>
+
-
  <p>This is <strong>IGEM_TEST </strong>参考文献</p>
+
-
  <div style="clear: both;"></div>
+
-
                <br />
+
-
    </div>
+
-
  </div>
+
-
</div>
+
-
+
-
<div style="clear: both;">&nbsp;</div>
+
-
  </div>
+
-
<!-- end #content -->
+
-
<div id="sidebar">
+
-
<ul>
+
-
<li>
+
-
<h2>Project</h2>
+
-
<p><strong>project</strong>
+
-
</p>
+
-
  </li>
+
-
<li> </li>
+
-
<li>
+
-
<h2>project</h2>
+
-
<ul>
+
-
<li><a href="#">project</a></li>
+
-
<li><a href="#">project</a></li>
+
-
<li><a href="#">project</a></li>
+
-
<li><a href="#">project</a></li>
+
-
<li><a href="#">project</a></li>
+
-
<li><a href="#">project</a></li>
+
-
</ul>
+
-
</li>
+
-
</ul>
+
-
    </div>
+
-
<!-- end #sidebar -->
+
-
  <div style="clear: both;"></div>
+
-
    <div id="myfooter">
+
-
<p><a href="#">NJU_NJUT_CHINA</a>.</p>
+
-
  </div>
+
-
<!-- end #footer -->
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<!-- end #page -->
+
-
</div>
+
-
<!-- The JavaScript -->
+
-
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+
-
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
+
-
        <script type="text/javascript">
+
-
(function($) {
+
-
$.fn.parallaxSlider = function(options) {
+
-
var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);
+
-
return this.each(function() {
+
-
var $pxs_container = $(this),
+
-
o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;
+
-
+
-
//the main slider
+
-
var $pxs_slider = $('.pxs_slider',$pxs_container),
+
-
//the elements in the slider
+
-
$elems = $pxs_slider.children(),
+
-
//total number of elements
+
-
total_elems = $elems.length,
+
-
//the navigation buttons
+
-
$pxs_next = $('.pxs_next',$pxs_container),
+
-
$pxs_prev = $('.pxs_prev',$pxs_container),
+
-
//the bg images
+
-
$pxs_bg1 = $('.pxs_bg1',$pxs_container),
+
-
$pxs_bg2 = $('.pxs_bg2',$pxs_container),
+
-
$pxs_bg3 = $('.pxs_bg3',$pxs_container),
+
-
//current image
+
-
current = 0,
+
-
//the thumbs container
+
-
$pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),
+
-
//the thumbs
+
-
$thumbs = $pxs_thumbnails.children(),
+
-
//the interval for the autoplay mode
+
-
slideshow,
+
-
//the loading image
+
-
$pxs_loading = $('.pxs_loading',$pxs_container),
+
-
$pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);
+
-
+
-
//first preload all the images
+
-
var loaded = 0,
+
-
$images = $pxs_slider_wrapper.find('img');
+
-
+
-
$images.each(function(){
+
-
var $img = $(this);
+
-
$('<img/>').load(function(){
+
-
++loaded;
+
-
if(loaded == total_elems*2){
+
-
$pxs_loading.hide();
+
-
$pxs_slider_wrapper.show();
+
-
+
-
//one images width (assuming all images have the same sizes)
+
-
var one_image_w = $pxs_slider.find('img:first').width();
+
-
setWidths($pxs_slider,
+
-
$elems,
+
-
total_elems,
+
-
$pxs_bg1,
+
-
$pxs_bg2,
+
-
$pxs_bg3,
+
-
one_image_w,
+
-
$pxs_next,
+
-
$pxs_prev);
+
-
$pxs_thumbnails.css({
+
-
'width' : one_image_w + 'px',
+
-
'margin-left' : -one_image_w/2 + 'px'
+
-
});
+
-
var spaces = one_image_w/(total_elems+1);
+
-
$thumbs.each(function(i){
+
-
var $this = $(this);
+
-
var left = spaces*(i+1) - $this.width()/2;
+
-
$this.css('left',left+'px');
+
-
+
-
if(o.thumbRotation){
+
-
var angle = Math.floor(Math.random()*41)-20;
+
-
$this.css({
+
-
'-moz-transform' : 'rotate('+ angle +'deg)',
+
-
'-webkit-transform' : 'rotate('+ angle +'deg)',
+
-
'transform' : 'rotate('+ angle +'deg)'
+
-
});
+
-
}
+
-
$this.bind('mouseenter',function(){
+
-
$(this).stop().animate({top:'-10px'},100);
+
-
}).bind('mouseleave',function(){
+
-
$(this).stop().animate({top:'0px'},100);
+
-
});
+
-
});
+
-
+
-
//make the first thumb be selected
+
-
highlight($thumbs.eq(0));
+
-
+
-
//slide when clicking the navigation buttons
+
-
$pxs_next.bind('click',function(){
+
-
++current;
+
-
if(current >= total_elems)
+
-
if(o.circular)
+
-
current = 0;
+
-
else{
+
-
--current;
+
-
return false;
+
-
}
+
-
highlight($thumbs.eq(current));
+
-
slide(current,
+
-
$pxs_slider,
+
-
$pxs_bg3,
+
-
$pxs_bg2,
+
-
$pxs_bg1,
+
-
o.speed,
+
-
o.easing,
+
-
o.easingBg);
+
-
});
+
-
$pxs_prev.bind('click',function(){
+
-
--current;
+
-
if(current < 0)
+
-
if(o.circular)
+
-
current = total_elems - 1;
+
-
else{
+
-
++current;
+
-
return false;
+
-
}
+
-
highlight($thumbs.eq(current));
+
-
slide(current,
+
-
$pxs_slider,
+
-
$pxs_bg3,
+
-
$pxs_bg2,
+
-
$pxs_bg1,
+
-
o.speed,
+
-
o.easing,
+
-
o.easingBg);
+
-
});
+
-
$thumbs.bind('click',function(){
+
-
var $thumb = $(this);
+
-
highlight($thumb);
+
-
if(o.auto)
+
-
clearInterval(slideshow);
+
-
current = $thumb.index();
+
-
slide(current,
+
-
$pxs_slider,
+
-
$pxs_bg3,
+
-
$pxs_bg2,
+
-
$pxs_bg1,
+
-
o.speed,
+
-
o.easing,
+
-
o.easingBg);
+
-
});
+
-
if(o.auto != 0){
+
-
o.circular = true;
+
-
slideshow = setInterval(function(){
+
-
$pxs_next.trigger('click');
+
-
},o.auto);
+
-
}
+
-
$(window).resize(function(){
+
-
w_w = $(window).width();
+
-
setWidths($pxs_slider,$elems,total_elems,$pxs_bg1,$pxs_bg2,$pxs_bg3,one_image_w,$pxs_next,$pxs_prev);
+
-
slide(current,
+
-
$pxs_slider,
+
-
$pxs_bg3,
+
-
$pxs_bg2,
+
-
$pxs_bg1,
+
-
1,
+
-
o.easing,
+
-
o.easingBg);
+
-
});
+
-
}
+
var inZoombox = document.createElement("div");
-
}).error(function(){
+
inZoombox.setAttribute('id', 'ZoomBox');
-
alert('here')
+
-
}).attr('src',$img.attr('src'));
+
inZoombox.style.position = 'absolute';
-
});
+
inZoombox.style.left = '10px';
-
+
inZoombox.style.top = '10px';
-
+
inZoombox.style.visibility = 'hidden';
-
+
inZoombox.style.zIndex = '499';
-
});
+
-
};
+
inBody.insertBefore(inZoombox, inSpinbox.nextSibling);
-
+
-
//the current windows width
+
var inImage1 = document.createElement("img");
-
var w_w = $(window).width();
+
inImage1.onclick = function (event) { zoomOut(this, event); return false; };
-
+
inImage1.setAttribute('src',zoomImagesURI+'spacer.gif');
-
var slide = function(current,
+
inImage1.setAttribute('id','ZoomImage');
-
$pxs_slider,
+
inImage1.setAttribute('border', '0');
-
$pxs_bg3,
+
inImage1.setAttribute('style', '-webkit-box-shadow: '+shadowSettings+'0.0)');
-
$pxs_bg2,
+
inImage1.style.display = 'block';
-
$pxs_bg1,
+
inImage1.style.width = '10px';
-
speed,
+
inImage1.style.height = '10px';
-
easing,
+
inImage1.style.cursor = 'pointer'; // -webkit-zoom-out?
-
easingBg){
+
inZoombox.appendChild(inImage1);
-
var slide_to = parseInt(-w_w * current);
+
-
$pxs_slider.stop().animate({
+
-
left : slide_to + 'px'
+
-
},speed, easing);
+
-
$pxs_bg3.stop().animate({
+
-
left : slide_to/2 + 'px'
+
-
},speed, easingBg);
+
-
$pxs_bg2.stop().animate({
+
-
left : slide_to/4 + 'px'
+
-
},speed, easingBg);
+
-
$pxs_bg1.stop().animate({
+
-
left : slide_to/8 + 'px'
+
-
},speed, easingBg);
+
-
}
+
-
+
-
var highlight = function($elem){
+
-
$elem.siblings().removeClass('selected');
+
-
$elem.addClass('selected');
+
-
}
+
-
+
-
var setWidths = function($pxs_slider,
+
-
$elems,
+
-
total_elems,
+
-
$pxs_bg1,
+
-
$pxs_bg2,
+
-
$pxs_bg3,
+
-
one_image_w,
+
-
$pxs_next,
+
-
$pxs_prev){
+
-
var pxs_slider_w = w_w * total_elems;
+
-
$pxs_slider.width(pxs_slider_w + 'px');
+
-
$elems.width(w_w + 'px');
+
var inClosebox = document.createElement("div");
-
$pxs_bg1.width(pxs_slider_w + 'px');
+
inClosebox.setAttribute('id', 'ZoomClose');
-
$pxs_bg2.width(pxs_slider_w + 'px');
+
inClosebox.style.position = 'absolute';
-
$pxs_bg3.width(pxs_slider_w + 'px');
+
-
var position_nav = w_w/2 - one_image_w/2 + 3;
+
// In MSIE, we need to put the close box inside the image.
-
$pxs_next.css('right', position_nav + 'px');
+
// It's 2008 and I'm having to do a browser detect? Sigh.
-
$pxs_prev.css('left', position_nav + 'px');
+
if (browserIsIE) {
-
}
+
inClosebox.style.left = '-1px';
-
+
inClosebox.style.top = '0px';
-
$.fn.parallaxSlider.defaults = {
+
} else {
-
auto : 0, //how many seconds to periodically slide the content.
+
inClosebox.style.left = '-15px';
-
//If set to 0 then autoplay is turned off.
+
inClosebox.style.top = '-15px';
-
speed : 1000,//speed of each slide animation
+
}
-
easing : 'jswing',//easing effect for the slide animation
+
-
easingBg : 'jswing',//easing effect for the background animation
+
inClosebox.style.visibility = 'hidden';
-
circular : true,//circular slider
+
inZoombox.appendChild(inClosebox);
-
thumbRotation : true//the thumbs will be randomly rotated
+
-
};
+
var inImage2 = document.createElement("img");
-
//easeInOutExpo,easeInBack
+
inImage2.onclick = function (event) { zoomOut(this, event); return false; };
-
})(jQuery);
+
inImage2.setAttribute('src',zoomImagesURI+'closebox.png');
-
</script>
+
inImage2.setAttribute('width','30');
 +
inImage2.setAttribute('height','30');
 +
inImage2.setAttribute('border','0');
 +
inImage2.style.cursor = 'pointer';
 +
inClosebox.appendChild(inImage2);
 +
 +
// SHADOW
 +
// Only draw the table-based shadow if the programatic webkitBoxShadow fails!
 +
// Also, don't draw it if we're IE -- it wouldn't look quite right anyway.
 +
 +
if (! document.getElementById('ZoomImage').style.webkitBoxShadow && ! browserIsIE) {
-
<script type="text/javascript">
+
// SHADOW BASE
-
$(function() {
+
-
var $pxs_container = $('#pxs_container');
+
var inFixedBox = document.createElement("div");
-
$pxs_container.parallaxSlider();
+
inFixedBox.setAttribute('id', 'ShadowBox');
-
});
+
inFixedBox.style.position = 'absolute';  
-
        </script>
+
inFixedBox.style.left = '50px';
-
<script type="text/javascript">
+
inFixedBox.style.top = '50px';
-
            $(function() {
+
inFixedBox.style.width = '100px';
-
                var d=300;
+
inFixedBox.style.height = '100px';
-
                $('#navigation a').each(function(){
+
inFixedBox.style.visibility = 'hidden';
-
                    $(this).stop().animate({
+
inFixedBox.style.zIndex = '498';
-
                        'marginTop':'-80px'
+
inBody.insertBefore(inFixedBox, inZoombox.nextSibling);
-
                    },d+=150);
+
-
                });
+
// SHADOW
 +
// Now, the shadow table. Skip if not compatible, or irrevelant with -box-shadow.
 +
 +
// <div id="ShadowBox"><table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"> X
 +
//  <tr height="25">
 +
//  <td width="27"><img src="/images/zoom-shadow1.png" width="27" height="25"></td>
 +
//  <td background="/images/zoom-shadow2.png">&nbsp;</td>
 +
//  <td width="27"><img src="/images/zoom-shadow3.png" width="27" height="25"></td>
 +
//  </tr>
 +
 +
var inShadowTable = document.createElement("table");
 +
inShadowTable.setAttribute('border', '0');
 +
inShadowTable.setAttribute('width', '100%');
 +
inShadowTable.setAttribute('height', '100%');
 +
inShadowTable.setAttribute('cellpadding', '0');
 +
inShadowTable.setAttribute('cellspacing', '0');
 +
inFixedBox.appendChild(inShadowTable);
-
                $('#navigation > li').hover(
+
 
-
                function () {
+
var inShadowTbody = document.createElement("tbody"); // Needed for IE (for HTML4).
-
                    $('a',$(this)).stop().animate({
+
inShadowTable.appendChild(inShadowTbody);
-
                        'marginTop':'-2px'
+
-
                    },200);
+
var inRow1 = document.createElement("tr");
-
                },
+
inRow1.style.height = '25px';
-
                function () {
+
inShadowTbody.appendChild(inRow1);
-
                    $('a',$(this)).stop().animate({
+
-
                        'marginTop':'-80px'
+
var inCol1 = document.createElement("td");
-
                    },200);
+
inCol1.style.width = '27px';
-
                }
+
inRow1.appendChild(inCol1); 
-
            );
+
var inShadowImg1 = document.createElement("img");
-
            });
+
inShadowImg1.setAttribute('src', zoomImagesURI+'zoom-shadow1.png');
-
function $aa(obj)
+
inShadowImg1.setAttribute('width', '27');
-
{
+
inShadowImg1.setAttribute('height', '25');
-
if(obj.className == "aa")
+
inShadowImg1.style.display = 'block';
-
{
+
inCol1.appendChild(inShadowImg1);
-
obj.className = "bb";
+
-
}
+
var inCol2 = document.createElement("td");
-
else
+
inCol2.setAttribute('background', zoomImagesURI+'zoom-shadow2.png');
-
obj.className = "aa";
+
inRow1.appendChild(inCol2);
-
}
+
// inCol2.innerHTML = '<img src=';
-
function unfold(element){
+
var inSpacer1 = document.createElement("img");
-
var temp=document.getElementById(element);
+
inSpacer1.setAttribute('src',zoomImagesURI+'spacer.gif');
-
$aa(temp);
+
inSpacer1.setAttribute('height', '1');
 +
inSpacer1.setAttribute('width', '1');
 +
inSpacer1.style.display = 'block';
 +
inCol2.appendChild(inSpacer1);
 +
 +
var inCol3 = document.createElement("td");
 +
inCol3.style.width = '27px';
 +
inRow1.appendChild(inCol3); 
 +
var inShadowImg3 = document.createElement("img");
 +
inShadowImg3.setAttribute('src', zoomImagesURI+'zoom-shadow3.png');
 +
inShadowImg3.setAttribute('width', '27');
 +
inShadowImg3.setAttribute('height', '25');
 +
inShadowImg3.style.display = 'block';
 +
inCol3.appendChild(inShadowImg3);
 +
 +
//  <tr>
 +
//  <td background="/images/zoom-shadow4.png">&nbsp;</td>
 +
//  <td bgcolor="#ffffff">&nbsp;</td>
 +
//  <td background="/images/zoom-shadow5.png">&nbsp;</td>
 +
//  </tr>
 +
 +
inRow2 = document.createElement("tr");
 +
inShadowTbody.appendChild(inRow2);
 +
 +
var inCol4 = document.createElement("td");
 +
inCol4.setAttribute('background', zoomImagesURI+'zoom-shadow4.png');
 +
inRow2.appendChild(inCol4);
 +
// inCol4.innerHTML = '&nbsp;';
 +
var inSpacer2 = document.createElement("img");
 +
inSpacer2.setAttribute('src',zoomImagesURI+'spacer.gif');
 +
inSpacer2.setAttribute('height', '1');
 +
inSpacer2.setAttribute('width', '1');
 +
inSpacer2.style.display = 'block';
 +
inCol4.appendChild(inSpacer2);
 +
 +
var inCol5 = document.createElement("td");
 +
inCol5.setAttribute('bgcolor', '#ffffff');
 +
inRow2.appendChild(inCol5);
 +
// inCol5.innerHTML = '&nbsp;';
 +
var inSpacer3 = document.createElement("img");
 +
inSpacer3.setAttribute('src',zoomImagesURI+'spacer.gif');
 +
inSpacer3.setAttribute('height', '1');
 +
inSpacer3.setAttribute('width', '1');
 +
inSpacer3.style.display = 'block';
 +
inCol5.appendChild(inSpacer3);
 +
 +
var inCol6 = document.createElement("td");
 +
inCol6.setAttribute('background', zoomImagesURI+'zoom-shadow5.png');
 +
inRow2.appendChild(inCol6);
 +
// inCol6.innerHTML = '&nbsp;';
 +
var inSpacer4 = document.createElement("img");
 +
inSpacer4.setAttribute('src',zoomImagesURI+'spacer.gif');
 +
inSpacer4.setAttribute('height', '1');
 +
inSpacer4.setAttribute('width', '1');
 +
inSpacer4.style.display = 'block';
 +
inCol6.appendChild(inSpacer4);
 +
 +
//  <tr height="26">
 +
//  <td width="27"><img src="/images/zoom-shadow6.png" width="27" height="26"</td>
 +
//  <td background="/images/zoom-shadow7.png">&nbsp;</td>
 +
//  <td width="27"><img src="/images/zoom-shadow8.png" width="27" height="26"></td>
 +
//  </tr> 
 +
// </table>
 +
 +
var inRow3 = document.createElement("tr");
 +
inRow3.style.height = '26px';
 +
inShadowTbody.appendChild(inRow3);
 +
 +
var inCol7 = document.createElement("td");
 +
inCol7.style.width = '27px';
 +
inRow3.appendChild(inCol7);
 +
var inShadowImg7 = document.createElement("img");
 +
inShadowImg7.setAttribute('src', zoomImagesURI+'zoom-shadow6.png');
 +
inShadowImg7.setAttribute('width', '27');
 +
inShadowImg7.setAttribute('height', '26');
 +
inShadowImg7.style.display = 'block';
 +
inCol7.appendChild(inShadowImg7);
 +
 +
var inCol8 = document.createElement("td");
 +
inCol8.setAttribute('background', zoomImagesURI+'zoom-shadow7.png');
 +
inRow3.appendChild(inCol8); 
 +
// inCol8.innerHTML = '&nbsp;';
 +
var inSpacer5 = document.createElement("img");
 +
inSpacer5.setAttribute('src',zoomImagesURI+'spacer.gif');
 +
inSpacer5.setAttribute('height', '1');
 +
inSpacer5.setAttribute('width', '1');
 +
inSpacer5.style.display = 'block';
 +
inCol8.appendChild(inSpacer5);
 +
 +
var inCol9 = document.createElement("td");
 +
inCol9.style.width = '27px';
 +
inRow3.appendChild(inCol9); 
 +
var inShadowImg9 = document.createElement("img");
 +
inShadowImg9.setAttribute('src', zoomImagesURI+'zoom-shadow8.png');
 +
inShadowImg9.setAttribute('width', '27');
 +
inShadowImg9.setAttribute('height', '26');
 +
inShadowImg9.style.display = 'block';
 +
inCol9.appendChild(inShadowImg9);
}
}
-
        </script>
 
 +
if (includeCaption) {
 +
 +
// CAPTION
 +
//
 +
// <div id="ZoomCapDiv" style="margin-left: 13px; margin-right: 13px;">
 +
// <table border="1" cellpadding="0" cellspacing="0">
 +
// <tr height="26">
 +
// <td><img src="zoom-caption-l.png" width="13" height="26"></td>
 +
// <td rowspan="3" background="zoom-caption-fill.png"><div id="ZoomCaption"></div></td>
 +
// <td><img src="zoom-caption-r.png" width="13" height="26"></td>
 +
// </tr>
 +
// </table>
 +
// </div>
 +
 +
var inCapDiv = document.createElement("div");
 +
inCapDiv.setAttribute('id', 'ZoomCapDiv');
 +
inCapDiv.style.position = 'absolute';
 +
inCapDiv.style.visibility = 'hidden';
 +
inCapDiv.style.marginLeft = 'auto';
 +
inCapDiv.style.marginRight = 'auto';
 +
inCapDiv.style.zIndex = '501';
 +
 +
inBody.insertBefore(inCapDiv, inZoombox.nextSibling);
 +
 +
var inCapTable = document.createElement("table");
 +
inCapTable.setAttribute('border', '0');
 +
inCapTable.setAttribute('cellPadding', '0'); // Wow. These honestly need to
 +
inCapTable.setAttribute('cellSpacing', '0'); // be intercapped to work in IE. WTF?
 +
inCapDiv.appendChild(inCapTable);
 +
 +
var inTbody = document.createElement("tbody"); // Needed for IE (for HTML4).
 +
inCapTable.appendChild(inTbody);
 +
 +
var inCapRow1 = document.createElement("tr");
 +
inTbody.appendChild(inCapRow1);
 +
 +
var inCapCol1 = document.createElement("td");
 +
inCapCol1.setAttribute('align', 'right');
 +
inCapRow1.appendChild(inCapCol1);
 +
var inCapImg1 = document.createElement("img");
 +
inCapImg1.setAttribute('src', zoomImagesURI+'zoom-caption-l.png');
 +
inCapImg1.setAttribute('width', '13');
 +
inCapImg1.setAttribute('height', '26');
 +
inCapImg1.style.display = 'block';
 +
inCapCol1.appendChild(inCapImg1);
 +
 +
var inCapCol2 = document.createElement("td");
 +
inCapCol2.setAttribute('background', zoomImagesURI+'zoom-caption-fill.png');
 +
inCapCol2.setAttribute('id', 'ZoomCaption');
 +
inCapCol2.setAttribute('valign', 'middle');
 +
inCapCol2.style.fontSize = '14px';
 +
inCapCol2.style.fontFamily = 'Helvetica';
 +
inCapCol2.style.fontWeight = 'bold';
 +
inCapCol2.style.color = '#ffffff';
 +
inCapCol2.style.textShadow = '0px 2px 4px #000000';
 +
inCapCol2.style.whiteSpace = 'nowrap';
 +
inCapRow1.appendChild(inCapCol2);
 +
 +
var inCapCol3 = document.createElement("td");
 +
inCapRow1.appendChild(inCapCol3);
 +
var inCapImg2 = document.createElement("img");
 +
inCapImg2.setAttribute('src', zoomImagesURI+'zoom-caption-r.png');
 +
inCapImg2.setAttribute('width', '13');
 +
inCapImg2.setAttribute('height', '26');
 +
inCapImg2.style.display = 'block';
 +
inCapCol3.appendChild(inCapImg2);
 +
}
 +
}
 +
</script>
</body>
</body>
</html>
</html>

Revision as of 15:08, 27 September 2013

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> main

Poject Introduction

basic information

    All cellular systems evolve ways to combat predators and genomic parasites. In bacteria and archaea, numerous resistance mechanisms have been developed against phage. Clustered regularly interspaced short palindromic repeats (CRISPR)/CRISPR-associated (Cas) adaptive immune systems are found in bacteria and archaea to protect the hosts against the invasion of viruses and plasmids. Most of the bacteria and archaea acquire virus resistance by integrating short viral nucleotide acid fragments into the CRISPR sequences. It is believed that the integrated CRISPR sequences have the ability to form a genetic memory which prevents the host from being infected. The CRISPRs and Cas (CRISPR-associated) interact and form this prokaryotic adaptive immune system. A CRISPR array consists of the palindromic repeating sequences of typically 30bp that are interspaced by similar-sized acquired spacer sequences. The CRISPR loci are generally flanked by an AT-rich leader sequence which contains promoter and the binding sites for regulatory proteins. Highly-variable CRISPR loci provide insights into the phage and host population dynamics, and new avenues for enhanced phage resistance and genetic typing and tagging of industrial strains.

    The CRISPR/Cas immune system encompasses a multistep process by which DNA-encoded spacers lead to sequence-specific interference of invasive nucleic acids, mediated by a ribonucleoproteic complex. There are two main processes characteristic of CRISPR-based immunity, namely spacer acquisition (immunization) and crRNA-mediated interference (immunity). Thus far, most of the molecular basis for the CRISPR/Cas mechanism of action has focused on the interference step, with notable focus on the biochemical details of crRNA biogenesis and target nucleic acid interaction.

    There are three highly diverse CRISPR/Cas types exist, and major structural and functional differences are displayed in their mode of generating resistance against the invading DNA and/or RNA elements. The CRISPR-associated protein Cas9 that belongs to the type II CRISPR/Cas system has attracted much attention due to its potential use in genomic engineering. The cas9 signature gene encodes a large multifunctional protein with the ability to generate crRNA and targets phage and plasmid DNA for degradation. Cas9 contains a RuvC-like nuclease domain and a McrA-like HNH nuclease domain. The functional S. thermophilus CRISPR model is a Type II system that has been shown to provide defense against bacteriophage and plasmid DNA.

　    In the spacer acquisition process, small fragments of invasive nucleic acid are incorporated into the host genome between CRISPR repeats at the leader end of the locus. The polarized integration of novel repeat-spacer units at the leader end provides a chronological time line of spacer acquisition events. The sequence on the viral genome that corresponds to a spacer is termed proto-spacer. In most cases, a very short stretch of nucleotides is conserved in the immediate vicinity of the proto-spacer, the CRISPR motif, or the proto-spacer-associated motif (PAM). The ability to acquire novel spacers in vivo has been experimentally documented in S. thermophilus and Streptococcus mutans, in which trans-encoded small CRISPR RNA (tracrRNA) is involved in the processing of pre-CRISPR RNA (pre-crRNA) into crRNA. Subsequent recruitment of a housekeeping RNase III catalyzes, together with Cas9, cleavage of the pre-crRNA in the repeat; this yields 66-nt crRNA molecules that are further trimmed at the 5’end to produce 39–42-nt mature crRNA containing a 20-nt spacer sequence. During Type II CRISPR interference, target DNA is cleaved in the proto-spacer sequence by the CRISPR/Cas complex.

    All organisms need to continuously adapt to changes in their environment. Horizontal gene transfer (HGT), a dominant evolutionary process, at least, in prokaryotes, appears to be a form of Lamarckian inheritance. Obviously, the CRISPR system is a much more impressive example. Now, genome-editing by Cas9 is so efficient that it creates a popular method to knock out one gene from the host genome. However, people met lots of problems during attempts to specifically-targeting and cleavage-facilitating. As the best result of natural selection, we are sure that the CRISPR/Cas systems have their specification and high-efficiency when choosing the spacer. Based on the CRISPR library of S. thermophiles, E. Coli, Lactobacillus and Salmonella, we design one model to simulate the selection of spacer with the help of PAM (proto-spacer associated motifs), and then develop a theory to guide the choosing target-sites.

    As the imaginary result of our model, we choose the CRISPR sequence from E.coli K12, which is the most usual bacteria with the CRISPR/Cas system, to be our genetic memory loaded into the vector plasmid1 has been well designed. This plasmid is taken to generate the guiding-RNA (crRNA & tracrRNA) and interact with the Cas9 protein produced by the Cas9 plasmid2. We also design a set of target plasmids3 which have the linear structure of eGFP-target sequence. The target sequence is one existing spacer in the CRISPR of E.coli K12, which can pair with crRNA produced by the plasmid1. This linear structure will be destroyed, theoretically, when the Cas9/gRNA complex recognize the target-site, which is a 30nt sequence, and then cleavage the GFP gene, which is adjacent to the 30-nt target site.

　    In some sense, our experiments is significant. Firstly, our model give us an efficient and novel method to design the DNA sequence which can be transcribed into the crRNA, which works with the core protein Cas9 to recognize the target site. With the help of our model, we can import this system into the superbugs, which can produce the well-selected guiding-RNA specifically paired with the resistance genes. Meanwhile, it is believed that the chance that this kind of crRNAs pair with other sites is very low. Subsequently, Cas9 interacts with gRNA and then forms the protein-nucleic acid complex. This complex can theoretically destroy any chosen resistance genes, and its carrier, or rather the common plasmids, can exist in the bacteria steady and continuously. Secondly, we can use this system into several fields, such as fermentation, antiviral field, improving the plants and any other bioindustrial works. At the same time, the mechanism of heredity and genome evolution embodied in the CRISPR-Cas system seems to be bona fide Lamarckian we can also learn the co-evolution of bacteria and virus from these systems.

Project ...

This is IGEM_TEST 参考文献


Retrieved from "http://2013.igem.org/Team:NJU_NJUT_China/project"