jQuery(document).ready(function() {

	jQuery('.carousel_wrap').each(function() {	
		var firstLi = jQuery(this).children('ul').children('li')[0];
		jQuery(firstLi).addClass('act');
		var width = jQuery(firstLi).css('width');

		var ul = jQuery(this).children('ul')[0];
		jQuery(ul).css('width', jQuery(this).children('ul').children('li').size() * parseInt(width.substr(0, (width.length -2))) + 'px');

		var child = jQuery('ul.switcher').children('li')[0];
		jQuery(child).addClass('act');

		setTimeout(timelyMovement, 7000);
	});

	jQuery('.carousel_wrap').bind('mouseover', function() { 
		this.hovering = true; });
	jQuery('.carousel_wrap').bind('mouseout', function() { 
		this.hovering = false; });

	jQuery('.switcher li').bind('mouseover', function() {
			var carousel = jQuery('div.carousel_wrap');
			carousel.get(0).hovering = true;
	});

	jQuery('.switcher li').bind('mouseout', function() {
			var carousel = jQuery('div.carousel_wrap');
			carousel.get(0).hovering = false;
	});

	function timelyMovement() {
		jQuery('.carousel_wrap').each(function() {
			navigate(this, 'auto');
		});

		setTimeout(timelyMovement, 7000);
	}

	function navigate(sourceObject, direction) {
		var carousel = jQuery(sourceObject).closest('div.carousel_wrap');
		var active = -1;
		
		if (direction == 'auto' && carousel.get(0).hovering == true) return;
	
		jQuery(carousel).children('ul').each(function() {
		
			for(var i = 0; i < this.childNodes.length; i++) {
				if (jQuery(this.childNodes[i]).hasClass('act')) {
					active = i;
					break;
				}
			}

			var list = jQuery(carousel).children('ul')[0];
			var firstLi = jQuery(list).children('li')[0];
			var itemWidth = jQuery(firstLi).css('width');
			itemWidth = parseInt(itemWidth.substr(0, (itemWidth.length -2)));
			
			if (direction == 'auto') {
				if (this.lastKnownDirection == null) this.lastKnownDirection = 'forward';
				if((active+1) == jQuery(this).children().size()) {
					direction = 'backwards';
				} else if (active == 0) {
					direction = 'forward';
			   	} else {
					direction = this.lastKnownDirection;
				}
				if (this.lastKnownDirection != direction) this.lastKnownDirection = direction;
			}


			switch(direction) {
				case 'forward':
					if((active+1) != jQuery(this).children().size()) {

						jQuery('.act', this).removeClass('act').next('li').addClass('act');

						jQuery(list).animate({
							left: '-=' + itemWidth
						},600);

					}

					jQuery('ul.switcher').children().each(function() {
						jQuery(this).removeClass('act');
					});

					var child = jQuery('ul.switcher').children('li')[(active + 1)];
					jQuery(child).addClass('act');

					break;
				case 'backwards':
					if(active >= 1) {
						jQuery('.act', this).removeClass('act').prev('li').addClass('act');

						jQuery(list).animate({
							left: '+=' + itemWidth
						},600);
					}
				
					jQuery('ul.switcher').children().each(function() {
						jQuery(this).removeClass('act');
					});

					var child = jQuery('ul.switcher').children('li')[(active - 1)];
					jQuery(child).addClass('act');

					break;
			}

			return;
		});
	}

	jQuery('.switcher li').bind('click', function() {
		var active = 0;
		jQuery('div.carousel_wrap').children('ul').each(function() {
		    for(var i = 0; i < this.childNodes.length; i++) {
    		    if (jQuery(this.childNodes[i]).hasClass('act')) {
				    active = i;
					break;
				}
			}

		});

		var index = jQuery(this).index();

		// Active is where we are, index is what we clicked on
		if(index == active) {
			// do nothing :)
		} else if(index > active) {
			// When index is bigger than active, we need to go backwards
			var f = index - active;
			for(i = 0; i < f; i++) {
				 navigate(jQuery('div.carousel_wrap'), 'forward');
			}
		} else if(index < active) {
			// When index is smaller than active, we nede to go forward
			var f = active - index;
			for(i = 0; i < f; i++) {
				navigate(jQuery('div.carousel_wrap'), 'backwards');
			}
		}

	});

});