var frameCounters;
var loadingIntervals;

var sliderPosition;


function url2safeString(url){
	
	url = url.replace(/\//gi, 'slash');
	url = url.replace(/:/gi, 'dots');
	
	return url;
	
}



function initInfoBoxes(id){
	
	$('.info-button', id).each(function(){
		
		$(this).hover(
			function(){
				$('.info-text', this).fadeIn(200);
			},
			function(){
				$('.info-text', this).fadeOut(200);
			}
		);
		
		
	});
	
}

function loadAdThumbAnimations(identifier){
	
	if (typeof loadingIntervals == 'undefined'){
		loadingIntervals = Array();
	}
	
	$(identifier+' .ad-thumb').each(function(){
	
		var thumbId = $(this).attr('id');
	
		var domElement = $('.ad-thumb-overlay', this);
	
		if (domElement.css('background-image') != 'none'){
	
			$(this).hover(
				function () {
					
					domElement.fadeIn(500);
					loadingIntervals[thumbId] = setInterval(function() { adThumbAnimation(domElement); }, 1000);
					
				}, 
				function () {
					
					domElement.fadeOut(500);
					clearInterval(loadingIntervals[thumbId]);	
					
				}
			);
		
		}
	
	});
}

function adThumbAnimation(domElement){
	
	if (domElement.css('display') == 'none'){
		domElement.fadeIn(500);
	}else{	
		domElement.fadeOut(500);
	}
	
}

function startLoading(domElement, identifier){
	
	domElement.show();
	domElement.html('<div class="loading-animation-icon"><div></div></div><div class="loading-animation-text">lade daten ...</div>');

	if (typeof frameCounters == 'undefined'){
		frameCounters = Array();
	}

	if (typeof loadingIntervals == 'undefined'){
		loadingIntervals = Array();
	}

	frameCounters[identifier] = 0;

	loadingIntervals[identifier] = setInterval(function() { loadingAnimation(domElement, identifier); }, 300);

}

function stopLoading(domElement, identifier){

	domElement.hide();
	clearInterval(loadingIntervals[identifier]);	
}


function loadingAnimation(domElement, identifier){


	$('.loading-animation-icon div', domElement).css('top', (frameCounters[identifier] * -12) + 'px');
	frameCounters[identifier] = (frameCounters[identifier] + 1) % 4;

}

function loadElementFromToolServer(rowId, url, callback){
	
	
	
	var loadingDom;
	
	$(rowId+' .loading-animation').each(function(){
		
		loadingDom = $(this);
		
		startLoading(loadingDom, rowId);
		
	});
	

	var loadUrl = url2safeString(url);
	
	
	if (loadUrl != ''){
		
		
		// Wenns eine Klasse .loading-content hat da rein laden
		if ($(rowId+' .loading-content').html() != null){
		
			$(rowId+' .loading-content').css('opacity', '0.3');
		
			$(rowId+' .loading-content').load('/tl_files/newsnet/loader/externalpage.php?dev='+$('body').hasClass('development')+'&url='+loadUrl, function(response, status, xhr){
				stopLoading(loadingDom, rowId);
				$(rowId+' .loading-content').css('opacity', '1');
				callback();	
			});
		
		// Sonst direkt ins ID-Element
		}else{
			
			$(rowId).load('/tl_files/newsnet/loader/externalpage.php?dev='+$('body').hasClass('development')+'&url='+loadUrl, function(response, status, xhr){
				stopLoading(loadingDom, rowId);
				callback();
			});
			
		}
		
			
	}
	
}

function loadRow(rowId, url, callback, open){
	
	var openSubSections = Array();
	
	$(rowId).find('.element-header').each(function(){
		$(this).css('visibility', 'hidden');
	});
	
	if (open != true){
		open = $('.slide-up-down-button', rowId).hasClass('active');
	}

	$('.attribute-labels-sub-section', rowId).each(function(){
	
		if ($('.sub-slide-up-down-button', this).hasClass('active') == true){
			openSubSections.push($(this).attr('id'));
		}
	
	});
	
	var oldSliderPos = $('.sliding-canvas', rowId).position();
	
	loadElementFromToolServer(rowId, url, function(){
		
		if (open == true){
			$('.element-content', rowId).addClass('open');
			$('.inside-attribute-labels', rowId).addClass('open');
			
		}
		
		// Init Slider
		
		var numberOfElements = $(rowId).find('.slider-element').length;
		var slideStepWidth = parseInt($('.slider-element', rowId).css('width')); 
		var numberOfShownElements = Math.round(640/slideStepWidth);
		
		if (typeof sliderPosition == 'undefined'){
			sliderPosition = Array();
		}
		
		
		if (numberOfElements > numberOfShownElements){
			if ($('.slider', rowId).hasClass('reverse')){
				$('.sliding-canvas', rowId).css('left', -(numberOfElements-numberOfShownElements)*slideStepWidth);
				
				$('.slide-left-button', rowId).removeClass('inactive');
				$('.slide-right-button', rowId).addClass('inactive');
				
				sliderPosition[rowId] = numberOfElements-numberOfShownElements;
			}else{
				$('.slide-left-button', rowId).addClass('inactive');
				$('.slide-right-button', rowId).removeClass('inactive');
				sliderPosition[rowId] = 0;
			}
			if (oldSliderPos != null){
				if (oldSliderPos.left < 0){
					oldSliderPos = oldSliderPos.left/slideStepWidth;
					oldSliderPos = oldSliderPos * -1;
					if (oldSliderPos >= numberOfElements-numberOfShownElements){
						oldSliderPos = numberOfElements-numberOfShownElements;
						$('.slide-right-button', rowId).addClass('inactive');
					}
					sliderPosition[rowId] = oldSliderPos;
					$('.sliding-canvas', rowId).css('left', -sliderPosition[rowId]*slideStepWidth);
					
					$('.slide-left-button', rowId).removeClass('inactive');
				}
			}
		}else{
			$('.slide-left-button', rowId).addClass('inactive');
			$('.slide-right-button', rowId).addClass('inactive');
		}
		
		
		
		// Slide Left
		
		$('.slide-left-button', rowId).unbind('click');
		$('.slide-left-button', rowId).click(function(){
			
			if (!$(this).hasClass('inactive')){
				if (sliderPosition[rowId] > 0){
					sliderPosition[rowId] = sliderPosition[rowId] - 1;
				}
				
				$('.sliding-canvas', rowId).stop().animate({
					left: -(sliderPosition[rowId]*slideStepWidth)+'px'
				}, 500, function(){
					if (sliderPosition[rowId] <= 0){
						$('.slide-left-button', rowId).addClass('inactive');	
					}
					$('.slide-right-button', rowId).removeClass('inactive');
				});
			}
			
		});
		
		// Slide Right
		$('.slide-right-button', rowId).unbind('click');
		$('.slide-right-button', rowId).click(function(){
			
			if (!$(this).hasClass('inactive')){
				if (sliderPosition[rowId] < numberOfElements-numberOfShownElements){
					sliderPosition[rowId] = sliderPosition[rowId] + 1;
				}
				
				$('.sliding-canvas', rowId).stop().animate({
					left: -(sliderPosition[rowId]*slideStepWidth)+'px'
				}, 500, function(){
					if (sliderPosition[rowId] >= numberOfElements-numberOfShownElements){
						$('.slide-right-button', rowId).addClass('inactive');	
					}
					$('.slide-left-button', rowId).removeClass('inactive');
				});
			}
			
		});
		
		// Slide Up & Down
		//$('.slide-up-down-button', rowId).unbind('click');
		$('.row-header', rowId).unbind('click');
		
		if ($('.element-content', rowId).html() != null){ // Nur wenns auch nen Inhalt hat kann man runterklappen...
			
			$('.slide-up-down-button', rowId).addClass('enabled');
			
			if (open == true){
				$('.slide-up-down-button', rowId).addClass('active');
			}
			
			//alert(rowId);
			
			//$('.slide-up-down-button', rowId).click(function(){
			$('.row-header', rowId).click(function(clickEvent){
				
				//alert($(clickEvent.target).hasClass('slide-left-button'));
				
				//alert(clickEvent.namespace);
				
				if (!$(clickEvent.target).hasClass('slide-left-button') && !$(clickEvent.target).hasClass('slide-right-button')){
				
					if ($('.slide-up-down-button', rowId).hasClass('active')){
						
						$('.slide-up-down-button', rowId).removeClass('active');
						$('.element-content', rowId).slideUp(function(){
							$('.element-content', rowId).removeClass('open');
						});
						$('.inside-attribute-labels', rowId).slideUp(function(){
							$('.inside-attribute-labels', rowId).removeClass('open');
						});
						
						
						
					}else{
						
						$('.slide-up-down-button', rowId).addClass('active');
						$('.inside-attribute-labels', rowId).slideDown();
						$('.element-content', rowId).slideDown();
						
						
					}
				}
				
			});
		}else{
			$('.slide-up-down-button', rowId).removeClass('active');
			$('.slide-up-down-button', rowId).removeClass('enabled');
		}
		
		// Slide Up & Down Sub-Section
		$('.attribute-labels-sub-section', rowId).each(function(){
			
			var subSectionId = $(this).attr('id');
			var subSection = $(this);
			
			for (var i = 0; i < openSubSections.length; i++){
				if (openSubSections[i] == subSectionId){
					
					$('.sub-slide-up-down-button', subSection).addClass('active');
					subSection.addClass('open');
					$('.'+subSectionId+'-content', rowId).addClass('open');
					
				}
			}
			
			$('.sub-slide-up-down-button', subSection).click(function(){
				
				if ($(this).hasClass('active')){
					$(this).removeClass('active');
					$('.attribute-labels-sub-section-content', subSection).slideUp();
					$('.'+subSectionId+'-content', rowId).slideUp();
					
				}else{
					$(this).addClass('active');
					$('.attribute-labels-sub-section-content', subSection).slideDown();
					$('.'+subSectionId+'-content', rowId).slideDown();
				}
				
			});
			
		});
		
		// Choose Element
		if ($('.slider', rowId).hasClass('choosable')){
			$('.slider-element', rowId).each(function(){
				
				var sliderElement = $(this);
				
				$('.element-title' ,this).click(function(){
	
					// remove other actives
					$('.slider-element', rowId).each(function(){
						
						$(this).removeClass('active');
						
					});
					
					// add active to clicked object
					sliderElement.addClass('active');
					
				});
				
				
			});
		}
		
		callback();
		
	});
}

function drawRingSector(circleResolution, centerX, centerY, radius, size, start, end){
	
	start = 360 - start;
	end = 360 - end;
	
	var pathString = '';
	
	var deltaX;
	var deltaY;
	
	for(var i = start; i >= end; i = i - circleResolution){
		
		deltaX = Math.sin((i + 180) * Math.PI / 180) * radius;
		deltaY = Math.cos((i + 180) * Math.PI / 180) * radius;
	
		if (pathString == ''){
			pathString = 'M';
		}else{
			pathString = pathString + 'L'
		}
		pathString = pathString + Math.round(centerX + deltaX) + ' ' + Math.round(centerY + deltaY);
		
	}
	
	for(var i = end; i <= start; i = i + circleResolution){
		
		deltaX = Math.sin((i + 180) * Math.PI / 180) * (radius - size);
		deltaY = Math.cos((i + 180) * Math.PI / 180) * (radius - size);
	
		pathString = pathString + 'L' + Math.round(centerX + deltaX) + ' ' + Math.round(centerY + deltaY);	
	}
	
	deltaX = Math.sin((start + 180) * Math.PI / 180) * radius;
	deltaY = Math.cos((start + 180) * Math.PI / 180) * radius;
	
	pathString = pathString + 'L' + Math.round(centerX + deltaX) + ' ' + Math.round(centerY + deltaY);
	
	return pathString;
	
}


function drawRingSectorReverse(circleResolution, centerX, centerY, radius, size, start, end){
	
	/*
	start = 360 - start;
	end = 360 - end;
	*/
	
	var pathString = '';
	
	var deltaX;
	var deltaY;
	
	for(var i = start; i <= end; i = i + circleResolution){
		
		deltaX = Math.sin((i + 180) * Math.PI / 180) * radius;
		deltaY = Math.cos((i + 180) * Math.PI / 180) * radius;
	
		if (pathString == ''){
			pathString = 'M';
		}else{
			pathString = pathString + 'L';
		}
		pathString = pathString + Math.round(centerX + deltaX) + ' ' + Math.round(centerY + deltaY);
		
	}
	
	for(var i = end; i >= start; i = i - circleResolution){
		
		deltaX = Math.sin((i + 180) * Math.PI / 180) * (radius - size);
		deltaY = Math.cos((i + 180) * Math.PI / 180) * (radius - size);
	
		pathString = pathString + 'L' + Math.round(centerX + deltaX) + ' ' + Math.round(centerY + deltaY);	
	}
	
	deltaX = Math.sin((start + 180) * Math.PI / 180) * radius;
	deltaY = Math.cos((start + 180) * Math.PI / 180) * radius;
	
	pathString = pathString + 'L' + Math.round(centerX + deltaX) + ' ' + Math.round(centerY + deltaY);
	
	return pathString;
	
}



function drawDiagram(reverse, circleResolution, paper, valueKey, diagramCenterX, diagramCenterY, radius, size, distance, offset, value1, value2, value3){
	
	var fillValue1 = Array('#dc9204', '#67a642', '#25a8c3');
	var fillValue2 = Array('#e8b138', '#75be4b', '#52bfd5');
	var fillValue3 = Array('#f0c85e', '#90d06c', '#74d0e3');
	
	var myPath;
	
	if (value2 == null){
		myPath = paper.path(drawRingSectorReverse(circleResolution, diagramCenterX, diagramCenterY, radius - (size+distance) * valueKey, size, 0, 360));
		myPath.attr("fill", fillValue1[valueKey]);
		myPath.attr("fill-opacity", "0.2");
		myPath.attr("stroke-width", "1");
		myPath.attr("stroke", "#FFFFFF");
		myPath.attr("stroke-opacity", "0.2");
	}
	
	if (reverse == true){
		myPath = paper.path(drawRingSectorReverse(circleResolution, diagramCenterX, diagramCenterY, radius - (size+distance) * valueKey, size, offset, offset+value1));
	}else{
		myPath = paper.path(drawRingSector(circleResolution, diagramCenterX, diagramCenterY, radius - (size+distance) * valueKey, size, offset, offset+value1));
	}
	myPath.attr("fill", fillValue1[valueKey]);
	myPath.attr("stroke-width", "1");
	myPath.attr("stroke", "#FFFFFF");
	myPath.attr("stroke-opacity", "0.5");
	
	if (value2 != null){
		
		if (value3 == null){
			
	
			if (reverse == true){
				myPath = paper.path(drawRingSectorReverse(circleResolution, diagramCenterX, diagramCenterY, radius - (size+distance) * valueKey, size, value1, 360));
			}else{
				myPath = paper.path(drawRingSector(circleResolution, diagramCenterX, diagramCenterY, radius - (size+distance) * valueKey, size, value1, 360));
			}
			myPath.attr("fill", fillValue2[valueKey]);
			myPath.attr("stroke-width", "1");
			myPath.attr("stroke", "#FFFFFF");
			myPath.attr("stroke-opacity", "0.6");
			
		}else{
			
			if (reverse == true){
				myPath = paper.path(drawRingSectorReverse(circleResolution, diagramCenterX, diagramCenterY, radius - (size+distance) * valueKey, size, value1, value1 + value2));
			}else{
				myPath = paper.path(drawRingSector(circleResolution, diagramCenterX, diagramCenterY, radius - (size+distance) * valueKey, size, value1, value1 + value2));
			}
			myPath.attr("fill", fillValue2[valueKey]);
			myPath.attr("stroke-width", "1");
			myPath.attr("stroke", "#FFFFFF");
			myPath.attr("stroke-opacity", "0.6");
						
			
			if (reverse == true){
				myPath = paper.path(drawRingSectorReverse(circleResolution, diagramCenterX, diagramCenterY, radius - (size+distance) * valueKey, size, value1 + value2, 360));
			}else{
				myPath = paper.path(drawRingSector(circleResolution, diagramCenterX, diagramCenterY, radius - (size+distance) * valueKey, size, value1 + value2, 360));
			}
			myPath.attr("fill", fillValue3[valueKey]);
			myPath.attr("stroke-width", "1");
			myPath.attr("stroke", "#FFFFFF");
			myPath.attr("stroke-opacity", "0.7");
		}
	}
	
}