// JavaScript Document

/* --------------------------------------------------------------------------------------
  各種ユニット
--------------------------------------------------------------------------------------- */

$(function init(){
	slide();
	scrollbar();
});

/* --------------------------------------------------------------------------------------
  スライドイベント
--------------------------------------------------------------------------------------- */

var slide = function (){
	//設定
	var init = {
		count      : 0,
		animation  : "normal",
		Interval   : 6000,
		image      : {
						length : $("#imgbox p").length,
						width  : $("#imgbox p").width()
					},
		box        : parseInt(($("#imgbox p").length) * $("#imgbox p").width()),
		Tag        : '<li><img src="images/slide_btn.gif" alt="" /></li>',
		path       : {
						Default : 'images/slide_btn.gif',
						over    : 'images/slide_btn_on.gif'
          },
		list   : $("#imgbox #box-inner div")
	};

	//親ボックスのサイズを入れる
	init["list"].css({
		"width" : init["box"],
		"overflow" : "hidden"
	});

	/* --------------------------------------------------------------------------------------
  イメージボタン
	--------------------------------------------------------------------------------------- */

	//リストボタンの作成
	for(var i=0; i<init.image["length"]; i++) $("#imgbox ul").append(init["Tag"]);

	//初期設定
	$("#imgbox li:nth-child(" + parseInt(init["count"] + 1) + ") img").attr("src",init.path["over"]);

	//上のボタンと連動して下のボタンも変更
	var btnchange = function (){
		$("#imgbox li img").attr("src",init.path["Default"]);
		$("#imgbox li:nth-child(" + parseInt(init["count"] + 1) + ") img").attr("src",init.path["over"]);
	}

	//クリックイベント
	$("#imgbox li").bind("click",function (){
		var q = init["list"].queue("fx").length;
		if (q == 0){
			//clearInterval(auto);
			var index = parseInt($("#imgbox li").index(this));
			init["count"] = index;

			init["list"]
				.stop()
				.animate({
					marginLeft: "-" + (init["count"] * init.image["width"]) + "px"
				},{
					duration: 1000,
					complete : function (){
						btnchange();
						auto = setInterval(animate,init["Interval"]);
					}
				}
			);
		}
	});

	/* --------------------------------------------------------------------------------------
  自動スライド
	--------------------------------------------------------------------------------------- */

  animate = function (){
		if (init["count"] == init.image["length"] - 1){
			clearInterval(auto);
			init["count"] = 0;
			init["list"]
				.stop()
				.animate({
					marginLeft: init["count"] + "px"
					},{
						duration: 1000,
						complete : function (){
							btnchange();
							auto = setInterval(animate,init["Interval"]);
						}
					});

		}else {
			init["count"] ++;
			init["list"]
				.stop()
				.animate({
					marginLeft: "-" + (init["count"] * init.image["width"]) + "px"
					},{
						duration: 1000,
						complete : function (){
							btnchange();
						}
					});
		}
	}
	auto = setInterval(animate,init["Interval"]);
};

/* --------------------------------------------------------------------------------------
スクロールバー
--------------------------------------------------------------------------------------- */

var scrollbar = function () {

  var clickFlug = false;
  var table = document.querySelectorAll('.scrollbox table');

  var box = document.querySelectorAll('.scrollbox');
  var bar = document.querySelectorAll('.scroll');
  var thumb = document.querySelectorAll('.scroll p');

  if (!box) return;

  var calcPageY;
  var moveCalc;
  var table;
  var tableHeight;
  var Adjust;

  var divergence = function () {
    table = document.querySelectorAll('.scrollbox table');
    console.log(table);
    tableHeight = table[this.id].offsetHeight;
    var smallCasesValue = bar[this.id].offsetHeight - thumb[this.id].offsetHeight;
    var calc = tableHeight - box[this.id].offsetHeight;
    if (calc <= smallCasesValue) {
      Adjust = (tableHeight - smallCasesValue) / box[this.id].offsetHeight;
    } else {
      Adjust = (tableHeight + 10) / box[this.id].offsetHeight;
    }
  }


  var scrollEvent = function (e) {
    divergenceNumber = this.id;
    calcPageY = e.pageY;
    thumbOffsetTop = thumb[divergenceNumber].offsetTop;
    clickFlug = true;
  }
  var scrollEventMove = function (e) {
    e.preventDefault();
    if (clickFlug) {
      moveCalc =  (e.pageY - calcPageY) + thumbOffsetTop;
      if (moveCalc >= 0 && moveCalc <= (box[divergenceNumber].offsetHeight - thumb[divergenceNumber].offsetHeight)) {
        thumb[divergenceNumber].style.top = moveCalc + 'px';
        table[divergenceNumber].style.top = '-' + ((e.pageY - calcPageY) + thumbOffsetTop) * Adjust + 'px';
      }
    }
  }
  var scrollEventEnd = function (e) {
    e.preventDefault();
    clickFlug = false;
  }

  thumb[0].addEventListener('mousedown', divergence, false);
  thumb[1].addEventListener('mousedown', divergence, false);
  thumb[0].addEventListener('mousedown', scrollEvent, false);
  thumb[1].addEventListener('mousedown', scrollEvent, false);
  document.addEventListener('mousemove', scrollEventMove, { passive: false });
  document.addEventListener('mouseup', scrollEventEnd, false);
}