/*
*
* index.js
*
*/

$(function (){
	$("#btOpen").click(
		function(){
			if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 6){
				$("#bgwrap").hide(0);
				$("#gHeader").hide(0);
				$("#ContentsArea").hide(0);
				$("#thumb-tray").css('visibility','hidden');
				$("#btOpen").hide(0);
				$("#btClose").show(0);
	    }else{
				$("#bgwrap").fadeOut("slow");
				$("#gHeader").fadeOut("slow");
				$("#ContentsArea").fadeOut("slow");
				$("#thumb-tray").fadeTo("slow",0.1,function(){$(this).css('visibility','hidden')});
				$("#btOpen").fadeOut("slow");
				$("#btClose").fadeIn("slow");
	    }
		}
	);
	$("#btClose").click(
		function(){
			if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 6){
				$("#bgwrap").show(0);
				$("#gHeader").show(0);
				$("#ContentsArea").show(0);
				$("#thumb-tray").css('visibility','visible');
				$("#btOpen").show(0);
				$("#btClose").hide(0);
	    }else{
				$("#bgwrap").fadeIn("slow");
				$("#gHeader").fadeIn("slow");
				$("#ContentsArea").fadeIn("slow");
				$("#thumb-tray").css('visibility','visible').fadeTo("slow",1.0);
				$("#btOpen").fadeIn("slow");
				$("#btClose").fadeOut("slow");
	    }
		}
	);

			if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 6){
				$.supersized({
					//Functionality
					slideshow               :   1,		//Slideshow on/off
					autoplay								:		1,		//Slideshow starts playing automatically
					start_slide             :   4,		//Start slide (0 is random)
					random									: 	0,		//Randomize slide order (Ignores start slide)
					slide_interval          :   4000,	//Length between transitions
					transition              :   1, 		//0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
					transition_speed				:		0,	//Speed of transition
					new_window							:		1,		//Image links open in new window/tab
					pause_hover             :   0,		//Pause slideshow on hover
					keyboard_nav            :   1,		//Keyboard navigation on/off
					performance							:		1,		//0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
					image_protect						:		1,		//Disables image dragging and right click with Javascript
					image_path							:		'imgs/', //Default image path
					//Size & Position
					min_width		      	  	:   1000,		//Min width allowed (in pixels)
					min_height		      	  :   800,		//Min height allowed (in pixels)
					vertical_center         :   1,		//Vertically center background
					horizontal_center       :   1,		//Horizontally center background
					fit_always							:		0,			// Image will never exceed browser width or height (Ignores min. dimensions)
					fit_portrait         		:   1,		//Portrait images will not exceed browser height
					fit_landscape						:   0,		//Landscape images will not exceed browser width
					//Components
					navigation              :   1,		//Slideshow controls on/off
					thumb_tray							:		'#thumb-tray',		// Thumbnail tray
					thumb_list							:		'#thumb-list',		// Thumbnail list
					thumb_forward						:		'#thumb-forward',	// Cycles forward through thumbnail list
					thumb_back							:		'#thumb-back',		// Cycles backwards through thumbnail list
					thumbnail_navigation    :   1,		//Thumbnail navigation
					slide_counter           :   0,		//Display slide numbers
					slide_bg                :   1,		
					slide_title             :   1,		
					slide_copyright         :   1,		//Slide caption (Pull from "title" in slides array)
					slide_sub             	:   1,	
					slide_intro             :   1,	
					slides				 					:  	[		//Slideshow Images
																		{ image : 'imgs/bg-1.jpg', bg : '<img src="imgs/information-01.png" alt="" width="665" height="200" />', title : '<a href="works/event01.html#point01"><a href="works/event01.html#point01">レジャーホテルフェア2009　東京マツシマブース</a>', intro : '閉塞しがちな社会において、エモーショナル且つ元気なエネルギーで展示ブースを構成したいと思いDNAをモチーフにしました。重なりあう二次元と三次元による不思議な重なりが、遠くから近寄ってみたくなる展示空間となり、壁面のビビッドカラーのさし色には新製品であるシャンプー容器のパントーンカラーシリーズを使用し、登場感を表現しました。', url : '', sub : '', copyright : ''},  
																		{ image : 'imgs/bg-2.jpg', bg : '<img src="imgs/information-02.png" alt="" width="665" height="200" />', title : '<a href="works/event01.html#point01"><a href="works/event02.html#point02">銀座マロニエゲート　バレンタイン装飾</a>', intro : '『大切な人に寄せる「感謝」や、「愛情」は、 ハートのルビーのように輝き、暗闇の中に浮かび上がる...。』そんな思いを演出しました。数百のバラで出来たハートは、ドキドキする心臓の鼓動のように点滅を繰り返し、訪れる恋人たちを幸せな気持ちにさせます。', url : '', sub : '', copyright : ''},
																		{ image : 'imgs/bg-3.jpg', bg : '<img src="imgs/information-03.png" alt="" width="665" height="200" />', title : '<a href="works/event03.html#point04">JATA世界旅行博2010</a>', intro : 'JATA世界旅行博(旅行博)は、海外旅行のための情報を一堂に集めた、アジア最大級の旅行関連イベントで、趣向を凝らした企画を立案し、旅行需要の喚起、啓蒙活動を行うイベントです。会場内を世界そのものと位置づけ、来場者は各国のブースを自由に周遊し、世界一周旅行の気分を味わうことができます。会場へのアプローチに空港をイメージした入口ゲートや誘導サインを配し、来場者の期待感を高揚させ、熱気を帯びた世界へと誘いました。', url : '', sub : '', copyright : ''},  
																		{ image : 'imgs/bg-4.jpg', bg : '<img src="imgs/information-04.png" alt="" width="665" height="200" />', title : '<a href="works/event01.html#point01"><a href="works/commerce01.html#point08">ジャンプショップ　ユニバーサル・シティーウォーク大阪店</a>', intro : '漫画誌最大の発行部数を誇る「週刊少年ジャンプ」連載中の作品を中心としたキャラクターグッズを取り扱う集英社オフィシャルショップの関西圏におけるフラッグシップ店として、2010年にオープンしました。「楽しい、面白い、心地よい」空間をお客様にご提供する店舗を目指し、店頭から店内までマンガの世界を表現しつつ、「ジャンプ」のシンボルマークである「海賊マーク」や大人気作品『ONE PIECE』から連想される「海賊船」をモチーフに全体を構成。面白くて楽しいマンガの海。その果てしなく広がる海を海賊船「ジャンプショップ号」で「週刊少年ジャンプ」のキャラクター達が冒険に出航します！', url : '', sub : '<img src="imgs/icon-award.gif" alt="入選アイコン"  />ディスプレイ産業賞2011　ディスプレイ産業奨励賞', copyright : '<img src="imgs/img-mv-copyright-04.png" alt="" width="620" height="12" class="png_bg" />'},
																		{ image : 'imgs/bg-5.jpg', bg : '<img src="imgs/information-05.png" alt="" width="665" height="200" />', title : '<a href="works/commerce02.html#point06">株式会社ナムコ　キッズアートミュージアム</a>', intro : 'コクヨの物作り絵本とナムコの企画運営ノウハウが一体となって実現した「キッズアートミュージアム」。子供達に様々なアートとクリエイティブのコンテンツを特別な空間の中で体験してもらう施設として誕生しました。巨大な物作り絵本という特別な空間で、ワークショップを初めとする様々な体験ができます。子供達の遊びをアート(物作り)体験に置きかえる事のできる質の高い遊びの空間を構築しました。', url : '', sub : '', copyright : ''},  
																		{ image : 'imgs/bg-6.jpg', bg : '<img src="imgs/information-06.png" alt="" width="665" height="200" />', title : '<a href="works/event01.html#point01"><a href="works/commerce03.html#point01">興福寺 国宝館リニューアル</a>', intro : '興福寺創建1300年/国宝館開館50年を期して「生まれ変わった国宝館」として、展示空間を全面リニューアルしました。仏像の本来あるべき姿の再現を心がけ、心地よく仏像と対峙できる空間創りを目指し、全体を通じて極力「線」を排し、自然な奥行きの中、信仰の対象である仏像を展示しました。そして仏像本来の姿・表情を表現する、立体的な照明演出を行いました。', url : '', sub : '<img src="imgs/icon-award.gif" alt="入選アイコン"  />ディスプレイ産業賞2010　ディスプレイ産業奨励賞', copyright : ''}
																]
				});
	    }else{
				$.supersized({
					//Functionality
					slideshow               :   1,		//Slideshow on/off
					autoplay								:		1,		//Slideshow starts playing automatically
					start_slide             :   4,		//Start slide (0 is random)
					random									: 	0,		//Randomize slide order (Ignores start slide)
					slide_interval          :   4000,	//Length between transitions
					transition              :   1, 		//0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
					transition_speed				:		700,	//Speed of transition
					new_window							:		1,		//Image links open in new window/tab
					pause_hover             :   0,		//Pause slideshow on hover
					keyboard_nav            :   1,		//Keyboard navigation on/off
					performance							:		1,		//0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
					image_protect						:		1,		//Disables image dragging and right click with Javascript
					image_path							:		'imgs/', //Default image path
					//Size & Position
					min_width		      	  	:   1000,		//Min width allowed (in pixels)
					min_height		      	  :   800,		//Min height allowed (in pixels)
					vertical_center         :   1,		//Vertically center background
					horizontal_center       :   1,		//Horizontally center background
					fit_always							:		0,			// Image will never exceed browser width or height (Ignores min. dimensions)
					fit_portrait         		:   1,		//Portrait images will not exceed browser height
					fit_landscape						:   0,		//Landscape images will not exceed browser width
					//Components
					navigation              :   1,		//Slideshow controls on/off
					thumb_tray							:		'#thumb-tray',		// Thumbnail tray
					thumb_list							:		'#thumb-list',		// Thumbnail list
					thumb_forward						:		'#thumb-forward',	// Cycles forward through thumbnail list
					thumb_back							:		'#thumb-back',		// Cycles backwards through thumbnail list
					thumbnail_navigation    :   1,		//Thumbnail navigation
					slide_counter           :   0,		//Display slide numbers
					slide_bg                :   1,		
					slide_title             :   1,		
					slide_copyright         :   1,		//Slide caption (Pull from "title" in slides array)
					slide_sub             	:   1,	
					slide_intro             :   1,	
					slides				 					:  	[		//Slideshow Images
																		{ image : 'imgs/bg-1.jpg', bg : '<img src="imgs/information-01.png" alt="" width="665" height="200" />', title : '<a href="works/event01.html#point01"><a href="works/event01.html#point01">レジャーホテルフェア2009　東京マツシマブース</a>', intro : '閉塞しがちな社会において、エモーショナル且つ元気なエネルギーで展示ブースを構成したいと思いDNAをモチーフにしました。重なりあう二次元と三次元による不思議な重なりが、遠くから近寄ってみたくなる展示空間となり、壁面のビビッドカラーのさし色には新製品であるシャンプー容器のパントーンカラーシリーズを使用し、登場感を表現しました。', url : '', sub : '', copyright : ''},  
																		{ image : 'imgs/bg-2.jpg', bg : '<img src="imgs/information-02.png" alt="" width="665" height="200" />', title : '<a href="works/event01.html#point01"><a href="works/event02.html#point02">銀座マロニエゲート　バレンタイン装飾</a>', intro : '『大切な人に寄せる「感謝」や、「愛情」は、 ハートのルビーのように輝き、暗闇の中に浮かび上がる...。』そんな思いを演出しました。数百のバラで出来たハートは、ドキドキする心臓の鼓動のように点滅を繰り返し、訪れる恋人たちを幸せな気持ちにさせます。', url : '', sub : '', copyright : ''},
																		{ image : 'imgs/bg-3.jpg', bg : '<img src="imgs/information-03.png" alt="" width="665" height="200" />', title : '<a href="works/event03.html#point04">JATA世界旅行博2010</a>', intro : 'JATA世界旅行博(旅行博)は、海外旅行のための情報を一堂に集めた、アジア最大級の旅行関連イベントで、趣向を凝らした企画を立案し、旅行需要の喚起、啓蒙活動を行うイベントです。会場内を世界そのものと位置づけ、来場者は各国のブースを自由に周遊し、世界一周旅行の気分を味わうことができます。会場へのアプローチに空港をイメージした入口ゲートや誘導サインを配し、来場者の期待感を高揚させ、熱気を帯びた世界へと誘いました。', url : '', sub : '', copyright : ''},  
																		{ image : 'imgs/bg-4.jpg', bg : '<img src="imgs/information-04.png" alt="" width="665" height="200" />', title : '<a href="works/event01.html#point01"><a href="works/commerce01.html#point08">ジャンプショップ　ユニバーサル・シティーウォーク大阪店</a>', intro : '漫画誌最大の発行部数を誇る「週刊少年ジャンプ」連載中の作品を中心としたキャラクターグッズを取り扱う集英社オフィシャルショップの関西圏におけるフラッグシップ店として、2010年にオープンしました。「楽しい、面白い、心地よい」空間をお客様にご提供する店舗を目指し、店頭から店内までマンガの世界を表現しつつ、「ジャンプ」のシンボルマークである「海賊マーク」や大人気作品『ONE PIECE』から連想される「海賊船」をモチーフに全体を構成。面白くて楽しいマンガの海。その果てしなく広がる海を海賊船「ジャンプショップ号」で「週刊少年ジャンプ」のキャラクター達が冒険に出航します！', url : '', sub : '<img src="imgs/icon-award.gif" alt="入選アイコン"  />ディスプレイ産業賞2011　ディスプレイ産業奨励賞', copyright : '<img src="imgs/img-mv-copyright-04.png" alt="" width="620" height="12" class="png_bg" />'},
																		{ image : 'imgs/bg-5.jpg', bg : '<img src="imgs/information-05.png" alt="" width="665" height="200" />', title : '<a href="works/commerce02.html#point06">株式会社ナムコ　キッズアートミュージアム</a>', intro : 'コクヨの物作り絵本とナムコの企画運営ノウハウが一体となって実現した「キッズアートミュージアム」。子供達に様々なアートとクリエイティブのコンテンツを特別な空間の中で体験してもらう施設として誕生しました。巨大な物作り絵本という特別な空間で、ワークショップを初めとする様々な体験ができます。子供達の遊びをアート(物作り)体験に置きかえる事のできる質の高い遊びの空間を構築しました。', url : '', sub : '', copyright : ''},  
																		{ image : 'imgs/bg-6.jpg', bg : '<img src="imgs/information-06.png" alt="" width="665" height="200" />', title : '<a href="works/event01.html#point01"><a href="works/commerce03.html#point01">興福寺 国宝館リニューアル</a>', intro : '興福寺創建1300年/国宝館開館50年を期して「生まれ変わった国宝館」として、展示空間を全面リニューアルしました。仏像の本来あるべき姿の再現を心がけ、心地よく仏像と対峙できる空間創りを目指し、全体を通じて極力「線」を排し、自然な奥行きの中、信仰の対象である仏像を展示しました。そして仏像本来の姿・表情を表現する、立体的な照明演出を行いました。', url : '', sub : '<img src="imgs/icon-award.gif" alt="入選アイコン"  />ディスプレイ産業賞2010　ディスプレイ産業奨励賞', copyright : ''}
																]
				});
	    }

	$('#thumb-list li').each(function(){
		var $this = $(this);
		$this
			.append('<img src="imgs/hoverbox.png" class="hoverBox" />')
			.append('<img src="imgs/hoverbox_ov.png" class="hoverBoxOv" />')
			.hover(
				function(){
					if(!$this.hasClass('current-thumb')) {
						$this
							.find('.hoverBox')
								.hide()
							.end()
							.find('.hoverBoxOv')
								.show()
							.end();
					}
				},
				function(){
					if(!$this.hasClass('current-thumb')) {
						$this
							.find('.hoverBox')
								.show()
							.end()
							.find('.hoverBoxOv')
								.hide()
							.end();
					}
				}
			)
			.click(function(){
				$('#thumb-list li')
					.find('.hoverBox')
						.show()
					.end()
					.find('.hoverBoxOv')
						.hide()
					.end();
				$this
					.find('.hoverBox')
						.hide()
					.end()
					.find('.hoverBoxOv')
						.show()
					.end();
			});
	});	
	$('#thumb-list li:nth-child(4)')
		.find('.hoverBox')
			.hide()
		.end()
		.find('.hoverBoxOv')
			.show()
		.end();

});