ANIMATING=false;

$( function() {
	
	var $box = $('#welcome');
	var $panes = $box.find('.welcome-pane');
	var $dots = $box.find('.welcome-dot');
	var paneIndex = 0;
	//var animating = false;
	var $slidebox = $box.find('.welcome-pane-slidebox');
	var paneWidth = $panes.eq(0).width();
	var timeoutId = 0;
	

	var getNextPaneIndex = function(reverse) {

		var idx = paneIndex+(reverse ? -1 : 1);
		if (idx >= $panes.size()) {
			idx = 0;
		}
		else if (idx < 0) {
			idx = $panes.size()-1;
		}
		return idx;
	}
	
	var updateDots = function(index) {
		$dots.each( function(idx, el) {
			if (index == idx) {
				$(el).addClass('welcome-dot-active');
			} else {
				$(el).removeClass('welcome-dot-active');
			}
		})
	}
	
	var changePane = function(evt) {
		
		if (ANIMATING) {
			return;
		}
		stopAutoPan();
		ANIMATING = true;
		
		var previous = evt ? ($(evt.target).closest('.previous').size() > 0) : false;

		var nextPaneIndex = getNextPaneIndex(previous);
		
		var left = parseInt($slidebox.css('left'));
		
		var endLeft = previous ? left+paneWidth : left-paneWidth;
		
		// position next pane
		
		$panes.eq(nextPaneIndex).css('left', (previous ? -paneWidth : paneWidth) + 'px').show();

		$slidebox.animate({
			left: endLeft + 'px'
		}, 1000, 'easeOutExpo', function() {
			updateDots(nextPaneIndex);
			$panes.eq(paneIndex).hide();
			$panes.eq(nextPaneIndex).css('left','0px');
			$slidebox.css('left','0px');
			paneIndex = nextPaneIndex;
			ANIMATING = false;
			if (!evt) {
				startNextAutoPan();
			}
		});
	}
	
	var startNextAutoPan = function() {
		if (!timeoutId) {
			timeoutId = setTimeout(changePane, 5000);
		}
	}
	var stopAutoPan = function() {
		clearTimeout(timeoutId);
		timeoutId = 0;
	}
	
	$box.find('.previous').click(changePane).bind('mouseover', stopAutoPan).bind('mouseout', startNextAutoPan);
	$box.find('.next').click(changePane).bind('mouseover', stopAutoPan).bind('mouseout', startNextAutoPan);
	$box.find('a').bind('mouseover', stopAutoPan).bind('mouseout', startNextAutoPan);
	
	startNextAutoPan();
  
});


$( function() {
	var logos = ['cisco.png', 
		'fujitsu.png', 
		'motorola.png', 
	'adva.png', 
	'arris.png', 
	'blonder_tongue.png', 
	'clearfield.png', 
	'flextronics.png',
	'jdsu.png',
	'goldfield_telecom.png', 
	'multicom.png', 
	'zhone.png'];
	
	var $box = $('#customer-logo-cycle');
	var $panes = $box.find('.logo-pane');
	var logoIndex = 0;
	var paneIndex = 0;
	var animating = false;
	
	var getNextPaneIndex = function() {
		return paneIndex==0 ? 1 : 0;
	}
	var getNextLogoIndex = function(reverse) {

		var idx = logoIndex+(reverse ? -1 : 1);
		if (idx >= logos.length) {
			idx = 0;
		}
		else if (idx < 0) {
			idx = logos.length-1;
		}
		return idx;
	}
	
	
	var changeLogo = function(evt) {
		if (animating) {
			return;
		}
		animating = true;
		var previous = evt ? ($(evt.target).closest('.previous').size() > 0) : false;

		var nextPaneIndex = getNextPaneIndex();
		var nextLogoIndex = getNextLogoIndex(previous);
		
		$panes.eq(nextPaneIndex).css('background-image', "url('" + STATIC_BASE + '/img/customers/' + logos[nextLogoIndex] + "')");
		$panes.eq(paneIndex).fadeOut(500, function() {
			$panes.eq(nextPaneIndex).fadeIn(500, function() {
				logoIndex = nextLogoIndex;
				paneIndex = nextPaneIndex;
				animating = false;
			});
		});
		
	}
	$box.find('.previous').click(changeLogo);
	$box.find('.next').click(changeLogo);
	

	
	$panes.eq(0).css('background-image', "url('" + STATIC_BASE + '/img/customers/' + logos[0] + "')");
	$panes.eq(1).fadeOut(1);

	var hovering = false;
	$box.bind('mouseover', function() {
		hovering = true;
	});
	$box.bind('mouseout', function() {
		hovering = false;
	});
  setInterval(function() {
  	if (!hovering && !ANIMATING) {
  		changeLogo();
  	}
  }, 3000);
});