$(function(){
	var dis_flag = false;
	var gallery = [];

	$("#myGallery").css("position", "relative");
	$("#GalleryCont li").each(function(){
		gallery.push({ html:$(this).html(), width:680, height:260 });
	});
	$("#GalleryCont").hide(0);

	var contents_property = {};
	init();

	function init() {
		var pos = $("#myGalleryNavi").offset();
		contents_property.width  =  $("#myGalleryNavi").width();
		contents_property.height =  $("#myGalleryNavi").height();
		contents_property.left =  pos.left;
		contents_property.top  =  pos.top;
		contents_property.z    =  9999;
	}

	var scr = $('#myGallery').append('<div id="GalleryScr"></div>');
	$("#GalleryScr").css({
		position : 'absolute',
		width:  contents_property.width + 'px',
		height: '320px',
		left: '0px',
		top: '0px',
		'z-index' : 5000
	});
	$("#GalleryScr").hide(0);

	var scr = $('#myGallery').append('<div id="GalleryScrBack"><img src="img/index_screen_close.gif"></div>');
	$("#GalleryScrBack").css({
		position : 'absolute',
		'text-align' : 'right',
		width:  contents_property.width + 'px',
		height: '320px',
		left: '0px',
		top: '0px',
		'z-index' : 4999,
		background : '#ffffff',
		opacity   : '0.7'
	});
	$("#GalleryScrBack").hide(0);


	$("#myGalleryNavi ul li").each(function(){
		this.index = $("#myGalleryNavi ul li").index(this);
		this.target = gallery[this.index];
	}).hover(
		function(){
			$(this).children('a').css('background', '#C10B0B');
			$(this).children('a').css('cursor', 'pointer');

		},
		function(){
			$(this).children('a').css('background', '#E2E2E2');
			$(this).children('a').css('cursol', 'auto');
		}

	).click(function(){
		if (dis_flag == false) {
			$("#GalleryScrBack").show();
			$("#GalleryScr").empty();
			$("#GalleryScr").show(0);
			$("#GalleryScr").append('<div></div>');
			var tar = $("#GalleryScr").children('div').css({
				display    : 'none',
				background : '#ffffff',
				padding    : '10px',
				border     : 'solid 4px #e0e0e0',
				width      : this.target.width + 'px',
				height     : this.target.height + 'px'
			});

			tar.append(this.target.html);
			tar.css({
				'margin-left' : ($("#GalleryScr").width() - this.target.width) / 2 + 'px',
				'margin-top'  : ($("#GalleryScr").height() - this.target.height) / 4 + 'px'
			});

			tar.fadeIn(200, function(){
				dis_flag = true;
			});
		}
	});

	$("#GalleryScr, #GalleryScrBack").click(function(){
		$("#GalleryScr").fadeOut(200, function(){
			$("#GalleryScrBack").hide(0);
			dis_flag = false;
		});
	});

	

});