Team:Queens-Canada/head

From 2010.igem.org

(Difference between revisions)
 
(150 intermediate revisions not shown)
Line 1: Line 1:
__NOTOC__
__NOTOC__
<html>
<html>
-
<style>
+
<div id="bodyb">
-
#p-logo {
+
 
-
display: none;
+
<style type="text/css">
 +
 
 +
table, tr, td {
 +
background: none;
 +
line-height: 120%;
 +
color: #202020;
}
}
-
#search-controls {
+
blockquote {
-
display: none;
+
line-height: 120%;
 +
color: #404040;
}
}
-
a {
+
ul, ol, li {
-
color: #C0C0C0;
+
line-height: 120%;
 +
color: #202020;
}
}
-
a:hover {
+
.anchor {
-
color: #D0D0D0;
+
border: none;
 +
display: block;
 +
position: absolute;
 +
top: 0px;
 +
width: 5px;
 +
height: 5px;
 +
left: 0;
 +
z-index: 300;
}
}
-
a:active {
+
div#top-section, div#footer-box {
-
color: #FFFFFF;
+
display: none;
 +
height: 0px;
 +
background: none;
}
}
-
a:visited {
+
div#content {
-
color: #A0A0A0;
+
height: 0px;
 +
width: 100%;
 +
padding: 0px;
 +
margin: 0px;
 +
border: none;
 +
background: none;
}
}
-
a.new {
+
div#bodyb {
-
color: #FFC0C0;
+
margin: 0px;
}
}
-
a.new:hover {
+
div#bodyContent {
-
color: #FFD0D0;
+
height: 0px;
-
}
+
width: 100%;
-
a.new:active {
+
padding: 0px;
-
color: #FFE0E0;
+
border: none;
-
}
+
background: none;
-
a.new:visited {
+
font-size: 12pt;
-
color: #FFB0B0;
+
}
}
 +
div#globalWrapper {
 +
height: 0px;
 +
border: none;
 +
background: none;
 +
}
 +
html {
 +
margin: 0px;
 +
padding: 0px;
 +
}
body {
body {
-
background: #0e1523 url('https://static.igem.org/mediawiki/2010/5/51/Queens-Canada_Tile.gif') top center repeat-y;
+
background: #c7c7c7;
 +
margin: 0px;
 +
padding: 0px;
 +
font-family: Arial, Helvetica, sans-serif;
 +
color: #202020;
 +
font-size: 13pt;
 +
text-align: center;
 +
padding-left: 10px;
 +
padding-right: 10px;
}
}
-
h1, h2, h3, h4 {
+
h3#siteSub, div.printfooter {
-
color: #e5f6ff;
+
-
}
+
-
.firstHeading
+
-
{
+
-
color: #e5f6ff;
+
-
padding-left: 10px;
+
display: none;
display: none;
}
}
-
#content {
 
-
color: #e5f6ff;
 
-
background: inherit;
 
-
}
 
-
#footer-box {
 
-
color: #e5f6ff;
 
-
background: black;
 
-
}
 
-
</style>
 
-
<script type="text/javascript">
 
-
<!--
 
-
    function toggle_visibility(id) {
 
-
      var e = document.getElementById(id);
 
-
      if(e.style.display == 'block')
 
-
          e.style.display = 'none';
 
-
      else
 
-
          e.style.display = 'block';
 
-
    }
 
-
// script.aculo.us effects.js v1.7.0_beta1, Tue Nov 21 10:25:25 CET 2006
 
-
// Copyright (c) 2005, 2006 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
+
body {
-
// Contributors:
+
background: #e6e6e6;
-
//  Justin Palmer (http://encytemedia.com/)
+
text-align: left;
-
//  Mark Pilgrim (http://diveintomark.org/)
+
-
//  Martin Bialasinki
+
-
//
+
-
// script.aculo.us is freely distributable under the terms of an MIT-style license.
+
-
// For details, see the script.aculo.us web site: http://script.aculo.us/
+
-
 
+
-
// converts rgb() and #xxx to #xxxxxx format, 
+
-
// returns self (or first argument) if not convertable 
+
-
String.prototype.parseColor = function() { 
+
-
  var color = '#';
+
-
  if(this.slice(0,4) == 'rgb(') { 
+
-
    var cols = this.slice(4,this.length-1).split(','); 
+
-
    var i=0; do { color += parseInt(cols[i]).toColorPart() } while (++i<3); 
+
-
  } else { 
+
-
    if(this.slice(0,1) == '#') { 
+
-
      if(this.length==4) for(var i=1;i<4;i++) color += (this.charAt(i) + this.charAt(i)).toLowerCase(); 
+
-
      if(this.length==7) color = this.toLowerCase(); 
+
-
    } 
+
-
  } 
+
-
  return(color.length==7 ? color : (arguments[0] || this));
+
}
}
-
 
+
p {
-
/*--------------------------------------------------------------------------*/
+
line-height: 120%;
-
 
+
font-size: 13pt;
-
Element.collectTextNodes = function(element) { 
+
text-align: justify;
-
  return $A($(element).childNodes).collect( function(node) {
+
color: #404040;
-
    return (node.nodeType==3 ? node.nodeValue :  
+
-
      (node.hasChildNodes() ? Element.collectTextNodes(node) : ''));
+
-
  }).flatten().join('');
+
}
}
-
 
+
h1, h2, h3, h4 {
-
Element.collectTextNodesIgnoreClass = function(element, className) {
+
margin: 0px;
-
  return $A($(element).childNodes).collect( function(node) {
+
padding: 0px;
-
    return (node.nodeType==3 ? node.nodeValue :  
+
-
      (!(node.hasChildNodes() || !Element.hasClassName(node,className)) ?
+
-
        Element.collectTextNodesIgnoreClass(node, className) : ''));
+
-
  }).flatten().join('');
+
}
}
-
 
+
h1 {
-
Element.setContentZoom = function(element, percent) {
+
padding-top: 40px;
-
  element = $(element);
+
color: #707070;
-
  element.setStyle({fontSize: (percent/100) + 'em'});  
+
font-weight: bold;
-
  if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
+
border: none;
-
  return element;
+
}
}
-
 
+
h2 {
-
Element.getOpacity = function(element){
+
padding-top: 35px;
-
  element = $(element);
+
color: #757575;
-
  var opacity;
+
font-weight: bold;
-
  if (opacity = element.getStyle('opacity')) 
+
border: none;
-
    return parseFloat(opacity); 
+
-
  if (opacity = (element.getStyle('filter') || '').match(/alpha\(opacity=(.*)\)/)) 
+
-
    if(opacity[1]) return parseFloat(opacity[1]) / 100;
+
-
  return 1.0;
+
}
}
-
 
+
h1, h2 {
-
Element.setOpacity = function(element, value){
+
background: url('https://static.igem.org/mediawiki/2010/c/c5/Qgem_common_sep_tile.png') bottom repeat-x;
-
  element= $(element); 
+
-
  if (value == 1){
+
-
    element.setStyle({ opacity:  
+
-
      (!(/Gecko/.test(navigator.userAgent) || !/Konqueror|Safari|KHTML/.test(navigator.userAgent))) ?
+
-
      0.999999 : 1.0 });
+
-
    if(/MSIE/.test(navigator.userAgent) && !window.opera) 
+
-
      element.setStyle({filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')}); 
+
-
  } else { 
+
-
    if(value < 0.00001) value = 0; 
+
-
    element.setStyle({opacity: value});
+
-
    if(!(/MSIE/.test(navigator.userAgent) || !window.opera)) 
+
-
      element.setStyle(
+
-
        { filter: element.getStyle('filter').replace(/alpha\([^\)]*\)/gi,'') +
+
-
            'alpha(opacity='+value*100+')' }); 
+
-
  }
+
-
  return element;
+
-
} 
+
-
+
-
Element.getInlineOpacity = function(element){ 
+
-
  return $(element).style.opacity || '';
+
-
} 
+
-
 
+
-
Element.forceRerendering = function(element) {
+
-
  try {
+
-
    element = $(element);
+
-
    var n = document.createTextNode(' ');
+
-
    element.appendChild(n);
+
-
    element.removeChild(n);
+
-
  } catch(e) { }
+
-
};
+
-
 
+
-
/*--------------------------------------------------------------------------*/
+
-
 
+
-
Array.prototype.call = function() {
+
-
  var args = arguments;
+
-
  this.each(function(f){ f.apply(this, args) });
+
}
}
-
 
+
#contentnav {
-
/*--------------------------------------------------------------------------*/
+
line-height: 100%;
-
 
+
position: absolute;
-
var Effect = {
+
right: 0px;
-
  _elementDoesNotExistError: {
+
bottom: 4px;
-
    name: 'ElementDoesNotExistError',
+
display: block;
-
    message: 'The specified DOM element does not exist, but is required for this effect to operate'
+
font-size: 12pt;
-
  },
+
font-weight: normal;
-
  tagifyText: function(element) {
+
-
    if(typeof Builder == 'undefined')
+
-
      throw("Effect.tagifyText requires including script.aculo.us' builder.js library");
+
-
     
+
-
    var tagifyStyle = 'position:relative';
+
-
    if(/MSIE/.test(navigator.userAgent) && !window.opera) tagifyStyle += ';zoom:1';
+
-
   
+
-
    element = $(element);
+
-
    $A(element.childNodes).each( function(child) {
+
-
      if(child.nodeType==3) {
+
-
        child.nodeValue.toArray().each( function(character) {
+
-
          element.insertBefore(
+
-
            Builder.node('span',{style: tagifyStyle},
+
-
              character == ' ' ? String.fromCharCode(160) : character),
+
-
              child);
+
-
        });
+
-
        Element.remove(child);
+
-
      }
+
-
    });
+
-
  },
+
-
  multiple: function(element, effect) {
+
-
    var elements;
+
-
    if(((typeof element == 'object') ||
+
-
        (typeof element == 'function')) &&
+
-
      (element.length))
+
-
      elements = element;
+
-
    else
+
-
      elements = $(element).childNodes;
+
-
     
+
-
    var options = Object.extend({
+
-
      speed: 0.1,
+
-
      delay: 0.0
+
-
    }, arguments[2] || {});
+
-
    var masterDelay = options.delay;
+
-
 
+
-
    $A(elements).each( function(element, index) {
+
-
      new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay }));
+
-
    });
+
-
  },
+
-
  PAIRS: {
+
-
    'slide':  ['SlideDown','SlideUp'],
+
-
    'blind':  ['BlindDown','BlindUp'],
+
-
    'appear': ['Appear','Fade']
+
-
  },
+
-
  toggle: function(element, effect) {
+
-
    element = $(element);
+
-
    effect = (effect || 'appear').toLowerCase();
+
-
    var options = Object.extend({
+
-
      queue: { position:'end', scope:(element.id || 'global'), limit: 1 }
+
-
    }, arguments[2] || {});
+
-
    Effect[element.visible() ?
+
-
      Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options);
+
-
  }
+
-
};
+
-
 
+
-
var Effect2 = Effect; // deprecated
+
-
 
+
-
/* ------------- transitions ------------- */
+
-
 
+
-
Effect.Transitions = {
+
-
  linear: Prototype.K,
+
-
  sinoidal: function(pos) {
+
-
    return (-Math.cos(pos*Math.PI)/2) + 0.5;
+
-
  },
+
-
  reverse: function(pos) {
+
-
    return 1-pos;
+
-
  },
+
-
  flicker: function(pos) {
+
-
    return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4;
+
-
  },
+
-
  wobble: function(pos) {
+
-
    return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
+
-
  },
+
-
  pulse: function(pos, pulses) {
+
-
    pulses = pulses || 5;
+
-
    return (
+
-
      Math.round((pos % (1/pulses)) * pulses) == 0 ?
+
-
            ((pos * pulses * 2) - Math.floor(pos * pulses * 2)) :
+
-
        1 - ((pos * pulses * 2) - Math.floor(pos * pulses * 2))
+
-
      );
+
-
  },
+
-
  none: function(pos) {
+
-
    return 0;
+
-
  },
+
-
  full: function(pos) {
+
-
    return 1;
+
-
  }
+
-
};
+
-
 
+
-
/* ------------- core effects ------------- */
+
-
 
+
-
Effect.ScopedQueue = Class.create();
+
-
Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
+
-
  initialize: function() {
+
-
    this.effects  = [];
+
-
    this.interval = null;
+
-
  },
+
-
  _each: function(iterator) {
+
-
    this.effects._each(iterator);
+
-
  },
+
-
  add: function(effect) {
+
-
    var timestamp = new Date().getTime();
+
-
   
+
-
    var position = (typeof effect.options.queue == 'string') ?
+
-
      effect.options.queue : effect.options.queue.position;
+
-
   
+
-
    switch(position) {
+
-
      case 'front':
+
-
        // move unstarted effects after this effect 
+
-
        this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) {
+
-
            e.startOn  += effect.finishOn;
+
-
            e.finishOn += effect.finishOn;
+
-
          });
+
-
        break;
+
-
      case 'with-last':
+
-
        timestamp = this.effects.pluck('startOn').max() || timestamp;
+
-
        break;
+
-
      case 'end':
+
-
        // start effect after last queued effect has finished
+
-
        timestamp = this.effects.pluck('finishOn').max() || timestamp;
+
-
        break;
+
-
    }
+
-
   
+
-
    effect.startOn  += timestamp;
+
-
    effect.finishOn += timestamp;
+
-
 
+
-
    if(!effect.options.queue.limit || (this.effects.length < effect.options.queue.limit))
+
-
      this.effects.push(effect);
+
-
   
+
-
    if(!this.interval)
+
-
      this.interval = setInterval(this.loop.bind(this), 40);
+
-
  },
+
-
  remove: function(effect) {
+
-
    this.effects = this.effects.reject(function(e) { return e==effect });
+
-
    if(this.effects.length == 0) {
+
-
      clearInterval(this.interval);
+
-
      this.interval = null;
+
-
    }
+
-
  },
+
-
  loop: function() {
+
-
    var timePos = new Date().getTime();
+
-
    this.effects.invoke('loop', timePos);
+
-
  }
+
-
});
+
-
 
+
-
Effect.Queues = {
+
-
  instances: $H(),
+
-
  get: function(queueName) {
+
-
    if(typeof queueName != 'string') return queueName;
+
-
   
+
-
    if(!this.instances[queueName])
+
-
      this.instances[queueName] = new Effect.ScopedQueue();
+
-
     
+
-
    return this.instances[queueName];
+
-
  }
+
}
}
-
Effect.Queue = Effect.Queues.get('global');
+
h1, h2, h3, h4 {
-
 
+
display: block;
-
Effect.DefaultOptions = {
+
position: relative;
-
  transition: Effect.Transitions.sinoidal,
+
-
  duration:  1.0,   // seconds
+
-
  fps:        25.0, // max. 25fps due to Effect.Queue implementation
+
-
  sync:       false, // true for combining
+
-
  from:       0.0,
+
-
  to:        1.0,
+
-
  delay:      0.0,
+
-
  queue:      'parallel'
+
}
}
-
 
+
.return {
-
Effect.Base = function() {};
+
line-height: 100%;
-
Effect.Base.prototype = {
+
position: absolute;
-
  position: null,
+
right: 0px;
-
  start: function(options) {
+
bottom: 4px;
-
    this.options      = Object.extend(Object.extend({},Effect.DefaultOptions), options || {});
+
display: block;
-
    this.currentFrame = 0;
+
font-size: 12pt;
-
    this.state        = 'idle';
+
font-weight: normal;
-
    this.startOn      = this.options.delay*1000;
+
-
    this.finishOn    = this.startOn + (this.options.duration*1000);
+
-
    this.event('beforeStart');
+
-
    if(!this.options.sync)
+
-
      Effect.Queues.get(typeof this.options.queue == 'string' ?
+
-
        'global' : this.options.queue.scope).add(this);
+
-
  },
+
-
  loop: function(timePos) {
+
-
    if(timePos >= this.startOn) {
+
-
      if(timePos >= this.finishOn) {
+
-
        this.render(1.0);
+
-
        this.cancel();
+
-
        this.event('beforeFinish');
+
-
        if(this.finish) this.finish();
+
-
        this.event('afterFinish');
+
-
        return; 
+
-
      }
+
-
      var pos  = (timePos - this.startOn) / (this.finishOn - this.startOn);
+
-
      var frame = Math.round(pos * this.options.fps * this.options.duration);
+
-
      if(frame > this.currentFrame) {
+
-
        this.render(pos);
+
-
        this.currentFrame = frame;
+
-
      }
+
-
    }
+
-
  },
+
-
  render: function(pos) {
+
-
    if(this.state == 'idle') {
+
-
      this.state = 'running';
+
-
      this.event('beforeSetup');
+
-
      if(this.setup) this.setup();
+
-
      this.event('afterSetup');
+
-
    }
+
-
    if(this.state == 'running') {
+
-
      if(this.options.transition) pos = this.options.transition(pos);
+
-
      pos *= (this.options.to-this.options.from);
+
-
      pos += this.options.from;
+
-
      this.position = pos;
+
-
      this.event('beforeUpdate');
+
-
      if(this.update) this.update(pos);
+
-
      this.event('afterUpdate');
+
-
    }
+
-
  },
+
-
  cancel: function() {
+
-
    if(!this.options.sync)
+
-
      Effect.Queues.get(typeof this.options.queue == 'string' ?
+
-
        'global' : this.options.queue.scope).remove(this);
+
-
    this.state = 'finished';
+
-
  },
+
-
  event: function(eventName) {
+
-
    if(this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this);
+
-
    if(this.options[eventName]) this.options[eventName](this);
+
-
  },
+
-
  inspect: function() {
+
-
    return '#<Effect:' + $H(this).inspect() + ',options:' + $H(this.options).inspect() + '>';
+
-
  }
+
}
}
-
 
+
.section {
-
Effect.Parallel = Class.create();
+
overflow: hidden;
-
Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), {
+
margin: 0px;
-
  initialize: function(effects) {
+
/* border: 1px red solid; */
-
    this.effects = effects || [];
+
-
    this.start(arguments[1]);
+
-
  },
+
-
  update: function(position) {
+
-
    this.effects.invoke('render', position);
+
-
  },
+
-
  finish: function(position) {
+
-
    this.effects.each( function(effect) {
+
-
      effect.render(1.0);
+
-
      effect.cancel();
+
-
      effect.event('beforeFinish');
+
-
      if(effect.finish) effect.finish(position);
+
-
      effect.event('afterFinish');
+
-
    });
+
-
  }
+
-
});
+
-
 
+
-
Effect.Event = Class.create();
+
-
Object.extend(Object.extend(Effect.Event.prototype, Effect.Base.prototype), {
+
-
  initialize: function() {
+
-
    var options = Object.extend({
+
-
      duration: 0
+
-
    }, arguments[0] || {});
+
-
    this.start(options);
+
-
  },
+
-
  update: Prototype.emptyFunction
+
-
});
+
-
 
+
-
Effect.Opacity = Class.create();
+
-
Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
+
-
  initialize: function(element) {
+
-
    this.element = $(element);
+
-
    if(!this.element) throw(Effect._elementDoesNotExistError);
+
-
    // make this work on IE on elements without 'layout'
+
-
    if(/MSIE/.test(navigator.userAgent) && !window.opera && (!this.element.currentStyle.hasLayout))
+
-
      this.element.setStyle({zoom: 1});
+
-
    var options = Object.extend({
+
-
      from: this.element.getOpacity() || 0.0,
+
-
      to:  1.0
+
-
    }, arguments[1] || {});
+
-
    this.start(options);
+
-
  },
+
-
  update: function(position) {
+
-
    this.element.setOpacity(position);
+
-
  }
+
-
});
+
-
 
+
-
Effect.Move = Class.create();
+
-
Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), {
+
-
  initialize: function(element) {
+
-
    this.element = $(element);
+
-
    if(!this.element) throw(Effect._elementDoesNotExistError);
+
-
    var options = Object.extend({
+
-
      x:    0,
+
-
      y:    0,
+
-
      mode: 'relative'
+
-
    }, arguments[1] || {});
+
-
    this.start(options);
+
-
  },
+
-
  setup: function() {
+
-
    // Bug in Opera: Opera returns the "real" position of a static element or
+
-
    // relative element that does not have top/left explicitly set.
+
-
    // ==> Always set top and left for position relative elements in your stylesheets
+
-
    // (to 0 if you do not need them)
+
-
    this.element.makePositioned();
+
-
    this.originalLeft = parseFloat(this.element.getStyle('left') || '0');
+
-
    this.originalTop  = parseFloat(this.element.getStyle('top')  || '0');
+
-
    if(this.options.mode == 'absolute') {
+
-
      // absolute movement, so we need to calc deltaX and deltaY
+
-
      this.options.x = this.options.x - this.originalLeft;
+
-
      this.options.y = this.options.y - this.originalTop;
+
-
    }
+
-
  },
+
-
  update: function(position) {
+
-
    this.element.setStyle({
+
-
      left: Math.round(this.options.x  * position + this.originalLeft) + 'px',
+
-
      top: Math.round(this.options.y  * position + this.originalTop)  + 'px'
+
-
    });
+
-
  }
+
-
});
+
-
 
+
-
// for backwards compatibility
+
-
Effect.MoveBy = function(element, toTop, toLeft) {
+
-
  return new Effect.Move(element,
+
-
    Object.extend({ x: toLeft, y: toTop }, arguments[3] || {}));
+
-
};
+
-
 
+
-
Effect.Scale = Class.create();
+
-
Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
+
-
  initialize: function(element, percent) {
+
-
    this.element = $(element);
+
-
    if(!this.element) throw(Effect._elementDoesNotExistError);
+
-
    var options = Object.extend({
+
-
      scaleX: true,
+
-
      scaleY: true,
+
-
      scaleContent: true,
+
-
      scaleFromCenter: false,
+
-
      scaleMode: 'box',        // 'box' or 'contents' or {} with provided values
+
-
      scaleFrom: 100.0,
+
-
      scaleTo:  percent
+
-
    }, arguments[2] || {});
+
-
    this.start(options);
+
-
  },
+
-
  setup: function() {
+
-
    this.restoreAfterFinish = this.options.restoreAfterFinish || false;
+
-
    this.elementPositioning = this.element.getStyle('position');
+
-
   
+
-
    this.originalStyle = {};
+
-
    ['top','left','width','height','fontSize'].each( function(k) {
+
-
      this.originalStyle[k] = this.element.style[k];
+
-
    }.bind(this));
+
-
     
+
-
    this.originalTop  = this.element.offsetTop;
+
-
    this.originalLeft = this.element.offsetLeft;
+
-
   
+
-
    var fontSize = this.element.getStyle('font-size') || '100%';
+
-
    ['em','px','%','pt'].each( function(fontSizeType) {
+
-
      if(fontSize.indexOf(fontSizeType)>0) {
+
-
        this.fontSize    = parseFloat(fontSize);
+
-
        this.fontSizeType = fontSizeType;
+
-
      }
+
-
    }.bind(this));
+
-
   
+
-
    this.factor = (this.options.scaleTo - this.options.scaleFrom)/100;
+
-
   
+
-
    this.dims = null;
+
-
    if(this.options.scaleMode=='box')
+
-
      this.dims = [this.element.offsetHeight, this.element.offsetWidth];
+
-
    if(/^content/.test(this.options.scaleMode))
+
-
      this.dims = [this.element.scrollHeight, this.element.scrollWidth];
+
-
    if(!this.dims)
+
-
      this.dims = [this.options.scaleMode.originalHeight,
+
-
                  this.options.scaleMode.originalWidth];
+
-
  },
+
-
  update: function(position) {
+
-
    var currentScale = (this.options.scaleFrom/100.0) + (this.factor * position);
+
-
    if(this.options.scaleContent && this.fontSize)
+
-
      this.element.setStyle({fontSize: this.fontSize * currentScale + this.fontSizeType });
+
-
    this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale);
+
-
  },
+
-
  finish: function(position) {
+
-
    if(this.restoreAfterFinish) this.element.setStyle(this.originalStyle);
+
-
  },
+
-
  setDimensions: function(height, width) {
+
-
    var d = {};
+
-
    if(this.options.scaleX) d.width = Math.round(width) + 'px';
+
-
    if(this.options.scaleY) d.height = Math.round(height) + 'px';
+
-
    if(this.options.scaleFromCenter) {
+
-
      var topd  = (height - this.dims[0])/2;
+
-
      var leftd = (width  - this.dims[1])/2;
+
-
      if(this.elementPositioning == 'absolute') {
+
-
        if(this.options.scaleY) d.top = this.originalTop-topd + 'px';
+
-
        if(this.options.scaleX) d.left = this.originalLeft-leftd + 'px';
+
-
      } else {
+
-
        if(this.options.scaleY) d.top = -topd + 'px';
+
-
        if(this.options.scaleX) d.left = -leftd + 'px';
+
-
      }
+
-
    }
+
-
    this.element.setStyle(d);
+
-
  }
+
-
});
+
-
 
+
-
Effect.Highlight = Class.create();
+
-
Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), {
+
-
  initialize: function(element) {
+
-
    this.element = $(element);
+
-
    if(!this.element) throw(Effect._elementDoesNotExistError);
+
-
    var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || {});
+
-
    this.start(options);
+
-
  },
+
-
  setup: function() {
+
-
    // Prevent executing on elements not in the layout flow
+
-
    if(this.element.getStyle('display')=='none') { this.cancel(); return; }
+
-
    // Disable background image during the effect
+
-
    this.oldStyle = {
+
-
      backgroundImage: this.element.getStyle('background-image') };
+
-
    this.element.setStyle({backgroundImage: 'none'});
+
-
    if(!this.options.endcolor)
+
-
      this.options.endcolor = this.element.getStyle('background-color').parseColor('#ffffff');
+
-
    if(!this.options.restorecolor)
+
-
      this.options.restorecolor = this.element.getStyle('background-color');
+
-
    // init color calculations
+
-
    this._base  = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16) }.bind(this));
+
-
    this._delta = $R(0,2).map(function(i){ return parseInt(this.options.endcolor.slice(i*2+1,i*2+3),16)-this._base[i] }.bind(this));
+
-
  },
+
-
  update: function(position) {
+
-
    this.element.setStyle({backgroundColor: $R(0,2).inject('#',function(m,v,i){
+
-
      return m+(Math.round(this._base[i]+(this._delta[i]*position)).toColorPart()); }.bind(this)) });
+
-
  },
+
-
  finish: function() {
+
-
    this.element.setStyle(Object.extend(this.oldStyle, {
+
-
      backgroundColor: this.options.restorecolor
+
-
    }));
+
-
  }
+
-
});
+
-
 
+
-
Effect.ScrollTo = Class.create();
+
-
Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), {
+
-
  initialize: function(element) {
+
-
    this.element = $(element);
+
-
    this.start(arguments[1] || {});
+
-
  },
+
-
  setup: function() {
+
-
    Position.prepare();
+
-
    var offsets = Position.cumulativeOffset(this.element);
+
-
    if(this.options.offset) offsets[1] += this.options.offset;
+
-
    var max = window.innerHeight ?
+
-
      window.height - window.innerHeight :
+
-
      document.body.scrollHeight -
+
-
        (document.documentElement.clientHeight ?
+
-
          document.documentElement.clientHeight : document.body.clientHeight);
+
-
    this.scrollStart = Position.deltaY;
+
-
    this.delta = (offsets[1] > max ? max : offsets[1]) - this.scrollStart;
+
-
  },
+
-
  update: function(position) {
+
-
    Position.prepare();
+
-
    window.scrollTo(Position.deltaX,
+
-
      this.scrollStart + (position*this.delta));
+
-
  }
+
-
});
+
-
 
+
-
/* ------------- combination effects ------------- */
+
-
 
+
-
Effect.Fade = function(element) {
+
-
  element = $(element);
+
-
  var oldOpacity = element.getInlineOpacity();
+
-
  var options = Object.extend({
+
-
  from: element.getOpacity() || 1.0,
+
-
  to:  0.0,
+
-
  afterFinishInternal: function(effect) {
+
-
    if(effect.options.to!=0) return;
+
-
    effect.element.hide().setStyle({opacity: oldOpacity});
+
-
  }}, arguments[1] || {});
+
-
  return new Effect.Opacity(element,options);
+
}
}
-
 
+
.aside, .asideR, .asideL {
-
Effect.Appear = function(element) {
+
position: relative;
-
  element = $(element);
+
-
  var options = Object.extend({
+
-
  from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0),
+
-
  to:  1.0,
+
-
  // force Safari to render floated elements properly
+
-
  afterFinishInternal: function(effect) {
+
-
    effect.element.forceRerendering();
+
-
  },
+
-
  beforeSetup: function(effect) {
+
-
    effect.element.setOpacity(effect.options.from).show();
+
-
  }}, arguments[1] || {});
+
-
  return new Effect.Opacity(element,options);
+
}
}
-
 
+
.asideL { float: left; margin-right: 10px; }
-
Effect.Puff = function(element) {
+
.asideR { float: right; margin-left: 10px; }
-
  element = $(element);
+
.aside_tl, .aside_tr, .aside_t, .aside_l, .aside_r, .aside_bl, .aside_b, .aside_br {
-
  var oldStyle = {
+
position: absolute;
-
    opacity: element.getInlineOpacity(),
+
-
    position: element.getStyle('position'),
+
-
    top:  element.style.top,
+
-
    left: element.style.left,
+
-
    width: element.style.width,
+
-
    height: element.style.height
+
-
  };
+
-
  return new Effect.Parallel(
+
-
  [ new Effect.Scale(element, 200,
+
-
      { sync: true, scaleFromCenter: true, scaleContent: true, restoreAfterFinish: true }),
+
-
    new Effect.Opacity(element, { sync: true, to: 0.0 } ) ],  
+
-
    Object.extend({ duration: 1.0,  
+
-
      beforeSetupInternal: function(effect) {
+
-
        Position.absolutize(effect.effects[0].element)
+
-
      },
+
-
      afterFinishInternal: function(effect) {
+
-
        effect.effects[0].element.hide().setStyle(oldStyle); }
+
-
    }, arguments[1] || {})
+
-
  );
+
}
}
 +
.aside_tl, .aside_tr, .aside_t { height: 10px; top: 0px; }
 +
.aside_tl, .aside_bl, .aside_l { width: 14px; left: 0px; }
 +
.aside_tr, .aside_br, .aside_r { width: 13px; right: 0px; }
 +
.aside_bl, .aside_br, .aside_b { height: 11px; bottom: 0px; }
 +
.aside_m {
 +
margin-top: 10px;
 +
margin-left: 14px;
 +
margin-right: 13px;
 +
margin-bottom: 11px;
 +
line-height: 120%;
 +
color: #303030;
 +
background: url('https://static.igem.org/mediawiki/2010/6/67/Qgem_common_aside_m.png');
 +
}
 +
.aside_r, .aside_l { top: 10px; bottom: 11px; }
 +
.aside_t, .aside_b { left: 14px; right: 13px; }
 +
.aside_tl { background: url('https://static.igem.org/mediawiki/2010/1/1f/Qgem_common_aside_tl.png'); }
 +
.aside_t { background: url('https://static.igem.org/mediawiki/2010/4/4f/Qgem_common_aside_t.png'); }
 +
.aside_tr { background: url('https://static.igem.org/mediawiki/2010/6/64/Qgem_common_aside_tr.png'); }
 +
.aside_l { background: url('https://static.igem.org/mediawiki/2010/3/39/Qgem_common_aside_l.png'); }
 +
.aside_r { background: url('https://static.igem.org/mediawiki/2010/f/fd/Qgem_common_aside_r.png'); }
 +
.aside_bl { background: url('https://static.igem.org/mediawiki/2010/8/83/Qgem_common_aside_bl.png') bottom; }
 +
.aside_b { background: url('https://static.igem.org/mediawiki/2010/6/6a/Qgem_common_aside_b.png') bottom; }
 +
.aside_br { background: url('https://static.igem.org/mediawiki/2010/c/c4/Qgem_common_aside_br.png') bottom; }
-
Effect.BlindUp = function(element) {
+
#topbar_mix {
-
  element = $(element);
+
background: url('https://static.igem.org/mediawiki/2010/c/c5/Qgem_common_sep_tile.png') top repeat-x;
-
  element.makeClipping();
+
text-align: center;
-
  return new Effect.Scale(element, 0,
+
margin-top: 20px;
-
    Object.extend({ scaleContent: false,
+
padding-top: 20px;
-
      scaleX: false,
+
padding-bottom: 15px;
-
      restoreAfterFinish: true,
+
-
      afterFinishInternal: function(effect) {
+
-
        effect.element.hide().undoClipping();
+
-
      }
+
-
    }, arguments[1] || {})
+
-
  );
+
}
}
-
Effect.BlindDown = function(element) {
+
#topbar_mix ul {
-
  element = $(element);
+
list-style-type: none;
-
  var elementDimensions = element.getDimensions();
+
margin: 0px;
-
  return new Effect.Scale(element, 100, Object.extend({
+
padding: 0px;
-
    scaleContent: false,
+
margin-left: auto;
-
    scaleX: false,
+
margin-right: auto;
-
    scaleFrom: 0,
+
width: auto;
-
    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
+
display: inline;
-
    restoreAfterFinish: true,
+
text-align: center;
-
    afterSetup: function(effect) {
+
-
      effect.element.makeClipping().setStyle({height: '0px'}).show();  
+
-
    }, 
+
-
    afterFinishInternal: function(effect) {
+
-
      effect.element.undoClipping();
+
-
    }
+
-
  }, arguments[1] || {}));
+
}
}
-
Effect.SwitchOff = function(element) {
+
#topbar_mix li {
-
  element = $(element);
+
display: inline;
-
  var oldOpacity = element.getInlineOpacity();
+
padding-left: 15px;
-
  return new Effect.Appear(element, Object.extend({
+
padding-right: 15px;
-
    duration: 0.4,
+
-
    from: 0,
+
-
    transition: Effect.Transitions.flicker,
+
-
    afterFinishInternal: function(effect) {
+
-
      new Effect.Scale(effect.element, 1, {
+
-
        duration: 0.3, scaleFromCenter: true,
+
-
        scaleX: false, scaleContent: false, restoreAfterFinish: true,
+
-
        beforeSetup: function(effect) {
+
-
          effect.element.makePositioned().makeClipping();
+
-
        },
+
-
        afterFinishInternal: function(effect) {
+
-
          effect.element.hide().undoClipping().undoPositioned().setStyle({opacity: oldOpacity});
+
-
        }
+
-
      })
+
-
    }
+
-
  }, arguments[1] || {}));
+
}
}
-
 
+
.firstHeading {
-
Effect.DropOut = function(element) {
+
display: none;
-
  element = $(element);
+
-
  var oldStyle = {
+
-
    top: element.getStyle('top'),
+
-
    left: element.getStyle('left'),
+
-
    opacity: element.getInlineOpacity() };
+
-
  return new Effect.Parallel(
+
-
    [ new Effect.Move(element, {x: 0, y: 100, sync: true }),
+
-
      new Effect.Opacity(element, { sync: true, to: 0.0 }) ],
+
-
    Object.extend(
+
-
      { duration: 0.5,
+
-
        beforeSetup: function(effect) {
+
-
          effect.effects[0].element.makePositioned();
+
-
        },
+
-
        afterFinishInternal: function(effect) {
+
-
          effect.effects[0].element.hide().undoPositioned().setStyle(oldStyle);
+
-
        }
+
-
      }, arguments[1] || {}));
+
}
}
 +
</style>
-
Effect.Shake = function(element) {
+
<style type="text/css">
-
  element = $(element);
+
/* your table sorter is like screaming into a wind tunnel */
-
  var oldStyle = {
+
table.pgrouptable {
-
    top: element.getStyle('top'),
+
background: none !important;
-
    left: element.getStyle('left') };
+
border-width: 0px !important;
-
    return new Effect.Move(element,
+
}
-
      { x:  20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
+
table.pgrouptable th {
-
    new Effect.Move(effect.element,
+
background: none !important;
-
      { x: -40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
+
border-width: 0px !important;
-
    new Effect.Move(effect.element,
+
border-bottom: 1px #b0b0b0 solid !important;
-
      { x:  40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
+
color: #404040 !important;
-
    new Effect.Move(effect.element,
+
}
-
      { x: -40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
+
table.pgrouptable td {
-
    new Effect.Move(effect.element,
+
background: none !important;
-
      { x:  40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
+
border-width: 0px !important;
-
    new Effect.Move(effect.element,
+
border-bottom: 1px #c8c8c8 solid !important;
-
      { x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
+
color: #404040 !important;
-
        effect.element.undoPositioned().setStyle(oldStyle);
+
}
-
  }}) }}) }}) }}) }}) }});
+
</style>
-
}
+
-
 
+
-
Effect.SlideDown = function(element) {
+
-
  element = $(element).cleanWhitespace();
+
-
  // SlideDown need to have the content of the element wrapped in a container element with fixed height!
+
-
  var oldInnerBottom = element.down().getStyle('bottom');
+
-
  var elementDimensions = element.getDimensions();
+
-
  return new Effect.Scale(element, 100, Object.extend({
+
-
    scaleContent: false,
+
-
    scaleX: false,
+
-
    scaleFrom: window.opera ? 0 : 1,
+
-
    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
+
-
    restoreAfterFinish: true,
+
-
    afterSetup: function(effect) {
+
-
      effect.element.makePositioned();
+
-
      effect.element.down().makePositioned();
+
-
      if(window.opera) effect.element.setStyle({top: ''});
+
-
      effect.element.makeClipping().setStyle({height: '0px'}).show();
+
-
    },
+
-
    afterUpdateInternal: function(effect) {
+
-
      effect.element.down().setStyle({bottom:
+
-
        (effect.dims[0] - effect.element.clientHeight) + 'px' });
+
-
    },
+
-
    afterFinishInternal: function(effect) {
+
-
      effect.element.undoClipping().undoPositioned();
+
-
      effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom}); }
+
-
    }, arguments[1] || {})
+
-
  );
+
-
}
+
-
 
+
-
Effect.SlideUp = function(element) {
+
-
  element = $(element).cleanWhitespace();
+
-
  var oldInnerBottom = element.down().getStyle('bottom');
+
-
  return new Effect.Scale(element, window.opera ? 0 : 1,
+
-
  Object.extend({ scaleContent: false,
+
-
    scaleX: false,
+
-
    scaleMode: 'box',
+
-
    scaleFrom: 100,
+
-
    restoreAfterFinish: true,
+
-
    beforeStartInternal: function(effect) {
+
-
      effect.element.makePositioned();
+
-
      effect.element.down().makePositioned();
+
-
      if(window.opera) effect.element.setStyle({top: ''});
+
-
      effect.element.makeClipping().show();
+
-
    }, 
+
-
    afterUpdateInternal: function(effect) {
+
-
      effect.element.down().setStyle({bottom:
+
-
        (effect.dims[0] - effect.element.clientHeight) + 'px' });
+
-
    },
+
-
    afterFinishInternal: function(effect) {
+
-
      effect.element.hide().undoClipping().undoPositioned().setStyle({bottom: oldInnerBottom});
+
-
      effect.element.down().undoPositioned();
+
-
    }
+
-
  }, arguments[1] || {})
+
-
  );
+
-
}
+
-
 
+
-
// Bug in opera makes the TD containing this element expand for a instance after finish
+
-
Effect.Squish = function(element) {
+
-
  return new Effect.Scale(element, window.opera ? 1 : 0, {
+
-
    restoreAfterFinish: true,
+
-
    beforeSetup: function(effect) {
+
-
      effect.element.makeClipping();  
+
-
    }, 
+
-
    afterFinishInternal: function(effect) {
+
-
      effect.element.hide().undoClipping();
+
-
    }
+
-
  });
+
-
}
+
-
 
+
-
Effect.Grow = function(element) {
+
-
  element = $(element);
+
-
  var options = Object.extend({
+
-
    direction: 'center',
+
-
    moveTransition: Effect.Transitions.sinoidal,
+
-
    scaleTransition: Effect.Transitions.sinoidal,
+
-
    opacityTransition: Effect.Transitions.full
+
-
  }, arguments[1] || {});
+
-
  var oldStyle = {
+
-
    top: element.style.top,
+
-
    left: element.style.left,
+
-
    height: element.style.height,
+
-
    width: element.style.width,
+
-
    opacity: element.getInlineOpacity() };
+
-
 
+
-
  var dims = element.getDimensions();   
+
-
  var initialMoveX, initialMoveY;
+
-
  var moveX, moveY;
+
-
 
+
-
  switch (options.direction) {
+
-
    case 'top-left':
+
-
      initialMoveX = initialMoveY = moveX = moveY = 0;
+
-
      break;
+
-
    case 'top-right':
+
-
      initialMoveX = dims.width;
+
-
      initialMoveY = moveY = 0;
+
-
      moveX = -dims.width;
+
-
      break;
+
-
    case 'bottom-left':
+
-
      initialMoveX = moveX = 0;
+
-
      initialMoveY = dims.height;
+
-
      moveY = -dims.height;
+
-
      break;
+
-
    case 'bottom-right':
+
-
      initialMoveX = dims.width;
+
-
      initialMoveY = dims.height;
+
-
      moveX = -dims.width;
+
-
      moveY = -dims.height;
+
-
      break;
+
-
    case 'center':
+
-
      initialMoveX = dims.width / 2;
+
-
      initialMoveY = dims.height / 2;
+
-
      moveX = -dims.width / 2;
+
-
      moveY = -dims.height / 2;
+
-
      break;
+
-
  }
+
-
 
+
-
  return new Effect.Move(element, {
+
-
    x: initialMoveX,
+
-
    y: initialMoveY,
+
-
    duration: 0.01,
+
-
    beforeSetup: function(effect) {
+
-
      effect.element.hide().makeClipping().makePositioned();
+
-
    },
+
-
    afterFinishInternal: function(effect) {
+
-
      new Effect.Parallel(
+
-
        [ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
+
-
          new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
+
-
          new Effect.Scale(effect.element, 100, {
+
-
            scaleMode: { originalHeight: dims.height, originalWidth: dims.width },
+
-
            sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
+
-
        ], Object.extend({
+
-
            beforeSetup: function(effect) {
+
-
              effect.effects[0].element.setStyle({height: '0px'}).show();  
+
-
            },
+
-
            afterFinishInternal: function(effect) {
+
-
              effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle);
+
-
            }
+
-
          }, options)
+
-
      )
+
-
    }
+
-
  });
+
-
}
+
-
 
+
-
Effect.Shrink = function(element) {
+
-
  element = $(element);
+
-
  var options = Object.extend({
+
-
    direction: 'center',
+
-
    moveTransition: Effect.Transitions.sinoidal,
+
-
    scaleTransition: Effect.Transitions.sinoidal,
+
-
    opacityTransition: Effect.Transitions.none
+
-
  }, arguments[1] || {});
+
-
  var oldStyle = {
+
-
    top: element.style.top,
+
-
    left: element.style.left,
+
-
    height: element.style.height,
+
-
    width: element.style.width,
+
-
    opacity: element.getInlineOpacity() };
+
-
 
+
-
  var dims = element.getDimensions();
+
-
  var moveX, moveY;
+
-
 
+
-
  switch (options.direction) {
+
-
    case 'top-left':
+
-
      moveX = moveY = 0;
+
-
      break;
+
-
    case 'top-right':
+
-
      moveX = dims.width;
+
-
      moveY = 0;
+
-
      break;
+
-
    case 'bottom-left':
+
-
      moveX = 0;
+
-
      moveY = dims.height;
+
-
      break;
+
-
    case 'bottom-right':
+
-
      moveX = dims.width;
+
-
      moveY = dims.height;
+
-
      break;
+
-
    case 'center': 
+
-
      moveX = dims.width / 2;
+
-
      moveY = dims.height / 2;
+
-
      break;
+
-
  }
+
-
 
+
-
  return new Effect.Parallel(
+
-
    [ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }),
+
-
      new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}),
+
-
      new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition })
+
-
    ], Object.extend({           
+
-
        beforeStartInternal: function(effect) {
+
-
          effect.effects[0].element.makePositioned().makeClipping();  
+
-
        },
+
-
        afterFinishInternal: function(effect) {
+
-
          effect.effects[0].element.hide().undoClipping().undoPositioned().setStyle(oldStyle); }
+
-
      }, options)
+
-
  );
+
-
}
+
-
 
+
-
Effect.Pulsate = function(element) {
+
-
  element = $(element);
+
-
  var options    = arguments[1] || {};
+
-
  var oldOpacity = element.getInlineOpacity();
+
-
  var transition = options.transition || Effect.Transitions.sinoidal;
+
-
  var reverser  = function(pos){ return transition(1-Effect.Transitions.pulse(pos, options.pulses)) };
+
-
  reverser.bind(transition);
+
-
  return new Effect.Opacity(element,
+
-
    Object.extend(Object.extend({  duration: 2.0, from: 0,
+
-
      afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); }
+
-
    }, options), {transition: reverser}));
+
-
}
+
-
 
+
-
Effect.Fold = function(element) {
+
-
  element = $(element);
+
-
  var oldStyle = {
+
-
    top: element.style.top,
+
-
    left: element.style.left,
+
-
    width: element.style.width,
+
-
    height: element.style.height };
+
-
  element.makeClipping();
+
-
  return new Effect.Scale(element, 5, Object.extend({ 
+
-
    scaleContent: false,
+
-
    scaleX: false,
+
-
    afterFinishInternal: function(effect) {
+
-
    new Effect.Scale(element, 1, {
+
-
      scaleContent: false,
+
-
      scaleY: false,
+
-
      afterFinishInternal: function(effect) {
+
-
        effect.element.hide().undoClipping().setStyle(oldStyle);
+
-
      } });
+
-
  }}, arguments[1] || {}));
+
-
};
+
-
 
+
-
Effect.Morph = Class.create();
+
-
Object.extend(Object.extend(Effect.Morph.prototype, Effect.Base.prototype), {
+
-
  initialize: function(element) {
+
-
    this.element = $(element);
+
-
    if(!this.element) throw(Effect._elementDoesNotExistError);
+
-
    var options = Object.extend({
+
-
      style: ''
+
-
    }, arguments[1] || {});
+
-
    this.start(options);
+
-
  },
+
-
  setup: function(){
+
-
    function parseColor(color){
+
-
      if(!color || ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff';
+
-
      color = color.parseColor();
+
-
      return $R(0,2).map(function(i){
+
-
        return parseInt( color.slice(i*2+1,i*2+3), 16 )
+
-
      });
+
-
    }
+
-
    this.transforms = this.options.style.parseStyle().map(function(property){
+
-
      var originalValue = this.element.getStyle(property[0]);
+
-
      return $H({
+
-
        style: property[0],
+
-
        originalValue: property[1].unit=='color' ?
+
-
          parseColor(originalValue) : parseFloat(originalValue || 0),
+
-
        targetValue: property[1].unit=='color' ?
+
-
          parseColor(property[1].value) : property[1].value,
+
-
        unit: property[1].unit
+
-
      });
+
-
    }.bind(this)).reject(function(transform){
+
-
      return (
+
-
        (transform.originalValue == transform.targetValue) ||
+
-
        (
+
-
          transform.unit != 'color' &&
+
-
          (isNaN(transform.originalValue) || isNaN(transform.targetValue))
+
-
        )
+
-
      )
+
-
    });
+
-
  },
+
-
  update: function(position) {
+
-
    var style = $H(), value = null;
+
-
    this.transforms.each(function(transform){
+
-
      value = transform.unit=='color' ?
+
-
        $R(0,2).inject('#',function(m,v,i){
+
-
          return m+(Math.round(transform.originalValue[i]+
+
-
            (transform.targetValue[i] - transform.originalValue[i])*position)).toColorPart() }) :  
+
-
        transform.originalValue + Math.round(
+
-
          ((transform.targetValue - transform.originalValue) * position) * 1000)/1000 + transform.unit;
+
-
      style[transform.style] = value;
+
-
    });
+
-
    this.element.setStyle(style);
+
-
  }
+
-
});
+
-
 
+
-
Effect.Transform = Class.create();
+
-
Object.extend(Effect.Transform.prototype, {
+
-
  initialize: function(tracks){
+
-
    this.tracks  = [];
+
-
    this.options = arguments[1] || {};
+
-
    this.addTracks(tracks);
+
-
  },
+
-
  addTracks: function(tracks){
+
-
    tracks.each(function(track){
+
-
      var data = $H(track).values().first();
+
-
      this.tracks.push($H({
+
-
        ids:    $H(track).keys().first(),
+
-
        effect:  Effect.Morph,
+
-
        options: { style: data }
+
-
      }));
+
-
    }.bind(this));
+
-
    return this;
+
-
  },
+
-
  play: function(){
+
-
    return new Effect.Parallel(
+
-
      this.tracks.map(function(track){
+
-
        var elements = [$(track.ids) || $$(track.ids)].flatten();
+
-
        return elements.map(function(e){ return new track.effect(e, Object.extend({ sync:true }, track.options)) });
+
-
      }).flatten(),
+
-
      this.options
+
-
    );
+
-
  }
+
-
});
+
-
 
+
-
Element.CSS_PROPERTIES = ['azimuth', 'backgroundAttachment', 'backgroundColor', 'backgroundImage',
+
-
  'backgroundPosition', 'backgroundRepeat', 'borderBottomColor', 'borderBottomStyle',
+
-
  'borderBottomWidth', 'borderCollapse', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth',
+
-
  'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderSpacing', 'borderTopColor',
+
-
  'borderTopStyle', 'borderTopWidth', 'bottom', 'captionSide', 'clear', 'clip', 'color', 'content',
+
-
  'counterIncrement', 'counterReset', 'cssFloat', 'cueAfter', 'cueBefore', 'cursor', 'direction',
+
-
  'display', 'elevation', 'emptyCells', 'fontFamily', 'fontSize', 'fontSizeAdjust', 'fontStretch',
+
-
  'fontStyle', 'fontVariant', 'fontWeight', 'height', 'left', 'letterSpacing', 'lineHeight',
+
-
  'listStyleImage', 'listStylePosition', 'listStyleType', 'marginBottom', 'marginLeft', 'marginRight',
+
-
  'marginTop', 'markerOffset', 'marks', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'opacity',
+
-
  'orphans', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'overflowX', 'overflowY',
+
-
  'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'page', 'pageBreakAfter', 'pageBreakBefore',
+
-
  'pageBreakInside', 'pauseAfter', 'pauseBefore', 'pitch', 'pitchRange', 'position', 'quotes',
+
-
  'richness', 'right', 'size', 'speakHeader', 'speakNumeral', 'speakPunctuation', 'speechRate', 'stress',
+
-
  'tableLayout', 'textAlign', 'textDecoration', 'textIndent', 'textShadow', 'textTransform', 'top',
+
-
  'unicodeBidi', 'verticalAlign', 'visibility', 'voiceFamily', 'volume', 'whiteSpace', 'widows',
+
-
  'width', 'wordSpacing', 'zIndex'];
+
-
 
+
-
Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/;
+
-
 
+
-
String.prototype.parseStyle = function(){
+
-
  var element = Element.extend(document.createElement('div'));
+
-
  element.innerHTML = '<div style="' + this + '"></div>';
+
-
  var style = element.down().style, styleRules = $H();
+
-
 
+
-
  Element.CSS_PROPERTIES.each(function(property){
+
-
  if(style[property]) styleRules[property] = style[property];
+
-
  });
+
-
 
+
-
  var result = $H();
+
-
 
+
-
  styleRules.each(function(pair){
+
-
    var property = pair[0], value = pair[1], unit = null;
+
-
   
+
-
    if(value.parseColor('#zzzzzz') != '#zzzzzz') {
+
-
      value = value.parseColor();
+
-
      unit  = 'color';
+
-
    } else if(Element.CSS_LENGTH.test(value))
+
-
      var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/),
+
-
          value = parseFloat(components[1]), unit = (components.length == 3) ? components[2] : null;
+
-
   
+
-
    result[property.underscore().dasherize()] = $H({ value:value, unit:unit });
+
-
  }.bind(this));
+
-
 
+
-
  return result;
+
-
};
+
-
 
+
-
Element.morph = function(element, style) {
+
-
  new Effect.Morph(element, Object.extend({ style: style }, arguments[2] || {}));
+
-
  return element;
+
-
};
+
-
 
+
-
['setOpacity','getOpacity','getInlineOpacity','forceRerendering','setContentZoom',
+
-
'collectTextNodes','collectTextNodesIgnoreClass','morph'].each(
+
-
  function(f) { Element.Methods[f] = Element[f]; }
+
-
);
+
-
 
+
-
Element.Methods.visualEffect = function(element, effect, options) {
+
-
  s = effect.gsub(/_/, '-').camelize();
+
-
  effect_class = s.charAt(0).toUpperCase() + s.substring(1);
+
-
  new Effect[effect_class](element, options);
+
-
  return $(element);
+
-
};
+
-
 
+
-
Element.addMethods();
+
-
 
+
-
function moveTo(container, element) {
+
-
  Position.prepare();
+
-
  container_y = Position.cumulativeOffset($(container))[1]
+
-
  element_y = Position.cumulativeOffset($(element))[1]
+
-
  new Effect.Scroll(container, {x:0, y:(element_y-container_y)});
+
-
  return false;
+
-
}
+
-
//-->
+
<script type="text/javascript" src="/wiki/index.php?title=Team:Queens-Canada/common/content.js&action=raw&ctype=text/javascript"></script>
-
</script>
+
</html>
</html>

Latest revision as of 18:39, 26 October 2010

Retrieved from "http://2010.igem.org/Team:Queens-Canada/head"