var ImageSlide = Class.create({
	
	//currently active item, count from 0
	items: [],
	currentItem: 0,
	navigation: [],
	pe: false,
	inProgress: false,
	autoplay: false,
	
	/**
	 * Initialize class
	 *
	 * @container: html-parent-container, usually with class fce-imageslide
	 */
	initialize: function(container) {
		this.container  = container;
		this.height = 0;
		this.items = this.container.select('ul.images>li');
		this.itemCount = this.items.size();
		
		if(this.container.hasClassName('autoplay')) {
			this.autoplay = true;
		}
		
		this.items.each(function (item, index) {
			//console.log(item);
			imgTag = item.select('img').first();
			//preload all images
			preloadImage = new Image();
			preloadImage.src = imgTag.readAttribute('src');
			
			//search for image with greatest height
			if (Prototype.Browser.IE7) {
				regExp = new RegExp(/\<img.*height[^\d]+(\d+)/i);
				match = regExp.exec(item.innerHTML);
				tempHeight = match[1];
			} else {
				if (Prototype.Browser.IE6) {
					regExp = new RegExp(/\<img.*height[^\d]+(\d+)/i);
					match = regExp.exec(item.innerHTML);
					tempHeight = match[1];
				} else {
					tempHeight = imgTag.readAttribute('height');
				}
			}
			
			this.height = (tempHeight > this.height) ? tempHeight : this.height;
			
			//display first image
			if (index == this.currentItem) {
				item.show();
			}
		}.bind(this));
		//FG, this is a hotfix, please change 
		if (this.container.hasClassName('imageslider-start')) {
			this.height = (parseInt(this.height)+73);
			this.container.setStyle({height: this.height + 'px'});
		}

		if (this.itemCount > 1) {
			this.navigation = this.container.select('ul.navigation>li');
			this.navigation.each(function (item, index) {
				item.observe('click', function(event) {
					elementClicked = event.element().tagName.toLowerCase() == 'li' ? event.element() : event.element().up('li');
					this.currentItem = this.navigation.indexOf(elementClicked);
					if(this.autoplay) {
						this.pe.stop();
					}
					this.showItem(this.currentItem);
				}.bindAsEventListener(this));
			}.bind(this));
			
			//startPeriodicalExecuter
			if(this.autoplay) {
				this.pe = new PeriodicalExecuter(function(pe) {
					this.nextItem();
				}.bind(this), 10);
			}
		}
	},
	
	nextItem: function () {
		this.items[this.currentItem].fade();
		this.currentItem = (this.currentItem + 1) % this.itemCount;
		this.items[this.currentItem].appear();
		
		if (this.navigation.size() > 0) {
			this.navigation.invoke('removeClassName', 'act');
			this.navigation[this.currentItem].addClassName('act');
		}
	},
	
	showItem: function (itemPos) {
		inProgress = false; 
		this.items.each(function (item) {
			if (item.inProgress) {
				inProgress = true;
			}
		});
		
		if (! inProgress) {
			this.items.each(function (item, index) {
				item.inProgress = true;
				if (index == itemPos) {
					item.appear({
						afterFinish: function() {
							item.inProgress = false;
						}.bind(item)
					});
				} else {
					item.fade({
						afterFinish: function() {
							item.inProgress = false;
						}.bind(item)
					});
				}
			}.bind(this));
			
			if (this.navigation.size() > 0) {
				this.navigation.invoke('removeClassName', 'act');
				this.navigation[itemPos].addClassName('act');
			}
		}
	}
});

Event.observe(document, "dom:loaded", function (event) {
});

/* JS-Code for Product Finder (upper right corner) */
Event.observe(window, 'load', function(event) {
	$$('.imageslider-start').each(function (container) {
		new ImageSlide(container);
	});
	$$('.finder').each( function (item) {
		var finderHasTrigger = ! item.hasClassName('finder-static');
	
		var bodyTag = $$('body').first();
		if (!finderDisplay) {
			var finderDisplay = item.select('.finder-display').first();
			if (finderHasTrigger) {
				finderDisplay = finderDisplay.remove();
				finderDisplay.identify();
				bodyTag.appendChild(finderDisplay);
			}
		}
			
		var finderTrigger = item.select('.finder-trigger').first(); 
		var configuration = finderTrigger.select('a[rel]').first().readAttribute('rel');
		var regExp = /(\d+)\-(\d+)/;
		configuration = regExp.exec(configuration);
		
		finderDisplay.initialValue = configuration[1] ? parseInt(configuration[1]) : 0;
		finderDisplay.startCatUid = configuration[2] ? parseInt(configuration[2]) : 0;

		
		finderDisplay.slide = function (startLeft, endLeft, innerContainer, oldContainer) {
			if (startLeft != endLeft) { 
				startLeft = startLeft * (-1);
				endLeft = endLeft * (-1);
				finderDisplay.select('.finder-display-level').each(function (item) {
					item.setStyle({ overflow: 'hidden' });
				});
				if (startLeft < endLeft) {
					new PeriodicalExecuter (function (pe) {
						startLeft = startLeft+12;
						if (startLeft >= endLeft) {
							innerContainer.setStyle({left: (endLeft) + 'px'});
							pe.stop();
							oldContainer.remove();
							finderDisplay.select('.finder-display-level').each(function (item) {
								item.setStyle({ overflowY: 'auto' });
							});
						} else {
							innerContainer.setStyle({left: (startLeft) + 'px'});
						}
					}, 0.002);
				} else {
					new PeriodicalExecuter (function (pe) {
						startLeft = startLeft-12; 
						if (startLeft <= endLeft) {
							innerContainer.setStyle({left: (endLeft) + 'px'});
							pe.stop();
							oldContainer.remove();
							finderDisplay.select('.finder-display-level').each(function (item) {
								item.setStyle({ overflowY: 'auto' });
							});
						} else {
							innerContainer.setStyle({left: (startLeft) + 'px'});
						}
					}, 0.002);
				}
			}
		}.bind(finderDisplay);
		
		finderDisplay.addEvents = function (container) {
			container.select('li.up a').each( function (item) {
				item.observe('click', function(event) {
					finderDisplay.getContents(parseInt(this.readAttribute('rel')), 'up');
				}.bindAsEventListener(item));
			});
			
			container.select('li.down a').each( function (item) {
				item.observe('click', function(event) {
					finderDisplay.getContents(parseInt(this.readAttribute('rel')), 'down');
				}.bindAsEventListener(item));
			});
		}.bind(finderDisplay);
		
		finderDisplay.parseContents = function (content) {
			var element_ul = new Element('ul', { 'class': 'item' });
			content.each (function (item) {
				var element_li = new Element('li', { 'class': item.type });
				var element_a = new Element('a');
				if (item.type == 'link') {
					element_a.writeAttribute('href', item.value);
				} else {
					element_a.writeAttribute('href', 'javascript:void(0);');
					element_a.writeAttribute('rel', item.value);
				}
				element_a.update(item.name);
				element_li.insert(element_a);
				element_ul.insert(element_li);
			});
			var element_div = new Element('div', { 'class': 'finder-display-level' } );
			element_div.insert(element_ul);
			return element_div;
		}.bind(finderDisplay);
		
		finderDisplay.getContents = function (catUid, action) {
			//console.log(" finderDisplay.getContents called: catUid " + catUid + " action:" + action);
			var ajax_url = '?eID=commerce_modifier&id=71&catUid=' + catUid + '&startCatUid=' + finderDisplay.startCatUid;
			new Ajax.Request(ajax_url, {
				method: 'get',
				onSuccess: function(transport) {
					var content = transport.responseText.evalJSON();
					var contentContainer = finderDisplay.parseContents(content);
					var finderDisplay_innerContainer = finderDisplay.select('.finder-display-innerContainer').first();
					if (action == 'init') {
						finderDisplay_innerContainer.update(contentContainer);
						finderDisplay.addEvents(contentContainer);
						finderDisplay.show();
					} else if (action == 'up') {
						var finderDisplay_level = finderDisplay_innerContainer.select('.finder-display-level').first();
						var positionLeft = finderDisplay_level.positionedOffset().left - finderDisplay_level.getWidth();
						contentContainer.setStyle({'left':positionLeft + 'px'});
						finderDisplay_level.insert({before : contentContainer });
						finderDisplay.slide(finderDisplay_level.positionedOffset().left, positionLeft, finderDisplay_innerContainer, finderDisplay_level);
						finderDisplay.addEvents(contentContainer);
					} else if (action == 'down') {
						var finderDisplay_level = finderDisplay_innerContainer.select('.finder-display-level').first();
						var positionLeft = finderDisplay_level.positionedOffset().left + finderDisplay_level.getWidth();
						contentContainer.setStyle({'left':positionLeft + 'px'});
						finderDisplay_level.insert({after : contentContainer });
						finderDisplay.slide(finderDisplay_level.positionedOffset().left, positionLeft, finderDisplay_innerContainer, finderDisplay_level);
						finderDisplay.addEvents(contentContainer);
					}
				}
			});	
		}.bind(finderDisplay); 
		
		if (finderHasTrigger) { 
			finderTrigger.observe( 'click', function(event) {
				event.stop();
				var trigger = event.element().hasClassName('.finder-trigger') ? event.element() : event.element().up('.finder-trigger');
				if (trigger.toggleClassName('finder-trigger-active').hasClassName('finder-trigger-active')) {
					var triggerPosition = trigger.cumulativeOffset();
					var triggerDimensions = trigger.getDimensions();
					
					var topPosition = triggerPosition.top + triggerDimensions.height;
					var leftPosition = triggerPosition.left;
										
					finderDisplay.setStyle({
						top: parseInt(topPosition) + 'px',
						left: parseInt(leftPosition) + 'px'
					});
	
					finderDisplay.getContents(finderDisplay.initialValue, 'init');
				} else {
					finderDisplay.hide();
				}
			});
		} else {
			finderDisplay.getContents(finderDisplay.initialValue, 'init');
		}
	});
});


Event.observe(document, 'DOMContentLoaded', function(event) {
	var contactContainerArr = $$('.contact-container');
	if (contactContainerArr.length > 0) {
		var contactContainer = contactContainerArr.first().up();
		for (i = 0; i < contactContainerArr.length; i++) {
			var prevContainer = (i==0) ? contactContainerArr.length : i;
			prevContainer--;
			prevContainer = contactContainer.select('.contact-container-'+prevContainer).first();
			var backLink = contactContainer.select('.contact-container-'+i+' .imageslider .back').first();
			backLink.observe('click', function (event) {
				event.stop();
				elementClicked = event.element();
				elementClicked.up('.contact-container').removeClassName('contact-container-active');
				this.addClassName('contact-container-active');;
			}.bindAsEventListener(prevContainer));
			
			var nextContainer = (i==(contactContainerArr.length-1)) ? 0 : i+1;
			nextContainer = contactContainer.select('.contact-container-'+nextContainer).first();
			var forwardLink = contactContainer.select('.contact-container-'+i+' .imageslider .forward').first();
			forwardLink.observe('click', function (event) {
				event.stop();
				elementClicked = event.element();
				elementClicked.up('.contact-container').removeClassName('contact-container-active');
				this.addClassName('contact-container-active');;
			}.bindAsEventListener(nextContainer)); 
		}
	}
});