$( function() {
	
	heroAnimator = {
		
		animateInterval: 4000, /* interval between frame slides in milliseconds */
		animateSpeed: 1000, /* speed of animation */
		tabUpSpeed: 1000, /* speed of tab up */
		tabDownSpeed: 1000, /* speed of tab up */
		
		/* ignore these */
		$element: $('#hero'), /* element to apply code to */
		$panels: $('#hero .panel'), /* popup panels at bottom page */
		animateIntervalObject: null, /* object that the timeout uses */
		mouseInside: null, /* used to track if the mouse is currently inside/outside the hero element */
		upTab: 0, /* stores the current "up" state tab, defaults to the first */
		index: 0, /* pointer for tracking which item we're on, always starts at zero */
		indexMax: 0, /* max number of slides / panels, set in init() */
		imageWidth: 960, /* width of the image in the gallery */
		
		
		init: function() {
			heroAnimator.indexMax = heroAnimator.$element.find('.gallery ul li').length - 1;
			heroAnimator.bindEvents();
			
			//start animation by default
			heroAnimator.startTimer();
		},
		
		bindEvents: function () {
			// bind over on main area
			heroAnimator.$element.hover(
				function() {
					heroAnimator.stopTimer();
					heroAnimator.mouseInside = true;
				},
				function() {
					heroAnimator.startTimer();
					heroAnimator.mouseInside = false;
				}
			)
			
			//bind individual panels
			heroAnimator.$panels.each( function(i) {
				$(this).bind('mouseenter', function() {
					heroAnimator.index = i;
					heroAnimator.animate();
				})
			});
		},
		
		startTimer: function() {
			heroAnimator.animateIntervalObject = setInterval(heroAnimator.updateIndex,heroAnimator.animateInterval);
		},
		
		stopTimer: function() {
			clearInterval(heroAnimator.animateIntervalObject);
		},
		
		updateIndex: function() {
			// check bounding on index and reset to zero if needed (note: I'm only checking max bounding, not min).
			if( heroAnimator.index == heroAnimator.indexMax)
			{
				heroAnimator.index = 0;
			} else {
				heroAnimator.index++;
			}
			heroAnimator.animate();
		},
		
		animate: function (updateindex) {
			position = heroAnimator.index * -heroAnimator.imageWidth;
			
			/* slide panel */
			heroAnimator.$element.find('.gallery ul').animate({marginLeft:position}, {duration:heroAnimator.animateSpeed, queue:false});
			
			heroAnimator.$panels.eq(heroAnimator.upTab).animate({bottom:'-64px'}, {duration:heroAnimator.tabDownSpeed, queue:false});
			heroAnimator.$panels.eq(heroAnimator.index).animate({bottom:'0px'}, {duration:heroAnimator.tabUpSpeed, queue:false});
			heroAnimator.upTab = heroAnimator.index;
		}
		
	};
	
	heroAnimator.init();
	
})