﻿
//Written by Nathan Faubion: http://n-son.com
//Edition by The one to respect Nathan Faubion.
function $$jsScrollbar (o, s, ev) {
	
	var self = this;
	/*リセット******************************************************************/
	this.reset = function () {
		//Arguments that were passed
		this._parent = o;
		this._src    = s;
		this.eventHandler = ev ? ev : function () {};
		//Component Objects
		this._yTrack  = this._findComponent("Scrollbar-Track", this._parent);
		this._yHandle = this._findComponent("Scrollbar-Handle", this._yTrack);
		//Height and position properties
		this._trackTop = findOffsetTop(this._yTrack);
		this._trackHeight  = this._yTrack.offsetHeight;
		this._handleHeight = this._trackHeight/(this._src.totalHeight / this._src.viewableHeight);
		this._yHandle.style.height=this._handleHeight+"px";
		this._x = 0;
		this._y = 0;
		//Misc. variables
		this._scrollDist  = 5;
		this._scrollTimer = null;
		this._selectFunc  = null;
		this._grabPoint   = null;
		this._tempTarget  = null;
		this._disabled    = false;
		this._ratio = (this._src.totalHeight - this._src.viewableHeight)/(this._trackHeight - this._handleHeight);
		/*既存イベント無効化*/
		this._yHandle.ondragstart  = function () {return false;};
		this._yHandle.onmousedown = function () {return false;};
		/*本文にmousewheelでthis._scrollbarWheelを発動させるイベント設定*/
		//this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);
		if(navigator.userAgent.indexOf("Firefox") != -1){
			this._addEvent(this._src.content, "DOMMouseScroll", this._scrollbarWheelf);
			this._addEvent(this._parent, "DOMMouseScroll", this._scrollbarWheelf);
		}else{
			this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);
			this._addEvent(this._parent, "mousewheel", this._scrollbarWheel);
		}
		/*一回消してすぐ設定？*/
		this._removeEvent(this._parent, "mousedown", this._scrollbarClick);
		/*スクロールバーにmousedownでthis.this._scrollbarClickを発動させるイベント設定*/
		this._addEvent(this._parent, "mousedown", this._scrollbarClick);
		/*本文を初期化*/
		this._src.reset();
		/*ハンドルの位置初期化*/
		with (this._yHandle.style) {
			marginTop  = "0px";
			marginLeft = "0px";
		}
		/*本文の移動 (命令)*//*スクロールバーに動きがあるたび設置*/
		this._moveContent();
		/*スクロールバーの表示・非表示*/
		if (this._src.totalHeight < this._src.viewableHeight) {
			this._disabled = true;
			this._yHandle.style.visibility = "hidden";
			this._parent.style.visibility = "hidden";
		} else {
			this._disabled = false;
			this._yHandle.style.visibility = "visible";
			this._parent.style.visibility  = "visible";
		}
	};
	
	/*イベントセット・イベント削除******************************************************************/
	this._addEvent = function (o, t, f) {
		if (o.addEventListener) o.addEventListener(t, f, false);
		else if (o.attachEvent) o.attachEvent('on'+ t, f);
		else o['on'+ t] = f;
	};
	this._removeEvent = function (o, t, f) {
		if (o.removeEventListener) o.removeEventListener(t, f, false);
		else if (o.detachEvent) o.detachEvent('on'+ t, f);
		else o['on'+ t] = null;
	};
	
	/*this._yHandle設定******************************************************************/
	/*
	 *Scrollbar-Container内の
	 *・Scrollbar-Up
	 *・Scrollbar-Down
	 *・Scrollbar-Trackをthis._findComponentにreturn
	 *
	 *Scrollbar-Track内の
	 *・Scrollbar-Handleをthis._findComponentにreturn
	 */
	this._findComponent = function (c, o) {
		var kids = o.childNodes;
		for (var i = 0; i < kids.length; i++) {
			if (kids[i].className && kids[i].className == c) {
				return kids[i];
			}
		}
	};
	/*
	 *＜o要素の位置決めの基準になる親要素o.offsetParent＞
	 *Scrollbar-Trackの位置測定[!!]
	 */
	//Thank you, Quirksmode
	function findOffsetTop (o) {
		var t = 0;
		if (o.offsetParent) {
			while (o.offsetParent) {
				t += o.offsetTop;
				o  = o.offsetParent;
			}
		}
		return t;
	};
	
	/*本文をmousewheelした時のイベント*****************************************************************
	 *・ハンドルの種類によって動作振り分け
	 *・現在のターゲットを登録
	 *・mouseupイベント設置
	 */
	this._scrollbarWheel = function (e) {
		e = e ? e : event;
		var dir = 0;
		if (e.wheelDelta >= 120) dir = -1;
		if (e.wheelDelta <= -120) dir = 1;
		self.scrollBy(0, dir * 20);
		e.returnValue = false;
	};
	this._scrollbarWheelf = function (e) {
		e = e ? e : event;
		var dir = 0;
		if (e.detail == -3) dir = -1;
		if (e.detail == 3) dir = 1;
		self.scrollBy(0, dir * 20);
		e.preventDefault();
	};
	
	/*スクロールバーにmousedownした時のイベント*****************************************************************
	 *・ハンドルの種類によって動作振り分け
	 *・現在のターゲットを登録
	 *・現在のEventを登録
	 *・mouseupイベント設置
	 */
	this._scrollbarClick = function (e) {
		//スクロールバーがhiddenだったらなにもしない
		if (self._disabled) return false;
		
		//＜srcElement は、このイベントが発生した要素を示すオブジェクト。＞[!!]
		e = e ? e : event;
		if (!e.target) e.target = e.srcElement;
		
		if (e.target.className.indexOf("Scrollbar-Track") > -1) self._scrollTrack(e);
		else if (e.target.className.indexOf("Scrollbar-Handle") > -1) self._scrollHandle(e);
		
		//現在のターゲットを登録
		self._tempTarget = e.target;
		//■
		self._selectFunc = document.onselectstart;
		document.onselectstart = function () {return false;};
		//現在のEventを登録
		self.eventHandler(e.target, "mousedown");
		
		/*documentオブジェクトにmouseupでself._stopScrollを発動させるイベント設定 (false?)*/
		self._addEvent(document, "mouseup", self._stopScroll, false);
		
		return false;
	};
	
	
	/*ハンドルinスクロールバーにmousedownした時のイベント******************************
	 *・位置取得
	 *・mousemoveのイベント設置
	 */
	this._scrollHandle = function (e) {
		
		/*
		 *＜EVENT.clientX  , EVENT.clientYは、ウィンドウ内のクライアント座標で、＞
		 *＜ページが右か下にスクロールしても、そのスクロール位置に関係なく、      ＞
		 *＜ウィンドウの左上を(0,0)として、マウス座標を返してきます。            ＞
		 */
		 
		 //位置取得
		var curY = e.clientY + document.body.scrollTop;
		this._grabPoint = curY - findOffsetTop(this._yHandle);
		//documentオブジェクトにmousemoveでthis._scrollbarDragを発動させるイベント設定 (false?)
		this._addEvent(document, "mousemove", this._scrollbarDrag, false);
		
	};
	
	
	/*mousemoveした時のイベント******************************************************************/
	this._scrollbarDrag = function (e) {
		e = e ? e : event;
		var t = parseInt(self._yHandle.style.top);
		var v = e.clientY + document.body.scrollTop - self._trackTop;
		with (self._yHandle.style) {
			if (v >= self._trackHeight - self._handleHeight + self._grabPoint)
				marginTop = self._trackHeight - self._handleHeight +"px";
			else if (v <= self._grabPoint) marginTop = "0px";
			else marginTop = v - self._grabPoint +"px";
			self._y = parseInt(marginTop);
		}
		/*本文の移動 (命令)*//*スクロールバーに動きがあるたび設置*/
		self._moveContent();
	};
	
	
	/*動作ALL-STOPイベント*****************************************************************/
	this._stopScroll = function () {
		self._removeEvent(document, "mousemove", self._scrollbarDrag, false);
		self._removeEvent(document, "mouseup", self._stopScroll, false);
		
		if (self._selectFunc) document.onselectstart = self._selectFunc;
		else document.onselectstart = function () { return true; };
		
		if (self._scrollTimer) window.clearInterval(self._scrollTimer);
		self.eventHandler (self._tempTarget, "mouseup");
	};
	
	
	
	/*スクロールイベント(発動)********************************************************************/
	this._scroll = function (x, y) {
		if (y > this._trackHeight - this._handleHeight) 
			y = this._trackHeight - this._handleHeight;
		if (y < 0) y = 0;
		
		this._yHandle.style.marginTop = y +"px";
		this._y = y;
		
		this._moveContent();
	};
	
	/*スクロールイベント(命令)*********************************************************************/
	this.scrollBy = function (x, y) {
		this._scroll(0, (-this._src._y + y)/this._ratio);
	};
	
	/*本文の移動 (発動)*/
	this._moveContent = function () {
		this._src.scrollTo(0, Math.round(this._y * this._ratio));
	};
	
	this.reset();
};
