/**
 * @author Arlan Viray, arlan.viray@creativewiz.net
 * @modified: Gustavo Rodrigues
 * @email: gugateider@gmail.com 
 */

'use strict';

var Advert = {
	width: null,
	height: null,
	animationArr: [],
	debugMode: 0,
	duration: 0.2,	
	timeline: new TimelineMax({
		delay: 0,
		onComplete: function(){}
	}),
	timelineGeneric: new TimelineMax( { 
		delay: 0,
		onComplete: function() {}
	}),
	clickId: 0,
	ft: undefined,
	stopWatcher: 0,
	stopWatcherUpdate: 200,

	/**
		Initializes the banner 
		@param width  -> Banner width
		@param height -> Banner height
		@param ft     -> Flash Talking Component / Double Click
		@param animationArr -> Animation array of objects that needs to be animated
		@param duration -> Duration of each tween
		@param debugMode -> In case you wish to see a certain static frame 
	**/
	init: function(width, height, ft, animationArr, duration, debugMode){
		this.width = width;
		this.height = height;
		this.ft = ft;
		this.animationArr = animationArr;
		this.debugMode = debugMode;
		this.duration = duration;

		TweenMax.set($('#container'), {display: 'block'});
		TweenMax.set($('#container, .section, .clickTag'), {width: this.width, height: this.height});
		// TweenMax.set( $("#logo"), { left: 220, top: 154, scale: 0.72, opacity: 0 });
		TweenMax.set($("#yellow_frame") , { display: "none" } );
		//TweenMax.set($(".copyright") , { scale: .8 } );

		var isiPad = navigator.userAgent.match(/iPad/i) != null;
		if( isiPad ) $("#yellow_frame #text-start p").css("marginTop" , 0);
		
		this.setAnim();
		this.startStopWatcher();
		//this.initVideo();
	},

	/**
		Function responsible to initialize the animation of the generic stuff
		@param none
	**/
	startGenericAnimation: function() {

		// Show Yellow Frame again
		TweenMax.set($("#yellow_frame") , { display: "block" } );
		
		var _this = this;

		// Delays !
		var delayFirstText		   = 4;//2
		var delayYellowBoxText	   = 6;//5.5
		var delayEndCopy		   = 2;//2

		// Transition Speed
		var firstTextSpeed		   = .5;
		var frameSpeedTransition   = .2;
		var endFrameCopyTransition = .5;
		var delayEndFrameCopy 	   = 1;


		// Add to timeline generic animation
		// Animate Logo!
		//this.timelineGeneric.to( $("#logo") , 1 , { opacity: 1 } );

		// Bottom Animation
		this.timelineGeneric.to( $("#bottom"), frameSpeedTransition , { width: 26 } );
		this.timelineGeneric.to( $("#bottom"), frameSpeedTransition , { width: 38 } );	
		this.timelineGeneric.to( $("#bottom"), frameSpeedTransition , { width: 50 } );
		this.timelineGeneric.to( $("#bottom"), frameSpeedTransition , { width: 136 } );

		// Right Frame colunm animation
		this.timelineGeneric.to( $("#right"), frameSpeedTransition , { height: 185, top: 44 } );

		// Top Yellow Frame animation
		this.timelineGeneric.to( $("#top"), frameSpeedTransition , { width: 132, left: 30, top: 36 } );

		// Yellow Frame left animation
		this.timelineGeneric.to( $("#left"), frameSpeedTransition , { height: 147 } );

		// Dark transparent fill 
		this.timelineGeneric.from( $("#tintfill"), frameSpeedTransition , { opacity: 0 }, "-=" + frameSpeedTransition );

		// First text to appear within the square
		this.timelineGeneric.from( $("#text-start"), firstTextSpeed , { opacity: 0 },  "-=" + frameSpeedTransition );

		// Transition out text and dark transparent
		this.timelineGeneric.to( $("#tintfill"), frameSpeedTransition , { opacity: 0 }, "+=" + delayFirstText );
		this.timelineGeneric.to( $("#text-start"), frameSpeedTransition , { opacity: 0 } );

		// Move Yellow square up
		this.timelineGeneric.from( $(".holder"), frameSpeedTransition , { top: 190 } );
		
		// Fade in Text within yellow square
		this.timelineGeneric.from( $(".holder div p"), frameSpeedTransition , { opacity: 0 } );
		// Fade Out Text within yellow square
		this.timelineGeneric.to( $(".holder div p"), frameSpeedTransition , { opacity: 0 }, "+=" + delayYellowBoxText );

		// Scale Down Yellow Square
		this.timelineGeneric.to( $("#yellowfill"), frameSpeedTransition * 2 , { scale: 0 , left: -50, top: -5, onStart: function() {
			TweenMax.set($("#bottom, #top, #left, #right,#yellowfill .holder object"), { opacity: 0 });
			TweenMax.set($("#bottom") , { top: 88, width: 50 } );

			TweenMax.set($("#threedots .dot1") , { top: 80, left: 0 } );
		}});

		// Increase Logo Size
		//this.timelineGeneric.to($("#logo") , frameSpeedTransition * 2 , { scale: 1, left: 210, top: 138  }, "-=" + frameSpeedTransition );
		
		// Animate First Copy ( "The better the " )
		this.timelineGeneric.from( $("#endFrame .copy .copy1"), endFrameCopyTransition , { width: "0%", onStart: function(){
			$("#endFrame").css("display","block");
			
			//TweenMax.set( $("#copyshadow") , { display: "block" } );
			//TweenMax.from( $("#copyshadow") , frameSpeedTransition,  {opacity: 1});
			//TweenMax.to( $("#ambientlight") , frameSpeedTransition,  {opacity: 0.15});
			TweenMax.to( $("#blackBaseGrad") , frameSpeedTransition * 10,  {opacity: 1});

			
			TweenMax.set( $(".answer , .worldworks") , { opacity: 0 } );


		} });

		// Animate first dots
		this.timelineGeneric.to( $("#threedots .dot1"), endFrameCopyTransition , { left: 170, onComplete: function(){
			
			TweenMax.set($("#threedots .dot1") , { top: 105, left: 132 } );
			TweenMax.from($("#threedots .dot1") , endFrameCopyTransition , { left: 20 } );


		} } , "-=" + (endFrameCopyTransition)  );
		
		// Animate the copy ( "Question" )
		this.timelineGeneric.from( $("#endFrame .copy .question"), endFrameCopyTransition , { width: "0%", onComplete: function(){
			
			TweenMax.set($("#threedots .dot1") , { top: 55, left: 46 } );
			TweenMax.from($("#threedots .dot1") , endFrameCopyTransition , { left: 0 } );

		} } );

		// Fade Out First Copy
		this.timelineGeneric.to( $("#endFrame .copy .question , #endFrame .copy .copy1"), endFrameCopyTransition * .5 , { opacity: 0, onComplete: function(){
			
			// make second little dot visible
			TweenMax.set($("#threedots .dot2") , { top: 80, left: 0 } );

			// Set "The better the" width 0
			TweenMax.set($("#endFrame .copy .copy1 , .answer") , { width: 0, opacity: 1 } );


		} } , "+=" + (delayEndFrameCopy));





		// Animate second dots
		this.timelineGeneric.to( $("#threedots .dot2"), endFrameCopyTransition , { left: 170, onComplete: function(){
			
			TweenMax.set($("#threedots .dot2") , { top: 105, left: 132 } );
			TweenMax.from($("#threedots .dot2") , endFrameCopyTransition , { left: 20 } );

		} } );

		// Animate Copy ( "The better the " )
		this.timelineGeneric.to( $("#endFrame .copy .copy1"), endFrameCopyTransition , { width: "120%", onStart: function(){
			
		} } , "-=" + endFrameCopyTransition );

		// Animate the copy ( "Answer" )
		this.timelineGeneric.to( $("#endFrame .copy .answer"), endFrameCopyTransition , { width: "120%", onComplete: function(){
			
			TweenMax.set($("#threedots .dot2") , { top: 55, left: 28 } );
			TweenMax.from($("#threedots .dot2") , endFrameCopyTransition , { left: 0 } );

		} });

		// Fade Out Second Copy
		this.timelineGeneric.to( $("#endFrame .copy .answer , #endFrame .copy .copy1"), endFrameCopyTransition * .5 , { opacity: 0, onComplete: function(){
			
			// make third little dot visible
			TweenMax.set($("#threedots .dot3") , { top: 80, left: 20 } );

			// Set "The better the" width 0
			TweenMax.set($("#endFrame .copy .copy1 , .worldworks") , { width: 0, opacity: 1 } );


		} } , "+=" + (delayEndFrameCopy));





		// Animate third dots
		this.timelineGeneric.to( $("#threedots .dot3"), endFrameCopyTransition , { left: 170, onComplete: function(){
			
			TweenMax.set($("#threedots .dot3") , { top: 105, left: 162 } );
			TweenMax.from($("#threedots .dot3") , endFrameCopyTransition , { left: 20 } );

		} } );

		// Animate Copy ( "The better the " )
		this.timelineGeneric.to( $("#endFrame .copy .copy1"), endFrameCopyTransition , { width: "120%", onStart: function(){
			
		} } , "-=" + endFrameCopyTransition );

		// Animate the copy ( "Answer" )
		this.timelineGeneric.to( $("#endFrame .copy .worldworks"), endFrameCopyTransition , { width: "120%", onComplete: function(){
			
			TweenMax.set($("#threedots .dot3") , { top: 55, left: 10 } );
			TweenMax.from($("#threedots .dot3") , endFrameCopyTransition , { left: 0 } );

			_this.clearStopWatcher();

		} });


		// Fade In CTA
		//this.timelineGeneric.from( $("#endFrame #cta, #hashtag"), endFrameCopyTransition , { opacity: 0 }, "-=" + endFrameCopyTransition);


	},

	/**
		Function responsible to start counting the length
		in seconds of this banner
		@param none
	**/
	startStopWatcher: function() { 
		
		var _this = this;
		this.stopWatcher = window.setInterval( function() { _this.setStopWatcher() }, this.stopWatcherUpdate);
		
	}, 

	/**
		Set the current length of the banner
		@param none
	**/
	setStopWatcher: function() { 

		if( this.stopWatcher != -1 )
		{
			this.stopWatcher += this.stopWatcherUpdate;
			//console.log("Current banner seconds length: " + parseFloat( this.stopWatcher / 1000 ) + " seconds ..." );
		}
			
	},

	/**
		Clear stop watcher 
		@param none
	**/
	clearStopWatcher: function() { 


		console.log( " ------------------------------------------------------------ ");
		console.log( "clearStopWatcher: Your banner " + parseFloat( this.stopWatcher / 1000 ) + " seconds long ...");
		console.log( " ------------------------------------------------------------ ");
		this.stopWatcher = window.clearInterval( this.stopWatcher );
		this.stopWatcher = -1;
	},

	/**
		Start playing video
		@param none
	**/
	initVideo: function() { 

		$("video").get(0).play();

	},

	/**
		Fades out playing video
		@param none
	**/
	hideVideo: function() { 
		TweenMax.to( $("video") , 1, { autoAlpha: 0 });
		// $("video").get(0).pause();
	},

	/**
		This function is responsible to animate your items
		@param none
	**/
	setAnim: function(){
		
		var _this = this;

		// set animations as array object
		var anims = _this.animationArr; 

		// test specific section for styling purpose
		// has to be greater than 0. Animation will be disable
		var testSection = _this.debugMode;
		if(testSection > 0){
			TweenMax.set($('.section').eq(testSection - 1), {display: 'block'});
		} else {
			TweenMax.set($('.section'), {display: 'block'});
		}

		/**
			Loop through the animation objects and add them to timeline 
			@param anims -> Animation array
			@param index -> Index count of array
			@param animObjs -> Obj within anims
		**/
		$.each(anims, function(index, animObjs){
			if(testSection > 0){
				if(index + 1 !== testSection){
					return;
				}

			} else {

				$.each(animObjs, function(i, obj){
					var elem = $('.section'+ (index + 1));
					var duration = _this.duration;
					var objects = obj.object;
					var overlap = '-=0';
					if(obj.child){
						elem = elem.find(obj.child);
					}
					if(obj.exdur){
						duration += obj.exdur;
					}
					if(obj.overlap){
						overlap = obj.overlap;
					}
					if(obj.duration) duration = obj.duration;
					
					if( obj.complete == "startGenericAnimation") obj.object.onComplete = function() { Advert.startGenericAnimation(); };
					if( obj.start == "startGenericAnimation" ) obj.object.onStart = function() { Advert.startGenericAnimation(); };


					// set timeline
					if(obj.type === 'from'){
						_this.timeline.from(elem, duration, objects, overlap);
					} else {
						_this.timeline.to(elem, duration, objects, overlap);
					}

				});
			}
		});

		this.setClickTag();
		this.setElements();
	},

	/**
		Set Flash Talking clickTag
		@param id -> ID of clickTag
	**/
	setClickTag: function(id){
		var _this = this;
		$('.clickTag').click(function(){
            console.log("clickTag!");
            // Enabler.exit("ClickThrough");
			//_this.ft.clickTag(_this.clickId + 1);
		});
	},

	setElements: function(){
		var _this = this;
		
	},

	setEnd: function(){
		console.log('end');
	},

	restartAnim: function(){
		console.log('restart');
	}
};