function goToTop(){
			$('html,body').animate({scrollTop: 0}, '200');
}

function goToByScroll(id){
			$('html,body').animate({scrollTop: $("."+id).offset().top},'slow');
}


function goToByScrollOffset(id){
			$('html,body').animate({scrollTop: $("."+id).offset().top-160},'slow');
}


function renewChart(){
		var skillChart= new Highcharts.Chart({
					chart: {
						renderTo: 'SkillChart',
						defaultSeriesType: 'column',
						backgroundColor: 'rgba(255,255,255,0)'
					},
					title: {
						text: ''
					},
					subtitle: {
						text: ''
					},
					xAxis: {
						categories: ['jQuery', 'CMS', 'Ps/In/Ai', 'FinalCut Premiere', 'HTML/CSS'],
						gridLineWidth:0,
						lineWidth: 0,
						tickWidth: 0
					},
					
					yAxis: {
						labels : {enabled:false},
						lineWidth: 0,
						gridLineWidth:0,
						min: 0,
						tickWidth: 0,
						title: {
							text: null
						}
					},
					tooltip: {
						formatter: function() {
							return ''+
								 this.x;
						}
					},
					plotOptions: {
					
						column: {
							borderWidth: 2,
							dataLabels: {
							enabled: false,
							formatter: function() {
									return this.y +'%';
								}

							}				
						}
					},
					legend: {enabled:false},
					credits: {
						enabled: false
					},
				    series: [{
						data: [
							{y: 34, color: '#8bd7db'},							
							{y: 68, color: '#59C3CD'},
							{y: 75, color: '#4fc0cc'},
							{y: 78, color: '#59c3cd'},
							{y: 80, color: '#55b4bd'},
							],
					}]
				});
			var doChart = new Highcharts.Chart({
					chart: {
						renderTo: 'DoChart',
						plotBorderWidth: null,
						plotShadow: false,
						backgroundColor: 'rgba(255,255,255,0)'
					},
					title: {
						text: ''
					},
					subtitle: {
						text: ''
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>';
						}
					},
					plotOptions: {
						pie: {
							animation: true,
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#5C5C5C',
								connectorColor: '#5C5C5C',
								distance: 20,
								formatter: function() {
									return  this.point.name ;
								}
							}
						}
					},
					credits: {
						enabled: false
					},
				    series: [{
						type: 'pie',
						name: 'What I do?',
						data: [
							{name:'Curiosity',y: 20.0, color:'#9fe4eb'},
							{name: 'Pragmatism',y: 20.0,color:'#45a8b2'},
							{name:'Organization',y: 20.0, color:'#89d2da'},
							{name: 'Creativity',y: 20.0, color:'#4FC0CC'},	
							{name: 'Analytical mind',y: 20.0,color:'#45a8b2'},

						]
					}]
				});

			;
}

function displayPrint() {
	jQuery('.tab#print').fadeIn('slow');jQuery('.tab:not(#print)').hide();goToByScroll('works');
}

function displayWeb() {
	jQuery('.tab#website').fadeIn('slow');jQuery('.tab:not(#website)').hide();goToByScroll('works');
}

function displayVideo() {
	jQuery('.tab#video').fadeIn('slow');jQuery('.tab:not(#video)').hide();goToByScroll('works');
}
		
jQuery(document).ready(function(){
	
	jQuery(".tab:not(:first)").hide();

	//to fix u know who
	jQuery(".tab:first").show();
	
	jQuery(".htabs a").click(function(){
		stringref = jQuery(this).attr("href").split('#')[1];

		jQuery('.tab:not(#'+stringref+')').hide();

		if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") {
			jQuery('.tab#' + stringref).show();
		}
		else 
			jQuery('.tab#' + stringref).fadeIn('slow');
		
		return false;
	});
	
	renewChart();
	
});

var shown = false;
	
function showContact() {
	jQuery('#overlay').css({display: 'block'});
	jQuery('#contactable_inner').animate({"marginLeft": "-=5px"}, "fast"); 
	jQuery('#contactForm').animate({"marginLeft": "-=0px"}, "fast");
	jQuery('#contactable_inner').animate({"marginLeft": "+=387px"}, "slow"); 
	jQuery('#contactForm').animate({"marginLeft": "+=390px"}, "slow");
	shown = true;
}

function hideContact() {

	jQuery('#contactForm').animate({"marginLeft": "-=390px"}, "slow");
	jQuery('#contactable_inner').animate({"marginLeft": "-=387px"}, "slow").animate({"marginLeft": "+=5px"}, "fast"); 
	jQuery('#overlay').css({display: 'none'});
	shown = false;
}

function toggleContact() {
    if (shown){
   		hideContact();
    }
    else {
		showContact();
    }

}