/*
 * global
 */
var page = 	{
				cubeOriginalColor: $('.cube').first().css('background-color'),
				pageOriginalColor: $('body').css('background-color')
			}

/* 
 * check for touch device
 * check placed here because we load plugins only in case it is a touch device
 * http://modernizr.github.com/Modernizr/touch.html
 */
function isTouchDevice() {
	/* works on iPad, iPhone, iPod, Android */
	try {
		document.createEvent("TouchEvent");
		return true;
	} catch (e) {
		return false;
	}
}

/* 
 * set spefific class to identify touch / no touch browsers 
 */
if (isTouchDevice()) {
	// set class touch to the body to be able to target touch devices by CSS specificity
	jQuery("body").addClass("touch");
} else {
	// set class touch to the body to be able to target touch devices by CSS specificity
	jQuery("body").addClass("noTouch");
}
			
/*
 * set double click action
 */
function setDoubleClick(elem) {
	// double click set random bg color, yeah!
	$(elem).dblclick(function() {
		var color = 'rgb(' + (Math.floor(Math.random() * 255)) + ',' + (Math.floor(Math.random() * 255)) + ',' + (Math.floor(Math.random() * 255)) + ')';
		$(this).css('background-color', color);
	});
}

/*
 * show finished trigger
 */
function showFinishedTrigger() {
	// fade in and out with animate()
	/*
		$(".setLayout .finished").animate({opacity: 'toggle'}, 300, 'linear', function() {
			$(".setLayout .finished").animate({opacity: 'toggle'}, 1000, 'linear');
		});
	*/
	// better fade in and out with direct function
	$(".setLayout .finished").fadeIn(300, function() {$(".setLayout .finished").fadeOut(1000, function() {} );});
}

/*
 * reset the layout
 */
function resetLayout() {

	$(".cube").removeClass("ly1");

	$("#portrait").stop().animate({left:'200px', 	top: '0px'},{queue:false,duration:1000});
	// $("#logo").stop().animate({left:'300px', 	top: '470px'},{queue:false,duration:1000});

	$(".cube.a1").stop().animate({left:'150px', 	top: '0px'},{queue:false,duration:1000});
	$(".cube.a2").stop().animate({left:'550px', 	top: '0px'},{queue:false,duration:1000});
	
	$(".cube.b1").stop().animate({left:'150px', 	top: '50px'},{queue:false,duration:1000});
	$(".cube.b2").stop().animate({left:'350px', 	top: '50px'},{queue:false,duration:1000});
	$(".cube.b3").stop().animate({left:'500px', 	top: '50px'},{queue:false,duration:1000});

	$(".cube.c1").stop().animate({left:'0px', 		top: '100px'},{queue:false,duration:1000});
	$(".cube.c2").stop().animate({left:'350px', 	top: '100px'},{queue:false,duration:1000});

	$(".cube.d1").stop().animate({left:'0px', 		top: '150px'},{queue:false,duration:1000});
	$(".cube.d2").stop().animate({left:'500px', 	top: '150px'},{queue:false,duration:1000});

	$(".cube.e1").stop().animate({left:'0', 		top: '200px'},{queue:false,duration:1000});
	$(".cube.e2").stop().animate({left:'200px', 	top: '200px'},{queue:false,duration:1000});
	$(".cube.e3").stop().animate({left:'450px', 	top: '200px'},{queue:false,duration:1000});

	$(".cube.f1").stop().animate({left:'0px', 		top: '250px'},{queue:false,duration:1000});
	$(".cube.f2").stop().animate({left:'100px', 	top: '250px'},{queue:false,duration:1000});
	$(".cube.f3").stop().animate({left:'350px', 	top: '250px'},{queue:false,duration:1000,complete:function(){showFinishedTrigger();}});

	// reset bg colors by animation, jQuery UI effect "Highlight" is needed
	$('.cube').animate({
			backgroundColor: page.cubeOriginalColor
		}, 2000, function() {
			// Animation complete.
	});
	
	// animate and remove additional cubes
	$('.cube.additional').animate({
			backgroundColor: page.pageOriginalColor
		}, 2000, function() {
			$(this).remove();
	});	
}

/*
 * instagram
 */
function setInstagram() {
	// show all instagram images
	var i = 1;
	while (i<=81) {
  		jQuery("#instagram").append("<a href='http://derplattenspieler.com/images/instagram/" + i + ".jpg'><img src='images/instagram/thumbs/" + i + ".jpg' /></a>");
  		i++;
  	}
}

/*
 * ready functions
 */
$(document).ready(function(){

	/*
	 * set animations
	 * inspired by http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/
	 */

	if (!isTouchDevice()) {
		$('#car #portrait').hover(function(){
			$(this).stop().animate({height:'150px'},{queue:false,duration:500});
			$(".cover", this).stop().animate({top:'150px'},{queue:false,duration:500});
		}, function() {
			$(this).stop().animate({height:'50px'},{queue:false,duration:500});
			$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:500});
		});

		// make it draggable
		$(".cube, #portrait, #logo").draggable({ grid: [50, 50] });
		$(".cube").draggable({ grid: [50, 50] });
		
		// set double click
		setDoubleClick(".cube");
		
		// layout 1
		// $(".layoutDefault").click(function(){$(".cube").removeClass("ly1");});
		// layout 2
		// $(".layout1").click(function(){$(".cube").addClass("ly1");});

		// reset positions
		$("span.resetLayout").click(function(){resetLayout();});
	
		// add cubes with different width, assign draggable and color double click
		$("span.addCubeOne").click(function() {
			$("div#car").append("<div class='cube additional one'></div>");
			$(".cube.additional").draggable({ grid: [50, 50] });
			setDoubleClick(".cube.additional");
		});
		$("span.addCubeTwo").click(function() {
			$("div#car").append("<div class='cube additional two'></div>");
			$(".cube.additional").draggable({ grid: [50, 50] });
			setDoubleClick(".cube.additional");
		});
		$("span.addCubeThree").click(function() {
			$("div#car").append("<div class='cube additional three'></div>");
			$(".cube.additional").draggable({ grid: [50, 50] });
			setDoubleClick(".cube.additional");
		});
	}
	
	// profile
	$("div#profile p").click(function(){
		$("h1, #projects").toggle();
	});
	
	// instagram fotos
	setInstagram();

});