// クラスの宣言
var FLScroll = Class.create();

var imageUpperArrow = 'images/scr/arrowu.gif';
var imageLowerArrow = 'images/scr/arrowd.gif';

// クラスの定義
FLScroll.prototype = {

	// マウスホイールイベント取得におけるIE, FireFox, Operaの差異吸収のためのプロパティ
	mousewheel: (document.all ? 'mousewheel' : 'DOMMouseScroll'),
	scrollRate: 0.05,
	defaultwidth: 8,

	// 初期化処理
	initialize: function(elementid, scrollelementid, width) {

		//this.direction = (this.isOpera() ? -1 : 1);
		this.direction = 1;

		// 幅の設定
		this.width = (!width ? this.defaultwidth : width);

		// 被スクロール要素の定義
		this.scrollElement = $(scrollelementid);
		if ( !this.scrollElement ) {
			return;
		}

		// 下限値チェック
		if ( this.scrollElement.offsetHeight < this.width * 2 ) {
			return;
		}

		// スライダーの高さを計算
		this.sliderHeight = this.scrollElement.offsetHeight - this.width * 2;

		// スクロールバー各部のID設定	
		this.uarrowid = elementid + '_uarrow';
		this.larrowid = elementid + '_larrow';
		this.sliderid = elementid + '_slider';
		this.handleid = elementid + '_handle';

		// 描画処理
		this.draw(elementid);
		
		// スライダーの定義
		this.defineSlider();
	
		// 先頭へ移動
		this.slider.setValue(0);

		// 矢印クリック時のイベントハンドラ定義
		Event.observe($(this.uarrowid), 'click', this.scrollUp.bindAsEventListener(this),   false);
		Event.observe($(this.larrowid), 'click', this.scrollDown.bindAsEventListener(this), false);

		// 被スクロール要素のマウスホイールイベント
		Event.observe(this.scrollElement, this.mousewheel, this.scrollWheel.bindAsEventListener(this), false);

		// スライダー部のマウスホイールイベント
		Event.observe($(this.sliderid), this.mousewheel, this.scrollWheel.bindAsEventListener(this), false);

	},

	// スライダーコントロールによるスライド処理
	scrollSlider: function(v) {

		this.scrollElement.scrollTop = Math.round(v / this.slider.maximum * (this.scrollElement.scrollHeight - this.scrollElement.offsetHeight));

	},
	
	// 上矢印によるスクロール
	scrollUp: function(e) {

		this.doScroll(-1);

	},

	// 下矢印によるスクロール
	scrollDown: function(e) {

		this.doScroll(1);

	},

	// マウスホイールによるイベント
	scrollWheel: function(e) {

		this.doScroll(Event.wheel(e) * -1);

	},

	// スクロール処理
	doScroll: function(y) {

		this.slider.setValue(this.slider.value + y * this.scrollRate * (this.scrollElement.offsetHeight / this.scrollElement.scrollHeight) * this.direction);
		this.slider.options.onSlide(this.slider.value);

	},

	// 描画処理	
	draw: function(elementid) {

		// 描画対象エレメントの取得
		var e = $(elementid);
		if ( !e ) {
			return;
		}

		// 上矢印描画域
		var objUpperArrowArea = document.createElement('div');
		objUpperArrowArea.setAttribute('id', this.uarrowid);
		Element.addClassName(objUpperArrowArea, 'flscrollbar-arrowu');
		e.appendChild(objUpperArrowArea);

		// 上矢印
		var objUpperArrow = document.createElement('img');
		objUpperArrow.setAttribute('src',    imageUpperArrow);
		objUpperArrow.setAttribute('width',  this.width);
		objUpperArrow.setAttribute('height', this.width);
		objUpperArrowArea.appendChild(objUpperArrow);
	
		// スライダー
		var objSlider = document.createElement('div');
		objSlider.setAttribute('id', this.sliderid);
		objSlider.style.width  = this.width  + 'px';
		objSlider.style.height = this.sliderHeight + 'px';
		objSlider.className    = 'flscrollbar-slider';
		e.appendChild(objSlider);

		// ハンドル
		this.handle = document.createElement('div');
		this.handle.setAttribute('id', this.handleid);
		this.handle.style.width  = this.width  + 'px';
		this.handle.className    = 'flscrollbar-handle';
		objSlider.appendChild(this.handle);

		// ハンドルサイズの設定
		this.setHandleSize();

		// 下矢印描画域
		var objLowerArrowArea = document.createElement('div');
		objLowerArrowArea.setAttribute('id', this.larrowid);
		e.appendChild(objLowerArrowArea);

		// 下矢印
		var objLowerArrow = document.createElement('img');
		objLowerArrow.setAttribute('src',    imageLowerArrow);
		objLowerArrow.setAttribute('width',  this.width);
		objLowerArrow.setAttribute('height', this.width);
		objLowerArrowArea.appendChild(objLowerArrow);

	},

	// スライダーの定義
	defineSlider: function() {

		if ( this.slider ) {
			this.slider = null;
		}

		// スライダーオブジェクトの生成
		this.slider = new Control.Slider(
			this.handleid,
			this.sliderid,
			{
				axis:'vertical',
				onSlide:this.scrollSlider.bindAsEventListener(this),
				onChange:this.scrollSlider.bindAsEventListener(this)
			}
		);

	},
	
	// 再描画処理
	redraw: function() {

		// ハンドルサイズの設定
		this.setHandleSize();

		// スライダーの定義
		this.defineSlider();

		// 先頭へ移動
		this.slider.setValue(0);

	},

	// ハンドルサイズの設定
	setHandleSize: function() {

		var handleHeight = Math.round(this.sliderHeight * (this.scrollElement.offsetHeight / this.scrollElement.scrollHeight));
		if ( handleHeight > this.sliderHeight ) {
			handleHeight = this.sliderHeight;
		}

		this.handle.style.height = handleHeight + 'px';

	},
	
	isOpera: function() {
		return ( navigator.userAgent.toLowerCase().indexOf('opera') != -1 );
	}
}