jQuery.noConflict();

//preload
mainImg = new Array();
//pre loading
for (i=1; i<=10; i++){
  mainImg[i]=new Image();
}


window.onload = function() {
	//initial behavior
	
	hashName = location.hash.substring(1);
	//console.log(hashName);
	
	if(hashName == ''){
		document.getElementById("loadingId").style.display = 'none';
		//document.getElementById("mainspace").style.display = 'inline';
		jQuery("#mainspace").fadeIn("normal");
	}
	
	jQuery(document).ready(function(){
        document.getElementById("loadingId").style.display = 'none';
		document.getElementById("category-1").className="menuOn";
		//if browser is not IE 6,7 hash function will start
		if(browser != true){
		// Initialize history plugin.
		// The callback is called at once by present location.hash. 
		jQuery.historyInit(pageload, "jquery_history.html");
		// set onlick event for buttons
		jQuery("a[rel='history']").click(function(){
			var hash = this.href;
			hash = hash.replace(/^.*#/, '');
			jQuery.historyLoad(hash);
			return false;
		});
		}
		
	});//initial behavior end..
}// PageLoad function

//if browser is not IE 6,7 hash function will start
if(browser != true){
	function pageload(hash) {
		// alert("pageload: " + hash);
		// hash doesn't contain the first # character.
		document.getElementById("loadingId").style.display = 'block';
	 	$('loadingId').innerHTML = "<img src='images/ajax-loader.gif'/>";
		document.getElementById("mainspace").style.display = 'none';
		if(hash) {
			// restore ajax loaded state
			if(jQuery.browser.msie) {
				hash = encodeURIComponent(hash);
			}
			getPage(hash);	
		}else{
			getPage('all');	
		}
	}
}
	
//scroll function
function scrollFunction(id_name){
	var offset = jQuery(id_name).offset();
	var destinationNumber = offset.top - 50;
	jQuery('html,body').animate({scrollTop: destinationNumber}, 750);
}

function goPos(){
	//var offset = jQuery('#leftColumn').offset();
	//var destinationNumber = offset.top - 50;
	var destinationNumber = 0;
	jQuery('html,body').animate({scrollTop: destinationNumber}, 0);
}

function goback(){
	jQuery('html,body').animate({scrollTop: 0}, 750);
}

function sendContact(){
	var nameVal = document.contact.nameArea.value;
	var mailVal = document.contact.mailArea.value;
	var messageVal = document.contact.messageArea.value;
	
	new Ajax.Request(
				 
  	"post.php?name="+nameVal+"&mail="+mailVal+"&message="+messageVal, {
  	method : 'get',
  
  	onSuccess : function( request )  {
		 str = request.responseText;
	 	　$('response').innerHTML = "THANKS "+str+" !"; 
  	},
  	onFailure : function( request )  {
	  
  	},
  	onException : function( request, ex )  {
	  
  	}
	})
}

//response 
Ajax.Responders.register({ 
  onUninitialized: function() {
   console.log("Uninitialized");
  },
  onCreate: function() {
    console.log("Create");
  },
  onLoading: function() {
	  console.log("LOADING");
   // document.getElementById("loadingId").style.display = 'block';
//	$('loadingId').innerHTML = "<img src='images/ajax-loader.gif'/>";
  },
  onLoaded: function() {
   console.log("Loaded");
  	document.getElementById("loadingId").style.display = 'none';
	$('loadingId').innerHTML = "";
  },
  onInteractive: function() {
   // console.log("Interactive");
  },
  onComplete: function() {
   // console.log("Complete");
   document.getElementById("loadingId").style.display = 'none';
	$('loadingId').innerHTML = "";
  }
});


// call AJAX function //
function getPage(page) {
	//document.getElementById("loadingId").style.display = 'none';
	goPos();
	//document.getElementById("mainspace").style.display = 'none';
	pageURL = 'html_data/'+page+'.html';
	
	imageAmount = 0;
	if(page == '1'){
		imageAmount = 7;
	}else if(page == '2'){
		imageAmount = 8;
	}else if(page == '3'){
		imageAmount = 8;
	}else if(page == '4'){
		imageAmount = 9;
	}else if(page == '5'){
		imageAmount =10;
	}else if(page == '6'){
		imageAmount = 7;
	}else if(page == '7'){
		imageAmount = 6;
	}else if(page == '8'){
		imageAmount = 8;
	}else if(page == '9'){
		imageAmount = 7;
	}else if(page == '10'){
		imageAmount = 8;
	}else if(page == '11'){
		imageAmount = 5;
	}else if(page == '12'){
		imageAmount = 8;
	}else if(page == '13'){
		imageAmount = 9;
	}else if(page == '14'){
		imageAmount = 4;
	}else if(page == '15'){
		imageAmount = 4;
	}else if(page == '16'){
		imageAmount = 6;
	}else if(page == '17'){
		imageAmount = 8;
	}
	
	preload(page,imageAmount);
	
	
	if(page == 'all'){
		categoryActive(1);
		projectOff();
	}else if(page == 'visualization'){
		categoryActive(2);
		projectOff();
	}else if(page == 'web'){
		categoryActive(3);
		projectOff();
	}else if(page == 'application'){
		categoryActive(4);
		projectOff();
	}else if(page == 'installation'){
		categoryActive(5);
		projectOff();
	}else if(page == 'product'){
		categoryActive(6);
		projectOff();
	}else if(page == 'music'){
		categoryActive(7);
		projectOff();
	}else if(page == 'all2'){
		categoryActive(1);
		projectOff();
	}else if(page == 'visualization2'){
		categoryActive(2);
		projectOff();
	}else if(page == 'web2'){
		categoryActive(3);
		projectOff();
	}else if(page == 'application2'){
		categoryActive(4);
		projectOff();
	}else if(page == 'installation2'){
		categoryActive(5);
		projectOff();
	}else if(page == 'product2'){
		categoryActive(6);
		projectOff();
	}else if(page == 'music2'){
		categoryActive(7);
		projectOff();
	}else{
		projectActive(page);
		categoryOff();
	}
	
		var a = new Ajax.Request(
		pageURL,
		{
			"method": "get",
			"parameters": "a=b&c=d&e=f",
			onSuccess: function(request) {
			},
			onComplete: function(request) {
				
				// AJAX complete function
				str = request.responseText;
				$('mainspace').innerHTML = str;
				//display text
				jQuery("#mainspace").fadeIn("normal");
				
				if(page>0 && page<5){
					var path = "0"+ page +"_01"
					mainClick(1);
				}else if(page==5){
					getMovie(9123379);
				}else if(page>5 && page<10){
					var path = "0"+ page +"_01"
					mainClick(1);
				}else if(page>9 && page<15){
					var path = page +"_01"
					mainClick(1);
				}else if(page==15){
					getMovie(9100269);
				}else if(page>=16){
					var path = page +"_01"
					mainClick(1);
				}
				$('loadingId').innerHTML = "";
				document.getElementById("loadingId").style.display = 'none';
				
			},
			onFailure: function(request) {
				//console.log('failed');
			},
			onException: function (request) {
				//console.log('failed while reading');
			}
		}
	);
	
		
}
// end AJAX function //

//change text

function changeTextJp(id, txtNum){
	document.getElementById(id).style.display = 'none';
	$(id).innerHTML = jpText[txtNum];
	plusNum = '#'+id;
	jQuery(plusNum).fadeIn("normal");
}

function changeTextEn(id, txtNum){
	document.getElementById(id).style.display = 'none';
	$(id).innerHTML = enText[txtNum];
	plusNum = '#'+id;
	jQuery(plusNum).fadeIn("normal");
}

//MENU
function projectActive(num){
	for (var i = 1; i <= 17; i ++){　
		document.getElementById("project-"+i).className="menuOff";
	}
	document.getElementById("project-"+num).className="menuOn";
	//scroll
	//scrollFunction('#leftColumn')
}

function projectOff(){
	for (var i = 1; i <= 17; i ++){　
		document.getElementById("project-"+i).className="menuOff";
	}
}

function categoryActive(num){
	for (var i = 1; i <= 7; i ++){　
		document.getElementById("category-"+i).className="menuOff";
	}
	document.getElementById("category-"+num).className="menuOn";
}

function categoryOff(){
	for (var i = 1; i <= 7; i ++){　
		document.getElementById("category-"+i).className="menuOff";
	}
}






function preload(htmlNum, amount) {
	
	if(htmlNum < 10){
    	for (i=1; i<=amount; i++){
  			mainImg[i].src="main_images/0"+htmlNum+"_0"+i+".jpg";
		}
		if(amount == 10){
	    	mainImg[10].src="main_images/0"+htmlNum+"_10.jpg";
		}
	}else if(htmlNum > 9){
		for (i=1; i<=amount; i++){
  			mainImg[i].src="main_images/"+htmlNum+"_0"+i+".jpg";
		}
		if(amount == 10){
	    	mainImg[10].src="main_images/"+htmlNum+"_10.jpg";
		}
	}
	
}



//main click
function mainClick(imgNumber){
	$('mainImage').innerHTML = "<img id=\"imageId\">";
    var img = document.getElementById("imageId"); 
	img.src = mainImg[imgNumber].src;
	document.getElementById("mainImage").style.display = 'none';
	jQuery("#mainImage").fadeIn("normal");
}

// get movie function //
function getMovie(number) {
	$('mainImage').innerHTML = "";
	document.getElementById("mainImage").style.display = 'none';
	
	str="<object width=\"618\" height=\"463\"><param name=\"allowfullscreen\" value=\"true\" /><param name=\"allowscriptaccess\" value=\"always\" /><param name=\"movie\" value=\"http://vimeo.com/moogaloop.swf?clip_id="+number+"&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=&amp;fullscreen=1\" /><embed src=\"http://vimeo.com/moogaloop.swf?clip_id="+number+"&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=&amp;fulｌｓｃｒｅｅｎ＝１＼”ｔｙｐｅ＝＼”ａｐｐｌｉｃａｔｉｏｎ／ｘ−ｓｈｏｃｋｗａｖｅ−ｆｌａｓｈ＼”ａｌｌｏｗｆｕｌｌｓｃｒｅｅｎ＝＼”ｔｒｕｅ＼”ａｌｌｏｗｓｃｒｉｐｔａｃｃｅｓｓ＝＼”ａｌｗａｙｓ＼”ｗｉｄｔｈ＝＼”６１８＼”ｈｅｉｇｈｔ＝＼”４６３＼”＞＜／ｅｍｂｅｄ＞＜／ｏｂｊect>";
	$('mainImage').innerHTML = str;
	jQuery("#mainImage").fadeIn("normal");
	
}


 

var jpText = ['岡 田 憲 明<br>ニューヨークと東京を拠点にグラフィック、インタラクションデザイナー、開発者、研究者としてグローバルに活動中。武蔵野美術大学視覚伝達デザイン学科卒業後、企業にてデザイン職を経験した後渡米、ニューヨーク大学大学院インタラクティブテレコミュニケーションズプログラムを修了。卒業後ニューヨークタイムズ研究所に勤務し、様々な研究プロジェクトに参加する。',	'ニューヨークタイムズウェブサイトのユーザーが、世界中のどこでどの場所からどの端末を使用してどのページを閲覧しているのだろうか？ニューヨークタイムズ研究所ではこれらを様々な視点、方法で地図上に視覚化し、隠れたコンテクスト発見する視覚化研究プロジェクトを試みた。上記の画像は6月25日、マイケルジャクソンが死去した一日のNYTimes.comのアクセスログを視覚化したものである。動画の例では24時間が1分半の時間に圧縮されており、大量のデータに対するユーザーの理解を促す。',
'10 screens at New York Times Buildingはニューヨークタイムズビルディングにある10のモニターを使用した情報視覚化プロジェクトです。メインのコンピューターにサーバーとなるアプリケーションを配置し他9のコンピュータに座標やテキスト等の情報を送っており、10あるコンピューターがそれら1つの情報を共有する事で、スクリーンを隔てた表現を可能にしている。ニューヨークタイムズの記事に寄せられたコメント、ニューヨークタイムズAPI、アクセスマップを視覚化するアプリケーションをそれぞれ作成。これら3つのプロジェクトは1時間毎cronjobで切り替えられるが、モバイル用管理サイトから手動で切り替える事も可能である。',
'ニューヨークタイムズマガジンが1年を振り返り新しい考え方やアイディアやアイディアの中からさらに興味深い記事を厳選して紹介するコンテンツ。AからBのアルファベットや、カテゴリーの順番で記事をソートする事が可能。それぞれの記事にはカテゴリーのタグが記されており、主題のトピックを示唆している。',
'ENVIRONMENT DIAGRAMはデザインとテクノロジーの方法論に基づき環境問題に貢献する事を目的としたプロジェクトです。具体的には気候の変化をグラフィカルに視覚化する事や、ネットワークを使用して環境問題に対する取り組みを共有する事で、 保守的な環境問題に対する取り組みを改善する事を目的としています。',
'Remix Frameは絵画やドローイングを中心とした画像を解析し、そこから得られた絵画の特性を利用し、絵画の再構築を試みるアプリケーションです。それぞれの絵画はマンセルの色立体をベースとして、ピクセル毎に色相、彩度、明度を軸に解析され、そこから得られた値を基準にピクセルに動きを与え、絵画に新しい表現を与える試みです。',
'URBAN COLORはウェブカメラの画像をリアルタイムに保存して、それらを解析して表現をするプロジェクトです。サーバー上のPHPプログラムがwebカメラのAPIより写真を5分毎に保存しています。1日の写真を1枚毎に並べると夜から朝にかけてグラデーションを作り、1枚毎にアニメーションさせるとコマ取りアニメーションのような表現になります。'];

var enText = ['Noriaki Okada has worked and lived internationally as a designer, technologist and researcher based on New York and Tokyo. He received his BFA in Visual Communication Design from Musashino Art University in Japan and Master\'s degree in Interactive Telecommunications Program from New York University in the U.S. After graduating, he worked for research and development field at The New York Times Research & Development Lab.',
'Have you ever wondered where the readers of The New York Times’s Web site come from, what time they come to the site based on where their location, and even what kind of devices they use to read our content? We started a research visualization project to explore this very topic based on various ways on the map. These images above show the traffic to NYTimes.com on June 25, 2009, the day Michael Jackson died. For the movie, the 24-hour period is compressed into a little over a minute and a half.',
'This project is in house data visualization projects, using multiple screens. We got access to the 10 monitors in the hallway at New York Times building and created several visualizations that spanned across the 10 monitors for New York Times Articles. One of the visualization is for showing the comments form nytimes.com and another one is using NY Times API. Also we are showing the access map visualization for nytimes.com. This 10 screens visualization can be changed automatically by crontab. In addition, we created the mobile site that users can change these visualizations manually.',
'The Times Magazine looks back on the past year from our favored perch: ideas. Like a magpie building its nest, we have hunted eclectically, though not without discrimination, for noteworthy notions of 2009 — the twigs and sticks and shiny paper scraps of human ingenuity, which, when collected and woven together, form a sort of cognitive shelter, in which the curious mind can incubate, hatch and feather. Unlike birds, we can also alphabetize. And so we hereby present, from A to Z, the most clever, important, silly and just plain weird innovations we carried back from all corners of the thinking world. To offer a nonalphabetical option for navigating the entries, this year we have attached tags to each item indicating subject matter.',
'The challenge of this project is the contribution for environment based on design & technological methodology. There are limitations to conventional environment activities. ENVIRONMENT DIAGRAM will improve them by new ecology approaches centered on visualization and network. People can share environment information (Climate change and Solutions) by design & technology in this projects.',
'Remix Frame is a new application. The focus of Remix Frame is the analysis of the color palette of paintings and drawings of all kinds. The breakdown of a picture\'s color palette is also revealed to viewers. The colors of each image are mapped through the Munsell color system and can be interactively expanded, seen with fresh perspective in a beautiful Meta movement of the picture\'s composition.',
'URBAN COLOR can analyze and visualize massive amount of web cam photography in real time. The PHP program in the server can grab and save photographs of multiple cities from web cam API and update every 5 minutes. In addition, these images can be animated. There are more than 10,000 published photographs thus far. NEXT: Design is underway for search and arranges functions, which will be available in the next version of URBAN COLOR.'];