NTMan/PartyHard

## PartyHard
<!DOCTYPE html>
<head>
<title>PartyHard</title>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-19349612-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<script>

  function partyHard( drunkenness ) {

    var mapCanvas = [];
    var mapCanvasCtx = [];
    for (var i = 0; i < drunkenness * 1200; i++) {
    mapCanvas[i] = document.createElement('canvas');
        mapCanvas[i].width = 2500;
        mapCanvas[i].height = 2500;
        mapCanvasCtx[i] = mapCanvas[i].getContext('2d');
        mapCanvasCtx[i].fillStyle = 'rgb(0, 0, 0)';
        mapCanvasCtx[i].fillRect( 0, 0, 1700, 1700 );
    }
    console.log(window);
  }

  function INIT() {

    var progress = 0;

    document.querySelector('.progessBar div').style.width = '0%';

    var mainInterval = setInterval(function() {

      document.querySelector('.label').innerHTML += '.';
      if ( document.querySelector('.label').innerHTML.length > 10 ) document.querySelector('.label').innerHTML = 'Loading';

      progress += 200 / (2 * progress + 40);

      document.querySelector('.progessBar div').style.width = progress + '%';

      if (progress > 10) {
        partyHard( 4 * progress - 10 );
      }

    }, 300);

  }

  window.onload = INIT;

</script>
</head>

<style>

  body {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #111;
    overflow: hidden;
  }

  .mainBlock {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20%;
    width: 400px;
  }

  .progessBar {
    width: 400px;
    height: 4px;
    border-radius: 3px;
    background-color: #181818;
  }

  .progessBar div {
    position: absolute;
    width: 0%;
    height: 3px;
    border-radius: 4px;
    background-color: #fff;
  }

  .label {
    padding-top: 5px;
    font: normal 13px arial;
    letter-spacing: 0.1em;
    color: #eee;
  }

  .ohmedWasHere {
    position: relative;
    width: 400px;
    margin-right: auto;
    margin-left: auto;
    text-align: right;
    color: #555;
    font: normal 10px tahoma;
    letter-spacing: 0.1em;
  }

</style>


<body>

  <div class="mainBlock" >
    <div class="label">Loading</div>
    <div class="progessBar">
      <div></div>
    </div>
  </div>

  <div class="ohmedWasHere">ohmed was here.</div>

</body>
</html>
	<!DOCTYPE html>
	<head>
	<title>PartyHard</title>

	<script type="text/javascript">

	var _gaq = _gaq \|\| [];
	_gaq.push(['_setAccount', 'UA-19349612-1']);
	_gaq.push(['_trackPageview']);

	(function() {
	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();

	</script>

	<script>

	function partyHard( drunkenness ) {

	var mapCanvas = [];
	var mapCanvasCtx = [];
	for (var i = 0; i < drunkenness * 1200; i++) {
	mapCanvas[i] = document.createElement('canvas');
	mapCanvas[i].width = 2500;
	mapCanvas[i].height = 2500;
	mapCanvasCtx[i] = mapCanvas[i].getContext('2d');
	mapCanvasCtx[i].fillStyle = 'rgb(0, 0, 0)';
	mapCanvasCtx[i].fillRect( 0, 0, 1700, 1700 );
	}
	console.log(window);
	}

	function INIT() {

	var progress = 0;

	document.querySelector('.progessBar div').style.width = '0%';

	var mainInterval = setInterval(function() {

	document.querySelector('.label').innerHTML += '.';
	if ( document.querySelector('.label').innerHTML.length > 10 ) document.querySelector('.label').innerHTML = 'Loading';

	progress += 200 / (2 * progress + 40);

	document.querySelector('.progessBar div').style.width = progress + '%';

	if (progress > 10) {
	partyHard( 4 * progress - 10 );
	}

	}, 300);

	}

	window.onload = INIT;

	</script>
	</head>

	<style>

	body {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #111;
	overflow: hidden;
	}

	.mainBlock {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20%;
	width: 400px;
	}

	.progessBar {
	width: 400px;
	height: 4px;
	border-radius: 3px;
	background-color: #181818;
	}

	.progessBar div {
	position: absolute;
	width: 0%;
	height: 3px;
	border-radius: 4px;
	background-color: #fff;
	}

	.label {
	padding-top: 5px;
	font: normal 13px arial;
	letter-spacing: 0.1em;
	color: #eee;
	}

	.ohmedWasHere {
	position: relative;
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	text-align: right;
	color: #555;
	font: normal 10px tahoma;
	letter-spacing: 0.1em;
	}

	</style>


	<body>

	<div class="mainBlock" >
	<div class="label">Loading</div>
	<div class="progessBar">
	<div></div>
	</div>
	</div>

	<div class="ohmedWasHere">ohmed was here.</div>

	</body>
	</html>