]> git.openstreetmap.org Git - rails.git/blob - public/javascripts/effects.js
Potlatch-on-Rails, ready to go (fingers crossed)
[rails.git] / public / javascripts / effects.js
1 // Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
2 // Contributors:
3 //  Justin Palmer (http://encytemedia.com/)
4 //  Mark Pilgrim (http://diveintomark.org/)
5 //  Martin Bialasinki
6 // 
7 // See scriptaculous.js for full license.  
8
9 // converts rgb() and #xxx to #xxxxxx format,  
10 // returns self (or first argument) if not convertable  
11 String.prototype.parseColor = function() {  
12   var color = '#';  
13   if(this.slice(0,4) == 'rgb(') {  
14     var cols = this.slice(4,this.length-1).split(',');  
15     var i=0; do { color += parseInt(cols[i]).toColorPart() } while (++i<3);  
16   } else {  
17     if(this.slice(0,1) == '#') {  
18       if(this.length==4) for(var i=1;i<4;i++) color += (this.charAt(i) + this.charAt(i)).toLowerCase();  
19       if(this.length==7) color = this.toLowerCase();  
20     }  
21   }  
22   return(color.length==7 ? color : (arguments[0] || this));  
23 }
24
25 /*--------------------------------------------------------------------------*/
26
27 Element.collectTextNodes = function(element) {  
28   return $A($(element).childNodes).collect( function(node) {
29     return (node.nodeType==3 ? node.nodeValue : 
30       (node.hasChildNodes() ? Element.collectTextNodes(node) : ''));
31   }).flatten().join('');
32 }
33
34 Element.collectTextNodesIgnoreClass = function(element, className) {  
35   return $A($(element).childNodes).collect( function(node) {
36     return (node.nodeType==3 ? node.nodeValue : 
37       ((node.hasChildNodes() && !Element.hasClassName(node,className)) ? 
38         Element.collectTextNodesIgnoreClass(node, className) : ''));
39   }).flatten().join('');
40 }
41
42 Element.setContentZoom = function(element, percent) {
43   element = $(element);  
44   Element.setStyle(element, {fontSize: (percent/100) + 'em'});   
45   if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
46 }
47
48 Element.getOpacity = function(element){  
49   var opacity;
50   if (opacity = Element.getStyle(element, 'opacity'))  
51     return parseFloat(opacity);  
52   if (opacity = (Element.getStyle(element, 'filter') || '').match(/alpha\(opacity=(.*)\)/))  
53     if(opacity[1]) return parseFloat(opacity[1]) / 100;  
54   return 1.0;  
55 }
56
57 Element.setOpacity = function(element, value){  
58   element= $(element);  
59   if (value == 1){
60     Element.setStyle(element, { opacity: 
61       (/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ? 
62       0.999999 : null });
63     if(/MSIE/.test(navigator.userAgent))  
64       Element.setStyle(element, {filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')});  
65   } else {  
66     if(value < 0.00001) value = 0;  
67     Element.setStyle(element, {opacity: value});
68     if(/MSIE/.test(navigator.userAgent))  
69      Element.setStyle(element, 
70        { filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') +
71                  'alpha(opacity='+value*100+')' });  
72   }
73 }  
74  
75 Element.getInlineOpacity = function(element){  
76   return $(element).style.opacity || '';
77 }  
78
79 Element.childrenWithClassName = function(element, className, findFirst) {
80   var classNameRegExp = new RegExp("(^|\\s)" + className + "(\\s|$)");
81   var results = $A($(element).getElementsByTagName('*'))[findFirst ? 'detect' : 'select']( function(c) { 
82     return (c.className && c.className.match(classNameRegExp));
83   });
84   if(!results) results = [];
85   return results;
86 }
87
88 Element.forceRerendering = function(element) {
89   try {
90     element = $(element);
91     var n = document.createTextNode(' ');
92     element.appendChild(n);
93     element.removeChild(n);
94   } catch(e) { }
95 };
96
97 /*--------------------------------------------------------------------------*/
98
99 Array.prototype.call = function() {
100   var args = arguments;
101   this.each(function(f){ f.apply(this, args) });
102 }
103
104 /*--------------------------------------------------------------------------*/
105
106 var Effect = {
107   tagifyText: function(element) {
108     var tagifyStyle = 'position:relative';
109     if(/MSIE/.test(navigator.userAgent)) tagifyStyle += ';zoom:1';
110     element = $(element);
111     $A(element.childNodes).each( function(child) {
112       if(child.nodeType==3) {
113         child.nodeValue.toArray().each( function(character) {
114           element.insertBefore(
115             Builder.node('span',{style: tagifyStyle},
116               character == ' ' ? String.fromCharCode(160) : character), 
117               child);
118         });
119         Element.remove(child);
120       }
121     });
122   },
123   multiple: function(element, effect) {
124     var elements;
125     if(((typeof element == 'object') || 
126         (typeof element == 'function')) && 
127        (element.length))
128       elements = element;
129     else
130       elements = $(element).childNodes;
131       
132     var options = Object.extend({
133       speed: 0.1,
134       delay: 0.0
135     }, arguments[2] || {});
136     var masterDelay = options.delay;
137
138     $A(elements).each( function(element, index) {
139       new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay }));
140     });
141   },
142   PAIRS: {
143     'slide':  ['SlideDown','SlideUp'],
144     'blind':  ['BlindDown','BlindUp'],
145     'appear': ['Appear','Fade']
146   },
147   toggle: function(element, effect) {
148     element = $(element);
149     effect = (effect || 'appear').toLowerCase();
150     var options = Object.extend({
151       queue: { position:'end', scope:(element.id || 'global'), limit: 1 }
152     }, arguments[2] || {});
153     Effect[element.visible() ? 
154       Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options);
155   }
156 };
157
158 var Effect2 = Effect; // deprecated
159
160 /* ------------- transitions ------------- */
161
162 Effect.Transitions = {}
163
164 Effect.Transitions.linear = function(pos) {
165   return pos;
166 }
167 Effect.Transitions.sinoidal = function(pos) {
168   return (-Math.cos(pos*Math.PI)/2) + 0.5;
169 }
170 Effect.Transitions.reverse  = function(pos) {
171   return 1-pos;
172 }
173 Effect.Transitions.flicker = function(pos) {
174   return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4;
175 }
176 Effect.Transitions.wobble = function(pos) {
177   return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
178 }
179 Effect.Transitions.pulse = function(pos) {
180   return (Math.floor(pos*10) % 2 == 0 ? 
181     (pos*10-Math.floor(pos*10)) : 1-(pos*10-Math.floor(pos*10)));
182 }
183 Effect.Transitions.none = function(pos) {
184   return 0;
185 }
186 Effect.Transitions.full = function(pos) {
187   return 1;
188 }
189
190 /* ------------- core effects ------------- */
191
192 Effect.ScopedQueue = Class.create();
193 Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
194   initialize: function() {
195     this.effects  = [];
196     this.interval = null;
197   },
198   _each: function(iterator) {
199     this.effects._each(iterator);
200   },
201   add: function(effect) {
202     var timestamp = new Date().getTime();
203     
204     var position = (typeof effect.options.queue == 'string') ? 
205       effect.options.queue : effect.options.queue.position;
206     
207     switch(position) {
208       case 'front':
209         // move unstarted effects after this effect  
210         this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) {
211             e.startOn  += effect.finishOn;
212             e.finishOn += effect.finishOn;
213           });
214         break;
215       case 'end':
216         // start effect after last queued effect has finished
217         timestamp = this.effects.pluck('finishOn').max() || timestamp;
218         break;
219     }
220     
221     effect.startOn  += timestamp;
222     effect.finishOn += timestamp;
223
224     if(!effect.options.queue.limit || (this.effects.length < effect.options.queue.limit))
225       this.effects.push(effect);
226     
227     if(!this.interval) 
228       this.interval = setInterval(this.loop.bind(this), 40);
229   },
230   remove: function(effect) {
231     this.effects = this.effects.reject(function(e) { return e==effect });
232     if(this.effects.length == 0) {
233       clearInterval(this.interval);
234       this.interval = null;
235     }
236   },
237   loop: function() {
238     var timePos = new Date().getTime();
239     this.effects.invoke('loop', timePos);
240   }
241 });
242
243 Effect.Queues = {
244   instances: $H(),
245   get: function(queueName) {
246     if(typeof queueName != 'string') return queueName;
247     
248     if(!this.instances[queueName])
249       this.instances[queueName] = new Effect.ScopedQueue();
250       
251     return this.instances[queueName];
252   }
253 }
254 Effect.Queue = Effect.Queues.get('global');
255
256 Effect.DefaultOptions = {
257   transition: Effect.Transitions.sinoidal,
258   duration:   1.0,   // seconds
259   fps:        25.0,  // max. 25fps due to Effect.Queue implementation
260   sync:       false, // true for combining
261   from:       0.0,
262   to:         1.0,
263   delay:      0.0,
264   queue:      'parallel'
265 }
266
267 Effect.Base = function() {};
268 Effect.Base.prototype = {
269   position: null,
270   start: function(options) {
271     this.options      = Object.extend(Object.extend({},Effect.DefaultOptions), options || {});
272     this.currentFrame = 0;
273     this.state        = 'idle';
274     this.startOn      = this.options.delay*1000;
275     this.finishOn     = this.startOn + (this.options.duration*1000);
276     this.event('beforeStart');
277     if(!this.options.sync)
278       Effect.Queues.get(typeof this.options.queue == 'string' ? 
279         'global' : this.options.queue.scope).add(this);
280   },
281   loop: function(timePos) {
282     if(timePos >= this.startOn) {
283       if(timePos >= this.finishOn) {
284         this.render(1.0);
285         this.cancel();
286         this.event('beforeFinish');
287         if(this.finish) this.finish(); 
288         this.event('afterFinish');
289         return;  
290       }
291       var pos   = (timePos - this.startOn) / (this.finishOn - this.startOn);
292       var frame = Math.round(pos * this.options.fps * this.options.duration);
293       if(frame > this.currentFrame) {
294         this.render(pos);
295         this.currentFrame = frame;
296       }
297     }
298   },
299   render: function(pos) {
300     if(this.state == 'idle') {
301       this.state = 'running';
302       this.event('beforeSetup');
303       if(this.setup) this.setup();
304       this.event('afterSetup');
305     }
306     if(this.state == 'running') {
307       if(this.options.transition) pos = this.options.transition(pos);
308       pos *= (this.options.to-this.options.from);
309       pos += this.options.from;
310       this.position = pos;
311       this.event('beforeUpdate');
312       if(this.update) this.update(pos);
313       this.event('afterUpdate');
314     }
315   },
316   cancel: function() {
317     if(!this.options.sync)
318       Effect.Queues.get(typeof this.options.queue == 'string' ? 
319         'global' : this.options.queue.scope).remove(this);
320     this.state = 'finished';
321   },
322   event: function(eventName) {
323     if(this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this);
324     if(this.options[eventName]) this.options[eventName](this);
325   },
326   inspect: function() {
327     return '#<Effect:' + $H(this).inspect() + ',options:' + $H(this.options).inspect() + '>';
328   }
329 }
330
331 Effect.Parallel = Class.create();
332 Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), {
333   initialize: function(effects) {
334     this.effects = effects || [];
335     this.start(arguments[1]);
336   },
337   update: function(position) {
338     this.effects.invoke('render', position);
339   },
340   finish: function(position) {
341     this.effects.each( function(effect) {
342       effect.render(1.0);
343       effect.cancel();
344       effect.event('beforeFinish');
345       if(effect.finish) effect.finish(position);
346       effect.event('afterFinish');
347     });
348   }
349 });
350
351 Effect.Opacity = Class.create();
352 Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
353   initialize: function(element) {
354     this.element = $(element);
355     // make this work on IE on elements without 'layout'
356     if(/MSIE/.test(navigator.userAgent) && (!this.element.hasLayout))
357       this.element.setStyle({zoom: 1});
358     var options = Object.extend({
359       from: this.element.getOpacity() || 0.0,
360       to:   1.0
361     }, arguments[1] || {});
362     this.start(options);
363   },
364   update: function(position) {
365     this.element.setOpacity(position);
366   }
367 });
368
369 Effect.Move = Class.create();
370 Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), {
371   initialize: function(element) {
372     this.element = $(element);
373     var options = Object.extend({
374       x:    0,
375       y:    0,
376       mode: 'relative'
377     }, arguments[1] || {});
378     this.start(options);
379   },
380   setup: function() {
381     // Bug in Opera: Opera returns the "real" position of a static element or
382     // relative element that does not have top/left explicitly set.
383     // ==> Always set top and left for position relative elements in your stylesheets 
384     // (to 0 if you do not need them) 
385     this.element.makePositioned();
386     this.originalLeft = parseFloat(this.element.getStyle('left') || '0');
387     this.originalTop  = parseFloat(this.element.getStyle('top')  || '0');
388     if(this.options.mode == 'absolute') {
389       // absolute movement, so we need to calc deltaX and deltaY
390       this.options.x = this.options.x - this.originalLeft;
391       this.options.y = this.options.y - this.originalTop;
392     }
393   },
394   update: function(position) {
395     this.element.setStyle({
396       left: this.options.x  * position + this.originalLeft + 'px',
397       top:  this.options.y  * position + this.originalTop  + 'px'
398     });
399   }
400 });
401
402 // for backwards compatibility
403 Effect.MoveBy = function(element, toTop, toLeft) {
404   return new Effect.Move(element, 
405     Object.extend({ x: toLeft, y: toTop }, arguments[3] || {}));
406 };
407
408 Effect.Scale = Class.create();
409 Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
410   initialize: function(element, percent) {
411     this.element = $(element)
412     var options = Object.extend({
413       scaleX: true,
414       scaleY: true,
415       scaleContent: true,
416       scaleFromCenter: false,
417       scaleMode: 'box',        // 'box' or 'contents' or {} with provided values
418       scaleFrom: 100.0,
419       scaleTo:   percent
420     }, arguments[2] || {});
421     this.start(options);
422   },
423   setup: function() {
424     this.restoreAfterFinish = this.options.restoreAfterFinish || false;
425     this.elementPositioning = this.element.getStyle('position');
426     
427     this.originalStyle = {};
428     ['top','left','width','height','fontSize'].each( function(k) {
429       this.originalStyle[k] = this.element.style[k];
430     }.bind(this));
431       
432     this.originalTop  = this.element.offsetTop;
433     this.originalLeft = this.element.offsetLeft;
434     
435     var fontSize = this.element.getStyle('font-size') || '100%';
436     ['em','px','%'].each( function(fontSizeType) {
437       if(fontSize.indexOf(fontSizeType)>0) {
438         this.fontSize     = parseFloat(fontSize);
439         this.fontSizeType = fontSizeType;
440       }
441     }.bind(this));
442     
443     this.factor = (this.options.scaleTo - this.options.scaleFrom)/100;
444     
445     this.dims = null;
446     if(this.options.scaleMode=='box')
447       this.dims = [this.element.offsetHeight, this.element.offsetWidth];
448     if(/^content/.test(this.options.scaleMode))
449       this.dims = [this.element.scrollHeight, this.element.scrollWidth];
450     if(!this.dims)
451       this.dims = [this.options.scaleMode.originalHeight,
452                    this.options.scaleMode.originalWidth];
453   },
454   update: function(position) {
455     var currentScale = (this.options.scaleFrom/100.0) + (this.factor * position);
456     if(this.options.scaleContent && this.fontSize)
457       this.element.setStyle({fontSize: this.fontSize * currentScale + this.fontSizeType });
458     this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale);
459   },
460   finish: function(position) {
461     if (this.restoreAfterFinish) this.element.setStyle(this.originalStyle);
462   },
463   setDimensions: function(height, width) {
464     var d = {};
465     if(this.options.scaleX) d.width = width + 'px';
466     if(this.options.scaleY) d.height = height + 'px';
467     if(this.options.scaleFromCenter) {
468       var topd  = (height - this.dims[0])/2;
469       var leftd = (width  - this.dims[1])/2;
470       if(this.elementPositioning == 'absolute') {
471         if(this.options.scaleY) d.top = this.originalTop-topd + 'px';
472         if(this.options.scaleX) d.left = this.originalLeft-leftd + 'px';
473       } else {
474         if(this.options.scaleY) d.top = -topd + 'px';
475         if(this.options.scaleX) d.left = -leftd + 'px';
476       }
477     }
478     this.element.setStyle(d);
479   }
480 });
481
482 Effect.Highlight = Class.create();
483 Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), {
484   initialize: function(element) {
485     this.element = $(element);
486     var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || {});
487     this.start(options);
488   },
489   setup: function() {
490     // Prevent executing on elements not in the layout flow
491     if(this.element.getStyle('display')=='none') { this.cancel(); return; }
492     // Disable background image during the effect
493     this.oldStyle = {
494       backgroundImage: this.element.getStyle('background-image') };
495     this.element.setStyle({backgroundImage: 'none'});
496     if(!this.options.endcolor)
497       this.options.endcolor = this.element.getStyle('background-color').parseColor('#ffffff');
498     if(!this.options.restorecolor)
499       this.options.restorecolor = this.element.getStyle('background-color');
500     // init color calculations
501     this._base  = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16) }.bind(this));
502     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));
503   },
504   update: function(position) {
505     this.element.setStyle({backgroundColor: $R(0,2).inject('#',function(m,v,i){
506       return m+(Math.round(this._base[i]+(this._delta[i]*position)).toColorPart()); }.bind(this)) });
507   },
508   finish: function() {
509     this.element.setStyle(Object.extend(this.oldStyle, {
510       backgroundColor: this.options.restorecolor
511     }));
512   }
513 });
514
515 Effect.ScrollTo = Class.create();
516 Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), {
517   initialize: function(element) {
518     this.element = $(element);
519     this.start(arguments[1] || {});
520   },
521   setup: function() {
522     Position.prepare();
523     var offsets = Position.cumulativeOffset(this.element);
524     if(this.options.offset) offsets[1] += this.options.offset;
525     var max = window.innerHeight ? 
526       window.height - window.innerHeight :
527       document.body.scrollHeight - 
528         (document.documentElement.clientHeight ? 
529           document.documentElement.clientHeight : document.body.clientHeight);
530     this.scrollStart = Position.deltaY;
531     this.delta = (offsets[1] > max ? max : offsets[1]) - this.scrollStart;
532   },
533   update: function(position) {
534     Position.prepare();
535     window.scrollTo(Position.deltaX, 
536       this.scrollStart + (position*this.delta));
537   }
538 });
539
540 /* ------------- combination effects ------------- */
541
542 Effect.Fade = function(element) {
543   element = $(element);
544   var oldOpacity = element.getInlineOpacity();
545   var options = Object.extend({
546   from: element.getOpacity() || 1.0,
547   to:   0.0,
548   afterFinishInternal: function(effect) { 
549     if(effect.options.to!=0) return;
550     effect.element.hide();
551     effect.element.setStyle({opacity: oldOpacity}); 
552   }}, arguments[1] || {});
553   return new Effect.Opacity(element,options);
554 }
555
556 Effect.Appear = function(element) {
557   element = $(element);
558   var options = Object.extend({
559   from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0),
560   to:   1.0,
561   // force Safari to render floated elements properly
562   afterFinishInternal: function(effect) {
563     effect.element.forceRerendering();
564   },
565   beforeSetup: function(effect) {
566     effect.element.setOpacity(effect.options.from);
567     effect.element.show(); 
568   }}, arguments[1] || {});
569   return new Effect.Opacity(element,options);
570 }
571
572 Effect.Puff = function(element) {
573   element = $(element);
574   var oldStyle = { opacity: element.getInlineOpacity(), position: element.getStyle('position') };
575   return new Effect.Parallel(
576    [ new Effect.Scale(element, 200, 
577       { sync: true, scaleFromCenter: true, scaleContent: true, restoreAfterFinish: true }), 
578      new Effect.Opacity(element, { sync: true, to: 0.0 } ) ], 
579      Object.extend({ duration: 1.0, 
580       beforeSetupInternal: function(effect) {
581         effect.effects[0].element.setStyle({position: 'absolute'}); },
582       afterFinishInternal: function(effect) {
583          effect.effects[0].element.hide();
584          effect.effects[0].element.setStyle(oldStyle); }
585      }, arguments[1] || {})
586    );
587 }
588
589 Effect.BlindUp = function(element) {
590   element = $(element);
591   element.makeClipping();
592   return new Effect.Scale(element, 0, 
593     Object.extend({ scaleContent: false, 
594       scaleX: false, 
595       restoreAfterFinish: true,
596       afterFinishInternal: function(effect) {
597         effect.element.hide();
598         effect.element.undoClipping();
599       } 
600     }, arguments[1] || {})
601   );
602 }
603
604 Effect.BlindDown = function(element) {
605   element = $(element);
606   var elementDimensions = element.getDimensions();
607   return new Effect.Scale(element, 100, 
608     Object.extend({ scaleContent: false, 
609       scaleX: false,
610       scaleFrom: 0,
611       scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
612       restoreAfterFinish: true,
613       afterSetup: function(effect) {
614         effect.element.makeClipping();
615         effect.element.setStyle({height: '0px'});
616         effect.element.show(); 
617       },  
618       afterFinishInternal: function(effect) {
619         effect.element.undoClipping();
620       }
621     }, arguments[1] || {})
622   );
623 }
624
625 Effect.SwitchOff = function(element) {
626   element = $(element);
627   var oldOpacity = element.getInlineOpacity();
628   return new Effect.Appear(element, { 
629     duration: 0.4,
630     from: 0,
631     transition: Effect.Transitions.flicker,
632     afterFinishInternal: function(effect) {
633       new Effect.Scale(effect.element, 1, { 
634         duration: 0.3, scaleFromCenter: true,
635         scaleX: false, scaleContent: false, restoreAfterFinish: true,
636         beforeSetup: function(effect) { 
637           effect.element.makePositioned();
638           effect.element.makeClipping();
639         },
640         afterFinishInternal: function(effect) {
641           effect.element.hide();
642           effect.element.undoClipping();
643           effect.element.undoPositioned();
644           effect.element.setStyle({opacity: oldOpacity});
645         }
646       })
647     }
648   });
649 }
650
651 Effect.DropOut = function(element) {
652   element = $(element);
653   var oldStyle = {
654     top: element.getStyle('top'),
655     left: element.getStyle('left'),
656     opacity: element.getInlineOpacity() };
657   return new Effect.Parallel(
658     [ new Effect.Move(element, {x: 0, y: 100, sync: true }), 
659       new Effect.Opacity(element, { sync: true, to: 0.0 }) ],
660     Object.extend(
661       { duration: 0.5,
662         beforeSetup: function(effect) {
663           effect.effects[0].element.makePositioned(); 
664         },
665         afterFinishInternal: function(effect) {
666           effect.effects[0].element.hide();
667           effect.effects[0].element.undoPositioned();
668           effect.effects[0].element.setStyle(oldStyle);
669         } 
670       }, arguments[1] || {}));
671 }
672
673 Effect.Shake = function(element) {
674   element = $(element);
675   var oldStyle = {
676     top: element.getStyle('top'),
677     left: element.getStyle('left') };
678     return new Effect.Move(element, 
679       { x:  20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
680     new Effect.Move(effect.element,
681       { x: -40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
682     new Effect.Move(effect.element,
683       { x:  40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
684     new Effect.Move(effect.element,
685       { x: -40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
686     new Effect.Move(effect.element,
687       { x:  40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
688     new Effect.Move(effect.element,
689       { x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
690         effect.element.undoPositioned();
691         effect.element.setStyle(oldStyle);
692   }}) }}) }}) }}) }}) }});
693 }
694
695 Effect.SlideDown = function(element) {
696   element = $(element);
697   element.cleanWhitespace();
698   // SlideDown need to have the content of the element wrapped in a container element with fixed height!
699   var oldInnerBottom = $(element.firstChild).getStyle('bottom');
700   var elementDimensions = element.getDimensions();
701   return new Effect.Scale(element, 100, Object.extend({ 
702     scaleContent: false, 
703     scaleX: false, 
704     scaleFrom: 0,
705     scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
706     restoreAfterFinish: true,
707     afterSetup: function(effect) {
708       effect.element.makePositioned();
709       effect.element.firstChild.makePositioned();
710       if(window.opera) effect.element.setStyle({top: ''});
711       effect.element.makeClipping();
712       effect.element.setStyle({height: '0px'});
713       effect.element.show(); },
714     afterUpdateInternal: function(effect) {
715       effect.element.firstChild.setStyle({bottom:
716         (effect.dims[0] - effect.element.clientHeight) + 'px' }); 
717     },
718     afterFinishInternal: function(effect) {
719       effect.element.undoClipping(); 
720       // IE will crash if child is undoPositioned first
721       if(/MSIE/.test(navigator.userAgent)){
722         effect.element.undoPositioned();
723         effect.element.firstChild.undoPositioned();
724       }else{
725         effect.element.firstChild.undoPositioned();
726         effect.element.undoPositioned();
727       }
728       effect.element.firstChild.setStyle({bottom: oldInnerBottom}); }
729     }, arguments[1] || {})
730   );
731 }
732   
733 Effect.SlideUp = function(element) {
734   element = $(element);
735   element.cleanWhitespace();
736   var oldInnerBottom = $(element.firstChild).getStyle('bottom');
737   return new Effect.Scale(element, 0, 
738    Object.extend({ scaleContent: false, 
739     scaleX: false, 
740     scaleMode: 'box',
741     scaleFrom: 100,
742     restoreAfterFinish: true,
743     beforeStartInternal: function(effect) {
744       effect.element.makePositioned();
745       effect.element.firstChild.makePositioned();
746       if(window.opera) effect.element.setStyle({top: ''});
747       effect.element.makeClipping();
748       effect.element.show(); },  
749     afterUpdateInternal: function(effect) {
750       effect.element.firstChild.setStyle({bottom:
751         (effect.dims[0] - effect.element.clientHeight) + 'px' }); },
752     afterFinishInternal: function(effect) {
753       effect.element.hide();
754       effect.element.undoClipping();
755       effect.element.firstChild.undoPositioned();
756       effect.element.undoPositioned();
757       effect.element.setStyle({bottom: oldInnerBottom}); }
758    }, arguments[1] || {})
759   );
760 }
761
762 // Bug in opera makes the TD containing this element expand for a instance after finish 
763 Effect.Squish = function(element) {
764   return new Effect.Scale(element, window.opera ? 1 : 0, 
765     { restoreAfterFinish: true,
766       beforeSetup: function(effect) {
767         effect.element.makeClipping(effect.element); },  
768       afterFinishInternal: function(effect) {
769         effect.element.hide(effect.element); 
770         effect.element.undoClipping(effect.element); }
771   });
772 }
773
774 Effect.Grow = function(element) {
775   element = $(element);
776   var options = Object.extend({
777     direction: 'center',
778     moveTransition: Effect.Transitions.sinoidal,
779     scaleTransition: Effect.Transitions.sinoidal,
780     opacityTransition: Effect.Transitions.full
781   }, arguments[1] || {});
782   var oldStyle = {
783     top: element.style.top,
784     left: element.style.left,
785     height: element.style.height,
786     width: element.style.width,
787     opacity: element.getInlineOpacity() };
788
789   var dims = element.getDimensions();    
790   var initialMoveX, initialMoveY;
791   var moveX, moveY;
792   
793   switch (options.direction) {
794     case 'top-left':
795       initialMoveX = initialMoveY = moveX = moveY = 0; 
796       break;
797     case 'top-right':
798       initialMoveX = dims.width;
799       initialMoveY = moveY = 0;
800       moveX = -dims.width;
801       break;
802     case 'bottom-left':
803       initialMoveX = moveX = 0;
804       initialMoveY = dims.height;
805       moveY = -dims.height;
806       break;
807     case 'bottom-right':
808       initialMoveX = dims.width;
809       initialMoveY = dims.height;
810       moveX = -dims.width;
811       moveY = -dims.height;
812       break;
813     case 'center':
814       initialMoveX = dims.width / 2;
815       initialMoveY = dims.height / 2;
816       moveX = -dims.width / 2;
817       moveY = -dims.height / 2;
818       break;
819   }
820   
821   return new Effect.Move(element, {
822     x: initialMoveX,
823     y: initialMoveY,
824     duration: 0.01, 
825     beforeSetup: function(effect) {
826       effect.element.hide();
827       effect.element.makeClipping();
828       effect.element.makePositioned();
829     },
830     afterFinishInternal: function(effect) {
831       new Effect.Parallel(
832         [ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
833           new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
834           new Effect.Scale(effect.element, 100, {
835             scaleMode: { originalHeight: dims.height, originalWidth: dims.width }, 
836             sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
837         ], Object.extend({
838              beforeSetup: function(effect) {
839                effect.effects[0].element.setStyle({height: '0px'});
840                effect.effects[0].element.show(); 
841              },
842              afterFinishInternal: function(effect) {
843                effect.effects[0].element.undoClipping();
844                effect.effects[0].element.undoPositioned();
845                effect.effects[0].element.setStyle(oldStyle); 
846              }
847            }, options)
848       )
849     }
850   });
851 }
852
853 Effect.Shrink = function(element) {
854   element = $(element);
855   var options = Object.extend({
856     direction: 'center',
857     moveTransition: Effect.Transitions.sinoidal,
858     scaleTransition: Effect.Transitions.sinoidal,
859     opacityTransition: Effect.Transitions.none
860   }, arguments[1] || {});
861   var oldStyle = {
862     top: element.style.top,
863     left: element.style.left,
864     height: element.style.height,
865     width: element.style.width,
866     opacity: element.getInlineOpacity() };
867
868   var dims = element.getDimensions();
869   var moveX, moveY;
870   
871   switch (options.direction) {
872     case 'top-left':
873       moveX = moveY = 0;
874       break;
875     case 'top-right':
876       moveX = dims.width;
877       moveY = 0;
878       break;
879     case 'bottom-left':
880       moveX = 0;
881       moveY = dims.height;
882       break;
883     case 'bottom-right':
884       moveX = dims.width;
885       moveY = dims.height;
886       break;
887     case 'center':  
888       moveX = dims.width / 2;
889       moveY = dims.height / 2;
890       break;
891   }
892   
893   return new Effect.Parallel(
894     [ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }),
895       new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}),
896       new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition })
897     ], Object.extend({            
898          beforeStartInternal: function(effect) {
899            effect.effects[0].element.makePositioned();
900            effect.effects[0].element.makeClipping(); },
901          afterFinishInternal: function(effect) {
902            effect.effects[0].element.hide();
903            effect.effects[0].element.undoClipping();
904            effect.effects[0].element.undoPositioned();
905            effect.effects[0].element.setStyle(oldStyle); }
906        }, options)
907   );
908 }
909
910 Effect.Pulsate = function(element) {
911   element = $(element);
912   var options    = arguments[1] || {};
913   var oldOpacity = element.getInlineOpacity();
914   var transition = options.transition || Effect.Transitions.sinoidal;
915   var reverser   = function(pos){ return transition(1-Effect.Transitions.pulse(pos)) };
916   reverser.bind(transition);
917   return new Effect.Opacity(element, 
918     Object.extend(Object.extend({  duration: 3.0, from: 0,
919       afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); }
920     }, options), {transition: reverser}));
921 }
922
923 Effect.Fold = function(element) {
924   element = $(element);
925   var oldStyle = {
926     top: element.style.top,
927     left: element.style.left,
928     width: element.style.width,
929     height: element.style.height };
930   Element.makeClipping(element);
931   return new Effect.Scale(element, 5, Object.extend({   
932     scaleContent: false,
933     scaleX: false,
934     afterFinishInternal: function(effect) {
935     new Effect.Scale(element, 1, { 
936       scaleContent: false, 
937       scaleY: false,
938       afterFinishInternal: function(effect) {
939         effect.element.hide();
940         effect.element.undoClipping(); 
941         effect.element.setStyle(oldStyle);
942       } });
943   }}, arguments[1] || {}));
944 };
945
946 ['setOpacity','getOpacity','getInlineOpacity','forceRerendering','setContentZoom',
947  'collectTextNodes','collectTextNodesIgnoreClass','childrenWithClassName'].each( 
948   function(f) { Element.Methods[f] = Element[f]; }
949 );
950
951 Element.Methods.visualEffect = function(element, effect, options) {
952   s = effect.gsub(/_/, '-').camelize();
953   effect_class = s.charAt(0).toUpperCase() + s.substring(1);
954   new Effect[effect_class](element, options);
955   return $(element);
956 };
957
958 Element.addMethods();