// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {

	// initialize scrollable
	$(".scrollable").scrollable();
	
	////// cycling headlines
	
	function slideSwitch($next) {
		var $active = $('#slideshow DIV.active');
		if ($active.length == 0) $active = $('#slideshow DIV:last');

		var $next = $active.next().length ? $active.next()
		: $('#slideshow DIV:first');
		
		$active.removeClass('active');
		$next.css({opacity: 0.0})
			.addClass('active')
			.animate({opacity: 1.0}, 1000);
		
		$("#listing-list img[src*='images/box-fill.gif']").first().attr("src", "images/box.gif");		
		$("#listing-list img:eq("+$next.index()+")").attr("src", "images/box-fill.gif");
	}
	
	function slideSwitchDirect($idx) {
		var $active = $('#slideshow DIV.active');
		if ($active.length == 0) $active = $('#slideshow DIV:last');
	
		var $next = $('#slideshow div:eq('+$idx+')');

		$active.removeClass('active');
		$next.css({opacity: 0.0})
			.addClass('active')
			.animate({opacity: 1.0}, 1000);
		
		stopCycle();
		$('#button-pause').hide();
		$('#button-play').show();
		
		$("#listing-list img[src*='images/box-fill.gif']").first().attr("src", "images/box.gif");		
		$("#listing-list img:eq("+$next.index()+")").attr("src", "images/box-fill.gif");
	}
	
	function startCycle() {
		$cycle = setInterval(slideSwitch, 5000 );
	}
	
	function stopCycle() {
		clearInterval($cycle);
	}

	$('#button-play').click(function () {
		slideSwitch();
		startCycle();
		$('#button-play').hide();
		$('#button-pause').show();
	});
	
	$('#button-pause').click(function () {
		stopCycle();
		$('#button-pause').hide();
		$('#button-play').show();
	});
	
	$("#listing-list img").click(function () {
		slideSwitchDirect($(this).index());
	});
	
	startCycle();
	
	///////// cycling headlines 2
	
	function slideSwitch2($next) {
		var $active = $('#slideshow2 DIV.active');
		if ($active.length == 0) $active = $('#slideshow2 DIV:last');

		var $next = $active.next().length ? $active.next()
		: $('#slideshow2 DIV:first');
		
		$active.removeClass('active');
		$next.css({opacity: 0.0})
			.addClass('active')
			.animate({opacity: 1.0}, 1000);
		
		$("#listing-list2 img[src*='images/box-fill.gif']").first().attr("src", "images/box.gif");		
		$("#listing-list2 img:eq("+$next.index()+")").attr("src", "images/box-fill.gif");
	}
	
	function slideSwitchDirect2($idx) {
		var $active = $('#slideshow2 DIV.active');
		if ($active.length == 0) $active = $('#slideshow2 DIV:last');
	
		var $next = $('#slideshow2 div:eq('+$idx+')');

		$active.removeClass('active');
		$next.css({opacity: 0.0})
			.addClass('active')
			.animate({opacity: 1.0}, 1000);
		
		stopCycle2();
		$('#button-pause2').hide();
		$('#button-play2').show();
		
		$("#listing-list2 img[src*='images/box-fill.gif']").first().attr("src", "images/box.gif");		
		$("#listing-list2 img:eq("+$next.index()+")").attr("src", "images/box-fill.gif");
	}
	
	function startCycle2() {
		$cycle2 = setInterval(slideSwitch2, 5000 );
	}
	
	function stopCycle2() {
		clearInterval($cycle2);
	}

	$('#button-play2').click(function () {
		slideSwitch2();
		startCycle2();
		$('#button-play2').hide();
		$('#button-pause2').show();
	});
	
	$('#button-pause2').click(function () {
		stopCycle2();
		$('#button-pause2').hide();
		$('#button-play2').show();
	});
	
	$("#listing-list2 img").click(function () {
		slideSwitchDirect2($(this).index());
	});
	
	startCycle2();

});