Team:Queens-Canada/js/application

From 2010.igem.org

// Place your application-specific JavaScript functions and classes here // This file is automatically included by javascript_include_tag :defaults /*var cahnge_content = new Fx.Slide('demo2', { wait: false });

 $$('.section').each{
   function()
 }
 $('demo2run1').addEvent('click', function(){
   demo2effect.toggle('vertical');
 });
 $('demo2run2').addEvent('click', function(){
   demo2effect.toggle('horizontal');
 });*/
 

// Effect.Chain and Effect.Delayed Chain? // // Simply fires the Effect for multiple elements sequently (or delayed in the case of Delayed Chain?). // // Sample usage: // // // new Effect.Chain( // 'Fade', // The effect name // $$('div.test'), // an array of elements // { duration: 0.5 } // options for the effect itself // ); // // // new Effect.DelayedChain('Appear', $$('ul#test li'), { duration: 0.5 }, 100); // Fires an Effect.Appear for each element with a delay of 100 m


Effect.DelayedAppear = Class.create(); Object.extend(Effect.DelayedAppear.prototype, {

   initialize: function(elements, options, timeout){
       this.elements = elements;
       this.elements.each(function(element){ element.hide();});
       this.effect = 'Appear';
       this.timeout = timeout || 100;
       this.options = Object.extend({}, options || {});
       this.afterFinish = this.options.afterFinish || Prototype.emptyFunction;
       this.options.afterFinish = Prototype.emptyFunction;
       setTimeout(this.action.bind(this),1);
   },
   action: function() {
       if(this.elements.length){ 
           new Effect[this.effect](this.elements.shift(), this.options);
           setTimeout(this.action.bind(this), this.timeout);
       } else {
           if(this.afterFinish) this.afterFinish();
       }
   }

});


Effect.DelayedChain = Class.create(); Object.extend(Effect.DelayedChain.prototype, {

   initialize: function(effect, elements, options, timeout){
       this.elements = elements;
       this.effect = effect;
       this.timeout = timeout || 100;
       this.options = Object.extend({}, options || {});
       this.afterFinish = this.options.afterFinish || Prototype.emptyFunction;
       this.options.afterFinish = Prototype.emptyFunction;
       setTimeout(this.action.bind(this),1);
   },
   action: function() {
       if(this.elements.length){ 
           new Effect[this.effect](this.elements.shift(), this.options);
           setTimeout(this.action.bind(this), this.timeout);
       } else {
           if(this.afterFinish) this.afterFinish();
       }
   }

});

Effect.Chain = Class.create(); Object.extend(Effect.Chain.prototype, {

   initialize: function(effect, elements, options){
       this.elements = elements || [];
       this.effect = effect;
       this.options = options || {};
       this.afterFinish = this.options.afterFinish || Prototype.emptyFunction;
       this.options.afterFinish = this.nextEffect.bind(this);
       setTimeout(this.nextEffect.bind(this), 1);
   },
   nextEffect: function(){
       if(this.elements.length)
           new Effect[this.effect](this.elements.shift(), this.options);
       else
           this.afterFinish();
   }

});

// raplaces PNGs for internet explorer boring bug function replacePng(){

 // html attribute helper
 function htmlAttribute(attributeName, value){return ' '+attributeName+'="'+value+'" ';}
 
 version = parseFloat(navigator.appVersion.split("MSIE")[1]);
 if (version >= 5.5 && document.body.filters) {
     $$('img').each(function(image){
     name = image.src.split('?')[0];
     if ( name.substring(name.length-3, name.length).toLowerCase() == "png" ) {
       new_style = "display:inline-block;"
                   + image.style.cssText+";"
                   //+ (image.align.length)?";float:"+image.align+";":""
                   + (image.parentElement.href ? "cursor:hand;":"" )
                   + "width:"+image.width+"px; height:"+image.height+"px;"
                   + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                   + "(src=\'" + image.src + "\', sizingMethod='scale');";
       new_style = htmlAttribute('style', new_style);
       new_class = htmlAttribute('class',image.className);//singular, but gets all the classes
       new_id = htmlAttribute('id',image.id);
       new_title = htmlAttribute('title', image.title);
       new_alt = htmlAttribute('alt', image.alt);
       
       new_html = '';
 //      alert(new_html);
       Element.replace(image, new_html);
     }
   });
 }

}

function switchBackground() {

 ie = /MSIE/.test(navigator.userAgent);
 element = $('body');
 element.addClassName('white');
 if (ie) {
   new Effect.Fade("logo", {duration:0.2});
   setTimeout(function(){element.setStyle( {backgroundColor:'#ffffff'} );}, 600);
   setTimeout(function(){element.setStyle( {backgroundColor:'#cc6699'} );}, 500);
   setTimeout(function(){element.setStyle( {backgroundColor:'#99ccff'} );}, 400);
   setTimeout(function(){element.setStyle( {backgroundColor:'#006699'} );}, 300);
   setTimeout(function(){element.setStyle( {backgroundColor:'#003366'} );}, 200);
   setTimeout(function(){element.setStyle( {backgroundColor:'#000033'} );}, 100);
 } else {
   element.setStyle( {backgroundColor:'#000000'} );
   new Effect.Morph('body', {style:'background:#ffffff;'} );
 }

// return false; }

/* Add a new smooth transition with Effect. Transitions.slowstop. This transition starts very quickly, but comes to a gradual stop. Great for scrolling somewhere on a page with a duration of 2. sunsean

  • /

Effect.Transitions.slowstop = function(pos) {

 return 1-Math.pow(0.5,20*pos);

} /* Here is a custom effect that I made. It allows you to scroll inside an element that’s overflow is set to auto or scroll. Usage: new Effetc.Scroll(‘element-id’, {x: 10, y: 100});

  • /

Effect.Scroll = Class.create(); Object.extend(Object.extend(Effect.Scroll.prototype, Effect.Base.prototype), {

 initialize: function(element) {
   this.element = $(element);
   var options = Object.extend({
     x:    0,
     y:    0,
     mode: 'absolute'
   } , arguments[1] || {}  );
   this.start(options);
 },
 setup: function() {
   if (this.options.continuous && !this.element._ext ) {
     this.element.cleanWhitespace();
     this.element._ext=true;
     this.element.appendChild(this.element.firstChild);
   }
  
   this.originalLeft=this.element.scrollLeft;
   this.originalTop=this.element.scrollTop;
  
   if(this.options.mode == 'absolute') {
     this.options.x -= this.originalLeft;
     this.options.y -= this.originalTop;
   } else {
  
   }
 },
 update: function(position) {   
   this.element.scrollLeft = this.options.x * position + this.originalLeft;
   this.element.scrollTop  = this.options.y * position + this.originalTop;
 }

}); /* Effect.ScrollMod = Class.create(); Object.extend(Object.extend(Effect.Scroll.prototype, Effect.Base.prototype), {

 initialize: function(element) {
   this.element = $(element);
   var options = Object.extend({
     x:    0,
     y:    0,
     mode: 'absolute',
     targetElement: null
   } , arguments[1] || {}  );
   this.start(options);
 },
 setup: function() {
   this.targetElement = $(this.options.targetElement);
   Position.prepare();
   alert(Position.cumulativeOffset(this.targetElement));
   alert(Position.cumulativeOffset(this.element));
   //if (this.options.targetId != null){
     alert('true');
     Position.prepare();
     var offsets = Position.cumulativeOffset(this.targetElement)-Position.cumulativeOffset(this.element);
     this.options.x += offsets[0];
     this.options.y += offsets[1];
   //}
   
   if (this.options.continuous && !this.element._ext ) {
     this.element.cleanWhitespace();
     this.element._ext=true;
     this.element.appendChild(this.element.firstChild);
   }
  
   this.originalLeft=this.element.scrollLeft;
   this.originalTop=this.element.scrollTop;
  
   if(this.options.mode == 'absolute') {
     this.options.x -= this.originalLeft;
     this.options.y -= this.originalTop;
   } else {
  
   }
 },
 update: function(position) {   
   this.element.scrollLeft = this.options.x * position + this.originalLeft;
   this.element.scrollTop  = this.options.y * position + this.originalTop;
 }

});

Element.prototype = Object.extend(Element.prototype, {

 insideScrollTo: function(element, x, y) {
   element = $(element);
   var originalLeft = parseFloat(element.scrollLeft || '0');
   var originalTop = parseFloat(element.scrollTop || '0');
   element.scrollTop = y + this.originalTop;
   element.scrollLeft = x + this.originalLeft;
   return element;
 }

});

Effect.InsideScrollTo = 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));
 }

});*/