(function($,d,w){

	jQuery.easing.def = "easeInOutQuint";
	

	var $body, $w, $watchContainer, $watch, $secondsContainer, $minutesContainer, $minutesBackground, $hoursContainer, $hoursBackground, $decorationBackground, $decorationLines, 
	initWatch, tickListenener, secondTickListener, minuteTickListener, hourTickListener, resizeListener, bodyClickListener, 
	istInited, 


	secondsRegisterArray, minutesRegisterArray, hoursRegisterArray, generalRegisterArray, 
	positioning360Angle, positioning360Step, positioningItemsNumber, positioningItemsActualID, windowWidth, windowHeight, 
	watchRadiusInitial, watchRadius, watchElementsContainerDimension, minViewportDimensionsBeforeResize, watchDimensionsResizeRatio, trianglesHeightRatioToWatch, trianglesWidthRatioToWatch, 
	secondsAnimationDuration, secondsAnimationDelayStep, secondsAnimationOutDurationRandomFactor, 
	minutesContainerDimensionsRatio, minutesBorderWidth, minuteContainerAnimationDurationOnMinuteTick, 
	hoursContainerDimensionsRatio, hoursBorderWidth, hoursContainerAnimationDurationOnHoursTick, 
	decorationBackgroundDimensionsRatio, decorationLinesAnimationDuration, watchAnimationDurationOnMinuteTick, watchAnimationScaleRatioOnMinuteTick;



	$body = $("body");
	$w = $(w);
	$watchContainer = $("#watch-container");
	$watch = $watchContainer.find("#watch");
	$secondsContainer = $watch.find("#seconds-container");
	$minutesContainer = $watch.find("#minutes-container");
	$minutesBackground = $watch.find("#minutes-background");
	$hoursContainer = $watch.find("#hours-container");
	$hoursBackground = $watch.find("#hours-background");
	$decorationBackground = $("#decoration-background");
	$decorationLines = $("#decoration-lines");


	istInited = false;





	secondsRegisterArray = Array();
	minutesRegisterArray = Array();
	hoursRegisterArray = Array();
	generalRegisterArray = Array();

	watchRadiusInitial = 300;
	watchRadius = watchRadiusInitial; 
	watchElementsContainerDimension= watchRadius * 2;
	minViewportDimensionsBeforeResize= 800;
	watchDimensionsResizeRatio=0.75;

	trianglesHeightRatioToWatch = 0.8;
	trianglesWidthRatioToWatch = 0.03;

	secondsAnimationDuration = 0.5;
	secondsAnimationDelayStep = 0.02;
	secondsAnimationOutDurationRandomFactor = 20;

	minutesContainerDimensionsRatio = 0.65;
	minutesBorderWidth = 10;
	minuteContainerAnimationDurationOnMinuteTick = 2; 

	hoursContainerDimensionsRatio = 0.45;
	hoursBorderWidth = 10;
	hoursContainerAnimationDurationOnHoursTick = 2.5; 


	decorationBackgroundDimensionsRatio = 0.82;
	decorationLinesAnimationDuration = 0.7;

	watchAnimationDurationOnMinuteTick = 0.5;
	watchAnimationScaleRatioOnMinuteTick = 0.8;


	bodyClickListener=function(){
		$body.toggleClass("inverted");
	}




	resizeListener = function(){
		var valueToCalculateForResize, trianglesHeight, trianglesWidth;

		windowWidth = $w.width(); 
		windowHeight = $w.height(); 

		if(windowWidth < minViewportDimensionsBeforeResize || windowHeight < minViewportDimensionsBeforeResize){
			valueToCalculateForResize= (windowWidth < windowHeight) ? windowWidth : windowHeight;
			watchRadius = valueToCalculateForResize * 0.5 * watchDimensionsResizeRatio;
		}else{
			watchRadius=watchRadiusInitial;
		}

		watchElementsContainerDimension= watchRadius * 2;

		$watch.css({
			width : watchElementsContainerDimension,
			height : watchElementsContainerDimension,
			marginLeft : watchElementsContainerDimension * -0.5,
			marginTop : watchElementsContainerDimension * -0.5
		});

		trianglesHeight = watchRadius * 2 * trianglesHeightRatioToWatch;
		trianglesWidth = watchRadius * 2 * trianglesWidthRatioToWatch;

		$watch.find(".second-item span").css({
			borderWidth: trianglesHeight + "px " + trianglesWidth + "px 0 " + trianglesWidth + "px"
		});

		positioning360Angle = 0;
		positioningItemsActualID = 0;
		positioningItemsNumber = secondsRegisterArray.length;
		positioning360Step = (2 * Math.PI) / positioningItemsNumber;
		$.each(secondsRegisterArray, initWatchItemsPositions);



		$minutesContainer.css({
			width: watchElementsContainerDimension * minutesContainerDimensionsRatio, 
			height: watchElementsContainerDimension * minutesContainerDimensionsRatio, 
			marginLeft: watchElementsContainerDimension * minutesContainerDimensionsRatio * -0.5, 
			marginTop: watchElementsContainerDimension * minutesContainerDimensionsRatio * -0.5
		});

		$minutesBackground.css({
			width: watchElementsContainerDimension * minutesContainerDimensionsRatio + minutesBorderWidth * 2, 
			height: watchElementsContainerDimension * minutesContainerDimensionsRatio + minutesBorderWidth * 2, 
			marginLeft: watchElementsContainerDimension * minutesContainerDimensionsRatio * -0.5 - minutesBorderWidth, 
			marginTop: watchElementsContainerDimension * minutesContainerDimensionsRatio * -0.5 - minutesBorderWidth
		});

		$watch.find(".minute-item span").css({
			borderWidth: trianglesHeight + "px " + trianglesWidth + "px 0 " + trianglesWidth + "px"
		});

		positioning360Angle = 0;
		positioningItemsActualID = 0;
		positioningItemsNumber = minutesRegisterArray.length;
		positioning360Step = (2 * Math.PI) / positioningItemsNumber;
		$.each(minutesRegisterArray, initWatchItemsPositions);



		$hoursContainer.css({
			width: watchElementsContainerDimension * hoursContainerDimensionsRatio, 
			height: watchElementsContainerDimension * hoursContainerDimensionsRatio, 
			marginLeft: watchElementsContainerDimension * hoursContainerDimensionsRatio * -0.5, 
			marginTop: watchElementsContainerDimension * hoursContainerDimensionsRatio * -0.5
		});

		$hoursBackground.css({
			width: watchElementsContainerDimension * hoursContainerDimensionsRatio + hoursBorderWidth * 2, 
			height: watchElementsContainerDimension * hoursContainerDimensionsRatio + hoursBorderWidth * 2, 
			marginLeft: watchElementsContainerDimension * hoursContainerDimensionsRatio * -0.5 - hoursBorderWidth, 
			marginTop: watchElementsContainerDimension * hoursContainerDimensionsRatio * -0.5 - hoursBorderWidth
		});

		$watch.find(".hour-item span").css({
			borderWidth: trianglesHeight + "px " + trianglesWidth + "px 0 " + trianglesWidth + "px"
		});

		positioning360Angle = 0;
		positioningItemsActualID = 0;
		positioningItemsNumber = hoursRegisterArray.length;
		positioning360Step = (2 * Math.PI) / positioningItemsNumber;
		$.each(hoursRegisterArray, initWatchItemsPositions);


		$decorationBackground.css({
			width : watchElementsContainerDimension * decorationBackgroundDimensionsRatio,
			height : watchElementsContainerDimension * decorationBackgroundDimensionsRatio,
			marginLeft : watchElementsContainerDimension * decorationBackgroundDimensionsRatio * -0.5,
			marginTop : watchElementsContainerDimension * decorationBackgroundDimensionsRatio * -0.5
		});

	}






	initWatchItemsPositions = function(){
		var $item, itemPosX, itemPosY, itemRotation, itemTransform; 
		
		$item = $(this);

		itemPosX = Math.round(watchElementsContainerDimension/2 + watchRadius * Math.cos(positioning360Angle) - $(this).width()/2);
		itemPosY = Math.round(watchElementsContainerDimension/2 + watchRadius * Math.sin(positioning360Angle) - $(this).height()/2);
		itemRotation = ((360 / positioningItemsNumber) * positioningItemsActualID) + 90 ;

		if($item.hasClass("minute-item")){
			itemPosX -= watchElementsContainerDimension * (1-minutesContainerDimensionsRatio) * 0.5;
			itemPosY -= watchElementsContainerDimension * (1-minutesContainerDimensionsRatio) * 0.5;
		}
		if($item.hasClass("hour-item")){
			itemPosX -= watchElementsContainerDimension * (1-hoursContainerDimensionsRatio) * 0.5;
			itemPosY -= watchElementsContainerDimension * (1-hoursContainerDimensionsRatio) * 0.5;
		}

		itemTransform = "translate("+ itemPosX +"px, "+ itemPosY +"px) rotate(" + itemRotation  + "deg) ";
        
        $item.css({
			"-webkit-transform" : itemTransform, 
			"-ms-transform" : itemTransform, 
           	"transform" : itemTransform
        });

        positioning360Angle += positioning360Step;
        positioningItemsActualID ++;
	}




	

	tickListenener=function(){

	}




	secondTickListener = function(digit){
		var $activeSecondItem, $secondItemToActiveAtInit; 

		$activeSecondItem = $(secondsRegisterArray[digit.getSecond().value]);

		if(digit.getSecond().value == 0 ){
			$watch.find(".second-item.active").removeClass("active").each(function(){
				var $item;

				$item=$(this);

				TweenMax.to($item.find("span"), Math.random(secondsAnimationDuration * secondsAnimationOutDurationRandomFactor), { 
					scaleX: 0, 
					ease: Elastic.easeOut, 
					delay: $item.data("itemID")*secondsAnimationDelayStep + watchAnimationDurationOnMinuteTick
				});
			});
		}

		for(i = 0; i <= digit.getSecond().value-1; i++){
			$secondItemToActiveAtInit = $(secondsRegisterArray[i]);
			$secondItemToActiveAtInit.addClass("active");
			TweenMax.to($secondItemToActiveAtInit.find("span"), Math.random(secondsAnimationDuration * secondsAnimationOutDurationRandomFactor), { 
				scaleX: 1,
				ease: Elastic.easeOut, 
				delay: $secondItemToActiveAtInit.data("itemID")*secondsAnimationDelayStep + watchAnimationDurationOnMinuteTick
			});
		}


		$activeSecondItem.addClass("active");
		TweenMax.to($activeSecondItem.find("span"), secondsAnimationDuration, { 
			scaleX: 1, 
			ease: Elastic.easeOut
		});
	}



	minuteTickListener = function(digit){
		var $activeMinuteItem, $minuteItemToActiveAtInit, tweenGroup;

		$activeMinuteItem=$(minutesRegisterArray[digit.getMinute().value])

		if(digit.getMinute().value == 0 ){
			$watch.find(".minute-item.active").removeClass("active").each(function(){
				var $item;

				$item=$(this);

				TweenMax.to($item.find("span"), Math.random(secondsAnimationDuration * secondsAnimationOutDurationRandomFactor), { 
					scaleX: 0, 
					ease: Elastic.easeOut, 
					delay: $item.data("itemID")*secondsAnimationDelayStep + watchAnimationDurationOnMinuteTick
				});
			});
		}

		for(i = 0; i <= digit.getMinute().value; i++){
			$minuteItemToActiveAtInit = $(minutesRegisterArray[i]);
			$minuteItemToActiveAtInit.addClass("active");
			TweenMax.to($minuteItemToActiveAtInit.find("span"), Math.random(secondsAnimationDuration * secondsAnimationOutDurationRandomFactor), { 
				scaleX: 1,
				ease: Elastic.easeOut, 
				delay: $minuteItemToActiveAtInit.data("itemID")*secondsAnimationDelayStep + watchAnimationDurationOnMinuteTick
			});
		}

		$activeMinuteItem.addClass("active");
		TweenMax.to($activeMinuteItem.find("span"), secondsAnimationDuration, { 
			scaleX: 1, 
			ease: Elastic.easeOut
		});

		TweenMax.to($decorationLines, decorationLinesAnimationDuration, { 
			rotation: "+=90deg", 
			ease: Expo.easeInOut, 
			delay: watchAnimationDurationOnMinuteTick
		});
		TweenMax.to($decorationBackground, decorationLinesAnimationDuration, { 
			rotation: "+=90deg", 
			ease: Expo.easeInOut, 
			delay: watchAnimationDurationOnMinuteTick 
		});

		tweenGroup= new TimelineLite();

		tweenGroup.to($watch, watchAnimationDurationOnMinuteTick*0.5, { 
			scaleX: watchAnimationScaleRatioOnMinuteTick, 
			scaleY: watchAnimationScaleRatioOnMinuteTick, 
			ease: Expo.easeOut, 
		});
		tweenGroup.to($watch, watchAnimationDurationOnMinuteTick*0.5, { 
			scaleY: 1, 
			scaleX: 1, 			
			ease: Elastic.easeOut, 
		});

		TweenMax.to($minutesContainer, minuteContainerAnimationDurationOnMinuteTick, { 
			rotation: "+=360deg", 
			ease: Expo.easeInOut, 
			delay: watchAnimationDurationOnMinuteTick 
		});
		TweenMax.to($minutesBackground, minuteContainerAnimationDurationOnMinuteTick, { 
			rotation: "+=360deg", 
			ease: Expo.easeInOut, 
			delay: watchAnimationDurationOnMinuteTick 
		});
	}



	hourTickListener = function(digit){
		var $activeHourItem, $hourItemToActiveAtInit;

		$activeHourItem=$(hoursRegisterArray[digit.getHour().value])

		if(digit.getHour().value%12 == 0 ){
			$watch.find(".hour-item.active").removeClass("active").each(function(){
				var $item;

				$item=$(this);

				TweenMax.to($item.find("span"), Math.random(secondsAnimationDuration * secondsAnimationOutDurationRandomFactor), { 
					scaleX: 0, 
					ease: Elastic.easeOut, 
					delay: $item.data("itemID")*secondsAnimationDelayStep + watchAnimationDurationOnMinuteTick
				});
			});

		}

		for(i = 0; i <= digit.getHour().value%12; i++){
			$hourItemToActiveAtInit = $(hoursRegisterArray[i]);
			$hourItemToActiveAtInit.addClass("active");
			TweenMax.to($hourItemToActiveAtInit.find("span"), Math.random(secondsAnimationDuration * secondsAnimationOutDurationRandomFactor), { 
				scaleX: 1,
				ease: Elastic.easeOut, 
				delay: $hourItemToActiveAtInit.data("itemID")*secondsAnimationDelayStep + watchAnimationDurationOnMinuteTick
			});
		}

		$activeHourItem.addClass("active");
		TweenMax.to($activeHourItem.find("span"), secondsAnimationDuration, { 
			scaleX: 1, 
			ease: Elastic.easeOut
		});

		TweenMax.to($hoursContainer, hoursContainerAnimationDurationOnHoursTick, { 
			rotation: "+=360deg", 
			ease: Expo.easeInOut, 
			delay: watchAnimationDurationOnMinuteTick 
		});
		TweenMax.to($hoursBackground, hoursContainerAnimationDurationOnHoursTick, { 
			rotation: "+=360deg", 
			ease: Expo.easeInOut, 
			delay: watchAnimationDurationOnMinuteTick 
		});
	}







	initWatch = function(){
		var $secondItem, $minuteItem, $hourItem;

		for(i = 0; i < 60; i++){

			$secondItem = $("<div class='second-item'><span>"+ i +"</span></div>");			
			$secondItem.data("itemID", i);
			TweenMax.to($secondItem.find("span"), 0, { scaleX: 0 });

			$secondsContainer.append($secondItem);
			
			secondsRegisterArray.push($secondItem);
			generalRegisterArray.push($secondItem);
		}

		for(i = 0; i < 60; i++){

			$minuteItem = $("<div class='minute-item'><span>"+ i +"</span></div>");			
			$minuteItem.data("itemID", i);
			TweenMax.to($minuteItem.find("span"), 0, { scaleX: 0 });

			$minutesContainer.find(".container").append($minuteItem);
			
			minutesRegisterArray.push($minuteItem);
			generalRegisterArray.push($minuteItem);
		}
		

		for(i = 0; i < 12; i++){

			$hourItem = $("<div class='hour-item'><span>"+ i +"</span></div>");			
			$hourItem.data("itemID", i);
			TweenMax.to($hourItem.find("span"), 0, { scaleX: 0 });

			$hoursContainer.find(".container").append($hourItem);
			
			hoursRegisterArray.push($hourItem);
			generalRegisterArray.push($hourItem);
		}
		


		ticktack.on('tick', tickListenener);
		ticktack.on('second', secondTickListener);
		ticktack.on('minute', minuteTickListener);
		ticktack.on('hour', hourTickListener);

		$w.resize(resizeListener);
		resizeListener();

		$body.on("click", bodyClickListener);
	};

	initWatch();

})(jQuery,document,window);