// No conflict jQuery (to avoid interference with silverstripe protoype)
$j = jQuery.noConflict();
// front scroll panes
$currpane = 0;

$j(document).ready(function(){
	
	/* fitted
	---------------------------------------*/
	$j('.puff').fitted({
		'status' : true,
		'title'  : false
	});
	
	/* scroll box on front page
	---------------------------------------*/
	// hover image switch for scrollpane buttons
	$j('#scrollerframe #left img,#scrollerframe #right img,').mouseover(function() {
		this.src = this.src.replace('.gif','-rollover.gif');
	}).mouseout(function() {
		this.src = this.src.replace('-rollover','');
	});

	// position arrows on vertical center of the content box
	$j('#scrollerframe #left,#scrollerframe #right,').css({
		'top': Math.round( ($j('#scrollercontent').height()/2) - ($j('#scrollercontent #left img').height()/2) - ($j('#tabs').height()/3) - 50 )+'px'
	});

	// scroll pane by cliking the arrow images
	$j('#scrollerframe #left img').click(function() {
		scrollByArrow(-1);
	});
	$j('#scrollerframe #right img').click(function() {
		scrollByArrow(1);
	});
	
	// scroll pane by clicking the tabs
	$tabs = $j('#tabs li a');
	for( $i=0; $i<$tabs.length; $i++) {
		$j($tabs[$i]).attr('href','javascript:void(scrollByTab(\''+$j($tabs[$i]).attr('href').split('#').pop()+'\'));');
	}

});

/**
 * Scroll pane when clicking an arrow.
 *
 * @param int direction (-1 = left, 1 = right)
 */
this.scrollByArrow = function($direction) {
	$panes = $j("#scrollerframe .sectionpane");
	if( $panes.length > 0 ) {
		$currpane += $direction;
		$currpane = $currpane < 0 ? $panes.length-1 : ( $currpane > $panes.length-1 ? 0 : $currpane );
		$j('#scroller').stop();
		$j('#scroller').scrollTo( $j($panes[$currpane]), 400 );
	}
	setActiveTab();
}

/**
 * Scroll pane when clicking a tab.
 *
 * @param int direction (-1 = left, 1 = right)
 */
this.scrollByTab = function($id) {
	$panes = $j("#scrollerframe .sectionpane");
	$currpane = 0;
	for( $i=0; $i<$panes.length; $i++ )
	{
		$currpane = $i;
		if( $j($panes[$currpane]).attr('id') == $id ) {
			break;
		}
	}
	$j('#scroller').stop();
	$j('#scroller').scrollTo( $j($panes[$currpane]), 400 );
	setActiveTab();
}

this.setActiveTab = function() {
	// mark tab as active
	$tabs = $j('#tabs li');
	for( $i=0; $i<$tabs.length; $i++) {
		if($i==$currpane) {
			$j($tabs[$i]).addClass('active');
		} else {
			$j($tabs[$i]).removeClass('active');
		}
	}
}