/**
 * All Code is written using mootools v1.11 (http://mootools.net/download/)
 */
// JavaScript Document

// Logging Konsole zum ausgeben von JavaScript Meldungen/Variablen
var logging = {
	
	// CSS CLASSES
	containerId: 'container',
	loggingId: 'log',
	
	init:function(){
		// create div
		new Element('div',
		{
			'id': logging.loggingId,
			'styles': 
			{
				'position': 'absolute',
				'top': 0,
				'height': 150,
				'width': 400,
				'border': '1px solid #000',
				'text-align': 'left',
				'overflow': 'scroll'
			} 
		}).injectBefore(logging.containerId);
		
	
		
		//$(logging.loggingId).setStyle('position', 'absolute');
	},
	
	output:function(txt){
		$(logging.loggingId).appendText(' - '+txt);
	}
}


// Dynamische Unternavigation wird animiert ein-/ausgeblendet
var dynamicNav = {
	
	// CSS CLASSES
	bodyJsClass: "has_js",
	navContainerId: "navigation",
	navHiddenClass: "nav_hidden",
	navVisibleClass: "nav_visible",
	
	// Animation Variables
	aniMode: 'horizontal',
	aniTransitionIn: Fx.Transitions.Circ.easeOut,
	aniTransitionOut: Fx.Transitions.Circ.easeIn, 
	aniDuration: 200, //Duration of Animation in ms
	aniTimeout: 400, // timeout in ms till submenu gets hidden automatically
	
	// Variables
	currVisibleLi: null,
	currTimeout: null,	
	safariScrollSize: 5, // width in px that is added to scrollSize, because safari gets it too short
	subNavWidth: 144, // width of subnavigation in pixels
	
	init:function(){
		
		// Select all <li> Tags of main-navigation
		var navLis = $$('#'+dynamicNav.navContainerId+' li');
		
		for(var i=0; i < navLis.length; i++) {
			
			// <li> Tag as Trigger to show subnavigation
			var trigger = navLis[i];
			
			// Add Events to all <li> Elements of main Navigation
			if(trigger.getParent().getParent().getProperty('id') == dynamicNav.navContainerId) {
			
				// getSublist
				var subList = trigger.getElementsByTagName('ul')[0];
				
				// Copy Sublists in containing div
				if(subList) {
					
					// Make mainLink that triggers subnavigation not clickable
					var triggerLink = trigger.getFirst();
					triggerLink.setAttribute('href', '#');
					triggerLink.addEvent('click',
						function(e) {
							var e = new Event(e);
							e.stop();
							return false;
						}
					);
					
					// Copy Subnavigation in surrounding <div>
					var newDiv = new Element('div').injectBefore(subList);
					subList.injectInside(newDiv);
					newDiv.addClass(dynamicNav.navHiddenClass);
					
					// get subListContainer and store scrollWidth in attribute 'rel'
					var subListCont = trigger.getElementsByTagName('div')[0];					
					//var listWidth = subListCont.getSize().scrollSize.y + dynamicNav.safariScrollSize;
					// :KLUDGE:
					//  IE doesn´t get style width (in var listWidth)
					// so a fix width in pixel has to be set
					var listWidth = subListCont.getStyle('width').toInt();
					newDiv.setAttribute('rel', dynamicNav.subNavWidth);
						
					// Set initial width of surrounding div to 0 (hide from view)
					newDiv.setStyles({
						'width': 0
					});
						
					// Set negative margin-left to subnavigation, so that it ist hidden from view
					subList.setStyles({
						'margin-left': -listWidth
					});
				}
					
				// Events für Listitem Hauptnavi
				trigger.addEvents({
					'mouseover': function(){
						dynamicNav.slideOutCurr(this);
						dynamicNav.slideIn(this);
					},		
					'focus': function(){
						dynamicNav.slideOutCurr(this);
						dynamicNav.slideIn(this)
					},
					'mouseout': function() {
						dynamicNav.setTimeout(this);
					}
				});
			}
		}		
	},
	
	slideIn:function(trigger) {
		
		var navDiv = trigger.getElementsByTagName('div')[0];
		
		// if li doesn´t have subnavigation
		if(!navDiv) {
			return;
		}		
		
		var navList = navDiv.getFirst();
		
		// Clear Timeout for Slideout
		if(dynamicNav.currTimeout) {
			window.clearTimeout(dynamicNav.currTimeout);
			dynamicNav.currTimeout = null;
		}
			
		// Create Effect for Sliding
		var divEffects = new Fx.Styles(navDiv, {duration: dynamicNav.aniDuration, transition: dynamicNav.aniTransitionIn});
		var listEffects = new Fx.Styles(navList, {duration: dynamicNav.aniDuration, transition: dynamicNav.aniTransitionIn});
		
		// get absolute Value
		var finalWidth = navDiv.getAttribute('rel');
			
		// change class name to visible
		navDiv.removeClass(dynamicNav.navHiddenClass);
		navDiv.addClass(dynamicNav.navVisibleClass);
				
		// Slide In
		divEffects.start({
			'width': finalWidth,
			'opacity': 1
		});
		listEffects.start({
			'margin-left': 0
		});
		
		// save current submenu
		dynamicNav.currVisibleLi = trigger;
	},
	
	slideOutCurr:function(trigger) {
		
		// if no subnavigation is visible, there is no subnavigation or subnavigation is the same that should be shown return
		if(!dynamicNav.currVisibleLi || !dynamicNav.currVisibleLi.getElementsByTagName('div')[0] || trigger === dynamicNav.currVisibleLi) {
			return;
		}
		
		var navDiv = dynamicNav.currVisibleLi.getElementsByTagName('div')[0];
		var navList = navDiv.getFirst();
					
		// get absolute Value
		var finalWidth = navDiv.getAttribute('rel');
					
		// change class name to hidden
		navDiv.removeClass(dynamicNav.navVisibleClass);
		navDiv.addClass(dynamicNav.navHiddenClass);
						
		// Create Effect for Sliding
		var divEffects = new Fx.Styles(navDiv, {duration: dynamicNav.aniDuration, transition: dynamicNav.aniTransitionOut});
		var listEffects = new Fx.Styles(navList, {duration: dynamicNav.aniDuration, transition: dynamicNav.aniTransitionOut});
						
		divEffects.start({
			'width': 0,
			'opacity': 0
		});
		listEffects.start({
			'margin-left': -finalWidth
		});		
		
		// save current submenu
		dynamicNav.currVisibleLi = null;
	},
	
	setTimeout: function(trigger) {
		
		// Clear Timeout for Slideout
		if(dynamicNav.currTimeout) {
			window.clearTimeout(dynamicNav.currTimeout);
			dynamicNav.currTimeout = null;
		}
		
		dynamicNav.currTimeout = window.setTimeout('dynamicNav.slideOutCurr(this.trigger)', dynamicNav.aniTimeout);
	}
}


// Slideshow für Liste mit Bildern
var slideshow = {
	
	// CSS CLASSES
	slideshowClass: 'slideshow',
	showImageClass: 'current',
	slideNextClass: 'slide_next',
	slidePrevClass: 'slide_prev',
	hideClass: 'hide',
	
	// LABELS
	// any html can be used
	slideNextLabel: 'weiter',
	slidePrevLabel: 'zurück',
	
	// ANIMATION PROPERTIES
	aniTransition: Fx.Transitions.Quad.easeIn,
	aniDuration: 1000, // Duration of fade in ms
	aniWait: 3500, // Time in ms before next image is shown
	aniFading: false, // true is slideshwo is fading images
	
	// VARIABLES
	currTimeout: null, //
	
	init: function() {
		var uls = $$('ul.'+slideshow.slideshowClass);
		for(var i=0; i<uls.length; i++) {
			uls[i].currentSlide=0;
			slideshow.initSlideShow(uls[i]);
		}
	},
	
	initSlideShow: function(slideObj) {
		
		// position all <li> Elements in the middle and hide them except first one
		var lis = slideObj.getElementsByTagName('li');
		var containerHeight = slideObj.getParent().getSize().size.y;
		var containerWidth = slideObj.getParent().getSize().size.x;
		for(var i=0; i < lis.length; i++) {
			var img = lis[i].getElementsByTagName('img')[0];
			var imgHeight = img.height;
			var imgWidth = img.width;
			var offsetY = Math.round((containerHeight-imgHeight)/2);
			var offsetX = Math.round((containerWidth-imgWidth)/2);
			img.style.top = offsetY+'px';
			img.style.left = offsetX+'px';
			/*
			img.setStyles({
				top: offsetY,
				left: offsetX
			});*/
			// Hide all except first image Element
			if(i > 0) {
				img.style.display = 'none';
				/*img.setStyle('display', 'none');*/
			}
		}		
		
		// only create forward/backward and start slideshow links if more than one image is available
		if(slideObj.getElementsByTagName('li').length > 1) {
		
			// create forward/backward links
			slideObj.prev = new Element('a', {
				'class': slideshow.slidePrevClass,
				'href': '#',
				'events': {
					'click': function(e){
						var e = new Event(e);
						var trigger = e.target;
						
						while(trigger.getTag() != 'a' && target.getTag() != 'body') {
							trigger = trigger.getParent();	
						}
						
						var parentList = trigger.getNext();
						while(parentList.getTag() != 'ul' && parentList.getTag() != 'body') {
							parentList = parentList.getNext();	
						}
						
						slideshow.showSlide(parentList, slideshow.slidePrevClass);
						
						e.stop();
					}
				}
			}).injectBefore(slideObj);
			slideObj.prev.setText(slideshow.slidePrevLabel);
			
			slideObj.next = new Element('a', {
				'class': slideshow.slideNextClass,
				'href': '#',
				'events': {
					'click': function(e){
						var e = new Event(e);
						var trigger = e.target;
						
						while(trigger.getTag() != 'a' && target.getTag() != 'body') {
							trigger = trigger.getParent();	
						}
						
						var parentList = trigger.getNext();
						while(parentList.getTag() != 'ul' && parentList.getTag() != 'body') {
							parentList = parentList.getNext();	
						}
						
						slideshow.showSlide(parentList);
						
						e.stop();
					}
				}
			}).injectBefore(slideObj);
			slideObj.next.setText(slideshow.slideNextLabel);
			
			// Slideshow starten
			slideshow.start(slideObj);
		}
	},
	
	showSlide: function(slideObj, slideDirection) {
		
		if(slideshow.aniFading == true) {
			return;
		}
		slideshow.aniFading = true;
		
		// Clear Timeout for Slideout
		if(slideshow.currTimeout) {
			$clear(slideshow.currTimeout);
			slideshow.currTimeout = null;
		}
		
		// if no slide Direction was given set slideNextClass as default --> next image is shown
		if(!slideDirection || slideDirection == '') {
			var slideDirection = slideshow.slideNextClass;
		}
		
		var count = slideObj.currentSlide;
		var slideCount = slideObj.getElementsByTagName('li').length-1;
		var oldSlide = slideObj.getElementsByTagName('li')[count].getElementsByTagName('img')[0];		
		count = (slideDirection == slideshow.slidePrevClass) ? count-1 : count+1;
		if(count > slideCount) {
			count = 0;
		}
		if(count < 0) {
			count = slideCount;
		}
		var newSlide = slideObj.getElementsByTagName('li')[count].getElementsByTagName('img')[0];
		
		var newSlideStyle = new Fx.Style(newSlide, 'opacity');
		newSlideStyle.set(0);
		newSlide.style.display = 'block';
		
		// Create Effect for Sliding
		var oldSlideFx = new Fx.Styles(oldSlide, {duration: slideshow.aniDuration, transition: slideshow.aniTransition});
		var newSlideFx = new Fx.Styles(newSlide, {duration: slideshow.aniDuration, transition: slideshow.aniTransition});
		
		// Fade out current slide - then fade in next slide
		oldSlideFx.start({
				'opacity': [1,0]
			}).chain(function() {
				oldSlide.style.display = 'none';
				newSlideFx.start({
					'opacity': [0,1]
			}).chain(function() {
				slideshow.aniFading = false;
				slideObj.currentSlide = count;
				slideshow.start(slideObj);
			});
		});	
			
	},
	
	start: function(slideObj) {		
		// start Slideshow with delay
		slideshow.currTimeout = slideshow.showSlide.delay(slideshow.aniWait, slideshow.currTimeout, slideObj);
	}
	
};


var removeTitleTags = {
	
	// CSS CLASSES
	navId: 'navigation',
	prodListId: 'produktliste',
	
	init: function() {
		
		// get all links in navigation
		if($(removeTitleTags.navId) != null) {
			var linksNav = $(removeTitleTags.navId).getElementsByTagName('a');
			
			// Title Attribute aller Links entfernen
			for(var i = 0; i < linksNav.length; i++) {
				linksNav[i].setAttribute('title', '');
			};
		};
		
		// get all links of productlist
		if($(removeTitleTags.prodListId) != null) {
			var linksProdList = $(removeTitleTags.prodListId).getElementsByTagName('a');
			
			// Title Attribute aller Links entfernen
			for(var i = 0; i < linksProdList.length; i++) {
				linksProdList[i].setAttribute('title', '');
			};
		};		
	}
};


// open external links in new window
var externalLinks = {
	
	// CSS CLASSES
	externalLinkClass: 'link_extern',
	
	init: function() {
		var links = $$('a.'+externalLinks.externalLinkClass);
		for(var i=0; i<links.length; i++) {
			links[i].target = "_blank";
		}
	}
};


// INITIALISIERUNG ALLER FUNKTIONEN NACH LADEN DER SEITE
window.addEvent('domready', function() {
	// add CSS class to body tag to indicate that JavaScript is available
	$$("body").addClass(dynamicNav.bodyJsClass);
	
	//logging.init();
	dynamicNav.init();
	slideshow.init();
	removeTitleTags.init();
	externalLinks.init();
});