/**
 * project: messe frankfurt - web
 * type: javascript
 * @description: loader for component based javascript (homepage)
 * @author: Stefan Heimann, 21.01.2009
 * @copyright: Day Software 2008-2009. All rights reserved.
 */



/**
 * component: none
 * @description: create a namespace for the "Messe Frankfurt"
 */

Ext.namespace('mf');
/**
 * component: none
 * @description: generic array/object functions
 */

mf.array = {

	/**
	 * merge two associative objects to one and override keys in first object if necessary
	 * @param firstObject {Object} object which key/value pairs
	 * @param secondObject {Object} object which key/value pairs
	 * @return {Object} merged object
	 */
	mergeObjects: function(firstObject, secondObject){
		var mergedObject = new Object();
		for (var i in firstObject) {
			if (isNaN(i)) {
				mergedObject[i] = firstObject[i];
			}
		}
		for (var i in secondObject) {
			if (isNaN(i)) {
				mergedObject[i] = secondObject[i];
			}
		}
		return mergedObject;
	}
}

/**
 * component: none
 * @description: cookie handling
 */

mf.cookie = {
	
	/**
	 * create a cookie
	 * @param name {String} name of cookie
	 * @param value {Sring} value of cookie
	 * @param days {Int} days until the cookie expires
	 */
	createCookie: function(name,value,days) {
		if (days) {
			var date = new Date();
			date.setTime(date.getTime()+(days*24*60*60*1000));
			var expires = "; expires="+date.toGMTString();
		}
		else var expires = "";
		document.cookie = name + "=" + value + expires + "; path=/";
	},
	
	/**
	 * read a cookie
	 * @param name {String} name of cookie
	 */
	readCookie: function(name) {
		var nameEQ = name + "=";
		var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	},
	
	/**
	 * delete a cookie
	 * @param name {String} name of cookie
	 */
	eraseCookie: function(name) {
		mf.cookie.createCookie(name,"",-1);
	}
};
/**
 * component: none
 * @description: generic function to determine if a component exists in the page and retrieves the component
 */
mf.components = {
	/**
	 * selects the component
	 * @param none
	 * @return Ext.CompositeElement || Ext.Element || null
	 */
	getComp: function(containerId, componentClass) {
		var component = null;
		var container = Ext.get(containerId);
		if (container) {
			if (componentClass) {
				if (container.select('.' + componentClass).elements.length > 0) {
					component = container.select('.' + componentClass);
				}
			} else {
				component = container;
			}
		}
		return component;
	}
};




/**
 * component: fast access
 * @description: registers listener and adds toggle functionality
 */

// init component
Ext.onReady(function() {
	mf.fastAccess.init();
});

mf.fastAccess = {

	/**
	 * initialize function
	 * @param none
	 */
	init: function() {
		if (mf.fastAccess.comp = mf.components.getComp('mfFastAccesses')) {
			// workaround to avoid duplicate content - google
			if (mf.fastAccess.JSDomSearch = mf.components.getComp('mfFastAccessSearch').select('.mfFastAccessBody').first()) {
				mf.fastAccess.JSDomSearch.insertHtml('beforeEnd',mfConfig.fastAccess.fastAccessSearch);	
			}
			if(mf.components.getComp('mfFastAccessFairs')){
				if (mf.fastAccess.JSDomFairs = mf.components.getComp('mfFastAccessFairs').select('.mfFastAccessBody').first()) {
					mf.fastAccess.JSDomFairs.insertHtml('beforeEnd',mfConfig.fastAccess.fastAccessFairs);
				}
			}
			if(mf.components.getComp('mfFastAccessEvents')){
				if (mf.fastAccess.JSDomEvents = mf.components.getComp('mfFastAccessEvents').select('.mfFastAccessBody').first()) {
					mf.fastAccess.JSDomEvents.insertHtml('beforeEnd',mfConfig.fastAccess.fastAccessEvents);
				}
			}
			mf.fastAccess.setListener();
		}
	},

	/**
	 * selects the Ext Element with an id starting with "mfFastAccess"
	 * and the Ext Element with the class "mfFastAccessBody" underneath
	 * @param el {Ext.Element} Element to get parent and body for
	 * @return {Object} object which contains two Ext.Elements for parent and body of el  ||  null
	 */
	getFastAccessParts: function(el) {
		var parts = {
			parent: el.up('div[id^=mfFastAccess]')
		}

		if (parts.parent && (parts.parent.id != 'mfFastAccesses')) {
			parts.body = parts.parent.child('.mfFastAccessBody');
		} else {
			parts = null;
		}
		
		return parts;
	},

	/**
	 * activate all listener
	 * @param none
	 */
	setListener: function() {
		// link in headline
		mf.fastAccess.comp.select('h3 a').on('click', function(e, t) {
			var parts = mf.fastAccess.getFastAccessParts(Ext.get(t));
			if (parts && !parts.parent.hasClass('mfSliding')) {
				parts.body.hasClass('mfHd') ? mf.fastAccess.openComp(parts) : mf.fastAccess.closeComp(parts);
				if (parts.parent.id == 'mfFastAccessFairs' && typeof mf.fastAccess.keyMap == "undefined") {
					mf.fastAccess.addKeyMap(); // create keymapper
				}
			}
		}, this,{stopEvent: true});


		// fast access body
		mf.fastAccess.comp.on('mouseout', function(e, t) {
			var parts = mf.fastAccess.getFastAccessParts(Ext.get(t));

			if (parts && !parts.parent.getRegion().contains(e.getPoint()) && !parts.parent.hasClass('mfSliding') && !parts.body.hasClass('mfHd')) {
				mf.fastAccess.closeComp(parts);
			}
		}, this,{stopEvent: true});


		// search input field
		mf.fastAccess.comp.select('#mfFastAccessSearchInput').first().on({
			'click': function(e, t) {
				var parts = mf.fastAccess.getFastAccessParts(Ext.get(t));
				if (parts && parts.body.hasClass('mfHd')) {
					mf.fastAccess.openComp(parts);
				}
			},
			'focus': function(e, t) {
				mf.fastAccess.searchFieldFocus(e, t);
				
				var parts = mf.fastAccess.getFastAccessParts(Ext.get(t));
				if (parts && parts.body.hasClass('mfHd')) {
					mf.fastAccess.openComp(parts);
				}
			},
			'blur': function(e, t) {
				//mf.fastAccess.searchFieldBlur(e, t);
			}
		});


		// search submit button
		/*
		mf.fastAccess.comp.select('#mfFastAccessSearchSubmit').first().on({
			'mouseover': function(e, t) {
				Ext.get(t).setStyle('background-position', '-1px -500px');
			},
			'mouseout': function(e, t) {
				var input = Ext.get(t);
			
				var parts = mf.fastAccess.getFastAccessParts(Ext.get(t));
				if (parts && parts.body.hasClass('mfHd')) {
					input.setStyle('background-position', '-1px -300px');
				} else {
					input.setStyle('background-position', '-1px -100px');
				}
			}
		});
		*/
				
		// fair list toggle
		mf.fastAccess.comp.select('#mfFastAccessFairs .mfFastAccessBodyTop a.mfSort').on('click', function(e, t) {
			Ext.get(t).up('.mfFastAccessBodyTop').select('a.mfSort').toggleClass('mfHd');
			Ext.get(t).up('.mfFastAccessBody').select('div').toggleClass('mfHd');
			// re-init keymap
			mf.fastAccess.keyMap.disable();
			mf.fastAccess.keyMap = false;
			mf.fastAccess.addKeyMap(); 
		});
		
		// delete cookie on click @ link to fair to prevent backlinks in results fair page
		/*
		mf.fastAccess.comp.select('#mfFastAccessFairs .mfFastAccessBody div[class!=mfHd] a').on('click', function(){
			var cookieValue = mf.cookie.readCookie(mf.searchResultsFairs.settings.key);
			mf.cookie.createCookie(mf.searchResultsFairs.settings.key, ' ', 0);	
		});
		*/
	},
	
	/**
	 * adds a key listener to fairs list
	 * @param none
	 */
	addKeyMap: function(){
		
		var countpress = 0; // count the keys
		var lastkey; //saves the last key
		var scrolldiv = Ext.get('mfFastAccessFairs').select('.mfFastAccessBody div[class!=mfHd]'); // the div to scroll
		var letters = new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
		var lettercodes = new Array();
			lettercodes[48]='0';lettercodes[49]='1';lettercodes[50]='2';lettercodes[51]='3';lettercodes[52]='4';
			lettercodes[53]='5';lettercodes[54]='6';lettercodes[55]='7';lettercodes[56]='8';lettercodes[57]='9';
			lettercodes[65]='a';lettercodes[66]='b';lettercodes[67]='c';lettercodes[68]='d';lettercodes[69]='e';
			lettercodes[70]='f';lettercodes[71]='g';lettercodes[72]='h';lettercodes[73]='i';lettercodes[74]='j';
			lettercodes[75]='k';lettercodes[76]='l';lettercodes[77]='m';lettercodes[78]='n';lettercodes[79]='o';
			lettercodes[80]='p';lettercodes[81]='q';lettercodes[82]='r';lettercodes[83]='s';lettercodes[84]='t';
			lettercodes[85]='u';lettercodes[86]='v';lettercodes[87]='w';lettercodes[88]='x';lettercodes[89]='y';
			lettercodes[90]='z';
		
		// change the first letter to uppercase
		Ext.get('mfFastAccessFairs').select('.mfFastAccessBody div[class!=mfHd] a').each(function(e){
			var text = e.dom.innerHTML;
			var firstletter = text.slice(0,1).toUpperCase();
			var lastletters = text.substr(1,text.length-1);
			e.dom.innerHTML = firstletter + lastletters;
		});
		
		// create keyconfig object
		var letter = new Array();
		for(var i = 0; i < letters.length; i++){
			
			letter[i] = new Object();
			letter[i]['key'] = letters[i];
			letter[i]['fn'] = function(e,o) {
				
				var offset = new Array();
				var element = new Array();
				var current = lettercodes[e];
				
				Ext.get('mfFastAccessFairs').select('.mfFastAccessBody div[class!=mfHd] a:contains('+current.toUpperCase()+')').each(function(e){
					if (e.dom.innerHTML.slice(0, 1) == current.toUpperCase()) {
						offset.push(e.dom.offsetTop);
						element.push(e.dom);
						if(lastkey != current) {
							lastkey = current;
							countpress = 0;
						} 
					}
				});
				
				if (countpress < offset.length) {
					var scrolloffset = (Ext.isIE) ? 100 : 200;
					scrolldiv.scrollTo('top', 0); //reset
					scrolldiv.scroll('b', offset[countpress] - scrolloffset); //scroll
					
					Ext.get('mfFastAccessFairs').select('.mfFastAccessBody div[class!=mfHd] a').removeClass('mfActive'); //reset
					var el = Ext.get(element[countpress])
						el.focus();
						el.addClass('mfActive');
					countpress += 1; //count
				}
			}
		}
		
		// create keymapper
		mf.fastAccess.keyMap = new Ext.KeyMap("mfFastAccessFairs",letter);
	},
	
	/**
	 * slides the box out
	 * @param parts {Object} object which contains the two current Ext.Elements for parent and body
	 */
	openComp: function(parts) {
		parts.parent.addClass('mfSliding');
		parts.body.removeClass('mfHd');

		parts.body.slideIn('t',{
			easing: 'easeOut',
			duration: .5,
			callback: function(){
				parts.parent.removeClass('mfSliding');
				if (parts.parent.id == 'mfFastAccessSearch') {
					//parts.parent.child('form h3 input').setStyle('background-position', '-1px -100px');
				} else {
					parts.parent.select('h3 a').addClass('mfFastAccessesUp');
				}
			}
		});
	},

	/**
	 * slides the box in
	 * @param parts {Object} object which contains the two current Ext.Elements for parent and body
	 */
	closeComp: function(parts) {
		parts.parent.addClass('mfSliding');

		parts.body.slideOut('t',{
			easing: 'easeOut',
			duration: .5,
			callback: function(){
				parts.body.addClass('mfHd');
				parts.parent.removeClass('mfSliding');
				if (parts.parent.id == 'mfFastAccessSearch') {
					//parts.parent.child('form h3 input').setStyle('background-position', '-1px -300px');
				} else {
					parts.parent.select('h3 a').removeClass('mfFastAccessesUp');
				}
			}
		});
	},

	/**
	 * checks if the default text is displayed in the search field and removes it
	 * @param e {event} event
	 * @param t {Object} target
	 */
	searchFieldFocus: function(e, t) {
		var field = Ext.get(t);
		if (field.dom.value == mfConfig.fastAccess.searchDefault) {
			field.dom.value = '';
		}
	},

	/**
	 * checks if no text is displayed in the search field and adds the default text
	 * @param e {event} event
	 * @param t {Object} target
	 */
	searchFieldBlur: function(e, t) {
		var field = Ext.get(t);
		if (field.dom.value == '') {
			field.dom.value = mfConfig.fastAccess.searchDefault;
		}
	}
};

/**
 * component: languageSwitcher
 * @description: modifies display of language selection
 */

// init component
Ext.onReady(function() {
	mf.languageSwitcher.init();
});

mf.languageSwitcher = {

	/**
	 * initialize function
	 * @param none
	 */
	init: function() {
		if (mf.languageSwitcher.comp = mf.components.getComp('mfLanguageSwitcher')) {
			mf.languageSwitcher.comp.down('ul.mfHNav').addClass('mfLanguageListDynamic');
			mf.languageSwitcher.createNavigation();
			mf.languageSwitcher.comp.down('a.mfGoDown').on('click', function() {
				mf.languageSwitcher.expand();
			},this,{stopEvent: true}); //open
			mf.languageSwitcher.comp.down('a.mfGoLeft').on('click', function() {
				mf.languageSwitcher.slide('left');
			},this,{stopEvent: true}); //navigate
			mf.languageSwitcher.comp.down('a.mfGoRight').on('click', function() {
				mf.languageSwitcher.slide('right');
			},this,{stopEvent: true}); //close
			mf.languageSwitcher.comp.select('li a').on('click', function() {
				mf.languageSwitcher.expand();
			},this,{stopEvent: true});
			mf.languageSwitcher.setMouseMoveListener();
		}
	},
	
	/**
	 * set mouse move event listener for list links
	 * @param none
	 */
	setMouseMoveListener: function() {
		mf.languageSwitcher.comp.select('li a').on({
			'mouseover': function(e, t) {
				var targetObj = Ext.get(t);
				var img = targetObj;
				if (targetObj.dom.tagName != 'IMG') {
					img = targetObj.select('img', true).first();
				}
				if (img.dom.src.indexOf('active') == -1) {
					img.dom.src = img.dom.src.replace(/(flag_[a-zA-Z]{2})/g, "$1_active");
				}
			},
			'mouseout': function(e, t) {
				var targetObj = Ext.get(t);
				var img = targetObj;
				if (targetObj.dom.tagName != 'IMG') {
					img = targetObj.select('img', true).first();
				} else {
					targetObj = targetObj.findParent('a', 2, true);
				}
				if (!targetObj.hasClass('mfActive') && img.dom.src.indexOf('active') != -1) {
					img.dom.src = img.dom.src.replace(/(flag_[a-zA-Z]{2})_active/g, "$1");
				}
			}
		});
	},
	
	/**
	 * Creates the link elements to open the language list and navigate through it
	 * @param none
	 */
	createNavigation: function() {
		Ext.DomHelper.insertFirst(mf.languageSwitcher.comp, {
			tag: 'a', cls: 'mfGoLeft', href: '#'
		});
		Ext.DomHelper.append(mf.languageSwitcher.comp, [
			{tag: 'a', cls: 'mfGoRight', href: '#'},
			{tag: 'a', cls: 'mfGoDown', href: '#'}
		]);
	},
	
	/**
	 * expand the switcher with an animation and change the css styles
	 * @param none
	 */
	expand: function() {
		var links = mf.languageSwitcher.comp.select('li a');
		links.removeAllListeners();
		links.on('click', mf.languageSwitcher.close);

		var count = mf.languageSwitcher.comp.select('li', true).getCount();

		// hide mfToolbarNav
		mf.languageSwitcher.hideToolbarNav();
		
		if (count <= 6) {
			var width = (Ext.isIE6 || Ext.isIE7) ? count * 52 + 17 : count * 52 + 9;
			mf.languageSwitcher.setListWidth(width, function() {
				var downLink = mf.languageSwitcher.comp.down('a.mfGoDown');
				downLink.removeAllListeners();
				downLink.on('click', mf.languageSwitcher.close);
			});
		} else {
			mf.languageSwitcher.setListWidth(325, function() {
				mf.languageSwitcher.comp.down('a.mfGoDown').setStyle('display', 'none');
				mf.languageSwitcher.comp.down('a.mfGoLeft').setStyle('display', 'block');
				mf.languageSwitcher.comp.down('a.mfGoRight').setStyle('display', 'block');
			});
		}
	},
	
	/**
	 * close the switcher
	 * @param none
	 */
	close: function() {
		mf.languageSwitcher.comp.down('a.mfGoLeft').setStyle('display', 'none');

		var links = mf.languageSwitcher.comp.select('li a');
		links.removeAllListeners();
		links.on('click', mf.languageSwitcher.expand);

		var downLink = mf.languageSwitcher.comp.down('a.mfGoDown');
		downLink.removeAllListeners();
		downLink.on('click', mf.languageSwitcher.expand);

		mf.languageSwitcher.setListWidth(59, function() {
			mf.languageSwitcher.comp.down('a.mfGoRight').setStyle('display', 'none');
			mf.languageSwitcher.comp.down('a.mfGoDown').setStyle('display', 'block');
			// show mfToolbarNav
			mf.languageSwitcher.showToolbarNav();
			
		});
	},
	
	/**
	 * sets the width of the list with the languages
	 * @param width {Int} the targeted width of the list
	 * @param func {Function} the function to execute as callback after the animation has finished
	 */
	setListWidth: function(width, func) {
		var ul = mf.languageSwitcher.comp.down('ul.mfHNav');
		var cookieValue =  parseInt(mf.cookie.readCookie('mf-font-size')) || 10;
		width = parseInt(width * cookieValue / 10);

		ul.setWidth(width, {
			animate: true,
			duration: (Ext.isIE6 || Ext.isIE7) ? 1.2 : .7,
			easing: 'easeOut',
			callback: function() {
				func();
				mf.languageSwitcher.setMouseMoveListener();
				//set px in em -> ie6 browser scale
				ul.setStyle('width',(width/cookieValue) + 'em');
			}
		});
	},
	
	/**
	 * slides the countrys left or right
	 * @param direction {String} left or right slide direction
	 */
	slide: function(direction) {
		var list = mf.languageSwitcher.comp.select('li', true);
		if (direction == 'left') {
			list.last().insertBefore(list.first().dom);
		} else {
			list.first().insertAfter(list.last().dom);
		}
	},
	
	/**
	 * show the toolbar navigation
	 * @param none
	 */
	showToolbarNav: function() {
		if (Ext.get('mfToolbarNav')) {
			Ext.get('mfToolbarNav').setStyle('display', 'block');
		}
	},

	/**
	 * hide the toolbar navigation
	 * @param none
	 */
	hideToolbarNav: function() {
		if (Ext.get('mfToolbarNav')) {
			Ext.get('mfToolbarNav').setStyle('display', 'none');
		}
	}
};

/**
 * component: home page no flash
 * @description: loads different content
 */
// init component
Ext.onReady(function() {
	mf.homeNoFlash.init();
});

mf.homeNoFlash = {
	/**
	 * initialize function
	 * @param none
	 */
	init: function() {
		if (mf.homeNoFlash.comp = mf.components.getComp('mfContentMain', 'mfHomeNoFlash')) {
			// disable this script if flash is available
			if(mf.homeNoFlash.comp.first().getHeight() < 10) {
				return false;
			}
			Ext.get('mfContentMain').select('.mfThemeWrapper .mfTheme').removeClass('mfDn'); // show pager if js is not available
			mf.homeNoFlash.comp.select('.mflogo').addClass('mfHd').first().removeClass('mfHd'); // hide fairs - show first
			mf.homeNoFlash.mouseover(); //set mouse listener
			mf.homeNoFlash.autoload(); //activate auto load theme
			mf.homeNoFlash.setwidth(); //set dynamic theme choosers width
			mf.homeNoFlash.change(Ext.get('mfContentMain').select('.mfThemeWrapper .mfTheme a:first').first()); //first ajax request
		}
	},
	
	/**
	 * set mouseover listener
	 */
	mouseover: function() {
		var selection = Ext.get('mfContentMain').select('.mfThemeWrapper .mfTheme a').on('mouseover',function(e,t) {
			e.preventDefault();
			var current = Ext.get(t);
			selection.removeClass('mfActive');
			mf.homeNoFlash.change(current);
		});
	},
	
	/**
	 * change theme
	 * @param current link - object
	 */
	change: function(current) {
		if(!current) {
			var current = Ext.get('mfContentMain').select('.mfThemeWrapper .mfTheme a.mfActive').first();
			current.removeClass('mfActive');
			var sel = Ext.get('mfContentMain').select('.mfThemeWrapper .mfTheme a');
			if(sel.item(sel.indexOf(current) + 1) != null) {
				current = sel.item(sel.indexOf(current) + 1);
			} else {
				current = Ext.get('mfContentMain').select('.mfThemeWrapper .mfTheme a:first').first();
			}
			
		}
		var loading = null;
		if(mfConfig.homeNoFlash.loading) { //loading indicator - optional
			loading = Ext.get('mfContentMain').select('p.mfLoadingIndicator').removeClass('mfDn');
		}
		var imgContainer = Ext.get('mfContentMain').select('.mfImage');
		imgContainer.setOpacity(0);//hide img 
		var start_time = mf.homeNoFlash.timer();//starts mesure request time
		
		Ext.Ajax.request({
			disableCaching: false,
			url: mfConfig.homeNoFlash.theme[current.dom.firstChild.data],
			success: function(response) {
				current.addClass('mfActive');// set active
				imgContainer.first('div').dom.innerHTML = response.responseText; //set img
				imgContainer.setOpacity(1,{duration: .6});//show img animated
				if(loading) loading.addClass('mfDn'); //hide loading indicator
				var stop_time = mf.homeNoFlash.timer();//stops mesure request time
				if(stop_time - start_time > 500) { //clear autoload
					window.clearInterval(mf.homeNoFlash.interval);
				};
			},
			failure: function() {}
		});
		var logo = Ext.get('mfContentMain').select('div.mfLogo') //switch logo/date/links
		logo.addClass('mfHd');
		logo.item(current.dom.firstChild.data - 1).removeClass('mfHd');
	},
	
	/**
	 * get timestamp
	 */
	timer: function() {
		var time = new Date();
			return time.getTime();
	},
	
	/**
	 * starts the theme autoload
	 */
	autoload: function() {
		window.clearInterval(mf.homeNoFlash.interval);
		mf.homeNoFlash.interval = window.setInterval('mf.homeNoFlash.change()', 5000);
	},
	
	/**
	 * set the width from themechooser
	 */
	setwidth: function() {
		var element = Ext.get('mfContentMain').select('.mfThemeWrapper .mfTheme').first();
		var paragraph = element.child('p');
		var links = element.child('div');
		paragraph.setWidth(element.getWidth() - links.getWidth());
		if(Ext.isIE6) {
			paragraph.setWidth(paragraph.getWidth() + 8);
		}
		if (Ext.isIE7) {
			paragraph.setWidth(paragraph.getWidth());
		}
		links.child('a').setStyle('margin-left','0');
	}
}

  		
			/**
 * component: none
 * @description: generic window functions
 */

Ext.onReady(function() {
	mf.window.init();
});

mf.window = {
	
	init: function() {
		this.checkAnchor();
		this.setScrollToListener();
	},
	
	/**
	 * gets a given parameter from the URL of the browser window
	 * @param parameterName {String} parameter to search for
	 * @return {String} extracted value for the URL parameter
	 */
	getParameterFromURL: function(parameterName) {
		var regex = new RegExp("[\\?&]" + parameterName + "=([^&#]*)");
		var results = regex.exec(window.location.href);
		
		if (results == null) {
			return "";
		} else {
			return results[1];
		}
	},
	
	/**
	 * check url for anchor hashes and jump to this anchor if found some
	 */
	checkAnchor: function() {
		mf.window.scrollTo(window.location.href.split('#')[1]);
	},
	
	/**
	 * set onclick listener for scrolling to anchor
	 */
	setScrollToListener: function() {
		//scann links for hashes
		Ext.get('mfContentMain').select('a').each(function(el) {
			var href = Ext.get(el).dom.href;
			if (href && href.indexOf('#') != -1) {
				el.on('click', function(e,t) {				
					mf.window.scrollTo(href.split('#')[1],t.href);
				},this,{stopEvent: true});
			}				
		});
	},
	
	/**
	 * scroll to 
	 */
	scrollTo: function(name,target) {
		if(!name || name == "") return;
				
		//offset fixed header
		var offset = (Ext.isIE) ? 65 : 70;
		var wrapper;
		if(wrapper = mf.components.getComp('mfWrapper')) {
			//offeset fixed banner advertising
			if(wrapper.hasClass('mfSuperbanner') || wrapper.hasClass('mfHockeystick')) {
				offset += 90;
			}
		}
		//get anchor target and scroll
		var anchor = Ext.get(Ext.query("*[name=" + name + "]")).first();
		if(anchor && anchor.hasClass('mfRTEAnchor')) {
			window.scrollTo(0,(anchor.getY() - offset));	
			if(Ext.isIE6) {
				Ext.get('mfContentWrapper').scroll('b',(anchor.getY() - offset));
			}
		} else {
			//no anchor on this page - follow href
			if(target) window.location.href = target;
		}
	}
}
/**
 * component: myaccount system messages
 * @description: international error, success and process messages
 */

mf.myAccountMessages = {
	
	/**
	 * get the text to a given message code
	 * @param code {String} errorcode
	 * @return {String} text
	 */
	getMessage: function(code) {
		var text = eval('this.' + code);

		if (typeof(text) == 'object') {
			text = eval('this.' + text.mapping);
		}

		return text;
	},

	/**
	 * error messages (LDAP)
	 */
	m1  : {mapping: 'g1'},
	m2  : {mapping: 'g1'},
	m3  : {mapping: 'g1'},
	m4  : "Your session has expired. Please log in again.",
	m10 : {mapping: 'g1'},
	m11 : {mapping: 'g1'},
	m12 : {mapping: 'g1'},
	m13 : {mapping: 'g1'},
	m14 : {mapping: 'g1'},
	m20 : "There is an error in your MyAccount data. Please contact the hotline.",
	m21 : {mapping: 'g1'},
	m30 : "Your account is blocked at present. Please contact the hotline and let your MyAccount be reactivated. Helpline: +49 69 7575 5000",
	m50 : "The information given is incomplete. Please check that you have completed all mandatory fields.",
	m51 : "Your information is not completely correct. Please check that you have fulfilled all requirements concerning the format of the information.",
	m100: "The e-mail address has already been allocated to an account and can, therefore, not be used.",
	m200: "You are already logged in.",
	m201: "Your account has not been activated. Please click on the activation link in the e-mail.",
	m202: "The combination of user name and password is incorrect.",
	m203: {mapping: 'g1'},
	m300: "Your account has already been activated.",
	m400: "The old and the new information is identical. Changes are therefore not necessary.",
	m401: "The old password is incorrect. Changes can only be made with the correct old password.",

	/** 
	 * error messages (generic)
	 */
	g1: "<strong>Connection error:</strong> MyAccount is currently out of service. Your action could not be completed. Please try again later. Thank you very much!",

	/** 
	 * login
	 */
	login: {
		process: {
			msg1: "Loading MyAccount...",
			msg2: "Your login details are being checked. Please wait..."
		},
		success: {
			msg: "You are logged in."
		},
		error: {
			headline: "Login unsuccessful"
		}
	},
	
	/** 
	 * logout
	 */
	logout: {
		process: {
			msg: "You are being logged out. Please wait..."
		},
		error: {
			headline: "Logging out unsuccessful"
		}
	},
	
	/**
	 * register
	 */
	register: {
		success: {
			headline: "Registration successful",
			msg: "You have registered successfully. We will now send you an e-mail with a link. Please click on this link to activate your account."
		},
		error: {
			headline: "Registration unsuccessful",
			msg: "Please note: You have to accept our privacy policy to register."
		}
	},

	/**
	 * delete account
	 */
	deleteAccount: {
		success: {
			headline: "Account deleted",
			msg: "Your account has been deleted. Thank you for using the MyAccount service."
		},
		error: {
			headline: "Account not deleted"
		}
	},

	/**
	 * activate account
	 */
	activate: {
		success: {
			headline: "Account activated",
			msg: "You can now log in via www.messefrankfurt.com at any time."
		},
		error: {
			headline: "Account not activated"
		}
	},

	/**
	 * lost password
	 */
	lostPassword: {
		success: {
			headline: "Password sent",
			msg: "Your new password will be sent to you by e-mail, if you are registered to the MyAccount service. Please change this password next time you log-in to MyAccount."
		},
		error: {
			headline: "Password not sent"
		}
	},
	
	/**
	 * profile data
	 */
	profileData: {
		success: {
			msg: "Your changes have been made successfully."
		},
		error: {
			headline1: "Personal details not loaded",
			headline2: "Personal details not changed"
		}
	},
	
	/**
	 * user data
	 */
	userData: {
		success: {
			headline: "Change user name",
			msg1: "Your changes have been made successfully. You must now reactivate your MyAccount. To this end, we have sent you an e-mail with an activation link.",
			msg2: "Your changes have been made successfully."
		},
		error: {
			headline1: "User details not loaded",
			headline2: "User details unchanged"
		}
	},
	
	/**
	 * add bookmarks
	 */
	addBookmarks: {
		process: {
			msg: "Exhibitor to be added..."
		},
		success: {
			msg1: "The exhibitor has been added to your list of favourites.",
			msg2: "Total number: ",
			msg3: "The exhibitor is already on your list of favourites."
		},
		error: {
			headline: "Favourites not added",
			msg1: "The exhibitor does not belong to any fairs and cannot be added to the list of favourites.",
			msg2: "Error in adding the favourite"
		}
	},

	/**
	 * get bookmarks
	 */
	getBookmarks: {
		error: {
			headline: "Favourites not loaded"
		}
	},

	/**
	 * delete bookmarks
	 */
	deleteBookmarks: {
		success: {
			msg: "The favourites selected have been deleted."
		},
		error: {
			headline: "Favourites not deleted",
			msg: "Firstly, please select an exhibitor from your list."
		}
	},

	/**
	 * send bookmarks
	 */
	sendBookmarks: {
		success: {
			msg: "The favourites selected have been sent by e-mail."
		},
		error: {
			headline: "Favourites not sent",
			msg: "Firstly, please select an exhibitor from your list."
		}
	},

	/**
	 * print bookmarks
	 */
	printBookmarks: {
		error: {
			msg: "Firstly, please select an exhibitor from your list."
		}
	}
};
/**
 * component: myAccount
 * @description: provides generic functions for storing data, login/logout and message handling
 */

// init component
Ext.onReady(function() {
	mf.myAccount.init();
});


mf.myAccount = {
	
	/**
	 * object to store localized strings
	 */
	lang: {
		options: {
			first: "Please choose..."
		}
	},

	/**
	 * initialize function
	 * @param none
	 */
	init: function() {
		//mf.myAccount.simulateMyAccount = true; //simulate the myaccount backend for prototype development ?
		mf.myAccount.checkUserActivation();
	},

	/**
	 * checks if the URL contains an account activation code
	 * @param none
	 */
	checkUserActivation: function() {
		mf.myAccount.activationCode = mf.window.getParameterFromURL('activateUser');

		if (mf.myAccount.activationCode && mf.myAccount.activationCode != '') {
			mf.shadowbox.autoStart('mfMyAccountActivate', mf.myAccount.replaceProtocol(mf.myAccount.setLayerPath('activate')));
		}
	},

	/**
	 * check if protocol is https
	 * @param none
	 * @return {Boolean} state of protocol
	 */
	checkProtocol: function() {
		if (mf.myAccount.simulateMyAccount) {
			if (mf.cookie.readCookie('simulate_https')) return true;
		}
		return window.location.protocol == 'https:' ? true : false;
	},

	/**
	 * switch protocol
	 * @param protocolType {String} type of protocol (e.g. https)
	 */
	switchProtocol: function(protocolType) {
		if (mf.myAccount.simulateMyAccount) {
			(protocolType == 'https') ? mf.cookie.createCookie('simulate_https',true) : mf.cookie.eraseCookie('simulate_https');
			alert('set protocol to: ' + protocolType);
			window.location.reload();
		}
		else {
			window.location.href = protocolType == 'https' ? protocolType + window.location.href.substring(4) : protocolType + window.location.href.substring(5);
		}
	},

	/**
	 * check if protocol is http and replace it
	 * @param url {String} url to check
	 * @return {String} url
	 */
	replaceProtocol: function(url) {
		if (url.indexOf('http://') != -1) {
			url = 'https' + url.substring(4);
		}
		if (mf.myAccount.simulateMyAccount) {
			url = 'http' + url.substring(5);
			mf.cookie.createCookie('mf-simulate-https',true); //set flag
		}
		return url;
	},

	/**
	 * prepare data store
	 * @param urlParam {String} parameter to append to my account url
	 * @param newRecordStructure {Object} object which enhances the record with a specific structure
	 * @return {Ext.data.Store} object to store the response of the AJAX calls
	 */
	prepareStore: function(urlParam, newRecordStructure) {
		
		var recordStructure = [
		{
			name: 'operation'
		},

		{
			name: 'errorcode'
		},

		{
			name: 'errordetails'
		}
		];

		if (newRecordStructure) {
			for (var i=0; i<newRecordStructure.length; i++) {
				recordStructure.push(newRecordStructure[i]);
			}
		}
		
	  return new Ext.data.Store({
				proxy: new Ext.data.HttpProxy({
					autoAbort: true,
					disableCaching: false,
					//              timeout: 15000,
					url: mfConfig.myAccount.url + urlParam
				}),
				reader: new Ext.data.XmlReader({
					record: 'result'
				}, Ext.data.Record.create(recordStructure))
		});
		
	},

	/**
	 * get the property to the currently selected id
	 * @param collection {Object} array which contains objects
	 * @param selectedId {String} id to match against
	 * @param property {String} property to retrieve
	 * @return {String} content of matching node or null
	 */
	getPropertyFromRecord: function (collection, selectedId, property) {
		var prop = null;
		for (var i=0; i<collection.length; i++) {
			if (collection[i].id == selectedId) {
				prop = eval('collection[i].' + property);
				break;
			}
		}
		
		return prop;
	},

	/**
	 * check login against ldap
	 * @param none
	 */
	login: function(){
		
		if(mf.myAccount.simulateMyAccount){
			
			if(mf.myAccountFooter.loginName.dom.value == 'mme' || mf.myAccountFooter.loginPwd.dom.value == 'mme') {
				mf.myAccountFooter.showLoggedInStatus();
				mf.myAccount.setCookie('true', mf.myAccount.cookieSettings.login.duration);					
				mf.myAccountLayer.openLayer();
			}
			else {
				mf.myAccount.showMessage('login.error.headline', 'Melde dich an mit dem Benutzername: mme und dem Passwort: mme um einen validen Login zu simulieren', false);
				mf.myAccountFooter.showLoggedOutStatus();
			}
			return true;
		}
		
		mf.myAccountFooter.showIndicator('login.process.msg2');

		var store = mf.myAccount.prepareStore('loginUser');
		store.load({
			params: {
				username: mf.myAccountFooter.loginName.dom.value,
				password: mf.myAccountFooter.loginPwd.dom.value,
				frontendLanguage: mfConfig.pageLanguage.lang
			},
			callback: function() {
				try {
					var result = store.getAt(0); //get data
					// any data received?
					if(result) {
						// login successful?
						if(result.data.operation == 'successful' || result.data.errorcode == '200') {
							mf.myAccountFooter.showLoggedInStatus();
							mf.myAccount.setCookie('true', mf.myAccount.cookieSettings.login.duration);					
							mf.myAccountLayer.openLayer();
						} else {
							mf.myAccount.showMessage('login.error.headline', 'm'+result.data.errorcode, true);
							mf.myAccountFooter.showLoggedOutStatus();
						}
					} else {
						mf.myAccount.showMessage('login.error.headline', 'g1', true);
						mf.myAccountFooter.showLoggedOutStatus();
					}
				} catch(e) {}
			}
		});
	},
	
	/**
	 * check login status with client side cookie or ldap
	 * @param func {Function} function to be executed, when login status is defined
	 * @param funcParams {Object} object which contains parameters for the function
	 */
	getLoginStatus: function(func, funcParams){
		var loginStatus = 'undefined';
		var store;

		var getLogin = function() {
			var loginCookie = mf.myAccount.getCookie();
			if (loginCookie) {
				if (loginCookie == 'true') { // get login cookie
					loginStatus = true;
				} else {
					loginStatus = false;
				}
			} else { // check LDAP
				if (!store) {
					store = mf.myAccount.prepareStore('loginUser');
					store.load({
						params: {
							username: ''
						},
						callback: function() {
							try {
								var result = store.getAt(0);
								if (result) {
									// login already done?
									if (result.data.errorcode == '200') {
										mf.myAccount.setCookie('true', mf.myAccount.cookieSettings.login.duration);
										loginStatus = true;
									} else {
										mf.myAccount.setCookie('false', 0);
										loginStatus = false;
									}
								} else {
									mf.myAccount.setCookie('false', 0);
									loginStatus = false;
								}
							} catch(e) {}
						}
					});
				}
			}
		};

		var loginInterval = window.setInterval(function() {
			getLogin();
			if (loginStatus != 'undefined') {
				window.clearInterval(loginInterval);
				store = null;
				if (!mf.myAccount.checkProtocol() && loginStatus == true) {
					mf.myAccount.switchProtocol('https');
				} else {
					funcParams ? eval(func)(loginStatus, funcParams) : eval(func)(loginStatus);
				}
			}
		}, 1000);
	},

	/**
	 * logout the user
	 * @param none
	 */
	logout: function(){
		mf.myAccountFooter.showIndicator('logout.process.msg');

		if(mf.myAccount.simulateMyAccount){
			mf.myAccount.setCookie('false', 0);
			mf.cookie.eraseCookie(mf.myAccount.cookieSettings.loginswitch.name);
			mf.myAccount.switchProtocol('http');
		}
		
		var store = mf.myAccount.prepareStore('logoutUser');
		store.load({
			params: '',
			callback: function() {
				try {
					var result = store.getAt(0);
					if(result) {
						if (result.data.operation == 'successful'){
							mf.myAccount.setCookie('false', 0);
							mf.cookie.eraseCookie(mf.myAccount.cookieSettings.loginswitch.name);
							mf.myAccount.switchProtocol('http');
						} else {
							mf.myAccount.showMessage('logout.error.headline', 'm'+result.data.errorcode, true);
							mf.myAccountFooter.showLoggedInStatus();
						}
					} else {
						mf.myAccount.showMessage('logout.error.headline', 'g1', true);
						mf.myAccountFooter.showLoggedInStatus();
					}
				} catch(e) {}
			}
		});
	},
	
	/**
	 * settings for login and switch cookie
	 */
	cookieSettings: {
		login: {
			name: 'mf-login',
			duration: 0.01389 // approx. 20 min.
		},
		loginswitch: {
			name: 'mf-login-switch',
			duration: 0
		}
	},

	/**
	 * saves valid login state in a cookie
	 * @param state {Boolean} login state (true/false)
	 * @param duration {Int} duration of cookie in days
	 */
	setCookie: function(state, duration) {
		mf.cookie.createCookie(mf.myAccount.cookieSettings.login.name, state, duration);
	},
	
	/**
	 * delete the login cookie
	 * @param none 
	 */
	delCookie: function() {
		mf.cookie.eraseCookie(mf.myAccount.cookieSettings.login.name);
	},

	/**
	 * read the login cookie
	 * @param none
	 * @return {String} value of cookie
	 */
	getCookie: function() {
		return mf.cookie.readCookie(mf.myAccount.cookieSettings.login.name);
	},
	
	/**
	 * replace the placeholder in the layer path with the corresponding layer component
	 * @param comp {String} name of layer component
	 * @return completed path to layer component
	 */
	setLayerPath: function(comp) {
		return mfConfig.myAccount.layerPath.replace(/%1/, comp);
	},

	/**
	 * object to store message fragments for generated messages in shadowbox layer
	 */
	message: {
		getHeadline: function(){
			return this.headline;
		},
		setHeadline: function(code) {
			this.headline = {
				tag: 'h1',
				html: mf.myAccountMessages.getMessage(code)
			}
		},
		getMessage: function(){
			return this.message;
		},
		setMessage: function(msg, useCode) {
			if (useCode) {
				this.message = this.getErrorTag(msg);
			} else {
				this.message = msg;
			}
		},
		getErrorTag: function(code) {
			return {
				tag: 'p',
				cls: 'mfError',
				html: mf.myAccountMessages.getMessage(code)
			};
		},
		getSuccessTag: function(code) {
			return {
				tag: 'p',
				cls: 'mfSuccess',
				children: {
					tag: 'strong',
					html: mf.myAccountMessages.getMessage(code)
				}
			};
		}
	},

	/**
	 * show a message in a shadowbox layer
	 * @param headline {String} headline error code
	 * @param msg {String} message error code or HTML fragment
	 * @param useCode {Boolean} indicator if msg should be evaluated against mf.myAccountMessages
	 */
	showMessage: function(headline, msg, useCode) {
		mf.myAccount.message.setHeadline(headline);
		mf.myAccount.message.setMessage(msg, useCode);

		Shadowbox.open({
			content: mf.myAccount.setLayerPath('message'),
			height: '150',
			width: '426',
			player: 'iframe'
		}, mf.shadowbox.options);
	},

	/**
	 * inserts text into the page to change the headline
	 * @param container {Ext.Element} Element to insert text into
	 * @param code {String} errorcode
	 */
	setHeadline: function(container, code) {
		container.dom.innerHTML = mf.myAccountMessages.getMessage(code);
	},

	/**
	 * inserts an HTML fragment into the page to display error or success messages
	 * @param msgType {String} type of message: error(e), success(s)
	 * @param container {Ext.Element} Element to insert HTML into
	 * @param code {String} errorcode
	 */
	addMessage: function(msgType, container, code) {
		mf.myAccount.removeMessages(container);

		var tag = msgType == 'e' ? mf.myAccount.message.getErrorTag(code) : mf.myAccount.message.getSuccessTag(code);
		Ext.DomHelper.insertFirst(container, tag);
	},

	/**
	 * removes all HTML fragments which displays error or success messages
	 * @param container {Ext.Element} Element to search into
	 */
	removeMessages: function(container) {
		container.select('.mfError').remove();
		container.select('.mfSuccess').remove();
	},

	/**
	 * inserts an HTML fragment into the page to display a processing status
	 * @param container {Ext.Element} Element to insert HTML into
	 */
	addProcessIndicator: function(container) {
		mf.myAccount.removeProcessIndicator(container);

		Ext.DomHelper.insertFirst(container, {
			tag: 'div',
			cls: 'mfProcessIndicator'
		}, true).setOpacity(.8);
		
		if (Ext.isIE6) {
			container.select('.mfProcessIndicator').first().setStyle('height', container.getHeight());
		}
	},

	/**
	 * removes the process status element
	 * @param container {Ext.Element} Element to remove the HTML from
	 */
	removeProcessIndicator: function(container) {
		if (container.select('.mfProcessIndicator').getCount() > 0) {
			container.select('.mfProcessIndicator').remove();
		}
	},

	/**
	 * show select fields
	 * @param container {Ext.Element} Element to apply style to
	 */
	showSelects: function(container) {
		if (Ext.isIE6) {
			container.select('select').setStyle('visibility', 'visible');
		}
	},

	/**
	 * hide select fields
	 * @param container {Ext.Element} Element to apply style to
	 */
	hideSelects: function(container) {
		if (Ext.isIE6) {
			container.select('select').setStyle('visibility', 'hidden');
		}
	},

	/**
	 * closes the layer, when the connection to the LDAP interrupts
	 * @param none
	 */
	forceLayerClose: function() {
		mf.myAccountLayer.closeLayer(true);
		mf.myAccount.setCookie('false', 0);
		mf.myAccountFooter.showLoggedOutStatus();
	},

	/**
	 * add option elements to dom
	 * @param container {Ext.Element} container to put options into
	 * @param resultSet {Array} array with options content
	 * @param matchingValue {String} value to determine which option is selected
	 * @param newDefaultOption {Object} specialised default option
	 */
	addOptions: function(container, resultSet, matchingValue, newDefaultOption) {
		var options = [];
		var option;
		// create default option
		var defaultOption = {
			tag: 'option',
			value: '',
			html: mf.myAccount.lang.options.first
		};

		// add default option
		newDefaultOption ? options.push(mf.array.mergeObjects(defaultOption, newDefaultOption)) : options.push(defaultOption);
	
		// create options
		var selected = false;
		for (var i=0; i<resultSet.length; i++) {
			option = {
				tag: 'option',
				value: resultSet[i].id,
				html: resultSet[i].name
			};
			
			if (!selected && resultSet[i].id == matchingValue) {
				option.selected = true;
				selected = true;
			}

			options.push(option);
		}

		// select the first option , if none was selected before
		if (!selected) {
			options[0].selected = true;
		}

		// add options to dom
		if (Ext.isIE) {
			var containerInfos = {
				parent: container.up('p'),
				id: container.dom.id,
				name: container.dom.name,
				size: container.dom.size
			};
			container.remove();

			Ext.DomHelper.append(containerInfos.parent, {
				tag: 'select',
				id: containerInfos.id,
				name: containerInfos.name,
				size: containerInfos.size,
				children: options
			});
		} else {
			Ext.DomHelper.append(container, options);
		}
	}
};


/**
 * component: shadowbox
 * @description: Shadowbox configuration (skin, language, options)
 */

// set page language and map it to shadowbox language abbreviation
mfConfig.pageLanguage = {
	lang: 'en',
	shadowboxLang: 'en'
};

switch(mfConfig.pageLanguage.lang) {
	case 'de':
		mfConfig.pageLanguage.shadowboxLang = 'de-DE';
		break;
	case 'pt':
		mfConfig.pageLanguage.shadowboxLang = 'pt-PT';
		break;
	case 'zh':
		mfConfig.pageLanguage.shadowboxLang = 'zh-CN';
		break;
	case 'hs':
		// temporary language switch
		mfConfig.pageLanguage.shadowboxLang = 'de-DE';
		break;
}

// load skin and language file
Shadowbox.loadSkin('skin', '/js/libs/Shadowbox_2.0/_mf');
Shadowbox.loadLanguage(mfConfig.pageLanguage.shadowboxLang, '/js/libs/Shadowbox_2.0/lang');


// init component
Ext.onReady(function() {
	mf.shadowbox.init();
});	


mf.shadowbox = {

	/**
	 * object to store localized strings
	 */
	lang: {
		redirect: {
			headline: "Please note",
			text: "You will now leave the current Messe Frankfurt website and will be transfered to the website with the previous layout."
		}
	},

	/**
	 * initialize function
	 * @param none
	 */
	init: function() {
		Shadowbox.init({
			skipSetup: true 
		});

		if (mf.shadowbox.comp = mf.components.getComp('mfContentArea')) {
			// setup shadowbox for images
			mf.shadowbox.setupSelection('.mfShadowbox', null, {
				height: '',
				onFinish: mf.shadowbox.addCloseListener,
				onClose: mf.shadowbox.removeCloseListener,
				player: 'img',
				width: ''
			});

			// setup shadowbox for images (ToDo: Temporary code - to be removed!)
			mf.shadowbox.setupSelection('.mfShadowboxResize', null, {
				height: 150,
				width: 300
			});

			// setup shadowbox for coverflow
			mf.shadowbox.setupSelection('.mfCoverFlow', null, {
				height: 520,
				width: 950
			});

			//setup shadowbox for experience
			mf.shadowbox.setupSelection('.mfExperience', null, mf.shadowbox.specificOptions.mfExperience = {
				height: 575,
				width: 968,
				viewportPadding: 0
			});

			//setup shadowbox for exhibition ground
			mf.shadowbox.setupSelection('.mfExhibitionground', null, {
				height: 484,
				width: 968
			});
			
			//setup shadowbox for fairground
			mf.shadowbox.setupSelection('.mfFairground', null, {
				height: 484,
				width: 968
			});

			//setup shadowbox for worldmap
			mf.shadowbox.setupSelection('.mfWorldMap', null, {
				height: 535,
				width: 948
			});

			//setup shadowbox for citymap
			mf.shadowbox.setupSelection('.mfCityMap');

			//setup shadowbox for routemap
			mf.shadowbox.setupSelection('.mfRouteMap');

			//setup shadowbox for webcam
			mf.shadowbox.setupSelection('.mfWebcamLink', null, {
				height: 576,
				width: 704
			});
			
			//setup shadowbox for downloads
			mf.shadowbox.setupSelection('.mfDownloadsLink', null, {
				width: 440
			});

			//setup shadowbox for send to a friend
			mf.shadowbox.setupSelection('.mfPageFunctionRecommend', 'mfPageFunctions', {
				width: 445
			});
			
			//setup shadowbox for send to a friend in share bar
			mf.shadowbox.setupSelection('.mfSendAFriend', null, {
				width: 445
			});

			//setup shadowbox for SPICE redirects
			mf.shadowbox.setRedirectMessage();
		}

		// check autoload cookie
		mf.shadowbox.autoStart();
	},

	/**
	 * shadowbox config
	 * Inner height by 1024x768px resolution
	 * - FF3: 627px (without tabs) => 565px (max. posssible for iframe)
	 *        598px (with tabs) => 536px
	 * - IE6: 624px => 562px
	 * - IE7: 616px => 554px
	 */
	options: {
		continuous: true,
		displayNav: false,
		fadeDuration: 0.2,
		handleOversize: 'resize',
		height: 500,
		initialHeight: 150,
		initialWidth: 200,
		overlayColor: '#fff',
		overlayOpacity: 0.7,
		player: 'iframe',
		resizeDuration: 0.35,
		width: 848
	},

	/**
	 * shadowbox config for specific links
	 */
	specificOptions: {},

	/**
	 * return the options for a specific object
	 * @param obj {String} obj to search for
	 * @return {Object} options for specific css class
	 */
	getSpecificOptions: function(obj) {
		return eval('mf.shadowbox.specificOptions.' + obj);
	},

	/**
	 * calls the setup function for the shadowbox for a given selection of links
	 * @param cssClass {String} css class of links to search for
	 * @param searchAreaId {String} ID of DOM Element to start the search
	 * @param setupOptions {Object} settings for the shadowbox for this selection
	 */
	setupSelection: function(cssClass, searchAreaId, setupOptions) {
		var selection = (searchAreaId && Ext.get(searchAreaId)) ? Ext.get(searchAreaId).query(cssClass) : mf.shadowbox.comp.query(cssClass);
		var options = setupOptions ? mf.array.mergeObjects(mf.shadowbox.options, setupOptions) : mf.shadowbox.options;

		if (selection.length > 0) {
			Shadowbox.setup(selection, options);
		}
	},

	/**
	 * adds an additional close listener to the shadowbox
	 * @param none
	 */
	addCloseListener: function() {
		var elem = Ext.get('shadowbox_body_inner');
		elem.insertHtml('afterBegin','<span id="shadowbox_img_layer_close"></span>')
		elem.on('click', function() {
			window.parent.Shadowbox.close();
		});
	},
	
	/**
	 * removes an additional close listener from the shadowbox
	 * @param none
	 */
	removeCloseListener: function() {
		Ext.get('shadowbox_body_inner').un('click', function() {
			window.parent.Shadowbox.close();
		});
	},

	/**
	 * resizes the shadowbox after loading an iframe
	 * @param width {Int} new width of iframe
	 * @param height {Int} new height of iframe
	 */
	resize: function(width, height) {
		var sbox = Ext.get('shadowbox');
		var sboxInnerOffset = sbox.getBorderWidth('lr') + sbox.getPadding('lr');
		var sboxOuterPadding = Shadowbox.getOptions().viewportPadding * 2;

		var bodySize = Ext.getBody().getSize();

		if (width) {
			var maxWidth = bodySize.width - sboxOuterPadding - sboxInnerOffset;
			width = width > maxWidth ? maxWidth : width;
			sbox.setWidth(width, true);
		}

		if (height) {
			var maxHeight = bodySize.height - sboxOuterPadding - sboxInnerOffset;
			height = height > maxHeight ? maxHeight : height;
			Ext.get('shadowbox_body').setHeight(height, true);
		} else {
			height = 0;
		}

		var top = (bodySize.height - height - sboxInnerOffset) / 2;
		sbox.setTop(top, true);
	},

	/**
	 * settings for the redirect message layer for SPICE links and the shadowbox autoload cookie
	 * @param none
	 */
	settings: {
		redirectMessage: {
			cookie: 'mf-spice-redirect',
			timeout: 5000
		},
		autoStart: {
			cookie: 'mf-layer-autostart',
			separator: '|',
			timeout: 1000
		}
	},

	/**
	 * setup a redirect message layer for SPICE links
	 * @param none
	 */
	setRedirectMessage: function() {
		Ext.get('mfWrapper').select('.mfRedirect').on('click', function(e, t) {
			var cookie = mf.cookie.readCookie(mf.shadowbox.settings.redirectMessage.cookie);
			var url = Ext.get(t);
			if (url.dom.tagName != 'A') {
				url = url.up('a');
			}
			url = url.dom.href;

			if (!cookie || cookie == 'undefined') {
				mf.cookie.createCookie(mf.shadowbox.settings.redirectMessage.cookie, true);
	
				window.setTimeout(function() {
					window.location.href = url;
				}, mf.shadowbox.settings.redirectMessage.timeout);
	
				Shadowbox.open({
					content: mf.shadowbox.getMessage(url),
					height: '150',
					player: 'html',
					width: '400'
				}, mf.shadowbox.options);
			} else {
				window.setTimeout(function() {
					window.location.href = url;
				}, 200);
			}
		},this,{stopEvent: true});
	},

	/**
	 * create a redirect message for SPICE links
	 * @param url {String} url of redirect target
	 */
	getMessage: function(url) {
		return Ext.DomHelper.markup({
			tag: 'div', cls: 'mfSpiceRedirect', children: [
				{tag: 'h1', html: mf.shadowbox.lang.redirect.headline},
				{tag: 'p', cls: 'mfMessage', html: mf.shadowbox.lang.redirect.text},
				{tag: 'p', children: [
					{tag: 'strong', html: url}
				]}
			]
		});
	},

	/**
	 * autoStart a layer component
	 * @param layerComp {String} class of layer component
	 * @param layerUrl {String} url for the iframe in the shadowbox
	 */
	autoStart: function(layerComp, layerUrl) {
		var settings = mf.shadowbox.settings.autoStart;
		var options;

		// get cookie if it is there and get its values
		var autoStartCookie = mf.cookie.readCookie(settings.cookie);

		// get options
		if (autoStartCookie && autoStartCookie != '') {
			var parts = autoStartCookie.split(settings.separator);
			options = mf.shadowbox.getSpecificOptions(parts[1]);
			options.content = parts[0];

			// clear cookie
			if (autoStartCookie) {
				mf.cookie.eraseCookie(settings.cookie);
			}
		} else if (layerComp) {
			options = mf.shadowbox.getSpecificOptions(layerComp);
			if (layerUrl && layerUrl != '') {
				options.content = layerUrl;
			}
		}

		if (!mf.shadowbox.autoStartTimer && options && options.content) {
			var mfMergedOptions = mf.array.mergeObjects(mf.shadowbox.options, options);
	
			mf.shadowbox.autoStartTimer = window.setInterval(function() {
				if (typeof(Shadowbox) != 'undefined') {
					window.clearInterval(mf.shadowbox.autoStartTimer);
	
					// open shadowbox
					Shadowbox.open(mfMergedOptions, mfMergedOptions);
				}
			}, settings.timeout);
		}
	}
};

/**
 * component: shadowbox
 * @description: Shadowbox myAccount addition
 */


mf.shadowbox = mf.array.mergeObjects(mf.shadowbox, {

	/**
	 * shadowbox config for specific links
	 */
	specificOptions: {
		mfMyAccountLostPwd: {
			height: 210,
			width: 428
		},
		mfMyAccountRegister: {
			height: 350,
			width: 428
		},
		mfMyAccountInfo: {
			height: 380,
			width: 428
		},
		mfMyAccountFormLogin: {
			height: 150,
			width: 428
		},
		mfMyAccountActivate: {
			height: 150,
			width: 428
		}
	},

	/**
	 * setup components related to myaccount on demand
	 * @param none
	 */
	setupMyAccountComponents: function() {
		if (mf.shadowbox.myaccountcomp = mf.components.getComp('mfMyAccountLogin')) {
			// setup shadowbox for myaccount - lost password
			mf.shadowbox.setupSelection('.mfMyAccountLostPwd', 'mfMyAccountLogin', mf.shadowbox.getSpecificOptions('mfMyAccountLostPwd'));
			
			// setup shadowbox for myaccount - register
			mf.shadowbox.setupSelection('.mfMyAccountRegister', 'mfMyAccountLogin', mf.shadowbox.getSpecificOptions('mfMyAccountRegister'));
			
			// setup shadowbox for myaccount - infos
			mf.shadowbox.setupSelection('.mfMyAccountInfo', 'mfMyAccountLogin', mf.shadowbox.getSpecificOptions('mfMyAccountInfo'));
		}
	}
});



/**
 * component: myAccount
 * @description: checks login state, modifies display of login fields and navigation
 */

// init component
Ext.onReady(function() {
	mf.myAccountFooter.init();
});


mf.myAccountFooter = {
	
	/**
	 * object to store localized strings
	 */
	lang: {
		form: {
			username: "User name",
			password: "Password",
			submit: "Log in",
			close: "Close"
		},
		navLoggedOut: {
			login: "Login",
			close: "Close",
			remember: "Forgotten your password?",
			register: "Register",
			info: "What is MyAccount?"
		},
		navLoggedIn: {
			logout: "Log out",
			show: "Show",
			hide: "Hide"
		}
	},

	/**
	 * initialize function
	 * @param none
	 */
	init: function() {
		if (mf.myAccountFooter.comp = mf.components.getComp('mfMyAccountLogin')) {
			mf.myAccountFooter.showIndicator('login.process.msg1');
			mf.myAccount.getLoginStatus('mf.myAccountFooter.toggleFooter');
		}
	},

	/**
	 * toggle the footer status depending on the login status
	 * @param loginStatus {Boolean} status of login
	 */
	toggleFooter: function(loginStatus) {
		if (loginStatus) {
			mf.myAccountFooter.showLoggedInStatus();
		} else {
			mf.myAccountFooter.showLoggedOutStatus();
		}
	},

	/**
	 * display myaccount footer with logged in status
	 */
	showLoggedInStatus: function() {
		mf.myAccountFooter.hideFooterParts();

		var ul = mf.myAccountFooter.comp.createChild({
			tag: 'ul',
			cls: 'mfHNav mfLoggedIn',
			children: [{
				tag: 'li',
				children: {
					tag: 'strong',
					html: mf.myAccountMessages.login.success.msg
				}
			}, {
				tag: 'li',
				children: {
					tag: 'a',
					href: '#',
					html: mf.myAccountFooter.lang.navLoggedIn.logout
				}
			}, {
				tag: 'li',
				children: {
					tag: 'a',
					href: '#',
					html: mf.myAccountFooter.lang.navLoggedIn.show
				}
			}]
		});

		mf.myAccountFooter.setLoggedInListener(ul);
		mf.myAccountFooter.comp.setWidth(490,true);
		mf.myAccountFooter.comp.select('#mfToolbarNav').setWidth(0).removeClass('mfHd').setWidth(375,true);
	},

	/**
	 * set listener for links, when the user is logged in
	 * @param ul {Ext.Element} unordered html list
	 */
	setLoggedInListener: function(ul) {
		// logout
		ul.select('li a').first().on('click',function(){
			mf.myAccountLayer.closeLayer(true);
			mf.myAccount.logout();
		},this,{
			stopEvent: true
		});

		// show/hide layer
		ul.select('li a').last().on('click',function(){
			mf.myAccountLayer.openLayer();
		},this,{
			stopEvent: true
		});

		// myAccount logo
		mf.myAccountFooter.comp.select('h2 a'). removeAllListeners();
	},

	/**
	 * display myaccount footer with logged out status
	 */
	showLoggedOutStatus: function() {
		mf.myAccountFooter.hideFooterParts();

	
		if (mf.cookie.readCookie(mf.myAccount.cookieSettings.loginswitch.name)) {
			mf.myAccountFooter.comp.select('#mfToolbarNav').addClass('mfHd');
			mf.cookie.eraseCookie(mf.myAccount.cookieSettings.loginswitch.name);
			// create login form
			mf.myAccountFooter.comp.createChild({
				tag: 'form',
				action: '',
				children: [{
					tag: 'input',
					id: 'mfMyAccountLoginName',
					type: 'text',
					cls: 'mfText',
					value: mf.myAccountFooter.lang.form.username
				}, {
					tag: 'input',
					id: 'mfMyAccountLoginPwdText',
					type: 'text',
					cls: 'mfText',
					value: mf.myAccountFooter.lang.form.password
				}, {
					tag: 'input',
					id: 'mfMyAccountLoginPwd',
					type: 'password',
					cls: 'mfText mfHd',
					value: ''
				}, {
					tag: 'input',
					id: 'mfMyAccountLoginSubmit',
					type: 'submit',
					title: mf.myAccountFooter.lang.form.submit,
					value: ''
				},{
					tag: 'a',
					href: mf.myAccount.setLayerPath('lostpwd'),
					cls: 'mfMyAccountLostPwd',
					html: mf.myAccountFooter.lang.navLoggedOut.remember
				}, {
					tag: 'a',
					href: '#',
					cls: 'mfMyAccountCloseLink',
					html: mf.myAccountFooter.lang.form.close
				}]
			});
			mf.myAccountFooter.comp.select('form input.mfText').setWidth(200,true);
			mf.myAccountFooter.comp.select('#mfMyAccountLogin').setStyle('width','85.5em');
			mf.myAccountFooter.loginName = Ext.get('mfMyAccountLoginName');
			mf.myAccountFooter.loginPwdText = Ext.get('mfMyAccountLoginPwdText');
			mf.myAccountFooter.loginPwd = Ext.get('mfMyAccountLoginPwd');
			mf.myAccountFooter.loginSubmit = Ext.get('mfMyAccountLoginSubmit');
			mf.myAccountFooter.close = mf.myAccountFooter.comp.select('.mfMyAccountCloseLink');
			mf.myAccountFooter.lostPwd = mf.myAccountFooter.comp.select('.mfMyAccountLostPwd');
			mf.myAccountFooter.setLoggedOutListener();//form listeners
		}
	  
		else {
			mf.myAccountFooter.comp.select('#mfToolbarNav').removeClass('mfHd');
			// login navigation (logged out state)
			mf.myAccountFooter.comp.createChild({
				tag: 'ul',
				cls: 'mfHNav',
				children: [{
					tag: 'li',
					children: {
						tag: 'a',
						href: '#',
						cls: 'mfMyAccountLogin',
						html: mf.myAccountFooter.lang.navLoggedOut.login
					}
				},
				{
					tag: 'li',
					children: {
						tag: 'a',
						href: mf.myAccount.setLayerPath('lostpwd'),
						cls: 'mfMyAccountLostPwd',
						html: mf.myAccountFooter.lang.navLoggedOut.remember
					}
				}, {
					tag: 'li',
					children: {
						tag: 'a',
						href: mf.myAccount.setLayerPath('register'),
						cls: 'mfMyAccountRegister',
						html: mf.myAccountFooter.lang.navLoggedOut.register
					}
				}, {
					tag: 'li',
					children: {
						tag: 'a',
						href: mf.myAccount.setLayerPath('info'),
						cls: 'mfMyAccountInfo',
						html: mf.myAccountFooter.lang.navLoggedOut.info
					}
				}]
			});
			mf.myAccountFooter.setLoggedOutLinkListener();
			mf.shadowbox.setupMyAccountComponents();
			//mf.myAccountFooter.comp.select('#mfMyAccountLogin').setWidth(490);
			
		}     
	},

	/**
         * set click listener to login link
         */
	setLoggedOutLinkListener: function(){
		
		//mf.shadowbox.setupMyAccountComponents();
		
		mf.myAccountFooter.comp.select('ul li a').on('click',function(e,t){
			var current = Ext.get(t);
			e.preventDefault();
			//login link
			if (current.hasClass('mfMyAccountLogin')) {
				mf.cookie.createCookie(mf.myAccount.cookieSettings.loginswitch.name, true);
				if (mf.myAccount.checkProtocol()) {
					//mf.cookie.eraseCookie(mf.myAccount.cookieSettings.loginswitch.name);
					mf.myAccountFooter.showLoggedOutStatus();
				}
				else {
					mf.myAccount.switchProtocol('https');
				}
			}
			else { //other links 
				var className = current.dom.className;
				var href = current.dom.href;
				
				if (mf.myAccount.checkProtocol()) {
					mf.shadowbox.setupSelection('.'+className, 'mfMyAccountLogin', mf.shadowbox.getSpecificOptions(className));
				}
				else {
					if (href != '') {
						mf.cookie.createCookie(mf.shadowbox.settings.autoStart.cookie, mf.myAccount.replaceProtocol(href) + mf.shadowbox.settings.autoStart.separator + className);
					}
					mf.myAccount.switchProtocol('https');
				}
			}
		});

	},

	/**
	 * set listener for form handling, when the user is logged out
	 * @param none
	 */
	setLoggedOutListener: function() {
		//close link
		mf.myAccountFooter.close.on('click',function(){
			mf.cookie.eraseCookie(mf.myAccount.cookieSettings.loginswitch.name);
			mf.myAccount.switchProtocol('http');
		});
		//forgot pwd link
		var className = mf.myAccountFooter.lostPwd.first().dom.className;
		mf.shadowbox.setupSelection('.'+className, 'mfMyAccountLogin', mf.shadowbox.getSpecificOptions(className));
		// username
		mf.myAccountFooter.loginName.on({
			'blur': {
				fn: function() {
					mf.myAccountFooter.checkLoginNameValue();
					mf.myAccountFooter.formHasFocus = false;
					mf.myAccountFooter.setCloseFormTimer();
				}
			},
			'focus': {
				fn: function() {
					mf.myAccountFooter.checkLoginNameValue();
					mf.myAccountFooter.formHasFocus = true;
					mf.myAccountFooter.clearCloseFormTimer();
					mf.myAccountFooter.focusForm();
				}
			},
			'click': {
				fn: function() {
					//mf.myAccountFooter.checkLoginNameValue();
				},
				stopEvent: true
			}
		});

		// password (text style)
		mf.myAccountFooter.loginPwdText.on({
			'focus': {
				fn: function() {
					mf.myAccountFooter.showPasswordField();
				}
			},
			'click': {
				fn: function() {
				// do nothing else than to stop the event
				},
				stopEvent: true
			}
		});

		// password
		mf.myAccountFooter.loginPwd.on({
			'blur': {
				fn: function() {
					mf.myAccountFooter.checkLoginPwdValue();
					mf.myAccountFooter.formHasFocus = false;
					//mf.myAccountFooter.setCloseFormTimer();
				}
			},
			'focus': {
				fn: function() {
					mf.myAccountFooter.formHasFocus = true;
					//mf.myAccountFooter.clearCloseFormTimer();
				}
			},
			'click': {
				fn: function() {
				// do nothing else than to stop the event
				},
				stopEvent: true
			}
		});

		// submit
		mf.myAccountFooter.loginSubmit.on('click', function() {
			mf.myAccountFooter.comp.setStyle('width','49em');
			mf.myAccount.login();
		},this,{
			stopEvent: true
		});
	},

	/**
	 * hide form, list and indicator
	 * @param none
	 */
	hideFooterParts: function() {
		// hide loading indicator
		mf.myAccountFooter.comp.select('.myAccountIndicator').remove();
		// hide overlay
		mf.myAccountFooter.hideLoginOverlay();
		// hide form and navigation
		mf.myAccountFooter.clearCloseFormTimer();
		mf.myAccountFooter.comp.select('form').remove();
		mf.myAccountFooter.comp.select('ul').remove();
	},

	/**
	 * show an indicator message
	 * @param code {String} message code to display in footer
	 */
	showIndicator: function(code) {
		mf.myAccountFooter.hideFooterParts();

		mf.myAccountFooter.comp.createChild({
			tag: 'p',
			cls: 'myAccountIndicator',
			html: mf.myAccountMessages.getMessage(code)
		});
	},

	/**
	 * create an overlay for the navigation
	 * @param none
	 */
	showLoginOverlay: function() {
		mf.myAccountFooter.comp.createChild({
			tag: 'div',
			cls: 'mfMyAccountLoginOverlay'
		}).setOpacity('.7');
	},

	/**
	 * remove the overlay for the navigation
	 * @param none
	 */
	hideLoginOverlay: function() {
		mf.myAccountFooter.comp.select('.mfMyAccountLoginOverlay').remove();
	},

	/**
	 * get the number of overlay instances for the navigation
	 * @param none
	 * @return {Integer} number of overlay instances (should be only 1)
	 */
	getLoginOverlayCount: function() {
		return mf.myAccountFooter.comp.select('.mfMyAccountLoginOverlay').getCount();
	},

	/**
	 * close the form after a certian period of time
	 * @param none
	 */
	setCloseFormTimer: function() {
		mf.myAccountFooter.clearCloseFormTimer();

		mf.myAccountFooter.formTimer = window.setTimeout(function() {
			if (mf.myAccountFooter.formHasFocus) {
				mf.myAccountFooter.clearCloseFormTimer();
			} else {
				mf.myAccountFooter.blurForm();
			}
		}, 5000);
	},

	/**
	 * close the form after a certian period of time
	 * @param none
	 */
	clearCloseFormTimer: function() {
		if (mf.myAccountFooter.formTimer) {
			window.clearTimeout(mf.myAccountFooter.formTimer);
		}
	},

	/**
	 * hide links and show password field
	 * @param none
	 */
	focusForm: function() {
		// animate form fields
		var anim = mf.myAccountFooter.animation;
		
		if (mf.myAccountFooter.loginName.getWidth() < anim.loginName.widthExpanded) {
			// hide navigation overlay if it is there
			mf.myAccountFooter.hideLoginOverlay();
			// add navigation overlay
			mf.myAccountFooter.showLoginOverlay();
			
			// which field should be visible?
			var loginField = mf.myAccountFooter.loginPwd.dom.value == '' ? mf.myAccountFooter.loginPwdText : mf.myAccountFooter.loginPwd;
			
			// make password field and link visible
			loginField.removeClass('mfHd');
			mf.myAccountFooter.comp.select('form a').removeClass('mfHd');
			
			mf.myAccountFooter.loginName.setWidth(anim.loginName.widthExpanded - anim.widthExpandedOffset, {
				animate: anim.animate,
				duration: anim.duration
			});
			
			loginField.setWidth(anim.loginPwd.widthExpanded - anim.widthExpandedOffset, {
				animate: anim.animate,
				duration: anim.duration
			});
			
			// add listener to footer component
			Ext.get('mfFooter').on('click', function(e) {
				mf.myAccountFooter.blurForm();
			}, this, {
				stopEvent: true
			});
		}
	},

	/**
	 * show links and hide password field
	 * @param none
	 */
	blurForm: function() {
		var anim = mf.myAccountFooter.animation;

		if (mf.myAccountFooter.getLoginOverlayCount() > 0) {
			window.clearTimeout(mf.myAccountFooter.formTimer);

			// hide password field and link
			mf.myAccountFooter.loginPwdText.addClass('mfHd');
			mf.myAccountFooter.loginPwd.addClass('mfHd');
			mf.myAccountFooter.comp.select('form a').addClass('mfHd');

			// animate form field
			mf.myAccountFooter.loginName.setWidth(anim.loginName.widthCollapsed, {
				animate: anim.animate,
				duration: anim.duration,
				callback: function(){		
					// hide overlay
					mf.myAccountFooter.hideLoginOverlay();
				} 
			});

			// remove listener from footer component
			Ext.get('mfFooter').removeAllListeners();
		}
	},
	
	/**
	 * check if value of username is the default value
	 * @param none
	 */
	checkLoginNameValue: function() {
		var value = mf.myAccountFooter.loginName.dom.value;
		
		if (value == mf.myAccountFooter.lang.form.username) {
			mf.myAccountFooter.loginName.dom.value = '';
		} else if (value == '') {
			mf.myAccountFooter.loginName.dom.value = mf.myAccountFooter.lang.form.username;
		}
	},
	
	/**
	 * check if value of password is the default value
	 * @param none
	 */
	checkLoginPwdValue: function() {
		if (mf.myAccountFooter.loginPwd.dom.value == '') {
			mf.myAccountFooter.hidePasswordField();
		}
	},
	
	/**
	 * show the "real" password field and hide the text variant
	 * @param none
	 */
	showPasswordField: function() {
		// get width of 'real' password field
		var width = mf.myAccountFooter.loginPwdText.getWidth() - mf.myAccountFooter.animation.widthExpandedOffset;
		// set width of 'text' password field
		mf.myAccountFooter.loginPwd.setWidth(width);
		// swap fields and focus real password field
		mf.myAccountFooter.loginPwdText.addClass('mfHd');
		mf.myAccountFooter.loginPwd.removeClass('mfHd');
		mf.myAccountFooter.loginPwd.focus();
	},

	/**
	 * hide the "real" password field and show the text variant
	 * @param none
	 */
	hidePasswordField: function() {
		// get width of 'real' password field
		var width = mf.myAccountFooter.loginPwd.getWidth() - mf.myAccountFooter.animation.widthExpandedOffset;
		// set width of 'text' password field
		mf.myAccountFooter.loginPwdText.setWidth(width);
		// swap fields
		mf.myAccountFooter.loginPwd.addClass('mfHd');
		mf.myAccountFooter.loginPwdText.removeClass('mfHd');
	},

	/**
	 * settings for the animation of the form fields
	 * @param none
	 */
	animation: {
		animate: true,
		duration: .5,
		widthExpandedOffset: Ext.isIE ? 4 : 0,
		loginName: {
			widthCollapsed: 88,
			widthExpanded: 154
		},
		loginPwd: {
			widthCollapsed: 88,
			widthExpanded: 114
		}
	},
	
	/**
	 * toogles the link to show/hide the myaccount layer
	 * @param closed {Boolean} true:false
	 */
	toggleLayer: function(closed) {
		var link = mf.myAccountFooter.comp.select('ul.mfLoggedIn li');
		
		if (link.getCount() != 0) {
			link = link.last().child('a');	
			link.removeAllListeners();
			if(closed) {
				link.dom.innerHTML = mf.myAccountFooter.lang.navLoggedIn.show;
				link.on('click', function(){
					mf.myAccountLayer.openLayer();
				},this,{
					stopEvent: true
				});
			} else {
				link.dom.innerHTML = mf.myAccountFooter.lang.navLoggedIn.hide;
				link.on('click', function(){
					mf.myAccountLayer.closeLayer();
				},this,{
					stopEvent: true
				});
			}
		}
	}
};
/**
 * component: my acount layer
 * @description: mask the page without footer / slide in a Layer from footer / load iframe
 */

// init component
Ext.onReady(function() {
	mf.myAccountLayer.init();
});


mf.myAccountLayer = {

	/**
	 * initialize function
	 * @param none
	 */
	init: function(){
		mf.myAccountLayer.isHomepage = Ext.getBody().hasClass('mfPageHome');

		mf.myAccountLayer.helper = {
			wrapper: Ext.get('mfWrapper'),
			footer: Ext.get('mfFooter')
		}
	},
	
	/**
	 * settings for the layer
	 */
	settings: {
		borderWidth: 2,
		maxHeight: 600
	},

	/**
	 * create a mask for the page
	 * @param none
	 */
	createMask: function() {
		// remove old mask
		var oldMask = Ext.get('mfMyAccountMask');
		if (oldMask) {
			oldMask.remove();
		}

		// create new mask
		mf.myAccountLayer.mask = mf.myAccountLayer.helper.wrapper.createChild({
			tag: 'div',
			id: 'mfMyAccountMask'
		});

		// get current dimensions
		var dimensions = mf.myAccountLayer.getMaskDimensions();

		// set dimensions
		mf.myAccountLayer.setMaskDimensions(dimensions);

		// set opacity
		mf.myAccountLayer.mask.setOpacity(0).setOpacity(.7,{duration:1});
		
		// add click listener
		mf.myAccountLayer.mask.on('click', function() {
			mf.myAccountLayer.closeLayer();
		}, this, {stopEvent: true});
		
		// change footer style
		mf.myAccountLayer.helper.footer.setStyle('z-index', '1005');
	},
	
	/**
	 * calculate dimensions of the myAccount mask
	 * @param none
	 * @return {Obj} array which contains dimensions of the mask
	 */
	getMaskDimensions: function() {
		var body = Ext.getBody();
		var offset = Ext.isIE6 ? 2 : 0;

		return {
			height: mf.myAccountLayer.isHomepage ? Ext.get('mfWrapperHomeOuter').getHeight() + 'px' : '100%',
			left: -parseInt(mf.myAccountLayer.helper.wrapper.getOffsetsTo(body)[0]) + offset,
			top: mf.myAccountLayer.isHomepage ? -parseInt(mf.myAccountLayer.helper.wrapper.getOffsetsTo(body)[1]) + offset : 0,
			width: body.getWidth()
		};
	},

	/**
	 * set dimensions of the myAccount mask
	 * @param dimensions {Obj} array which contains dimensions of the mask
	 */
	setMaskDimensions: function(dimensions) {
		mf.myAccountLayer.mask.setStyle({
			'height': dimensions.height,
			'left': dimensions.left + 'px',
			'top': dimensions.top + 'px',
			'width': dimensions.width + 'px'
		});
	},

	/**
	 * delete the mask
	 * @param: none
	 */
	deleteMask: function(){
		var mask = Ext.get('mfMyAccountMask');
		if (mask) {
			mask.setOpacity(0, {
				duration: .25,
				callback: mask.remove
			});
		}
	},
	
	/**
	 * creates a layer for myAccount components
	 * @param none
	 */
	createLayer: function(){
		// create wrapper for layer
		mf.myAccountLayer.layerWrapper = mf.myAccountLayer.helper.footer.createChild({
			tag: 'div',
			id: 'mfMyAccountLayerWrapper'
		});

		// get and set current wrapper dimensions
		var wrapperDimensions = mf.myAccountLayer.getLayerWrapperDimensions();
		mf.myAccountLayer.setLayerWrapperDimensions(wrapperDimensions);

		// create layer
		mf.myAccountLayer.layer = mf.myAccountLayer.layerWrapper.createChild({
			tag: 'div',
			id: 'mfMyAccountLayer'
		});

		// get and set current layer dimensions
		var dimensions = mf.myAccountLayer.getLayerDimensions();
		mf.myAccountLayer.setLayerDimensions(dimensions);

		// create iframe with my account
		mf.myAccountLayer.iframe = mf.myAccountLayer.loadIframe();

		// open the layer
		mf.myAccountLayer.openLayer();
	},
	
	/**
	 * calculate dimensions of the myAccount layer wrapper in respect to layer settings
	 * @param none
	 * @return {Obj} array which contains dimensions of the layer
	 */
	getLayerWrapperDimensions: function() {
		var bodyHeight = Ext.getBody().getHeight();
		var headerHeight = Ext.get('mfHeader').getHeight();
		var footerHeight = mf.myAccountLayer.helper.footer.getHeight();

		// height
		var height = mf.myAccountLayer.isHomepage ? Ext.get('mfContentWrapper').getHeight() : bodyHeight - footerHeight - headerHeight;

		if (height >= mf.myAccountLayer.settings.maxHeight) {
			height = mf.myAccountLayer.settings.maxHeight;
		}

		return {
			height: height,
			top: bodyHeight - footerHeight - height
		};
	},

	/**
	 * set dimensions of the myAccount layer wrapper
	 * @param dimensions {Obj} array which contains dimensions of the mask
	 */
	setLayerWrapperDimensions: function(dimensions) {
		mf.myAccountLayer.layerWrapper.setStyle({
			'height': dimensions.height + 'px',
			'top': '-' + dimensions.height + 'px'
		});
	},

	/**
	 * calculate the height, width, top and left position of the myAccount layer in respect to layer settings
	 * @param none
	 * @return {Obj} array which contains dimensions of the layer
	 */
	getLayerDimensions: function() {
		var box = Ext.get('mfMyAccountLayerWrapper').getBox();

		return {
			height: box.height,
			top: box.y,
			width: box.width
		};
	},

	/**
	 * calculate the height, width, top and left position of the myAccount layer in respect to layer settings
	 * @param dimensions {Obj} array which contains dimensions of the mask
	 */
	setLayerDimensions: function(dimensions) {
		mf.myAccountLayer.layer.shift({
			y: dimensions.height + dimensions.top,
			width: dimensions.width,
			duration: .25,
			easing: 'easeOut'
		});
	},

	/**
	 * delete all the layers
	 * @param none
	 */
	deleteLayer: function(){
		mf.myAccountLayer.layer.remove();
		mf.myAccountLayer.layer = null;
		mf.myAccountLayer.layerWrapper.remove();
		mf.myAccountLayer.layerWrapper = null;
	},

	/**
	 * open the layer with the iframe
	 * @return none
	 */
	openLayer: function() {
	    // configure actual language on myAccount server
        Ext.Ajax.request({
            disableCaching: true,
            url: '/myaccount/v1/setFrontendLanguage?frontendLanguage=' + currentLanguage,
            success: function() {},
            failure: function() {}
        });

		mf.myAccountLayer.createMask();

		if (mf.myAccountLayer.layer) {
			// stop effects
			mf.myAccountLayer.layer.stopFx();
			// set resize handler
			mf.myAccountLayer.setResizeHandler();
			// set current dimensions
			mf.myAccountLayer.layerWrapper.setStyle('display', 'block');
			var dimensions = mf.myAccountLayer.getLayerDimensions();
			// set indicator
			mf.myAccountLayer.createLoadingIndicator();

			// shift in layer
			mf.myAccountLayer.layer.shift({
				y: dimensions.top,
				duration: 2,
				easing: 'easeOut',
				callback: function() {
					mf.myAccountLayer.iframe.setStyle('display', 'block');
					mf.myAccountLayer.loadingIndicator.remove();
					// adjust footer events
					mf.myAccountFooter.toggleLayer(false);
				}
			});
		} else {
			mf.myAccountLayer.createLayer();
		}
	},
	
	/**
	 * close the layer and delete mask
	 * @return removeLayer {Boolean} switch if layer should be removed from the DOM
	 */
	closeLayer: function(removeLayer) {
		if (mf.myAccountLayer.layer) {
			// stop effects
			mf.myAccountLayer.layer.stopFx();
			// get current dimensions
			var dimensions = mf.myAccountLayer.getLayerDimensions();
			// set indicator and hide frame
			mf.myAccountLayer.createLoadingIndicator();
			mf.myAccountLayer.iframe.setStyle('display', 'none');

			// shift out layer
			mf.myAccountLayer.layer.shift({
				y: dimensions.height + dimensions.top,
				duration: 1,
				easing: 'easeIn',
				callback: function() {
					// adjust footer events
					mf.myAccountFooter.toggleLayer(true);
					mf.myAccountLayer.loadingIndicator.remove();
					// remove resize handler
					mf.myAccountLayer.removeResizeHandler();
					mf.myAccountLayer.layerWrapper.setStyle('display', 'none');
					mf.myAccountLayer.deleteMask();
					if (removeLayer) {
						mf.myAccountLayer.deleteLayer();
					}
				}
			});
		} else {
			mf.myAccountLayer.deleteMask();
		}
	},
	
	/**
	 * set new resize handler and append former resize handlers (if any)
	 * @param none
	 */
	setResizeHandler: function(){
		window.onresize = function() {
			if (Ext.get('mfMyAccountMask')) {
				mf.myAccountLayer.setMaskDimensions(mf.myAccountLayer.getMaskDimensions());
			}
			if (Ext.get('mfMyAccountLayerWrapper')) {
				mf.myAccountLayer.setLayerWrapperDimensions(mf.myAccountLayer.getLayerWrapperDimensions());
			}
		};
	},

	/**
	 * set new resize handler and append former resize handlers (if any)
	 * @param none
	 */
	removeResizeHandler: function(){
		window.onresize = null;
	},

	/**
	 * creates a temporary overlay for the layer contents
	 * @param none
	 */
	createLoadingIndicator: function(){
		// create loading indicator
		mf.myAccountLayer.loadingIndicator = mf.myAccountLayer.layer.createChild({
			tag: 'div',
			id: 'mfMyAccountLoading'
		}).setOpacity(.5);
	},

	/**
	 * generate the iframe
	 * @param none
	 * @return {Ext.Element} Iframe-Element
	 */
	loadIframe: function() {
		return Ext.get('mfMyAccountLayer').createChild({
			tag: 'iframe',
			id: 'mfMyAccountIframe',
			frameborder: '0',
			src: mfConfig.myAccount.myAccountPath
		});
	}
};