/**
 * @author DeCo
*/

var DC = {};
DC.contentActive = false;

$(function() {
    document.ontouchmove = function(e){ e.preventDefault(); };
    
    $(".jqBlank").each( function(){
		$(this).attr("target","_blank");
	});
	
	if ($("html").hasClass("ie8") || $("html").hasClass("ie7") || $("html").hasClass("ie6")) {
		_gaq.push(["_trackPageview", "IE_fail"]);
		//$("body").empty().html("<p style='position: absolute; top: 50%; left: 50%; margin-left: -320px'>I'm sorry, your browser is too old to view this HTML5 website. Please update your browser to IE9+, <a href='http://www.mozilla.com/firefox/' style='text-decoration:underline;'>Firefox</a> or <a href='http://www.google.nl/chrome' style='text-decoration:underline;'>Chrome</a></p>");
		$(".label span").html("");
	}
});

(DC.parallax = function() {
	var objSize = {},
		f = 1.25,
		ds = 1024;

	// functions
	var size = function(e) {
		var body = $("body");
		var bw = body.width() * f; 
		var bh = body.height() * f;
		
		if (bw >= bh) {
			objSize.width = bw;
			objSize.height = objSize.width;
		} else {
			objSize.height = bh;
			objSize.width = objSize.height;
		}
		
		objSize.top = (body.height() / 2) - (objSize.height / 2);
		objSize.left = (body.width() / 2) - (objSize.width / 2);
		
		$(".l1").width(objSize.width).height( (objSize.height / ds) * 486).css("top", objSize.top + ((objSize.height / ds) * 450)).css("left", objSize.left);
		$(".l2").width(objSize.width).height( (objSize.height / ds) * 952).css("top", objSize.top + ((objSize.height / ds) * 70)).css("left", objSize.left);
		$(".l3").width(objSize.width).height( (objSize.height / ds) * 403).css("top", objSize.top + ((objSize.height / ds) * 440)).css("left", objSize.left);
		$(".l4").width(objSize.width).height(objSize.height).css("top", objSize.top).css("left", objSize.left);

		$(".main").width(body.width()).height(body.height());
		
		if (e.type == "load") {
			$(".layer").show();
			$(".loading").remove();			
		}
	};
	
	// events
	$(window).bind("load resize", function(e) {
		size(e);
	});
	
	$(document).bind("mousemove touchmove", function(e) {
		e.preventDefault();
        var mx = e.pageX;
        
        if (e.originalEvent.touches || e.originalEvent.changedTouches) {
			var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
			mx = touch.pageX;        	
        }
		
		var bw = $("body").width();
		var x = (bw / 2) - (objSize.width / 2);
		var f = (bw / 2) / Math.abs(x) * -1;
		
		for (var i = 1; i < 5; i++) {
			$(".l" + i).css("left", (((bw / 2) - mx) / (f * i)) + x);
			//$(".l" + i).stop().animate({left: ((((bw / 2) - mx) / (f * i)) + x) + 'px'}, 250, 'easeOutQuint');
		}
	});

	
}());



(DC.player = function() {
	var player = $(".player"),
		audio = $('.player audio').get(0),
		progress = $('.player #progress'),
		btnPlay = $(".player #btnPlay"),
		restart = false,
		track = $(".player .track"),
		playerTitle = $(".player .title"),
		srcmp3 = $(".player #mp3"),
		srcogg = $(".player #ogg");
		
	
	// functions
	var resize = function(e) {
		player.find(".track").width($("body").width() - 60);
	};
	

	// events
	if (!!document.createElement('audio').canPlayType) {
		
		$(window).bind("load resize", function(e) {
			
			if (e.type == "load") {
				//player.hide();
			}
			
			resize(e);
			
		});
		
		$(btnPlay).click(function() {
			if ($(btnPlay).hasClass("play")) {
				$(btnPlay).removeClass("play").addClass("pause");
				audio.play();
			} else {
				$(btnPlay).removeClass("pause").addClass("play");
				audio.pause();
			}
			
			resize();
		});
		
		$(".tracklist .item a").bind("click", function(e) {
			var track = $(this);
			
			if (!player.data("visible")) { 
				player.hide().css("visibility", "visible");
				player.show().animate({ opacity: 0 }, 0).animate({ opacity: 1 }, 1000, 'easeOutBack');
				player.data("visible", true);
				resize();
			}
			
			playerTitle.text(track.text());
			_gaq.push(["_trackPageview", "Playtrack:" + track.text()]);
	
			srcmp3.attr('src', "http://www.marcelwoods.com/audio/" + track.attr("data-track") + ".mp3").appendTo(audio);
	      	srcogg.attr('src', "http://www.marcelwoods.com/audio/" + track.attr("data-track") + ".ogg").appendTo(audio);
	      	
	      	audio.addEventListener("canplay", function(){
				audio.play();
				$(btnPlay).removeClass("play").addClass("pause");
			}, true);
			
			audio.load();

		});

		
		$(audio).bind('timeupdate', function() {
			loaded = false;  
 			progress.width(parseInt((audio.currentTime / audio.duration) * track.width()));
 			
 			if (audio.currentTime >= audio.duration) {
 				audio.currentTime = 0;
 				audio.pause();
 				$(btnPlay).removeClass("pause").addClass("play");
 				progress.width(0);
 			}
 			
 			if (!loaded) {
 				loaded = true;
 				$(".player #seek").bind("click", function(e) {
					audio.currentTime = ((e.pageX - 30) / track.width()) * audio.duration;
 				});
			}
		});
		
		
	} else {
		//player.hide();
        player.html("<p>Unfortunately your browser is not HTML5 compatible. You're not able to listen the tracks. Please update your browser to IE9+, <a href='http://www.mozilla.com/firefox/' style='text-decoration:underline;'>Firefox</a> or <a href='http://www.google.nl/chrome' style='text-decoration:underline;'>Chrome</a></p>");
	}

}());




(DC.tracklist = function() {
	var container = $(".tracklist"),
		label = $(".label"),
		item = $(".item"),
		items = $(".items"),
		player = $(".player"),
		body = $("body"),
		containerOut = $(".layer, .logo"),
		nav = $(".tracklist .nav"),
		menu = $(".menu");
		
	items.data("item", 0);
	items.data("items", 1);
	
	var resize = function(e) {
		item.width(body.width());
		var w = item.width() + 30;
		var l = 0 - parseInt(w * items.data("item"));
		items.css("left", l);
	};
	
	$(window).bind("load", function(e) {
		item.css({ opacity: 0 });
		nav.show().css({ opacity: 0 });
		items.data("items", items.find(".item").size());
		container.find(".background").css({ opacity: .6 });
		resize(e);
	}).bind("resize", function(e) {
		resize(e);
	});
	
	$(".tracklist a.nav.left").bind("click", function(e) {
		items.data("item", items.data("item") - 1);
		
		var w = item.width() + 30;
		
		if (items.data("item") < 0) {
			items.data("item", 0);
		}
		
		var l = 0 - parseInt(w * items.data("item"));
		
		items.stop().animate({
			left: l
		}, 400);
	});
	
	$(".tracklist a.nav.right").bind("click", function(e) {
		items.data("item", items.data("item") + 1);
		
		var w = item.width() + 30;
		
		if (items.data("item") >= items.data("items") - 1) {
			items.data("item", items.data("items") - 1);
		}
		
		var l = 0 - parseInt(w * items.data("item"));
		
		items.stop().animate({
			left: l
		}, 400);
	});
	
	
	
	container.bind("touchmove mouseenter", function(e) {
		e.stopPropagation();
		if (!DC.contentActive) {
			container.stop().animate({
					height: 150
				}, 400);
			label.stop().animate({
					opacity: 0
				}, 400);
			container.find(".background").stop().animate({
					opacity: 0.8
				}, 400);
			item.stop().show().animate({
					opacity: 1
				}, 1600);
			nav.stop().animate({
					opacity: 1
				}, 400);
			menu.stop().animate({
					bottom: 160
				}, 250);
		}
	});
	containerOut.bind("touchtab mouseenter", function(e) {
		e.stopPropagation();
		if (!DC.contentActive) {
			container.stop().animate({
					height: 30
				}, 250);
			label.stop().animate({
					opacity: 1
				}, 250);
			container.find(".background").stop().animate({
					opacity: 0.6
				}, 250);
			item.stop().animate({
					opacity: 0
			}, 250, function() { $(this).hide(); });
			nav.stop().animate({
					opacity: 0
				}, 250);
			menu.stop().animate({
					bottom: 40
				}, 500);
		}
	});
}());



(DC.content = function() {
	var menuitem = $(".menu li"),
		content = $(".content"),
		contentBackground = $(".content .background");
		contentInner = $(".content .inner");
		contentOut = $(".layer, .logo"),
		tracklist = $(".tracklist"),
		body = $("body"),
		menu = $(".menu"),
		offset = 40,
		youtube = $(".youtube"),
		socialmedia = $(".socialmedia");
	
	var resize = function(e) {
		var w = ($("body").width() < 490) ? $("body").width() - 80 : 430;
		menu.css({ left: '', right: 20 });
		offset = 40;
		youtube.width(w);
		if (body.width() < 870) {
			offset = 80;
			if (DC.contentActive) { 
				menu.css({ left: 20 });
			}
		} else {
			
		}
		contentInner.height(body.height() - offset);
	};
		
	$(window).bind("load", function(e) {
		content.css({ opacity: 0 });
		contentInner.css({ opacity: 0 }).hide();
		resize(e);
	}).bind("resize", function(e) {
		resize(e);
	});
	
	menuitem.bind("click", function(e) {
		var i = menuitem.index(($(this))),
			w = ($("body").width() < 490) ? $("body").width() - 40 : 490;
		contentInner.css({ opacity: 0, width: w - 40 }).hide();
		content.show();
		socialmedia.hide().css({ opacity: 0 });
		content.show().stop().animate({
			opacity: 1,
			width: w,
			left: 20
		}, 400, function(e) {
			resize(e);
			contentInner.eq(i).show().stop().animate({
				opacity: 1
			}, 1200);
		});
		contentBackground.stop().animate({
			opacity: .8
		}, 250);
		tracklist.stop().animate({
			opacity: 0,
			height: 30
		}, 250, function() {
			$(this).hide();
		});
		if (!DC.contentActive) {
			if (offset == 40) {
				menu.stop().animate({
					bottom: 7
				}, 1200);
			} else {
				menu.stop().animate({
					bottom: 7,
					opacity: 0
				}, 1200, function(e) {
					menu.css({ left: 20, right: '' });
					menu.stop().animate({
						opacity: 1
					}, 1200);
				});
			}
		}
		
		DC.contentActive = true;
	});
	contentOut.bind("click", function(e) {
		content.stop().animate({
			opacity: 0,
			width: 0,
			left: 0
		}, 600, function(e) {
			DC.contentActive = false;
			content.hide();
		});
		contentBackground.stop().animate({
			opacity: 0
		}, 600);
		tracklist.show().stop().animate({
			opacity: 1,
			height: 30
		}, 600);
		contentInner.stop().animate({
			opacity: 0
		}, 600);
		socialmedia.show().stop().animate({ 
			opacity: 1 
		}, 1200);
		if (DC.contentActive) {
			if (offset == 40) {
				menu.stop().animate({
					bottom: 40
				});			
			} else {
				menu.stop().animate({
					opacity: 0
				}, 1200, function(e) {
					menu.css({ right: 20, left: '' });
					menu.stop().animate({
						bottom: 40,
						opacity: 1
					}, 1200);
				});
			}
		}
	});
}());