// JavaScript Document

var timer;
var interval=17000;
var city=[
	["広島市",["広島城","平和記念公園"],["天正17(1589)年毛利輝元が築城。別名鯉城。天守閣は原爆で倒壊後、昭和33(1958)年に外観を復元して建造されたもので、内部は、武家文化を中心に紹介する歴史博物館となっています。","昭和20(1945)年8月6日午前8時15分、広島に落とされた人類初の原爆という歴史的出来事を風化させないよう、また世界に向けて恒久平和を願い、訴える目的で整備された公園です。"],"images/1"],
	["廿日市市",["宮島水族館（みやじマリン）","吉和魅惑の里"],["平成23年8月にリニューアルオープン。スナメリやカキいかだの巨大水槽など、瀬戸内海のさまざまな生き物を見ることができます。","温泉、バーベキュー、ケビンにキャンプ…<br>中国山地の山間に開けた山里にあり、自然の営みがもたらす四季折々の恵みを体験できる自然体験リゾートです。"],"images/2"],
	["呉市",["大和ミュージアム","音戸の瀬戸"],["世界一の戦艦「大和」を忠実に再現した1/10「大和」などを通して呉の歴史や平和の大切さ，科学技術のすばらしさを今に伝えます。","平清盛が沈む夕日を扇で招き返して，１日で切り拓いたと言われる名勝地。4月下旬から5月初旬には，紅白のツツジが咲き乱れ，すばらしい景観が楽しめます。"],"images/3"],
	["江田島市",["沖美の夕日","海上自衛隊第１術科学校"],["沖美町の西側の海岸線からは夕日を眺めることができるスポットです。沈む夕日が海を黄金色に染めていく様子は感動を与えてくれます。","白浜青松の緑の芝生に囲まれた塵ひとつない校庭，御影石の大講堂，赤レンガの旧生徒館などのしっとりしたたたずまいが昔日の面影を偲ばせています。"],"images/4"],
	["三原市",["三原やっさ祭","瀬戸内海国立公園<br>筆影山・竜王山"],["毛利元就の三男・小早川隆景の三原城築城以来440年余の伝統を誇る「三原やっさ踊り」や花火が催されます。踊りの渦が町中を練り歩き30数万人の人出で賑わいます。（8月第2日曜日を含む金･土･日曜日開催）","山頂からの多島美は瀬戸内海随一。瀬戸内海の撮影スポット，桜の名所としても有名。JR三原駅からは，筆影山・竜王山山頂を周遊する定期観光ジャンボタクシーが運行しています。"],"images/5"],
	["竹原市",["竹原市重要伝統的建造物群保存地区","たけはら憧憬の路"],["平安時代、京都下鴨神社の荘園として栄えた歴史から「安芸の小京都」と呼ばれる竹原。特に上市・下市には、江戸時代後期に製塩や酒造業で栄えたお屋敷や由緒あるお寺のある町並みが今もそのままに保存されています。","江戸時代の繁栄を今に伝える古い町並みを竹筒からあふれるろうそくの灯りで幻想的にライトアップします。"],"images/6"],
	["大竹市",["三倉岳","亀居公園"],["朝日岳、中岳、夕日岳の鋭くとがった三つ峰を持つことから「三本槍」とも呼ばれ、近年はロッククライミングや登山の愛好家が多く訪れます。","1608年に福島正則が築城した亀居城の跡を公園として整備したもので、桜の名所として知られています。公園内の遊歩道で結ばれる作詞家 故 石本美由紀 氏の歌碑が訪れる人のロマンをかきたてます。"],"images/7"],
	["安芸太田町",["温井ダム","三段峡"],["黒部ダムに次ぐ、日本で２番目に高いアーチ式ダム。しかも最新の土木技術で造られたこのダムは人と自然との共存を図るテーマパークとも言えるでしょう。日本ダム湖百選の一つです。","日本屈指の名峡・三段峡。全長13キロにおよぶ長大な峡谷には、語り尽くせない時の流れが潜んでいます。誘われるままに進む先には飽くことのない見事な景観が迎えてくれます。"],"images/8"],
	["柳井市",["やまぐちフラワーランド","白壁と金魚ちょうちん"],["歴史と自然に囲まれたちょっとおしゃれな花と緑の庭園です。昔の地形を生かした様々なテーマ性のある花壇が配置され、四季折々の花が咲き誇ります。花に関連したイベントや教室もあり、年中楽しむことができます。","室町時代からの町割りがそのまま今日も生きており、約200mの街路に面した両側に江戸時代の商家の家並みが続いています。往時の面影をしのばせる町並みで、心安らぐひとときを味わえます。"],"images/9"],
	["北広島町",["乙九日炎の祭典","壬生の花田植"],["1421年頃に行われた、「雄鹿原合戦」に由来する祭りで、甲冑武者を先頭に300名を超える一般参加者が松明行列を行う。神社境内で行われる大松明ねり回しは、二組の大松明が舞うように回る様子は大迫力。","豪華な花鞍などの装具をまとった飾り牛による代搔きにはじまり、絣の着物に菅笠の早乙女が早苗を植える。初夏を告げる田園絵巻は稲作文化から生まれた民俗芸能のひとつで、世界無形文化遺産に推薦されています。"],"images/10"],
	["岩国市",["錦帯橋","岩国寿司"],["錦川に架かる国指定の名勝錦帯橋は5つのアーチを描く木造橋。春の桜、夏の鵜飼、秋の紅葉、冬の雪化粧など、四季折々に美しく変化するその姿は人々を魅了します。","岩国寿司は4～5升もの酢飯と岩国れんこんや季節の野菜、小魚の身をほぐしたもの、錦糸卵などの具材を重ねあわせた押し寿司の一種で、岩国の代表的な郷土料理として親しまれています。"],"images/11"],
	["東広島市",["深山峡","酒蔵通り"],["「夫婦岩」や「猿岩」などの奇岩が連なる約4kmにもわたる渓谷です。秋の見事な紅葉とのコントラストなど四季折々の絶景を見ることができます。","老舗の8つの酒造りの蔵元が軒を並べ、蔵元から伸びるレトロな赤レンガの煙突が連なる酒蔵通り。カフェや料理店が併設された蔵元や、お酒の試飲ができる蔵元もあり、ゆっくりまち歩きを楽しめます。"],"images/12"],
	["安芸高田市",["神楽","毛利元就"],["安芸高田市は神楽のまち。市内には22の神楽団があり、地域のお宮、神楽門前湯治村、県内外のお祭りやイベントで、洗練された舞を披露しています。","戦国時代の武将、毛利元就。その元就が生涯を過ごしたのが安芸高田市です。市内には毛利氏ゆかりの史跡が数多く残されており、戦国時代の足跡を辿ることができます。"],"images/13"],
];

var shufflecount=0;

$(document).ready(function(){
	randomMosaic();
});
function randomMosaic() {

	//現在のズーム画像を取得
	var currentLastCity = $("#frame13 .photo").attr('src').replace(/images./ig, "");
	currentLastCity = currentLastCity.replace(/.[0-9]l.jpg/ig,"");
	
	clearTimeout(timer);
	timer = setTimeout("randomMosaic()", interval);
	$(".cityname").animate({width: "0"},500);
	$(".caption").fadeOut(500);


	shuffle();

	function shuffle(){
		for ( i=0 ; i<26 ; i++ )
		{
			//0～12までの乱数を作成し、変数Rndに格納する
			var Rnd = Math.floor(Math.random()*13);
			var str1 = city[0];    //配列最初の要素
			var str2 = city[Rnd];  //乱数で決定した要素
	
			//配列の各要素を入れ替える
			city[Rnd]=str1;
			city[0]  =str2;
		}
		var nextCity=city[12][3].replace(/images./ig, "");
		if(shufflecount>0 && currentLastCity==nextCity){
			//alert(currentLastCity+","+nextCity+"シャッフル"+shufflecount+1+"回目");
			shuffle();
		}
		shufflecount++;
	}
	
	

	var j=0;

	$("#slide .photo").each(function(){
		$(this).fadeOut(2000,function(){
		var Rnd2 = Math.floor(Math.random()*2)+1;
		var newurl = $(this).attr('src').replace(/images.[0-9]+/ig, city[j][3]);
		newurl = newurl.replace(/[0-9]l*.jpg/ig, Rnd2+".jpg");
		var newurlLarge = newurl.replace(/l*.jpg/ig, "l.jpg");
		var newcity = $(this).parent().children(".cityname").children("img").attr('src').replace(/images.[0-9]+/ig, city[j][3]);
		$(this).parent().children(".cityname").children("img").attr('alt', city[j][0]);
		$(this).parent().children(".cityname").children("img").attr('src', newcity);
		$(this).parent().children(".caption").children("dl").children("dt").html(city[j][1][Rnd2-1]);
		$(this).parent().children(".caption").children("dl").children("dd").html(city[j][2][Rnd2-1]);
		j++;
		if(j==13){
			$(this).attr('src', newurlLarge);
		}else{
			$(this).attr('src', newurl);
		}
		});
	}).fadeIn(2000).parents("ul").children("li:last").children(".photo").animate({height: "show", opacity: 1.0}, 1000, function(){
		$("#slide li:last .cityname").animate({width: "160px"}, 1000,function(){
			$("#slide li:last .caption").animate({height: "show"}, 1000);
		});
	});
 }

$("#slide li:not('li:last')").click(function(){
	$("#slide li:last .photo").stop(true,true);
	$(".cityname").stop(true,true);
	$(".caption").stop(true,true);
	
	clearTimeout(timer);
	timer = setTimeout("randomMosaic()", interval);
	$(".cityname").animate({width: "0"},500);
	$(".caption").fadeOut(500);

	var currentId=$(this).attr('id').replace(/frame/ig, "");
	var currentType=$(this).children("img").attr('src').replace(/images.[0-9]+./ig, "");
	currentType=currentType.replace(/.jpg/ig,"");
	//var largeType=$("#slide li:last .photo").attr('src').replace(/images.[0-9]+./ig, "");
	//largeType=largeType.replace(/l.jpg/ig,"");
	if(currentId!="13"){
		var str1 = city[12];
		var str2 = city[currentId-1];

		//配列を入れ替える
		city[currentId-1]=str1;
		city[12]  =str2;

		$(this).children(".photo").html(function(){
			$(this).fadeOut(500,function(){
			var newurl = $(this).attr('src').replace(/images.[0-9]+/ig, city[currentId-1][3]);
			//var type1 =newurl.replace(/[0-9]l*.jpg/ig,"1.jpg");
			//var type2 =newurl.replace(/[0-9]l*.jpg/ig,"2.jpg");
			//if(largeType==1){
			//	$(this).attr('src', type1);
			//}else{
			//	$(this).attr('src', type2);
			//}
			$(this).attr('src', newurl);
			});
		}).fadeIn(500);
		$("#slide li:last .photo").html(function(){
			$(this).fadeOut(500,function(){
			var newurl = $(this).attr('src').replace(/images.[0-9]+/ig, city[12][3]);
			var type1 =newurl.replace(/[0-9]l*.jpg/ig,"1l.jpg");
			var type2 =newurl.replace(/[0-9]l*.jpg/ig,"2l.jpg");
			var newcity = $(this).parent().children(".cityname").children("img").attr('src').replace(/images.[0-9]+/ig, city[12][3]);
			if(currentType==1){
				$(this).attr('src', type1);
			}else{
				$(this).attr('src', type2);
			}
			$(this).parent().children(".cityname").children("img").attr('src', newcity);
			$(this).parent().children(".cityname").children("img").attr('alt', city[12][0]);
			if(currentType==1){
				$(this).parent().children(".caption").children("dl").children("dt").html(city[12][1][0]);
				$(this).parent().children(".caption").children("dl").children("dd").html(city[12][2][0]);
			}else{
				$(this).parent().children(".caption").children("dl").children("dt").html(city[12][1][1]);
				$(this).parent().children(".caption").children("dl").children("dd").html(city[12][2][1]);
			}
			});
		}).fadeIn(500, function(){
			$("#slide li:last .cityname").animate({width: "160px"}, 1000,function(){
				$("#slide li:last .caption").animate({height: "show"}, 1000);
			});
		});
	}
});

$("#slide li").mouseover(function(){
	$("#tooltips").stop(true,true).fadeIn(1000);
}).mousemove(function(e){
	var currentId=$(this).attr('id').replace(/frame/ig, "");
	var currentURL = $(this).children(".photo").attr('src').replace(/images.[0-9]+./ig, "");
	currentURL = currentURL.replace(/l*/ig,"");
	currentURL = currentURL.replace(".jpg","");
	$("#tooltips dt").html(city[currentId-1][0]);
		$("#tooltips dd").html(city[currentId-1][1][currentURL-1]);
		var w=$("#tooltips dd").width();
	if(e.clientX<630){
		$("#tooltips").css({top:e.clientY-110,left:e.clientX+10});
    }else{
		$("#tooltips").css({top:e.clientY-110,left:e.clientX-(w+10)});
	}
});
$("#slide").mouseout(function(){
	$("#tooltips").fadeOut(1000);
});