// wrapping console for IE
function log(s) {
	if (this.console && typeof console.log != "undefined")
		console.log(s);
}

var jl11wi = {
	$stageImgs : $('#jl11wi img'),
	$topLogo : $('#top_logo'),
	$stage : $('#jl11wi'),
	$left: $('#left'),
	$right: $('#right'),
	$contents: $('#contents'),
	scrollBoost: 4
};

jQuery(document).ready(function(){
	jl11wi.browserHeight = $(window).height() - (jl11wi.$topLogo.height() + $('#navi').height() + $('#footer2').height() + 35/* #contents padding bottom */);
	jl11wi.browserWidth = $(window).width();
	jl11wi.stageHeight = jl11wi.$stage.height();
	jl11wi.stageWidth = jl11wi.$stage.width();
	jl11wi.ratio = Math.round((jl11wi.browserHeight / jl11wi.stageHeight)* 100) / 100;
	jl11wi.difference = ((jl11wi.browserHeight/2) - (jl11wi.stageHeight/2));
	
	adjustImage();

	
	jl11wi.$left.bind("mousemove", function(e){
	//	log("scroll left: "+ jl11wi.$contents.scrollLeft() + " jl11wi.scrollXpos: " + jl11wi.scrollXpos);
		jl11wi.scrollXpos = Math.round((jl11wi.$left.innerWidth() - e.pageX) / jl11wi.$left.innerWidth() * jl11wi.scrollBoost); //実際の移動量。
	})
	jl11wi.$right.bind("mousemove", function(e){
	//	log("scroll left: "+ jl11wi.$contents.scrollLeft() + " jl11wi.scrollXpos: " + jl11wi.scrollXpos);
		jl11wi.scrollXpos = Math.round((e.pageX - jl11wi.$right.offset().left) / jl11wi.$right.innerWidth() * jl11wi.scrollBoost); //実際の移動量。
	})
	//move stage when mouseover on left/right box
	
	jl11wi.$left.mouseover(function(){
		clearInterval(jl11wi.timer); //cancelling animation
		jl11wi.timer = setInterval(function(){
	//		log("left: "+ jl11wi.$contents.scrollLeft());
			jl11wi.$contents.scrollLeft(jl11wi.$contents.scrollLeft()-jl11wi.scrollXpos);
		},10);
		
	})
	
	jl11wi.$right.mouseover(function(){
		clearInterval(jl11wi.timer); //cancelling animation
		jl11wi.timer = setInterval(function(){
	//		log("left: "+ jl11wi.$contents.scrollLeft());
			jl11wi.$contents.scrollLeft(jl11wi.$contents.scrollLeft()+jl11wi.scrollXpos);
		},10);
		
	})
	jl11wi.$left.mouseout(function(){
		clearInterval(jl11wi.timer);
	})
	jl11wi.$right.mouseout(function(){
		clearInterval(jl11wi.timer);
	})
	
	jl11wi.$stage.mouseover(function(){
		clearInterval(jl11wi.timer);
	})
	//Adjust image when browser is resized
	$(window).resize(function(){
		jl11wi.browserHeight = $(window).height() - (jl11wi.$topLogo.height() + $('#navi').height() + $('#footer2').height() + 35);
		jl11wi.stageHeight = jl11wi.$stage.height();
		jl11wi.ratio = Math.round(jl11wi.browserHeight * 100 / jl11wi.stageHeight) / 100;
		jl11wi.difference =  ((jl11wi.browserHeight/2) - (jl11wi.stageHeight/2));
		adjustImage();
		//log(jl11wi.ratio);
	});
	
	
	function adjustImage(){
		jl11wi.$left.css({width: jl11wi.browserWidth / 3, height: jl11wi.browserHeight});
		jl11wi.$right.css({width: jl11wi.browserWidth / 3, height: jl11wi.browserHeight});
		if (window.addEventListener){ //changing image size except IE
			shrinkImage();
		}
	}
	// shrink Image for window size
	function shrinkImage(){
		jl11wi.stageHeight = jl11wi.stageHeight*jl11wi.ratio;
		jl11wi.stageWidth = jl11wi.stageWidth*jl11wi.ratio;
		jl11wi.$stage.css({height:jl11wi.stageHeight, width:jl11wi.stageWidth});
		jl11wi.$contents.scrollLeft( (Math.abs(jl11wi.browserWidth - jl11wi.stageWidth))/2);
		jl11wi.$stageImgs.each(function(){
			var $this = $(this),
				m,
				i = function(){
					if ($this.height() > 0) {
						return $this.height() * jl11wi.ratio;
					}if((m = eval($this.css("height").replace('px',''))) > 0){
						return m * jl11wi.ratio;
					}
				},
				newHeight = Math.round(i()),
				p,
				j = function(){
					if ($this.width() > 0){
						return $this.width() * jl11wi.ratio;
					}if((p = eval($this.css("width").replace('px',''))) > 0){
						return p * jl11wi.ratio;
					}
				},
				newWidth = Math.round(j()),
				newLeft = Math.round($this.position().left * jl11wi.ratio),
				newTop = Math.round($this.position().top * jl11wi.ratio);
			//log(newHeight);
			$this.width(newWidth);
			$this.height(newHeight);
			$this.css({
				left: newLeft,
				top: newTop
			})
		})
	}
	
	
	//jl11wi.$contents.scrollLeft((jl11wi.stageWidth-jl11wi.browserWidth)/2);
	$("#jl11wi img").slowEach(1000 ,function(){
		_$this=$(this);
		_$this.animate({opacity:1},2000);
	});
	/*
	$("#left").slowEach(1000, function(){
		_$this=$(this);
		_$this.animate({opacity:1},500);
	})
	*/
	
	setTimeout(function(){
		$("#left, #right").css({visibility:"visible"});
	},2000);
	
});

jQuery.slowEach = function( array, interval, callback ) {
	if( ! array.length ) return; var i = 0; next();
	function next() { if( callback.call( array[i], i, array[i] ) !== false )
		if( ++i < array.length ) setTimeout( next, interval );
	}
	return array;
};
// this(jQueryオブジェクト)をループにかけ、要素ごとにコールバック関数を呼び出すが、コールバックごとに小休止する 
// このコールバック関数は通常のjQuery(...).each()コールバックと同じ引数を受け取る 
jQuery.fn.slowEach = function( interval, callback ) {
	return jQuery.slowEach( this, interval, callback );
};


/*
$("#jl11wi img").each(function(){
	var _$this=$(this);
	_$this.css({opacity:1}).fadeOut(10000);
});
*/