$(function(){
	
	var b1 = $("#bubble1");
	var b2 = $("#bubble2");
	var b3 = $("#bubble3");
	
	function bubbling(elm,dt){
		var fp = $('#Footer').offset();
		var end = fp.top-385;
		elm.animate({top:end},{duration:dt,easing:"linear",complete:function(){
			if($.browser.msie && $.browser.version < 9){
				elm.css({'top': -570});
			}else{
				elm.fadeOut(300,function(){elm.css({'top':-570,'display':'block'});})
			}
			setTimeout(function(){bubbling(elm,dt)},600);
		}});
	}

	function SwingMove(elm,dr,es,mleft,mright){
		$(elm).find('.bubble-style-inline')
			.animate({'marginLeft':mleft},{duration:dr,easing:es})
			.animate({'marginLeft':mright},{duration:dr,easing:es,
				complete:function(){
					SwingMove(elm,dr,es,mleft,mright);
			}
		});
	}
	
	bubbling(b1,28000);
	bubbling(b2,36000);
	bubbling(b3,32000);
	
	setTimeout(function(){
		SwingMove('#bubble1',1300,'linear','-10px','10px');
		SwingMove('#bubble2',2200,'linear','-40px','40px');
		SwingMove('#bubble3',1700,'linear','30px','-30px');
	},500);
	
	var xmlfile = 'xml/comment/index.xml';
	var count = 0;
	var OutPut;
	var OutPut2;
	var j;

	$.ajax({
		url      : xmlfile,
		dataType : 'xml',
		success  : function(data){ItemRandom(data);},
		error    : function(xml){alert('XMLファイルがありません。');},
		complete : function(){return;}
	});

	function ItemRandom(data){
		for(var i=1;i<=$('.bubble-style').length;i++){
			var count = $(data).find('item').length;
			j = Math.floor(Math.random() * count);
			var target ="#bubble" + i;
			var target2 ="#detail" + i;
			var $selcter = $(data).find('item').eq(j);
			
			OutPut = "";
			OutPut+='<a href="' + '#detail'+i + '">';
			OutPut+='<span class="year"><img src="images/bubble_txt01.gif" width="58" height="16" alt="illume歴" /><em>' + $selcter.find("year").text() + '</em><img src="images/bubble_txt02.gif" width="14" height="16" alt="年" /></span>';
			OutPut+='<span class="name">' + $selcter.find("name").text() + '</span>';
			OutPut+='<span class="info">' + $selcter.find("information").text() + '</span>';
			OutPut+='<span class="comment">' + $selcter.find('comment').text() + '</span>';
			OutPut+='</a>';

			OutPut2 = "";
			OutPut2+='<div class="detail-area-outline"><div class="detail-area-inline">';
			OutPut2+='<p class="year"><img src="images/bubble_detail_txt01.gif" width="58" height="16" alt="illume歴" /><em>' + $selcter.find("year").text() + '</em><img src="images/bubble_detail_txt02.gif" width="14" height="16" alt="年" /><em>' + $selcter.find("month").text() + '</em><img src="images/bubble_detail_txt03.gif" width="24" height="16" alt="ヶ月" /></p>';
			OutPut2+='<p class="name"><span>' + $selcter.find("name").text() + '</span>さん</p>';
			OutPut2+='<p class="info">' + $selcter.find("information").text() + '</p>';
			OutPut2+='<p class="skin">肌タイプ：' + $selcter.find("skin").text() + '</p>';
			OutPut2+='<p class="goods">対象商品：' + $selcter.find("goods").text() + '</p>';
			OutPut2+='<p class="comment">' + $selcter.find('comment').text() + '</p>';
			OutPut2+='<p class="btn-close"><img src="images/btn_close.png" width="35" height="35" alt="閉じる" class="png" /></p>';
			OutPut2+='</div></div>';

			$(target).find('.inside').html(OutPut);
			$(target2).html(OutPut2);
			
				
			if($.browser.msie && $.browser.version<7){
				$("#detail-layer").css({"width":$(document).width(),"height":$(document).height()});
			}
			
			$('.bubble-style .inside a').live("click",function(){
				$('#detail-layer').show();
				
				if($.browser.msie && $.browser.version<=7){
					var targetHrefIE = $(this).attr("href").split("/");
					var targetHrefIE3 = targetHrefIE[3];
					$('.detail-area').css('marginTop',"-" + $('.detail-area').height()/2 + "px");
					$(targetHrefIE3).show();
				}else{
					var targetHref = $(this).attr("href");
					$(targetHref).css('marginTop',"-" + $(targetHref).height()/2 + "px");
					$(targetHref).show();
				}
				return false;
			})
			
			$('#detail-layer,.detail-area p.btn-close').click(function(){
				$('#detail-layer').hide();
				$('.detail-area').hide();
			});
		}
	}
	
});