jQuery.noConflict();
$j = jQuery;

$j(document).ready(function(){
	overallWidth = 0;
	$j('.csc-frame-frame1 .csc-textpic-imagerow').each(function (){
 		//console.log( $j(this).width() );
 		overallWidth += $j(this).width() + 5;
 	});
 	//console.log( overallWidth );
 	$j('.csc-frame-frame1 .csc-textpic-imagewrap').css('width',overallWidth+'px');
 	$j('.csc-frame-frame1').append('<div><div id="clickmeleft">links</div><div id="clickmeright">rechts</div></div>');
 	
	
	$j('#clickmeleft').click(function() {
		animateLeft();
	});
	$j('#clickmeright').click(function() {
		animateRight();
	});
	
 	
});
function animateRight(){
	myMargin = $j('.csc-frame-frame1 .csc-textpic-imagewrap').css('marginLeft').replace("px", "") - 800;
	myOverallWidth = overallWidth * (-1);
	if( myMargin > myOverallWidth ){
		$j('.csc-frame-frame1 .csc-textpic-imagewrap').animate({
			marginLeft: '-=800'
		},1000,'swing',function() {
			// Animation complete.
		});
	}
}
function animateLeft(){
	myMargin = $j('.csc-frame-frame1 .csc-textpic-imagewrap').css('marginLeft').replace("px", "") + 800;
	myOverallWidth = overallWidth * (-1);
	if( myMargin < 0 ){
		$j('.csc-frame-frame1 .csc-textpic-imagewrap').animate({
			marginLeft: '+=800'
		},1000,'swing',function() {
			// Animation complete.
		});
	}
}