/* FX.ROTATE */
(function($,$$) {

//IE 10 detection
Browser.ie10 = Browser.ie && !Browser.ie9 && navigator.userAgent.test(/Trident\/6\.0/);

//each browser has it own vendor prefix
if(Browser.chrome || Browser.safari) {
  Browser.vendorPrefix = '-webkit-';
}
else if(Browser.firefox) {
  Browser.vendorPrefix = '-moz-';
}
else if(Browser.opera) {
  Browser.vendorPrefix = '-o-';
}
else if(Browser.ie10 || Browser.ie9 || Browser.ie8) {
  Browser.vendorPrefix = '-ms-';
}
else {
  Browser.vendorPrefix = '';
}

Fx.Rotate = new Class({

  Extends : Fx,

  options : {
    fps : 40,
    ieFps : 30,
    origin : 'center center',
    link : 'cancel',
    normalizeDegreeAfterComplete : true
  },

  CIRCLE : 360,
  HALF_A_CIRCLE : 180,
  RIGHT_ANGLE : 90,

  initialize : function(element,options) {
    this.prefix = Browser.vendorPrefix;
    this.transforms = !Browser.ie || Browser.ie9 || Browser.ie10;
    this.element = $(element);
    this.accessor = '';

    this.parent(options);
    if(this.transforms) {
      var accessor = this.prefix.replace(/-/g,'');

      //all other browsers like the uppercase start value
      if(!Browser.ie9 && !Browser.ie10) {
        accessor = accessor.charAt(0).toUpperCase() + accessor.substr(1);
      }

      this.accessor = accessor + 'Transform';

      //set the default origin
      var accessorOrigin = accessor + 'TransformOrigin';
      this.element.style[accessorOrigin] = this.options.origin;

      //set the rotation method
      this.set = this._setTransformMethod();
    }
    else {
      this.options.fps = this.options.ieFps || this.options.fps;
      this.set = this._setIEMethod();
    }

    if(this.options.normalizeDegreeAfterComplete) {
      this.addEvent('complete',this.normalizeDegree.bind(this));
    }
  },

  start : function(from,to) {
    if(to == null) {
      to = from + '';
      from = this.getCurrentRotation().toInt();
      f = to.charAt(0);
      to = to.toInt();
      if(f=='+') {
        to = from + Math.abs(to);
      }
      else if(f == '-') {
        to = from - Math.abs(to);
      }
    }
    this.degreeFrom = from.toInt();
    this.degreeTo = to.toInt();
    this.parent(this.degreeFrom,this.degreeTo);
    return this;
  },

  getCurrentRotation : function() {

    var rotation;

    if(this.transforms) {

      //this is required to find the full css style for the element (style and css)

      var style;
      if(Browser.ie) {
        style = (this.element.style['transform'] || '') + ' ' +
                (this.element.style['-ms-transform'] || '') + ' ' +
                (this.element.currentStyle['transform'] || '') + ' ' +
                (this.element.currentStyle['-ms-transform'] || '') + ' ';
      }
      else {
        var accessor = this.accessor;
        if(!Browser.firefox) {
          accessor = Browser.vendorPrefix+'transform';
        }

        //get the full style ... in order of css3 style, css3 vendor style, css3 stylesheet, css3 vendor stylesheet
        style = (this.element.style['transform'] || '') + ' ' +
                (this.element.style[this.accessor] || '') + ' ' +
                (document.defaultView.getComputedStyle(this.element,null).getPropertyValue('transform') || '') +
                (document.defaultView.getComputedStyle(this.element,null).getPropertyValue(accessor) || '');
      }

      style = style.trim();
      if(style.length > 0) {
        var rotateResults = style.match(/rotate\((-?\d+).*?\)/);
        if(rotateResults && rotateResults.length > 1) {
          rotation = rotateResults && rotateResults.length > 1 ? rotateResults[1] : 0;
        }
        else {
          // this will return the default value based off the transform using the inverse of cos
          var matrixResults = style.match(/matrix\((.+?),(.+?),.+?\)/);
          if(matrixResults && matrixResults.length > 1) {
            var sintheta = matrixResults[2];
            var sin = Math.asin(sintheta);
            var deg = Math.round((sin * this.HALF_A_CIRCLE) / Math.PI);
            rotation = deg && deg != 0 ? deg : 0;
          }
        }
      }
    }

    if(rotation == null && Browser.ie && this.element.filters && this.element.filters.length > 0) { //ie
      var isMatrix, isBasic;
      for(var i in this.element.filters) {
        if(i == 'DXImageTransform.Microsoft.BasicImage') {
          isRotation = true;
          break;
        }
        if(i == 'DXImageTransform.Microsoft.Matrix') {
          isMatrix = true;
          break;
        }
      }

      if(isBasic) {
        var basic = this.element.filters('DXImageTransform.Microsoft.BasicImage');
        if(basic && basic.Rotation!=null) {
          rotation = Math.round(basic.Rotation * this.RIGHT_ANGLE);
        }
        this.element.filters(0).enabled = 0;
      }
      else if(isMatrix) {
        var matrix = this.element.filters('DXImageTransform.Microsoft.Matrix');
        matrix.SizingMethod = 'auto expand';
        if(matrix && matrix.M11) {
          var sintheta = matrix.M12;
          var cos = Math.asin(sintheta);
          var deg = Math.round((sin * this.HALF_A_CIRCLE) / Math.PI);
          rotation = deg && deg != 0 ? deg : 0;
        }
      }
    }

    return rotation || 0;
  },

  normalize : function(skip) {
    if(skip) {
      this.set(0);
    }
    else {
      var current = this.getCurrentRotation();
      var magnitude = Math.abs(current);
      var end = magnitude >= 180 ? 360 : 0;
      this.start(end);
    }
  },

  normalizeDegree : function() {
    var fin = this.degreeTo % this.CIRCLE;
    this.set(fin);
  },

  _setIEMethod : function() {

    //the element needs to have the boolean enabled : hasLayout (zoom does this)
    this.element.style.zoom = "1";
    this.deg2radians = Math.PI / this.HALF_A_CIRCLE;

    //normalize the rotation for ie
    var rotation = this.getCurrentRotation();

    //setup the first matrix values so that it won't flicker
    var rad = this.deg2radians * rotation;
    costheta = Math.cos(rad);
    sintheta = Math.sin(rad);
    this.element.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11="+costheta+", M12="+sintheta+", M21="+(0-sintheta)+", M22="+costheta+")";
    this.set(rotation);

    //setup the function for rotation for ie
    return function(rotation) {
      var rad = this.deg2radians * rotation;
      costheta = Math.cos(rad);
      sintheta = Math.sin(rad);
      this.element.filters(0).M11 = costheta;
      this.element.filters(0).M12 = -sintheta;
      this.element.filters(0).M21 = sintheta;
      this.element.filters(0).M22 = costheta;
    }.bind(this);
  },

  _setTransformMethod : function() {
    var prefix = Browser.vendorPrefix;
    return function(rotation) {
      this.element.style[this.accessor] = 'rotate('+rotation+'deg)';
    }.bind(this);
  }

});

Element.implement({

  rotate : function(fromOrTo,toOrSkip) {
    var rotate = $(this).get('rotate');
    if(toOrSkip === true) {
      rotate.set(fromOrTo);
    }
    else {
      rotate.start(fromOrTo,toOrSkip);
    }
    return rotate;
  },

  normalizeRotation : function(skip) {
    var rotate = $(this).get('rotate');
    rotate.normalize(skip);
    return rotate;
  }

});

Element.Properties.rotate = {

  get : function() {
    var rotate = $(this).retrieve('Fx.Rotate');
    if(!rotate) {
      this.set('rotate',{});
      rotate = $(this).retrieve('Fx.Rotate');
    }
    return rotate;
  },

  set : function(options) {
    var rotate = new Fx.Rotate(this,options);
    this.store('Fx.Rotate',rotate);
  }

};

})(document.id,$$);
/* END FX.ROTATE */

// Wenn Fenster-Grš§e verŠndert wird, auf †berlappung von Puppen und Container ŸberprŸfen
window.addEvent('resize', function() {
	// Cookie ŸberprŸfen
	if (!Cookie.read('hidePuppets')) {
		var checkExist = $('puppetWrap');
		if (checkExist) {
			$pWidth = $('puppetWrap').getSize().x;
			$cWidth = $('container').getSize().x;
		
			$pOffset = $('puppetWrap').offsetLeft;
			$cOffset = $('container').offsetLeft;
	
			if (($pOffset + $pWidth > $cOffset && $pOffset < $cOffset) || ($pOffset < $cOffset+$cWidth && $pOffset > $cOffset)) {
				$('puppetWrap').addClass('schliessen');
			}
			else{
				$('puppetWrap').removeClass('schliessen');
			}
		}
	}
})

window.addEvent('domready',function() {
if(!(Browser.Platform.ios || Browser.Platform.webos || Browser.Platform.android)) {

	$url = window.location;

	var showPuppen = function() {
		var el = new Element('a', {'href':$url, 'id': 'showPuppets'});
		var img= new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/addButton.png', 'title':'Puppen anzeigen', 'id':'showBtn'}).injectInside(el);
		el.injectTop($('wrapper'));
	}	
	showPuppen();
	$('showPuppets').setStyle('opacity', '1');
	
	var toolTipShow = new Tips($('showBtn'));
	
	$('showPuppets').setStyle('opacity', '0');
	$zufall = Number.random(1,5);
	$heightWindow = window.getSize().y;
	$widthWindow = window.getSize().x;	

	var puppe5 = function() {
		var addBlume = function() {
			var el = new Element('div', {'id': 'puppetWrap', 'class': 'blumeWrap'});
			var img = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/mitBlume/mitblume.png', 'id': 'mitblume'}).injectInside(el);
			var closeLink = new Element('a', {'href': $url, 'id':'closeLink'}).injectInside(el);
			var closeBtn = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/closeButton.png', 'id': 'close'}).injectInside(closeLink);			
			el.injectTop($('wrapper'));
		}
		addBlume();
	}	
	
		
	// PUPPENHAUFEN 
		var puppe4 = function() {
			var addSitzend = function() {
				var el = new Element('div', {'id': 'puppetWrap', 'class': 'sitzendWrap'});
				var img = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/sitzend/sitzend.png', 'id': 'sitzend'}).injectInside(el);
				var schild = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/sitzend/schildchen.png', 'id': 'schildchen'}).injectInside(el);
				var flatterschild = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/sitzend/flatterschild.png', 'id': 'flatterschild'}).injectInside(el);
				var schild2 = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/sitzend/schild2.png', 'id': 'schild2'}).injectInside(el);
				var schild3 = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/sitzend/schild3.png', 'id': 'schild3'}).injectInside(el);
				var closeLink = new Element('a', {'href': $url, 'id':'closeLink'}).injectInside(el);
				var closeBtn = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/closeButton.png', 'id': 'close'}).injectInside(closeLink);
				el.injectTop($('wrapper'));
			}
			addSitzend();
		}	
		
	// TISCH 
		var puppe3 = function() {
			var addTisch = function() {
				var el = new Element('div', {'id': 'puppetWrap', 'class': 'tischWrap'});
				var imgTisch = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/tischchen/tisch.png', 'id': 'tisch'}).injectInside(el);
				/*var imgWasser = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/tischchen/wasser2.png', 'id': 'wasser'}).injectInside(el);*/
				var wasserContainer = new Element('div', {'id': 'wasserContainer'}).injectInside(el);
				var wasser1 = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/tischchen/wasser_status1.png', 'id': 'wasser1'}).injectInside(wasserContainer);
				var wasser2 = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/tischchen/wasser_status2.png', 'id': 'wasser2'}).injectInside(wasserContainer);
				var wasser3 = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/tischchen/wasser_status3.png', 'id': 'wasser3'}).injectInside(wasserContainer);
				var wasser4 = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/tischchen/wasser_status4.png', 'id': 'wasser4'}).injectInside(wasserContainer);
				var wasser5 = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/tischchen/wasser_status5.png', 'id': 'wasser5'}).injectInside(wasserContainer);
				var closeLink = new Element('a', {'href': $url, 'id':'closeLink'}).injectInside(el);
				var closeBtn = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/closeButton.png', 'id': 'close'}).injectInside(closeLink);
				el.injectTop($('wrapper'));
			}
			addTisch();
				
			/*var wasser = new Fx.Rotate($('wasser'), {
				transition: 'cubic:inOut',
				duration: 2000,
				origin: 'right top'
			});
			var startWasserOben = function() {
				wasser.start(50).wait(1000).chain(startWasserUnten);
			}
			var startWasserUnten = function() {
				wasser.start(20);
			}
			startWasserOben.delay(5000);*/
			$animationSpeed = 250;
			
			var wasser1 = new Fx.Tween($('wasser1'), {duration: $animationSpeed,property: 'opacity',link: 'chain'});
			var wasser2 = new Fx.Tween($('wasser2'), {duration: $animationSpeed,property: 'opacity',link: 'chain'});
			var wasser3 = new Fx.Tween($('wasser3'), {duration: $animationSpeed,property: 'opacity',link: 'chain'});
			var wasser4 = new Fx.Tween($('wasser4'), {duration: $animationSpeed,property: 'opacity',link: 'chain'});
			var wasser5 = new Fx.Tween($('wasser5'), {duration: $animationSpeed,property: 'opacity',link: 'chain'});
			var wasserRotation = new Fx.Rotate($('wasserContainer'), {
				transition: 'cubic:inOut',
				duration: 2000,
				origin: 'right top',
				link: 'chain'
			});
			
			var stopWasser1 = function() {wasser1.start(0).chain(stopWasser2);}
			var stopWasser2 = function() {wasser2.start(0).chain(stopWasser3);}
			var stopWasser3 = function() {wasser3.start(0).chain(stopWasser4);}
			var stopWasser4 = function() {wasser4.start(0).chain(stopWasser5);}
			var stopWasser5 = function() {wasser5.start(0);}
			var stopWasserRotation = function() {wasserRotation.start(0);}
			
			var startWasser1 = function() {wasser1.start(1).chain(startWasser2);}
			var startWasser2 = function() {wasser2.start(1).chain(startWasser3);}
			var startWasser3 = function() {wasser3.start(1).chain(startWasser4);}
			var startWasser4 = function() {wasser4.start(1).chain(startWasser5);}
			var startWasser5 = function() {wasser5.start(1).wait(2000).chain(stopWasser1);}
			var startWasserRotation = function() {wasserRotation.start(20);}
			
			startWasser1.delay(2000);
			startWasserRotation.delay(2000);
		}
	
	// LASER PUPPE
		var puppe1 = function() {
			var addLaserPuppe = function() {
				var el = new Element('div', {'id': 'puppetWrap', 'class': 'laserPuppeWrap'});
				var imgPuppe = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/laserpuppe/laserpuppe.png', 'id': 'laserPuppe'}).injectInside(el);
				var imgLaser = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/laserpuppe/laserstrahl_rot.png', 'id': 'laserstrahlRot', 'class': 'verstecken'}).injectInside(el);
				var closeLink = new Element('a', {'href': $url, 'id':'closeLink'}).injectInside(el);
				var closeBtn = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/closeButton.png', 'id': 'close'}).injectInside(closeLink);
				el.injectTop($('wrapper'));
			}	
			addLaserPuppe();
			
			$flackerZeit = 100;		
			var flackern = new Fx.Tween($('laserstrahlRot'), {
				duration: 20,
				property: 'opacity',
				link: 'chain'
			});
			var startFlackern = function() {
				flackern.wait(8000).start(0).wait($flackerZeit).start(1).wait($flackerZeit).start(0).wait($flackerZeit).start(1).wait($flackerZeit).start(0);
			}
			startFlackern();
		}
		
	// KOPF ANZIEH PUPPE, ROLLENDER KOPF
		
	var puppe2 = function() {
		var addKopfPuppe = function() {
			var el = new Element('div', {'id' : 'puppetWrap', 'class': 'kopfPuppe'});
			var torso = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/kopfAnziehPuppe/torso.png', 'id' : 'torso'}).injectInside(el);
			var kopf = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/kopfAnziehPuppe/Kopf.png', 'id' : 'kopf'}).injectInside(el);
			var lOberarm = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/kopfAnziehPuppe/linker_oberarm.png', 'id' : 'lOberarm'}).injectInside(el);
			var lUnterarm = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/kopfAnziehPuppe/linker_unterarm.png', 'id' : 'lUnterarm'}).injectInside(el);
			var rOberarm = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/kopfAnziehPuppe/rechter_oberarm.png', 'id' : 'rOberarm'}).injectInside(el);
			var rUnterarm = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/kopfAnziehPuppe/rechter_unterarm.png', 'id' : 'rUnterarm'}).injectInside(el);
			var rollingHead = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/kopfAnziehPuppe/rollingHead.png', 'id' : 'rollingHead'}).injectInside(el);
			var closeLink = new Element('a', {'href': $url, 'id':'closeLink'}).injectInside(el);
			var closeBtn = new Element('img', {'src': 'tl_files/penther/template/images/movingPuppets/closeButton.png', 'id': 'close'}).injectInside(closeLink);
			$('wrapper').adopt(el);
		}
		addKopfPuppe();
	
		$animationSpeed = 1800;
		// Kopfbewegung
		var kopfBewegung = new Fx.Morph($('kopf'), {
			duration: $animationSpeed,
			transition: Fx.Transitions.Circ.easInOut,
			link: 'chain'
		})
		var startKopfNachUnten = function() {
			kopfBewegung.start({
				'top': -425,
				'left': 225
			}).chain(startKopfNachOben);
		};
		var startKopfNachOben = function() {
			kopfBewegung.start({
				'top': -475,
				'left': 226
			})
		};
		
		// linker Oberarm Rotation
		var lOberarmRotation = new Fx.Rotate($('lOberarm'), {
			transition: 'cubic:inOut',
			duration: $animationSpeed,
			origin: 'right bottom'
		});
		var startlOberarmRotNachUnten = function() {
			lOberarmRotation.start('-30').chain(startlOberarmRotNachOben);
		};
		var startlOberarmRotNachOben = function() {
			lOberarmRotation.start('0');
		};
	
		// linker Unterarm Bewegung
		var lUnterarmBewegung = new Fx.Morph($('lUnterarm'), {
			duration: $animationSpeed,
			transition: Fx.Transitions.Circ.easInOut,
			link: 'chain'
		})
		var startlUnterarmBewegungUnten = function() {
			lUnterarmBewegung.start({
				'top': -438,
				'left': 170
			}).chain(startlUnterarmBewegungOben);
		};
		var startlUnterarmBewegungOben = function() {
			lUnterarmBewegung.start({
				'top': -450,
				'left': 195
			});
		;}
		
		// linker Unterarm Rotation
		var lUnterarmRotation = new Fx.Rotate($('lUnterarm'), {
			transition: 'cubic:inOut',
			duration: $animationSpeed,
			origin: 'left bottom'
		});
		var startlUnterarmRotNachUnten = function() {
			lUnterarmRotation.start('30').chain(startlUnterarmRotNachOben);
		};
		var startlUnterarmRotNachOben = function() {
			lUnterarmRotation.start('0');
		};	
		
		// rechter Oberarm Rotation
		var rOberarmRotation = new Fx.Rotate($('rOberarm'), {
			transition: 'cubic:inOut',
			duration: $animationSpeed,
			origin: 'left bottom'
		});
		var startrOberarmRotNachUnten = function() {
			rOberarmRotation.start('55').chain(startrOberarmRotNachOben);
		};
		var startrOberarmRotNachOben = function() {
			rOberarmRotation.start('0');
		}
		
		// rechter Unterarm Bewegung
		var rUnterarmBewegung = new Fx.Morph($('rUnterarm'), {
			duration: $animationSpeed,
			transition: Fx.Transitions.Circ.easInOut,
			link: 'chain'
		})
		var startrUnterarmBewegungUnten = function() {
			rUnterarmBewegung.start({
				'top': -422,
				'left': 282
			}).chain(startrUnterarmBewegungOben);
		}
		var startrUnterarmBewegungOben = function() {
			rUnterarmBewegung.start({
				'top': -447,
				'left': 257
			});
		}
		
		// rechter Unterarm Rotation
		var rUnterarmRotation = new Fx.Rotate($('rUnterarm'), {
			transition: 'cubic:inOut',
			duration: $animationSpeed,
			origin: 'left bottom'
		});
		var startrUnterarmRotNachUnten = function() {
			rUnterarmRotation.start('-25').chain(startrUnterarmRotNachOben);
		};
		var startrUnterarmRotNachOben = function() {
			rUnterarmRotation.start('0');
		};	
		
		// Rolling Head Rotation	
		var rollingHeadRotation = new Fx.Rotate($('rollingHead'), {
			transition: 'cubic:in',
			duration: 1*$animationSpeed,
			origin: 'center center'
		});
		var startrollingHeadRotation = function() {
			rollingHeadRotation.start('-360').chain(startrollingHeadRotationFall);
		};
		// Rolling Head Bewegung
		var rollingHeadBewegung = new Fx.Morph($('rollingHead'), {
			duration: 1*$animationSpeed,
			transition: Fx.Transitions.Cubic.easeIn,
			link: 'chain'
		});
		var startrollingHeadBewegung = function() {
			rollingHeadBewegung.start({
				'top': -458,
				'right': 240
			}).chain(startrollingHeadBewegungFall);
		};
		
		// Rolling Head Rotation Fall
		var rollingHeadRotationFall = new Fx.Rotate($('rollingHead'), {
			transition: 'linear',
			duration: 4*$animationSpeed,
			origin: 'center center'
		});
		var startrollingHeadRotationFall = function() {
			rollingHeadRotationFall.start('-3600');
		};
		
		var startrollingHeadBewegungFall = function() {
			// Rolling Head Bewegung Fall X
			var rollingHeadBewegungFallX = new Fx.Morph($('rollingHead'), {
				duration: 0.4*$animationSpeed,
				transition: Fx.Transitions.linear,
				link: 'chain'
			});
			var rollingHeadBewegungFallY = new Fx.Morph($('rollingHead'), {
				duration: 0.4*$animationSpeed,
				transition: Fx.Transitions.Quad,
				link: 'chain'
			});
			var startrollingHeadBewegungFallX = function() {
				rollingHeadBewegungFallX.start({
					'right': 450
				})
			};
			var startrollingHeadBewegungFallY = function() {
				rollingHeadBewegungFallY.start({
					'top': -37
				}).chain(startrollingHeadBewegungUnten);
			};
			
			// X und Y Bewegung starten
			startrollingHeadBewegungFallX();
			startrollingHeadBewegungFallY();
			
		}
	
		// Rolling Head Unten Bewegung
		var rollingHeadBewegungUnten = new Fx.Morph($('rollingHead'), {
			duration: 4*$animationSpeed,
			transition: Fx.Transitions.linear,
			link: 'chain'
		});
		var startrollingHeadBewegungUnten = function() {
			rollingHeadBewegungUnten.start({
				'right': 2000
			});
		};
		
		
		var animationStarten = function() {
			
			// Kopf Bewegung starten
			startKopfNachUnten();	
			
			// linker Oberarm Rotation starten
			startlOberarmRotNachUnten();
			
			// linker Unterarm Bewegung und Rotation starten
			startlUnterarmBewegungUnten();
			startlUnterarmRotNachUnten();
			
			// rechter Oberarm Rotation starten
			startrOberarmRotNachUnten();
			
			// rechter Unterarm Bewegung und Rotation starten
			startrUnterarmBewegungUnten();
			startrUnterarmRotNachUnten();
			
			// Rolling Head Bewegung und Rotation starten
			startrollingHeadRotation.delay(9000);
			startrollingHeadBewegung.delay(9000);
		}
		
		animationStarten.delay(2000);
	};	
	if ($zufall == 1) {
		puppe1();
	}
	if ($zufall == 2) {
		puppe2();
	}
	if ($zufall == 3) {
		puppe3();
	}
	if ($zufall == 4) {
		puppe4();
	}
	if ($zufall == 5) {
		puppe5();
	}
	
	if (!Cookie.read('hidePuppets')) { 
		$('puppetWrap').setStyle('opacity', '1');
	}
	else {
		$('showPuppets').setStyle('opacity', '1');
	}
		
	// Beim Seitenaufruf auf †berlappung ŸberprŸfen
	$pWidth = $('puppetWrap').getSize().x;
	$cWidth = $('container').getSize().x;
		
	$pOffset = $('puppetWrap').offsetLeft;
	$cOffset = $('container').offsetLeft;
		
	if (($pOffset + $pWidth > $cOffset && $pOffset < $cOffset) || ($pOffset < $cOffset+$cWidth && $pOffset > $cOffset)) {
		$('puppetWrap').addClass('schliessen');
	}
	else {
		$('puppetWrap').removeClass('schliessen');
	}
		
	// Puppe entfernen, wenn auf den Close-Button gedrŸckt wird
	$('closeLink').addEvent('click', function(e) {
		e.stop();
		$('showPuppets').fade('in');		
		$('puppetWrap').fade('out');
		Cookie.write('hidePuppets', '1');
		$('showPuppets').setStyle('opacity', '1');
	})
	
	$('showPuppets').addEvent('click', function(e) {
		e.stop();
		Cookie.dispose('hidePuppets');
		$('showPuppets').setStyle('opacity', '0');
		console.log("ich bin nummer 1");
		$('puppetWrap').fade('in');
		//window.location.reload(true);
	});

	$('showPuppets').addEvent('click', function(e) {
		e.stop();
		console.log("ich bin nummer 2");		
		Cookie.dispose('hidePuppets');
		$('showPuppets').setStyle('opacity', '0');
		$('puppetWrap').fade('in');
		//window.location.reload(true);
	});
	
}
	
})