/*
 * config area
 */
stop_time = 3000;
move_time = 500;
list = new Array();
move_item_volume = 5;

//上と下の紐付け(一番左を0として連番でそれぞれに振り分ける）
step_1_list = new Array(0,1,2,3,4);
step_2_list = new Array(5,6,7,8,9);
step_3_list = new Array(10,11,12,13,14);

//ボタンを押した時それぞれどれを左にするか
btn1_target = 0
btn2_target = 5
btn3_target = 10

//boxの左右マージン
list_margin_left  = 20;
list_margin_right = 20;

//画像の間隔
image_span_width = 4;

show_volume = 5;

/*
 * end config
 */

box   = new Object();
left  = new Object();
right = new Object();
btn1  = new Object();
btn2  = new Object();
btn3  = new Object();

current_pos = 0;
pos_limit = 0;

ie8fix = 0;

$(document).ready(function(){
	ie8fix = ( $.browser.msie && $.browser.version < 9 && typeof(document.documentMode)!='undefined' ) ? 1 : 0;
	box   = $('ul#pickup_list');
	left  = $('p#pickup_left_arrow a');
	right = $('p#pickup_right_arrow a');
	btn1  = $('li#pickup_step_1 a');
	btn2  = $('li#pickup_step_2 a');
	btn3  = $('li#pickup_step_3 a');

	//全体の幅の取得
	var total_width = 0;
	box.find('li').each(function(){
		list.push($(this));
		total_width += $(this).find('img').width();
		//画像のプリロード
		var img = new Image();
		img.src = $(this).find('a img').attr('src').replace(/_off/, '_on');
	});
	
	//boxの左右マージンと幅の設定
	box.css({
		width      : total_width + ( image_span_width * list.length ) + 3,
		marginLeft : list_margin_left,
		marginRight: list_margin_right
	});
	
	//画像のホバーの設定
	box.find('li').hover(function(){
		$(this).find('img').attr('src', $(this).find('img').attr('src').replace(/_off/, '_on'));
	}, function(){
		$(this).find('img').attr('src', $(this).find('img').attr('src').replace(/_on/, '_off'));
	});
	
	changeStepImage(1);
	addClickEventButtons();
	
});

function addClickEventButtons(){
	//左右ボタンクリック時の挙動
	left.click( function(){ moveImage('right'); return false; });
	right.click(function(){ moveImage('left'); return false; });
	btn1.click( function(){ moveImage(undefined, btn1_target); return false; }); 
	btn2.click( function(){ moveImage(undefined, btn2_target); return false; });
	btn3.click( function(){ moveImage(undefined, btn3_target); return false; });
}

function removeClickEventButtons(){
	left.unbind().click(function(){return false;});
	right.unbind().click(function(){return false;});
	btn1.unbind().click(function(){return false;});
	btn2.unbind().click(function(){return false;});
	btn3.unbind().click(function(){return false;});
}

function moveImage(direction, target){
	if( typeof(target) == 'undefined' ){
		mvol = move_item_volume;
	}else{
		//target == 0
		if(current_pos == target){
			return;
		}else{
			direction = (current_pos > target) ? 'right' : 'left';
		}
		mvol = Math.abs( target- current_pos );// (direction=='left') ? current_pos + target : target - current_pos );
	}
	
	var current_width = list[current_pos].width();
	var boxpos = box.position();
	var pos_left = boxpos.left;
	var showed_width = 0;
	var mvol;
	
	if(direction=='left'){
		for(var i=0; i<mvol; i++){
			if(current_pos + i >= list.length) break;
			showed_width += list[current_pos + i].width() + image_span_width;
		}
		//pos_left -= Math.floor(Number(current_width)) + Math.floor(Number(image_span_width)) + ie8fix;
		pos_left -= showed_width + ie8fix;
	}else{
		for(var i=0; i<mvol; i++){
			if(current_pos - 1 - i < 0) break;
			showed_width += list[current_pos - 1 - i].width() + image_span_width;
		}
		//pos_left += Math.floor(Number(current_width)) + Math.floor(Number(image_span_width)) - ie8fix;
		pos_left += showed_width - ie8fix;
	}
	
	var dbg = current_width.toString() + ' + ' + image_span_width.toString() + ' = ';
	var dbg2 = current_width + image_span_width;
	
	if( (direction == 'right' && current_pos <= 0) || (direction == 'left' && current_pos >= list.length - show_volume) ){
		if( direction == 'left' ){
			removeClickEventButtons();
			box.animate(
				{
					left : box.position().left - 5 - ie8fix
				},
				{
					duration : 100,
					complete : function(){
						box.animate(
							{
								left : boxpos.left - ie8fix
							},
							{
								duration: 50,
								complete : function(){
									addClickEventButtons()
								}
							}
						);
					}
				}
			);
		}else{
			removeClickEventButtons();
			box.animate(
				{
					left : +5
				},
				{
					duration : 100,
					complete : function(){
						box.animate(
							{
								left : 0
							},
							{
								duration: 50,
								complete : function(){
									addClickEventButtons()
								}
							}
						);
					}
				}
			);
		}
	}else{
		removeClickEventButtons();
		//current_pos = (direction == 'left') ? current_pos + 1 : current_pos - 1;
		current_pos = (direction == 'left') ? current_pos + mvol : current_pos - mvol;
		pos_left = Math.floor(Number(pos_left));
		box.animate(
			{
					left : pos_left
			},
			{
				duration : move_time,
				complete : function(){
					if(step_1_list.in_array( current_pos + 2 )){
						changeStepImage(1);
					}else if(step_2_list.in_array( current_pos + 2)){
						changeStepImage(2);
					}else{
						changeStepImage(3);
					}
					addClickEventButtons()
				}
			}
		);

	}
}

function changeStepImage(num){
	$('div#pickup_step ul li').each(function(){
		current_step = $(this).find('img');
		if($(this).attr('id')=='pickup_step_' + num.toString()){
			current_step.attr('src', current_step.attr('src').replace(/_off/, '_on'));
		}else{
			current_step.attr('src', current_step.attr('src').replace(/_on/, '_off'));
		}
	});
}

Array.prototype.in_array = function(p_val) {
	for(var i = 0, l = this.length; i < l; i++) {
		if(this[i] == p_val) {
			return true;
		}
	}
	return false;
}