var current_goal = null;
var preview_id = null;
var the_type = "metric";

function activate (now_over, box_type) {
	if (preview_id != null) {
		$(preview_id).css('background-color', '#dfdfdf');
		$(preview_id).css('border', 'solid 1px #dfdfdf');
		$(preview_id).css('border-left', 'none');
	}
	preview_id = "#li" + now_over;
	$(preview_id).css('background-color', '#ffffff');
	$(preview_id).css('border', 'solid 1px #a2a2a2');
	$(preview_id).css('border-left', 'none');
	if (now_over == 1) {
		$(preview_id).css('border-top-color', '#ffffff');
	}

	var coords = new Array(0);
	for (counterV = 1; counterV <= 5; counterV = counterV+1){
		//coords[counterV] = 725 * (counterV-1);
		coords[counterV] = 625 * (counterV-1);
	}
	
	if ($.browser.msie) { var pad = 5; } else { var pad = 0; } // pad = hack cus IE sucks
	if (current_goal != now_over) {
		var the_box = '#ref_display_' + box_type;
		$(the_box).stop(); 
		//$(the_box).animate( {scrollTop: coords[now_over] }, 400);
		$(the_box).animate( {scrollLeft: coords[now_over] }, 400);
		current_goal = now_over;
	} 
	//change_preview_image(now_over);
}


$(document).ready(function() {
	$('#example > ul').tabs();
	
	$("#li1").hover(function(){
			activate(1,the_type);
		}, function(){});
	$("#li2").hover(function(){
			activate(2,the_type);
		}, function(){});
	$("#li3").hover(function(){
			activate(3,the_type);
		}, function(){});
	$("#li4").hover(function(){
			activate(4,the_type);
		}, function(){});
	activate(1);
	
	$("#ref_guide_cat_metric").click(function(){
		$("#ref_guide_cat_metric").css('background-color', '#c2c2c2');
		$("#ref_guide_cat_v-twin").css('background-color', '#dfdfdf');
		$("#ref_display_v-twin").css('display', 'none');
		$("#ref_display_metric").css('display', 'block');
		$("#li3").css('display', 'block');
		activate(1,"metric");
		the_type = "metric";
		
	});
	$("#ref_guide_cat_v-twin").click(function(){
		$("#ref_guide_cat_v-twin").css('background-color', '#c2c2c2');
		$("#ref_guide_cat_metric").css('background-color', '#dfdfdf');
		$("#ref_display_metric").css('display', 'none');
		$("#ref_display_v-twin").css('display', 'block');
		$("#li3").css('display', 'none');
		activate(1,"v-twin");
		the_type = "v-twin";
	});
});