document.createElement("section");  
document.createElement("article");  
document.createElement("footer");  
document.createElement("header");  

$(document).ready(function() {
	initialize();
	$('.projects a[href$=".html"]').click(function(){
		var projectName = $(this).attr("href");
		$(this).append('<span class="loading"><img src="img/loading.gif" alt=""></span>');
		$.ajax({
			url: projectName,
			cache: false,
			success: function(html){
				$("#current-project").html(html);
				$(".loading").delay(500).fadeOut();
				initialize();
				$("body").delay(500).scrollTo("#current-project .facts", 750);
			}
		});
		$(".projects a").removeClass("active");
		$(this).addClass("active");
		return false;	
	});	
	$("nav a[href^='#'], a.scroll").click(function(){
		$("body").scrollTo($(this).attr("href"), 750);
		return false;
	});
	
	$.ajax({
		url: "vprojects/project-zvb.html",
		cache: false,
		success: function(html){
		  	$("#current-project").html(html);
		  	$('.projects a[href="project-zvb.html"]').addClass("active");
			initialize();
		}
	});
	$.ajax({
		url: "rss/twitter.php",
		cache: false,
		success: function(html){
			$("#stream-twitter .loading").fadeOut('fast');
			$("#stream-twitter").append(html);
			$("#stream-twitter ul").hide();
			$("#stream-twitter ul").slideDown('slow');
			$("#stream-twitter a").each(function(){
				$(this).text($(this).text().substr(7)); 
			});
		}
	});
	$.ajax({
		url: "rss/delicious.php",
		cache: false,
		success: function(html){
			$("#stream-delicious .loading").fadeOut('fast');
			$("#stream-delicious").append(html);
			$("#stream-delicious ul").hide();
			$("#stream-delicious ul").slideDown('slow');
		}
	});
});



function initialize(){
	$(".screenshot").hide();
	$(".screenshot").css("opacity", "0");
	$(".screenshot:first-child").css("opacity", "1");
	$(".screenshot:first-child").fadeIn();
	$(".devices a").click(function(){
		var Device = $(this).attr("href");
		$(".devices a").removeClass("active");
		$(this).addClass("active");
		$(".screenshot").hide();
		$(".screenshot").css("opacity", "0");
		$(Device).show();
		$(Device).animate({
			opacity: "1",
			}, 750, function() {
		});
		//$("body").scrollTo("#current-project .facts", 750);

		return false;
	});	


	$(".viewport").append('<a class="scroll-top"></a><a class="scroll-bottom"></a>');
	$(".sc-desktop .landscape").append('<img src="img/design/desktop.png" alt="">');
	$(".sc-tablet .portrait").append('<img src="img/design/ipad-portrait.png" alt="">');
	$(".sc-tablet .landscape").append('<img src="img/design/ipad-landscape.png" alt="">');
	$(".sc-mobile .portrait").append('<img src="img/design/iphone-portrait.png" alt="">');
	$(".sc-mobile .landscape").append('<img src="img/design/iphone-landscape.png" alt="">');
		

	var theZindex = 1;
	$(".scroll-top").hide();	
	$(".scroll-top, .scroll-bottom").click(function(){
		var imageHeight = $(this).parent().find("img").height();
		var viewportHeight = $(this).parent().height();
		var heightDifference = imageHeight - viewportHeight;
		var animationSpeed = heightDifference * 4;
		$(this).parent().find(".scroll-top, .scroll-bottom").fadeIn(500);
		$(this).fadeOut(500);
		if ($(this).hasClass("scroll-bottom")) {
			$(this).parent().find("img").animate({
				marginTop: "-" + heightDifference,
				}, animationSpeed, function() {
			});
		}
		else {
			$(this).parent().find("img").animate({
				marginTop: 0,
				}, animationSpeed, function() {
			});
		}
		theZindex +=1;
		$(this).parent().parent().css("zIndex", theZindex);
	});	
	$(".viewport img").click(function(){
		theZindex +=1;
		$(this).parent().parent().css("zIndex", theZindex);
	});
}