$(function() {
    if (document.getElementById('ht-scroller-list')) {
        fnInitializeList();
    }
});

function fnInitializeList() {
	var num_children = $("#ht-scroller-list").children().length;
	if(num_children > 1) {
	   	$("#ht-scroller-left").addClass('off');
		$("#ht-scroller-left").click(
			function(event){
				fnScrollList(false);
			}
		);
		$("#ht-scroller-right").click(
			function(event){
				fnScrollList(true);
			}
		);
	} else {
		$("#ht-scroller-left").css("display", "none");
		$("#ht-scroller-right").css("display", "none");
	}
    fnScrollList(false);
}

function fnScrollList(flag_forward) {
	var x_dest;
	var x_marginleft;
	var num_shift = 5;
	var width_item = 120;
	var width_window = $("#ht-scroller-window").width();
	var num_children = $("#ht-scroller-list").children().length;
	var width_list = (num_children * width_item);
	x_marginleft = Number($("#ht-scroller-list").css("margin-left").replace('px',''));
	if(flag_forward) {
  	   	$("#ht-scroller-left").removeClass('off'); 
		if (x_marginleft - (width_item * num_shift) > (width_window - width_list)) {
			x_dest = x_marginleft - (width_item * num_shift);
		} else {
			x_dest = (width_window - width_list);
			$("#ht-scroller-right").addClass('off');
		}
	} else {
   		$("#ht-scroller-right").removeClass('off'); 
		if (x_marginleft + (width_item * num_shift) < 0) {
			x_dest = x_marginleft + (width_item * num_shift);
		} else {
			x_dest = 0;
			$("#ht-scroller-left").addClass('off');
		}
	}
	$("#ht-scroller-list").animate({ marginLeft: x_dest + "px" }, 500 );
}