//initialize.js
///* 20111122 jun fujimura */
///* top promotion */

document.write('<style type="text/css">#promotion ul { display:none; }</style>');

$(function(){
ImageLoader({
	'1' : '/img/idx_pic_promotion01.jpg',
	'2' : '/img/idx_pic_promotion02.jpg',
	'3' : '/img/idx_pic_promotion03.jpg',
	'4' : '/img/idx_pic_promotion01_s.jpg',
	'5' : '/img/idx_pic_promotion02_s.jpg',
	'6' : '/img/idx_pic_promotion03_s.jpg'
}, 8000, promotion, promotion );

function promotion(){
	var $stage      = $('#promotion'),
		$ul         = $('#promotion ul'),
		$li         = $('#promotion ul li'),
		$a          = $('#promotion ul li a'),
		$ca         = $('#promotion ul li.current a'),
		$nca        = $('#promotion ul li:not(.current) a'),
		current     = null,
		time        = null,
		interval    = null,
		idx         = null,
		moveTo      = null,
		ua          = navigator.userAgent;
		smartphone  = false;

	var intervals = {
		start  : 0,
		open   : 800,
		span   : 800
	};

	if ( ua.match(/iphone/i) || ua.match(/ipod/i) || ua.match(/ipad/i) || ua.match(/android/i) ) {
		smartphone = true;
	}

	function initialize(){
		$stage.removeClass('nojs');
		if(smartphone) $stage.addClass('smartphone');
		$ul.css( { opacity:0, display:'block' } )
			.animate( { opacity:1 } , 1000, "easeOutQuint" );

		var $li1 = $('#promotion ul li:nth-child(1)'),
			$li2 = $('#promotion ul li:nth-child(2)'),
			$li3 = $('#promotion ul li:nth-child(3)');

		$li1.css( { left: 0 } );
		$li2.css( { left: 50 } );
		$li3.css( { left: 100 } );

		var $tooltip = $('<span class="tooltip"></span>');
		$("body").append($tooltip);
		$a.each(function(){
			$(this).mouseenter(function(oe){
				if($(this).parent().hasClass("current") && $(this).attr("title") != undefined && $(this).attr("title") != "") {
					$tooltip.text($(this).attr("title"));
					$(this).attr("title", "");
					$(this).mousemove(function(me){
						$tooltip.css("left", me.pageX+10);
						$tooltip.css("top", me.pageY+10);
					});
					$(this).mouseleave(function(){
						$(this).attr("title", $tooltip.text());
						$tooltip.text("");
						$tooltip.hide();
						$(this).unbind("mousemove");
						$(this).unbind("mouseleave");
					});
					$tooltip.fadeIn(500);
				}
			});
		});

		$li3.delay(1700).animate( { left: 899 } , intervals.open, "easeOutQuint" , function(){
			$li2.animate( { left: 849 } , intervals.open, "easeOutQuint" , function(){
				start();
			});
		});
	}
	initialize();

	function start(){
		$ul.addClass('static');
		$a.append( $('<span>開く</span>'));
		$('#promotion ul li.current a span').css( { display:'none', opacity:0 } );
		$('#promotion ul li:not(.current) a span').css( { opacity:0 } ).animate( { opacity:1 }, 1000, "easeOutQuint");


		$nca.live('click' , function(){
			return false;
		});

		function onClickHandler(){
			return false;
		}

		$('#promotion ul li.current a span').css( { opacity:0 } );
		$( '#promotion ul li a span' ).click(function(){
			change( $(this).parent().parent().index() , intervals.open );
			return false;
		});
	}

	function change ( t , i ){
		current  = t;
		interval = i;

		$ul.removeClass('static');

		// set class
		if( smartphone ) $ul.removeClass('static');
		$li.removeClass('current');
		$('#promotion ul li:nth-child(' + (current+1) + ')').addClass("current");
		$('#promotion ul li.current a span').css( { display:'none' ,opacity:0 } );
		$('#promotion ul li.current a').css( { opacity:0 } )
			.animate( { opacity:1 } , intervals.span , "easeOutQuint" );
		$('#promotion ul li:not(.current) a span').css( { display:'block' } ).animate( { opacity:1 } , intervals.span , "easeOutQuint" );

		$li.each(function(index){
			idx    = $(this).index();
			moveTo = idx * 50;

			if( current < idx ) moveTo += 799;

			if( $li.length !== index+1 ) {
				$(this).stop().animate( { left: moveTo } , interval, "easeOutQuint" );
			} else {
				$(this).stop().animate( { left: moveTo } , interval, "easeOutQuint", function(){
					$ul.addClass('static');
				});
			}
		});
		$('#promotion ul li.current a').mouseenter();
	}
}

});