(function($){
$j.fn.xGallery=function(){
/*************************
Setting
*************************/
var gallery_on=false;
var blockname="blocklayer";
var blockdepth=1000;
var lot=325;
var listname="listlayer";
var listpadding=75;
var barname="bar";
var barmargin=12;
var list_el="";
var block_el="";
var bar_el="";
var box_el=$('div#box');
var	menu_el=$('div#menu');
var footer_el=$('div#footer');
var bgstyle=$('body').css("backgroundImage");
var canvasname="canvasBox";
var imgMargin=180;
var globalIndex=0;
/*************************
Execution
*************************/

$('a#gallery_btn').show().click(xView);




/*************************
Execution
*************************/
//close gallery
function xClose(){
	gallery_on=false;
	xSetBodyBG(true);
	xScrollTop();
	xContentView(true);
	block_el.hide();
	list_el.hide();
	bar_el.hide();
	$("#"+canvasname).remove();
	return false;
}
function xView(){
	xScrollTop();
	xContentView(false);
	if(!list_el[0]){
		xSetBodyBG();
		xSetList();
		xSetBar();
		gallery_on=true;
		list_el=$("ul#"+listname);
		block_el=$("div#"+blockname);
		bar_el=$("div#"+barname);
		xSetSize();
		$(window).bind("resize",xSetSize);
		$("a#gallery_close").click(xClose);
		$("img",list_el).click(xImgLarge);
	}else{
		xSetBodyBG();
		gallery_on=true;
		block_el.show();
		list_el.show();
		bar_el.show();
		xSetSize();
	}
	return false;
}

function xContentView(b){
	if(b){
		box_el.show();
		menu_el.show();
		footer_el.show();
	}else{
		box_el.hide();
		menu_el.hide();
		footer_el.hide();
	}
}

function xImgLarge(){
	var n=$(this).attr("id").substr(1,3);
	var size_obj=xGetSize();
	$.post("./images/gallery/b/index.php",{no:n},
		function(data){
			var kari_array=data.split(",");
			var imgW=kari_array[0];
			var imgH=kari_array[1];
			var newH=size_obj.ch-imgMargin;
			var newW=(newH/imgH)*imgW;
			//page set
			globalIndex=n;
			
			//make canvas&img
			$("body").append("<div id='"+canvasname+"'><img id='l"+n+"' w='"+imgW+"' h='"+imgH+"' width='"+newW+"' height='"+newH+"' src='' /></div>");
			//set pager
			xSetPager();
			
			var target=$('#'+canvasname);
			var img_el=$("img",target);
			target.
				css({
					background:"#333",
					width:size_obj.cw,
					height:size_obj.ch,
					position:"absolute",
					top:-size_obj.ch,
					left:0,
					zIndex:blockdepth+2
				}).
				animate({top:0},"slow",function(){
					list_el.hide();
					img_el.attr("src","./images/gallery/b/"+n+".jpg");
				});
			img_el.
				css({
					top:(size_obj.ch/2)-(newH/2)-20,
					left:(size_obj.cw/2)-newW/2
				}).
				click(function(){
					target.remove();
					list_el.show();
				});
		}
	);
	
}

function xSetBodyBG(b){
	if(b) $('body').css('background','transparent '+bgstyle);
	else $('body').css('background','#000');
}

function xScrollTop(){
	$(($.browser.opera)?"html":"html,body").scrollTop(0);
}

//set block height
function xSetSize(imgChg){
	if(gallery_on){
		var size_obj=xGetSize();
		var canvas_el=$("#"+canvasname);
		var img_el=$("img",canvas_el);
		var imgW=img_el.attr('w');
		var imgH=img_el.attr('h');
		var newH=size_obj.ch-imgMargin;
		var newW=(newH/imgH)*imgW;
		bar_el.width(list_el.width());
		if(canvas_el[0]){
			canvas_el.height(size_obj.ch).width(size_obj.cw);
			if(typeof imgChg=='boolean') img_el.animate({top:(size_obj.ch/2)-(newH/2)-20,left:(size_obj.cw/2)-newW/2,height:newH,width:newW},function(){img_el.attr("src","./images/gallery/b/"+globalIndex+".jpg")});
			else img_el.height(newH).width(newW).css({top:(size_obj.ch/2)-(newH/2)-20,left:(size_obj.cw/2)-newW/2});
		}
	}
}

function xGetSize(){
	var obj={};
	var ua=$.browser;
	var ie6=(ua.msie&&ua.version<7);
	obj['ch']=(ie6)?document.body.clientHeight:$("html").attr('clientHeight');
	obj['sh']=(ie6)?document.body.scrollHeight:$("html").attr('scrollHeight');
	if(obj['ch']>obj['sh']) obj['sh']=(ua.opera)?obj['ch']:"100%";
	obj['cw']=(ie6)?document.body.clientWidth:$("html").attr('clientWidth');
	obj['sw']=(ie6)?document.body.scrollWidth:$("html").attr('scrollWidth');
	if(obj['cw']>obj['sw']) obj['sw']=(ua.opera)?obj['wh']:"100%";
	return obj;
}

//make&view list
function xSetList(){
	if(!gallery_on){
		$("body").append("<ul id='"+listname+"'></ul>");
		var target=$("#"+listname);
		var list="";
		for(var i=0;i<lot;i++) list+="<li><img id='n"+i+"'src='./images/gallery/s/"+i+".jpg' width='80' height='80' /></li>";
		$(target).append(list).css({zIndex:blockdepth+1,padding:"10px 10px 55px 10px"});
		$("img",target).animate({opacity:0.7},1).hover(
			function(){
				$(this).animate({opacity:1},"fast")
			},
			function(){
				$(this).animate({opacity:0.7},1);
			}
		);
	}
}
//make&view bottom bar
function xSetBar(){
	if(!gallery_on){
		$("body").append("<div id='"+barname+"'><p>一郎さんのプリント工房 デザインギャラリー</p><a href='#' id='gallery_close'>ギャラリーを閉じる</a></div>");
		var target=$("#"+barname);
		target.css("zIndex",blockdepth+3);
	}
}

function xSetPager(){
	var bPrev=(globalIndex==0);
	var bNext=(lot-1==globalIndex);
	$('#'+canvasname).append("<a id='gallery_prev' href='#'>←</a><a id='gallery_next' href=''>→</a>");
	$("a#gallery_prev").
		css("zIndex",blockdepth+4).
		click(function(){
			return xPaging(false);
		})
	$("a#gallery_next").
		css("zIndex",blockdepth+5).
		click(function(){
			return xPaging(true);
		});
	if(bPrev) $("a#gallery_prev").hide();
	if(bNext) $("a#gallery_next").hide();
}

function xPaging(b){
	// set index
	if(b) globalIndex++;
	else globalIndex--;
	// view nextBtn
	if(lot-1==globalIndex) $("a#gallery_next").hide();
	else $("a#gallery_next").show();
	// view prevBtn
	if(globalIndex==0) $("a#gallery_prev").hide();
	else $("a#gallery_prev").show();
	
	//load img
	var img_el=$("img","div#"+canvasname);
	$.post("./images/gallery/b/index.php",{no:globalIndex},
		function(data){
			var kari_array=data.split(",");
			img_el.attr({
				"src":"",
				"w":kari_array[0],
				"h":kari_array[1],
				"id":"l"+globalIndex
			});
			xSetSize(true);
		}
	);
	
	return false;
}

//*************************
return this;
}})(jQuery);