// require jQuery 1.4.2 //
jQuery.noConflict(); // using other javascript "$"
jQuery(function($) {
	var $areas = $('div.tab-area');

	$areas.each(function() {
		// Config
		var starting = 1500, interval = 3500, duration = 500;

		// Global values
		var timer = null, index = null;

		// Set objects
		var $area = $(this);
		var $tabs = $area.find('ul.tab-selector > li');
		var $sections = $area.find('div.tab-content > div.tab-content-pane').hide();

		$tabs.each(function(i, v) {
			var $img = $(this).find('img').css({'cursor': 'pointer'});
			var img_act = new Image;
			var matches = $img.attr('src').match(/^(.+?)(?:-on|-act)?(\.(gif|jpg|jpeg|xbm|png))$/);
			img_act.src = ( matches ) ? matches[1] + "-act" + matches[2] : $img.attr('src');

			// Create $act
			var $act = $img.clone().attr({'src': img_act.src}).css({'opacity': 0}).insertAfter($img);

			// Show active tab
			$(this).bind('showsection', function(e, data) {
				$act.css({'opacity': ( ( data == i ) ? 1 : 0 ) });
			});

			// Hover event
			$(this).hover(
				function() { clearInterval(timer); showSection(i); },
				function() { clearInterval(timer); setTimer(); }
			);
		});

		// Hover event
		$sections.hover(
			function() { clearInterval(timer); },
			function() { clearInterval(timer); setTimer(); }
		);

		function showSection(i) {
			if( i >= $sections.length ) i = 0;
			if( i == index ) return;
			$tabs.trigger('showsection', i);
			$sections.stop(true, true).fadeOut(duration);
			$sections.eq(i).fadeIn(duration);
			index = i;
		}

		function setTimer() {
			timer = setInterval(function() {
				showSection(index + 1);
			}, interval + duration);
		}

		$area.bind('start', function(e) {
			// Fire!
			if( timer == null ) { timer = setTimeout(function() { showSection(index + 1); setTimer(); }, starting); }
			// Never again...
			$area.unbind('start');
		});

		showSection(0);
	});

	$(window).bind('scroll', function(e) {
		var timer;
		timer = setTimeout(function() {
			clearTimeout(timer);
			var line = $(window).scrollTop() + $(window).height();
			$areas.each(function() {
				var $area = $(this);
				if( line - $area.height() > $area.offset().top ) $area.trigger('start');
			});
		}, 10);
	}).trigger('scroll');
});