//<![CDATA[
$(function(){
	var wsort_flg = false;
	var rsort_flg = false;

	//setup
	var vg = $("#grid-content").vgrid({
		easeing: "easeInOutQuint",
		useLoadImageEvent: true,
		useFontSizeListener: true,
		time: 400,
		delay: 10,
		fadeIn: {
			time: 200,
			delay: 15
		},
	});





	//add map
	vg.find("#n11access a,#addmapabout").live('click', function(e){
		var _item = $('<div id="access">\
<div class="head">\
<ul>\
<li class="btn1"><a href="print/access_map.html"><img src="img/btn_print.gif" alt="プリント用ページを開く" width="56" height="30" /></a></li>\
<li class="btn3"><a href="http://maps.google.co.jp/maps?f=q&source=s_q&hl=ja&geocode=&q=%E6%9C%89%E9%99%90%E4%BC%9A%E7%A4%BE%E3%82%B5%E3%82%AC&sll=35.607348,139.770813&sspn=0.247309,0.339546&brcurrent=3,0x60188be9d877afdd:0xa17be6dc51846e8d,1&ie=UTF8&hq=%E6%9C%89%E9%99%90%E4%BC%9A%E7%A4%BE%E3%82%B5%E3%82%AC&hnear=&ll=35.664754,139.75922&spn=0.001595,0.002618&z=18"><img src="img/btn_googlemap.gif" alt="Google Mapで表示" title="Google Mapで表示" width="93" height="30" /></a></li>\
<li class="btn4"><a href="#"><img src="img/btn_close.gif" alt="閉じる" width="31" height="30" id="closemap" /></a></li>\
</ul>\
</div>\
<div class="body"><a href="#"><img src="img/access_map.gif" width="685" height="639" /></a></div>\
<div class="foot">\
<ul>\
<li class="left">SAGA Inc.<br />東京都港区東新橋1-2-8<br />日通銀座ビル4階 〒105-0021<br />TEL.03-3571-2051<br /><br />※汐留・日テレタワー向かい<br />1階に日本通運の営業所あり</li>\
<li class="center">電車<br />○浅草線　新橋駅<br />○大江戸線　汐留駅<br />○ゆりかもめ　新橋駅<br />○JR 新橋駅　烏森口<br />○銀座線　新橋駅<br />（各駅より徒歩3～5分）</li>\
<li class="right">駐車場<br />汐留タワー駐車場［24時間営業］<br />30分毎300円（8:00～24:00）<br />深夜早朝は150円<br />1日（24:00まで）2000円先払い<br />24時間 2500円先払い</li>\
<li class="qr"><img src="img/access_qr.gif" /></li>\
</ul>\
</div>\
</div>')
			.hide();
		vg.prepend(_item);
		vg.vgrefresh(null, null, null, function(){
			_item.fadeIn(500);
		});
		$('html,body').animate({ scrollTop: 0 },{ duration:1000 , easing:"easeInOutExpo" });
		$("#addmap").css("visibility", "hidden");
		$("#addmapabout").css("visibility", "hidden");
		return false;
	});
	//delete map
	vg.find("#access .body a , #access .head .btn4 a").live('click', function(e){
		$("#access").fadeOut(400, function(){
			vg.vgrefresh("easeInOutExpo",350,16,null);
			$("#access").remove();
			vg.vgrefresh("easeInOutExpo",350,12,null);
		});
		$("#addmap").css("visibility", "visible");
		$("#addmapabout").css("visibility", "visible");
		return false;
	});

	//add info
	vg.find("#n04info a").live('click', function(e){
		var _itemI = $('<div id="info">\
<div class="head"><a href="#"><img src="img/btn_close.gif" alt="閉じる" /></a></div>\
<div class="body">\
<img src="img/dum.gif" width="1" height="28" />\
<h1 class="pb12">グラフィックデザイナーを募集</h1>\
<div class="txt">\
美術系学校を卒業しデザイナーとして実務経験のある方。<br />\
クライアントのさまざまなニーズや課題に応えられる<br />\
表現力の幅と理解力がある方。<br />\
食品や飲料のパッケージや企業のロゴ・シンボルマークの<br />\
デザインに自信がある方を募集しています。<br />\
※デザイナー未経験者のご応募は受け付けておりません。<br />\
<br />\
応募方法<br />\
履歴書（写真・メールアドレス必須）<br />\
A4サイズにまとめた作品（返却不可）<br />\
志望動機・職務経歴書の４点を郵送にてお送りください。<br />\
<br />\
応募締切<br />\
2011年6月28日（火）先着順に書類選考を行います。<br />\
通過者には面接日をお知らせいたします。<br />\
※締切日前に採用者が決定する場合もございます。<br />\
<br />\
書類送付先<br />\
〒105-0021 東京都港区東新橋1-2-8 日通銀座ビル4階<br />\
SAGA INC. 採用担当\
</div></div>\
<div class="foot">\
→ May. 27.2011 グラフィックデザイナーを募集<br />\
<a href="#" id="goinfo01">→ Jan. 01.2011 あけましておめでとうございます</a><br />\
<a href="#" id="goinfo02">→ Dec. 28.2010 NYADC MERIT</a><br />\
</div></div>')
			.hide();
		vg.prepend(_itemI);
		vg.vgrefresh(null, null, null, function(){
			_itemI.fadeIn(500);
		});
		$('html,body').animate({ scrollTop: 0 },{ duration:1000 , easing:"easeInOutExpo" });
		$("#addinfo").css("visibility", "hidden");
		return false;
	});
	//change info04
	vg.find("#goinfo04").live('click', function(e){
		$("#info .body").html('<img src="img/dum.gif" width="1" height="28" />\
<h1 class="pb12">グラフィックデザイナーを募集</h1>\
<div class="txt">\
美術系学校を卒業しデザイナーとして実務経験のある方。<br />\
クライアントのさまざまなニーズや課題に応えられる<br />\
表現力の幅と理解力がある方。<br />\
食品や飲料のパッケージや企業のロゴ・シンボルマークの<br />\
デザインに自信がある方を募集しています。<br />\
※デザイナー未経験者のご応募は受け付けておりません。<br />\
<br />\
応募方法<br />\
履歴書（写真・メールアドレス必須）<br />\
A4サイズにまとめた作品（返却不可）<br />\
志望動機・職務経歴書の４点を郵送にてお送りください。<br />\
<br />\
応募締切<br />\
2011年6月28日（火）先着順に書類選考を行います。<br />\
通過者には面接日をお知らせいたします。<br />\
※締切日前に採用者が決定する場合もございます。<br />\
<br />\
書類送付先<br />\
〒105-0021 東京都港区東新橋1-2-8 日通銀座ビル4階<br />\
SAGA INC. 採用担当\
</div>');
		$("#info .foot").html('→ May. 27.2011 グラフィックデザイナーを募集<br />\
<a href="#" id="goinfo01">→ Jan. 01.2011 あけましておめでとうございます</a><br />\
<a href="#" id="goinfo02">→ Dec. 28.2010 NYADC MERIT</a><br />\
');
		return false;
	});
	//change info01
	vg.find("#goinfo01").live('click', function(e){
		$("#info .body").html('<img src="info/img/01.gif" width="450" height="307" />\
<h1>あけましておめでとうございます<br />本年も宜しくお願い申し上げます</h1>\
<div class="txt">\
サガも新しい一年を迎えることができました。これもご支援をいただいております皆様のおかげと心より感謝しております。<br />皆様のお役に立てるよう、また新鮮な気持ちでひとつひとつの仕事を楽しみながら挑んで参りますので、本年も宜しくお願いします。<br />本年が皆様にとって幸多く、素敵な年でありますように！（祈）\
</div>');
		$("#info .foot").html('<a href="#" id="goinfo04">→ May. 27.2011 グラフィックデザイナーを募集</a><br />\
→ Jan. 01.2011 あけましておめでとうございます<br />\
<a href="#" id="goinfo02">→ Dec. 28.2010 NYADC MERIT</a><br />');
		return false;
	});
	//change info02
	vg.find("#goinfo02").live('click', function(e){
		$("#info .body").html('<img src="info/img/02.jpg" width="450" height="267" />\
<h1>NYADC年鑑に掲載されました。</h1>\
<div class="txt">ヨコハマカクテルコンペティション2009のポスターがニューヨークのアートディレクターズクラブ（NYADC）のMERITを獲得。<br/ >ART DIRECTORS ANNUAL 89の年鑑に掲載されました。バーテンダー協会が主催したこのイベントは、横浜開港150周年を記念し、パンパシフィックホテルで開催。不況が叫ばれる中、予想を上回る来場者にも恵まれ大変やりがいを感じた仕事です。横浜のイニシャル「Y」をカクテルグラスにした単純さが良かったのでしょうか？海を越えて評価していただけたことに感謝です。\
</div>');
		$("#info .foot").html('<a href="#" id="goinfo01">→ Jan. 01.2011 あけましておめでとうございます</a><br />\
→ Dec. 28.2010 NYADC MERIT<br />\
<a href="#" id="goinfo03">→ Dec. 25.2010 年末年始休暇のおしらせ</a>');
		return false;
	});
	//change info03
	vg.find("#goinfo03").live('click', function(e){
		$("#info .body").html('<img src="info/img/03.gif" width="450" height="307" />\
<h1>年末年始休暇のおしらせ</h1>\
<div class="txt">いつもサガをご愛顧賜りありがとうございます。<br />年末年始の休暇を下記の通り予定しております。<br />皆様にはご迷惑をおかけしますが何卒ご了承いただけますよう<br />お願い申し上げます。<br /><br />\
仕事納め　12月28日（火）18:00<br />\
仕事始め　1月5日（水）13:00\
</div>');
		$("#info .foot").html('<a href="#" id="goinfo01">→ Jan. 01.2011 あけましておめでとうございます</a><br />\
<a href="#" id="goinfo02">→ Dec. 28.2010 NYADC MERIT</a><br />\
→ Dec. 25.2010 年末年始休暇のおしらせ');
		return false;
	});
	//delete info
	vg.find("#info .head a,#info .body").live('click', function(e){
		$("#info").fadeOut(400, function(){
			vg.vgrefresh("easeInOutExpo",350,16,null);
			$("#info").remove();
			vg.vgrefresh("easeInOutExpo",350,12,null);
		});
		$("#addinfo").css("visibility", "visible");
		return false;
	});


	//add sensu
	vg.find("#n18sensu a").live('click', function(e){
		var _itemS = $('<div id="bsensu">\
<div class="head"><a href="#"><img src="img/btn_close.gif" alt="閉じる" /></a></div>\
<div class="body">\
<img src="sensu/img/sensu.gif" width="450" height="287" />\
<h1>架空の扇子屋SAGA（仮）</h1>\
<div class="txt">打ち合わせ中、扇子の動きをボーっと眺めながら「ウ〜ン」としばし熟考する。涼をとるだけでなく、冷静になりたい、流れを変えたい。そんな時も扇子は陰ながら活躍しています。時代を経ても愛される扇子には、デザイナーとして学ぶことがたくさんあることに気づきました。平面と立体の中間的な存在。人との距離感。日本の文化的、伝統的な側面。開く閉じる時の流れ。そして、グラフィックデザインを必要とすること。SAGAは扇子を通じて、デザインについて考え、手を動かすことで、私たちの表現の可能性を広げてみたいと思います。架空の扇子屋SAGA（仮）をどうぞよろしく。\
</div></div>\
<div class="foot">\
<a href="#" id="gosensu03">→ Jan. 01.2011 SENSU DESIGN 001</a><br />\
<a href="#" id="gosensu02">→ Jan. 01.2011 SENSU DESIGN 000</a><br />\
→ Jan. 01.2011 架空の扇子屋SAGA（仮）\
</div></div>')
			.hide();
		vg.prepend(_itemS);
		vg.vgrefresh(null, null, null, function(){
			_itemS.fadeIn(500);
		});
		$('html,body').animate({ scrollTop: 0 },{ duration:1000 , easing:"easeInOutExpo" });
		$("#addsensu").css("visibility", "hidden");
		return false;
	});
	//change sensu01
	vg.find("#gosensu01").live('click', function(e){
		$("#bsensu .body").html('<img src="sensu/img/sensu.gif" width="450" height="287" />\
<h1>架空の扇子屋SAGA（仮）</h1>\
<div class="txt">打ち合わせ中、扇子の動きをボーっと眺めながら「ウ〜ン」としばし熟考する。涼をとるだけでなく、冷静になりたい、流れを変えたい。そんな時も扇子は陰ながら活躍しています。時代を経ても愛される扇子には、デザイナーとして学ぶことがたくさんあることに気づきました。平面と立体の中間的な存在。人との距離感。日本の文化的、伝統的な側面。開く閉じる時の流れ。そして、グラフィックデザインを必要とすること。SAGAは扇子を通じて、デザインについて考え、手を動かすことで、私たちの表現の可能性を広げてみたいと思います。架空の扇子屋SAGA（仮）をどうぞよろしく。\
</div>');
		$("#bsensu .foot").html('<a href="#" id="gosensu03">→ Jan. 01.2011 SENSU DESIGN 001</a><br />\
<a href="#" id="gosensu02">→ Jan. 01.2011 SENSU DESIGN 000</a><br />\
→ Jan. 01.2011 架空の扇子屋SAGA（仮）');
		return false;
	});
	//change sensu02
	vg.find("#gosensu02").live('click', function(e){
		$("#bsensu .body").html('<img src="sensu/img/sensu00.jpg" width="450" height="287" />\
<h1>SENSU DESIGN 000</h1>\
<div class="txt">扇子をデザインする前に、扇子を入れるパッケージからデザインしてみました。「扇子がうまく収まりつつ、郵送で送れること」「あまり大げさではなくシンプルなもの」を目標にいろいろなカタチを模索した結果、扇子をすこし開いたようなデザインに落ち着きました。最後に空けやすいようにと、お菓子のパッケージに良くついているペリペリとはがせる開封のミシン目を入れ完成。芸大受験の２次試験で紙立体が出た時の焦りを思い出しつつ、あの時の自分に負けじとばかり考えてみました。\
</div>');
		$("#bsensu .foot").html('<a href="#" id="gosensu03">→ Jan. 01.2011 SENSU DESIGN 001</a><br />\
→ Jan. 01.2011 SENSU DESIGN 000<br />\
<a href="#" id="gosensu01">→ Jan. 01.2011 架空の扇子屋SAGA（仮）</a>');
		return false;
	});
	//change sensu03
	vg.find("#gosensu03").live('click', function(e){
		$("#bsensu .body").html('<img src="sensu/img/sensu01.jpg" width="450" height="287" />\
<h1>SENSU DESIGN 001</h1>\
<div class="txt">チェック柄はその昔、スコットランドで家紋みたいな役割を果たしていたそうです。そして、いまの日本では制服にも使われるほど日常的に目にする柄になりました。でも、この扇子を見るとチェック柄はやはり異国の文化だったことを再認識できませんか？異文化を自分たちの生活に積極的に取り入れてきた日本人の特性がひとつの柄から見えてくることもあるんですね。\
</div>');
		$("#bsensu .foot").html('→ Jan. 01.2011 SENSU DESIGN 001<br />\
<a href="#" id="gosensu02">→ Jan. 01.2011 SENSU DESIGN 000</a><br />\
<a href="#" id="gosensu01">→ Jan. 01.2011 架空の扇子屋SAGA（仮）</a>');
		return false;
	});
	//delete sensu
	vg.find("#bsensu .head a,#bsensu .body").live('click', function(e){
		$("#bsensu").fadeOut(400, function(){
			vg.vgrefresh("easeInOutExpo",350,16,null);
			$("#bsensu").remove();
			vg.vgrefresh("easeInOutExpo",350,12,null);
		});
		$("#addsensu").css("visibility", "visible");
		return false;
	});


	//add books
	vg.find("#n07books a").live('click', function(e){
		var _item = $('<div id="books">\
<div class="head">\
<a href="#"><img src="img/btn_close.gif" alt="閉じる" id="closemap" /></a>\
</div>\
<div class="body"><img src="img/books.jpg" width="450" height="715" /></div>\
<div class="foot">SAGA INC.の仕事は、NYADC、NYTDC、TOKYOADC、<br />TOKYOTDCなどのデザイン・広告の年鑑をはじめ、<br />PIEBOOKSなどのデザイン関連書籍に多数紹介されています。</div>\
</div>')
			.hide();
		vg.prepend(_item);
		vg.vgrefresh(null, null, null, function(){
			_item.fadeIn(500);
		});
		$('html,body').animate({ scrollTop: 0 },{ duration:1000 , easing:"easeInOutExpo" });
		$("#addbooks").css("visibility", "hidden");
		return false;
	});
	//delete books
	vg.find("#books .head a,#books .body,#books .foot").live('click', function(e){
		$("#books").fadeOut(300, function(){
			vg.vgrefresh("easeInOutExpo",350,16,null);
			$("#books").remove();
			vg.vgrefresh("easeInOutExpo",350,12,null);
		});
		$("#addbooks").css("visibility", "visible");
		return false;
	});


	//add about
	vg.find("#n02about a").live('click', function(e){
		var _item = $('<div id="about">\
<div class="head">\
<a href="#"><img src="img/btn_close.gif" alt="閉じる" id="closemap" /></a>\
</div>\
<div class="body">\
<dl><dt>社名</dt>\
<dd>有限会社サガ 　SAGA INC.</dd></dl>\
<dl><dt>所在地</dt>\
<dd>東京都港区東新橋１-２-８ 日通銀座ビル4F 〒105-0021<br /><br /><a href="#" id="addmapabout">ACCESS MAP<img src="img/ico_maru.gif" class="icon1" /></a></dd></dl>\
<dl><dt>連絡先</dt>\
<dd>TEL 03-3571-2051   FAX 03-3571-2053<br /><br /><a href="mailto:info@sagainc.co.jp">EMAIL<img src="img/ico_mail.gif" class="icon2" /></a>　　ORDER FORM<img src="img/ico_mail.gif" class="icon2" /></dd></dl>\
<dl><dt>業務内容</dt>\
<dd>ブランディング、広告、グラフィック、パッケージ、Web、映像、<br />コミュニケーションデザインなど、クリエイティブで解決できることのすべて。</dd></dl>\
<dl><dt>代表</dt>\
<dd>寒河江 亘太 　KOTA SAGAE<br />Art Director / Graphic Designer<br />1972年生まれ。 桑澤デザイン研究所卒。<br />エージーに入社し パッケージデザイン、CI・VIのデザインを学ぶ。<br />その後、テイブルに入社し 柳町恒彦（ADC会員）の元で広告を学ぶ。<br />シューデザインにアートディレクターとして入社。後に代表就任。<br />2006年 移転を機に社名をサガに変更。現在に至る。<br />NPO法人 東京タイプディレクターズクラブ会員</dd></dl>\
<dl><dt>受賞・入選</dt>\
<dd>第45回 日経広告賞（部門賞）<br />第64回 毎日広告デザイン賞（発言広告の部・奨励賞）<br />第65回 毎日広告デザイン賞（奨励賞）<br />NY ADC（81th Merit Award）<br />NY ADC（82th Merit Award）<br />第12回 環境広告コンクール 環境広告大賞・環境大臣賞（雑誌部門）<br />第45回 消費者のためになった広告コンクール（雑誌広告 情報・通信部門金賞）<br />2004 NY TDC 入選<br />2004産業広告大賞（銅賞）<br />2004日経MJ広告賞（部門賞）<br />2004電通賞（ポスター第１部門優秀作品賞）<br />第53回 日経広告賞（部門賞）<br />第48回 日本雑誌広告賞（銀賞）<br />2009 NY TDC 入選<br />NY ADC（86th Merit Award）<br />東京ADC入選   東京TDC入選</dd></dl>\
</div>\
</div>')
			.hide();
		vg.prepend(_item);
		vg.vgrefresh(null, null, null, function(){
			_item.fadeIn(500);
		});
		$('html,body').animate({ scrollTop: 0 },{ duration:1000 , easing:"easeInOutExpo" });
		$("#addabout").css("visibility", "hidden");
		return false;
	});
	//delete about
	vg.find("#about .head a").live('click', function(e){
		$("#about").fadeOut(400, function(){
			vg.vgrefresh("easeInOutExpo",350,16,null);
			$("#about").remove();
			vg.vgrefresh("easeInOutExpo",350,12,null);
		});
		$("#addabout").css("visibility", "visible");
		return false;
	});




	//sort works archive
	vg.find("#n03archive a").live('click', function(e){
		if(wsort_flg === false){
		wsort_flg = !wsort_flg;
		vg.vgrefresh();
		$("#grid-content").vgsort(function(a, b){
			var _a = $(a).attr('class');
			var _b = $(b).attr('class');
			var _c = wsort_flg ? 1 : -1 ;
			return (_a > _b) ? _c * -1 : _c ;
		}, "easeInOutExpo", 400, 10);
		wsort_flg = true;
		return false;
		}else{
		vg.vgrefresh();
		$("#grid-content").vgsort(function(a, b){
			var _a = $(a).attr('id');
			var _b = $(b).attr('id');
			var _c = rsort_flg ? 1 : -1 ;
			return (_a > _b) ? _c * -1 : _c ;
		}, "easeInOutExpo", 400, 10);
		$('html,body').animate({ scrollTop: 0 },{ duration:1000 , easing:"easeInOutExpo" });
		wsort_flg = false;
		return false;
		}
	});


$(function () {
    $('#link_to_top').click(function () {
        $('html,body').animate({ scrollTop: 0 },{ duration:900 , easing:"easeInOutExpo" });
		return false;
    });
});


});






/*
//mouseOver

(function($) {
$(function() {

  $('li.top').opOver(1.0,0.6,200,400);
  $('.opacity').opOver(1.0,0.6,200,400);
  $('#n06twitter').wink(600,1.0,0.5);
  $('#n07blog').wink(600,1.0,0.5);

});

})(jQuery);
*/


//]]>