/**
 * functions.js
 *
 * EVITA SHOES
 *
 * Diese Datei enthaelt die Javascript-Funktionen die zur Darstellung der EVITA SHOES Website ben�tigt werden.
 *
 * @author buero hahn <info@buero-hahn.de>
 * @version 2009-07-08
 */


/**
 * initPageJS()
 * Führt initialisierende Funktionen aus, nachdem die Seite/ das HTML geladen wurde
 * 
 * @param params object Enthält übergebene Variablen
 * @return void Kommt nix zurück
 */
 function initPageJS(params) {
	// Links vorbereiten (auskommentiert, da Cookies eingeschaltet sein m�ssen
/*
 	if (params.sid) {
 		cmtPrepareLinks(params.sid);
 	}
*/ 	
 	// Cookiecheck
 	//checkCookies('shoppingCartSummary');
 	
 	// Artikelnummersuche
 	refSearchArticleField = document.getElementById('searchArticleField');
 	if (refSearchArticleField != null) {
 		addEvent(refSearchArticleField, 'keyup', searchArticleFieldCheck);
 	}
 	
 	refSearchArticleLabel = document.getElementById('searchArticleLabel');
 	if (refSearchArticleLabel != null) {
 		addEvent(refSearchArticleField, 'focus', searchArticleFieldFocus);
 		addEvent(refSearchArticleField, 'blur', searchArticleFieldBlur);
 	}
 	
 	if (refSearchArticleField && refSearchArticleField.value && refSearchArticleLabel) {
 		refSearchArticleLabel.style.display = 'none';
 	}
 	
 }
 
 function searchArticleFieldCheck(event) {
 	// Normale Browser
	if (typeof event.target != 'undefined') {
		var refInput = event.target;
	// IEs
	} else if (typeof event.srcElement != 'undefined') {
		var refInput = event.srcElement;
	} else {
		return false
	}
	
	var str = refInput.value;
	var deleteKey = false;
	
	if (event.keyCode && (event.keyCode == 8 || event.keyCode == 46)) {
		var deleteKey = true
	}

	if (event.charCode && (event.keyCode == 8 || event.keyCode == 46)) {
		var deleteKey = true
	}
	
	if (str.length >=3 && !deleteKey && !str.match(/^[^-]{3}-/)) {
		str = str.substring(0,3)+'-'+str.substring(3,13);
	}
	if (str.length >=8 && !deleteKey && !str.match(/^[^-]{3}-[^-]{4}-/)) {
		str = str.substring(0,8)+'-'+str.substring(8,13);
	}
	
	refInput.value = str;
 }
 
 function searchArticleFieldFocus(event) {
	refSearchArticleLabel = document.getElementById('searchArticleLabel');
//	alert(refSearchArticleLabel.style)
	refSearchArticleLabel.style.display = 'none'
 }

 function searchArticleFieldBlur(event) {
	refSearchArticleLabel = document.getElementById('searchArticleLabel');
	refSearchArticleField = document.getElementById('searchArticleField');
	
	if (!refSearchArticleField.value) {
		refSearchArticleLabel.style.display = 'block'
	}
 }

 
 /**
  *	addEvent()
  * Fügt einem HTML-Element einen event-Handler hinzu
  * @params obj object Referenz auf das Objekt
  * @params eventType string Name des events (ohne f�hrendes "on")
  * @params dofunction string Funktion, die beim ereignis aufgerufen werden soll
  *
  * @returv void
  * 
  */
 function addEvent(obj, eventType, doFunction, useCaption) {
	if (obj.addEventListener) {
		obj.addEventListener(eventType, doFunction, useCaption);
		return true;
	} else if (obj.attachEvent) {
		var retVal = obj.attachEvent("on"+eventType, doFunction);
		return retVal;
	} else {
		return false;
	}
 }


/**
 * function changeFilter()
 * Schickt das Filterformular ab.
 *
 * @param formId string Id des Formulars
 * @return void
 */
/*
function changeFilter(formId) {
	document.getElementById(formId).submit();
}
*/

 
 
/*
	script.aculo.us EffectResize.js
	Copyright(c) 2007 - Frost Innovation AS, http://ajaxwidgets.com

	EffectResize.js is freely distributable under the terms of an MIT-style license.
	For details, see the script.aculo.us web site: http://script.aculo.us/

	Modified by Elijah Lofgren to work with Prototype 1.4.0_rc3
	Helper Effect for resizing elements...
*/

	Effect.ReSize = Class.create();
	Object.extend(Object.extend(Effect.ReSize.prototype, Effect.Base.prototype), {
		initialize: function(element) {
	    	this.element = element;
			if(!this.element) throw(Effect._elementDoesNotExistError);
			var options = Object.extend({ amount: 100, direction: 'vert', toSize:null }, arguments[1] || {});
			if (options.direction == 'vert') {
				this.originalSize = options.originalSize || parseInt(this.element.getHeight());
			} else {
				this.originalSize = options.originalSize || parseInt(this.element.getWidth());
			}
	
			if( options.toSize != null ) {
				options.amount = options.toSize - this.originalSize;
			}

			this.start(options);
		},
		
		setup: function() {
	    	// Prevent executing on elements not in the layout flow
			if(this.element.style.display == 'none') { this.cancel(); return; }
		},
		
		update: function(position) {
			if( this.options.direction == 'vert' ){
				this.element.setStyle({
					height: this.originalSize + (this.options.amount * position) + 'px'
				});
			} else {
				this.element.style.width = this.originalSize+(this.options.amount * position)+'px';
			}
		},
		
		
		finish: function(){
			if( this.options.direction == 'vert' ){
				this.element.style.height = this.originalSize+this.options.amount+'px';
			} else {
				this.element.style.width = this.originalSize+this.options.amount+'px';
			}
		}
	});
	
	Effect.ReSize.Direct = function(element, options){
		switch(options.direction){
			case 'vert':
				var oldHeight = parseInt(element.style.height, 10);
				oldHeight += options.amount;
				element.style.height = (oldHeight+'px');
				break;
			
			case 'horz':
				var oldWidth = parseInt(element.style.width, 10);
				oldWidth += options.amount;
				element.style.width = (oldWidth+'px');
				break;
			default:
				throw "Unsupported enum in Effect.ReSize.Direct…!!";
		}
	}

	/**
	 * Prototype-Erweiterung, um auch die IEErweiterung prototype-Ajax-update-Methode: 
	 * Eigene Methode für Ajax-HTML-Updates mit Ladegrafik
	 * 
	 */
	Object.extend(Prototype.Browser, {
	    IE6:	Prototype.Browser.IE && (typeof window.XMLHttpRequest == "undefined"),
	    IE7:	Prototype.Browser.IE && (typeof window.XMLHttpRequest == "object"),
		IE8:	Prototype.Browser.IE && !Prototype.Browser.IE6 && !Prototype.Browser.IE7
	});

/**
 * Erweiterung prototype-Ajax-update-Methode: 
 * Eigene Methode für Ajax-HTML-Updates mit Ladegrafik
 * 
 */
	Element.addMethods({
		ajaxUpdate: function(element, url, options){
			element = $(element);
/*
			height = element.getHeight();
			
			spinnerContainer = document.createElement('div');
			spinnerContainer.addClassName('cmtInProgress');
			spinnerContainer.setStyle({height: height+'px'});
	
			element.appendChild(spinnerContainer);
*/	
			new Ajax.Updater(element, url, options);
		    return element;
		  }
	});

 /**
  * Pseudo-Klasse Tool-Tipps
  * Sucht nach mit CSS-Selektoren markierten Elementen und wandelt diese in Tooltipps um.
  * 
  * Die Elemente, die in Tooltipps umgewandelt werden sollen, müssen mit dem CSS-Selektor 'toolTip' markiert sein.
  * Die id dieser Elemente muss 'toolTipFor_{id_des_zu_beschreibenden_Elements}' lauten.
  * Z.B.:
  * <input id="myField" type="text" value="hallo Welt" />
  * <div class="toolTip" id="toolTipFor_myField">Hier steht 'hallo Welt'!</div>
  * 
  */
 
 var cmtToolTips = Class.create();
 
 cmtToolTips.prototype = {
 	
	initialize: function(){
		Event.observe(window, 'load', this.initToolTips.bindAsEventListener(this));
	},
	
	initToolTips: function() {
		var tt = $$('.toolTip');
		
		tt.each(this.createToolTip.bind(this));
	},
	
	createToolTip: function() {
		var refToolTip = arguments[0];

		refToolTip.addClassName('toolTipShow');
		refToolTip.hide();
				
		// Tooltip für ...
		ttFor = refToolTip.id.replace(/toolTipFor_/, '');

		// Tooltips bisher nur für Formularfelder möglich. Hier Abfrage nach Typ einbauen und Event auf onMouseOver, -Ou ändern
		$(ttFor).observe('focus', this.showToolTip.bindAsEventListener(this));
		$(ttFor).observe('blur', this.hideToolTip.bindAsEventListener(this));
		
		//$(ttFor).writeAttribute('rel', refToolTip.id);
				
		// Tooltip-Container erzeugen
		var toolTipInner = document.createElement('div');
		$(toolTipInner).writeAttribute('class', 'toolTipInner');
		$(toolTipInner).update(refToolTip.innerHTML);
		refToolTip.update('');
		refToolTip.insert($(toolTipInner));
		
		// richtig positionieren
		topPos = 0 - refToolTip.getHeight() - 3;
		refToolTip.setStyle({top: topPos+'px'});

	},
	
	showToolTip: function(ev) {
		element = Event.element(ev);
		toolTip = $('toolTipFor_'+element.readAttribute('id'));

		toolTip.appear({ duration: 0.2 });
	},
	
	hideToolTip: function(ev) {
		element = Event.element(ev);
		toolTip = $('toolTipFor_'+element.readAttribute('id'));
		toolTip.fade({ duration: 0.2});
	}
 }
 
 //pageToolTips = new toolTips();
 
 


	var cmtUI = Class.create();
	
	// Array für Fensterreferenzen
	cmtUI.registeredWindows = new Array();
	
	/**
	 * cmtUI.registerWindow
	 * Registriert die Referenz eines Fensterobjektes im übergeordneten cmtUI-Objekt
	 *
	 * @params Object Referenz auf das Fensterobjekt
	 * @return void
	 */
	cmtUI.registerWindow = function (refObj) {
		this.registeredWindows.push(refObj);
	}
	
	/**
	 * cmtUI.getRegisteredWindows
	 * Gibt ein Array mit den regisitrieren Fensterobjektreferenzen zurück
	 *
	 * @params void
	 * @return Array Alle registrierten Referenzen in einem Array
	 */
	cmtUI.getRegisteredWindows = function () {
		return this.registeredWindows;
	}	
	
/* -----------------------------------------------------------
	Overlay-Element
*/
	/**
	 * function initOverlay();
	 * Initialisert die Overlay-Fläche
	 *
	 * @param void
	 * @return void
	 */
	cmtUI.overlay = Class.create();
	
	cmtUI.overlay.prototype = {
		initialize: function(params){
		
			this.params = Object.extend({
				appearSpeed: 0.3,
				fadeSpeed: 0.3,
				opacity: 0.4,
				className: 'cmtOverlay',
				onShow: function(ev) {},
				onHide: function(ev) {},
				bindObject: this
			}, params)

			this.overlayIsVisible = false;
			
			Event.observe(document, 'dom:loaded', this.initOverlay.bindAsEventListener(this));
		},
		
		/**
		 * function initOverlay();
		 * Initialisert die Overlay-Fläche
		 *
		 * @param void
		 * @return void
		 */
		initOverlay: function(){
	
			this.overlay = new Element('div', {
				id: 'cmtOverlay',
				className: this.params.className
			});

			// Overlay an Body hängen
			$(document.body).insert(this.overlay);
			
			// Event-Observer: bei Klick ausblenden
			this.overlay.observe('click', this.hideOverlay.bindAsEventListener(this))

			// anfangs ausblenden
			this.overlay.hide();
			
		},
		
		/**
		 * function hideOverlay();
		 * Blendet die Overlay-Fläche aus
		 *
		 * @param void
		 * @return void
		 */
		hideOverlay: function(){

			this.overlayIsVisible = false;		
			
			// Fenster schließen
			var win = cmtUI.getRegisteredWindows();
			
			win.each(
				function(el) {
					el.closeWindow(null, false);
				},
				this
			
			)

			
			Effect.Fade(this.overlay, {
				duration: this.params.fadeSpeed,
				from: this.params.opacity,
				to: 0,
				afterFinish: this.params.onHide.bind(this)
			});
			
		},
		
		/**
		 * function showOverlay();
		 *
		 * Zeigt die Overlay-Fläche
		 *
		 * @param void
		 * @return void
		 */
		showOverlay: function(params){
			
			params = Object.extend(this.params, params)
			
			this.overlayIsVisible = true;
			
			this.overlay.setStyle({
				position: 'fixed',
				width: '100%',
				height: '100%',
				top: 0,
				left: 0
			});

			Effect.Appear(this.overlay, {
				duration: this.params.appearSpeed,
				from: 0,
				to: this.params.opacity,
				afterFinish: params.onShow.bind(params.bindObject)
			});
		}
	}
	
	cmtUI.overlayHandler = new cmtUI.overlay();
	
/* -----------------------------------------------------------
	Modal-Fenster
*/
	cmtUI.modalWindow = Class.create();

	cmtUI.modalWindow.prototype = {
		
		/**
		 * function initialize()
		 * Initialisiert das Modalfenster
		 * 
		 * @params {Object} Objekt mit Parametern - wird derzeit nicht genutzt
		 *
		 * @return void
		 */
		initialize: function(params){
		
			// 2010-08-18: Wird derzeit nicht genutzt
			this.params = Object.extend({
				className: '',
				overlay: true,
				onShow: function(ev) {},
				onHide: function(ev) {}
			}, params)

			this.paramsCache = new Object();
			//Event.observe(document, 'dom:loaded', this.initWindow.bindAsEventListener(this));
			this.initWindow();
		},
		
		initWindow: function(ev) {

			// Overlay-Inhalts-DIV erzeugen
			// Wrapper-Container
			this.windowWrapper = new Element('div', {
				id: 'cmtModalWinWrapper'
			});
			if (cmtUI.overlayHandler) {
				this.windowWrapper.observe('click', this._checkClosingClick.bindAsEventListener(cmtUI.overlayHandler))
			}
			
			// Fenster-Container: Das eigentliche Fenster
			this.windowContainer = new Element('div', {
				id: 'cmtModalWinContainer'
				//className: this.params.className
			});

			// Kopf
			this.windowHead = new Element('div', {
				id: 'cmtModalWinHead'
			});
			
			// Kopf: Titel-Container
			this.windowHeadTitle = new Element('div', {
				id: 'cmtModalWinHeadTitle'
			});

			// Kopf: Close-Knopf
			this.windowHeadClose = new Element('div', {
				id: 'cmtModalWinHeadClose'
			});
			// Close-Knopf überwachen
			Event.observe(this.windowHeadClose, 'click', this.closeWindow.bindAsEventListener(this, false));

			// Fensterinhalt
			this.windowContent = new Element('div', {
				id: 'cmtModalWinContent'
			});
			this.windowContentInner = new Element('div', {
				id: 'cmtModalWinContentInner'
			});
			this.windowContent.insert(this.windowContentInner);
			
			// Knöpfe: Container
			this.windowButtons = new Element('div', {
				id: 'cmtModalWinButtonsContainer',
				className: 'clearfix'
			});
			this.windowButtons.hide();

			// Knopf 1: OK bei Fenstertyp Message
			this.windowButtonOK = new Element('a', {
				id: 'cmtModalWinButtonClose',
				href: 'Javascript: void(0);',
				className: 'cmtModalWinButtonOK'
			});
			this.windowButtonOK.update('OK!');
			this.windowButtonOK.hide();
			Event.observe(this.windowButtonOK, 'click', this.closeWindow.bindAsEventListener(this, true));
			this.windowButtons.insert(this.windowButtonOK);
			
			// Knopf 2: Bestätigen bei Fenstertyp Confirm
			this.windowButtonConfirm = new Element('a', {
				id: 'cmtModalWinButtonConfirm',
				href: 'Javascript: void(0);',
				className: 'cmtModalWinButtonConfirm'
			});
			this.windowButtonConfirm.update('Bestätigen!');
			this.windowButtonConfirm.hide();
			Event.observe(this.windowButtonConfirm, 'click', this.closeWindow.bindAsEventListener(this, true));
			this.windowButtons.insert(this.windowButtonConfirm);

			// Knopf 3: Abbrechen bei Fenstertyp Confirm
			this.windowButtonCancel = new Element('a', {
				id: 'cmtModalWinButtonCancel',
				href: 'Javascript: void(0);',
				className: 'cmtModalWinButtonCancel'
			});
			this.windowButtonCancel.update('Abbrechen!');
			this.windowButtonCancel.hide();
			Event.observe(this.windowButtonCancel, 'click', this.closeWindow.bindAsEventListener(this, false));
			this.windowButtons.insert(this.windowButtonCancel);			
			// Knöpfe an Inhalt hängen
			this.windowContent.insert(this.windowButtons);
				
			// 1. Fensterkopf
			//this.windowHeadTitle.insert(this.params.title);
			this.windowHead.insert(this.windowHeadTitle);
			this.windowHead.insert(this.windowHeadClose);
			
			// 2. Gesamtfenster
			this.windowContainer.insert(this.windowHead);
			this.windowContainer.insert(this.windowContent);
			//Event.observe(window, 'resize', this.refreshWindowPosition.bindAsEventListener(this));
			
			// 3. Einfügen
			this.windowWrapper.insert(this.windowContainer);
			$(document.body).insert(this.windowWrapper);
			this.windowContainer.hide();
			
			cmtUI.registerWindow(this);
			
			this._showWindowAfterLoad();
		},

		showWindowAfterLoad: function(params) {
			Object.extend(this.paramsCache, params)
		},
		
		_showWindowAfterLoad: function() {
			// schlechte Lösung. Besser die Länge des Cache ermittelnt
			if (typeof this.paramsCache.type != 'undefined') {
				this.showWindow(this.paramsCache);
			}
		},
		
		/**
		 * function showWindow();
		 * Zeigt das Fenster
		 *
		 * @params {Object} params Objekt mit folgenden Parametern:
		 * - content {String} Inhalt des Modalfensters
		 * - contentURL {String} URL der Seite, die als Inhalt per Ajax-Request geladen werden soll
		 * - title {String} Titeltext des Modalfensters
		 * - type {String} Mögliche, vordefinierte Typen: confirm, alert, message
		 * - className {String} Zusätzlicher CSS-Selektor für den Modalfenster-Container
		 * - appearSpeed {Float} Einblendgeschwindigkeit des Modalfensters in Sekunden
		 * - timeout {Float} Sekunden, nach denen das Modalfenster automatisch ausgeblendet werden soll
		 * - overlay {Boolean} Bestimmt, ob ein Overlay hinter das Modalfenster gelegt werden soll
		 * - showButton {String} 'message' oder 'alert' zeigen 'OK'-Knopf, 'confirm' zeigt 'Abbruch'- und 'Bestätigen'-Knopf
		 * - buttonConfirmText {String} Inhalt des 'Bestätigen'-Knopfes
		 * - buttonCancelText {String} Inhalt des 'Abbrechen'-Knopfes
		 * - buttonOKText {String} Inhalt des 'OK'-Knopfes
		 * - buttonConfirmClassName {String} zusätzlicher CSS-Selektor des 'Bestätigen'-Knopfes
		 * - buttonCancelClassName {String} zusätzlicher CSS-Selektor des 'Abbrechen'-Knopfes
		 * - buttonOKClassName {String} zusätzlicher CSS-Selektor des 'OK'-Knopfes
		 * - onShow {Function} Funktion wird ausgeführt nach Einblenden des Fensters
		 * - onClose {Function} Funktion wird ausgeführt nach Schließen des Fensters
		 * - onAbort {Function} Funktion wird ausgeführt beim Klick auf den 'Abbrechen'-Knopf (showButton = 'confirm')
		 * - onConfirm {Function} Funktion wird ausgeführt beim Klick auf den 'Bestätigen'-Knopf (showButton = 'confirm')
		 *
		 * @return void
		 */
		showWindow: function(params) {
	
			this.windowParams = Object.extend({
				content: null,
				contentURL: null,
				title: '',
				type: '',
				className: '',
				appearSpeed: 0.1,
				timeout: 0,
				overlay: true,
				showButton: '',
				dontShowButtons: false,
				onShow: function(ev) {},
				onClose: function(ev) {},
				onAbort: function(ev) {},
				onConfirm: function(ev) {},
				onCancel: function(ev) {}
			}, params)

			// Variablen setzen
			this.currentHeight = -1;
			this.currentWidth = -1;
			this.windowIsVisible = true;
			
			//this.windowWrapper.addClassName(this.windowParams.className);
			
			// Optionen
			// 1. Muss ein Overlay-Fenster angezeigt werden?
			if (this.windowParams.overlay) {
				cmtUI.overlayHandler.showOverlay({onShow: this._showWindow.bind(this), bindObject: this});
				//this.windowContainer.show();
			} else {
				this.windowContainer.show();
			}
			
			// 2. Fenster nach einer Weile automatisch ausblenden?
			if (this.windowParams.timeout) {
				this.pE = new PeriodicalExecuter(this.closeWindow.bind(this, false), this.windowParams.timeout);
			}
			
			// 3. Fenstertyp
			switch (this.windowParams.type) {
				
				case 'alert':
					this.windowContainer.addClassName('cmtWinAlert');
					this.windowParams.overrideResizeEffects = true;
					this.windowParams.showButton = 'message';

					if (this.windowParams.buttonOKText) {
						this.windowButtonOK.update(this.windowParams.buttonOKText);
					}
					
					if (this.windowParams.buttonOKClassName) {
						this.windowButtonOK.addClassName(this.windowParams.buttonOKClassName);
					}
					break;
					
				case 'confirm':
					this.windowContainer.addClassName('cmtWinConfirm');
					this.windowParams.overrideResizeEffects = true;
					this.windowParams.showButton = 'confirm';
					
					if (this.windowParams.buttonConfirmText) {
						this.windowButtonConfirm.update(this.windowParams.buttonConfirmText);
					}
					if (this.windowParams.buttonCancelText) {
						this.windowButtonCancel.update(this.windowParams.buttonCancelText);
					}
					
					if (this.windowParams.buttonCancelClassName) {
						this.windowButtonCancel.addClassName(this.windowParams.buttonCancelClassName);
					}
					
					if (this.windowParams.buttonConfirmClassName) {
						this.windowButtonConfirm.addClassName(this.windowParams.buttonConfirmClassName);
					}
					break;
				
				case 'message':
					this.windowContainer.addClassName('cmtWinMessage');
					this.windowParams.overrideResizeEffects = true;
					this.windowParams.showButton = 'message';

					if (this.windowParams.buttonOKText) {
						this.windowButtonOK.update(this.windowParams.buttonOKText);
					}
					
					if (this.windowParams.buttonOKClassName) {
						this.windowButtonOK.addClassName(this.windowParams.buttonOKClassName);
					}
					break;
				
				default:
					this.windowParams.overrideResizeEffects = false;
					break;
			}
			
			// 4. Fenstertitel
			this.windowHeadTitle.update(this.windowParams.title);
			
			// 5. Knöpfe anzeigen
			if (!this.windowParams.dontShowButtons && this.windowParams.showButton) {
				this.windowButtons.show();
				
				switch (this.windowParams.showButton) {
				
					case 'confirm':
						this.windowButtonConfirm.show();
						this.windowButtonCancel.show();
						break;
					
					default:
					case 'message':
						this.windowButtonOK.show();
						if (this.windowParams.buttonOKText) {
							this.windowButtonOK.update(this.windowParams.buttonOKText);
						}
						if (this.windowParams.buttonOKClassName) {
							this.windowButtonOK.addClassName(this.windowParams.buttonOKClassName);
						}
						break;
				}
			}
			
			// 6. individueller CSS-Selektor
			if (typeof this.windowParams.className != 'undefined') {
				this.windowContainer.addClassName(this.windowParams.className);
			}
		},

		/**
		 * function _showWindow();
		 * Hilfsfunktion: Blendet das Fenster ein
		 *
		 * @params void
		 * @return void
		 */		
		_showWindow: function() {
			
			if (!this.windowParams.overrideResizeEffects) {
				Effect.Appear(this.windowContainer, {
					duration: this.windowParams.appearSpeed,
					from: 0,
					to: 1,
					transition: Effect.Transitions.sinoidal,
					afterFinish: this._showWindowContent.bind(this)
				});
			} else {
				this.windowContainer.show();
				this._showWindowContent();
				this.refreshWindowWidth({
					afterFinish: (this.refreshWindowHeight).bind(this)
				});
			}
		},

		/**
		 * function _showWindowContent();
		 * Hilfsfunktion: Blendet den Fensterinhalt ein, bzw. Lädt die Inhalte nach
		 *
		 * @params void
		 * @return void
		 */			
		_showWindowContent: function() {
			
			// Fensterinhalt anzeigen/ laden
			
			// URL
			if (this.windowParams.contentURL) {
				this.getAjaxWindowContent();
			}

			// Referenz auf Element oder Textinhalte
			if (this.windowParams.content) {
				var newContent = $(this.windowParams.content).clone(true);
				newContent.id = '';
				newContent.setStyle({
					display: 'block',
					visibility: 'visible'
				});
//				newContent.setOpacity(0.01);
				//this.windowContentInner.update(Element.wrap(newContent, 'div'));
				this.windowContentInner.update(newContent);
				this.windowContentInner.show();
				this.windowContentInner.setStyle({visibility: 'visible'});
			}			
		},
		
		_displayWindowContent: function () {
			this.windowContentInner.setOpacity(0);
			this.windowContentInner.setStyle({visibility: 'visible'});
			Effect.Appear(this.windowContentInner, {
				duration: 0.2,
				transition: Effect.Transitions.sinoidal
			});

		},
		
		_hideWindowContent: function() {
			//this.windowContent.down().setOpacity(0.01);
			//this.windowContent.down().setStyle({visibility: 'visible'});
			/*
			Effect.Appear(this.windowContent.down(), {
				duration: 0.2,
				transition: Effect.Transitions.sinoidal,
				afterFinish: (function() {
					this.windowContent.down().setStyle({visibility: 'hidden'});
				}).bind(this)
			});	*/
			this.windowContentInner.setStyle({visibility: 'hidden'})
		},
		
		/**
		 * function closeWindow();
		 * Zeigt das Fenster
		 *
		 * @params Object Objekt mit folgenden Parametern:
		 * - content string Inhalt des Modalfensters
		 * - title string Titeltext des Modalfensters
		 * - className string Zusätzlicher CSS-Selektor für den Modalfenster-Container
		 * - overlay boolean Bestimmt, ob ein Overlay hinter das Modalfenster gelegt werden soll
		 *
		 * @return void
		 */	
		closeWindow: function(ev, ret) {

			// Events
			switch (this.windowParams.type) {
				
				case 'confirm':
					if (ret) {
						this.windowParams.onConfirm();
					} else {
						this.windowParams.onCancel();
					}
					break;
					
				default:
					this.windowParams.onClose();
					break;
			}
			
			// Knöpfe verstecken
			this.windowButtons.hide();
			this.windowButtonOK.hide();
			this.windowButtonCancel.hide();
			this.windowButtonConfirm.hide();
			
			// ausblenden
			Effect.Fade(this.windowContainer, {
				duration: 0.2,
				transition: Effect.Transitions.sinoidal,
				afterFinish: this._hideWindowContentImmediatly.bind(this)
			});			

			if (this.windowParams.overlay && cmtUI.overlayHandler.overlayIsVisible) {
				cmtUI.overlayHandler.hideOverlay();
			}

			// Falls Fenster nach Zeitspanne ausgeblendet werden muss, Executer löschen
			if (this.windowParams.timeout && this.pE) {
				this.pE.stop();
			}

			// Fensterstatus
			this.windowIsVisible = false;
			
			this.windowContainer.removeClassName(this.windowParams.className);
			
			return ret;
		},
		
		_hideWindowContentImmediatly: function() {
			
			//this.windowContent.down().setStyle({visibility: 'hidden'});
			
			this.windowContainer.setStyle({ 
				width: ''
			});
			
			this.windowContent.setStyle({ 
				height: ''
			});

			this.currentHeight = -1;
			this.currentWidth = -1;

			this.windowContentInner.setStyle({visibility: 'hidden'});

			// Fenstertyp? Aufräumen
			switch (this.windowParams.type) {
				
				case 'alert':
					this.windowContainer.removeClassName('cmtWinAlert');
					this.windowButtonOK.removeClassName(this.windowParams.buttonOKClassName);
					break;
					
				case 'confirm':
					this.windowContainer.removeClassName('cmtWinConfirm');
					this.windowButtonConfirm.removeClassName(this.windowParams.buttonConfirmClassName);
					this.windowButtonCancel.removeClassName(this.windowParams.buttonCancelClassName);
					break;
				
				case 'message':
					this.windowContainer.removeClassName('cmtWinMessage');
					this.windowButtonOK.removeClassName(this.windowParams.buttonOKClassName);
					break;
					
				default:
					
					break;
					
			}
		},
		
		refreshWindowPosition: function() {
			return
/*			
			var windowDimensions = this.windowContainer.getDimensions();
	
			var windowHeight = windowDimensions.height;
			var windowWidth = windowDimensions.width;
			
			var viewportDimensions = document.viewport.getDimensions();
			var viewportWidth = viewportDimensions.width;
			
			var viewportScrollOffsets = document.viewport.getScrollOffsets();
			var viewportTopOffset = viewportScrollOffsets.top; 
			
			var windowXPos = Math.floor((viewportWidth - windowWidth) / 2);

			this.windowContainer.setStyle({
				//width: windowWidth+'px',
				left: windowXPos+'px',
				//top: windowYPos+'px',
				overflow: 'hidden'
			})
*/			
		},

		refreshWindowDimensions: function(params) {
			
			params = Object.extend(params, {afterFinish: (this.refreshWindowHeight).bind(this)});
			this.refreshWindowWidth(params);
		},
		
		/**
		 * function refreshWindowWidth();
		 * Aktualisiert die Breite des Fensters anhand der Breite der Inhalte
		 *
		 * @params {Object} params Parameter als Objekt:
		 * - refElement {Object} Referenz auf Element innerhalb des Inhalts (z.B. Grafik), dessen Breite ausschlaggebend sein soll
		 *
		 * @return void
		 */	
		refreshWindowWidth: function(params) {
			
			if (params.refElement) {
				var contentDimensions = $(params.refElement).getDimensions();
			
			} else {
				var contentDimensions = this.windowContentInner.getDimensions();
			}

			var paddingLeft = parseInt(this.windowContainer.getStyle('paddingLeft')) + parseInt(this.windowContent.getStyle('paddingLeft'));
			var paddingRight = parseInt(this.windowContainer.getStyle('paddingRight')) + parseInt(this.windowContent.getStyle('paddingRight'));			
			
			var contentWidth = parseInt(contentDimensions.width);
/*			
			var viewportDimensions = document.viewport.getDimensions();
			var viewportWidth = viewportDimensions.width;
			
			var windowXPos = Math.floor((viewportWidth - contentWidth) / 2);
*/
			var cumulatedWidth = contentWidth + paddingLeft + paddingRight;

			if (cumulatedWidth != this.currentWidth) {
			
				if (!this.windowParams.overrideResizeEffects) {
					new Effect.ReSize(this.windowContainer, {
						direction:'hor',
						toSize: cumulatedWidth,
						duration: 0.3,
						transition: Effect.Transitions.sinoidal,
						afterFinish: params.afterFinish
					});
				} else {

					this.windowContainer.setStyle({
						width: cumulatedWidth+'px'
					});

					if (typeof params.afterFinish == 'function') {
						params.afterFinish();
					}					
				}
				
				this.currentWidth = cumulatedWidth;
			} else {
				if (typeof params.afterFinish == 'function') {
					params.afterFinish();
				}					
			}
		},

		/**
		 * function refreshWindowHeight();
		 * Aktualisiert die Höhe des Fensters anhand der Höhe der Inhalte
		 *
		 * @params void
		 * @return void
		 */	
		refreshWindowHeight: function() {

			var contentDimensions = this.windowContentInner.getDimensions();
			var contentHeight = parseInt(contentDimensions.height);

			if (this.windowButtons.getStyle('display') != 'none') {
				var buttonsDimensions = this.windowButtons.getDimensions();
				var buttonsHeight = parseInt(buttonsDimensions.height);
			} else {
				var buttonsHeight = 0;
			}
			
			var paddingTop = parseInt(this.windowContent.getStyle('paddingTop'));
			var paddingBottom = parseInt(this.windowContent.getStyle('paddingBottom'));

//			var cumulatedHeight = contentHeight + buttonsHeight + paddingTop + paddingBottom;
			var cumulatedHeight = contentHeight + buttonsHeight;

			if (cumulatedHeight != this.currentHeight) {

				if (!this.windowParams.overrideResizeEffects) {
					new Effect.ReSize(this.windowContent, {
						direction:'vert',
						toSize: cumulatedHeight,
						duration: 0.3,
						transition: Effect.Transitions.sinoidal,
						afterFinish: function(){}
					});
				
				} else {
					this.windowContent.setStyle({
						height: cumulatedHeight+'px'
					});
				}
				this.currentHeight = cumulatedHeight;
			}
		},

		refreshWindowContent: function(params) {
			this.windowParams = Object.extend(this.windowParams, params);
			this._hideWindowContent();
			this._showWindowContent();
		},
		
		
		/**
		 * function getAjaxWindowContent();
		 * Führt einen Ajax-Request aus, um die Fensterinhalte nachzuladen
		 *
		 * @params void
		 * @return void
		 */			
		getAjaxWindowContent: function() {
			
			this.windowContentInner.ajaxUpdate(
				
				this.windowParams.contentURL, {
					method: "post",
					evalScripts: true,
					onComplete: this._proceedAjaxRequest.bind(this)
				}
			)
			
		},
		
		_proceedAjaxRequest: function(transport) {

			this.windowContentInner.setStyle({visibility: 'hidden'});
			this.windowContentInner.update('<div style="display: inline">'+transport.responseText+'</div>');
			var imgInAjaxContent = this.windowContentInner.select('img');
	
			if (imgInAjaxContent.length) {
				imgInAjaxContent.each(
					function (img) {
						Event.observe($(img), 'load', this._proceedAjaxRequestImageLoad.bindAsEventListener(this));
					},
					this
				)
			} else {
				this._displayWindowContent();
				this.refreshWindowDimensions({
					refElement: this.windowContentInner.down()
				});
			}
			
		},
		
		_proceedAjaxRequestImageLoad: function(ev) {
			this._displayWindowContent();

			this.refreshWindowDimensions({
				refElement: Event.element(ev)
			});
		},
		
		_checkClosingClick: function(ev) {
			if (Event.element(ev).id == 'cmtModalWinWrapper') {
				cmtUI.overlayHandler.hideOverlay(this);
			}
		},
		
		isVisible: function() {
			return this.windowIsVisible;
		}
		
	}

	cmtUI.formSelect = Class.create();
		
	cmtUI.formSelect.prototype = {
		initialize: function(params) {

			this.defaultParams = new Object ({
				selectSelector : '.cmtFormSelect',
				onClick: function() {}
			});

			// Parameter zusammenführen
			params = this.mergeParams(params);

			// Interne Variablen
			this.formElements = new Object();
			Element.extend(this.formElements);
			this.formElementCurrent = '';

			// Select-Felder ersetzen
			this.replaceSelect(params);

			// Klick auf Dokument schließt alle Select-Felder
			Event.observe(document, 'click', this.closeAllSelect.bindAsEventListener(this));
		},

		replaceSelect: function(params) {

			var formSelect = $$(params.selectSelector);
			
			// Alle ausgewählten Select-Felder bearbeiten
			for (i = 0; i < formSelect.length; i++) {

				var select = formSelect[i];
				var headlineContent = '';
				var isSelected = false;

				var selectID = select.readAttribute('id');
				var selectName = select.readAttribute('name');
//				select.writeAttribute('name', 'cmtReplaced_'+selectName);
				
				// Liste erstellen
				var ul = new Element('ul', {
					id: 'cmtFormSelectContent_'+selectID,
					className:  select.readAttribute('class')
				});
				

				// Listenelemente aus Options erstellen
				var formSelectOptions = select.select('option');

				for (c = 0; c < formSelectOptions.length; c++) {

					var option = formSelectOptions[c];
					var li = new Element('li', {
						id: 'cmtFormSelectOption_'+selectID+'_'+$(option).readAttribute('value'),
						className:  $(option).readAttribute('class'),
						style: $(option).readAttribute('style')
					});
					
					li.update($(option).innerHTML);
					Event.observe(li, 'click', this.clickSelectOption.bindAsEventListener(this));

					isSelected = $(option).readAttribute('selected');
					if (isSelected === 'selected' || isSelected === true) {
						
						li.addClassName('cmtFormSelectOptionSelected');
						headlineContent = $(option).innerHTML;
						//alert($(option)+" => "+headlineContent+": "+isSelected+", Index: "+select.selectedIndex)
					}

					$(ul).insert(li)
				}

				// Headline?
				var headline = new Element('h6', {
					className: select.value
				});
				
				if (headlineContent) {
					headline.update(headlineContent);
				} else {
					headline.update(select.readAttribute('title'));
				}
				var headlineHeight = headline.getHeight();
				
				this.shortenText ({
					refElement: headline
				})

				// Handle?
				var handle = Element.extend(document.createElement('div'));
				handle.writeAttribute('class', 'cmtFormSelectHandle');
				handle.writeAttribute('id', 'cmtFormSelectHandle_'+selectID);
				Event.observe(handle, 'click', this.toggleMenu.bindAsEventListener(this));

				var handleHeight = handle.getHeight();
//var handleHeight = 0;
				// Menücontainer erstellen
				var menuContainer = Element.extend(document.createElement('div'));
				menuContainer.writeAttribute('class', 'cmtFormSelectContainer');
				menuContainer.writeAttribute('id', 'cmtFormElement_'+selectID);

				// Menü registrieren
				this.formElements[selectID] = new Object({
					formElementType: 'select',
					menuID: menuContainer.readAttribute('id'),
					menuHeadline: headline,
					menuHandle: handle,
					menuContent: ul,
					formElement: select
				});

				// Aktionen bei Wertänderung oder Klick?
				if (typeof(params.selectProperties) != 'undefined' && typeof(params.selectProperties[selectID]) != 'undefined'){
					this.formElements[selectID].onChange = params.selectProperties[selectID].onChange;
					this.formElements[selectID].addValue = params.selectProperties[selectID].addValue;
				}
				
				// Fertiges Menü einfügen
				var selectParent = select.up();
				menuContainer.insert(headline);
				menuContainer.insert(ul);
				menuContainer.insert(handle);

				selectParent.insert(menuContainer);

				// CSS-Eigenschaften zur Positionierung übernehmen
				selectParent.setStyle({position: 'relative'});		// WICHTIG!!! Da sonst selectPosition falsch
				
				// Primäre CSS-Eigenschaften 
				selectPosition = select.positionedOffset();
				selectWidth = menuContainer.getStyle('width');
				if (!selectWidth) {
					selectWidth = select.getWidth+'px';
				}
				cssProperties = new Object();

				if (typeof(params.selectProperties) != 'undefined' && typeof(params.selectProperties[selectID].css) != 'undefined') {
					Object.extend(cssProperties, params.selectProperties[selectID].css);
				}

				menuContainer.setStyle(cssProperties);

				// Höhe anpassen
				ul.setStyle({
					top: headline.getHeight()+'px' 
				});

				// Menüs zuklappen, bzw. verstecken
				select.hide();
				ul.hide();

			}
		},

		/*
		 * Click Select Option
		 * event => Klick auf Listenelement,
		 * ID z.B. 'cmtFormSelectOption_office_2' => 'cmtFormSelectOption_'+ ID des Select-Feldes+'_'+Wert der Option (value)
		 */
		clickSelectOption: function(ev) {

			var el = Event.element(ev);
			Event.stop(ev);

			var IDParts = el.readAttribute('id').split('_');
			var selectName = IDParts[1];
			var menuData = this.formElements[selectName];
			var selectedValue = IDParts[2];
			var valueChanged = false;
			
			//menuData.formElement.writeAttribute('value',IDParts[2]);
			menuData.menuHeadline.update(el.innerHTML);

			options = menuData.formElement.select('option');
			oldValue = menuData.formElement.value;

			for (i = 0; i < options.length; i++) {

				if (options[i].readAttribute('value') == selectedValue) {
					
					if (!options[i].readAttribute('selected')) {
						valueChanged = true;
					}
					options[i].writeAttribute('selected', 'selected');
					var newValue = options[i].readAttribute('value');
					// break;
				} else {
					options[i].writeAttribute('selected', null);
				}
			}

			this.resetSelection(menuData)
			el.addClassName('cmtFormSelectOptionSelected');

			this.toggleMenu(menuData.menuContent, 'object');

			// Zusätzliche Aktionen nötig?
			if (valueChanged && menuData.onChange) {
				menuData.onChange(ev);
			}
			
			// H6 aktualisieren
			menuData.menuHeadline.removeClassName(oldValue);
			menuData.menuHeadline.addClassName(newValue);

		},

		setEvent: function(selectName, eventName, eventFunction) {
			
			if (typeof this.formElements[selectName] == 'undefined') {
				return false;
			}
			
			this.formElements[selectName][eventName] = eventFunction;
		},

		/*
		 * Open Menu
		 */
		toggleMenu: function(ev, type) {
			
			if (!type) type='';
			
			switch (type) {
				// Falls direkt eine Referenz auf das Objekt übergeben wird
				case 'object':
					
					var el = ev;
					var menuIDElements = el.readAttribute('id').split(/_/);
					var menuID = 'cmtFormSelectContent_'+menuIDElements[1];

					this.toggleHandle('cmtFormSelectHandle_'+menuIDElements[1]);
					break;

				// Falls Event oder Objekt-ID übergeben wird.
				default:
					if (typeof(ev) == 'object') {
						var el = Event.element(ev);
						Event.stop(ev);

						var menuIDElements = el.readAttribute('id').match(/^[^_]*_(.*)/);
						var menuID = 'cmtFormSelectContent_'+menuIDElements[1];

						this.toggleHandle(el.id);
					} else {
						menuID = ev;
						this.toggleHandle(ev.replace(/Content/, 'Handle'));
					}

					break;
			}
			
			// 
			
			this.closeAllSelect(ev, menuID);

			Effect.toggle($(menuID), 'blind', {duration: 0.3});

		},

		toggleHandle: function(elID) {
			el = $(elID);

			if (el.hasClassName('cmtFormSelectHandleClose')) {
				el.removeClassName('cmtFormSelectHandleClose')
			} else {
				el.addClassName('cmtFormSelectHandleClose')
			}
		},

		closeAllSelect: function(ev, currentMenuID) {

			if (typeof currentMenuID == 'undefined') {
				currentMenuID = ''
			}
			
			for (a in this.formElements) {
				
				menuData = this.formElements[a];

				if (menuData.formElementType == 'select' && menuData.menuContent.visible() && (menuData.menuID != currentMenuID)) {
					Effect.BlindUp(menuData.menuContent, {
						duration: 0.1,
						afterFinish: function(el) {}
					});
					menuData.menuHandle.removeClassName('cmtFormSelectHandleClose')
				}
			}
			this.formElementCurrent = '';

		},

		resetSelection: function(menuData) {
			liElements = menuData.menuContent.select('li');
			liElements.each(
				function(el){el.removeClassName('cmtFormSelectOptionSelected')}
			);
		},

		mergeParams: function(params) {
			return Object.extend(this.defaultParams, params);
		},

		/**
		 * function addFormElement(params)
		 * Fügt der automatisch generierten, internen Formularfeldliste einen Formularfeldcontainer an.
		 *
		 * @param params object Object mit allen relevanten Parametern
		 *
		 * @return void
		 */
		addFormElement: function(params) {

			// Menü registrieren
			newID = 'cmtFormElement_'+params.menuID;

			this.formElements[params.menuID] = new Object({
				formElementType: params.formElementType,
				menuID: newID,
				menuHeadline: $(params.menuHeadline),
				menuHandle: $(params.menuHandle),
				menuContent: $(params.menuContent),
				formElement: $(params.formElement)
			});
			$(params.menuID).writeAttribute('id', newID);
		},


		shortenText: function(params) {
			if (!params.refElement) {
				return
			}
			
			var defaultParams = new Object ({
				textSuffix : '...',
				width: 60,
				charWidth: 8
				
			});
			params = Object.extend(defaultParams, params);
			
			var elContent = $(params.refElement).innerHTML;

			if (elContent.length > (params.width / params.charWidth)) {
				$(params.refElement).update(elContent.substr(0,Math.floor(params.width / params.charWidth)) + params.textSuffix);
			}
			
		},
		
		/*
		 * Helper: check params
		 */
		checkObject: function(params) {
			if (typeof(params) == 'undefined') {
				return new Object;
			} else {
				return params;
			}
		}
	}
 
 /**
  * Pseudo-Klasse Shop:
  * Fasst alle für den Shop nötigen Funktionen zusammen
  * 
  * 
  */

 var cmtShop = Class.create();
 
 cmtShop.prototype = {
 
 	initialize: function(){
		
		// Variablendefinitionen
		this.currentDetailImage = 1;	// Aktuelles Bild
		this.currentZoomImage = 1;	// Aktuelles Zoom-Bild
		
		this.detailsImages = null;		// Container für Detailbildreferenzen
		this.totalDetailImages = 1;		// Anzahl der Detailbilder

		this.imageContainerIDPrefix = 'detailsImage_';		// ID-Prefix für einzelne Bildcontainer
		this.detailImageSelector = '.detailsImage'
		
		this.thumbnailContainerIDPrefix = 'detailsSelectThumbnail_';
		
		this.speedImageAppears = 0.4;		// Geschwindigkeit, mit welcher Detailbild erscheint.
	
		this.vars = new Object();		// zentraler Variablen-Container
		this.vars.windowParamsCache = new Object(); // Variablen-Objekt für Modalfenster

		// Modalfenster initialisieren
//		this.overlay = new cmtUI.modalWindow();

 		
		// Die IEs haben Probleme mit 'dom:loaded' wenn danach Elemente in den DOM-Baum eingefügt werden,
		// wie in cmtModalWin! (http://www.ruby-forum.com/topic/134707)
		
		if (!Prototype.Browser.IE) {
			Event.observe(window, 'dom:loaded', this.initShop.bindAsEventListener(this));
		}
		else {
			Event.observe(window, 'load', this.initShop.bindAsEventListener(this));
		}
		
 	},
	
	initShop: function() {
		
		// Selectfelder austauschen
		this.cmtForm = new cmtUI.formSelect();
		this.cmtForm.setEvent('selectCountry', 'onChange', function() {$('shopActionForm').submit()});
		this.cmtForm.setEvent('selectLanguage', 'onChange', function() {$('shopActionForm').submit()});
		
		// Modalfenster (und gleich anzeigen?)
		this.modalWindow = new cmtUI.modalWindow();
		this._showWindowAfterLoad();
		
		// Detailseite: Bilder vorhanden?
		this.countDetailImages();
		
		// Bei Initalisierung ist this.nextZoomImage = 2 und this.prevZoomImage das letzte Bild, 
		// da Zoom-Bild Nr. 1 angezeigt wird. 
		this.nextZoomImage = this.currentZoomImage + 1;
		this.prevZoomImage = this.totalDetailImages;
		
		// Für Formularfeldeffekt
		this.currentFormFieldContainer = null;
	},

	showWindowAfterLoad: function(params) {
		Object.extend(this.vars.windowParamsCache, params)
	},
	
	_showWindowAfterLoad: function() {
		
		// schlechte Lösung. Besser die Länge des Cache ermittelnt
		if (typeof this.vars.windowParamsCache.type != 'undefined') {
			this.modalWindow.showWindow(this.vars.windowParamsCache);
		}
	},
	
	/**
	 * function addVars()
	 * Fügt dem internen Variablen-Container neue Werte hinzu
	 * 
	 * @param {Object} vars
	 */
	addVars: function(vars) {
		if (typeof vars == 'undefined') {
			return false;
		}

		Object.extend(this.vars, vars);
	
	},
	
	getVar: function(varName) {

		return this.vars[varName];
	},
	
	countDetailImages: function() {
		this.detailImages = $$(this.detailImageSelector);
		this.totalDetailImages = this.detailImages.length;
	},
	
	/**
	 * function showDetailImage()
	 * Zeigt das ausgewählte Detailbild eines Artikels in einem Modalfenster an.
	 * 
	 * @param number imageNr Die Nummer des Bilder in der Reihenfolge der Thumbnails
	 */
	showDetailImage: function(imageNr) {
		
		// Falls aktuelles Bild, sofort return
		if (imageNr == this.currentDetailImage) {
			return;
		}
		
		if (typeof imageNr == 'undefined') {
			imageNr = this.currentDetailImage;
		}
		
		// Thumbnailbild aktualisieren
		this.changeThumbnailImage(imageNr);
		
		// Bild aktualisierne
		var oldImage = $(this.imageContainerIDPrefix + this.currentDetailImage);
		var newImage = $(this.imageContainerIDPrefix + imageNr);
		
		// neues Bild erscheinen lassen
		newImage.show();
		newImage.setOpacity(0.01);
		
		Effect.Appear(newImage, {
			duration: this.speedImageAppears,
			from: 0,
			to: 1.0
		});

		// altes Bild verstecken
		oldImage.hide();
		
		// Bildnummer aktualisieren
		this.currentDetailImage = imageNr;

	},
	
	changeThumbnailImage: function (imageNr) {
		if (imageNr == this.currentDetailImage) {
			return;
		}
		var oldThumbnail = $(this.thumbnailContainerIDPrefix + this.currentDetailImage);
		var newThumbnail = $(this.thumbnailContainerIDPrefix + imageNr);
		
		oldThumbnail.removeClassName('detailsSelectThumbnailSelected');
		newThumbnail.addClassName('detailsSelectThumbnailSelected');
		
		newThumbnail.select('a')[0].blur();
	},
	
	/**
	 * function showZoomImage()
	 * Zeigt ein vergrößertes Bild des Artikels an
	 * 
	 * @param {Object} params Erwartet Variablen in einem Onjekt:
	 * - imageNr {Number} Nummer des Bildes in der Reihenfolge
	 * - articleNr {String} Artikelnummer
	 * 
	 *  @return void
	 */
	showZoomImage: function (params) {

		this.currentZoomImage = params.zoomImage;

		this.prevZoomImage = this.currentZoomImage - 1;
		this.nextZoomImage = this.currentZoomImage + 1;
	
		if (this.prevZoomImage < 1) {
			this.prevZoomImage = this.totalDetailImages;
		}
		if (this.nextZoomImage > this.totalDetailImages) {
			this.nextZoomImage = 1;
		}
		
		var date = new Date();
		var cacheBuster = date.getMilliseconds();

		var titleContent = '<a class="linkBack" href="Javascript:Shop.showZoomImage({zoomImage: Shop.prevZoomImage, articleNr: Shop.vars.articleNr});">'+params.prevLinkText+'</a>';
		titleContent += '<a class="linkForward" href="Javascript:Shop.showZoomImage({zoomImage: Shop.nextZoomImage, articleNr: Shop.vars.articleNr});">'+params.nextLinkText+'</a>';

		if (!this.modalWindow.isVisible()) {

			this.modalWindow.showWindow({
				contentURL: '?ajaxAction=showArticleZoomImage&imageNr='+params.zoomImage+'&articleNr='+params.articleNr+'&cacheBuster='+cacheBuster,
				className: 'detailZoomImageContainer',
				title: titleContent
			})
		} else {
			this.modalWindow.refreshWindowContent({
				contentURL: '?ajaxAction=showArticleZoomImage&imageNr='+params.zoomImage+'&articleNr='+params.articleNr+'&cacheBuster='+cacheBuster,
				className: 'detailZoomImageContainer',
				title: titleContent
			})
		}
	},

	/**
	 * function showZoomImage()
	 * Zeigt ein vergrößertes Bild des Artikels an
	 * 
	 * @param {Object} imageNr
	 * @param {Object} articleNr
	 */
	hideZoomImage: function () {
		this.shopModalInterface.hideOverlay();
	},
	
	/**
	 * function selectArticleSize()
	 * Wir nach Klick auf einen Artikelgrößenlink aufgerufen 
	 * und speichert die aktuell ausgewählte Artikelgröße
	 * 
	 * @param {String} articleSize Ausgewählte Größe des Artikels
	 * @param {String} linkID ID des Link-Tags
	 */
	selectArticleSize: function (articleSize, linkID) {

		if (typeof articleSize == 'undefined') return false;
		
		// Artikelgröße in verstecktes Feld schreiben
		$('addToCartSelectedSize').value = articleSize;

		// Ausgewählte Größe markieren
		this._unSelectCurrentArticleSize();
		$(linkID).addClassName('articleSizeSelected');
		
		// Falls Hinweis auf Artikelgröße noch angezeigt wird, ausblenden
		if ($('articleSizeSelectionHint').visible()) {
			$('articleSizeSelectionHint').fade({duration: 0.3});
		}
	},
	
	/**
	 * function _unSelectCurrentArticleSize()
	 * Hilfsfunktion: Entfernt die aktuelle Auswahl von einem Größenlink
	 * 
	 */
	_unSelectCurrentArticleSize: function () {
		var articleSelectionLinks = $('detailsSizeSelectionContainer').select('a');
		
		articleSelectionLinks.each(function(link) {
			link.removeClassName('articleSizeSelected');
		});
	},
	
	/**
	 * function checkBeforeAdd()
	 * Prüft, ob bereits eine Artikelgröße ausgewählt wurde, wenn der "in den Warenkorb legen"-Knopf gedrückt wird.
	 * Falls nicht, wird ein Hinweis-Tooltip eingeblendet.
	 * 
	 */
	checkBeforeAdd: function() {
		if (!$('addToCartSelectedSize').value) {

			Effect.Appear('articleSizeSelectionHint', {
				duration: 0.2,
				afterFinish: function() {
					window.setTimeout(function(){
						if ($('articleSizeSelectionHint').visible) {
							$('articleSizeSelectionHint').fade();
						} else {
							$('articleSizeSelectionHint').hide();
						}
					}, 5000)
				} 
				 });
			return false;
		} else {

			$('buttonAddToCart').writeAttribute('disabled', 'disabled');
			$('buttonAddToCart').addClassName('buttonDisabled');
			$('buttonAddToCart').blur();
			return true;
		}
	},
	
	/**
	 * function prepareForm()
	 * Erweitert ein Formular um Eingabehilfen
	 * 
	 */
	prepareForm: function(params) {
		if (typeof params == 'undefined') {
			var params = new Object()
		}

		if (!params.cssSelector) {
			params.cssSelector = '.formFieldExtended';
		}
		if (!params.highlightSelector) {
			params.highlightSelector = 'formFieldExtendedSelected';
		}

		if (!params.highlightColor) {
			params.highlightColor = '#FF0000';
		}
		if (!params.defaultColor) {
			params.defaultColor = '#FFFFFF';
		}
		
		this.formParams = new Object();
		this.formParams.highlight = new Object();
		Object.extend(this.formParams.highlight, params); 
		
		// Formularelemente suchen und anpassen
		var formContainers = $$(params.cssSelector);
		formContainers.each(
			function(el, index) {
				
				var formElements = el.select('input', 'select');
				formElements.each(
					function(el, index) {
						if (el.type != 'hidden' && !el.hasClassName('noEffect')) {
							el.observe('focus', this._formFieldFocus.bindAsEventListener(this));
							el.observe('blur', this._formFieldBlur.bindAsEventListener(this));
						}
					}, this
				)
				
			}, this
		)
		
	},
	
	/**
	 * function _formFieldFocus()
	 * Wird aufgerufen, wenn ein Formularfeld aktiv ist
	 * 
	 * @param {Object} ev
	 */
	_formFieldFocus: function (ev) {
		var el = Event.element(ev);
		var container = el.up(this.formParams.highlight.cssSelector);

		if (container != this.currentFormFieldContainer) {
			container.addClassName(this.formParams.highlight.highlightSelector)

			var rgb = container.getStyle('backgroundColor');
			var rgbParts = rgb.match(/([0-9]+)/g);
			if (rgbParts != null) {
	
			 	var startColor = '#' +
			 	parseInt(rgbParts[0]).toString(16) +
			 	parseInt(rgbParts[1]).toString(16) +
			 	parseInt(rgbParts[2]).toString(16);
			 	
			} else {
			 	var startColor = '#FDFDFD';
			}
			this.formParams.highlight.defaultColor = startColor;
			
			this.formFieldEffect = new Effect.Highlight(container, {
				startcolor: startColor,
				endcolor: this.formParams.highlight.highlightColor,
				restorecolor: this.formParams.highlight.highlightColor,
				duration: 0.4
			});

		} else {
			this.formFieldEffect.cancel();
			this.currentFormFieldContainer.addClassName(this.formParams.highlight.highlightSelector)
		}
	},
	
	/**
	 * function _formFieldBlur()
	 * Wird aufgerufen, wenn ein Formularfeld deaktiviert wird
	 * 
	 * @param {Object} ev
	 * @return void
	 */	
	_formFieldBlur: function (ev) {
		var el = Event.element(ev);
		var container = el.up(this.formParams.highlight.cssSelector);
		this.highlightedContainer = container;
		//var container = el.up(this.formParams.highlight.highlightSelector);
		
		container.removeClassName(this.formParams.highlight.highlightSelector);

			var rgb = container.getStyle('backgroundColor');
			var rgbParts = rgb.match(/([0-9]+)/g);
			if (rgbParts != null) {
	
			 	var startColor = '#' +
			 	parseInt(rgbParts[0]).toString(16) +
			 	parseInt(rgbParts[1]).toString(16) +
			 	parseInt(rgbParts[2]).toString(16);
			 	
			} else {
			 	var startColor = '#888888';
			}

		this.formFieldEffect = new Effect.Highlight(container, {
			startcolor: this.formParams.highlight.highlightColor,
			endcolor: this.formParams.highlight.defaultColor,
			restorecolor: this.formParams.highlight.defaultColor,
			duration: 0.4,
			afterFinish: this._removeSelector.bind(this)
		});
		this.currentFormFieldContainer = container;

	},
	
	_removeSelector: function (ev) {
		//this.currentFormFieldContainer.removeClassName(this.formParams.highlight.highlightSelector);
		this.currentFormFieldContainer = '';
		
		// sinnvoll?
		this.highlightedContainer.setStyle({
			background: 'transparent'
		});
	},
	
	showArea: function (params) {
		if (typeof params == 'undefined') {
			params = new Object();
		}
		
		// Wird das Element bereits angezeigt?
		if ($(params.showAreaID) != null && $(params.showAreaID).getStyle('display') != 'none') return
		
		if (params.hideAreaID) {
			$(params.hideAreaID).absolutize();
			$(params.hideAreaID).fade({
				duration: 0.2
			});
		} else if (params.showAreaID) {
			$(params.showAreaID).up().immediateDescendants().each( function (el, index) {
				var elementVisibility = el.getStyle('display');
				if (elementVisibility != 'none') {
					el.absolutize();
					el.fade({
						duration: 0.2
					});					
				}
			}, this);
		}
/*		
		if (params.parentID) {
			$(parentID.select())
			this.hideArea()
		}
*/		
		if (params.showAreaID) {
			$(params.showAreaID).appear({
				duration: 0.7
			});

			var newHeight = $(params.showAreaID).getHeight();
			
			new Effect.ReSize($(params.showAreaID).up(), {
				direction:'vert',
				toSize: newHeight,
				duration: 0.4,
				transition: Effect.Transitions.sinoidal
			});	
		}
		
		// Soll noch ein Formularfeld geändert werden?
		if (params.flagFieldID != null) {
			$(params.flagFieldID).value = params.flagFieldValue;
		}
		
		return false;
	},
	
	/**
	 * function toggleFilter()
	 * Klappt das filtermenü in den Shoptools auf und zu.
	 * 
	 * @param {Object} params
	 * @return void
	 */	
	 
	toggleFilter: function(params) {
		
		Effect.toggle(params.filterContainerID, 'blind', { duration: 0.5, transition: Effect.Transitions.sinoidal });
		$(params.blur).blur();
		$(params.handleID).toggleClassName('buttonClose');
		
	},
	
	hideFilter: function(params) {
		
		Effect.BlindUp($(params.filterContainerID), { duration: 0.5, transition: Effect.Transitions.sinoidal });
		//$(params.blur).blur();
	
	},	
	
	deleteArticleFromCart: function(params) {
		
		this.addVars({articlePosition: params.articlePosition});
		
		this.modalWindow.showWindow({
			title: params.title,
			type: 'confirm',
			content: params.content,
			buttonConfirmText: params.buttonConfirmText,
			buttonCancelText: params.buttonCancelText,
			buttonCancelClassName: 'buttonCancel',
			buttonConfirmClassName: 'buttonForward',
			onConfirm: (function() {
				var articlePosition = this.getVar('articlePosition');
				window.location.href="?shopAction=deleteArticle&articlePosition=" + articlePosition;
				//alert ("lösche: " + "?shopAction=deleteArticle&articlePosition=" + this.getVar('articlePosition'));
			}).bind(this)
		});	

	}
	
 }
  
 
 
 Shop = new cmtShop();