/**
 * @author joachim.kliemann
 */
YAHOO.hmmh.fontShuffle = function() {
		return {
			init : function() {
				//bilderliste = [1,2,3,4,5,6];
				//shuffleButton = $D.getElementsByClassName('shuffleHolder','div', 'fontShuffle');
				//$E.on(shuffleButton, 'click', this.shuffle );
			},
			
			shufflious : function (obj, nextShuffleCategory) {
				/* Elemente, die ich brauche, werden geholt und modifiziert */
				var holefontShuffleForm = document.getElementById('fontShuffle');
				var holeShuffleBox = document.getElementById('shuffleBox');
				var holeMeinenHintergrund = $D.getStyle(obj, 'backgroundImage');
				holeMeinenHintergrund = holeMeinenHintergrund.replace('url(', '');
				holeMeinenHintergrund = holeMeinenHintergrund.replace(')', '');
				
				
				var holeMeinenFont = YAHOO.util.Selector.query( 'img', obj, true)[0];
				
				var holeMeinePosition = $D.getXY(obj);
				
				/* Erstes Element wird gebraucht um die Mitte zu ermitteln */
				var firstElement = holeShuffleBox.getElementsByTagName("div")[0];				
				var firstElementPositionX = $D.getX(firstElement);
				var firstElementPositionY = $D.getY(firstElement);
				var middlePositionX = firstElementPositionX + 90;
				var middlePositionY =	firstElementPositionY + 84;
				
				/* Erzeuge bigShuffle */
				
				var erzeugeMaske = document.createElement('div');
				with (erzeugeMaske) {
		            setAttribute('id', 'bigShuffleMask');
					setAttribute('text-align', 'center');
		        }
				
				var erzeugeDiv = document.createElement('div');
				with (erzeugeDiv) {
		            setAttribute('id', 'bigShuffle');
					setAttribute('text-align', 'center');
		        }
		        
		        var erzeugeP = document.createElement('p');
				with (erzeugeP) {
		            setAttribute('text-align', 'center');
		        }
		        
				var erzeugeImg = document.createElement('img');
				with (erzeugeImg) {
					setAttribute('width', '294');
					setAttribute('height', '70');
					if(YAHOO.env.ua.ie >0) {
						erzeugeImg.src = "img/btbg/bg_fontShuffle_gelb.png";
					}
					else {
						setAttribute('src', holeMeinenHintergrund);
					}
		        }
				
		        
		        var erzeugeFontImg = document.createElement('img');
		        $D.setStyle(erzeugeFontImg, 'position','relative');
		        with (erzeugeFontImg) {
		        	
		            setAttribute('height', $D.getStyle(holeMeinenFont,'height'));
		            setAttribute('width', $D.getStyle(holeMeinenFont,'width'));
		            if(YAHOO.env.ua.ie >0) {
		            	erzeugeFontImg.src = holeMeinenFont.src;
					}
		            else {
		            	setAttribute('src', holeMeinenFont.src);
		            }
		        }
		        
		        erzeugeP.appendChild(erzeugeImg);
				erzeugeP.appendChild(erzeugeFontImg);
		        
		        var bigShuffleMask = holefontShuffleForm.appendChild(erzeugeMaske);
				var bigShuffleEl = holefontShuffleForm.appendChild(erzeugeDiv);
				bigShuffleEl.appendChild(erzeugeP);
				
				
				/* bigShuffle Styles mitgeben */
				$D.setStyle('bigShuffle', 'overflow', 'hidden');
				$D.setXY('bigShuffle', holeMeinePosition);
				
				/* Animation vorbereiten */				
				animDivAttributes = {
					points: {
						to: [middlePositionX, middlePositionY]
					},
					width: {to: 441},
      				height: {to: 105}
				};
				animImgAttributes = {
						width: {to: 441},
      					height: {to: 105}
				};
				var calcFontImgAttributesWidth = erzeugeFontImg.width * 1.5;
				var calcFontImgAttributesHeight = erzeugeFontImg.height * 1.5;
				animFontImgAttributes = {
						width: {to: calcFontImgAttributesWidth},
      					height: {to: calcFontImgAttributesHeight}
				};
				var animDiv = new YAHOO.util.Motion('bigShuffle', animDivAttributes, .3, YAHOO.util.Easing.easeOut);
				var fadeoutAnimDiv = new YAHOO.util.Anim('bigShuffle', { opacity: { to: 0.1 } }, .3, YAHOO.util.Easing.easeOut);
				var animImg = new YAHOO.util.Motion(erzeugeImg, animImgAttributes, .3, YAHOO.util.Easing.easeOut);
				var animFontImg = new YAHOO.util.Motion(erzeugeFontImg, animFontImgAttributes, .3, YAHOO.util.Easing.easeOut);
				var fadeoutShuffleBox = new YAHOO.util.Anim('shuffleBox', { opacity: { to: 0.1 } }, .3, YAHOO.util.Easing.easeOut);
				var fadeinShuffleBox = new YAHOO.util.Anim('shuffleBox', { opacity: { to: 1 } }, .3, YAHOO.util.Easing.easeOut);
				
				
				/* Animationen ausfuehren */
				animDiv.animate();
				fadeoutAnimDiv.animate();
				animImg.animate();
				animFontImg.animate();
				fadeoutShuffleBox.animate();
				fadeoutShuffleBox.onComplete.subscribe(
					function(){
						/* Kreisel in die Schalter */
						var meineSchalter = YAHOO.util.Selector.query( 'div', obj.parentNode, false);
						if(meineSchalter){
							for(i = 0;i<meineSchalter.length;i++){
								var meinePs = YAHOO.util.Selector.query( 'p', meineSchalter[i], false);
								var meineBilder = YAHOO.util.Selector.query( 'img', meineSchalter[i], false);
								if(meineBilder){
									for( x = 0 ; x < meineBilder.length;x++){
										meinePs[x].style.marginTop = '19px';
										//meineBilder[x].src = 'img/btbg/shufflespinner.gif';
										meineBilder[x].src = 'img/btbg/working.gif';
									}
								}
							}
						}
					}
				)
				
				
				animDiv.onComplete.subscribe(
					function() {
						animDiv.stop();
						
						// Animationen werden vorbereitet 		
						//fadeinShuffleBox = new YAHOO.util.Anim('shuffleBox', { opacity: { to: 1 } }, .1, YAHOO.util.Easing.easeOut);
						//fadeoutAnimDiv = new YAHOO.util.Anim('bigShuffle', { opacity: { to: 0 } }, .3, YAHOO.util.Easing.easeOut);

						//Animationen werden ausgef�hrt 

						fadeinShuffleBox.animate();
						fadeoutAnimDiv.animate();
						fadeoutAnimDiv.onComplete.subscribe(
							function() {

								if(nextShuffleCategory){
									shuffle(nextShuffleCategory);
								}
							}
						);
					}
				)	
			}
		};
	}();

	//$E.on(window, 'load', YAHOO.hmmh.fontShuffle.init, YAHOO.hmmh.fontShuffle, true);