Team:Rutgers/Project

From 2011.igem.org

Revision as of 11:39, 25 September 2011 by SanaWajid (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

/*

Awkward Showcase - jQuery plugin http://www.jquery.com http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin http://demo.awkwardgroup.com/showcase Version: 1.1.1

Markup example for jQuery("#showcase").awShowcase();

The Caption

This is a tooltip that displays the anchor html in a nice way. </a> <a href="http://www.awkward.se" coords="356, 172">

<img src="images/glasses.png" /> White Glasses: 500$ </a>

Content...

/

(function(jQuery) {

jQuery.fn.awShowcase = function(options) {

// Default configuration properties var defaults = { content_width: 700, content_height: 470, fit_to_parent: false, auto: false, interval: 3000, continuous: false, loading: true, tooltip_width: 200, tooltip_icon_width: 32, tooltip_icon_height: 32, tooltip_offsetx: 18, tooltip_offsety: 0, arrows: true, buttons: true, btn_numbers: false, keybord_keys: false, mousetrace: false, /* Trace x and y coordinates for the mouse */ pauseonover: true, stoponclick: true, transition: 'hslide', /* hslide / vslide / fade */ transition_delay: 300, transition_speed: 500, show_caption: 'onload', /* onload / onhover / show */ thumbnails: false, thumbnails_position: 'outside-last', /* outside-last / outside-first / inside-last / inside-first */ thumbnails_direction: 'vertical', /* vertical / horizontal */ thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */ dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */ speed_change: false, /* This prevents user from swithing more then one slide at once */ viewline: false, /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */ fullscreen_width_x: 15, custom_function: null };

// ***************** // SET UP THE PLUGIN // *****************

// Declare and set up some important variables options = jQuery.extend(defaults, options); var current_id = 0; var previous_id = 0; var break_loop = false; var pause_loop = false; var myInterval = null; var showcase = jQuery(this); var showcase_width = options.content_width; var animating = false; // Viewline specific variables var content_viewline_width = 10000; var animation_distance = 0; var old_animation_distance = 0; var remaining_width = 0;

// Set up the content wrapper var content_container = jQuery(document.createElement('div')) .css('overflow', 'hidden') .css('position', 'relative') .addClass('showcase-content-container') .prependTo(showcase);

// Set up the showcase for hundred percent width if (options.fit_to_parent) { showcase_width = jQuery(showcase).width() + options.fullscreen_width_x; }

// Set up the showcase for Viewline Mayhem if (options.viewline) { options.thumbnails = false; options.dynamic_height = false; content_container.css('width', content_viewline_width); showcase.css('overflow', 'hidden'); $('.showcase-arrow-previous').hide(); }

// Set up content and create the content and thumbnail array var contentArray = []; var thumbnailArray = []; var content_count = 0; showcase.children('.showcase-slide').each(function() { // Get content var object = jQuery(this); content_count++;

// If thumbnails are activated if (options.thumbnails) { // Get thumbnail and put in array var thumb = object.find('.showcase-thumbnail'); thumbnailArray.push(thumb); thumb.remove(); }

// Set content width and height var object_width = object.find('.showcase-content').children().width(); var object_height = object.find('.showcase-content').children().height();

// Add content html in array and remove it from DOM contentArray.push(object.html()); object.remove();

// Get correct content var new_object = getContent(content_count-1); if (options.viewline || content_count === 1) { content_container.append(new_object); }

// Viewline setup if (options.viewline) { new_object.css('position', 'relative'); new_object.css('float', 'left'); new_object.css('width', object_width); }

// Set content and content container load height if (options.dynamic_height) { new_object.css('height', object_height); if (content_count === 1) { content_container.css('height', object_height); } } else { new_object.css('height', options.content_height); if (content_count === 1) { content_container.css('height', options.content_height); } }

if (options.viewline || content_count === 1) { displayAnchors(new_object); displayCaption(new_object);

if (options.show_caption === 'show') { jQuery(new_object).find('.showcase-caption').show(); } } });

// Declare and set up the thumbnail wrapper var thumb_wrapper; var thumbnailStretch = 0; var thumbnailsPerPage = 0; if (options.thumbnails) { // Create wrapper thumb_container = jQuery('<div />'); thumb_restriction = jQuery('<div />'); thumb_wrapper = jQuery('<div />');

// Add content to thumbnail wrapper for (i = thumbnailArray.length-1; i >= 0; --i) { var thumbnail = jQuery(thumbnailArray[i]).css({'overflow' : 'hidden'}); thumbnail.attr('id', 'showcase-thumbnail-' + i); thumbnail.addClass((i === 0) ? 'active' : ); thumbnail.click(function(a, b) { // This function is used to extract the correct i value on click return function() { // Disable auto change on click if (myInterval) { pause_loop = true; clearInterval(myInterval); } changeContent(a, b); }; }(i, )); thumb_wrapper.prepend(thumbnail); }

// Style and position thumbnail container and content wrapper // + insert thumbnail container if (options.thumbnails_position === 'outside-first' || options.thumbnails_position === 'outside-last') { if (options.thumbnails_direction !== 'horizontal') { /* outside & vertical */ content_container.css('float', 'left'); content_container.css('width', options.content_width); thumb_container.css('float', 'left'); thumb_container.css('height', options.content_height); } else { /* outside & horizontal */ jQuery(thumb_wrapper).find('.showcase-thumbnail').css('float', 'left'); //jQuery(thumb_wrapper).append(jQuery('<div />').addClass('clear')); }

if (options.thumbnails_position === 'outside-last') { /* outside-last */ showcase.append(thumb_container); if (options.thumbnails_direction !== 'horizontal') { showcase.append(jQuery('<div />').addClass('clear')); } } else { /* outside-first */ showcase.prepend(thumb_container); if (options.thumbnails_direction !== 'horizontal') { showcase.append(jQuery('<div />').addClass('clear')); } } } else { thumb_container.css({'position' : 'absolute', 'z-index' : 20}); if (options.thumbnails_direction === 'horizontal') { /* inside & horizontal */ thumb_container.css({'left' : 0, 'right' : 0}); jQuery(thumb_wrapper).find('.showcase-thumbnail').css('float', 'left'); jQuery(thumb_wrapper).append(jQuery('<div />').addClass('clear'));

/* inside first */ if (options.thumbnails_position === 'inside-first') { thumb_container.css('top', 0); } /* inside last */ else { thumb_container.css('bottom', 0); } } else { /* inside & vertical */ thumb_container.css({'top' : 0, 'bottom' : 0}); /* inside first */ if (options.thumbnails_position === 'inside-first') { thumb_container.css('left', 0); } /* inside last */ else { thumb_container.css('right', 0); } } content_container.prepend(thumb_container); }

// Add class and style to thumbnail container thumb_container.addClass('showcase-thumbnail-container'); thumb_container.css('overflow', 'hidden');

// Add class and style to thumbnail restriction thumb_restriction.addClass('showcase-thumbnail-restriction'); thumb_restriction.css({'overflow' : 'hidden', 'position' : 'relative'}); if (options.thumbnails_direction === 'horizontal') { thumb_restriction.css({'float' : 'left'}); }

// Add class and style to thumbnail wrapper thumb_wrapper.addClass('showcase-thumbnail-wrapper'); if (options.thumbnails_direction === 'horizontal') { thumb_wrapper.addClass('showcase-thumbnail-wrapper-horizontal'); } else { thumb_wrapper.addClass('showcase-thumbnail-wrapper-vertical'); } thumb_wrapper.css('position', 'relative');

// Append wrapper and restriction thumb_restriction.append(thumb_wrapper); thumb_container.append(thumb_restriction);

// Add backward button var buttonBackward = jQuery('<div class="showcase-thumbnail-button-backward" />'); if (options.thumbnails_direction !== 'horizontal') { buttonBackward.html('Up'); } else { buttonBackward.css({'float' : 'left'}); buttonBackward.html('Left'); } buttonBackward.click(function() { slideThumbnailWrapper('backward', false, true); }); thumb_container.prepend(buttonBackward);

// Add forward button var buttonForward = jQuery('<div class="showcase-thumbnail-button-forward" />'); if (options.thumbnails_direction !== 'horizontal') { buttonForward.html('Down'); } else { buttonForward.css({'float' : 'left'}); buttonForward.html('Right'); } buttonForward.click(function() { slideThumbnailWrapper('forward', false, true); }); thumb_container.append(buttonForward);

// Set the number of thumbnails per page. var thumbnailVisibleStretch = 0; if (options.thumbnails_direction !== 'horizontal') { thumbnailVisibleStretch = getElementHeight(thumb_wrapper, false); thumbnailVisibleStretch += (getElementHeight(buttonBackward)) + (getElementHeight(buttonForward)); while (thumbnailVisibleStretch < options.content_height) { thumbnailVisibleStretch += getElementHeight(jQuery(thumbnailArray[0])); thumbnailsPerPage++; } } else { thumbnailVisibleStretch = getElementWidth(thumb_wrapper, false); thumbnailVisibleStretch += (getElementWidth(buttonBackward)) + (getElementWidth(buttonForward));

while (thumbnailVisibleStretch < showcase_width) { thumbnailVisibleStretch += getElementWidth(jQuery(thumbnailArray[0])); thumbnailsPerPage++; } }

// Hide buttons if they're not necessary if (thumbnailsPerPage+1 > thumbnailArray.length) { if (options.thumbnails_direction !== 'horizontal') { thumb_restriction.css('margin-top', getElementHeight(buttonBackward)); } else { thumb_restriction.css('margin-left', getElementWidth(buttonBackward)); } buttonBackward.hide(); buttonForward.hide(); }

// Set thumbnail restriction height or width if (options.thumbnails_direction !== 'horizontal') { var buttonsHeight = (getElementHeight(buttonBackward)) + (getElementHeight(buttonForward)); thumb_restriction.css('height', options.content_height - buttonsHeight); } else { var buttonsWidth = (getElementWidth(buttonBackward)) + (getElementWidth(buttonForward)); thumb_restriction.css('width', showcase_width-buttonsWidth); }

// Set thumbnail wrapper width if (options.thumbnails_direction === 'horizontal') { jQuery('.showcase-thumbnail').each(function() { thumbnailStretch += getElementWidth(jQuery(this)); }); thumb_wrapper.css('width', thumbnailStretch); } else { jQuery('.showcase-thumbnail').each(function() { thumbnailStretch += getElementHeight(jQuery(this)); }); } }

// Set showcase width and height if (options.thumbnails && options.thumbnails_position.indexOf("outside") !== -1 && options.thumbnails_direction !== 'horizontal' && !options.viewline) { showcase.css('width', showcase_width + getElementWidth(thumb_wrapper, true, false)); } else if (!options.fit_to_parent) { showcase.css('width', showcase_width); }

// Turn on/off auto slide if (content_count > 1 && options.auto) { myInterval = window.setInterval(autoChange, options.interval); }

// Pause auto on mouse over if (options.auto && options.pauseonover) { showcase.mouseenter(function() { break_loop = true; clearInterval(myInterval); }); showcase.mouseleave(function() { if (!pause_loop) { break_loop = false; myInterval = window.setInterval(autoChange, options.interval); } }); }

// Adding navigation arrows if (options.arrows && content_count > 1) { // Left arrow jQuery(document.createElement('div')) .addClass('showcase-arrow-previous') .prependTo(showcase) .click(function() { // Disable auto change on click if (myInterval) { if (options.stoponclick) { pause_loop = true; } clearInterval(myInterval); } changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous'); }); // Right arrow jQuery(document.createElement('div')) .addClass('showcase-arrow-next') .prependTo(showcase) .click(function() { // Disable auto change on click if (myInterval) { if (options.stoponclick) { pause_loop = true; } clearInterval(myInterval); } changeContent(current_id+1, 'next'); });

if (options.viewline) { $('.showcase-arrow-previous').hide(); } }

// Adding navigation buttons if (options.buttons && content_count > 1) { // Create button wrapper jQuery(document.createElement('div')) .css('clear', 'both') .addClass('showcase-button-wrapper') .appendTo(showcase); i = 0; // Add button for each content while (i < content_count) { jQuery(document.createElement('span')) .attr('id', 'showcase-navigation-button-' + i) .addClass((i === 0) ? 'active' : ) // Add numbers or unicode .html((options.btn_numbers) ? parseInt(i)+1 : '●') .click(function(a, b) { // This function is used to extract the correct i value on click return function() { // Disable auto change on click if (myInterval) { if (options.stoponclick) { pause_loop = true; } clearInterval(myInterval); } changeContent(a, b); }; }(i, )) .appendTo(jQuery(showcase).find('.showcase-button-wrapper')); i++; } }

// Activating the keybord arrow keys if (options.keybord_keys) { jQuery(document).keydown(function(e) { // Disable auto change on click if (options.stoponclick) { pause_loop = true; } if (myInterval) clearInterval(myInterval);

// Left arrow if (e.keyCode === 37) { changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous'); }

// Right arrow if (e.keyCode === 39) { changeContent((current_id === content_count-1) ? 0 : parseInt(current_id)+1, 'next'); } }); }

// ************* // THE FUNCTIONS // *************

// Returns the specified content (by array id) function getContent(id) {

var new_content = jQuery(document.createElement('div')) .attr('id', 'showcase-content-' + id) .css('overflow', 'hidden') .css('position', 'absolute') .addClass('showcase-content') .html(contentArray[id]);

// Set content width if (!options.viewline) { new_content.css('width', options.content_width); }

// Position the content wrapper if showcase width is set to hundred percent if (options.fit_to_parent && !options.viewline) { new_content.css('left', (showcase_width/2)-options.content_width/2); }

return new_content; }

// Function that runs when content is set to change automatically function autoChange() {

// Set next content id var nextID = parseInt(current_id)+1; // If the next id is outside the array and continuous is set to true set the id to 0 if (nextID === content_count && options.continuous) { nextID = 0; } // If continuous is set to false break the auto change else if (nextID === content_count && !options.continuous) { break_loop = true; clearInterval(myInterval); } // Don't change the content if the auto change is broken if (!break_loop) { changeContent(nextID, 'next'); } }

// Changes the content (no explanation/comments needed :) function changeContent(id, direction) {

// If the next content isn't the current content if (current_id !== id && !animating) {

var obj; var obj2; var delay = 0; var i;

// Set left/right position if showcase is set to full width var lrpos = (options.fit_to_parent) ? (showcase_width/2)-(options.content_width/2) : 0;

// If we want to display the next content if ((id > current_id && direction !== 'previous') || direction === 'next') {

if (options.viewline) {

if (current_id < content_count-1) {

// Prevent uggly transitions if (!options.speed_change) { animating = true; }

// BugFix updateContentViewlineWidth();

// Pause Autoplay if (options.pauseonover) { window.clearInterval(myInterval); }

// First we check if the content will fill the screen after animation. remaining_width = 0;

// Loop trough the content array to find out // the total width for the content that remains. for (i=current_id+1, len=content_count; i<len; ++i) { obj = addedContentArray[i]; remaining_width += obj.find('.showcase-content').children().width(); }

// If the remaining width is wider than the browser window. if (remaining_width > showcase_width) { old_animation_distance = animation_distance; animation_distance -= addedContentArray[current_id].find('.showcase-content').children().width(); } else if ($('.showcase-arrow-next').is(':visible')) { old_animation_distance = animation_distance; animation_distance = -(content_viewline_width - (remaining_width + (showcase_width - remaining_width))); $('.showcase-arrow-next').fadeOut(300); }

content_container.animate({left: animation_distance + 'px'}, options.transition_speed, function() { animating = false; });

// Change current content id (if content is finished) if ($('.showcase-arrow-next').is(':visible')) { current_id++; }

$('.showcase-arrow-previous').fadeIn(300); } } else {

// Prevent uggly transitions if (!options.speed_change) { animating = true; }

// Get current and next content element obj = jQuery(showcase).find('#showcase-content-' + parseInt(current_id)); obj2 = getContent(id);

// Append next element and set height content_container.append(obj2); if (options.dynamic_height) { obj2.css('height', obj2.find('.showcase-content').children().height()); } else { obj2.css('height', options.content_height); }

// Animate height first if next content is not as high if (obj.find('.showcase-content').children().height() > obj2.find('.showcase-content').children().height() && options.dynamic_height) {

content_container.stop(true, true).animate({ height: obj2.find('.showcase-content').children().height() }, 200); delay = 100; }

// Animate current element if (options.transition === 'hslide') {

jQuery(obj).delay(delay).animate({ left: -(options.content_width) }, options.transition_speed+options.transition_delay, function() { obj.remove(); }); } else if (options.transition === 'vslide') {

jQuery(obj).delay(delay).animate({ top: -(options.content_height) }, options.transition_speed+options.transition_delay, function() { obj.remove(); }); } else {

jQuery(obj).delay(delay).fadeOut(options.transition_speed, function() { obj.remove(); }); }

// This will hide them, not display them :) displayAnchors(obj, true); displayCaption(obj, true);

// Animate next element if (options.transition === 'hslide') {

obj2.css('left', showcase_width); jQuery(obj2).delay(delay).animate({ left: lrpos }, options.transition_speed, function() { displayAnchors(obj2); displayCaption(obj2); afterAnimation(obj2); } ); } else if (options.transition === 'vslide') {

obj2.css('top', showcase.height()); jQuery(obj2).delay(delay).animate({ top: '0px' }, options.transition_speed, function() { displayAnchors(obj2); displayCaption(obj2); afterAnimation(obj2); } ); } else {

obj2.css('left', lrpos); obj2.css('display', 'none'); jQuery(obj2).delay(delay).fadeIn(options.transition_speed, function() { displayAnchors(obj2); displayCaption(obj2); afterAnimation(obj2); } ); } } } // If we want to display the previous content else if (id < current_id || direction === 'previous') {

if (options.viewline) {

if (current_id !== 0) {

// Prevent uggly transitions if (!options.speed_change) { animating = true; }

// BugFix updateContentViewlineWidth();

// Pause Autoplay if (options.pauseonover) { window.clearInterval(myInterval); }

content_container.animate({left: old_animation_distance + 'px'}, options.transition_speed, function() { animating = false; });

// Set animation distance animation_distance = old_animation_distance;

// Change current content id current_id--;

if (current_id === 0) { $('.showcase-arrow-previous').fadeOut(300); }

// Set old distance old_id = current_id - 1; sub_width = jQuery(addedContentArray[old_id]).width(); old_animation_distance = old_animation_distance + sub_width; }

$('.showcase-arrow-next').fadeIn(300); } else {

// Prevent uggly transitions if (!options.speed_change) { animating = true; }

// Get current and next content element obj = jQuery(showcase).find('#showcase-content-' + parseInt(current_id)); obj2 = getContent(id);

// Append next element and set height content_container.append(obj2); if (options.dynamic_height) { obj2.css('height', obj2.find('.showcase-content').children().height()); } else { obj2.css('height', options.content_height); }

// Animate height first if next content is not as high if (obj.find('.showcase-content').children().height() > obj2.find('.showcase-content').children().height() && options.dynamic_height) {

content_container.stop(true, true).animate({ height: obj2.find('.showcase-content').children().height()}, 200); delay = 100; }

// Animate current element if (options.transition === 'hslide') {

jQuery(obj).delay(delay).animate({ left: (showcase_width) + 'px' }, options.transition_speed+options.transition_delay, function() { displayAnchors(obj, true); displayCaption(obj, true); obj.remove(); }); } else if (options.transition === 'vslide') {

jQuery(obj).delay(delay).animate({ top: (options.content_height) + 'px' }, options.transition_speed+options.transition_delay, function(){ displayAnchors(obj, true); displayCaption(obj, true); obj.remove(); }); } else {

jQuery(obj).delay(delay).fadeOut(options.transition_speed, function() { displayAnchors(obj, true); displayCaption(obj, true); obj.remove(); }); }

// Animate next element if (options.transition === 'hslide') { obj2.css('left', '-' + options.content_width + 'px'); jQuery(obj2).delay(delay).animate({ left: lrpos }, options.transition_speed, function() { displayAnchors(obj2); displayCaption(obj2); afterAnimation(obj2); }); } else if (options.transition === 'vslide') { obj2.css('top', '-' + showcase.height() + 'px'); jQuery(obj2).delay(delay).animate({ top: '0px' }, options.transition_speed, function() { displayAnchors(obj2); displayCaption(obj2); afterAnimation(obj2); }); } else { obj2.css('left', lrpos); obj2.css('display', 'none'); jQuery(obj2).delay(delay).fadeIn(options.transition_speed, function() { displayAnchors(obj2); displayCaption(obj2); afterAnimation(obj2); }); } content_container.append(obj2); } }

if(!options.viewline) { // Change previous and current content id previous_id = current_id; current_id = id;

// Slide thumbnail wrapper if (options.thumbnails) { if ((current_id > previous_id && direction !== 'previous') || direction === 'next') { slideThumbnailWrapper('forward', true); } else if (current_id < previous_id || direction === 'previous') { slideThumbnailWrapper('backward', true); } }

// Change click handlers for arrows if (options.arrows) { jQuery(showcase).find('.showcase-arrow-previous') .unbind('click') .click(function() { if (myInterval) { if (options.stoponclick) { pause_loop = true; } clearInterval(myInterval); } changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous'); }); jQuery(showcase).find('.showcase-arrow-next') .unbind('click') .click(function() { if (myInterval) { if (options.stoponclick) { pause_loop = true; } clearInterval(myInterval); } changeContent((current_id === content_count-1) ? 0 : parseInt(current_id)+1, 'next'); }); }

// Change active class for thumbnails if (options.thumbnails) { i = 0; showcase.find('.showcase-thumbnail').each(function() { var object = jQuery(this); object.removeClass('active'); if (i === current_id) { object.addClass('active'); } i++; }); }

// If caption is set to 'show' if (options.show_caption === 'show') { jQuery(obj2).find('.showcase-caption').show(); } }

// Change active class for buttons if (options.buttons) { i = 0; showcase.find('.showcase-button-wrapper span').each(function() { var object = jQuery(this); object.removeClass('active'); if (i === current_id) { object.addClass('active'); } i++; }); }

// A function that runs on content change, if it exists. if (typeof options.custom_function == 'function') { options.custom_function(); } } }

function afterAnimation(obj) { if (options.dynamic_height) { content_container.stop(true, true).animate({ height: obj.find('.showcase-content').children().height() }, 200); } animating = false; }

// Slide thumbnail wrapper var thumbnailSlidePosition = 0; function slideThumbnailWrapper(direction, check, backwardforward) { var doTheSlide = true; var thumbnailHeightOrWidth = getElementHeight(jQuery(thumb_wrapper).find('.showcase-thumbnail')); if (options.thumbnails_direction === 'horizontal') { thumbnailHeightOrWidth = getElementWidth(jQuery(thumb_wrapper).find('.showcase-thumbnail')); } var multiplySlidePosition = 1;

// Set slide x if (options.thumbnails_slidex === 0) { options.thumbnails_slidex = thumbnailsPerPage; }

// Check if we need to do the slide if (check) { var thumbnailSlidePositionCopy = thumbnailSlidePosition; var thumbnailsScrolled = 0; while (thumbnailSlidePositionCopy < 0) { if (options.thumbnails_direction === 'horizontal') { thumbnailSlidePositionCopy += getElementWidth(jQuery(thumbnailArray[0])); } else { thumbnailSlidePositionCopy += getElementHeight(jQuery(thumbnailArray[0])); } thumbnailsScrolled++; }

var firstVisible = thumbnailsScrolled; var lastVisible = thumbnailsPerPage + thumbnailsScrolled -1;

// Check if the next active thumbnail is outside the visible area if (current_id >= firstVisible && current_id <= lastVisible) { doTheSlide = false; }

// If the next active thumbnail is far away.. var distance; if ((current_id - lastVisible) > options.thumbnails_slidex) { distance = current_id - lastVisible;

while (distance > options.thumbnails_slidex) { distance -= options.thumbnails_slidex; multiplySlidePosition++; } } else if ((firstVisible - current_id) > options.thumbnails_slidex) { distance = firstVisible - current_id;

while (distance > options.thumbnails_slidex) { distance -= options.thumbnails_slidex; multiplySlidePosition++; } } else { multiplySlidePosition = 1; } }

if (direction === 'forward' && doTheSlide) { if (options.thumbnails_direction === 'vertical' && options.content_height < (thumbnailStretch + thumbnailSlidePosition)) { thumbnailSlidePosition -= thumbnailHeightOrWidth * (options.thumbnails_slidex * multiplySlidePosition); } else if (options.thumbnails_direction === 'horizontal' && options.content_width < (thumbnailStretch + thumbnailSlidePosition)) { thumbnailSlidePosition -= thumbnailHeightOrWidth * (options.thumbnails_slidex * multiplySlidePosition); } else if (current_id === 0) { if (!backwardforward) { thumbnailSlidePosition = 0; } } if (options.thumbnails_direction === 'horizontal') { thumb_wrapper.animate({ left: thumbnailSlidePosition }, 300); } else { thumb_wrapper.animate({ top: thumbnailSlidePosition }, 300); } } else if (doTheSlide) { if (thumbnailSlidePosition < 0) { thumbnailSlidePosition += thumbnailHeightOrWidth * (options.thumbnails_slidex * multiplySlidePosition); } else if (current_id === content_count-1) { if (!backwardforward) { thumbnailSlidePosition -= thumbnailHeightOrWidth * (options.thumbnails_slidex * multiplySlidePosition); } } else { thumbnailSlidePosition = 0; } if (options.thumbnails_direction === 'horizontal') { thumb_wrapper.animate({ left: thumbnailSlidePosition }, 300); } else { thumb_wrapper.animate({ top: thumbnailSlidePosition }, 300); } } }

// Displays the caption function displayCaption(container, fadeOut) { var caption = container.find('.showcase-caption'); if (!fadeOut) { if (options.show_caption === 'onload') { caption.fadeIn(300); } else if (options.show_caption === 'onhover') { jQuery(container).mouseenter(function() { caption.fadeIn(300); });

jQuery(container).mouseleave(function() { caption.stop(true, true).fadeOut(100); }); } } else { caption.stop(true, true).fadeOut(300); } }

// Displays the anchors in the current slide function displayAnchors(container, fadeOut) { // Get each anchor tooltip container.find('.showcase-tooltips a').each(function() { if (!fadeOut) { // Get coordinates var coords = jQuery(this).attr('coords'); coords = coords.split(',');

// Style and position anchor jQuery(this).addClass('showcase-plus-anchor'); jQuery(this).css('position', 'absolute'); jQuery(this).css('display', 'none'); jQuery(this).css('width', options.tooltip_icon_width); jQuery(this).css('height', options.tooltip_icon_height); jQuery(this).css('left', parseInt(coords[0]) - (parseInt(options.tooltip_icon_width)/2)); jQuery(this).css('top', parseInt(coords[1]) - (parseInt(options.tooltip_icon_height)/2)); var content = jQuery(this).html(); jQuery(this).mouseenter(function() { animateTooltip(container, coords[0], coords[1], content); }); jQuery(this).mouseleave(function() { animateTooltip(container, coords[0], coords[1], content); }); jQuery(this).html(); jQuery(this).fadeIn(300); } else { jQuery(this).stop(true, true).fadeOut(300); } }); }

// Controls the animation for the tooltips var tooltip = null; function animateTooltip(container, x, y, content) { // if tooltip is null (doesn't exsist) if (tooltip === null) { // Create the tooltip tooltip = jQuery(document.createElement('div')) .addClass('showcase-tooltip') .css('display', 'none') .css('position', 'absolute') .css('max-width', options.tooltip_width) .html(content); container.append(tooltip);

// Position the tooltip (this is where we try not to display the tooltip outside the content wrapper) var tooltip_paddingx = parseInt(tooltip.css('padding-right'))*2 + parseInt(tooltip.css('border-right-width'))*2; var tooltip_paddingy = parseInt(tooltip.css('padding-bottom'))*2 + parseInt(tooltip.css('border-bottom-width'))*2; lastx = parseInt(x) + tooltip.width() + tooltip_paddingx; lasty = parseInt(y) + tooltip.height() + tooltip_paddingy;

if (lastx < options.content_width) { tooltip.css('left', parseInt(x) + parseInt(options.tooltip_offsetx)); } else { tooltip.css('left', (parseInt(x) - parseInt(options.tooltip_offsetx)) - (parseInt(tooltip.width()) + parseInt(options.tooltip_offsetx))); }

if (lasty < options.content_height) { tooltip.css('top', parseInt(y) + parseInt(options.tooltip_offsety)); } else { tooltip.css('top', (parseInt(y) - parseInt(options.tooltip_offsety)) - (parseInt(tooltip.height()) + parseInt(tooltip_paddingy))); }

// Fade in the tooltip tooltip.fadeIn(400); } else { // Fade out the tooltip tooltip.fadeOut(400); // Remove it from the DOM tooltip.remove(); // And set the variable to null tooltip = null; } }

/* Returns the correct height for the element, including padding and borders. */ function getElementHeight(el, incHeight, incMargin, incPadding, incBorders) { incHeight = typeof(incHeight) !== 'undefined' ? incHeight : true; incMargin = typeof(incMargin) !== 'undefined' ? incMargin : true; incPadding = typeof(incPadding) !== 'undefined' ? incPadding : true; incBorders = typeof(incBorders) !== 'undefined' ? incBorders : true; var elHeight = (incHeight) ? jQuery((el)).height() : 0; var elMargin = (incMargin) ? parseFloat(jQuery((el)).css('margin-top')) + parseFloat(jQuery(el).css('margin-bottom')) : 0; var elPadding = (incPadding) ? parseFloat(jQuery((el)).css('padding-top')) + parseFloat(jQuery(el).css('padding-bottom')) : 0; var elBorder = (incBorders) ? parseFloat(jQuery((el)).css('border-top-width')) + parseFloat(jQuery((el)).css('border-bottom-width')) : 0; elHeight += elMargin + elPadding + elBorder; return elHeight; }

/* Returns the correct width for the element, including width, margin, padding and borders. */ function getElementWidth(el, incWidth, incMargin, incPadding, incBorders) { incWidth = typeof(incWidth) !== 'undefined' ? incWidth : true; incMargin = typeof(incMargin) !== 'undefined' ? incMargin : true; incPadding = typeof(incPadding) !== 'undefined' ? incPadding : true; incBorders = typeof(incBorders) !== 'undefined' ? incBorders : true; var elWidth = (incWidth) ? jQuery((el)).width() : 0; var elMargin = (incMargin) ? parseFloat(jQuery((el)).css('margin-left')) + parseFloat(jQuery(el).css('margin-right')) : 0; var elPadding = (incPadding) ? parseFloat(jQuery((el)).css('padding-left')) + parseFloat(jQuery((el)).css('padding-right')) : 0; var elBorder = (incBorders) ? parseFloat(jQuery((el)).css('border-left-width')) + parseFloat(jQuery((el)).css('border-right-width')) : 0; elWidth += elMargin + elPadding + elBorder; return elWidth; }

// Traces the mouse position (used for positioning anchors) if (options.mousetrace) { // Create the div tha displays the coordinates var mousetrace = jQuery(document.createElement('div')) .css('position', 'absolute') .css('top', '0') .css('background-color', '#fff') .css('color', '#000') .css('padding', '3px 5px') .css('x-index', '30') .html('X: 0 Y: 0'); showcase.append(mousetrace); var offset = showcase.offset();

// Print the coordinates content_container.mousemove(function(e){ mousetrace.html('X: ' + (e.pageX - offset.left) + ' Y: ' + (e.pageY - offset.top)); }); }

// Show all content on one page $('#awOnePageButton').click(function showInOnePage() { if ($('.view-page').is(':visible')) { var temp_container = jQuery(document.createElement('div')); temp_container.addClass('showcase-onepage'); showcase.before(temp_container);

// Disable auto change on click if (myInterval) { pause_loop = true; clearInterval(myInterval); }

$(this).find('.view-page').hide(); $(this).find('.view-slide').show(); showcase.hide();

$.each(contentArray, function(index, value) { obj = getContent(index); obj.css('position', 'relative'); temp_container.append(obj);

displayAnchors(obj); displayCaption(obj);

if (options.dynamic_height) { obj.css('height', obj.find('.showcase-content').children().height()); } else { obj.css('height', options.content_height); } });

var clear = jQuery(document.createElement('div')); clear.addClass('clear'); temp_container.append(clear); } else { $('.showcase-onepage').remove(); $(this).find('.view-page').show(); $(this).find('.view-slide').hide(); showcase.show(); }

return false; });

// The correct width is returned when all content is fully loaded. var addedContentArray = []; function updateContentViewlineWidth() { content_viewline_width = 0; content_container.children('div').each(function() { content_viewline_width += $(this).find('.showcase-content').children().width(); addedContentArray.push($(this)); }); }

// Remove loading class showcase.removeClass('showcase-load'); };

})(jQuery);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Rutgers 2011 iGEM Team: Complex Circuits in Synthetic Biology

RUTGERS iGEM TEAM WIKI

Menu >> The Bacterial Etch-a-Sketch >> Goals

the Bacterial Etch-a-Sketch

View As One PageView As Slideshow

Real:

Bacterial lawn that can be drawn on with a laser

Abstract:

Fast biological memory circuit

Engineering Problems

Input: ~1 ms laser pulse

Sensitivity—1 ms is very short

Selectivity—Would like to use in ambient lighting

Output: Violacein Speed—Would like to see colors quickly

Noise—Do not want random lines

lovTAP. Activated by 470nm light. When active, acts as trpR which represses ptrpL. Stays active for about 1 minute.

Locking Switch

Based on Peking 2009 memory circuit

cI434 represses

pRM cI activates pRM

trpR represses ptrpL

By default, ptrpL is “on” and pRM is “off” A drop in cI434 should reverse permenantly

lovTAP represses pTrpL T7p activates T7 promoter trpR represses ptrpL C

Sensitivity:
Time it takes for (activation 1 => activation 2)

Time for enough cI434 to degrade for transcription at pRM

Selectivity:
Amount of light for (deactivated => activation 1)

Speed:
Time for VioA-E synthesis & work

Noise:
Basal transcription at T7
Close to none
Basal transcription at pRM
Minimized with low copy plasmid

•Complete LovTAP Plasmid—K360127—Ordered, 887bp

–pSB1C3, 2070bp, Chl

•T7 Promoter—I712074—Plate 1—6N, 46bp

–pSB1AK8, 3426bp, Amp, Kan

•VioA-E—K274002—Plate 3—12B, 7345bp

–pSB1T3, 2463bp, Tet

•ptrpL—K360023—get synthesized, 49bp + prefix/suffix = 108bp

–Will put into pSB1C3, 2070bp, Chl

•cI434 + LVA—C0052—Plate 1—4G, 669bp

–pSB1A2, 2079bp, Amp

•cI + LVA—C0051—Plate 1—4E, 750bp

–pSB1A2, 2079bp, Amp

•Modified pRM—I12040—Plate 1—20D, 91bp

–pSB2K3, 4425bp, Kan

•RBS+T7 P+NLS—I712069—Plate 2—13K, 2678bp

–pSB1AK3, 3189bp, Amp, Kan

•(Strong) RBS—B0034—Plate 1—2M, 12bp

–pSB1A2, 2079bp, Amp

Abstract

The goal is to engineer bacteria that will respond to a millisecond laser pulse. This is of concern because no living thing needs to worry about a stimulus that lasts for such a short amount of time. Additionally, in order for the light to elicit a response from the bacteria, the circuit must amplify the tiny light signal and translate it to a molecule that can regulate transcription.

The light itself is not able to activate or repress a promoter. It is important that the bacteria only respond to the laser pulse and not all light sources. The bacteria must either have a threshold level for the amount of light needed to induce color or respond to only certain wavelengths of light.

<Contents>

Goals

I. Input

The goal is to engineer bacteria that will respond to a millisecond laser pulse. This is of concern because no living thing needs to worry about a stimulus that lasts for such a short amount of time. Additionally, in order for the light to elicit a response from the bacteria, the circuit must amplify the tiny light signal and translate it to a molecule that can regulate transcription.

The light itself is not able to activate or repress a promoter. It is important that the bacteria only respond to the laser pulse and not all light sources. The bacteria must either have a threshold level for the amount of light needed to induce color or respond to only certain wavelengths of light.

II. Processing

The circuit must be able to hold memory, so that it does not return to its original state once the light signal is removed.

III. Output

The goal is to make the bacteria produce color in response to the light signal. The bacteria would be grown out into a lawn and then drawn on with the laser pointer and this drawing would appear in color, similar to drawing on a sketch pad. We are literally etching a sketch on the bacteria.

A concern is how long the bacteria will take to respond to the light and produce color. Moreover the bacteria should be sensitive enough so that only the bacteria that are exposed to the light should respond. Essentially there should be as little noise as possible in the coloring. A successful engineered Bacterial Etch-a-Sketch would allow a lawn of bacteria to be used as a sketch pad where we can draw on with a household laser pointer.

Depending on the application, this system has the ability to produce intracellular pigment when exposed to 477nm (blue) light. In the future, our bacteria could help solve problems that require a rapid response to light with a quick? visual output.

The SeLECT Circuit

SeLECT circuit

SeLECT: Sensitive, Light-Effected Circuit with Threshold (SeLECT)

The SeLECT circuit uses LovTAP that was developed by many teams and labs around the world, a memory switch based on work done by Peking University, and color generators developed by Cambridge.

Sensitivity:
How long we need to shine the laser on the bacteria to activated pRM

Selectivity:
How much ambient light the bacteria can resist before activating pRM

Speed:
Once activated, how long does it take to see color

Noise:
How much unwanted color is generated

LovTAP

Photoswitchable proteins

Photoswitchable proteins offer the unique ability to perturb living cells, tissues and intact organisms with high spatial and temporal precision1. In particular, genetically encoded photoswitches such as LOV (light, oxygen, voltage) and phytochrome domains can be conveniently used in many different experimental contexts2–7. The LOV2 domain of Avena sativa phototropin 1 (AsLOV2) has proven especially useful for controlling functionally diverse effectors including DNA-binding proteins, enzymes and small GTPases2,3,5.

AsLOV2

The current design uses LovTAP to sense light. LovTAP is a fusion protein of AsLOV2 and trp repressor at a common alpha helix. AsLOV2 stands for Avena sativa phototropin 1. It is a LOV (Light, oxygen, voltage) domain that was discovered in phototropins, which are light-activated serine-threonine kinases that facilitate blue light responses in plants and algae. LOV domains carry a flavin chromophore (either FMN or FAD) that broadly absorbs light at 447nm (cite).

Structural Properties

In the functional conformation of the trp repressor, the protein is “loosely” bound to the alpha helix (of what?).

If LovTAP cannot bind the alpha helix, then the repressor will not function. AsLOV2 on the other hand, “tightly” binds a similar alpha helix in the dark. However, when exposed to 477 nm (blue) light, AsLOV2 undergoes a conformational change and cannot bind the alpha helix.

Thus, LovTap is a trp repressor in the light and is not active in the dark.

Induction

We will need to shine the blue light on the bacteria to initiate LovTap detaching from the Trp Repressor. However, the length of the exposure time before it takes for the bacteria to effectively undergo the reaction is unknown.

We plan on testing the LovTap protein with the color genes in a single plasmid first to determine the speed of this reaction. From there, we will decide if LovTap is or is not the best light-activated system for our design and may seek a new one ?????????

Issues

Another issue to avoid is UV light’s effect on LovTap. We will need to test to make sure that LovTap does not detach from TrpR by just regular sunlight so that activation of our pathway occurs only when we want it to. Otherwise, we may see random color spots.

Memory Switch

Genetic Switch

The memory switch, designed Pecking University 2007, will be used in order to allow the bacteria to remember if it has been exposed to laser light or not. This should allow the input signal to be amplified in some sense. The memory uses a modified pRM promoter from lambda phage.

When the bacterium is not yet exposed to light, we repress the pRM promoter with cI434.

CI434 is located on a transcript with a ptrpL promoter.

In the Select circuit, LovTap will repress the ptrpL promoter upon light exposure. This will stop repression of the pRM promoter, allowing transcription. Included in the transcript is cI, which is an activator of the pRM promoter, and trpR to repress ptrpL and thus the production of cI434.

Thus even though upon discontinuing light exposure, repression of pRM via cI4343 should occur, the switch represses cI434 and allows for the pRM promoter to continue being transcribed, in conjunction with the pRM activator cI. pRM transcription should stay on via this positive feedback loop.

mRFP

Red Fluorescent Proteins

mRFP1, derived from the Discosoma sp. fluorescent protein "DsRed" by directed evolution first to increase the speed of maturation, then to break each subunit interface while restoring fluorescence, which cumulatively required 33 substitutions. he latest red version matures more completely, is more tolerant of N-terminal fusions and is over tenfold more photostable than mRFP1.

<-filler

Three monomers with distinguishable hues from yellow-orange to red-orange have higher quantum efficiencies. http://www.mendeley.com/research/improved-monomeric-red-orange-yellow-fluorescent-proteins-derived-discosoma-sp-red-fluorescent-protein/

Structural Properties

In the functional conformation of the trp repressor, the protein is “loosely” bound to the alpha helix (of what?).

If LovTAP cannot bind the alpha helix, then the repressor will not function. AsLOV2 on the other hand, “tightly” binds a similar alpha helix in the dark. However, when exposed to 477 nm (blue) light, AsLOV2 undergoes a conformational change and cannot bind the alpha helix.

Thus, LovTap is a trp repressor in the light and is not active in the dark.

Induction

In order to produce color a signal needs to be attached to pRM. This signal will be a T7 polymerase, which will activate a strong T7 promoter. Included on the transcript, along with the T7 promoter will be modified RFP (mRFP). Once the bacteria are exposed to light and the Select circuit is activated, the exposed bacteria should produce modified red fluorescent protein, which can be seen via the unaided eye. mRFP1 was derived from the Discosoma sp. fluorescent protein "DsRed"by direction evolution.

Issues

Basal transcription can also be a problem at the T7 promoter. T7 is a very strong promoter, so if basal transcription occurs we predict we will get intense color randomly.

We can test other, weaker promoters in T7’s place to see if we still get significant color intensity. Putting a weaker promoter should not significantly affect the color intensity because we have placed this promoter on a high copy plasmid to amplify as much as possible.

Issues

I. Input

Writing speed is probably the most important concern we will have in this project. We will need to test how long it takes for the bacteria to transcribe the genes and create the color. Seeing as how bacteria replicated very quickly (within half an hour), we predict that transcription occurs even faster since it is a process necessary for bacteria to replicate. Our guess is that this will not be too significant of a problem, envisioning the color to appear within a few minutes.

II. Processing

?

III. Output

The goal is to make the bacteria produce color in response to the light signal. The bacteria would be grown out into a lawn and then drawn on with the laser pointer and this drawing would appear in color, similar to drawing on a sketch pad. We are literally etching a sketch on the bacteria.

A concern is how long the bacteria will take to respond to the light and produce color. Moreover the bacteria should be sensitive enough so that only the bacteria that are exposed to the light should respond. Essentially there should be as little noise as possible in the coloring. A successful engineered Bacterial Etch-a-Sketch would allow a lawn of bacteria to be used as a sketch pad where we can draw on with a household laser pointer.

Depending on the application, this system has the ability to produce intracellular pigment when exposed to 477nm (blue) light. In the future, our bacteria could help solve problems that require a rapid response to light with a quick? visual output.

RUiGEM

Bacterial Etch-a-Sketch

iGEM 2011

Projects

Lab Notebook

BioSafety

Acknowledgements