var active = 0;

function LogoSlider(elementSelector) {
	var logoContainer = $(elementSelector);
	var me = this;
	var logoLength = 0;
	this.logoStartInterval = '';
	
	this.init = function() {
		// hidden Container entfernen, da hier nicht benoetigt
		logoContainer.find('.hidden').remove();
		// ersetzen der Logolinks mit der Brandsseite
		logoContainer.find('.logo').find('a').attr('href', 'index.php?id=19')
		
		logoLength = logoContainer.find('.logo').length;
		
		logoContainer.find('.logo').css({
			position: 'absolute',
			top: 0
		});
		
		if (!logoLength < 4) {
			// Pfeile bzw. Kontrollelemente hinzufuegen
			logoContainer.prepend('<div class="control-left"><a href="index.php?id=19"><span>left</span></a></div>');
			logoContainer.append('<div class="control-right"><a href="index.php?id=19"><span>right</span></a></div>');
			
			
			// Logos neu sortieren
			for (var i = 0; i < 3; i++) {
				logoContainer.find('.logo:last').prependTo(logoContainer.find('#logoSliderContent'));
			}
			// erstes und letztes Logo muessen display:none haben
			logoContainer.find('.logo:first').hide();
			logoContainer.find('.logo:last').hide();
			
			// leftpos festlegen
			$('.logo').find('img').css('margin','0');
			var leftPos = ($(logoContainer.find('.logo')[0]).find('img').outerWidth() + $(logoContainer.find('.logo')[1]).find('img').outerWidth() + 140) * -1;
			
			logoContainer.find('.logo').each(function(){
				$(this).css({
					'left': leftPos,
					'overflow': 'hidden',
					'width' : $(this).find('img').outerWidth()
				});
				leftPos += $(this).outerWidth();
			});
			
			logoContainer.find('.control-left a').click(function(e){
				e.preventDefault();
				clearInterval(me.logoStartInterval);
				me.slideLeft();
			});
			logoContainer.find('.control-right a').click(function(e){
				e.preventDefault();
				clearInterval(me.logoStartInterval);
				me.slideRight();
			});
			
			// start the loop
			this.logoStartInterval = setInterval("slideRight()", 100); //3000
		} else {
			// Logos positionieren
			var leftPos = 0;
			logoContainer.find('.logo').each(function(){
				$(this).css('left', leftPos);
				leftPos += $(this).outerWidth();
			});
		}
	};
	
	this.init();
	
	this.slideLeft = function() {
		if (active == 0){
			active = 1;
			var leftPosAddition = logoContainer.find('.logo:nth-child(2)').outerWidth();
			logoContainer.find('.logo:first').show().ready(function(){
				logoContainer.find('.logo').each(function(index, el){
					$(this).animate({
						left: leftPosAddition + $(this).position().left
					}, 1000);
				});
				var callback = function(){
					var leftPos = ($(logoContainer.find('.logo')[0]).outerWidth() + logoContainer.find('.logo:last').outerWidth()) * -1;
					
					logoContainer.find('.logo:last').animate({
						left: leftPos + 'px'
					}, 1, function(){
						$(this).prependTo(logoContainer.find('#logoSliderContent'));
						// erstes und letztes Logo muessen display:none haben
						logoContainer.find('.logo:first').hide();
						logoContainer.find('.logo:last').hide();
						active = 0;
					});
				};
				return callback();
			});
		}
	};
	
	this.slideRight = function() {
		// ausgelagert, damit setInterval einfacher darauf zugreifen kann
		slideRight();
	};
}

function slideRight() {
	if (active == 0){
		active = 1;
		var logoContainer = $('#logoSlider');
		var leftPosAddition = logoContainer.find('.logo:nth-child(3)').outerWidth();
		logoContainer.find('.logo:last').show().ready(function(){
			logoContainer.find('.logo').each(function(index, el){
				if (index == 4) {
					$(this).animate({
						left: 0
					}, 3000);
				}
				else {
					$(this).animate({
						left: $(this).position().left - leftPosAddition
					}, 3000);
				}
			});
			var callback = function(){
				var leftPos = (logoContainer.find('.logo:last').position().left - leftPosAddition) + logoContainer.find('.logo:last').outerWidth();
				logoContainer.find('.logo:first').animate({
					left: leftPos + 'px'
				}, 1, function(){
					$(this).appendTo(logoContainer.find('#logoSliderContent'));
					// erstes und letztes Logo muessen display:none haben
					logoContainer.find('.logo:first').hide();
					logoContainer.find('.logo:last').hide();
					active = 0;
				});
			};
			return callback();
		});
	}
}


$(function(){
	var myLogoSlider = new LogoSlider('#logoSlider');
});