var setClickScroll;

$(document).ready(function(){

var i;
var k;
var selectBoxNumber = 1;
var pageSize;
var contentsSize;
var emptySize;
var contentWidth = $(".h2_category_top").outerWidth();


setClickScroll = function(size) {
	var centerWidth;
	contentsSize = size;
	
	centerWidth = contentWidth - ($("#recomend_left_button").innerWidth() * 2);
		
	$("#click_scroll_navi").css("width",  $(".h2_category_top").width() + "px")
	$("#click_scroll").css("width", centerWidth + "px") ;
	$("#recommend_navi_wrap").css("width", (contentWidth - 3) + "px") ;
	$("#recommend_navi_wrap").css("height", "20px") ;

	pageSize = Math.ceil($("#click_scroll > ul  li").length / contentsSize);
	emptySize = (pageSize * contentsSize) - $("#click_scroll > ul  li").length;

	if (pageSize - 1) {
		// 数が半端な場合は空のliを追加する
		for ( k = 0 ; k < emptySize ; k++) {
			$("#click_scroll > ul  li:last").after("<li class=\"no_border\" style=\"height:10px;\"></li>");
		}

		// 選択ボックスを後で参照する為にname属性をセットする
		for (i = 0 ; i < $("#click_scroll > ul > li").length ; i++ ) {
			$("#click_scroll > ul  li:eq(" + i +")").attr("name",i + 1);
			$("#click_scroll > ul  li:eq(" + i +")").css("width", (centerWidth / contentsSize) + "px" );
		}
		
	  setPageNavi();


		$("#click_scroll").jCarouselLite({
			btnNext: ".next",
	  	btnPrev: ".prev",
			visible:4,
			scroll: contentsSize,
			speed: 600,
	  	afterEnd: function(a) {
				selectBoxNumber = Math.ceil((($(a[0]).attr("name")) - 1) / contentsSize) + 1;
				updatePageNavi();
			}
		});

	} else {
	  $(".next").css("visibility","hidden");
	  $(".prev").css("visibility","hidden");
		$("#recomend_right_button").remove();
		$("#recomend_left_button").remove();
		$("#click_scroll").css("width",contentWidth + "px");
		$("#click_scroll > ul > li").css("width", (contentWidth / contentsSize) + "px");
	}

}


// ページナビゲーションをセットする
function setPageNavi() {
	var j;
	$("#recommend_navi > li").remove();
	for ( j = 0 ; j < pageSize ; j++ ) {
		$("#recommend_navi").append('<li style=\"list-style:none;float:left;width:12px;\"><img src=\"' + imagePath + 'ajax/bg_coda-tab_no.gif\"></li>');
	}
	$("#recommend_navi").css("width", (parseInt($("#recommend_navi > li:eq(0)").outerWidth()) * pageSize) +  "px");
	$("#recommend_navi > li:eq(" + (selectBoxNumber - 1) + ") > img").attr("src",imagePath + "ajax/bg_coda-tab_no_on.gif");
	$("#recommend_navi_wrap").css("margin-bottom", "5px");	
}

// ページナビゲーションを更新する
function updatePageNavi() {
	var j;
 	for ( j = 0 ; j < pageSize ; j++ ) {
		$("#recommend_navi > li:eq(" + j + ") > img").attr("src",imagePath + "ajax/bg_coda-tab_no.gif");	
	}
	$("#recommend_navi > li:eq(" + (selectBoxNumber - 1) + ") > img").attr("src",imagePath + "ajax/bg_coda-tab_no_on.gif");
}

setClickScroll(4);

});