/**
 * スライド機能付きサイドバー.
 * @author 佐藤亮介.
 * @required prototype.js, moo.fx2.
 * @copyright © 2007 MapQuest Corporation. All rights reserved.  
 * @comment 以下のサンプルをベースに作成。
 * サンプルは mootools を使用ししており prototype.js とコンフリクトしてそのまま使えなかった。
 * http://www.andrewsellick.com/examples/sliding-side-bar/
 */

/**
 * スライド機能付きサイドバークラス。
 * @version 0.5.0
 */
var MqSideBar = Class.create();
MqSideBar.prototype = {
	version: '0.5.0',
	/**
	 * サイドバーを初期化します。
	 * @param {string} tabID タブ領域のID。
	 * @param {string} tabOpenImage タブオープン画像のURL。
	 * @param {string} tabCloseImage タブクローズ画像のURL。
	 * @param {string} contentsID コンテンツ領域のID。
	 * @param {int} contentsWidth スライドするコンテンツ領域の幅。
	 * @param {int} contentsHeight スライドするコンテンツ領域の高さ。
	 */
	initialize: function(tabID, tabOpenImage, tabCloseImage, contentsID, contentsWidth, contentsHeight)
	{
		this.tabID = tabID;
		this.tabOpenImage = tabOpenImage;
		this.tabCloseImage = tabCloseImage;
		this.contentsID = contentsID;
		this.contentsWidth = contentsWidth;
		this.contentsHeight = contentsHeight;
		this.isExtended = 0;
		this.slideDuration = 1000;
		this.opacityDuration = 1500;
	},
	/**
	 * サイドバーをスライドして展開します。
	 * 展開している場合はスライドして閉じます。
	 */
	extendContract: function()
	{
		if(this.isExtended == 0){
			//this._sideBarSlide(0, this.contentsHeight, 0, this.contentsWidth);
			this._sideBarSlide(this.contentsHeight, this.contentsHeight, 0, this.contentsWidth);
			this._sideBarOpacity(0, 1);
			this.isExtended = 1;
			// make expand tab arrow image face left (inwards)
			$(this.tabID).childNodes[0].src = this.tabCloseImage;
			//$(this.tabID).childNodes[0].src = $(this.tabID).childNodes[0].src.replace(/(\.[^.]+)$/, '-active$1');
		} else {
			//this._sideBarSlide(this.contentsHeight, 0, this.contentsWidth, 0);
			this._sideBarSlide(this.contentsHeight, this.contentsHeight, this.contentsWidth, 0);
			this._sideBarOpacity(1, 0);
			this.isExtended = 0;
			// make expand tab arrow image face right (outwards)
			$(this.tabID).childNodes[0].src = this.tabOpenImage;
			//$(this.tabID).childNodes[0].src = $(this.tabID).childNodes[0].src.replace(/-active(\.[^.]+)$/, '$1');
		}
	},
	/**
	 * サイドバーをスライドします。
	 * @param {int} fromHeight スライド前の高さ。
	 * @param {int} toHeight スライド後の高さ。
	 * @param {int} fromWidth スライド前の幅。
	 * @param {int} toWidth スライド後の幅。
	 */
	_sideBarSlide: function(fromHeight, toHeight, fromWidth, toWidth)
	{
		var myEffects = new Fx.Styles(this.contentsID, {duration: this.slideDuration, transition: Fx.Transitions.linear});
		myEffects.custom({
			 'height': [fromHeight, toHeight],
			 'width': [fromWidth, toWidth]
		});
	},
	/**
	 * サイドバーをフェードイン・アウトします。
	 * @param {float} from スライド前の高さ。
	 * @param {float} to スライド後の高さ。
	 */
	_sideBarOpacity: function(from, to)
	{
		var myEffects = new Fx.Styles(this.contentsID, {duration: this.opacityDuration, transition: Fx.Transitions.linear});
		myEffects.custom({
			 'opacity': [from, to]
		});
	}
}