var width = 225;
var rows = 2;
var viewable = 3;

var lastTarget = 0;

var squares_per_row;
var total_width;
var one_arrow_width;
var scroller;
var intervalid = -1;
var block_id;
var speed = 15; // lower is faster

function scroll_init(id, total) {
    block_id = id;
	if (total > rows * viewable) {
		squares_per_row = Math.ceil(total / rows);
	} else {
		squares_per_row = viewable;
	}
	total_width = squares_per_row * (width / viewable);
	document.getElementById('blocks_'+id).style.width = total_width + 'px';
	one_arrow_width = width;	
	scroller = new SmoothMovement(0, 0);					
	check_arrows();
	if (document.getElementById('loading')) {
	    document.getElementById('loading').className = 'hidden';
	}
}

function scroll_left() {
    if (intervalid != -1){
        if (!scroller.hasStopped()) {
            return;
        }	    
    }	
    window.clearInterval(intervalid);	    
    lastTarget += one_arrow_width;
    scroller.changeTarget(lastTarget);
    intervalid = window.setInterval(update_scroll, speed);
    check_arrows();	
}

function update_scroll() {
	document.getElementById('blocks_'+block_id).style.left = scroller.updatePosition() + 'px';
}

function scroll_right() {
    if (intervalid != -1){
        if (!scroller.hasStopped()) {
            return;
        }	    
    }	
    window.clearInterval(intervalid);
	lastTarget -= one_arrow_width;
    scroller.changeTarget(lastTarget);
    intervalid = window.setInterval(update_scroll, speed);
	check_arrows();
}
		
function check_arrows() {
	if (lastTarget == 0) {
		document.getElementById('leftArrow_'+block_id).className = 'hidden_arrow';
	} else {
		document.getElementById('leftArrow_'+block_id).className = 'left_arrow';
	}
	
	if (lastTarget > 0 - (total_width - width)) {
		document.getElementById('rightArrow_'+block_id).className = 'right_arrow';
	} else {
		document.getElementById('rightArrow_'+block_id).className = 'hidden_arrow';
	}	
}