/*
	Data-Bühne

	Letzte Änderung:
	- JeDu (2011-07-04)

	Beispielaufruf:

		<div id="dataArena" style="position:relative; height:180px; overflow:hidden;">
			<table width="100%" height="100%" cellpadding="0" cellspacing="0"><tr><td style="text-align:center; vertical-align:middle;">Einen Augenblick bitte.<br>Aktuelle Neuigkeiten werden für Sie zusammengestellt...</td></tr></table>
		</div>
		<script type="text/javascript" src="/userdata/11111/layout/topoffer/newsarena.js"></script>
		<script type="text/javascript">
			mdxDataArenaInit({
				element:'dataArena',
				layout:{
					background:'#ffffff',
					frame:{
						src:'modix-datadir/kfz/dataArena-bg.gif',
						hover:'modix-datadir/kfz/dataArena-bg-hover.gif',
						width:172,
						height:172
					},
					data:{
						width:160,
						height:120,
						xOffset:6,
						yOffset:6,
						align:'stretch'
					}
				},
				arena:{
					rearDivisor:1.2,
					rearOpacity:0.6,
					widthMultiplier:200,
					heightMultiplier:3.9918,
					xOffset:0,
					yOffset:-20,
					interval:5000
				},
				data:[
					<mdx_setvar(%i%,0)>
					<mdx_getmoddata(dataarena_data)>
						<mdx_ifnotequal(%db04%)>
							<mdx_ifnotequal(%i%,0)>,</mdx_ifnotequal>
							{
								image:'<mdx_getpic(%db04%,160)>',
								link:'<mdx_ifgreater(%db02%,0)><mdx_adr(%mdx_frameshortname%,2,%dbid%)><mdx_else><mdx_ifequal(%db09%,'intern[prozessname]')><mdx_adr(%db10%)><mdx_else>%db10%</mdx_ifequal></mdx_ifgreater>',
								target:'<mdx_ifequal(%l2e_linkTyp%,'http[imNeuemFenster]')>_blank<mdx_else>_self</mdx_ifequal>',
								text:'<b><mdx_entity_encode(%db03%)></b><br><mdx_entity_encode(%db05%)>'
							}
							<mdx_add(%i%,%i%,1)>
						</mdx_ifnotequal>
					</mdx_getmoddata>
				]
			});
		</script>
*/
function mdxDataArenaInit(config) {
	addEvent(window, 'load', function loadEvent() {
		function confError(variable) { return '<table width="100%" height="100%" cellpadding="0" cellspacing="0"><tr><td style="text-align:center; vertical-align:middle;">Die Konfiguration ist unvollständig.<br>' + variable + ' nicht gesetzt.</td></tr></table>'; }

		if (typeof config.element != 'object') { config.element = document.getElementById(typeof config.element === 'string' ? config.element : 'dataArena' ); }

		if (typeof config.layout != 'object') { config.element.innerHTML = confError('layout'); return; }
		if (typeof config.layout.background != 'string') { config.element.innerHTML = confError('layout.background'); return; }
		if (typeof config.layout.frame != 'object') { config.element.innerHTML = confError('layout.frame'); return; }
		if (typeof config.layout.frame.src != 'string') { config.element.innerHTML = confError('layout.frame.src'); return; }
		if (typeof config.layout.frame.width != 'number') { config.element.innerHTML = confError('layout.frame.width'); return; }
		if (typeof config.layout.frame.height != 'number') { config.element.innerHTML = confError('layout.frame.height'); return; }
		if (typeof config.layout.data != 'object') { config.element.innerHTML = confError('layout.data'); return; }
		if (typeof config.layout.data.width != 'number') { config.element.innerHTML = confError('layout.data.width'); return; }
		if (typeof config.layout.data.height != 'number') { config.element.innerHTML = confError('layout.data.height'); return; }
		if (typeof config.layout.data.xOffset != 'number') { config.layout.data.xOffset = Math.round((config.layout.frame.width - config.layout.data.width) / 2); }
		if (typeof config.layout.data.yOffset != 'number') { config.layout.data.yOffset = config.layout.data.xOffset; }
		if (typeof config.layout.data.align != 'string') { config.layout.data.align = 'stretch'; } /* stretch, top, center, bottom */

		if (typeof config.arena != 'object') { config.element.innerHTML = confError('arena'); return; }
		if (typeof config.arena.rearDivisor === 'string') { config.arena.rearDivisor = parseFloat(config.arena.rearDivisor); }
		if (typeof config.arena.rearDivisor != 'number' || config.arena.rearDivisor === 0) { config.arena.rearDivisor = 1; }
		if (typeof config.arena.rearOpacity === 'string') { config.arena.rearOpacity = parseFloat(config.arena.rearOpacity); }
		if (typeof config.arena.rearOpacity != 'number') { config.arena.rearOpacity = 0; }
		if (typeof config.arena.xOffset === 'string') { config.arena.xOffset = parseInt(config.arena.xOffset); }
		if (typeof config.arena.xOffset != 'number') { config.arena.xOffset = 0; }
		if (typeof config.arena.yOffset === 'string') { config.arena.yOffset = parseInt(config.arena.yOffset); }
		if (typeof config.arena.yOffset != 'number') { config.arena.yOffset = 0; }
		if (typeof config.arena.interval === 'string') { config.arena.interval = parseInt(config.arena.interval); }
		if (typeof config.arena.interval != 'number') { config.arena.interval = 5000; }

		if (typeof config.data != 'object' || typeof(config.data.length) === 'undefined') { config.element.innerHTML = confError('data'); return; }

		if (typeof config.langId === 'undefined') { config.langId = 'de'; }

		if (typeof config.layout.frame.hover === 'string') {
			config.layout.frame.hoverImg = new Image();
			config.layout.frame.hoverImg.src = config.layout.frame.hover;
		}

		if (config.data.length == 0) {
			config.element.style.display = 'none';
			/*
				switch (config.langId.substr(0, 2)) {
					case 'en':
						config.element.innerHTML = 'No data available at the moment.';
						break;
					default:
						config.element.innerHTML = 'Zur Zeit stehen keine Neuigkeiten zur Verfügung.';
				}
			*/
			return;
		}

		var	dataList = [],
			data;

		for (var i = 0; i < config.data.length; i++) {
			data = config.data[i];
			if ((typeof(data.image) == 'string') && (typeof(data.text) == 'string')) {
				dataList.push({
					image:data.image,
					link:data.link || '',
					target:data.target,
					text:data.text
				});
			}
		}

		var dataArenaHalfAngle = Math.round((360 / dataList.length) / 2);
		var dataArenaCenterX = Math.floor(config.element.offsetWidth / 2) + config.arena.xOffset;
		var dataArenaCenterY = Math.floor(config.element.offsetHeight / 2)+ config.arena.yOffset;

		if (typeof config.arena.widthMultiplier != 'number') { config.arena.widthMultiplier = dataArenaCenterX - Math.ceil(config.layout.frame.width / 2); }
		if (typeof config.arena.heightMultiplier != 'number') { config.arena.heightMultiplier = dataArenaCenterY - Math.ceil(config.layout.frame.height / 2); }

		var dataArenaAngle = 90;

		config.element.innerHTML = '';

		var dataArenaTitle = document.createElement('div');
		dataArenaTitle.style.position = 'absolute';
		dataArenaTitle.style.width = config.element.offsetWidth + 'px';
		dataArenaTitle.style.textAlign = 'center';
		dataArenaTitle.style.left = '0';
		dataArenaTitle.style.bottom = '0';
		dataArenaTitle.style.zIndex = '200';
		config.element.appendChild(dataArenaTitle);

		var dataArenaFog = document.createElement('div');
		dataArenaFog.style.position = 'absolute';
		dataArenaFog.style.width = config.element.offsetWidth + 'px';
		dataArenaFog.style.height = config.element.offsetHeight + 'px';
		dataArenaFog.style.background = config.layout.background;
		dataArenaFog.style.zIndex = '7';
		dataArenaFog.style.opacity = config.arena.rearOpacity;
		dataArenaFog.style.MozOpacity = config.arena.rearOpacity;
		dataArenaFog.style.KhtmlOpacity = config.arena.rearOpacity;
		dataArenaFog.style.filter = "Alpha(style=0, opacity=" + (config.arena.rearOpacity * 100) + ")";
		config.element.appendChild(dataArenaFog);

		addEvent(config.element, "selectstart", function () { return false; });
		config.element.style.MozUserSelect = "none";
		config.element.style.KhtmlUserSelect = "none";
		config.element.unselectable = "on";

		var img, frame;
		for (var i = 0; i < dataList.length; i++) {
			dataList[i].container = document.createElement('div');
			dataList[i].img = document.createElement('img');
			dataList[i].frame = document.createElement('img');

			dataList[i].container.style.position = 'absolute';
			dataList[i].container.style.top = '0';
			dataList[i].container.style.left = '0';
			dataList[i].container.style.width = '0px';
			dataList[i].container.style.height = '0px';
			dataList[i].container.style.MozTransformOrigin = 'left top';
			dataList[i].container.style.WebkitTransformOrigin = 'left top';
			dataList[i].container.style.OTransformOrigin = 'left top';

			dataList[i].frame.style.position = 'absolute';
			dataList[i].frame.style.top = '0';
			dataList[i].frame.style.left = '0';
			dataList[i].frame.style.width = config.layout.frame.width + 'px';
			dataList[i].frame.style.height = config.layout.frame.height + 'px';
			dataList[i].frame.src = config.layout.frame.src;

			dataList[i].img.style.position = 'absolute';
			dataList[i].img.style.top = config.layout.data.xOffset + 'px';
			dataList[i].img.style.left = config.layout.data.yOffset + 'px';
			dataList[i].img.style.width = config.layout.data.width + 'px';

			switch (config.layout.data.align.toLowerCase()) {
				case 'stretch':
					dataList[i].img.style.height = config.layout.data.height + 'px';
					break;
				case 'top':
					addEvent(dataList[i].img, 'load', (function (data) { return function () {
						if (data.img.height > config.layout.data.height) {
							data.img.style.height = config.layout.data.height + 'px';
						} else {
						}
					}; })(dataList[i]));
					break;
				case 'center':
					addEvent(dataList[i].img, 'load', (function (data) { return function () {
						if (data.img.height > config.layout.data.height) {
							data.img.style.height = config.layout.data.height + 'px';
						} else {
							data.img.style.marginTop = Math.floor((config.layout.data.height - data.img.height) / 2) + 'px';
						}
					}; })(dataList[i]));
					break;
				case 'bottom':
					addEvent(dataList[i].img, 'load', (function (data) { return function () {
						if (data.img.height > config.layout.data.height) {
							data.img.style.height = config.layout.data.height + 'px';
						} else {
							data.img.style.marginTop = (config.layout.data.height - data.img.height) + 'px';
						}
					}; })(dataList[i]));
					break;
			}

			dataList[i].img.src = dataList[i].image;

			if (typeof dataList[i].link == 'string' && dataList[i].link.length > 0) {
				if (typeof config.layout.frame.hoverImg != 'undefined') {
					addEvent(dataList[i].img, 'mouseover', (function (data) { return function () {
						if (!mouseLeftButton) {
							data.frame.src = config.layout.frame.hoverImg.src;
						}
					}; })(dataList[i]));
					addEvent(dataList[i].img, 'mouseout', (function (data) { return function () {
						data.frame.src = config.layout.frame.src;
					}; })(dataList[i]));
				}			
	
				dataList[i].img.style.cursor = 'pointer';
				addEvent(dataList[i].img, 'click', (function (data) { return function () {
					if (mouseLastDiff === 0) {
						window.open(data.link.replace('[chiffre]', data.chiffre), (typeof data.target == 'string' ? data.target : '_self'));
					}
				}; })(dataList[i]));
			}

			dataList[i].angle = (360 / dataList.length) * i;

			dataList[i].container.appendChild(dataList[i].frame);
			dataList[i].container.appendChild(dataList[i].img);
			config.element.appendChild(dataList[i].container);

			dataArenaSetPosition(dataList[i]);
		}

		var mouseLeftButton = false, mouseInitPos, mouseLastDiff = 0, mouseAngle = 0;
		addEvent(config.element, 'mousedown', function (e) {
			e = e || window.event;
			if (e.button == 0 || e.button == 1) {
				mouseLeftButton = true;
				mouseInitPos = e.clientX;
				mouseLastDiff = 0;
				mouseAngle = dataArenaAngle;

				for (var i = 0; i < dataList.length; i++) {
					dataList[i].frame.src = config.layout.frame.src;
				}

				if (e.preventDefault) { e.preventDefault(); }
				if (e.stopPropagation) { e.stopPropagation(); }
				e.returnValue = false;
				return false;
			}
		});
		addEvent(document, 'mouseup', function (e) {
			e = e || window.event;
			if (e.button == 0 || e.button == 1) {
				mouseLeftButton = false;

				var fromElement = e.relatedTarget || e.fromElement || false;
				if (dataArenaAnimTimeout === null && (fromElement === false || fromElement == elem || !!(elem.compareDocumentPosition(fromElement) & 16))) {
					dataArenaAnimTimeout = setTimeout(function() { startScrolling(); }, config.arena.interval);
				}
			}
		});
		addEvent(config.element, 'dragstart', function (e) {
			e = e || window.event;
			if (e.preventDefault) { e.preventDefault(); }
			if (e.stopPropagation) { e.stopPropagation(); }
			e.returnValue = false;
			return false;
		});
		addEvent(document, 'mousemove', function (e) {
			e = e || window.event;
			if (mouseLeftButton) {
				var diff = -(e.clientX - mouseInitPos) / 3;
				dataArenaAngle += ((diff - mouseLastDiff) + 360) % 360;
				mouseLastDiff = diff;

				for (var i = 0; i < dataList.length; i++) {
					dataArenaSetPosition(dataList[i]);
				}

				if (e.preventDefault) { e.preventDefault(); }
				if (e.stopPropagation) { e.stopPropagation(); }
				e.returnValue = false;
				return false;
			}
		});

		function dataArenaSetPosition(data) {
			var x = Math.cos(((dataArenaAngle + data.angle) % 360) * (Math.PI / 180)),
			y = Math.sin(((dataArenaAngle + data.angle) % 360) * (Math.PI / 180)),
			factor = 1 / (y + ((1 - y) * config.arena.rearDivisor)),
			fWidth = (config.layout.frame.width * factor),
			fHeight = (config.layout.frame.height * factor),
			left = ((x * config.arena.widthMultiplier) + dataArenaCenterX) - (fWidth / 2),
			top = ((y * config.arena.heightMultiplier) + dataArenaCenterY) - (fHeight / 2);

			if (typeof(window.ActiveXObject) === 'undefined') {
				data.container.style.MozTransform = 'scale(' + factor + ') translate(' + (left / factor) + 'px, ' + (top / factor) + 'px)';
				data.container.style.WebkitTransform = 'scale(' + factor + ') translate(' + (left / factor) + 'px, ' + (top / factor) + 'px)';
				data.container.style.OTransform = 'scale(' + factor + ') translate(' + (left / factor) + 'px, ' + (top / factor) + 'px)';
			} else {
				data.container.style.left = Math.round(left) + 'px';
				data.container.style.top = Math.round(top) + 'px';
				data.frame.style.width = Math.ceil(fWidth) + 'px';
				data.frame.style.height = Math.ceil(fHeight) + 'px';
				data.img.style.left = Math.round(config.layout.data.xOffset * (((y + 1) / 4) + 0.5)) + "px";
				data.img.style.width = Math.ceil(config.layout.data.width * factor) + 'px';
				data.img.style.top = Math.round(config.layout.data.yOffset  * (((y + 1) / 4) + 0.5)) + "px";

				switch (config.layout.data.align.toLowerCase()) {
					case 'stretch':
						data.img.style.height = Math.ceil(config.layout.data.height * factor) + 'px';
						break;
					case 'top':
						data.img.style.height = '';
						if (data.img.height > config.layout.data.height) {
							data.img.style.height = Math.ceil(config.layout.data.height * factor) + 'px';
						} else {
							data.img.style.height = Math.ceil(data.img.height * factor) + 'px';
						}
						break;
					case 'center':
						data.img.style.height = '';
						if (data.img.height > config.layout.data.height) {
							data.img.style.height = Math.ceil(config.layout.data.height * factor) + 'px';
						} else {
							data.img.style.marginTop = Math.ceil(Math.floor((config.layout.data.height - data.img.height) / 2)  * factor) + 'px';
							data.img.style.height = Math.ceil(data.img.height * factor) + 'px';
						}
						break;
					case 'bottom':
						data.img.style.height = '';
						if (data.img.height > config.layout.data.height) {
							data.img.style.height = Math.ceil(config.layout.data.height * factor) + 'px';
						} else {
							data.img.style.marginTop = Math.ceil((config.layout.data.height - data.img.height)  * factor) + 'px';
							data.img.style.height = Math.ceil(data.img.height * factor) + 'px';
						}
						break;
				}
			}

			data.container.style.zIndex = Math.round((y + 1) * 10);

			if ((((dataArenaAngle + data.angle) % 360) > (90 - dataArenaHalfAngle)) && (((dataArenaAngle + data.angle) % 360) < (90 + dataArenaHalfAngle))) {
				dataArenaTitle.innerHTML = data.text;
			}
		}

		var scrollingInterval = null, scrollingDistances = [0.202332738,0.16186619,0.129492952,0.103594362,0.082875489,0.066300391,0.053040313,0.042432251,0.0339458,0.02715664,0.021725312,0.01738025,0.0139042,0.01112336,0.008898688,0.00711895,0.00569516,0.004556128,0.003644903,0.002915922,1];
		// 0.009846095,0.015390498,0.024051238,0.037587229,0.058732435,0.091750311,0.124787305,0.145932511,0.158264028,0.165184973,0.168473377,1
		// 0.00083, 0.00125, 0.00187, 0.00281, 0.00421, 0.00631, 0.00947, 0.01421, 0.02131, 0.03196, 0.04795, 0.06393, 0.07458, 0.08168, 0.08642, 0.08958, 0.09098, 0.09192, 0.09254, 0.09295, 0.09325, 1

		function startScrolling(dataArenaTargetAngle) {
			if (scrollingInterval !== null) { return; }
			if (typeof(dataArenaTargetAngle) == 'undefined') {
				// dataArenaTargetAngle = dataArenaAngle + (360 / dataList.length);
				dataArenaTargetAngle = ((Math.round((dataArenaAngle - 90) / (360 / dataList.length)) * (360 / dataList.length)) + 90) + (360 / dataList.length);
			}
			var dataArenaScrollDirection = (dataArenaTargetAngle < dataArenaAngle ? -1 : 1),
			scrollingDistance = dataArenaTargetAngle - dataArenaAngle;
			scrollingFrame = 0

			scrollingInterval = setInterval((function (dataArenaTargetAngle, scrollingFrame) { return function () {
				dataArenaAngle += dataArenaScrollDirection * (scrollingDistances[scrollingFrame] * scrollingDistance);
				scrollingFrame++;

				if (
					(dataArenaScrollDirection === 1 && dataArenaAngle >= dataArenaTargetAngle) ||
					(dataArenaScrollDirection === -1 && dataArenaAngle <= dataArenaTargetAngle)
				) {
					clearInterval(scrollingInterval);
					scrollingInterval = null;
					if (!mouseLeftButton) { dataArenaAnimTimeout = setTimeout(function() { startScrolling(); }, config.arena.interval); }
					dataArenaAngle = (dataArenaTargetAngle + 360) % 360;
				}

				for (var i = 0; i < dataList.length; i++) {
					dataArenaSetPosition(dataList[i]);
				}
			} })(dataArenaTargetAngle, scrollingFrame), 40);
		}
		var dataArenaAnimTimeout = setTimeout(function() { startScrolling(); }, config.arena.interval);

		addEvent(config.element, 'mouseover', function () {
			if (dataArenaAnimTimeout != null) {
				clearTimeout(dataArenaAnimTimeout);
				dataArenaAnimTimeout = null;
			}
		});
		addEvent(config.element, 'mouseout', function () {
			if (dataArenaAnimTimeout === null && !mouseLeftButton) {
				dataArenaAnimTimeout = setTimeout(function() { startScrolling(); }, config.arena.interval);
			}
		});

	});

	function addEvent(obj, type, fn) {
		if (obj.attachEvent) {
			obj['e' + type + fn] = fn;
			obj[type + fn] = function() { obj['e' + type + fn](window.event); }
			obj.attachEvent('on' + type, obj[type + fn]);
		} else {
			obj.addEventListener(type, fn, false);
		}
	}
}