/**Hyper Studio html5 transitions 
 * file rev. 64095 
 */

/**
 * Transitions object is designed to handle
 * transitions on "goto" actions.
 * params:
 * -currentElement: element, currently displayed;
 * -next element: element that will be shown, replacing currentElement;
 * -effect: transition effect(fade,pushUp,etc);
 * -durr: duration of transition effect (seconds), may be ignored with some transitions
 * 
 * Transitions are mapped according to this table:
 * "HSCubeReverseTransition"  -  	"Reverse CubeMixer" 	x
 * "HSTwirlTransition"  -  			"Twirl"  -
 * "HSCloudsTransition"  -  		"SkyClouds"  -
 * "HSCubeTransition"  -  			"CubeMixer"  -			x
 * "HSCopyTransition"  -  			"CopyMachine"  -		x
 * "HSSwipeTransition"  -  			"Swipe"  -				x
 * "HSFadeTransition"  -  			"Fade"  -				x
 * "HSKaleidoscopeTransition"  -  	"Kaleidoscope"  -		x
 * "HSIrisStarTransition"  -  		"Iris Star"  -			x
 * "HSFillUpTransition"  -  		"Wipe Up"  -			x
 * "HSJawsTransition"  -  			"Jaws"  -				x
 * "HSSlideDownTransition"  - 	 	"Slide Down"  -			x
 * "HSScrollDownTransition"  -  	"Push Up"  -
 * "HSScrollUpTransition"  -  		"PushBottom"  -
 * "HSScrollLeftTransition"  -  	"PushLeft"  -
 * "HSScrollRightTransition"  -  	"PushRight"  -
 * "HSFillLeftTransition"  -  		"Wipe Left"  -			x
 * "HSFillRightTransition"  -  		"Wipe Right"  -			x
 * "HSSlideLeftTransition"  -  		"Slide Left"  -			x
 * "HSSlideRemoveLeftTransition"  - "Slide Remove Left"  -	x
 * "HSSlideRemoveRightTransition"  -"Slide Remove Right"  -	x
 * "HSSlideRemoveUpTransition"  -  	"Slide Remove Up"  -	x	
 * "HSSlideRemoveDownTransition"  - "Slide Remove Down"  -	x
 * "HSLawnmowerTransition"  -  		"Lawnmower"  -			x
 * "HSWindmillTransition"  -  		"Windmill"  -			x	
 * "HSSpotlightTransition"  -  		"Spotlight"  -			x
 * "HSOpenSesameTransition"  -  	"Open Sesame"  -		x
 * "HSIrisRectangleTransition"  -  	"Iris Rectangle"  -		x
 * "HSEngulfTransition"  -  		"Engulf"  -
 * "HSBarnDoorTransition"  -  		"Barn Door"  -			x
 * "HSBarnCloseTransition"  -  		"Barn Close"  -			x
 * "HSFillCircleTransition"  -  	"Iris Circle"  -		x
 * "HSSlideUpTransition"  -  		"Slide Up"  -			x
 * "HSWaterfallTransition"  -  		"Waterfall"  -			x		
 * "HSFillRightDownTransition"  -  	"Wipe Diagonal"  -		x
 * "HSClockFaceTransition"  -  		"Clock Face"  -			x
 * "HSWiperTransition"  -  			"Wiper"  -				x
 * "HSSlideRightTransition"  -  	"Slide Right"  -		x
 * "HSFillDownTransition"  -  		"Wipe Down"  -			x
 * "HSZoomTransition"  -  			"Zoom"  -				x
 * "HSImplodeCircleTransition"  -  	"Implode Circle"  -
 * "HSCircleTransition"  -  		"Explode"  -
 * "HSImplodeTransition"  -  		"Implode"  -
 * "HSIrisHeartTransition"  -  		"Iris Heart"  -			x
 * "HSSpiralTransition"  -  		"Spiral"  -
 * "HSPageTearTransition"  -  		"Page Tear"  -
 * "HSModTransition"  -  			"Mod"  -
 * "HSRippleTransition"  -  		"Ripple"  -
 * "HSGaussianBlurTransition"  -  	"GaussianBlur"  -
 * "HSFlashTransition"  -  			"Flash"  -
 * "HSLiquidImageTransition"  -  	"LiquidImage"
 * "NoTransition"  -  				"No Transition"			x
 * -------------------------------------------------------------
 * 
 * 
 *            LSTR("Reverse CubeMixer"), LSTR("HSCubeReverseTransition"),
 *           LSTR("Twirl"), LSTR("HSTwirlTransition"),
 *          LSTR("SkyClouds"), LSTR("HSCloudsTransition"),
 *          LSTR("CubeMixer"), LSTR("HSCubeTransition"),
 *          LSTR("CopyMachine"), LSTR("HSCopyTransition"),
 *          LSTR("Swipe"), LSTR("HSSwipeTransition"),
 *
 *          // QT
 *          LSTR("Fade"), LSTR("HSFadeTransition"),
 *          LSTR("Kaleidoscope"), LSTR("HSKaleidoscopeTransition"),
 *          LSTR("Iris Star"), LSTR("HSIrisStarTransition"),
 *          LSTR("Wipe Up"), LSTR("HSFillUpTransition"),
 *          LSTR("Barn"), LSTR("HSBarnDoorTransition"),
 *          LSTR("Jaws"), LSTR("HSJawsTransition"),
 *          LSTR("Slide Down"), LSTR("HSSlideDownTransition"),
 *          LSTR("Push"), LSTR("HSScrollDownTransition"),
 *          LSTR("PushBottom"), LSTR("HSScrollUpTransition"),
 *          LSTR("PushLeft"), LSTR("HSScrollLeftTransition"),
 *          LSTR("PushRight"),    LSTR("HSScrollRightTransition"),
 *          LSTR("Wipe Left"), LSTR("HSFillLeftTransition"),
 *          LSTR("Wipe Right"), LSTR("HSFillRightTransition"),
 *          LSTR("Slide Left"), LSTR("HSSlideLeftTransition"),
 *          LSTR("Slide Remove Left"),LSTR("HSSlideRemoveLeftTransition"),
 *          LSTR("Slide Remove Right"),LSTR("HSSlideRemoveRightTransition"),
 *          LSTR("Slide Remove Up"),LSTR("HSSlideRemoveUpTransition"),
 *          LSTR("Slide Remove Down"),LSTR("HSSlideRemoveDownTransition"),
 *
 *          LSTR("Lawnmower"), LSTR("HSLawnmowerTransition"),
 *          LSTR("Windmill"), LSTR("HSWindmillTransition"),
 *          LSTR("Spotlight"), LSTR("HSSpotlightTransition"),
 *          LSTR("Open Sesame"), LSTR("HSOpenSesameTransition"),
 *          LSTR("Iris Rectangle"), LSTR("HSIrisRectangleTransition"),
 *          LSTR("Engulf"), LSTR("HSEngulfTransition"),
 *          LSTR("Barn Door"), LSTR("HSBarnDoorTransition"),
 *          LSTR("Barn"), LSTR("HSBarnCloseTransition"),
 *
 *          LSTR("Iris Circle"), LSTR("HSFillCircleTransition"),
 *          LSTR("Slide Up"), LSTR("HSSlideUpTransition"),
 *          LSTR("Waterfall"), LSTR("HSWaterfallTransition"),
 *          LSTR("Wipe Diagonal"), LSTR("HSFillRightDownTransition"),
 *          LSTR("Clock Face"), LSTR("HSClockFaceTransition"),
 *          LSTR("Wiper"), LSTR("HSWiperTransition"),
 *          LSTR("Slide Right"), LSTR("HSSlideRightTransition"),
 *          LSTR("Wipe Down"), LSTR("HSFillDownTransition"),
 *          LSTR("Zoom"), LSTR("HSZoomTransition"),
 *          LSTR("Implode Circle"), LSTR("HSImplodeCircleTransition"),
 *          LSTR("Explode"), LSTR("HSCircleTransition"),
 *          LSTR("Implode"), LSTR("HSImplodeTransition"),
 *          LSTR("Iris Heart"), LSTR("HSIrisHeartTransition"),
 *          LSTR("Spiral"), LSTR("HSSpiralTransition"),
 *          LSTR("Page Tear"), LSTR("HSPageTearTransition"),
 *          LSTR("Mod"), LSTR("HSModTransition"),
 *          LSTR("Ripple"), LSTR("HSRippleTransition"),
 *          LSTR("GaussianBlur"), LSTR("HSGaussianBlurTransition"),
 *          LSTR("Flash"), LSTR("HSFlashTransition"),
 *          LSTR("LiquidImage"), LSTR("HSLiquidImageTransition"),
 *          LSTR("No Transition"), LSTR("HSFastestTransition"),
 *          nil));
 *
 */
var transitions = Class.create({
 
		initialize: function(options) {
			try{
			    this.options = {
			    	currentElement:   	'currentElement',
			    	nextElement:		'nextElement',
				    effect:				'HSFadeTransition',
				    durr:				'1'
			    };
			    
			    Object.extend(this.options, options || { });
			    
			    this.playEffectAnimation(this.options.currentElement, this.options.nextElement, this.options.effect, this.options.durr);
			}
			catch(err){
				alert('playerObj: initialize error:' + console.log(err));
			}
		},
		
		createOverlay: function(){
			this.screen = new Element("div",{style:"position:absolute;top:0px;left:0px;height:100%;width:100%;z-index:999999;cursor:default;"});
			document.body.insert(this.screen);
		},
		
		removeOverlay: function(){
			setTimeout(function(){document.body.removeChild(this.screen);}.bind(this),250);
		},
		
		playEffectAnimation: function(animateFrom,animateTo,effect,durr){
		try{
			switch(effect){
			
			/*case 'Wipe_Left':
				try{
				animateFrom.childElements().each(function(el){
					Try.these(
							function(){el.style.zIndex='0';}
						);
				});
				var dimX = animateFrom.firstDescendant().getWidth();
				var dimY = animateFrom.firstDescendant().getHeight();
				
				var canvas = new Element('canvas',{
						width: dimX,
						height:dimY,
						style:'position:absolute;z-index:999;top:0px;',
						id:'irisRectangleCanvas'
				});
				animateFrom.parentNode.insert(canvas);
				animateTo.show();
				animateTo.relativize();
				animateTo.style.top='0px';
				var ctx = $(canvas.id).getContext('2d');
				var i = 1;
				var j = 1;
				var k=0;
				
				var sumY = parseInt(dimX/50);
				animateFrom.hide();
				var image = animateFrom.firstDescendant(); 
				ctx.drawImage(image,  
						0,0,dimX,dimY);
				//image.observe('load',function(){
					var animInterval = setInterval(function(){
						$(canvas.id).width = $(canvas.id).width;
						ctx.clearRect(0,0,dimX,dimY);
						ctx.drawImage(image,  
									1,1,parseInt(dimX-j)-2,parseInt(dimY-1),1,1,parseInt(dimX-j),parseInt(dimY-1)); 
							
							//i+=sumX;
							
							j+=sumY;
							k++;
							if(k>=49){
								clearInterval(animInterval);
								
								
								animateFrom.parentNode.removeChild(canvas);
								animateFrom.parentNode.removeChild(animateFrom);
								
								document.fire(animateTo.id +':loaded');
								
							}
					},33);
				//});
			
				}
					catch(err){
				console.log(err);
			}	
				
			break;*/
			
			case "ripple":
				var ripple = (function(img_src, container){
					var img = new Image,
						img_data,
						delay = 30,
						width,
						height, 
						half_width, 
						half_height,
						riprad = 3,
						oldind,
						newind,
						mapind,
						
						size,
						ripplemap = [],
						last_map = [],
						ripple,
						ripple_data,
						texture,
						texture_data,
						is_running = true,
						is_disturbed = false,
						timer_id,
						
						canvas = document.createElement('canvas'),
						ctx;
						
					function init() {
						width = img.width;
						height = img.height;
						
						half_width = width >> 1;
						half_height = height >> 1;
						
						size = width * (height + 2) * 2;
						
						canvas.width = width;
						canvas.height = height;
						
						oldind = width;
						newind = width * (height + 3);
						
						ctx = canvas.getContext('2d');
						container.appendChild(canvas);
						
						ctx.drawImage(img, 0, 0, width, height);
						
						for (var i = 0; i < size; i++) {
							last_map[i] = ripplemap[i] = 0;
						}
						
						texture = ctx.getImageData(0, 0, width, height);
						texture_data = texture.data;
						ripple = ctx.getImageData(0, 0, width, height);
						ripple_data = ripple.data;
						
						
						canvas.addEventListener('mousemove', function(/* Event */ evt) {
							disturb(evt.offsetX || evt.layerX, evt.offsetY || evt.layerY);
						}, false);
						
						start();
					}
					
					function stop() {
						if (timer_id)
							clearInterval(timer_id);
					}
					
					function start() {
						stop();
						timer_id = setInterval(run, delay);
					}
					
					function run() {
						if (is_disturbed) {
							newframe(width, height);
							ctx.putImageData(ripple, 0, 0);
						}
					}
					
					function disturb(dx, dy) {
						dx <<= 0;
						dy <<= 0;
						is_disturbed = true;
						
						for (var j = dy - riprad; j < dy + riprad; j++) {
							for (var k = dx - riprad; k < dx + riprad; k++) {
								ripplemap[oldind + (j * width) + k] += 512;
							}
						}
						
//						newframe(width, height);
//						ctx.putImageData(ripple, 0, 0);
					}
					
					function newframe() {
						var i, a, b, data, cur_pixel, new_pixel, old_data;
						
						i = oldind;
						oldind = newind;
						newind = i;
						
						i = 0;
						mapind = oldind;
						
						
						var _width = width,
							_height = height,
							_ripplemap = ripplemap,
							_mapind = mapind,
							_newind = newind,
							_last_map = last_map,
							_rd = ripple.data,
							_td = texture.data,
							_half_width = half_width,
							_half_height = half_height,
							_is_disturbed = false;
						
						for (var y = 0; y < _height; y++) {
							for (var x = 0; x < _width; x++) {
								data = (
									_ripplemap[_mapind - _width] + 
									_ripplemap[_mapind + _width] + 
									_ripplemap[_mapind - 1] + 
									_ripplemap[_mapind + 1]) >> 1;
									
								data -= _ripplemap[_newind + i];
								data -= data >> 5;
								
								_ripplemap[_newind + i] = data;

								data = 1024 - data;
								
								old_data = _last_map[i];
								_last_map[i] = data;
								
								if (old_data != data) {
									//offsets
									_is_disturbed = true;
									a = (((x - _half_width) * data / 1024) << 0) + _half_width;
									b = (((y - _half_height) * data / 1024) << 0) + _half_height;
					
									//bounds check
									if (a >= _width) a = _width - 1;
									if (a < 0) a = 0;
									if (b >= _height) b = _height - 1;
									if (b < 0) b = 0;
					
									new_pixel = (a + (b * _width)) * 4;
									cur_pixel = i * 4;
									
									_rd[cur_pixel] = _td[new_pixel];
									_rd[cur_pixel + 1] = _td[new_pixel + 1];
									_rd[cur_pixel + 2] = _td[new_pixel + 2];
//									_rd[cur_pixel + 3] = _td[new_pixel + 3];
								}
								
								++_mapind;
								++i;
							}
						}
						
						mapind = _mapind;
						is_disturbed = _is_disturbed;
					}
					
					img.onload = init;
					img.src = img_src;
					
					return {
						start: start,
						stop: stop,
						disturb: disturb
					};
				});
				        
				
			break;
			
			case "No_Transition":
				return new transition.NoEffect({
					animateFrom:animateFrom,
					animateTo:animateTo,
					durr:durr
				});
			break;
			
			case "Windmill":
				return new transition.Windmill({
					animateFrom:animateFrom,
					animateTo:animateTo,
					durr:durr
				});
			break;
			
			case "Zoom":
				return new transition.Zoom({
					animateFrom:animateFrom,
					animateTo:animateTo,
					durr:durr
				});
			break;
			
			/*case "Clock_Face":
				return new transition.Clock_Face({
					animateFrom:animateFrom,
					animateTo:animateTo,
					durr:durr
				});
			break;*/
			
			default:
				
				return new transition.Fade({
					animateFrom:animateFrom,
					animateTo:animateTo,
					durr:durr
				});
				/*&&7if(!Object.isUndefined(transition[effect])) return new transition[effect]({
					animateFrom:animateFrom,
					animateTo:animateTo,
					durr:durr
				});
				else{
					this.createOverlay();
					animateFrom.style.zIndex = 999999;
					animateFrom.fade({duration: durr*1.8,transition: Effect.Transitions.sinoidal});
					setTimeout(function(){
						animateFrom.parentNode.removeChild(animateFrom);
						document.fire(animateTo.id +':loaded');
						this.removeOverlay();
					}.bind(this),parseInt(durr*800));
					
				//	setTimeout(function(){
						animateTo.appear();
						animateTo.absolutize();
						animateTo.style.zIndex = 15;
						animateTo.style.top='0px';
				//	}.bind(this),700);
				}*/
			break;
			
			
			}
			//setTimeout(function(){document.stopObserving();},2500);
		}
		catch(err){
			alert('player.js (transitions:playEffectAnimation) error: ' + console.log(err));
		}
	}
});

var transition = {};

transition.main =Class.create({
	initialize:function(options){
		try{
		    this.options = {
		    	animateFrom:   	'currentElement',
		    	animateTo:		'nextElement',
			    effect:			'HSFadeTransition',
			    durr:			'1'
		    };
		    
		    Object.extend(this.options, options || { });
		    
		    this.run(this.options.animateFrom,this.options.animateTo,this.options.durr);
		   
		}
		catch(err){
			alert('transition: initialize error:' + console.log(err));
		}
	},
	
	createOverlay: function(){
		this.screen = new Element("div",{style:"position:absolute;top:0px;left:0px;height:100%;width:100%;z-index:999999;cursor:default;"});
		document.body.insert(this.screen);
	},
	
	removeOverlay: function(){
		setTimeout(function(){document.body.removeChild(this.screen);}.bind(this),250);
	}
});

transition.NoEffect = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
		animateFrom.hide();
		animateTo.show();
		animateFrom.parentNode.removeChild(animateFrom);
		document.fire(animateTo.id +':loaded');
	}
});

/**
 * Fade
 */
transition.Fade = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
		this.createOverlay();
		animateFrom.setStyle("position:absolute;z-index:99999 !important;top:0px;left:0px;");
		animateTo.setStyle("position:absolute;z-index:0 !important;top:0px;left:0px;");
		animateTo.setStyle("display:none;");
		
		
		
		setTimeout(function(){
			new Effect.Opacity(animateFrom.id,{/*duration: durr*1.8,*/from:1,to:0,transition: Effect.Transitions.sinoidal, 
				
				afterUpdate: function(){
					if(animateTo.style.zIndex>0){
						animateTo.hide();
					}
					else if(animateTo.style.display=="none") animateTo.show();
				}.bind(this),
				afterFinish:function(){
					animateFrom.parentNode.removeChild(animateFrom);
					document.fire(animateTo.id +':loaded');
					this.removeOverlay();
				}.bind(this)});
		}.bind(this),10);
		
		
	}
});


/**
 * PushUp
 */
transition.Push = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
				var moveY = - animateTo.offsetTop;
				new Effect.SlideUp(animateFrom);
				animateTo.show();
				//animateFrom.relativize();
				animateFrom.childElements().each(function(el){
					
					Try.these(
						function(){new Effect.Move(el,{mode:'relative',x:0,y:-602});}
					);
				});
				new Effect.Move(animateTo,{mode:'absolute',x:0,y:-moveY,duration:durr,
						afterFinish: function(effect) {
						animateFrom.parentNode.removeChild(animateFrom);
						document.fire(animateTo.id +':loaded');
						
				    }});
	}
});


/**
 * PushLeft
 */
transition.PushLeft = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
		var moveX = animateFrom.getWidth();
		animateTo.show();
		animateTo.style.position = 'absolute';
		animateTo.style.left=moveX + 'px';
		animateTo.style.top = -animateFrom.getHeight()+'px';
		animateTo.relativize();
		animateFrom.relativize();
		
		new Effect.Move(animateFrom,{mode:'absolute',x:-moveX,y:0,duration:durr});
		new Effect.Move(animateTo,{mode:'relative',x:-moveX,y:0,duration:durr,
				afterFinish: function(effect) {
				animateFrom.parentNode.removeChild(animateFrom);
				animateTo.style.top='0px';
				document.fire(animateTo.id +':loaded');
				
		    }});
	}
});

/**
 * PushRight
 */
transition.PushRight = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
		var moveX = animateFrom.getWidth();
		animateTo.show();
		animateTo.style.position = 'absolute';
		animateTo.style.left=-moveX + 'px';
		animateTo.style.top = -animateFrom.getHeight()+'px';
		animateTo.relativize();
		animateFrom.relativize();
		
		new Effect.Move(animateFrom,{mode:'absolute',x:moveX,y:0,duration:durr});
		new Effect.Move(animateTo,{mode:'relative',x:moveX,y:0,duration:durr,
				afterFinish: function(effect) {
				animateFrom.parentNode.removeChild(animateFrom);
				animateTo.style.top='0px';
				document.fire(animateTo.id +':loaded');
				
		    }});
	}
});

/**
 * PushDown
 */
transition.PushBottom = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
		var moveY = animateFrom.getHeight();
		animateTo.show();
		animateTo.style.position = 'absolute';
		animateTo.style.left='0px';
		animateTo.style.top = -(moveY*2) + 'px';
		animateTo.relativize();
		animateFrom.relativize();
		new Effect.Move(animateFrom,{mode:'absolute',x:0,y:moveY,duration:durr});
		new Effect.Move(animateTo,{mode:'relative',x:0,y:moveY,duration:durr,
				afterFinish: function(effect) {
				animateFrom.parentNode.removeChild(animateFrom);
				animateTo.style.top='0px';
				document.fire(animateTo.id +':loaded');
				
		    }});
	}
});

/**
 * SlideDown
 */
transition.Slide_Down = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		
		var moveY = animateFrom.getHeight();
		animateTo.show();
		animateTo.style.position = 'absolute';
		animateTo.style.left='0px';
		animateTo.style.top = -(moveY*2) + 'px';
		animateTo.style.zIndex = '999';
		animateTo.relativize();
		new Effect.Move(animateTo,{mode:'relative',x:0,y:moveY,duration:durr,
				afterFinish: function(effect) {
				animateFrom.parentNode.removeChild(animateFrom);
				animateTo.style.top='0px';
				document.fire(animateTo.id +':loaded');
				
		    }});
		
	}
});

/**
 * SlideUp
 */
transition.Slide_Up = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		
		var moveY = animateFrom.getHeight();
		animateFrom.style.zIndex = '1';
		animateTo.show();
		animateTo.style.position = 'absolute';
		animateTo.style.left='0px';
		animateTo.style.zIndex = '999';
		animateTo.relativize();
		new Effect.Move(animateTo,{mode:'relative',x:0,y:-moveY,duration:durr,
				afterFinish: function(effect) {
				animateFrom.parentNode.removeChild(animateFrom);
				animateTo.style.top='0px';
				document.fire(animateTo.id +':loaded');
				
		    }});
	}
});

/**
 * SlideLeft
 */
transition.Slide_Left = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		var moveX = animateFrom.getWidth();
		animateTo.show();
		animateTo.style.position = 'absolute';
		animateTo.style.left=moveX + 'px';
		animateTo.style.top = -animateFrom.getHeight()+'px';
		animateTo.relativize();
		animateTo.style.zIndex = '999';
		
		new Effect.Move(animateTo,{mode:'relative',x:-moveX,y:0,duration:durr,
				afterFinish: function(effect) {
				animateFrom.parentNode.removeChild(animateFrom);
				animateTo.style.top='0px';
				document.fire(animateTo.id +':loaded');
				
		    }});
	}
});

/**
 * SlideRight
 */
transition.Slide_Left = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		var moveX = animateFrom.getWidth();
	
		
		animateTo.show();
		animateTo.style.position = 'absolute';
		animateTo.style.left=-moveX + 'px';
		animateTo.style.top = -animateFrom.getHeight()+'px';
		animateTo.relativize();
		animateTo.style.zIndex = '999';
		
		new Effect.Move(animateTo,{mode:'relative',x:moveX,y:0,duration:durr,
				afterFinish: function(effect) {
				animateFrom.parentNode.removeChild(animateFrom);
				animateTo.style.top='0px';
				document.fire(animateTo.id +':loaded');
				
		    }});
	}
});


/**
 * SlideRemoveRight
 */
transition.Slide_Remove_Right = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='200';}
				);
		});
		animateFrom.style.zIndex='200';
		var moveX = animateFrom.getWidth();
	
		animateTo.show();
		animateTo.relativize();
		animateTo.style.left='0px';
		animateTo.style.top = '0px';
		animateTo.style.top = -animateFrom.getHeight()+'px';
		animateFrom.style.top = '0px';
		new Effect.Move(animateFrom,{mode:'relative',x:moveX,y:0,duration:durr,
				afterFinish: function(effect) {
				animateFrom.parentNode.removeChild(animateFrom);
				animateTo.style.top='0px';
				document.fire(animateTo.id +':loaded');
				
		    }});
	}
});


/**
 * SlideRemoveLeft
 */
transition.Slide_Remove_Left = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='200';}
				);
		});
		animateFrom.style.zIndex='200';
		var moveX = animateFrom.getWidth();

		animateTo.show();
		animateTo.relativize();
		animateTo.style.left='0px';
		animateTo.style.top = '0px';
		animateTo.style.top = -animateFrom.getHeight()+'px';
		animateFrom.style.top = '0px';
		new Effect.Move(animateFrom,{mode:'relative',x:-moveX,y:0,duration:durr,
				afterFinish: function(effect) {
				animateFrom.parentNode.removeChild(animateFrom);
				animateTo.style.top='0px';
				document.fire(animateTo.id +':loaded');
				
		    }});
		
	}
});


/**
 * SlideRemoveUp
 */
transition.Slide_Remove_Up = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
				Try.these(
						function(){el.style.zIndex='200';}
					);
			});
		animateFrom.style.zIndex='200';
		var moveX = animateFrom.getWidth();
		var moveY = animateFrom.getHeight();
			
		animateTo.show();
		animateTo.relativize();
		animateTo.style.left='0px';
		animateTo.style.top = '0px';
		animateTo.style.top = -moveY+'px';
		animateFrom.style.top = '0px';
		new Effect.Move(animateFrom,{mode:'relative',x:0,y:-moveY,duration:durr,
				afterFinish: function(effect) {
				animateFrom.parentNode.removeChild(animateFrom);
				animateTo.style.top='0px';
				document.fire(animateTo.id +':loaded');
					
		   }});
		
	}
});

/**
 * SlideRemoveDown
 */
transition.Slide_Remove_Down = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='200';}
				);
		});
		animateFrom.style.zIndex='200';
		var moveX = animateFrom.getWidth();
		var moveY = animateFrom.getHeight();
		
		animateTo.show();
		animateTo.relativize();
		animateTo.style.left='0px';
		animateTo.style.top = '0px';
		animateTo.style.top = -moveY+'px';
		animateFrom.style.top = '0px';
		new Effect.Move(animateFrom,{mode:'relative',x:0,y:moveY,duration:durr,
				afterFinish: function(effect) {
				animateFrom.parentNode.removeChild(animateFrom);
				animateTo.style.top='0px';
				document.fire(animateTo.id +':loaded');
				
		    }});
		
	}
});


/**
 * LawnMower
 */
transition.Lawnmower = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		var dimX = animateFrom.getWidth();
		var dimY = animateFrom.getHeight();
		var startX = parseInt(dimX/2);
		var startY = parseInt(dimY/2);
		var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;',
				id:'lawnMoverCanvas'
		});
		animateFrom.parentNode.insert(canvas);
		var ctx = $(canvas.id).getContext('2d');
		
		var sumX = parseInt(dimX/6);
		var sumY = parseInt(dimY/8);
		 animateTo.hide();
		
		$(canvas.id).parentNode.style.zIndex = 9999;
		
		var image = animateFrom.firstDescendant(); 
		var image2 = animateTo.firstDescendant(); 
		var k=1;
		var direction ='left';
		var j = 1;
		var rectHeight = sumY;
		var animInterval = setInterval(function(){
				if(k>=49){
					clearInterval(animInterval);
					animateTo.show();
					animateTo.relativize();
					animateFrom.hide();
					animateTo.style.top='0px';
					animateFrom.parentNode.removeChild(canvas);
					animateFrom.parentNode.removeChild(animateFrom);
					setTimeout(function(){document.fire(animateTo.id +':loaded');},250);
				}
			
			Try.these(function(){
				$(canvas.id).width=$(canvas.id).width;
				ctx.beginPath();
				
				if (j>=7){
					j =1;
					rectHeight +=sumY;
					if(direction=='left') direction = 'right';
					else direction='left';
				}
				
				if(direction=='left') {
					clipRect(ctx,dimX,rectHeight-sumY,'left');
					ctx.moveTo(dimX,0);
					ctx.lineTo(dimX,rectHeight); 
					ctx.lineTo(dimX-(j*sumX),rectHeight);
					ctx.lineTo(dimX-(j*sumX),0);
					ctx.lineTo(dimX,0);
					
				}
				else {
					clipRect(ctx,dimX,rectHeight-sumY,'right');
					ctx.moveTo(0,0);
					ctx.lineTo(0,rectHeight); 
					ctx.lineTo(j*sumX,rectHeight);
					ctx.lineTo(j*sumX,0);
					ctx.lineTo(0,0);
					
				}
				ctx.closePath();
				ctx.clip();
				
				ctx.drawImage(image2,0,0,dimX,dimY);
			})||'';			
			j++;
			k++; 
		}.bind(this),33);
		
		function clipRect(ctx,width,height,dir){
			if(dir=='right'){
				ctx.moveTo(0,0);
				ctx.lineTo(0,height); 
				ctx.lineTo(width,height);
				ctx.lineTo(width,0);
				ctx.lineTo(0,0);
			}
			else{
				
				ctx.moveTo(width,0);
				ctx.lineTo(width,height); 
				ctx.lineTo(0,height);
				ctx.lineTo(0,0);
				ctx.lineTo(width,0); 
			}
		}
		
	}
});


/**
 * BarnDoor
 */
transition.Barn = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		var dimX = animateFrom.firstDescendant().getWidth();
		var dimY = animateFrom.firstDescendant().getHeight();
		
		var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;left:0px;',
				id:'barnDoorCanvas'
		});
		animateFrom.parentNode.insert(canvas);
		var ctx = $(canvas.id).getContext('2d');
		var i = 1;
		var k=0;
		var sumX = parseInt(dimX/50);
		var sumY = parseInt(dimY/50);
		
		var image = animateTo.firstDescendant(); 
		image.observe('load',function(){
			var animInterval = setInterval(function(){
				
					ctx.drawImage(image,  
							parseInt((dimX-i)/2),1,i,parseInt(dimY-1),parseInt((dimX-i)/2),1,i,parseInt(dimY-1)); 
					/***/
					i+=sumX;
					k++;
					if(k>=49){
						clearInterval(animInterval);
						
						animateTo.show();
						animateTo.relativize();
						animateFrom.parentNode.removeChild(canvas);
						animateFrom.parentNode.removeChild(animateFrom);
						animateTo.style.top='0px';
						document.fire(animateTo.id +':loaded');
						
					}
			},40);
		});
		
	}
});


/**
 * BarnClose
 */
transition.Barn_Close = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){

				animateFrom.childElements().each(function(el){
					Try.these(
							function(){el.style.zIndex='0';}
						);
				});
				var dimX = animateFrom.firstDescendant().getWidth();
				var dimY = animateFrom.firstDescendant().getHeight();
				
				var canvas = new Element('canvas',{
						width: dimX,
						height:dimY,
						style:'position:absolute;z-index:999;top:0px;',
						id:'barnCloseCanvas'
				});
				animateFrom.parentNode.insert(canvas);
				var ctx = $(canvas.id).getContext('2d');
				var i = dimX-2;
				var k=0;
				var sumX = parseInt(dimX/50);
				var sumY = parseInt(dimY/50);
				
				var image = animateFrom.firstDescendant(); 
				
				//image.observe('load',function(){
					
					animateTo.show();
					animateTo.relativize();
					
					animateTo.style.top='0px';
					var animInterval = setInterval(function(){
						
						if(animateFrom.style.display!='none')animateFrom.hide();
						
						ctx.clearRect(0,0,dimX,dimY);
							ctx.drawImage(image,  
									parseInt((dimX-i)/2)-1,1,i,parseInt(dimY-1),parseInt((dimX-i)/2)-1,1,i,parseInt(dimY-1)); 
							/***/
							i-=sumX;
							k++;
							if(k>=49){
								clearInterval(animInterval);
								animateFrom.parentNode.removeChild(canvas);
								animateFrom.parentNode.removeChild(animateFrom);
								animateTo.style.top='0px';
								document.fire(animateTo.id +':loaded');
								
							}
					},40);
				//});
	}
});


/**
 * Cube
 */
transition.CubeMixer = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
		var dimX = animateFrom.firstDescendant().getWidth();
		var dimY = animateFrom.firstDescendant().getHeight();
		var image2 = new Image();
		image2.src = animateFrom.firstDescendant().src; 
		var image = new Image();
		image.src = animateTo.firstDescendant().src; 
		animateFrom.hide();
		animateTo.hide();
			var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;left:0px;',
				id:'cubeCanvas'
		});
		animateFrom.parentNode.insert(canvas);
		
		var ctx = $(canvas.id).getContext('2d');
		var RAD = Math.PI/180;
		var degree = 180;
		var degree2 = 90;
		var j = 0;
		var j2 = 0;
		
		image.onload = function(){
		/**TRYOUT*/
		imageArray = {};
		image2Array = {};
		for(var i=0; i<dimX-2; i+=4){
			imageArray[i] = new Element("canvas",{width:4,height:dimY});
			var imgctx = imageArray[i].getContext("2d"); 
			imgctx.drawImage(image, i, 0, 4, dimY, 0, 0, 4, dimY);
			image2Array[i] = new Element("canvas",{width:4,height:dimY});
			var img2ctx = image2Array[i].getContext("2d"); 
			img2ctx.drawImage(image2, i, 0, 4, dimY, 0, 0, 4, dimY);
			 
		}
		/**EOF*/
		ctx.mozImageSmoothingEnabled = false; 
		ctx.webkitImageSmoothingEnabled = false;
		
		var inter = setInterval(function(){
			ctx.clearRect(0, 0, dimX, dimY);
			function processFrame(){
				try{
					if(!j||j =='undefined')   j = 0;
					var centerx = dimX/2 -18*j;
					var centery = dimY/2;
					var radius = dimX/2;
					degree += 4;
					degree %= 360;
					var angle = degree*RAD;
					var prepx = Math.cos(angle);
					var prepz = Math.sin(angle);
					j++;
					for(var i=0; i<dimX-2; i+=4){
						var dist = radius-i;
						var x = prepx*dist;
						var y = 0;
						var z = prepz*dist;
						var height = Math.round(dimY+(z*0.5));
						
						var _x = Math.round(x+centerx);
						var _y = y+centery;
						
						
						ctx.drawImage(image2Array[i], _x, Math.round(_y-(height/2)), 4, height);
					}
				}
				catch(err){
					console.log(err);
				}
			}
			
			function processBackFrame(){
				try{
						
					if(!j2||j2 =='undefined')  j2 = 0;
					var centerx = dimX - 18*j2;
					var centery = dimY/2;
					var radius = dimX/2;
					degree2 += 4;
					degree2 %= 360;
					var angle = degree2*RAD;
					var prepx = Math.cos(angle);
					var prepz = Math.sin(angle);
					++j2;
						
					for(var i=0; i<dimX-2; i+=4){
						var dist = radius-i;
						var x = prepx*dist;
						var y = 0;
						var z = prepz*dist;
						var height = Math.round(dimY+(z*0.5));
							
						var _x = Math.round(x+centerx);
						var _y = y+centery;
						Try.these(
							function(){ctx.drawImage(imageArray[i], _x, Math.round(_y-(height/2)), 4, height);}
						);
							
						if(degree2>=180){
							clearInterval(inter);
							delete imageArray;
							delete image2Array;
							animateFrom.parentNode.removeChild(canvas);
							animateFrom.parentNode.removeChild(animateFrom);
							animateTo.show();
							animateTo.relativize();
							animateTo.style.top='0px';
							document.fire(animateTo.id +':loaded');
								
								
						}
					}
					}
					catch(err){
						console.log(err);
					}
				}
			
				processFrame();
				processBackFrame();
			}.bind(this),33);
		}.bind(this);	
	}
});


/**
 * Cube Reverse
 */
transition.Reverse_CubeMixer = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		var dimX = animateFrom.firstDescendant().getWidth();
		var dimY = animateFrom.firstDescendant().getHeight();
		var image2 = animateFrom.firstDescendant(); 
		var image = animateTo.firstDescendant(); 
		animateFrom.hide();
		animateTo.hide();
			var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;',
				id:'cubeCanvas'
		});
		
		animateFrom.parentNode.insert(canvas);
		
		var ctx = $(canvas.id).getContext('2d');
		var RAD = Math.PI/180;
		var degree = 180;
		var degree2 = 270;
		var j = 0;
		var j2 = 0;
		
		image.onload = function(){
		/**TRYOUT*/
		imageArray = {};
		image2Array = {};
		for(var i=0; i<dimX-2; i+=4){
			imageArray[i] = new Element("canvas",{width:4,height:dimY});
			var imgctx = imageArray[i].getContext("2d"); 
			imgctx.drawImage(image, i, 0, 4, dimY, 0, 0, 4, dimY);
			image2Array[i] = new Element("canvas",{width:4,height:dimY});
			var img2ctx = image2Array[i].getContext("2d"); 
			img2ctx.drawImage(image2, i, 0, 4, dimY, 0, 0, 4, dimY);
			 
		}
		/**EOF*/
		ctx.mozImageSmoothingEnabled = false; 
		ctx.webkitImageSmoothingEnabled = false;
		
		var inter = setInterval(function(){
			ctx.clearRect(0, 0, dimX, dimY);
			function processFrame(){
				if(!j||j =='undefined')   j = 0;
				var centerx = dimX/2 +18*j;
				var centery = dimY/2;
				var radius = dimX/2;
			
				degree -= 4;
				degree %= 360;
				
				var angle = degree*RAD;
				var prepx = Math.cos(angle);
				var prepz = Math.sin(angle);
				j++;
				for(var i=0; i<dimX-2; i+=4){
					var dist = radius-i;
					var x = prepx*dist;
					var y = 0;
					var z = prepz*dist;
					var height = dimY+(z*0.5);
					
					var _x = Math.round(x+centerx);
					var _y = y+centery;
					ctx.drawImage(image2Array[i], _x, _y-(height/2), 4, height);
					//ctx.drawImage(image2, i, 0, 8, dimY, _x, _y-(height/2), 8, height);
				}
			
			}
			
			
			function processBackFrame(){
					
					if(!j2||j2 =='undefined')  j2 = 0;
					var centerx = 0 + 18*j2;
					var centery = dimY/2;
					var radius = dimX/2;
					degree2 -= 4;
					degree2 %= 360;
					var angle = degree2*RAD;
					var prepx = Math.cos(angle);
					var prepz = Math.sin(angle);
					++j2;
					
					for(var i=0; i<dimX-2; i+=4){
						var dist = radius-i;
						var x = prepx*dist;
						var y = 0;
						var z = prepz*dist;
						var height = dimY+(z*0.5);
						/*ctx.save();
						if(degree < 90 || degree > 270){
							console.log('i"m here');
							ctx.translate(dimX, 0);
							ctx.scale(-1, 1);
							x *= -1;
						}*/
						var _x = Math.round(x+centerx);
						var _y = y+centery;
						Try.these(
							function(){
								ctx.drawImage(imageArray[i], _x, _y-(height/2), 4, height);
							});
						if(degree2<=180){
							delete imageArray;
							delete image2Array;
							canvas.parentNode.removeChild(canvas);
							animateFrom.parentNode.removeChild(animateFrom);
							clearInterval(inter);
							animateTo.show();
							animateTo.relativize();
							animateTo.style.top='0px';
							document.fire(animateTo.id +':loaded');
							
						}
					}
				}
		
				processFrame();
				processBackFrame();
			
			}.bind(this),33);
		
		}.bind(this);
	}
});
				
/**
 * Iris Heart
 */
transition.Iris_Heart = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		var dimX = animateFrom.getWidth();
		var dimY = animateFrom.getHeight();
		var startX = parseInt(dimX/2);
		var startY = parseInt(dimY/2);
		var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;',
				id:'irisHeartCanvas'
		});
		animateFrom.parentNode.insert(canvas);
		var ctx = $(canvas.id).getContext('2d');
		var i = 1;
		var j = 1;
		var k=0;
		var sumX = parseInt(dimX/50);
		var sumY = parseInt(dimY/50);
		animateTo.show();
		animateTo.relativize();
		
		animateFrom.parentNode.removeChild(animateFrom);
		animateTo.style.top='0px';
		var image = animateFrom.firstDescendant(); 
		var i =1;
		//image.observe('load',function(){
			//ctx.fillStyle = "rgba(0, 0, 0, 1)";	
		ctx.globalCompositeOperation="xor";
		var animInterval = setInterval(function(){
			Try.these(function(){
					if(k>=49){
						clearInterval(animInterval);
						animateFrom.hide();
						animateTo.style.top='0px';
						canvas.parentNode.removeChild(canvas);
						animateFrom.parentNode.removeChild(animateFrom);
						document.fire(animateTo.id +':loaded');
					}
				ctx.clearRect(0,0,dimX,dimY);
				ctx.save();
				ctx.translate(-20*k,-17*k);
				ctx.beginPath();  
				ctx.moveTo(startX+20*k,startY+15*k);  
				ctx.bezierCurveTo(startX*i,(startY-3)*i,(startX-5)*i,(startY-15)*i,(startX-25)*i,(startY-15)*i);  
				ctx.bezierCurveTo((startX-55)*i,(startY-15)*i,(startX-55)*i,(startY+22.5)*i,(startX-55)*i,(startY+22.5)*i);  
				ctx.bezierCurveTo((startX-55)*i,(startY+40)*i,(startX-35)*i,(startY+62)*i,startX*i,(startY+80)*i);  
				ctx.bezierCurveTo((startX+35)*i,(startY+62)*i,(startX+55)*i,(startY+40)*i,(startX+55)*i,(startY+22.5)*i);  
				ctx.bezierCurveTo((startX+55)*i,(startY+22.5)*i,(startX+55)*i,(startY-15)*i,(startX+25)*i,(startY-15)*i);  
				ctx.bezierCurveTo((startX+10)*i,(startY-15)*i,startX*i,(startY-3)*i,startX*i,startY*i);  
				ctx.fill();
				ctx.restore();
				ctx.drawImage(image,0,0,dimX,dimY);
				i+=0.05;
				k++;	
			}.bind(this))||'';	
		}.bind(this),33);
		//});
	}
});			

/**
 * Iris Circle
 */
transition.Iris_Circle = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		var dimX = animateFrom.firstDescendant().getWidth();
		var dimY = animateFrom.firstDescendant().getHeight();
		var startX = parseInt(dimX/2);
		var startY = parseInt(dimY/2);
		var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;left:0;',
				id:'irisCircleCanvas'
		});
		
		animateFrom.parentNode.insert(canvas);
		var ctx = $(canvas.id).getContext('2d');
		var i = 1;
		var k=0;
		var sumX = parseInt(dimX/50);
		var sumY = parseInt(dimY/50);
		animateTo.relativize();
		animateTo.show();
		
		$(canvas.id).parentNode.style.zIndex = 9999;
		
		var image = animateFrom.firstDescendant(); 
		var image2 = animateTo.firstDescendant(); 
		var i =1;
		var k=0;
		var animInterval = setInterval(function(){
				if(k>=49){
					clearInterval(animInterval);
					animateFrom.hide();
					animateTo.style.top='0px';
					animateFrom.parentNode.removeChild(canvas);
					animateFrom.parentNode.removeChild(animateFrom);
					document.fire(animateTo.id +':loaded');
				}
			Try.these(function(){
					$(canvas.id).width=$(canvas.id).width;
					 ctx.arc(startX,startY,30*i,0,Math.PI*2,true);
					 ctx.closePath();
					 ctx.clip();
					 ctx.drawImage(image2,0,0,dimX-2,dimY);
				 })||'';
			i+=0.5;
			k++;
		},33);
	}
});	


/**
 * Iris Star
 */
transition.Iris_Star = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		var dimX = animateFrom.getWidth();
		var dimY = animateFrom.getHeight();
		var startX = parseInt(dimX/2);
		var startY = parseInt(dimY/2);
		var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;',
				id:'irisStarCanvas'
		});
		
		animateFrom.parentNode.insert(canvas);
		var ctx = $(canvas.id).getContext('2d');
		var i = 1;
		var k=0;
		var step = Math.round((parseInt(dimX/50)+parseInt(dimY/50))/1.2);
		
		animateTo.relativize();
		animateTo.show();
		
		$(canvas.id).parentNode.style.zIndex = 9999;
		
		var image = animateFrom.firstDescendant(); 
		var image2 = animateTo.firstDescendant(); 
		var k=0;
		var animInterval = setInterval(function(){
				if(k>=49){
					clearInterval(animInterval);
					animateFrom.hide();
					animateTo.style.top='0px';
					animateFrom.parentNode.removeChild(canvas);
					animateFrom.parentNode.removeChild(animateFrom);
					document.fire(animateTo.id +':loaded');
				}
			Try.these(function(){
					$(canvas.id).width=$(canvas.id).width;
					ctx.save();  
					ctx.translate(startX, startY);  
					var r = step * k;
					ctx.beginPath();  
					   ctx.moveTo(r,0);  
					   ctx.rotate(-0.31);  
					   for (var i=0;i<11;i++){  
					     ctx.rotate(Math.PI/5);  
					     if(i%2 == 0) {  
					       ctx.lineTo((r/0.525731)*0.200811,0);  
					     } else {  
					       ctx.lineTo(r,0);  
					     }  
					   }  
					 ctx.closePath();  
					 ctx.restore();
					 
					 ctx.clip();
					 ctx.drawImage(image2,0,0,dimX-2,dimY);
				 })||'';
			k++;
		},33);
	}
});	


/**
 * IrisRectangle
 */
transition.Iris_Rectangle = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		var dimX = animateFrom.firstDescendant().getWidth();
		var dimY = animateFrom.firstDescendant().getHeight();
		
		var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;',
				id:'irisRectangleCanvas'
		});
		animateFrom.parentNode.insert(canvas);
		var ctx = $(canvas.id).getContext('2d');
		var i = 1;
		var j = 1;
		var k=0;
		var sumX = parseInt(dimX/50);
		var sumY = parseInt(dimY/50);
		
		var image = animateTo.firstDescendant(); 
		image.observe('load',function(){
			var animInterval = setInterval(function(){
				
					ctx.drawImage(image,  
							parseInt((dimX-i)/2),parseInt((dimY-j)/2),i,j,parseInt((dimX-i)/2),parseInt((dimY-j)/2),i,j); 
					/***/
					i+=sumX;
					j+=sumY;
					k++;
					if(k>=49){
						clearInterval(animInterval);
						animateTo.show();
						animateTo.relativize();
						animateFrom.parentNode.removeChild(canvas);
						animateFrom.parentNode.removeChild(animateFrom);
						animateTo.style.top='0px';
						document.fire(animateTo.id +':loaded');
						
					}
			},40);
		});
		
	}
});

/**
 * Spotlight
 */
transition.Spotlight = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		var dimX = animateFrom.getWidth();
		var dimY = animateFrom.getHeight();
		var startX = parseInt(dimX/2);
		var startY = parseInt(dimY/2);
		var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;',
				id:'spotlightCanvas'
		});
		animateFrom.parentNode.insert(canvas);
		var ctx = $(canvas.id).getContext('2d');
		var i = 1;
		var k=0;
		var sumX = parseInt(dimX/50);
		var sumY = parseInt(dimY/50);
		animateTo.show();
		animateTo.relativize();
		$(canvas.id).parentNode.style.zIndex = 9999;
		
		var image = animateFrom.firstDescendant(); 
		var image2 = animateTo.firstDescendant(); 
		var i =1;
		var k=0;
			ctx.drawImage(image,0,0,dimX,dimY);
		var animInterval = setInterval(function(){
				if(k>=49){
					clearInterval(animInterval);
					animateFrom.hide();
					animateTo.style.top='0px';
					animateFrom.parentNode.removeChild(canvas);
					animateFrom.parentNode.removeChild(animateFrom);
					document.fire(animateTo.id +':loaded');
				}
	
			Try.these(function(){
			$(canvas.id).width=$(canvas.id).width;
			ctx.beginPath();
			ctx.moveTo(dimX/2,0); 
			ctx.lineTo(dimX/2 + k*100,dimY-15*k);
			ctx.moveTo(dimX/2,0); 
			ctx.lineTo(dimX/2 -  k*100,dimY-15*k);
			ctx.lineTo(dimX/2,dimY*k);
			ctx.lineTo(dimX/2 + k*100,dimY-15*k);
			ctx.closePath();
			ctx.clip();
			ctx.drawImage(image2,0,0,dimX,dimY);})||'';
			 i+=0.5;
			 k++;
		},33);
	}
});	

/**
 * Jaws
 */
transition.Jaws = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		
		
		var dimX = animateFrom.firstDescendant().getWidth();
		var dimY = animateFrom.firstDescendant().getHeight();
		var startX = parseInt(dimX/2);
		var startY = parseInt(dimY/2);
		var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;left:0px;',
				id:'jawsCanvas'
		});
		animateFrom.parentNode.insert(canvas);
		var ctx = $(canvas.id).getContext('2d');
		var sumX = parseInt(dimX/50);
		var sumY = parseInt(dimY/50);
		animateTo.show();
		animateTo.relativize();
		$(canvas.id).parentNode.style.zIndex = 9999;
		var image = new Image();
		var image2 = new Image();
		var k=1;
		var th = 20;
		var xInterval = dimX/10;
		image2.observe("load",function(){
			var animInterval = setInterval(function(){
					if(k>=28){
						clearInterval(animInterval);
						animateFrom.hide();
						animateTo.style.top='0px';
						animateFrom.parentNode.removeChild(canvas);
						animateFrom.parentNode.removeChild(animateFrom);
						document.fire(animateTo.id +':loaded');
					}
				Try.these(function(){
				$(canvas.id).width=$(canvas.id).width;
				ctx.beginPath();
				ctx.moveTo(0,dimY/2 -(sumY*k));
				/**TOP JAW*/
				ctx.lineTo(xInterval*1,dimY/2 -(sumY*k)-4*sumY); 
				ctx.lineTo(xInterval*2,dimY/2 -(sumY*k));
				ctx.lineTo(xInterval*3,dimY/2 -(sumY*k)-4*sumY);
				ctx.lineTo(xInterval*4,dimY/2 -(sumY*k));
				ctx.lineTo(xInterval*5,dimY/2 -(sumY*k)-4*sumY);
				ctx.lineTo(xInterval*6,dimY/2 -(sumY*k));
				ctx.lineTo(xInterval*7,dimY/2 -(sumY*k)-4*sumY);
				ctx.lineTo(xInterval*8,dimY/2 -(sumY*k));
				ctx.lineTo(xInterval*9,dimY/2 -(sumY*k)-4*sumY);
				ctx.lineTo(xInterval*10,dimY/2 -(sumY*k));
				/**BOTTOM JAW*/
				ctx.lineTo(xInterval*10,dimY/2 +(sumY*k));
				ctx.lineTo(xInterval*9,dimY/2 +(sumY*k)-4*sumY);
				ctx.lineTo(xInterval*8,dimY/2 +(sumY*k));
				ctx.lineTo(xInterval*7,dimY/2 +(sumY*k)-4*sumY);
				ctx.lineTo(xInterval*6,dimY/2 +(sumY*k));
				ctx.lineTo(xInterval*5,dimY/2 +(sumY*k)-4*sumY);
				ctx.lineTo(xInterval*4,dimY/2 +(sumY*k));
				ctx.lineTo(xInterval*3,dimY/2 +(sumY*k)-4*sumY);
				ctx.lineTo(xInterval*2,dimY/2 +(sumY*k));
				ctx.lineTo(xInterval*1,dimY/2 +(sumY*k)-4*sumY); 
				ctx.lineTo(0,dimY/2 +(sumY*k));
				/**EOF*/
				ctx.closePath();
				ctx.clip();
				ctx.drawImage(image2,0,0,dimX-2,dimY);})||'';					 
				k++; 
			}.bind(this),33);
		}.bind(this));
		
		image2.src = animateTo.firstDescendant().src; 
		image.src = animateFrom.firstDescendant().src;
		
		function drawTop(start,offset){
			try{
			ctx.moveTo(0,start - offset); 
			$R(1,10).each(function(num){
				
				if(num%2==0) var yPos = start - offset;
				else var yPos = start + offset;
				ctx.lineTo(xInterval*num,yPos); 
			}.bind(this));
			}
			catch(err){
				console.log(err);
			}
		}
	}
});



/**
 * Clock Face
 */
transition.Clock_Face = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		var dimX = animateFrom.firstDescendant().getWidth();
		var dimY = animateFrom.firstDescendant().getHeight();
		var radius = dimX + dimY /2;
		var stepDegree = 360/50;
		
		var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;left:0px;',
				id:'clockFaceCanvas'
		});
		animateFrom.parentNode.insert(canvas);
		animateTo.hide();
		var ctx = $(canvas.id).getContext('2d'); 
		var image = new Element("img",{src:animateFrom.firstDescendant().src}); 
		var image2 = new Element("img",{src:animateTo.firstDescendant().src});
		$(canvas.id).parentNode.style.zIndex = 9999;
		
		var k=1;	
		var i=1;			
		image2.observe("load", function(){
				var animInterval = setInterval(function(){
						if(k>=50){
							clearInterval(animInterval);
							animateTo.show();
							animateTo.relativize();
							animateFrom.hide();
							animateTo.style.top='0px';
							animateFrom.parentNode.removeChild(canvas);
							animateFrom.parentNode.removeChild(animateFrom);
							document.fire(animateTo.id +':loaded');
						}
					var rad = (Math.PI/180)*270 + (Math.PI/180)*i;
					Try.these(function(){
						$(canvas.id).width=$(canvas.id).width;
						ctx.beginPath();
						ctx.moveTo(0,0);
						ctx.lineTo(dimX,0);
						ctx.lineTo(dimX,dimY);
						ctx.lineTo(0,dimY);
						ctx.lineTo(0,0);
								ctx.moveTo(dimX/2 ,dimY/2);
								ctx.arc(dimX/2, dimY/2, radius, (Math.PI/180)*270, rad, true);
								ctx.lineTo(dimX/2 ,dimY/2);
						ctx.closePath();
						ctx.clip();
						
						ctx.drawImage(image2,0,0,dimX-2,dimY);
					})||'';			
				
				k++; 
				i+=stepDegree;
			}.bind(this),33);
		}.bind(this));

	}
});

/**
 * Windmill
 */
transition.Windmill = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		
		if(Prototype.Browser.MobileSafari) $$("video").each(function(el){
			try{
				el.pause();
			}
			catch(err){
				
			}
		});
		var dimX = animateFrom.firstDescendant().getWidth();
		var dimY = animateFrom.firstDescendant().getHeight();
		var radius = dimX + dimY /2;
		//var stepDegree = 1.8;
		var stepDegree = 3;
		var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:9999;top:0px;left:0px;',
				id:'windMillCanvas'
		});
		animateFrom.parentNode.insert(canvas);
		animateTo.hide();
		var ctx = $(canvas.id).getContext('2d'); 
		var image2 = new Image();
		var k=1;	
		var i=90;		
		canvas.setStyle("-webkit-image-rendering:optimizeSpeed !important;" +
						"image-rendering: optimizeSpeed !important;");
		canvas.style.setProperty("image-rendering", "-webkit-optimize-contrast", "important");

		
		console.log(canvas.style.imageRendering);
		image2.observe("load",function(e){
				var animInterval = setInterval(function(){
						if(k>=30){
							clearInterval(animInterval);
							animateTo.show();
							animateTo.relativize();
							animateFrom.hide();
							animateTo.style.top='0px';
							animateFrom.parentNode.removeChild(canvas);
							animateFrom.parentNode.removeChild(animateFrom);
							document.fire(animateTo.id +':loaded');
						}
						
					var rad0 = (Math.PI/180)*270 + (Math.PI/180)*i;
					var rad90 = (Math.PI/180)*360 + (Math.PI/180)*i;
					var rad180 = (Math.PI/180)*90 + (Math.PI/180)*i;
					var rad270 = (Math.PI/180)*180 + (Math.PI/180)*i;
					Try.these(function(){
						$(canvas.id).width=$(canvas.id).width;
						//ctx.clearRect(0,0,dimX,dimY);
						ctx.beginPath();
						ctx.moveTo(0,0);
						ctx.lineTo(dimX,0);
						ctx.lineTo(dimX,dimY);
						ctx.lineTo(0,dimY);
						ctx.lineTo(0,0);
								ctx.moveTo(dimX/2 ,dimY/2);
								ctx.arc(dimX/2, dimY/2, radius, (Math.PI/180)*270, rad0, false);
								ctx.lineTo(dimX/2 ,dimY/2);
							
								ctx.moveTo(dimX/2 ,dimY/2);
								ctx.arc(dimX/2, dimY/2, radius, (Math.PI/180), rad90, true);
								ctx.lineTo(dimX/2 ,dimY/2);
								
								ctx.moveTo(dimX/2 ,dimY/2);
								ctx.arc(dimX/2, dimY/2, radius, (Math.PI/180)*90, rad180, false);
								ctx.lineTo(dimX/2 ,dimY/2);
								
								ctx.moveTo(dimX/2 ,dimY/2);
								ctx.arc(dimX/2, dimY/2, radius, (Math.PI/180)*180, rad270, true);
								ctx.lineTo(dimX/2 ,dimY/2);
								
						ctx.closePath();
						ctx.clip();
						
						ctx.drawImage(image2,0,0,dimX,dimY);
					})||'';			
				
				k++; 
				i+=stepDegree;
			}.bind(this),33);
		}.bind(this));
		
		image2.src = animateTo.firstDescendant().src;

	}
});


/**
 * Waterfall
 */
transition.Waterfall = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		var dimX = animateFrom.firstDescendant().getWidth();
		var dimY = animateFrom.firstDescendant().getHeight();
		var stepX = dimX/24;
		var stepY = parseInt(dimY/10);
		
		var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;left:0px;',
				id:'waterfallCanvas'
		});
		animateFrom.parentNode.insert(canvas);
		var ctx = $(canvas.id).getContext('2d'); 
		animateTo.show();
		animateTo.relativize();
		$(canvas.id).parentNode.style.zIndex = 9999;
		
		var image = animateFrom.firstDescendant(); 
		var image2 = animateTo.firstDescendant(); 
		var k=0;
		var direction ='left';
		var i = 1;
		//var rectHeight = sumY;
		
				var animInterval = setInterval(function(){
						if(k>=40){
							clearInterval(animInterval);
							animateFrom.hide();
							animateTo.style.top='0px';
							animateFrom.parentNode.removeChild(canvas);
							animateFrom.parentNode.removeChild(animateFrom);
							document.fire(animateTo.id +':loaded');
						}
					
					Try.these(function(){
						$(canvas.id).width=$(canvas.id).width;
						ctx.beginPath();
						for(var i=0;i<=23;i++){
							
								ctx.moveTo(stepX*i ,0);
								ctx.lineTo(stepX*i,stepY*(k-i)); 
								ctx.lineTo(stepX*i + stepX,stepY*(k-i));
								ctx.lineTo(stepX*i + stepX,0);
								ctx.lineTo(stepX*i ,0);
	
						}
						ctx.closePath();
						ctx.clip();
						
						ctx.drawImage(image2,0,0,dimX-2,dimY);
					})||'';			
				
			k++; 
		}.bind(this),33);
		
	}
});


/**
 * Kaleidoscope
 */
transition.Kaleidoscope = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		/**Definig dimension vars*/
		var dimX = animateFrom.firstDescendant().getWidth();
		var dimY = animateFrom.firstDescendant().getHeight();
		var arrX = [Math.round(dimX/6),Math.round(dimX/2),Math.round(dimX/6*5)];
		var arrY = [Math.round(dimY/6),Math.round(dimY/2),Math.round(dimY/6*5)];
		var stepX = parseInt(dimX/3/50);
		var stepY = parseInt(dimY/3/50);
		console.log(arrX);
		console.log(arrY);
		console.log(stepX);
		var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;left:0px;',
				id:'kaleidoscopeCanvas'
		});
		animateFrom.parentNode.insert(canvas);
		var ctx = $(canvas.id).getContext('2d');
		
		animateTo.hide();
		animateTo.relativize();
		$(canvas.id).parentNode.style.zIndex = 9999;
		
		var image = animateFrom.firstDescendant(); 
		var image2 = animateTo.firstDescendant(); 
		var k=1;
		var i = 1;
		var j = 1;
		var rectHeight = sumY;
		var animInterval = setInterval(function(){
				if(k>=50){
					clearInterval(animInterval);
					animateTo.show();
					animateFrom.hide();
					animateTo.style.top='0px';
					animateFrom.parentNode.removeChild(canvas);
					animateFrom.parentNode.removeChild(animateFrom);
					document.fire(animateTo.id +':loaded');
				}
			
			Try.these(function(){
				$(canvas.id).width=$(canvas.id).width;
				ctx.beginPath();
				for(var i=0;i<=2;i++){
					for(var j=0;j<=2;j++){
						ctx.moveTo(arrX[j] - (stepX*k),arrY[i]);
						ctx.lineTo(arrX[j],arrY[i]-(stepY*k)); 
						ctx.lineTo(arrX[j] + (stepX*k),arrY[i]);
						ctx.lineTo(arrX[j],arrY[i]+(stepY*k));
						ctx.lineTo(arrX[j] - (stepX*k),arrY[i]);
					}
				}
				ctx.closePath();
				ctx.clip();
				
				ctx.drawImage(image2,0,0,dimX-2,dimY);
			})||'';			
			
			k++; 
		}.bind(this),33);
		
	}
});
			

/**
 * Open Sesame
 */
transition.Open_Sesame = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		var dimX = animateFrom.getWidth();
		var dimY = animateFrom.getHeight();
		//var maxWidth = Math.sqrt(dimX*dimX+dimY*dimY)/8;
		//var maxWidth =dimX/4;
		var maxWidth = Math.sqrt((dimX/2*dimX/2))/2;
		var step = maxWidth/40;
		var arrX = dimX/2;
		var arrY = dimY/2;
		//var stepX = (dimX)/2/40;
		//var stepY = (dimY)/2/40;
		var stepX = Math.sqrt((2*step)*(2*step)/2)*(0.5+Math.sqrt(dimX/dimY));
		var stepY = Math.sqrt((2*step)*(2*step)/2)*(0.37+Math.sqrt(dimY/dimX));
		
		var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;',
				id:'waterfallCanvas'
		});
		animateFrom.parentNode.insert(canvas);
		var ctx = $(canvas.id).getContext('2d'); 
		animateTo.show();
		animateTo.relativize();
		$(canvas.id).parentNode.style.zIndex = 9999;
		
		var image = animateFrom.firstDescendant(); 
		var image2 = animateTo.firstDescendant(); 
		var k=0;
		var i = 1;
		
				var animInterval = setInterval(function(){
						if(k>=40){
							clearInterval(animInterval);
							animateFrom.hide();
							animateTo.style.top='0px';
							animateFrom.parentNode.removeChild(canvas);
							animateFrom.parentNode.removeChild(animateFrom);
							document.fire(animateTo.id +':loaded');
						}
					
					//Try.these(function(){
						$(canvas.id).width=$(canvas.id).width;
						ctx.globalCompositeOperation = "destination-over";
						ctx.beginPath();
						/*for(var i=0;i<=23;i++){
							
								ctx.moveTo(stepX*i ,0);
								ctx.lineTo(stepX*i,stepY*(k-i)); 
								ctx.lineTo(stepX*i + stepX,stepY*(k-i));
								ctx.lineTo(stepX*i + stepX,0);
								ctx.lineTo(stepX*i ,0);
	
						}*/
						ctx.moveTo(-step*k,step*k);
						ctx.lineTo(step*k,-step*k);
						ctx.lineTo(dimX+step*k,dimY-step*k);
						ctx.lineTo(dimX-step*k,dimY+step*k);
						ctx.lineTo(-step*k,step*k);
					
						ctx.moveTo(arrX - (stepX*k),arrY);
						ctx.lineTo(arrX,arrY-(stepY*k)); 
						ctx.lineTo(arrX + (stepX*k),arrY);
						ctx.lineTo(arrX,arrY+(stepY*k));
						ctx.lineTo(arrX - (stepX*k),arrY);
						
						ctx.moveTo(dimX + step*k,step*k);
						ctx.lineTo(dimX - step*k,-step*k);
						ctx.lineTo(-step*k,dimY - step*k);
						ctx.lineTo(step*k,dimY+step*k);
						ctx.lineTo(dimX + step*k,step*k);
						
						ctx.closePath();
						ctx.clip();
						//ctx.fill();
						ctx.drawImage(image2,0,0,dimX-2,dimY);
					//})||'';			
				
			k++; 
		}.bind(this),33);
		
	}
});


/**
 * WipeDown
 */
transition.Wipe_Down = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		try{
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		var dimX = animateFrom.firstDescendant().getWidth();
		var dimY = animateFrom.firstDescendant().getHeight();
		
		var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;',
				id:'wipeDownCanvas'
		});
		animateFrom.parentNode.insert(canvas);
		animateTo.show();
		animateTo.relativize();
		animateTo.style.top='0px';
		var ctx = $(canvas.id).getContext('2d');
		var i = 1;
		var j = 1;
		var k=0;
		
		var sumY = parseInt(dimY/50);
		$(animateFrom).hide();
		
		var image = animateFrom.firstDescendant(); 
		ctx.drawImage(image,  
				0,0,dimX,dimY);
		//image.observe('load',function(){
			var animInterval = setInterval(function(){
				$(canvas.id).width = $(canvas.id).width;
				ctx.clearRect(0,0,dimX,dimY);
				ctx.drawImage(image,  
							1,parseInt(j)-1,parseInt(dimX-3),parseInt(dimY-j)-1,1,parseInt(j),parseInt(dimX-3),parseInt(dimY-j)); 
					/***/
					j+=sumY;
					k++;
					if(k>=49){
						clearInterval(animInterval);
						animateFrom.parentNode.removeChild(canvas);
						animateFrom.parentNode.removeChild(animateFrom);
						document.fire(animateTo.id +':loaded');
					}
			},33);
		//});
	
		}
		catch(err){
			console.log(err);
		}	
	}
});

/**
 * Wipe_Up
 */
transition.Wipe_Up = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
		try{
			animateFrom.childElements().each(function(el){
				Try.these(
						function(){el.style.zIndex='0';}
					);
			});
			var dimX = animateFrom.firstDescendant().getWidth();
			var dimY = animateFrom.firstDescendant().getHeight();
			
			var canvas = new Element('canvas',{
					width: dimX,
					height:dimY,
					style:'position:absolute;z-index:999;top:0px;',
					id:'irisRectangleCanvas'
			});
			animateFrom.parentNode.insert(canvas);
			animateTo.show();
			animateTo.relativize();
			animateTo.style.top='0px';
			var ctx = $(canvas.id).getContext('2d');
			var i = 1;
			var j = 1;
			var k=0;
			
			var sumY = parseInt(dimY/50);
			animateFrom.hide();
			var image = animateFrom.firstDescendant(); 
			ctx.drawImage(image,  
					0,0,dimX,dimY);
			//image.observe('load',function(){
				var animInterval = setInterval(function(){
					$(canvas.id).width = $(canvas.id).width;
					ctx.clearRect(0,0,dimX,dimY);	
					ctx.drawImage(image,  
								1,1,parseInt(dimX-3),parseInt(dimY-j),1,1,parseInt(dimX-3),parseInt(dimY-j)); 
						/***/
						//i+=sumX;
						
						j+=sumY;
						k++;
						if(k>=49){
							clearInterval(animInterval);
							
							
							animateFrom.parentNode.removeChild(canvas);
							animateFrom.parentNode.removeChild(animateFrom);
							
							document.fire(animateTo.id +':loaded');
							
						}
				},33);
			//});
		
		}
		catch(err){
			console.log(err);
		}
	}
});


/**
 * Wipe_Left
 */
transition.Wipe_Left = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
			try{
				animateFrom.childElements().each(function(el){
					Try.these(
							function(){el.style.zIndex='0';}
						);
				});
				var dimX = animateFrom.firstDescendant().getWidth();
				var dimY = animateFrom.firstDescendant().getHeight();
				
				var canvas = new Element('canvas',{
						width: dimX,
						height:dimY,
						style:'position:absolute;z-index:999;top:0px;',
						id:'irisRectangleCanvas'
				});
				animateFrom.parentNode.insert(canvas);
				animateTo.show();
				animateTo.relativize();
				animateTo.style.top='0px';
				var ctx = $(canvas.id).getContext('2d');
				var i = 1;
				var j = 1;
				var k=0;
				
				var sumY = parseInt(dimX/50);
				animateFrom.hide();
				var image = animateFrom.firstDescendant(); 
				ctx.drawImage(image,  
						0,0,dimX,dimY);
					var animInterval = setInterval(function(){
						$(canvas.id).width = $(canvas.id).width;
						ctx.clearRect(0,0,dimX,dimY);
						ctx.drawImage(image,  
									1,1,parseInt(dimX-j)-2,parseInt(dimY-1),1,1,parseInt(dimX-j),parseInt(dimY-1)); 
							/***/
							j+=sumY;
							k++;
							if(k>=49){
								clearInterval(animInterval);
								animateFrom.parentNode.removeChild(canvas);
								animateFrom.parentNode.removeChild(animateFrom);
								document.fire(animateTo.id +':loaded');
							}
					},33);
		}
		catch(err){
			console.log(err);
		}	
	}
});



/**
 * Wipe_Right
 */
transition.Wipe_Right = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
		try{
			animateFrom.childElements().each(function(el){
				Try.these(
						function(){el.style.zIndex='0';}
					);
			});
			var dimX = animateFrom.firstDescendant().getWidth();
			var dimY = animateFrom.firstDescendant().getHeight();
		
			var canvas = new Element('canvas',{
					width: dimX,
					height:dimY,
					style:'position:absolute;z-index:9999;top:0px;left:0px;',
					id:'wipeRightCanvas'
			});
			
			animateFrom.parentNode.insert(canvas);
			var ctx = $(canvas.id).getContext('2d');
			var i = 1;
			var j = 1;
			var k=0;
			var sumY = parseInt(dimX/50);
			var image = new Image(); 
			image.src = animateFrom.firstDescendant().src;
			image.onload = function(){   
				ctx.drawImage(image,  
						0,0,dimX,dimY);
				animateTo.show();
				animateFrom.hide();
				animateTo.relativize();
				animateTo.style.top='0px';
		console.log(dimX + " - " + dimY);	
		console.log(animateFrom.firstDescendant());
					var animInterval = setInterval(function(){
						
						ctx.clearRect(0,0,dimX,dimY);
						ctx.drawImage(image,  
									j,0,dimX-j, dimY,j,0,dimX-j, dimY); 
							/***/
							j+=sumY;
							k++;
							if(k>=49){
								clearInterval(animInterval);
								animateFrom.parentNode.removeChild(canvas);
								animateFrom.parentNode.removeChild(animateFrom);
								document.fire(animateTo.id +':loaded');
							}
					},33);
				
			}.bind(this);
		}
		catch(err){
			console.log(err);
		}	
	}
});


/**
 * Wiper
 */
transition.Wiper = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		var dimX = animateFrom.firstDescendant().getWidth();
		var dimY = animateFrom.firstDescendant().getHeight();
		var startX = parseInt(dimX/2);
		var startY = parseInt(dimY/2);
		var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;left:0px;',
				id:'wiperCanvas'
		});
		animateFrom.parentNode.insert(canvas);
		var ctx = $(canvas.id).getContext('2d');
		var i = 1;
		var k=0;
		var sumX = parseInt(dimX/50);
		var sumY = parseInt(dimY/50);
		animateTo.hide();
		$(canvas.id).parentNode.style.zIndex = 9999;
		
		var image = animateFrom.firstDescendant(); 
		var image2 = animateTo.firstDescendant(); 
		var i =1;
		var k=0;
			ctx.drawImage(image,0,0,dimX,dimY);
		var animInterval = setInterval(function(){
				if(k>=47){
					animateTo.show();
					animateTo.relativize();
					clearInterval(animInterval);
					animateFrom.hide();
					animateTo.style.top='0px';
					animateFrom.parentNode.removeChild(canvas);
					animateFrom.parentNode.removeChild(animateFrom);
					document.fire(animateTo.id +':loaded');
				}
	
			Try.these(function(){
			$(canvas.id).width=$(canvas.id).width;
			ctx.beginPath();
			ctx.moveTo(dimX/2,dimY); 
			ctx.lineTo(-100,dimY);
			ctx.lineTo(-100,-100*k*k);
			if(k<12)
				ctx.lineTo((90*k),-30*k);
			else
				ctx.lineTo((70*k),k*k/3);
			ctx.closePath();
			ctx.clip();
			ctx.drawImage(image2,0,0,dimX,dimY);})||'';
			i+=0.5;
			k++;
		},33);
	}
});

			
/**
 * Wipe Diagonal
 */
transition.Wipe_Diagonal = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
	
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		var dimX = animateFrom.getWidth();
		var dimY = animateFrom.getHeight();
		var startX = parseInt(dimX/2);
		var startY = parseInt(dimY/2);
		var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;',
				id:'wipeDiagonalCanvas'
		});
		animateFrom.parentNode.insert(canvas);
		var ctx = $(canvas.id).getContext('2d');
		var i = 1;
		var k=0;
		var sumX = parseInt(dimX/50);
		var sumY = parseInt(dimY/50);
		animateTo.show();
		animateTo.relativize();
		$(canvas.id).parentNode.style.zIndex = 9999;
		
		var image = animateFrom.firstDescendant(); 
		var image2 = animateTo.firstDescendant(); 
		var i =1;
		var k=0;
			ctx.drawImage(image,0,0,dimX,dimY);
		var animInterval = setInterval(function(){
				if(k>=49){
					clearInterval(animInterval);
					animateFrom.hide();
					animateTo.style.top='0px';
					animateFrom.parentNode.removeChild(canvas);
					animateFrom.parentNode.removeChild(animateFrom);
					document.fire(animateTo.id +':loaded');
				}
			Try.these(function(){
			$(canvas.id).width=$(canvas.id).width;
			ctx.beginPath();
			ctx.moveTo(0,0); 
			ctx.lineTo(sumX*2*k,0);
			ctx.lineTo(0,sumY*2*k);
		/*	if(k<12)
				ctx.lineTo((90*k),-30*k);
			else
				ctx.lineTo((70*k),k*k/3);*/
			ctx.closePath();
			ctx.clip();
			ctx.drawImage(image2,0,0,dimX,dimY);})||'';
			 i+=0.5;
			 k++;
		},33);
	
	}
});
			

/**
 * Zoom
 */
transition.Zoom = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
		
		animateFrom.childElements().each(function(el){
			Try.these(
					function(){el.style.zIndex='0';}
				);
		});
		animateTo.hide();
		var dimX = animateFrom.firstDescendant().getWidth();
		var dimY = animateFrom.firstDescendant().getHeight();
		var canvas = new Element("img",{src:animateTo.firstDescendant().src,style:"position:absolute;width:0px;height:0px;z-index:999;"});
		/*var canvas = new Element('canvas',{
				width: dimX,
				height:dimY,
				style:'position:absolute;z-index:999;top:0px;left:0px;',
				id:'zoomCanvas'
		});*/
		animateFrom.parentNode.insert(canvas);
		//var ctx = $(canvas.id).getContext('2d');
		var i = 1;
		var j = 1;
		var k=0;
		var sumX = parseInt(dimX/40);
		var sumY = parseInt(dimY/40);
		var image = animateTo.firstDescendant(); 
		
		image.observe('load',function(){
			var animInterval = setInterval(function(){
				try{
					/*ctx.drawImage(image,  
							0,0,dimX-3,dimY-3,parseInt((dimX-i)/2),parseInt((dimY-j)/2),i,j); */
					canvas.setStyle("left:"+parseInt((dimX-i)/2)+"px;top:" + parseInt((dimY-j)/2) + "px;width:"+i+"px;height:"+j+"px;");
					/***/
				}
				catch(err){
					
				}
				i+=sumX;
				j+=sumY;
				k++;
				if(k>=43){
					clearInterval(animInterval);
					animateTo.show();
					animateTo.relativize();
					animateFrom.parentNode.removeChild(canvas);
					animateFrom.parentNode.removeChild(animateFrom);
					animateTo.style.top='0px';
					document.fire(animateTo.id +':loaded');
					
				}
			},33);
		});
	
	}
});


/**
 * Copy Machine
 */
transition.Copy_Machine = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
		try{
			animateFrom.childElements().each(function(el){
				Try.these(
						function(){el.style.zIndex='0';}
					);
			});
			var dimX = animateFrom.firstDescendant().getWidth();
			var dimY = animateFrom.firstDescendant().getHeight();
			var canvas = new Element('canvas',{
					width: dimX,
					height:dimY,
					style:'position:absolute;z-index:999;top:0px;',
					id:'irisRectangleCanvas'
			});
			animateFrom.parentNode.insert(canvas);
			var ctx = $(canvas.id).getContext('2d');
			var i = 1;
			var j = 1;
			var k=0;
			var sumX = parseInt(dimX/33);
			var sumY = parseInt(dimY/33);
			var image = animateFrom.firstDescendant(); 
			var image2 = animateTo.firstDescendant(); 
			var mask = new Element('img',{src:"./templates/img/transitions/copyMachine.png",alt:"",width:100});
			animateFrom.insert(mask);
			
			image2.observe('load',function(){
				ctx.drawImage(image,0,0,dimX,dimY); 
				var animInterval = setInterval(function(){
					ctx.drawImage(image2,0,0,dimX,dimY);
					if(k<=33){
						ctx.drawImage(image,  
								i,1,parseInt(dimX-i)-2,dimY-1,i,1,parseInt(dimX-i)-2,dimY-1); 
						ctx.drawImage(mask,i-90,0,150,dimY);
						i+=sumX;
						j+=sumY;
					}
					else{
						ctx.drawImage(mask,i-90,0,150,dimY);
						i -=sumX;
					}
						
					k++;
					if(k>=66){
						clearInterval(animInterval);
						animateTo.show();
						animateTo.relativize();
						animateFrom.parentNode.removeChild(canvas);
						animateFrom.parentNode.removeChild(animateFrom);
						animateTo.style.top='0px';
						document.fire(animateTo.id +':loaded');
					}
					
				},33);
			});
		}
		catch(err){
			console.log(err);
		}
		
	}
});


/**
 * Swipe
 */
transition.Swipe = Class.create(transition.main,{
	run:function(animateFrom,animateTo,durr){
		 
		try{
			animateFrom.childElements().each(function(el){
				Try.these(
						function(){el.style.zIndex='0';}
					);
			});
			var dimX = animateFrom.firstDescendant().getWidth();
			var dimY = animateFrom.firstDescendant().getHeight();
			
			var canvas = new Element('canvas',{
					width: dimX,
					height:dimY,
					style:'position:absolute;z-index:999;top:0px;left:0px;',
					id:'irisRectangleCanvas'
			});
			animateFrom.parentNode.insert(canvas);
			var ctx = $(canvas.id).getContext('2d');
			var i = 1;
			var j = 1;
			var k=0;
			var sumX = parseInt(dimX/70);
			var sumY = parseInt(dimY/70);
			animateTo.hide();
			var image = animateFrom.firstDescendant(); 
			var image2 = animateTo.firstDescendant(); 
			image2.observe('load',function(){
				ctx.drawImage(image,0,0,dimX,dimY);
				ctx.globalAlpha = 0.06;
				var animInterval = setInterval(function(){
					setTimeout(function(){
						ctx.drawImage(image2,  
							0,0,i+7,dimY,0,0,i+7,dimY);
						}.bind(this),10);
					
					setTimeout(function(){
						ctx.drawImage(image2,  
							0,0,i+4,dimY,0,0,i+4,dimY);
					}.bind(this),11);
					
						ctx.drawImage(image2,  
								0,0,i,dimY,0,0,i,dimY); 
						/***/
						i+=sumX;
						j+=sumY;
						k++;
						if(i+4>=dimX) i = dimX-12;
						if(k>=79){
							clearInterval(animInterval);
							animateTo.show();
							animateTo.relativize();
							setTimeout(function(){document.fire(animateTo.id +':loaded');}.bind(this),250);
							animateFrom.parentNode.removeChild(canvas);
							animateFrom.parentNode.removeChild(animateFrom);
							animateTo.style.top='0px';
							
						}
				},33);
			});
		}
		catch(err){
			console.log(err);
		}
	}
});