var day;
var hour;
var minute;
var sec;

var dateFinished = new Date(2011, 12, 4, 12, 0, 0, 0);

function tick() {
//	updateCounter();
//	setTimeout("tick()", 1000);
}

function updateCounter() {
	var now = new Date();
	var verschil = dateFinished.getTime() - now.getTime();
	var seconds = verschil / 1000;
	var days = Math.floor(seconds / 86400);
	seconds -= days * 86400;
	var hours = Math.floor(seconds / 3600);
	seconds -= hours * 3600;
	var minutes = Math.floor(seconds / 60);
	seconds -= minutes * 60;
	seconds = Math.floor(seconds);
	day.text(days);
	if(days < 100)
		day.text("0" + days);
	if(days < 10)
		day.text("00" + days);
	hour.text(hours);
	if(hours < 10)
		hour.text("0" + hours);
	minute.text(minutes);
	if(minutes < 10)
		minute.text("0" + minutes);
	sec.text(seconds);
	if(seconds < 10)
		sec.text("0" + seconds);
}


$(document).ready(function() {

	//CHECK IF BROWSER SUPPORTS CANVAS
	var test_canvas = document.createElement("canvas");
	var canvascheck = (test_canvas.getContext) ? true : false

	var stylesheet;

	if(!canvascheck)
	 {
	 	window.location = 'no-ie.html';
	 /*stylesheet = $('#stylesheet');
	 stylesheet.attr('href', 'css/screenOld.css');
	 
	 return;*/
	 }

	if(navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
		//window.location = 'mobile.html';
	}

	var canvas = $('#pathCanvas');
	var context = canvas[0].getContext('2d');

	var logo1 = $('#logo');
	var logo2 = $('#logo2');
	var logo3 = $('#logo3');
	var logo4 = $('#logo4');
	var loadingScreen = $('#loadingScreen');
	day = $('#day');
	hour = $('#hour');
	minute = $('#minute');
	sec = $('#sec');
	var screen1 = $('#screen1');
	var screen2 = $('#screen2');
	var screen3 = $('#screen3');
	var screen4 = $('#screen4');

	var engaging1 = $('#engaging1');
	var engaging2 = $('#engaging2');
	var engaging3 = $('#engaging3');
	var engaging4 = $('#engaging4');

	var contact1 = $('#contact1');
	var contact2 = $('#contact2');
	var contact3 = $('#contact3');
	var contact4 = $('#contact4');

	var logoContainer2 = $('#logoContainer2');
	var logoContainer3 = $('#logoContainer3');
	var logoContainer4 = $('#logoContainer4');

	var arrow1 = $('#arrow1');
	var arrow2 = $('#arrow2');
	var arrow3 = $('#arrow3');
	var arrow4 = $('#arrow4');

	/*Alle teksten*/
	var text1 = $('.firstChild');
	//Coming soon
	var text2 = $('.secondChild');
	//The brand new Borish website
	var text3 = $('.lastChild');
	// Film Events Online
	var text4 = logoContainer2.children('h2');
	//Bringing ideas and visions to life
	var text5 = logoContainer3.children('h2');
	//getting the message across
	var text6 = logoContainer4.children('h2');
	//connecting employees
	var text7 = $('#launchText');
	//Untill Website launch

	var counter = $('#counter');
	var comingsoon = $('#comingsoon');

	var duration = 1000;

	var screenW;
	var screenH;
	var smallSize;
	var largeSize;
	var activeScreen = 'screen1';

	var easterEgg = true;
	var codeArray = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
	var checkArray = [];
	var i = 0;

	//CHECK FOR IPAD
	var isiPad = navigator.userAgent.match(/iPad/i) != null;

	//DISABLE IPAD SCROLLING
	document.ontouchmove = function(e) {
		e.preventDefault();
	}
	//DISABLE KEYBOARD SCROLLING
	var ar = new Array(33, 34, 35, 36, 37, 38, 39, 40);
	$(document).keydown(function(e) {
		var key = e.which;
		if($.inArray(key, ar)) {
			e.preventDefault();
			return false;
		}
		return true;
	});

	window.onload = function() {

		drawLayout();
		updateCounter();
		tick()
	}

	window.onorientationchange = function() {
		drawLayout();
	}
	drawLayout();

	$(window).resize(function() {
		if(!isiPad) {
			drawLayout();
		}
	});
	var x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, x6, y6, x7, y7, x8, y8, x9, y9, x10, y10, x11, y11, x12, y12, x13, y13, x14, y14, x15, y15, x16, y16, x17, y17, x18, y18, x19, y19, x20, y20, x21, y21, x22, y22, x23, y23 = 0;

	var wx1, wy1, wx2, wy2, wx3, wy3, wx4, wy4, wx5, wy5, wx6, wy6, wx7, wy7, wx8, wy8, wx9, wy9, wx10, wy10, wx11, wy11, wx12, wy12, wx13, wy13, wx14, wy14, wx15, wy15, wx16, wy16 = 0;

	function drawLayout() {
		resolution = $(window).width() / $(window).height();
		screenW = $(window).width();
		screenH = $(window).height();
		smallSize = Math.min(screenW, screenH);
		largeSize = Math.max(screenW, screenH);

		screen1.css({
			'height' : screenH + 'px',
			'width' : screenW + 'px',
			'left' : '0',
			'top' : '0'
		});
		screen2.css({
			'height' : screenH + 'px',
			'width' : screenW + 'px',
			'left' : screenW + 'px',
			'top' : '0'
		});
		screen3.css({
			'height' : screenH + 'px',
			'width' : screenW + 'px',
			'left' : screenW + 'px',
			'top' : screenH + 'px'
		});
		screen4.css({
			'height' : screenH + 'px',
			'width' : screenW + 'px',
			'left' : '0',
			'top' : screenH + 'px'
		});

		var screen1bg = new Image();
		var screen2bg = new Image();
		var screen3bg = new Image();
		var screen4bg = new Image();
		screen1bg.src = 'http://tim.mybit.nl/borish/images/bg1.jpg';
		screen2bg.src = 'http://tim.mybit.nl/borish/images/bg2.jpg';
		screen3bg.src = 'http://tim.mybit.nl/borish/images/bg3.jpg';
		screen4bg.src = 'http://tim.mybit.nl/borish/images/bg4.jpg';

		canvas.attr('height', screenH * 2);
		canvas.attr('width', screenW * 2);

		//VARIABLES FOR SIZE PATH
		var circleSize = largeSize / 15;

		//X & Y POINTS FOR GRAYPATH
		x1 = screenW / 20 + screenW / 50 + 15, y1 = 0; x2 = x1, y2 = screenH / 6 * 5;
		//curve scherm 1
		x3 = x1, y3 = y2 + 25; x4 = x3 + 25, y4 = y3;
		//to scherm 2
		x5 = screenW * 2 - screenW / 10, y5 = y4;
		//curve scherm 2
		x6 = x5 + 25, y6 = y5; x7 = x6, y7 = y6 + 25;
		//to next screen
		x8 = x7, y8 = y6 + screenH; x9 = x8, y9 = y8 + 25; x10 = x9 - 25, y10 = y9; x11 = 0, y11 = y10;

		/*Coming Soon text*/
		comingsoon.css({
			'height' : screenH / 2
		});
		comingsoon.css({
			'top' : 100,
			'left' : screenW / 50
		});

		// X & Y POINTS FOR WHITE STRIPE
		wx1 = 0, wy1 = y4 - screenH / 7; wx2 = screenW - screenW / 5, wy2 = wy1; wx3 = wx2 + 115, wy3 = wy1; wx4 = screenW * 2 - screenW / 5, wy4 = wy1; wx5 = wx4 + 25, wy5 = wy1; wx6 = wx5, wy6 = wy1 + 25; wx7 = wx5, wy7 = wy6 + 115; wx8 = wx5, wy8 = screenH * 2 - screenH / 3.5; wx9 = wx5, wy9 = wy8 + 25; wx10 = wx9 - 25, wy10 = wy9; wx11 = screenW + screenW / 15 + 115, wy11 = wy10; wx12 = screenW + screenW / 15, wy12 = wy11; wx13 = screenW / 12, wy13 = wy12; wx14 = wx13 - 25, wy14 = wy13; wx15 = wx14, wy15 = wy14 - 25; wx16 = wx14, wy16 = screenH + screenH / 7;

		var mainStroke = 30;
		context.clearRect(0, 0, 2 * screenW, 2 * screenH);

		if(largeSize < 800 || smallSize < 600) {
			mainStroke = smallSize / 15;
		}

		screen4bg.onload = function() {
			context.drawImage(screen1bg, 0, 0, screenW, screenH);
			context.drawImage(screen2bg, screenW, 0, screenW, screenH);
			context.drawImage(screen3bg, screenW, screenH, screenW, screenH);
			context.drawImage(screen4bg, 0, screenH, screenW, screenH);

			/* BG path dark gray*/
			context.beginPath();
			context.moveTo(x1, y1);
			context.lineTo(x2, y2);
			context.bezierCurveTo(x2, y2, x3, y3, x4, y4);
			context.lineTo(x5, y5);
			context.bezierCurveTo(x5, y5, x6, y6, x7, y7);
			context.lineTo(x8, y8);
			context.bezierCurveTo(x8, y8, x9, y9, x10, y10);
			context.lineTo(x11, y11);
			context.lineWidth = 20;
			context.strokeStyle = '#292929';
			context.stroke();

			/* path white stripe*/
			context.beginPath();
			context.moveTo(wx1, wy1);
			context.lineTo(wx2, wy2);
			context.moveTo(wx3, wy3);
			context.lineTo(wx4, wy4);
			context.bezierCurveTo(wx4, wy4, wx5, wy5, wx6, wy6);
			context.moveTo(wx7, wy7);
			context.lineTo(wx8, wy8);
			context.bezierCurveTo(wx8, wy8, wx9, wy9, wx10, wy10);
			context.lineTo(wx11, wy11);
			context.moveTo(wx12, wy12);
			context.lineTo(wx13, wy13);
			context.bezierCurveTo(wx13, wy13, wx14, wy14, wx15, wy15);
			context.lineTo(wx16, screenH + screenH / 7);
			context.lineWidth = 5;
			context.strokeStyle = '#ffffff';
			context.stroke();
			//loadingScreen.css({'display' : 'none'});
		}
		//engaging logo wat kleiner als het een klein scherm is

		//PIJLEN EN NEXTS*/
		arrow1.css({
			'top' : wy2 - 15,
			'left' : wx2 - 5
		});
		arrow2.css({
			'top' : wy6 - 5,
			'left' : wx6 - 15 - screenW
		});
		arrow3.css({
			'top' : wy10 - 15 - screenH,
			'left' : wx12 - screenW + 5
		});
		arrow4.css({
			'top' : wy16 - screenH - 15,
			'left' : wx16 - 15
		});

		//screen 1
		logo1.css({
			'top' : screenH / 10.5 - logo1.height() / 2,
			'left' : screenW / 3.38 - logo1.width() / 2
		});
		text1.css({
			'top' : screenH / 3.5,
			'left' : screenW / 5,
			'font-size' : screenW / 25 * 2.59,
			'width' : screenW
		});
		text2.css({
			'top' : screenH / 3.5 + screenW / 12,
			'left' : screenW / 5,
			'font-size' : screenW / 25 * 1.07,
			'width' : screenW
		});
		text3.css({
			'top' : screenH / 3.5 + screenW / 12 + screenW / 25,
			'left' : screenW / 5,
			'font-size' : screenW / 25 * 2.01,
			'width' : screenW
		});

		var eng1Y = (((y4 - 10) - wy1) / 2 - engaging1.height() / 2) + wy1;
		var eng1X = x1 + (y4 - wy1) / 2 - engaging1.height() / 2;
		engaging1.css({
			'top' : eng1Y,
			'left' : eng1X
		});
		var c1Y = (((y4 - 10) - wy1) / 2 - contact1.height() / 2) + wy1;
		var c1X = x1 + (y4 - wy1) / 2 + engaging1.width() + engaging1.height();
		contact1.css({
			'top' : c1Y,
			'left' : c1X
		});

		//screen 2
		text4.css({
			'font-size' : screenW / 60,
			'margin-top' : screenH / 14
		});
		logoContainer2.css({
			'left' : screenW / 2.07 - logoContainer2.width() / 2,
			'top' : screenH / 3.3 - logo2.height() / 2
		});
		engaging2.css({
			'top' : eng1Y,
			'left' : eng1X - x1 - 10
		});
		contact2.css({
			'top' : logoContainer2.height() + screenH / 3.3,
			'left' : screenW / 2.07 - contact2.width() / 2
		});

		//screen 3
		logoContainer3.css({
			'left' : screenW / 2.54 - logoContainer3.width() / 2,
			'top' : screenH / 3.12 - logo3.height() / 2
		});
		text5.css({
			'font-size' : screenW / 60,
			'margin-top' : screenH / 14
		});
		var eng3Y = ((x8 - 10 - wx8) - engaging3.width()) / 2;
		var eng3X = (x8 - 10 - wx8) / 2 + wx8 - screenW - engaging3.width() / 2;
		engaging3.css({
			'top' : eng3Y,
			'left' : eng3X
		});

		var c3Y = (((y11 - 10) - wy11) / 2 - contact3.height() / 2) + wy13 - screenH;
		contact3.css({
			'top' : c3Y,
			'left' : wx12 - screenW
		});

		//screen 4
		logoContainer4.css({
			'left' : screenW / 2 - logoContainer4.width() / 2,
			'top' : screenH / 5.45 - logo4.height() / 2
		});
		text6.css({
			'font-size' : screenW / 60,
			'margin-top' : screenH / 14
		});
		var eng4Y = (((y11 - 10) - wy11) / 2 - engaging1.height() / 2) + wy13 - screenH;
		var eng4X = ((y11 - 10) - wy11) / 2 - engaging4.height() / 2;
		engaging4.css({
			'top' : eng4Y,
			'right' : eng4X
		});
		var c4Y = (((y11 - 10) - wy11) / 2 - contact4.height() / 2) + wy13 - screenH;
		var c4X = ((y11 - 10) - wy11) / 2 - contact4.height() / 2 + wx16;
		contact4.css({
			'top' : c4Y,
			'left' : c4X
		});
		counter.css({
			'left' : screenW / 2 - counter.width() / 2,
			'top' : screenH / 5.45 + logoContainer4.height()
		});

		text7.css({
			'top' : screenH / 5.45 + logoContainer4.height() + counter.height() + text7.height(),
			'left' : screenW / 2 - text7.width() / 2,
			'font-size' : screenW / 40
		});

		//logo2.css({'top': screenH/4, 'left':screenW / 2 - screenW /16});
		//logo3.css({'top': screenH/4, 'right':screenW / 2 });
		//logo4.css({'top': screenH/25, 'right':screenW / 2 });

		if(!isiPad) {
			switch(activeScreen) {
				case 'screen1':
					$('html,body').scrollTop(0);
					$('html,body').scrollLeft(0);
					break;
				case 'screen2':
					$('html,body').scrollTop(0);
					$('html,body').scrollLeft(screenW);
					break;
				case 'screen3':
					$('html,body').scrollTop(screenH);
					$('html,body').scrollLeft(screenW);
					break;
				case 'screen4':
					$('html,body').scrollTop(screenH);
					$('html,body').scrollLeft(0);
					break;
			}
		} else if(isiPad) {
			var dur = 0;
			switch(activeScreen) {
				case 'screen1':
					screen1.animate({
						left : 0,
						top : 0
					}, dur);
					screen2.animate({
						left : screenW,
						top : 0
					}, dur);
					screen3.animate({
						left : screenW,
						top : screenH
					}, dur);
					screen4.animate({
						left : 0,
						top : screenH
					}, dur);
					canvas.animate({
						left : 0,
						top : 0
					}, dur);
					break;
				case 'screen2':
					screen1.animate({
						left : -screenW,
						top : 0
					}, dur);
					screen2.animate({
						left : 0,
						top : 0
					}, dur);
					screen3.animate({
						left : 0,
						top : screenH
					}, dur);
					screen4.animate({
						left : -screenW,
						top : screenH
					}, dur);
					canvas.animate({
						left : -screenW,
						top : 0
					}, dur);
					break;
				case 'screen3':
					screen1.animate({
						left : -screenW,
						top : -screenH
					}, dur);
					screen2.animate({
						left : 0,
						top : -screenH
					}, dur);
					screen3.animate({
						left : 0,
						top : 0
					}, dur);
					screen4.animate({
						left : -screenW,
						top : 0
					}, dur);
					canvas.animate({
						left : -screenW,
						top : -screenH
					}, dur);
					break;
				case 'screen4':
					screen1.animate({
						left : 0,
						top : -screenH
					}, dur);
					screen2.animate({
						left : screenW,
						top : -screenH
					}, dur);
					screen3.animate({
						left : screenW,
						top : 0
					}, dur);
					screen4.animate({
						left : 0,
						top : 0
					}, dur);
					canvas.animate({
						left : 0,
						top : -screenH
					}, dur);
					break;
			}
			$('html,body').scrollTop(0);
			$('html,body').scrollLeft(0);
		}
	}

	//CHANGE SCREENS
	arrow1.click(function() {
		activeScreen = 'screen2';

		if(!isiPad)
			$('html, body').animate({
				scrollLeft : screenW
			}, duration);
		else {
			ipadLeft();
		}
	})

	arrow2.click(function() {
		activeScreen = 'screen3';

		if(!isiPad)
			$('html, body').animate({
				scrollTop : screenH
			}, duration);
		else {
			ipadDown();
		}
	})

	arrow3.click(function() {
		activeScreen = 'screen4';

		if(!isiPad)
			$('html, body').animate({
				scrollLeft : 0
			}, duration);
		else {
			ipadRight();
		}
	})

	arrow4.click(function() {
		activeScreen = 'screen1';

		if(!isiPad)
			$('html, body').animate({
				scrollTop : 0
			}, duration);
		else {
			ipadUp();
		}
	})

	$(document).keydown(function(e) {

		if(e.which == codeArray[i]) {
			checkArray[i] = e.which;
			i++;

			if(checkArray.toString() == codeArray.toString()) {
				checkArray = [];
				i = 0;

				if(!easterEgg)
					easterEgg = true;
				else if(easterEgg)
					easterEgg = false;

				drawLayout();
			}
		} else {
			checkArray = [];
			i = 0;
		}
	});
	//ADD SWIPE FOR IPAD
	$('html, body').swipe({
		swipe : swipe,
		threshold : 0
	});
	$('html, body').swipe({
		swipe : swipe,
		threshold : 0,
		fingers : 2
	});

	function swipe(event, direction) {
		if(activeScreen == 'screen1' && direction == 'left') {
			activeScreen = 'screen2';
			ipadLeft();
		}
		if(activeScreen == 'screen2' && direction == 'up') {
			activeScreen = 'screen3';
			ipadDown();
		}
		if(activeScreen == 'screen3' && direction == 'right') {
			activeScreen = 'screen4';
			ipadRight();
		}
		if(activeScreen == 'screen4' && direction == 'down') {
			activeScreen = 'screen1';
			ipadUp();
		}

	}

	function ipadLeft() {
		screen1.animate({
			left : -screenW,
			top : 0
		}, duration);
		screen2.animate({
			left : 0,
			top : 0
		}, duration);
		screen3.animate({
			left : 0,
			top : screenH
		}, duration);
		screen4.animate({
			left : -screenW,
			top : screenH
		}, duration);
		canvas.animate({
			left : -screenW,
			top : 0
		}, duration);
	}

	function ipadDown() {
		screen1.animate({
			left : -screenW,
			top : -screenH
		}, duration);
		screen2.animate({
			left : 0,
			top : -screenH
		}, duration);
		screen3.animate({
			left : 0,
			top : 0
		}, duration);
		screen4.animate({
			left : -screenW,
			top : 0
		}, duration);
		canvas.animate({
			left : -screenW,
			top : -screenH
		}, duration);
	}

	function ipadRight() {
		screen1.animate({
			left : 0,
			top : -screenH
		}, duration);
		screen2.animate({
			left : screenW,
			top : -screenH
		}, duration);
		screen3.animate({
			left : screenW,
			top : 0
		}, duration);
		screen4.animate({
			left : 0,
			top : 0
		}, duration);
		canvas.animate({
			left : 0,
			top : -screenH
		}, duration);
	}

	function ipadUp() {
		screen1.animate({
			left : 0,
			top : 0
		}, duration);
		screen2.animate({
			left : screenW,
			top : 0
		}, duration);
		screen3.animate({
			left : screenW,
			top : screenH
		}, duration);
		screen4.animate({
			left : 0,
			top : screenH
		}, duration);
		canvas.animate({
			left : 0,
			top : 0
		}, duration);
	}

});