/**
 * COPYRIGHT © HATEM+D, ALL RIGHTS RESERVED.
 * This file cannot be used, copied, reproduced, altered or transmitted
 * by any means without proper written authorization from OkInteractif.
 * http://www.hatem.ca
 */

$(document).ready(function(){
	new Main();
});

var Main = function()
{
	window.Main = this;
	
	var plus  	  = $('#plus'),
		  green	    = $('section.green'),
		  blue	    = $('section.blue'),
		  yellow	  = $('section.yellow'),
		  text	    = $('#text'),
		  over	    = $('#over'),
		  spans	    = null,
		  header	  = $('header'),
		  shareTool = $('#share-tool'),
		  plusColor = 1;
	
//	Initialisation
	this.init = function()
	{
	  if ( $.browser.msie ) goDirectlyToEnd();
    else                  transitionIn();
	};
	
	var transitionIn = function()
	{
	 setTimeout(function(){
	   yellow.css('top','0');
	   blue.css('top','0');
	   
	   setTimeout(function(){
 	      yellow.children('div').css('top', '50%');
 	      blue.children('div').css('top', '50%');
 	   }, 0);
	   
	   setTimeout(function(){
	     plus.css({
   	     '-webkit-transform': 'scale(1,1)',
   	     '-moz-transform': 'scale(1,1)',
   	     '-ms-transform': 'scale(1,1)',
   	     '-o-transform': 'scale(1,1)',
   	     'transform': 'scale(1,1)'
   	   });
	   }, 950);
	 }, 1000);
	 
	 setTimeout(startAnim, 3500);
	};
	
	var startAnim = function() {
	  plus.removeClass('small');
		setTimeout(openGreen, 550);
	};
	
	var openGreen = function()
	{
		green.addClass('open');
		
		setTimeout(function(){
		  blue.addClass('close');
  		yellow.addClass('close');
		}, 50);
		
		onGreenOpen();
	};
	
	var onGreenOpen = function()
	{
		plus.addClass('fived');
		plus.children('div').remove();
		plus.append('<div></div>');
		plus.children('div').append('<span class="first"></span><span class="second"></span><span class="third"></span><span class="fourth"></span><span class="fifth"></span>');
		setTimeout(function(){
			plus.addClass('dimmed');
		}, 100);
		
		setTimeout(onGreenOpened, 650);
	};
	
	var onGreenOpened = function()
	{
	  yellow.remove();
	  blue.remove();
	  
		var p 		= $('#text').children('p.first'),
			nbH 	= Math.ceil(p.width() / 80),
			nbV 	= Math.ceil(p.height() / 80),
			nb		= nbH * nbV;
			
		for ( var i=0; i < nb; i++ ) {
			over.append('<span></span>');
		}
		
		over.css({
			width 	: nbH * 80 + 'px',
			height 	: nbV * 80 + 'px'
		});
		
		spans = over.find('span');
		spans.each(function( index ){
			var span = $(this);
			span.delay(index*50 + 2000).animate({ 'opacity': '1' }, 'fast');
		});
		
		setTimeout(function(){
			onParFadedOut(p);
		}, 3200);
	};
	
	var onParFadedOut = function(oldP)
	{
		oldP.before('<p class="next more">Pour en faire toujours</p>').remove();
		
		var p 		= $('#text').children('p'),
			nbH 	= Math.ceil(p.width() / 80),
			nbV 	= Math.ceil(p.height() / 80),
			nb		= nbH * nbV;
		
		
		p.css('top', '-43px');
		over.css({
			width 	: nbH * 80 + 'px',
			height 	: nbV * 80 + 'px',
			top		: '-43px'
		});
		
		spans.not(over.find('span:lt(10)')).remove();
		spans.each(function( index ){
			var span = $(this);
			span.delay(index*50).animate({ 'opacity': '0' }, 'fast');
		});
		
		setTimeout(onParFadedIn, 2000);
	};
	
	var onParFadedIn = function()
	{
	  over.remove();
		plus.css('left', '38%');
		
		$('#text').children('p.more').removeClass('next').css('width', '0%');
		
		var p =	$('#text').children('p.last');
			  p.css({
  				width 	: '450px',
  				display	: 'block'
  			});
		
		setTimeout(function(){
			p.children('span').css('width', '0');
		}, 100);
		
		setTimeout(function(){
			gotoWhite(p);
		}, 2000);
	};
	
	var gotoWhite = function ()
	{
		green.addClass('white');
		plus.addClass('color' + plusColor);
		header.animate({'opacity':'1'}, 'normal');
		
		var ul        = document.createElement('ul'),
        hatem 		= document.createElement('li'),
        linkHatem	= document.createElement('a'),
        ok        = document.createElement('li'),
        linkOk		= document.createElement('a');
		
		ul.id = 'links';
		
		linkHatem.href = 'http://hatem.ca/site';
		linkHatem.innerHTML = 'Hatem.ca';
		$(hatem).append(linkHatem);
		
		linkOk.href = 'http://okinteractif.com/2010';
		linkOk.innerHTML = 'Okinteractif.com';
		$(ok).append(linkOk);
		
		$(ul).append(hatem, ok);
		text.append(ul);
		shareTool.css('display', 'block');
		
		setTimeout(function(){
		  $(ul).css('width', '389px');
  		shareTool.css('opacity', '1');
		}, 0);
		
		setTimeout(function(){
		  changePlusColor();
		}, 1500);
	};
	
	var changePlusColor = function()
	{
	  var oldColor = 'color'+plusColor;
	  
	  plusColor += 1;
	  if ( plusColor > 4 ) plusColor = 1;
	  
	  plus.removeClass(oldColor);
	  plus.addClass('color'+plusColor);
	  
	  setTimeout(function(){
		  changePlusColor();
		}, 2500);
	};
	
	var goDirectlyToEnd = function()
	{
	  blue.remove();
	  yellow.remove();
	  over.remove();
	  $('p.first').remove();
	  $('p.last span').remove();
	  $('p.last').css('display', 'block');
	  
	  gotoWhite();
	  green.addClass('open');
	  text.css('width', '100%');
	  
	  $('#links').css({
	    'width' : '389px',
	    'right' : '740px'
	  });
	  
	  plus.css('left', '38%');
	  plus.removeClass('small');
	  plus.addClass('fived dimmed');
		plus.children('div').remove();
		plus.append('<div></div>');
		plus.children('div').append('<span class="first"></span><span class="second"></span><span class="third"></span><span class="fourth"></span><span class="fifth"></span>');
	};
	
// 	Constructor
	(function() {
		window.Main.init();
    })();
};