var autoTimer;
var interval = 5000;
var lid = 1; 
var nid;
var mid = n; //id of thumb to move
var w = 190;
var cur=0;

autoTimer = setInterval("change_div()",interval);

function change_flipper_class(oldid, newid) {
	$('flipper_button'+oldid).removeClassName('flipper_button_sel');
	$('flipper_button'+oldid).addClassName('flipper_button');
	$('flipper_button'+newid).removeClassName('flipper_button');
	$('flipper_button'+newid).addClassName('flipper_button_sel');
	Effect.Fade('flipper_image'+oldid, { duration: 1.0 });
	Effect.Appear('flipper_image'+newid, { duration: 1.0 });	
}

function change_div() {
	nid = parseFloat(lid)+1;
	if(nid > n) {
		nid = 1;
	}
	mid = lid;
	auto_scroll_right('1');
	change_flipper_class(lid, nid);
	lid = nid;
}

function show_flipper(fid) {
	clearInterval(autoTimer);
	change_flipper_class(lid, fid);
	lid = parseFloat(fid);
	
	var arr =  $('flipper_scroller').childElements();
    var j = 0;
	var to_be_moved = new Array();
	arr.each(function(node){
    	if(node.id == 'flipper_button'+fid) {
		   throw $break;
		} else {
			to_be_moved[j] = node.id;
			j++;
		}
    });
	
	cur-=w*j;
	
	new Effect.Morph('flipper_scroller', { style: {	left: cur+'px' }, duration: 0.4, 
			afterFinish: function() { 
				to_be_moved.each(function(node){
					var movediv = $(node);
					$(node).remove();
					$('flipper_scroller').setStyle({ left: '0px' });
					$('flipper_scroller').insert ({ 'bottom' : movediv }); 	
				});
				cur = 0;
			 }	});
	
	unpause_flipper();
}

function scroll_left() {
	move_thumbs_left(mid);
	cur+=w;
	new Effect.Morph('flipper_scroller', { style: { left: cur+'px' }, duration: 0.4	});		
	
	var new_id = lid-1;
	if(new_id < 1) {
		new_id = n;	
	}
	change_flipper_class(lid, new_id);
	clearInterval(autoTimer);
	
	lid = new_id;
	unpause_flipper();
}

function scroll_right(num_pos) {
	cur-=w*num_pos;
	mid = lid;
	new Effect.Morph('flipper_scroller', { style: {	left: cur+'px' }, duration: 0.4, afterFinish: function() { move_thumbs_right(mid); }	});	
	
	var new_id = lid+1;
	if(new_id > n) {
		new_id = 1;
	}
	change_flipper_class(lid, new_id);
	clearInterval(autoTimer);
	lid = new_id;
	unpause_flipper();
}

function auto_scroll_right(num_pos) {
	cur-=w*num_pos;
	new Effect.Morph('flipper_scroller', { style: {	left: cur+'px' }, duration: 0.4, afterFinish: function() { move_thumbs_right(mid); } });	
	
}

function move_thumbs_right(id) {
	//alert(id);
	cur = 0;
	var movediv = $('flipper_button'+id);
	$('flipper_button'+id).remove();
	$('flipper_scroller').setStyle({ left: '0px' });
	$('flipper_scroller').insert ({ 'bottom' : movediv }); 	
}

function move_thumbs_left(id) {

	cur = -190;
	var movediv = $('flipper_button'+id);
	$('flipper_button'+id).remove();
	$('flipper_scroller').setStyle({ left: '-190px' });
	$('flipper_scroller').insert ({ 'top' : movediv });
	mid = id-1;
	if(mid < 1) {
		mid = n;
	}
}

function pause_flipper() {
	clearInterval(autoTimer);
}

function unpause_flipper() {
	autoTimer = setInterval("change_div()",interval);
}