$(function(){

	var layer = $('<div id="box_layer"></div>');
	var win = $('<div id="box_window"><div id="CloseBtn"><a href="#"><img src="/images/common/parts/gallery/close.gif" alt="閉じる" width="60" height="20" /></a></div><div class="clearfix"><div id="PrevBtn"><a href="#" class="prevImage"><img src="/images/common/parts/gallery/prev.gif" alt="前へ" width="21" height="21" /></a></div><div id="BoxImage"></div><div id="NextBtn"><a href="#" class="nextImage"><img src="/images/common/parts/gallery/next.gif" alt="次へ" width="21" height="21" /></a></div></div></div>');
	var galleryBox = $('.galleryBox');
	var img = $('<img />');
	var imgNum = 0;
	var parsed = 0;
	var openFlg = false;
	var imgArray=[];
	var closeBtn;
	//var date = (new Date()).getTime();
	
	
	layer.css('opacity', '0.9');
	$('body').append(layer).append(win);
	
	
	galleryBox.click(function(e){
		e.preventDefault();
		imgNum = 0;
		openFlg = true;
		
		if ( parsed == 0 ){
		//XML＆画像のロード
			$.ajax({
				type: "GET",
				url: "/gallery/index.xml?"+20100802,
				dataType: "xml",
				success: function(xml) { parseXml(xml); }
			});
			
			//XMLを解析配列に追加
			function parseXml(xml)
			{
				//find every Tutorial and print the author
				$(xml).find("image").each(function(){
					$('<img />').attr('src', $(this).attr('src'));
					imgArray.push($(this).attr("src"));
				});	
				//alert(imgArray[0]);
				parsed = 1;
				show();
				
			}
		}else{
			show();
		}
	});
	
	//画像と次へ前への設定
	function show(){
		//alert("show");
		img.attr('src', imgArray[imgNum]);
		closeBtn = $('#CloseBtn a');
		
		layer.fadeIn(300, function(){
			if (openFlg) {
				fixPos();
			}
		})				
		
		closeBtn.click(close);
		$('#box_window a.nextImage').click(next);
		$('#box_window a.prevImage').click(prev);
	}
	
	//場所を整える
	function fixPos(){
		
		var winH = $(window).scrollTop();
		//var w = img.attr('width') ; 画像のサイズで可変する場合
		var w = 800;
		//var h = img.attr('height'); 画像のサイズで可変する場合
		var h = 532;
		var bodyW = $('body').width();
		var bodyH = $('body').height();
		var left = (w<bodyW)? -(w/2): -(bodyW/2);
		var top = (h<bodyH)? -(h/2-winH+20): -(bodyH/2-winH+20);
		
		win.css({
			width: (w+50)+'px',
			height: h+'px',
			marginLeft:left + 'px',
			marginTop: top + 'px'
		});
		$('#BoxImage').css("width",w+"px");
		

		if( imgNum == 0 ){
			$('#box_window a.prevImage').css("display","none");
		}else{
			$('#box_window a.prevImage').css("display","block");
		}
		
		if( imgNum == imgArray.length-1 ){
			$('#box_window a.nextImage').css("display","none");
		}else{
			$('#box_window a.nextImage').css("display","block");
		}
		
		$('div#BoxImage').append(img);	
		win.fadeIn(300);
		
		//alert(imgNum);
	}
	
	
	//次へ
	function next(e){
		//alert("next");
		
		e.preventDefault();
		imgNum++;
		
		win.fadeOut(300, function(){
			img.attr('src', imgArray[imgNum]);
			fixPos();
		});
		
	}
	
	//前へ
	function prev(e){
		//alert("prev");
		
		e.preventDefault();
		imgNum = imgNum-1;
		win.fadeOut(300, function(){
			img.attr('src', imgArray[imgNum]);
			fixPos();
		});
	}
	
	//閉じる
	function close(e){
		e.preventDefault();
		imgNum = 0;
		openFlg = false;
		layer.fadeOut(300);
		win.fadeOut(300, function(){
			img.remove();
		});
		closeBtn.unbind('click', close);
	}
});