// append the js-enabled stylesheet:
// this stylesheet contains styles which are only used in javascript enabled browsers.
var headID = document.getElementsByTagName("head")[0];         
var cssNode = document.createElement('link');
cssNode.rel = 'stylesheet';
cssNode.href = 'static/css/pf-js.css';
cssNode.media = 'screen, projection';
headID.appendChild(cssNode);

$(document).ready(function(){
	// check if the device is a small screen
	var handHeld = false;
	if ($('.sections').css('max-width') == '480px') {
		handHeld = true;
	}

	// functions shared by all devices
	MG_previewImg.init();

	// functions for large screens only
	if (handHeld == false) {	
		$('a.to-top').hide();
		MG_loadItems.init();
		MG_mainNav.init();
		MG_yearNav.init();
	}
});

/* hide and show preview images */
MG_previewImg = {
	init:function() {
		$('#work li a.preview').hide();
		
		// add preview visibility control
		$('#work li a.preview').before('<span class="show-preview" title="view screenshot">preview work</span>');

		// initalize visibility control
		$('#work li span.show-preview').click(function(){
			$('#work li span.show-preview').removeClass('active');
			$('#work li a.preview').hide();
		});
		$('#work li span.show-preview').toggle(function(){
			$(this).addClass('active');
			$(this).removeClass('reset');
			$(this).next().fadeIn();
		}, function(){
			$(this).removeClass('active');
			$(this).addClass('reset');
			$(this).next().fadeOut();
		});
		/*$("#work li span.show-preview").bind('touchend',function() {
			$(this).addClass('current');
		});*/
	}
}

/* show section (resets all other sections and elements) */
MG_showSection = {
	show:function(clicked){
		// reset work content
		$('#work li a.preview').hide();
		$('#work ul').not('#work ul.work-nav').hide();
		$('#work ul.work-nav li').removeClass('current');
		
		$('#about, #work, #contact').hide();
		$(clicked).fadeIn();
	}
}
		
/* initial animations */
MG_loadItems = {
	init:function() {
		setTimeout(function(){MG_loadItems.loadAnim("btn_contact")},200);
		setTimeout(function(){MG_loadItems.loadAnim("btn_work")},300);
		setTimeout(function(){MG_loadItems.loadAnim("btn_about")},400);
		setTimeout(function(){MG_loadItems.loadActive("btn_about","about")},500);
	}, 
	loadAnim:function(id) {
		$link = ".navigation li#"+id+" a";
		$($link).animate({ 
			marginRight:40 
		}, {
			//duration: 'slow', 
			easing: "easeOutCubic", 
			complete: function() {
				$(this).addClass('done');
			}
		});
	}, 
	loadActive:function(id,sectionId) {
		$link = ".navigation li#"+id+" a";
		$section = "#"+sectionId;
		$($link).animate({ 
			marginRight:0 
		}, {
			//duration: 'slow', 
			easing: "easeOutCubic", 
			complete: function() {
				$(this).addClass('active');
				MG_showSection.show($($section));
			}
		});
	}
}

/* hide and show main sections with navigation */
MG_mainNav = {
	init:function() {
	
		$('#about, #work, #contact').hide();
		
		// initialize click behaviour
		$(".navigation li a").click(function(){
			$(".navigation li a").not($(this)).animate({ 
				marginRight:40 
			}, {
				//duration: 'slow', 
				easing: "easeOutExpo", 
				complete: function() {
					//alert('done');
				}
			});
			
			$(this).animate({ 
				marginRight:0 
			}, {
				//duration: 'slow', 
				easing: "easeOutExpo", 
				complete: function() {
					MG_showSection.show($(this).attr('href'));
				}
			});
			
			$(".navigation li a").removeClass("active");
			$(this).addClass("active");
		});
	}
}

/* create year naviation and hide and show year sections */
MG_yearNav = {
	init:function() {
		$('#work header h2').hide();
		$('#work ul').hide();
	
		/* create work nav out of work h2s */
		$('#work header:first').after('<ul class="work-nav"></ul>');
	
		$years = $('#work h2');
		for (var c=0; c < $years.length; c++) {
			$text = $years[c].innerHTML;
			$('<li>'+$text+'</li>').click(function(){
				$('#work ul.work-nav li').removeClass('current');
				$(this).addClass('current');
				$('#work ul').not('#work ul.work-nav').hide();
				$year = $(this).html();
				$('header h2:contains('+$year+')').parent().next('ul').fadeIn();
			}).appendTo('ul.work-nav');
		}
	}
}

/* easing equations */
/* this way we don't have to load the whole jQuery UI and easing plugins */
$.easing.easeOutCubic = function (x, t, b, c, d) {
	return c*((t=t/d-1)*t*t + 1) + b;
}
$.easing.easeOutElastic = function (x, t, b, c, d) {
	var s=1.70158;var p=0;var a=c;
	if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
	if (a < Math.abs(c)) { a=c; var s=p/4; }
	else var s = p/(2*Math.PI) * Math.asin (c/a);
	return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}
$.easing.easeOutExpo = function (x, t, b, c, d) {
	return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
}