(function(func) {
	try {
		window.addEventListener("load", func, false);
	} catch(e) {
		window.attachEvent("onload", func);
	}
})(function() {

	// ホテルIDを取得する(実体は逆引き用)
	var hid = document.getElementById('lookup_hid').value;

	// 設定ファイルは動的に変更する
	var xml = '/hotel/' + hid + '/xml/config.xml';
	var timeoutParm = 5000;

	jQuery.ajax({
		url: xml,
		type: 'GET',
		dataType: 'xml',
		cache : false,
		timeout: timeoutParm,
		error: function(){
			// エラーは無視
			alert("カテゴリーデータ読み込み失敗");
		},
		success: function(xml){
			loadComplete(xml);
		}
	});
});

var indexCount = 0;
var timerCount = 1;
var mains = [];
var frames = [];

function loadComplete(xml)
{
	var timer = parseInt($(xml).find("timer").text());
	var photoData = $(xml).find("photoData");

	var hid = document.getElementById('lookup_hid').value;

	var main = '<ul id="mainView">';
	var thumb = '<ul id="thumbView">';
	var frame = ' <ul id="frameView">';

	var mainArray = [];
	var thumbArray = [];

	photoData.each(function()
	{
		mainArray.push($(this).find("main").text());
		thumbArray.push($(this).find("thumb").text());
	});

	var ren = (mainArray.length <= 4)? mainArray.length : 5;
	for(var i = 0; i < ren; i++)
	{
		main  += '<li><img src="/hotel/' + hid +  '/top/xml/' + mainArray[i] + '" alt="ホテルの写真" width="695" height="350" /></li>';
        thumb += '<li><img src="/hotel/' + hid +  '/top/xml/' + thumbArray[i] +'" alt="ホテルの写真" width="50" height="50" /></li>'
		frame += '<li><img src="/hotel/' + hid +  '/top/xml/' + 'img_viewer_frame.gif" alt="" width="58" height="58" /></li>';
	}

	main += '</ul>';
	thumb += '</ul>';
	frame += '</ul>';

	//alert(main+thumb+frame);
	$("#photoViewer").append(main+thumb+frame);

	var mc = 0;
	var fc = 0;

	$("#mainView").children("li").each(function()
	{
		if(mc != 0) $(this).animate({opacity:0},0)
		mains.push($(this));
		mc++;
	});

	$("#frameView").children("li").each(function()
	{
		(fc != 0)? $(this).animate({opacity:0},0):$(this).animate({opacity:0.5},0);;
		frames.push($(this));
		fc++;
	});

	interval = setInterval("counter()", timer);

	$("#frameView li").click(function()
	{
		clearInterval(interval);
		fade($("#frameView li").index(this));
		interval = setInterval("counter()", timer);
	})

}

function counter()
{
	fade(timerCount)
}

function fade(tc)
{
	frames[indexCount].animate({opacity:0},500)
	frames[tc].animate({opacity:0.5},500)
	mains[indexCount].animate({opacity:0},500)
	mains[tc].animate({opacity:1},500)

	indexCount = tc;
	timerCount = tc;
	if (tc < $("#mainView li").length-1)
	{
		timerCount++
	}
	else
	{
		timerCount = 0;
	}

}