<!--

/*-------------------------------
 エレベーターメニュー for JQuery
--------------------------------*/

function elevator_navi( _conf ) {
	
	this.self   = _conf.self;
	this.n_id   = _conf.navi;
	this.g_id   = _conf.guide;
	
	this.depth  = _conf.depth;
	this.align  = _conf.align;
	this.margin = _conf.margin;
	this.remargin = _conf.remargin;
	
	this.navi  = null;
	this.guide = null;
	this.elbox = null;
	this.elmin = 0;
	
	this.wait  = 200;
	this.timer = null;
	
	// Main
	this.init =
	function() {
		
		this.navi  = $(this.n_id);
		this.guide = $(this.g_id);
		
		// Create Box
		this.navi.wrapInner('<div class="elevator_box"></div>');
		
		this.elbox = $(this.navi).children('.elevator_box');
		this.elbox.css( 'display', 'block' );
		
		// Firefox
		if ( $.browser.mozilla ) {
			this.elbox.css( 'display', 'table-cell' );
		}
		else
		if ( $.browser.msie ) {
			this.elbox.css( 'display', 'inline' );
		}
		this.elmin = this.elbox.get(0).offsetWidth;
		
		this.elbox.css( 'display', 'block' );
		
		// Format Objects
		var data = { object:this.self };
		var e = { data:data };
		
		this.format( e );
		
		// <END>
	};
	
	this.format =
	function( e ) {
		
		var object = eval( e.data.object );
		
		// Stop Event
		$(window).bind( 'resize', object.on_resize );
		
		// object.clear_screen();
		
		// <FOR TEST>
		// object.navi.css( 'background-color', '#FF0000' );
		// this.guide.css( 'background-color', '#00FF00' );
		
		// Area Position
		object.navi.css( 'position', 'absolute' );
		object.navi.css( 'z-index', object.depth );
		
		var area_left =
		  object.guide.offset().left
		+ object.guide.width();
		
		var area_top =
		  object.guide.offset().top
		+ object.px( object.guide.css('padding-top') );
		
		// set Area Position
		object.navi.css( 'left', area_left );
		object.navi.css( 'top', area_top );
		
		// Area Size
		var area_width =
		  $(document.body).width()
		- area_left;
		
		if ( area_width < 0 ) {
			area_width = 0;
		}
		
		var area_height =
		  object.guide.get(0).offsetHeight
		- object.px( object.guide.css('padding-top') )
		- object.px( object.guide.css('padding-bottom') );
		
		if ( area_height < 0 ) {
			area_height = 0;
		}
		
		// set AreaPosition
		var box_w = object.elmin + object.margin.left + object.margin.right;
		
		if ( area_width > box_w && area_height > 0 ) {
			object.navi.attr('class', 'side');
			
			object.navi.css( 'width', area_width );
			object.navi.css( 'height', area_height );
		}
		// reset Area Position
		else {
			object.navi.attr('class', 'bottom');
			
			object.navi.css( 'position', 'relative' );
			object.navi.css( 'top', object.remargin.top );
			object.navi.css( 'left', 0 );
			object.navi.css( 'width', object.guide.get(0).offsetWidth );
			object.navi.css( 'height', object.elbox.height() + object.remargin.bottom );
		}
		
		// set Box Size/Position
		object.elbox.css( 'position', 'absolute' );
		
		if ( object.navi.css( 'position' ) == 'absolute' ) {
			object.elbox.css( 'margin-top',     '0px' );
			object.elbox.css( 'padding-top',    object.margin.top    + 'px' );
			object.elbox.css( 'padding-bottom', object.margin.bottom + 'px' );
			object.elbox.css( 'padding-left',   object.margin.left   + 'px' );
			object.elbox.css( 'padding-right',  object.margin.right  + 'px' );
			object.elbox.css( 'width', (area_width - object.margin.left - object.margin.right) );
			// <子要素でtext-indent:-9999px を使用する場合、無効化>
			// object.elbox.css( 'text-align', object.align.x );
		}
		else {
			object.elbox.css( 'margin-top',     object.remargin.top    + 'px' );
			object.elbox.css( 'padding-bottom', object.remargin.bottom + 'px' );
			object.elbox.css( 'padding-left',   object.remargin.left   + 'px' );
			object.elbox.css( 'padding-right',  object.remargin.right  + 'px' );
			object.elbox.css( 'width', object.guide.get(0).offsetWidth - object.remargin.left - object.remargin.right );
			// <子要素でtext-indent:-9999px を使用する場合、無効化>
			// object.elbox.css( 'text-align', 'right' );
		}
		
		// <FOR TEST>
		// object.elbox.css( 'background-color', '#0000FF' );
		
		// Box Position
		object.elbox.css( 'top', object.get_top() );
		
		// Set Event
		$(window).bind( 'resize', { 'object': object.self }, object.on_resize );
		
		if ( object.navi.css( 'position' ) == 'absolute' ) {
			$(window).bind( 'scroll', { 'object': object.self }, object.on_scroll );
		}
		else {
			$(window).unbind( 'scroll', object.on_scroll );
		}
	};
	
	this.on_resize =
	function( e ) {
		
		var object = eval( e.data.object );
		
		var data = { object:e.data.object };
		var e = { data:data };
		
		object.format( e );
	};
	
	this.on_scroll =
	function( e ) {
		
		var object = eval( e.data.object );
		
		var top = object.get_top();
		
		if ( object.timer != null ) {
			clearTimeout( object.timer );
		}
		object.timer = setTimeout( e.data.object+'.animate_navi('+e.data.object+')', object.wait );
	};
	
	this.animate_navi =
	function( obj_name ) {
		
		var object = eval( obj_name );
		
		var top = object.get_top();
		
		clearTimeout( object.timer );
		
		object.elbox.animate( { top:top }, 'normal' );
		
		object.timer = null;
	};
	
	this.get_top =
	function() {
		
		var top = 0;
		
		var screen_h = this.get_screen().height; // width, height
		var scroll_h = this.get_scroll(); // num
		
		var navi_h = this.navi.height();
		var navi_t = this.navi.offset().top;
		
		var box_h = this.elbox.get(0).offsetHeight;
		
		if ( this.align.y == 'top' ) {
			
			if ( navi_t > scroll_h ) {
				top = 0;
			}
			else
			if ( navi_t + navi_h - box_h < scroll_h ) {
				top = navi_h - box_h
			}
			else {
				top = scroll_h - navi_t;
			}
		}
		else
		if ( this.align.y == 'bottom' ) {
			
			var a = screen_h + scroll_h;
			var b = navi_t + box_h;
			
			if ( a < b ) {
				top = 0;
			}
			else
			if ( a > (navi_t + navi_h) ) {
				top = navi_h - box_h;
			}
			else {
				top = a - b;
			}
		}
		
		return top;
	};
	
	this.get_screen =
	function() {
		
		var screen_size = { width:0, height:0 };
		
		// IE,Firefox,Opera
		if ($.boxModel) {
			screen_size.width  = document.documentElement.clientWidth;
			screen_size.height = document.documentElement.clientHeight;
		}
		else {
			screen_size.width  = document.body.clientWidth;
			screen_size.height = document.body.clientHeight;
		}
		
		// Safari
		if ($.browser.safari) {
			screen_size.width  = window.innerWidth;
			screen_size.height = window.innerHeight;
		}
		
		return screen_size;
	};
	
	this.get_scroll =
	function() {
		
		var scroll_h = 0;
		
		if ($.boxModel) {
			scroll_h = document.documentElement.scrollTop;
		}
		else {
			scroll_h = document.body.scrollTop;
		}
		
		return scroll_h;
	};
	
	this.px =
	function( str ) {
		
		if ( typeof str == 'undefined' ) {
			return 0;
		}
		else {
			return Number((str.split('px'))[0]);
		}
	};
	
	this.clear_screen =
	function() {
		
		document.body.style.fontSize = 'xx-large';
		document.body.style.fontSize = '';
	};
	
	return this;
}


// エレベーターメニュー設置
// 
// navi エレメントは、guide エレメントと同じ
// エレメントの中に記述する。
// 
// ブラウザ表示域の横幅が不足した場合は、
// guide エレメントの下部 padding 右端に表示。
// その際は、remargin で指定したマージンが適用される。
// 
// ※実際はpaddingで調整しているので注意。
// 
// margin, remargin の値は正の数のみ
// remargin はマイナス可。
// 
var el_navi = new elevator_navi(
{
	self   : 'el_navi',
	navi   : '#el_navi',
	guide  : '#main',
	depth  : 9999,
	align  : { x:'left', y:'bottom' },
	margin : { top:0, bottom:0, left:4, right:0 },
	remargin : { top: -42, bottom:0, left:0, right:42 }
});

// エレベーターメニュー開始
$(function () {
	
	el_navi.init();
});


// -->
