var cloudReset, animateCloud, cloudReset2, animateCloud2;
$(function() {

	//TODO: make the time dynamic with window.width
	//TODO: make image size dynamic
	var cloudWidth = $('#cloud').width();
	//var windowWidth = $(window).width()
	//var cloudLeft = windowWidth + cloudWidth;
	var cloudWidth2 = $('#cloud2').width();
	//var cloudLeft2= windowWidth + cloudWidth2;
	var animateTime = 20000 + ($(window).width() - 800)*2;
	
	var cloudReset = function(){
		$('#cloud').css({'left': -cloudWidth});
		animateCloud();
	}
	var animateCloud = function(){
		$('#cloud').animate({left: $(window).width() + cloudWidth}, 20000 +  ($(window).width() - 800)*10, 'linear', function(){cloudReset();})
	}
	animateCloud();
	var cloudReset2 = function(){
		$('#cloud2').css({'left': -cloudWidth2});
		animateCloud2();
	}
	var animateCloud2 = function(){
		$('#cloud2').animate({left: $(window).width() + cloudWidth2}, 20000 +  ($(window).width() - 800)*10, 'linear', function(){cloudReset2();})
	}

	setTimeout(function(){animateCloud2()}, (20000+($(window).width() - 800)*10)/2)
	
	
	//TODO: loading page uses animate top
				
				
	$('nav a, #logo').click(function(e){
		  e.preventDefault();
		//  window.location.hash = this.hash;
		})
	$('nav a, #logo').click(function(){	
		$('html, body').stop().animate({scrollTop: $($(this).attr('href')).offset().top}, 1500, 'easeInOutQuint');
		
		})
		
	initialize();//map initialize

//map
	$('#form ul li').click(function(){
		selectedMode = this.attributes[0].value;
		$('#form ul li').css('background-color', 'rgba(255, 255, 255, .2)');
		$(this).css('background-color', 'rgba(255, 255, 0, .2)')	
	});
});


/*------------------onload func---------------------*/
$(document).ready(function(){
    $(window).load(moveUp);
});

function moveUp() {
	    $('#fs_loading').animate({
 		marginTop: "-100%"
    }, 3000, 'easeInOutExpo');
}

$(document).ready(function(){
    $(window).load(bodyUp);
});

function bodyUp() {
	    $('body').animate({
 		marginTop: "0 "
    }, 3000, 'easeInOutExpo');
    $('.fs').animate({
 		top: "-=100%"
    }, 3000, 'easeInOutExpo');
}
$(document).ready(function(){
    $(window).load(afterLoad);
});


var afterLoad = function(){

//	$('#press').click(function(){
		//$('body').css({'overflow-y': 'auto'})
		$('html, body').scrollTop(0).scrollLeft(0);
		//$('html body').scrollTop(0).scrollLeft(0);
		var logoDown = function(){
				$('#logo img').css({'margin-top':'-13px'});
				$('#logo')
					.css({'position':'fixed', 'margin-top': '-105px', 'display':'block', 'height':'75px'})
					.delay(1600)
					.animate({marginTop: '-25px'}, 500, 'easeInOutQuint');
			}

		//$('html, body').stop().animate({marginTop: '-100%'}, 1000, 'easeInOutCubic').scrollTop(0).scrollLeft(0);;
		$('#overlay').stop().animate({opacity: '1'}, 1500, 'easeInOutCubic', function(){logoDown()});
		
		var logoMOver = function(){
			$("#logo div").stop().animate({'height': '30px'}, 300, 'easeOutCirc')
		}
		
		var logoMOut = function(){
			$("#logo div").stop().animate({'height': '0px'}, 300, 'easeInCirc')
		}
		
		$('#logo img').mouseover(function(){
			logoMOver();
		});
		
		$('#logo img').mouseout(function(){
			logoMOut();
				});
		$('#intro').css({'opacity': .5}).delay(2300).animate({left: '50%', opacity : 1}, 500, 'easeInOutQuint')
		
		$('#ufo_bg').sprite({fps: 5, no_of_frames: 8});
		ufo.indexPage();
		
		barAnimation.barMouse();
		
		$("#ballon").rotate(25);
		
		//explore more
		$('#explore').click(function(){$('html, body').stop().animate({scrollTop: $($('#skills').attr('href')).offset().top}, 1500, 'easeInOutCubic');})		
		
		$('#moving_tri').css('display', 'block');
		setTimeout(scrollCal, 2000)
}
/*------------------alien animation----------------------------*/
/*
situation 1: triggered
situation 2: navagation clicked--> discarded
situation 3: not moving for a while --> Z

*/
function ufoAni(){
	this.aniStats = {'index':0, 'skills': 0, 'project': 0, 'me' : 0, 'contact': 0};
	this.indexPage = function(){
		$('#ufo_bg')
				.delay(3000)
				.animate({left: '27%', top: '50%', opacity: 1}, 3020, 'easeOutQuad', 
					function(){
						//$(this).rotate({animateTo:20}
						$('#light')
							.css({left: '27%', top: '50%'})
							.animate({opacity: 1}, 430, 'easeInOutQuad')
							.delay(1700)
							.animate({opacity: 0}, 200, 'easeInOutQuad', function(){$('#ufo_bg').rotate({animateTo:20})});
						}
					)
				.delay(3000)
				.animate({left: '70%', top: '-10%', opacity: .8}, 2300, 'easeInOutQuad', 
					function(){if(ufo.aniStats.skills== 0){$(this).css({top: '110%', opacity: '.8'}); $(this).rotate({animateTo:-10})}}
					)
				.delay(4000)
				.animate({left: '10%', top: '-15%'}, 5000, 'linear');
		}
		
	this.skillPage = function(){
		ufo.aniStats.skills = 1;
		$('#light').stop(true).css('opacity', 0);
		$('#ufo_bg').rotate({animateTo:-10})
		$('#ufo_bg')
				.stop(true)
				.css({left: '-20%', top: '90%', opacity: 1})
				.delay(700)
				.animate({left: '18%', top: '210%'}, 8000, 'easeInOutQuad', function(){$(this).animate({left: '90%', top: '80%'}, 3300, 'easeInOutQuad')})//sometimes it stops here   why????
				//.animate({left: '120%', top: '250%'}, 3000, 'easeInOutQuad');

		}
	this.projectPage = function(){
			ufo.aniStats.project = 1;
			$('#ufo_bg')
				.stop(true)
				.css({left: '-10%', top: '300%', opacity: 1})
				.delay(1000)
				//.animate({left: '30%', top: '370%'}, 2500, 'easeInOutQuad', function(){$('#ufo_bg').rotate({animateTo:5})})
				//.animate({left: '60%', top: '330%'}, 1800, 'easeInOutQuad', function(){$('#ufo_bg').rotate({animateTo:-8})})
				//.animate({left: '120%', top: '380%'}, 3300, 'easeInOutQuad', function(){$('#ufo_bg').rotate({animateTo:10})})
				.animate({left: '15%', top: '270%'}, 2500, 'easeOutCubic', function(){$('#ufo_bg').rotate({animateTo:5})})
				.delay(1800)
				.animate({left: '-15%', top: '330%'}, 3800, 'easeInOutQuad');
			}
	this.aboutMePage = function(){
			ufo.aniStats.project = 1;
			$('#ufo_bg')
				.stop(true)
				.css({left: '90%', top: '410%', opacity: 1})
				.delay(1000)
				.animate({left: '-10%', top: '380%'}, 2500, 'easeOutCubic', function(){$('#ufo_bg').rotate({animateTo:5})})
			}
	this.contactPage = function(){
			ufo.aniStats.contact = 1;
			$('#ufo_bg').rotate({animateTo:2})
			$('#ufo_bg')
				.stop(true)
				.css({left: '38%', top: '520%', opacity: 1})
				.delay(1800)
				.animate({left: '30%', top: '460%'}, 2500, 'easeOutCubic', function(){$('#ufo_bg').rotate({animateTo:-35})})
				.delay(800)
				.animate({left: '-120%', top: '420%'}, 3300, 'easeInOutQuad');
			}
	this.freeStyle = function(){
		//alien's wondering around
		}
	}
	
			
ufo = new ufoAni();	

/*------------------skills-----------------------------*/
$(function() {
	$("#skill_code").rotate({ 
	   bind: 
	     { 
	        mouseover : function() { 
	            $(this).rotate({animateTo:-60})
	        },
	        mouseout : function() { 
	            $(this).rotate({animateTo:0})
	        }
	     } 
	   
	});
	$("#skill_design").rotate({ 
	   bind: 
	     { 
	        mouseover : function() { 
	            $(this).rotate({animateTo:60})
	        },
	        mouseout : function() { 
	            $(this).rotate({animateTo:0})
	        }
	     } 
	   
	});

});
/*------------------projects-----------------------------*/
$(function() {

	//project
	var originLoc = 150; 
	var moveDis;
	var newMargin = originLoc;
	var caculateLoc = function(action){
		moveDis = $(window).width()*2/3;
		var currentMargin = parseFloat($('#project_containter #projects_ul').css('margin-left'));
		if(action=='next'){
			if(ufo.aniStats.project == 0)ufo.projectPage()
			if(newMargin > $(window).width() - $('#project_containter #projects_ul').width())newMargin = currentMargin - moveDis;
		}else{
			newMargin = currentMargin + moveDis;
		}
		if(newMargin < $(window).width() - $('#project_containter #projects_ul').width() || newMargin == originLoc + moveDis){
			
			newMargin = $(window).width() - $('#project_containter #projects_ul').width()
		
		}else if(newMargin == $(window).width() - $('#project_containter #projects_ul').width() || newMargin >= originLoc){

			newMargin = originLoc;		
		}

		$('#project_containter #projects_ul').stop().animate({marginLeft:newMargin+'px'}, 1000, 'easeInOutCubic')
		
	}
	$('#next').click(function(){caculateLoc('next')});
	$('#pre').click(function(){caculateLoc('pre')});
	
	/*$('.project_overlay').mouseover(function(){
		$(this).animate({'opacity':1}, 500)
	})
	$('.project_overlay').mouseout(function(){
		$(this).animate({'opacity':0}, 500)
	})*/
	$('.project_overlay').hover(function(){
		$(this).animate({'opacity':1}, 500)
	}, function(){
		$(this).animate({'opacity':0}, 500)
	})

	
});


/*------------------scroll-----------------------------*/

var parallaxRan = false;
var contactRan = false;
var skillRan = false;
var projectRan = false;

function scrollCal(){

		if($.browser.msie){
       		var b = document.getElementById('body').scrollTop//ie only works with this
    	}else{
    		var b = $(window).scrollTop();
    	}
		var a = $(document).height();
		b = b + 200;
		
		if(b <= a*1/5){
			$('#moving_tri').stop(true).animate({left:'213px'}, 300, 'easeInOutCubic')
			
		}else if(b > a*1/5 && b <= a*2/5){
			if(!skillRan){
				barAnimation.barGrow()
				skillRan = true;
			}
			$('#moving_tri').stop(true).animate({left:'13px'}, 300, 'easeInOutCubic')
		
		}else if(b > a*2/5 && b <= a*3/5){
			if(!projectRan){
				$('#project_containter #projects_ul').delay(300).animate({marginLeft: '150px'}, 700, 'easeInOutCubic')
				//$('#project_containter #projects_ul').animate({opacity: 1}, 700, 'easeInOutCubic')
				projectRan = true;
			}

			$('#moving_tri').stop(true).animate({left:'104px'}, 300, 'easeInOutCubic')
		}else if(b > a*3/5 && b <= a*4/5){
			if(!parallaxRan){
				$('#parallax .parallax-layer')
				.parallax({
				mouseport: $('#boxes'),
				mouseActiveOutside: true
				});
				//flight rotate
				var angle = 0;
				setInterval(function(){
				      angle+=1;
				     $("#flight").rotate(angle);
				     $("#flight2").rotate(angle+180);
				},50);
				$("#ballon").delay(500).animate({bottom: '30%', right: '40px'}, 2500, 'easeInOutCubic')
				//$("#ballon").rotate({animateTo:5})
				parallaxRan = true;
			}
			$('#moving_tri').stop(true).animate({left:'299px'}, 300, 'easeInOutCubic')
		}else if(b > a*4/5){
			if(!contactRan){
				$('#duration').delay(800).animate({opacity:1}, 1000)
				attachSprite();
				contactRan = true;
			}
			$('#moving_tri').stop(true).animate({left:'380px'}, 500, 'easeInOutCubic')
		}
	//}
//	})

}

/*------------------map location form----------------------------*/
var spriteOver = false;

var paperOpen = function(val, text){
	if(val==true){
	//open
		spriteOver = false;
		$('#blob').css('display', 'block')
		$('#blob').spState(1);
   		$('#blob').spStart();
		if(text)$('#duration').html(text);
		$('#duration').css('display', 'block').stop().animate({opacity:1}, 500, 'linear')
		
		
	}else{
	//close
		spriteOver = false;
		$('#blob').spState(2);
		$('#blob').spStart();
		$('#duration').stop().animate({opacity:0}, 250, 'easeOutCubic', 
			function(){
				$(this).css('display', 'none');
				$('#blob').css('display', 'none')
			})
	}
}



function attachSprite(){
	$('#blob').sprite({fps: 3, no_of_frames: 3,
			on_last_frame: function(obj) {
			//for fixing a bug, not clean
        	spriteOver = true;
        	//over
        	obj.spStop();
   			 }
   		 });
	spriteOver = false;

};
function enterForm(e){
	console.log('keydown')
	var keynum

	if(window.event) // IE
	{
		keynum = e.keyCode
	}
	else if(e.which) // Netscape/Firefox/Opera
	{
		keynum = e.which
	}
	if(keynum=='13')calcRoute();
	
	}
/*------------------skill bar----------------------------*/
var barAnimation;
var barAni;
$(function(){
	 barAni = function(){
		this.code_height = [250, 200, 120, 150, 236, 180, 270, 278]
		this.design_height = [257, 220, 160, 190]
		this.code_bar_ele = $('#code_bar').children()
		this.design_bar_ele = $('#design_bar').children()
		oldthis = this;
		this.barGrow = function(){
			for(var i = 0; i < oldthis.code_bar_ele.length; i++){
				//$(oldthis.code_bar_ele[i]).attr('thisNum', i)
				$(oldthis.code_bar_ele[i]).animate({height:oldthis.code_height[$(oldthis.code_bar_ele[i]).attr('thisNum')]+'px'}, 1500, 'easeOutSine')
			}
			for(var i = 0; i < oldthis.design_bar_ele.length; i++){
				//$(oldthis.design_bar_ele[i]).attr('thisNum', i)
				$(oldthis.design_bar_ele[i]).animate({height:oldthis.design_height[$(oldthis.design_bar_ele[i]).attr('thisNum')] + 'px'}, 1500, 'easeOutSine')
			}
		}
		this.barMouse = function(){
			for(var i = 0; i < oldthis.code_bar_ele.length; i++){
				$($(oldthis.code_bar_ele[i]).children()[0]).rotate(-90);
				$($(oldthis.code_bar_ele[i])).attr('thisNum', i)
				$(oldthis.code_bar_ele[i]).hover(function(){
						$(this).animate({height: oldthis.code_height[$(this).attr('thisNum')]*(1+50/oldthis.code_height[$(this).attr('thisNum')])+'px'}, 500, 'easeInOutSine')
						//$(this).stop().animate({height: '310px'}, 500, 'easeOutCubic') 
						if(ufo.aniStats.skills == 0){ufo.skillPage();}
					}, function(){
						$(this).animate({height:oldthis.code_height[$(this).attr('thisNum')]+'px'}, 1200, 'easeInOutSine')
				})
			}
			for(var i = 0; i < oldthis.design_bar_ele.length; i++){
				$($(oldthis.design_bar_ele[i]).children()[0]).rotate(-90);
				$($(oldthis.design_bar_ele[i])).attr('thisNum', i)
				$(oldthis.design_bar_ele[i]).hover(function(){
						//$(this).animate({height: code_height[$(this).attr('thisNum')]*1.2+'px'}, 500, 'easeOutCubic')
						$(this).stop().animate({height: oldthis.design_height[$(this).attr('thisNum')]*(1+50/oldthis.code_height[$(this).attr('thisNum')])+'px'}, 500, 'easeInOutSine') 
					}, function(){
						$(this).animate({height:oldthis.code_height[$(this).attr('thisNum')] + 'px'}, 1200, 'easeInOutSine')
				})
			}
		}
	}
	barAnimation = new barAni();
})


/*------------------clock----------------------------*/
$(function(){
	setInterval( function() {
			var seconds = new Date().getSeconds();
			var sdegree = seconds * 6;
			$("#sec").rotate(sdegree)
			  
		}, 1000 );
		
		
	setInterval( function() {
	var hours = new Date().getHours();
		var mins = new Date().getMinutes();
		var hdegree = hours * 30 + (mins / 2);
		$("#hour").rotate(hdegree)
	  
	}, 1000 );
	
	
	setInterval( function() {
	var mins = new Date().getMinutes();
		var mdegree = mins * 6;
		$("#min").rotate(mdegree)
			}, 1000 );	
		})
/*------------------typewriter---------------------------*/

var twitterArray = new Array();
var timeArray = new Array();
var currentTweet = 0;
$.getJSON("http://twitter.com/statuses/user_timeline.json?screen_name=nicoalive&count=8&callback=?",

		function(data){

		$.each(data, function(i,item){

			ct = item.text;

			ct = ct.replace(/http:\/\/\S+/g,  '<a href="$&" target="_blank">$&</a>');

		    ct = ct.replace(/\s(@)(\w+)/g,    ' @<a href="http://twitter.com/$2" target="_blank">$2</a>');

		    ct = ct.replace(/\s(#)(\w+)/g,    ' #<a href="http://search.twitter.com/search?q=%23$2" target="_blank">$2</a>');
		    
		    time = item.created_at;
		    timeP = Date.parse(time);
		    //console.log(timeP);
		    d=new Date();
		    timeStamp = d.getTime();
		    timeDif = timeStamp-timeP;
		    			    
		    min = 60000;
		    hr = 60000*60;
		    day = 60000*60*24;
		    var printTime;   
		    if(timeDif<hr){
		   
			    printTime = Math.floor(timeDif/min); + "minutes ago";
			    if(printTime==1){printTime = "1 minute ago";}else{printTime = printTime + " minutes ago";}
			    
		    }else if(timeDif >= hr && timeDif < day){
		    
			    printTime = Math.floor(timeDif/hr); + "hours ago";
			    if(printTime==1){printTime = "1 hour ago";}else{printTime = printTime + " hours ago";}
			    
		    }else if(timeDif > day){
		    
			    printTime = Math.floor(timeDif/day); + "days ago";
			    if(printTime==1){printTime = "1 day ago";}else{printTime = printTime + " days ago";}
			    
		    }
		    twitterArray.push(ct);
		    timeArray.push(printTime);
		});
	});

$(function(){

	var pageNum = 0;
	var ifAnimating = false;
	//audio
	/*var a = new Audio();
	a.setAttribute('src','../media/typewriter.mp3');
	a.load();
	a.pause();*/
	
	//paper fly away + roll paper
	function writeCallback(){
		ifAnimating = false;
		$("#page"+pageNum)
			.delay(300)
			.animate({"min-height": "165px"},600)
			.delay(100)
			.animate({'bottom': (290-(50*Math.random()-25))+'px', 'left': 90-(80*Math.random()-40)+'px'}, 1100, 'easeOutCubic', function(){newPaper()})
		var htmlStr = $('#page'+pageNum).html();
		//create a new element here
		var newPaper = function(){
			$('#page'+pageNum).rotate({animateTo:(40*Math.random()-20)})
			$('#page'+pageNum).removeClass('move');
			pageNum++;		
			var paper = document.createElement('div');
			paper.className = 'paper move';
			paper.id = 'page' + pageNum;
			$(paper).html('<p class="word"></p>')
			$(paper)
				.css('min-height','0px')
				.delay(100)
				.animate({'min-height': '10px'}, 800)
			document.getElementById('typewriter').appendChild(paper);
		}
	}
	
	
	//submit button function
	$("#type").click(function(){
		if(ifAnimating == true){
			return;
		}

		ifAnimating = true;
		
		var $word = $($('.word')[pageNum])
		if(currentTweet > 7){
			var tweet = 'You are so greedy, there are no more tweets available. Follow me @nicoalive'
		}else{
			var tweet = twitterArray[currentTweet] + ' -'+ timeArray[currentTweet]		
			currentTweet++;
		}

		$word.html(tweet);
		  
		var textNum;
		var textSpeed = 80;
		
		;(function($){$.fn.typewriter=function(speed,callback){
			if(typeof callback!=='function')callback=function(){};
				var write=function(e,text,time){
				var text=text.toString();
				var next=$(e).text().length+1;
				
				if(next<=text.length){
				
				$(e).text(text.substr(0,next));
				setTimeout(function(e,text,time){write(e,text,time);},time,e,text,time);
				
				}else{
				e.callback();}
			};
			return this.each(function(){this.callback=callback;
			var text=$(this).text();
			var time=speed;
			$(this).text('');
			textNum = text.length;
			write(this,text,time)});
		}}(jQuery));
		
		$word.typewriter(textSpeed,writeCallback);
		
		var rows = Math.floor(textNum/23) + 1;  
		var totalSpeed = textSpeed*textNum;
		
	/*	$('#page'+pageNum).css('left', '145px')
		$('#typewriter_fm').css('left', '110px')
		$('#gra').css('left', '245px');*/
		for(i=0; i<rows; i++){
		$(".move")
				.animate({"left": "-=140px"},totalSpeed/rows + textSpeed*6)
				.animate({"left": "+=140px"},textSpeed)};
				//a.pause();
	});
})
/*------------------tv player---------------------------*/
$(function(){
	var video = $('video')[0];
	$(video)
	.bind('play',function() {
	 //$("#playtoggle");   
		})
	.bind('pause ended', function() {
	  $("#playtoggle").css('background-image', 'url("images/play.png")');
		});   
	   
	$("#playtoggle").click(function(){
	  if (video.paused) { 
	  	video.play(); 
	  //	$(this).html('pause')
	  	$(this).css('background-image', 'url("images/pause.png")')
	  }else{ 
	  	video.pause(); 
	 // 	$(this).html('play')
	  	$(this).css('background-image', 'url("images/play.png")')
	  	}     
	});
	
	$(video).bind('timeupdate', function() {
    
	  var rem = parseInt(video.duration - video.currentTime, 10),
	  pos = (video.currentTime / video.duration) * 100,
	  mins = Math.floor(rem/60,10),
	  secs = rem - mins*60;
	      
	  $('#timeleft').html('-' + mins + ':' + (secs > 9 ? secs : '0' + secs));
	//  if (!manualSeek) { positionIndicator.css({left: pos + '%'}); }
		
	});
	
	$('#sound div').click(function(){	
			video.volume = $(this).attr('sound')* 0.2;
			for(var i = 5; i>$(this).attr('sound'); i--){
				$('#s'+i+' span').css('background-color', 'rgba(255, 255, 255, .3)')
			}
			for(var i = 0; i<$(this).attr('sound'); i++){
				var a = i+1;
				$('#s'+ a+' span').css('background-color', 'rgba(255, 255, 255, .9)')
			}
			//$('#sound div').css('background-color', 'rgba(255, 255, 255, .3')

	})
})
/*--------------about me boxes-------------------*/
// at first #boxes should be display none so that parallax can work properly
// 
var process = 0;
var animateLine;

$(document).ready(function(){
	
	var processNum = 0;
	
	$('.showNext').click(function(){
 	  	if(!$(this).hasClass('clicked') && $(this).css('opacity')>.5){
 	  		$(this).addClass('clicked')
 	  		$($(this).attr('expandEle')).delay(200).animate({'opacity': 1}, 800, 'easeInOutCubic');
 	  		drawLine(processNum);
 	  	}
	 }) 	
	/*$('#b7').click(function(){
 	  	if(!$(this).hasClass('clicked') && $(this).css('opacity')>.5)$('.nine').animate({'opacity': 0}, 2000, 'easeInOutCubic');
	 })*/ 
	$('#hand span').click(function(){
 	  	if(!$(this).hasClass('clicked')){
	 	  	$('#b4').delay(800).animate({'opacity': 1}, 800, 'easeInOutCubic');
	 	  	$('#seed').animate({'opacity': 1}, 500, 'easeInOutCubic');
	 	  	$(this).addClass('clicked')
	 	  	setTimeout(function(){drawLine(processNum)}, 500)
 	  	}
	 }) 		

	var canvas = document.getElementById("nine_canvas");
    var context = canvas.getContext("2d");
 	var canvasH = $(canvas).height()
 	var canvasW = $(canvas).width()
 	var nine_radius = 156/2;
 	var nine_margin = 10;
//1
    context.lineWidth = 5;
    context.strokeStyle = "#3e3230"; // line color
    context.lineCap = "round";
	
	var posX = [90,
				90,
				90+nine_radius*2+nine_margin*2,
				canvasW-nine_radius-nine_margin,
				canvasW-nine_radius*3-nine_margin*2,
				nine_radius*5+nine_margin*2,
				nine_radius*5+nine_margin*2,
				nine_radius,
				nine_radius*3+nine_margin*1,
				nine_radius
				]
	var posY = [canvasH - 110,
				canvasH-(nine_radius*3+nine_margin*2),
				nine_radius,
				nine_radius*5+nine_margin*2,
				nine_radius*5+nine_margin*2,
				canvasH-nine_radius*3-nine_margin*2,
				nine_radius,
				nine_radius,
				nine_radius*3+nine_margin*1,
				nine_radius*5+nine_margin*3]

	var drawLine = function(end){
		
			var pointX = (posX[end+1] - posX[end])/8
			var pointY = (posY[end+1] - posY[end])/8
			animateLine = function(){
				context.clearRect(0, 0, canvasW, canvasH)
				/*for(var i=0; i < end; i++){
			
					context.moveTo(posX[i], posY[i]);
					context.lineTo(posX[i+1], posY[i+1]);	
				}*/
				context.moveTo(posX[end]+pointX*process, posY[end]+pointY*process);
				context.lineTo(posX[end]+pointX*(process+1), posY[end]+pointY*(process+1));
				context.stroke();
				if(process<7){
					process++;
					setTimeout('animateLine()', 50)
				}else{
					process = 0;
					processNum++;
				}
			}
			animateLine();	
			//processNum++;
		}
		

	})