/*
tools - JavaScript utilities

*/
var global = {};
		
/* ----------------------------------------
toolObject
---------------------------------------- */
var toolObject = function (param,my){
		
	my = my || {};
	var that = {};	
	that.NSLog = function(text){
		$("#NSLog").append(text + '<br>');
		console.log(text);
	};
	that.randomInt = function(int){
		return Math.floor(Math.random()*int+1);	
	};
	that.roundUp = function(value,digit){
		var temp = Math.pow(10,digit);
		var r = 0;
		if(value >= 0){
			r = Math.ceil(value * temp) / temp;
		} else {
			r = Math.floor(value * temp) / temp;
		}
		return r;
	};
	that.roundDown = function(value,digit){
		var temp = Math.pow(10,digit);
		var r = 0;
		if(value >= 0){
			r = Math.floor(value * temp) / temp;
		} else {
			r = Math.ceil(value * temp) / temp;
		}
		return r;
	};		
	return that;
};

var tools = toolObject({});



/* ----------------------------------------
jQuery function
---------------------------------------- */
$(function (){
	// for page navigation
	global.currentPage = -1;
	global.pageOffset = -64;
	global.pages = $.makeArray($("section"));
	global.pager = function(){
		if ( global.currentPage > $(global.pages).length-1){
			global.currentPage = $(global.pages).length-1;
		}
		if ( global.currentPage < 0 ){
			global.currentPage = 0;
		}
		var targetPage =  $(global.pages).eq(global.currentPage);
		var pageTop = targetPage.position().top;
		
		global.scrollPosition =  pageTop - 64;		

		$("body").animate({
			scrollTop:global.scrollPosition
		},100,jQuery.easing.easeBezer);
		
	};
	// Key Biding
	$(document).bind('keydown','down',function (){
		global.currentPage++;
		global.pager();
		
	});	
	$(document).bind('keydown','space',function (){
		global.currentPage++;
		global.pager();
		
	});	
	$(document).bind('keydown','up',function (){
		global.currentPage--;
		global.pager();				
	});
	$(document).bind('keydown','Shift+space',function (){
		global.currentPage--;
		global.pager();				
	});
	
	$(document).bind('keydown','home',function (){
		global.currentPage = -1;
		$("body").scrollTop(0);
	});

	$(document).bind('keydown','pageup',function (){
		global.currentPage -= 10;
		global.pager();	
	});
	$(document).bind('keydown','pagedown',function (){
		global.currentPage += 10;
		global.pager();	
	});
	
	// Ball Bounce
	$("#aCanvas").click(function(){
		global.canvas = $("#aCanvas");
		global.ballBounceSetup();
	});
	
	// Ball Bounce 2
	$(".myCanvas").eq(0).click(function(){
		global.canvas = $(".myCanvas");
		global.ballBounceSetup();
	});

	// Draw
	$("#drawCanvas").click(function(){
		global.canvas = $("#drawCanvas");
		global.mouseDrawSetup();
	});
		
	// audio
	global.audio = $("#audio").get(0);
	global.audioSetup();
	
	// o3d
	$("#o3d").toggle(function(){
		$(this).show();
		o3djs.util.makeClients(object3d.init);
		o3dGlobal.o3dSetup();	
	},function(){
		$(this).hide();
	});
	
	// CSS 3D Transforms
	$("#css3d").click(function(){
		$(this).toggleClass("rotateY45deg");
	});


});


/* ----------------------------------------
ball bouncing
---------------------------------------- */
global.ballBounceSetup = function(){
			
	// mouse
	global.canvas.mousemove(function(e){
		global.mouseX = e.clientX;
		global.mouseY = e.clientY;
	});
		
	// balls
	global.boxArray = [];
	global.ballTotal = 10;
	for (var i =0; i < global.ballTotal; i++){
		var ball = object({
			id:i,
			x:tools.randomInt(600),
			y:tools.randomInt(200),
			vx:tools.randomInt(10)+1,
			vy:tools.randomInt(10)+1,
			radius:tools.randomInt(15)+5,
			canvas:global.canvas
		},global.boxArray);	
		global.boxArray.push(ball);
	}
	
	var timerFlag = false;
	$.fn.delay(1000 * 10,function(){
		timerFlag = true;
	});
	
	$.timer(1000/60,function(timer){
		if (!timerFlag){
			global.ballBounceDraw();
			timer.reset(1000/60);
		} else {
			timer.stop();
		}
	});		
};

global.ballBounceDraw = function(){
	$(global.canvas).each(function(){
		$(this).get(0).getContext("2d").clearRect(0,0,$(this).attr("width"),$(this).attr("height"));
		}
	);
	for (var i =0; i < global.boxArray.length; i++){
		var ball = global.boxArray[i];
		ball.animation();
		ball.draw();
	}
};

global.ballBounceReset = function(){
	for (var i =0; i < global.boxArray.length; i++){
		var ball = global.boxArray[i];
		ball.reset();
	}	
};


/* ----------------------------------------
mouse draw
---------------------------------------- */
global.mouseDrawSetup = function(){
			
	// mouse
	$(global.canvas).mousemove(function(e){
		global.mouseX = e.clientX - $(this).position().left;
		global.mouseY = e.clientY - 200;
		// TODO : Why 200 ?		
	});
			
	$(global.canvas).dblclick(function(){
		$(this).get(0).getContext("2d").clearRect(0,0,$(this).attr("width"),$(this).attr("height"));
	});
	
	$(global.canvas).mousedown(function(){
		global.mouseDown = true;
	});		
	$(global.canvas).mouseup(function(){
		global.mouseDown = false;
	});				
	
	// balls
	global.boxArray = [];	
	global.ballTotal = 1;
	for (var i =0; i < global.ballTotal; i++){
		var ball = object({
			id:i,
			canvas:$(global.canvas),
			radius:10
		},global.boxArray);	
		global.boxArray.push(ball);
	}
	
	var timerFlag = false;
	$.fn.delay(1000 * 10,function(){
		timerFlag = true;
	});
	
	$.timer(1000/60,function(timer){
		if (!timerFlag){
			global.mouseDraw();
			timer.reset(1000/60);
		} else {
			timer.stop();
		}
	});	
};

global.mouseDraw = function(){
	for (var i =0; i < global.boxArray.length; i++){
		var ball = global.boxArray[i];
		if (global.mouseDown){
			ball.mouseDraw();
		}
	}
};


/* ----------------------------------------
audio player
---------------------------------------- */
	
global.audioSetup = function(){
	$.timer(1000/60,function(timer){
		$("#time").text(tools.roundDown(global.audio.currentTime,1));
		var w = (global.audio.currentTime / global.audio.duration) * 200;
		$("#progressBar").css({
			"width" : w
		});
		if (global.audio.currentTime != global.audio.duration){
			timer.reset(1000/60);
		} else {
			timer.stop();
		}
	});
	
	global.audio.volume = 0.8;
	global.audio.defaultPlaybackRate = 1;
	global.audio.pause();

	$("#button").toggle(
		function(){
			$(this).css({"background-image":"url(contents/pause.png)"});
			global.audio.play();
		},
		function(){
			$(this).css({"background-image":"url(contents/play.png)"});
			global.audio.pause();
		}
	);
	$("#seek").click(function(){
		global.audio.currentTime = 0;
	});		
};


/* ----------------------------------------
Google O3D
---------------------------------------- */
var o3dGlobal = {};
o3dGlobal.speed = 0.01;
o3djs.require('o3djs.simple');
window.onload = function(){
	
};

var object3d = function (param,my){
	var x = param.x;
	var y = param.y;
	var x = param.z;
	my = my || {};
	var that = {};
};

object3d.init = function(clientElements){
  var o3dElement = clientElements[0];
  o3dGlobal.simple = o3djs.simple.create(o3dElement);
  o3dGlobal.cube = o3dGlobal.simple.createCube(120);
  o3dGlobal.cube.setDiffuseColor(1, 0, 0, 1);
};	

object3d.animation = function(){
	o3dGlobal.cube.transform.rotateX(o3dGlobal.speed);
};

o3dGlobal.draw = function(){
	object3d.animation();
};

o3dGlobal.o3dSetup = function(){
			
	// mouse
	$(document).mousemove(function(e){
		o3dGlobal.mouseX = e.clientX;
		o3dGlobal.mouseY = e.clientY;
		o3dGlobal.speed = o3dGlobal.mouseX / $(this).width();
	});
	
	$.timer(1000/30,function(timer){
		o3dGlobal.draw();
		timer.reset(1000/30);
	});
};


	
	

/* ----------------------------------------
Ball Object
---------------------------------------- */

var object = function (param,my){

	var x = param.x;
	var y = param.y;
	var vx = param.vx;
	var vy = param.vy;
	var fx = param.fx || 1.0;
	var fy = param.fy || 1.0;
	var dt = dt || 0.4;
	var width = param.width || 100;
	var height = param.height || 100;
	var radius = param.radius || 5;
	var gravity = gravity || 9.8;
	var color = param.color || "#ffffff";
	var id = param.id
	var canvas = param.canvas;
	var targetContext = param.targetContext || 0;
	var canvasOffset;
	
	my = my || {};
	var that = {};
	
	that.id = function(){
		return id;
	};

	that.reset =  function(){
		x = param.x;
		y = param.y;
		vx = param.vx;
		vy = param.vy;
	}

	that.animation = function(){
	
		vy += gravity * dt;			
		x += vx * dt * fx;
		y += vy * dt * fy;
		
		var height = $(canvas).eq(targetContext).attr("height");		
		var width = 0;
		$(canvas).each(function(){
			width += $(this).attr("width");
		});
		
		if (y > height || y < 0){
			y = (y > height) ? height : 0;
			vy = -vy;
		}
		if (x > width || x < 0){
			x = (x > width) ? width : 0;
			vx = -vx;
		}
		targetContext = 0;			

		canvasOffset =[
			0,
			canvas.eq(0).attr("width"),
			canvas.eq(0).attr("width") + canvas.eq(1).attr("width"),
			canvas.eq(0).attr("width") + canvas.eq(1).attr("width") + canvas.eq(2).attr("width")
		];

		
		if (x > canvasOffset[1]){
			targetContext = 1;
		}
		if (x > canvasOffset[2]){
			targetContext = 2;
		}
		if (x > canvasOffset[3]){
			targetContext = 3;
		}

	};
	
	that.draw = function(){
		canvasContext = canvas.get(targetContext).getContext("2d");		
		canvasContext.beginPath();
		canvasContext.arc(x- canvasOffset[targetContext], y, radius, 0, Math.PI*2, false);
		canvasContext.fillStyle = color;
		canvasContext.fill();
		canvasContext.closePath();
	};

	that.mouseDraw = function(){
		canvasContext = canvas.get(targetContext).getContext("2d");		
		canvasContext.beginPath();
		canvasContext.arc(global.mouseX, global.mouseY, radius, 0, Math.PI*2, false);
		canvasContext.fillStyle = color;
		canvasContext.fill();
		canvasContext.closePath();
	};
	

					
	return that;
};