/*
 * File       : js/motion.js
 * Author     : STUDIO-JT (NICO)
 * Guideline  : JTstyle.1.1
 *
 * SUMMARY:
 * 1) GLOBAL
 * 2) INIT
 * 3) ON LOAD
 * 4) ON RESIZE
 * 5) FUNCTIONS
 * 6) HELPERS
 */


jQuery(function($) {



/* **************************************** *
 * GLOBAL
 * **************************************** */
var skr;
var light_blink_tl;
var fog_app;
var play_star = true;



/* **************************************** *
 * INIT
 * **************************************** */
smooth_scroll();
waypoint_css_motion();
subpage_title_motion();
motion_with_class();
jt_displacement();
jt_star();
jt_light_blink();
jt_fog();
scramble_number();
play_pause_inview();

point_pulse_motion();

jt_draw_line();
main_visual_slider();

// arrow_tongtong();
//jt_hue();



/* **************************************** *
 * ON LOAD
 * **************************************** */
$(window).load(function() {

    onload_class();

});



/* **************************************** *
 * ON RESIZE
 * **************************************** */
// INITIALIZE RESIZE
function init_resize(){



}

// Init resize on reisize or orientation change
if('orientation' in window){
    $(window).on('orientationchange',init_resize);
}else{
    $(window).on('resize',init_resize);
}




/* **************************************** *
 * FUNCTIONS
 * **************************************** */


// Add motion on load with css
function onload_class(){

	$('body').addClass('load');

}



// Smooth scroll with TweenMax (TODO : make a plugin)
function smooth_scroll(){

    if(is_mobile() || is_mac_os()) return;

	var $window = $(window);
	var scrollTime = 1.2;
	var scrollDistance = $window.height() / 2.5;

	$window.on("mousewheel DOMMouseScroll", function(event){

		event.preventDefault();

		var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
		var scrollTop = $window.scrollTop();
		var finalScroll = scrollTop - parseInt(delta*scrollDistance);

		TweenMax.to($window, scrollTime, {
			scrollTo : { y: finalScroll, autoKill:true },
				ease: Power3.easeOut,
				overwrite: 5
			});

	});

}



// Arrow tongotong on mouse hover
function arrow_tongtong() {

	var $scroll_down_target = $('.scroll_down_arrow');

	if( $scroll_down_target.length > 0 ){

        $scroll_down_target.each(function(){
            var tn1 = TweenMax.to($(this), .4, { y:-18, repeat:-1, yoyo:true, paused:true });

            tn1.play();

            $('.scroll_down').on('mouseenter',function() {
                var currentTime = tn1.time();
                tn1.reverse(currentTime);
            });

            $('.scroll_down').on('mouseleave',function() {
                tn1.play();
            });
        });

	}

}



// Main visual slider with cycle js
function main_visual_slider(){

    var $slider = $('#main_visual_slider');

    // Do nothing if no slider
    if( !$slider.length ){ return; }

	// Text motion timeline
	var txt_tls = [];

	$('.main_visual_item').each(function(index){

		var $this = $(this);
		var $title = $this.find('h2');
		var $subtitle = $this.find('.main_visual_cell span');

		var title = new SplitText($title, {type:"chars"});
		var title_chars = title.chars;

		txt_tls[index] = new TimelineLite({delay:0.5,paused:true});
		txt_tls[index].staggerFrom(title_chars, 1.8, motion_args({autoAlpha:0, y:10, ease:Back.easeOut}), 0.01, "+=0")
                      .from($subtitle,1.2,motion_args({autoAlpha:0, y:10, ease:Back.easeOut}), "-=1.4")

	});

	// Init callback (!important must be add before run cycle )
	$slider.on( 'cycle-initialized', function( event, opts ) {
		TweenMax.set($('.main_visual_item_01 .wrap'),{visibility:'visible'});
		txt_tls[0].play();
	});

	// Run cycle
	$slider.cycle({
        slides          : '> div',
        timeout         :  10000,
		// speed           : 1000,
        swipe           : true,
		log			    : false,
        pager           : '#main_visual_pager',
        pagerTemplate   : '<li><span>{{slideNum}}</span></li>'
	});

    $slider.on( 'cycle-before', function(event, opts, currEl, nextEl, fwdFlag) {

		// get index
        var current_index = $(nextEl).index() - 1;
		var prev_index = $(currEl).index() - 1;

		// play or replay the text
		txt_tls[current_index].restart();

		// Rewind the prev tween (avoid fouc)
        txt_tls[prev_index].restart().pause();

		// // Optimaze performance by toggling motions
		// if(!is_mobile()) {

		// 	// play / pause fog
		// 	if($(nextEl).index() == 1){
		// 		play_star = true;
		// 	}else{
		// 		play_star = false;
		// 	}

		// 	// play / pause light blink
		// 	if($(nextEl).index() == 2){
		// 		light_blink_tl.resume();
		// 	}else{
		// 		light_blink_tl.pause();
		// 	}

		// 	// play / pause fog
		// 	if($(nextEl).index() == 3){
		// 		fog_app.start();
		// 	}else{
		// 		fog_app.stop();
		// 	}
		// 	/*
		// 	if(next_index == 3){
		// 		jQuery('.main_visual_item:eq('+next_index+') video')[0].play();
		// 	}else{
		// 		jQuery('.main_visual_item video')[0].pause();
		// 	}
		// 	*/

		// }

    });

    // play, pause
    $('.main_visual_autoplay > span').on('click', function(){
        if($(this).hasClass('autoplay_play')){
            $slider.cycle('resume');

            $('.autoplay_play').css('display', 'none');
            $('.autoplay_pause').css('display', 'block');
        } else {
            $slider.cycle('pause');

            $('.autoplay_play').css('display', 'block');
            $('.autoplay_pause').css('display', 'none');
        }
    });

}



// 사업장 Pulse motion
function point_pulse_motion(){

    TweenMax.to($('.pic_point_giheung .point_pulse'), 2, { scale: 2, autoAlpha: 0, force3D: true, repeat:-1, ease: Power0.easeNone, delay: 1.5, repeatDelay: .8 });
	TweenMax.to($('.pic_point_ulsan .point_pulse'), 2, { scale: 2, autoAlpha: 0, force3D: true, repeat:-1, ease: Power0.easeNone, delay: 1.7, repeatDelay: .8 });

}



// Scramble with tweenmax plugin
function scramble_number(){

	// nothing on mobile
	if(is_mobile()) return;

	$('.jt_scramble_number').each(function() {

		var $this = $(this);
		var tl = new TimelineLite({paused:true});
		tl.from($this, 1.0, {scrambleText:{text:"0,000", chars:"0123456789",  ease:Power3.easeNone}})

		$this.waypoint(function() {
			tl.play();
			this.destroy();
		}, {
			offset: "95%"
		});

	});
}



// Waypoint animate class switcher  for css animation
function waypoint_css_motion(){

	// nothing on mobile
	if(is_mobile()) return;

	// use each loop the get the offset from the data attribut
	$('.jt_waypoint').each(function() {
		var $this = $(this);

		$this.waypoint(function() {
			$this.addClass('jt_animate');
			this.destroy();
		}, {
			offset: $this.attr("data-offset")
		});
	});

}



// Simple waypoint + tweenmax plugin
/*
function waymax(){

	// nothing on mobile
	if(is_mobile()) return;

	$('.waymax').each(function() {

		var $this = $(this);
		var tl = new TimelineLite({paused:true});
		tl.from($this, 2.2, {y:120, ease: Power3.easeOut});

		$this.waypoint(function() {
			tl.play();
			this.destroy();
		}, {
			offset: "90%"
		});

	});
}
*/



function subpage_title_motion(){


	// nothing on mobile
	if(is_mobile()) return;

	var $header = $('.article_header');
	var tl = new TimelineLite({delay:0.5});

	if($('.article_title').length > 0 ){
		var title = new SplitText($('.article_title'), {type:"chars"});
		var title_chars = title.chars;
		tl.staggerFrom(title_chars, 1.2, motion_args({force3D:true, autoAlpha:0, y:10, ease:Back.easeOut,onComplete:function(){
				$('.article_title').addClass('completed');
			}
		}), 0.02, "+=0")
	}


	if($('.article_sub_title').length > 0 ){
		var subtitle = new SplitText($('.article_sub_title'), {type:"chars"});
		var subtitle_chars = subtitle.chars;
		tl.staggerFrom(subtitle_chars, 1.8, motion_args({force3D:true, autoAlpha:0, y:-10, ease:Power3.easeOut}), 0.05, "-=1.2")
	}


	if($('.article_desc').length > 0 ){
		var $desc = $('.article_desc');
		var desc_txt_original = $desc.html();
		var desc = new SplitText($desc, {type:"lines"});
		var desc_lines = desc.lines;
		tl.staggerFrom(desc_lines, 2.5, motion_args({force3D:true,autoAlpha:0, y:10, ease:Power3.easeOut, onComplete : function(){
		   $desc.html(desc_txt_original);
		}}), 0.05, "-=1.8");
	}


}



// Animate by adding a simple class
// Todo : add optional parameter using data attribute
function motion_with_class(){

	// nothing on mobile
	if(is_mobile()) return;

	// Title (h2 h3 ...)
	$('.jt_animate_title').each(function() {

		var $this = $(this);
		var tl = new TimelineLite({paused:true});
		TweenMax.set($this, {autoAlpha:0, y:50}); // avoid ie fouc
		tl.to($this, 1.4, motion_args({ autoAlpha:1, y:0, ease:Back.easeOut}));

		$this.waypoint(function() {
			tl.play();
			this.destroy();
		}, {
			offset: "90%"
		});

	});

	// Subtitle
	$('.jt_animate_subtitle').each(function() {

		var $this = $(this);
		var tl = new TimelineLite({paused:true});
		TweenMax.set($this, {autoAlpha:0, y:50}); // avoid ie fouc
		tl.to($this, 1.2, motion_args({ autoAlpha:1, y:0, ease:Back.easeOut}));

		$this.waypoint(function() {
			tl.play();
			this.destroy();
		}, {
			offset: "90%"
		});

	});

	// Buttom
	$('.jt_animate_btn').each(function() {

		var $this = $(this);
		var tl = new TimelineLite({paused:true});

		TweenMax.set($this, {autoAlpha:0}); // avoid ie fouc
		tl.to($this, 1.2, { autoAlpha:1, ease:Back.easeOut});

		$this.waypoint(function() {
			tl.play();
			this.destroy();
		}, {
			offset: "70%"
		});

	});

	// Text
	$('.jt_animate_txt').each(function() {

		var $this = $(this);
		var tl = new TimelineLite({paused:true});

		if($(window).width() > 1400){

			var txt_original = $this.html();
			var txt_split = new SplitText($this , {type:"lines"});
			var lines = txt_split.lines; //an array of all the divs that wrap each character

			// Avoid ie fouc
			TweenMax.set(lines, {autoAlpha:0, y:30});

			// Animate
			tl.staggerTo(lines, 2.2, motion_args({autoAlpha:1, y:0, ease:Back.easeOut, onComplete : function(){
				$this.html(txt_original);
			}}), 0.1, "+=0");

		}else{

 			// simple motion on medium screen
			// 9br issue, remove br from the dom not working)
			TweenMax.set($this, {autoAlpha:0, y:30});
			tl.to($this, 2.2, motion_args({ autoAlpha:1, y:0, ease:Back.easeOut}));

		}

		$this.waypoint(function() {
			tl.play();
			this.destroy();
		}, {
			offset: "90%"
		});

	});

	// 3d Card
	$('.jt_animate_card').each(function() {

		var $this = $(this);
		var off_set = $this.attr('data-offset');
		var tl = new TimelineLite({paused:true});

		if(off_set == undefined){
		    off_set = '100%';

		}

		if($this.hasClass('jt_animate_card_no_3d')){
			tl.from($this, 1.6, {y:'50%',force3D:true, ease:Power3.easeOut});
		}else{
			TweenMax.set($this, {css:{transformPerspective:400, transformStyle:"preserve-3d"}});
			tl.from($this, 1.6, {y:'40%', z: 40, rotationX:4,force3D:true, ease:Power3.easeOut});
		}

		tl.from($this, 0.5, {autoAlpha:0, ease:Power3.easeOut},"-=1.6");

		$this.waypoint(function() {
			tl.play();
			this.destroy();
		}, {
			offset: off_set
		});

	});

}



/*
 * Displacmeent mapping
 * USAGE :
   - data-img="<?php bloginfo('template_directory'); ?>/images/sub/visual/ceo-visual-fg.jpg"
   - data-depth="<?php bloginfo('template_directory'); ?>/images/sub/visual/ceo-visual-depth.jpg"
   - data-intensity="50"
 */
function jt_displacement(){

	// nothing on mobile
	if(is_mobile()) return;

	// Nothing if not necessary (avoid bug and perf issue)
	if($('.article_header_bg').length <= 0 ||
	   $('.article_header_bg').attr('data-img') == undefined ||
	   $('.article_header_bg').attr('data-depth') == undefined ||
	   $('.article_header_bg').attr('data-img') == ""||
	   $('.article_header_bg').attr('data-depth') == "") {
	    return;
	}

	// Clean pixi console
	PIXI.utils.skipHello();

	// Init the requ
	var win_w = window.innerWidth;
	var win_h = window.innerHeight;
	var w = 1903;
	var h = 1160;
	var scale = 1;
	var breacrumb_offset = 0;

	if(win_w > w ){
	    w = win_w+30;
	    h = win_w/1.65517241379;

	    //breacrumb_offset = Math.abs(parseInt($('.article_breadcrumbs').css('margin-top')));
	    //scale = $('.article_header_bg').width()/($('.article_header_bg').height() + breacrumb_offset);
	}
	//var w = 1903;
	//var h = 1160;
	//var containerSize = {x:window.innerWidth ,y:1160};
	var renderer = new PIXI.WebGLRenderer(w, h,{ transparent: true });
	var cOutput = $('.article_header_bg')[0];
	var intensity = 20;

	if($('.article_header_bg').attr('data-intensity') != undefined &&
	   $('.article_header_bg').attr('data-intensity') != ""){
		intensity = parseInt($('.article_header_bg').attr('data-intensity'));
	}

	// avoid overflow
	$('.article_header_bg').width(win_w).css('overflow','hidden');

	cOutput.appendChild(renderer.view);

	var stage = new PIXI.Container();
	var container = new PIXI.Container();
	var foreground = new PIXI.Container();
	stage.addChild(container);
	stage.addChild(foreground);

	var f;
	var d;
	var fg;
	var mousex = w/2, mousey = h/2;
	var ploader = new PIXI.loaders.Loader();

	var img_original = $('.article_header_bg').attr('data-img');
	var img_depth = $('.article_header_bg').attr('data-depth');


	// Load and Run
	var init = function(){

	  ploader.add('fg', img_original);
	  ploader.add('depth', img_depth);

	  ploader.once('complete', displacement);
	  // Begin loading -
	  ploader.load();
	},

	// Init the magic
	displacement = function() {
	    fg = new PIXI.Sprite(ploader.resources.fg.texture);
	    //fg = background(containerSize, new PIXI.Sprite.fromImage(ploader.resources.fg.texture),'cover');
	    //console.log(fg.height);
	    // Cover
		var sp = {x:fg.width,y:fg.height};
		var winratio = win_w/win_h;
		var spratio = sp.x/sp.y;
		var scale = 1;
		var pos = new PIXI.Point(0,0);
		//console.log(winratio);
		//console.log(spratio);
		if(winratio > spratio) {
			//photo is wider than background
			//console.log('photo is wider than background');
			scale = w/sp.x;
			pos.y = -((sp.y*scale)-h)/2
		} else {
			//photo is taller than background
			//console.log('photo is taller than background');
			scale = h/sp.y ;
			pos.x = -((sp.x*scale)-w)/2
		}

		fg.scale = new PIXI.Point(scale,scale);
		fg.position = pos;

		foreground.addChild(fg);

		d = new PIXI.Sprite(ploader.resources.depth.texture);
		f = new PIXI.filters.DisplacementFilter(d, 0);
		fg.filters = [f];
		$('.article_header').on("mousemove", function(e) {
		  mousex = e.clientX;
		  mousey = e.clientY;
		});

		animate();
	},

	// Animate
	animate = function() {
	  //f.scale.x = (window.innerWidth/2 - mousex) / 50;
	  //f.scale.y = (window.innerHeight/2 - mousey) / 50;
	  f.scale.x = ($('.article_header').width()/2 - mousex) / intensity;
	  f.scale.y = ($('.article_header').height()/2 - mousey) / intensity;
	  fg.addChild(d);
	  d.renderable=false;

	  renderer.render(stage);
	  requestAnimationFrame(animate);
	},

	// RWD
	size = function(){

	    $('.article_header_bg').width($(window).width());
		$('.article_header_bg').empty();

		// resize pixis
        //var new_scale = get_scale();
		//fg.scale = new PIXI.Point(new_scale,new_scale);

	};

	// Start
	init();

    // Resize
	$(window).on('resize',function(){
	    size();
	});

	/*
	function background(bgSize, inputSprite, type, forceSize) {
		var sprite = inputSprite;
		var bgContainer = new PIXI.Container();
		var mask = new PIXI.Graphics().beginFill(0x8bc5ff).drawRect(0,0, bgSize.x, bgSize.y).endFill();
		bgContainer.mask = mask;
		bgContainer.addChild(mask);
		bgContainer.addChild(sprite);

		var sp = {x:sprite.width,y:sprite.height};
		if(forceSize) sp = forceSize;
		var winratio = bgSize.x/bgSize.y;
		var spratio = sp.x/sp.y;
		var scale = 1;
		var pos = new PIXI.Point(0,0);
		if(type == 'cover' ? (winratio > spratio) : (winratio < spratio)) {
			//photo is wider than background
			scale = bgSize.x/sp.x;
			pos.y = -((sp.y*scale)-bgSize.y)/2
		} else {
			//photo is taller than background
			scale = bgSize.y/sp.y;
			pos.x = -((sp.x*scale)-bgSize.x)/2
		}

		sprite.scale = new PIXI.Point(scale,scale);
		sprite.position = pos;

		return bgContainer;

	}
	*/

}



// Star motion
function jt_star(){

	// Nothing on mobile
	if(is_mobile()) return;

    // Nothing  if not required
	if($('#jt_star').length <= 0) return;

	// init
	$('#jt_star').html('<canvas id="jt_star_canvas"></canvas>');

    var background = document.getElementById("jt_star_canvas"),
		ctx = background.getContext("2d"),
		width = window.innerWidth,
		height = window.innerHeight; //document.body.offsetHeight;
    (height < 400)?height = 400:height;

	background.width = width;
	background.height = height - $('#footer').outerHeight();




	// Second canvas used for the stars
	ctx.fillStyle = 'red';
	ctx.fillRect(0,0,width,height);

	// stars
	var Star = function(options){
		this.size = Math.random()*2;
		this.speed = Math.random()*.1;
		this.x = options.x;
		this.y = options.y;
	}

	Star.prototype.reset = function(){
		this.size = Math.random()*2;
		this.speed = Math.random()*.1;
		this.x = width;
		this.y = Math.random()*height;
	}

	Star.prototype.update = function(){
		this.x-=this.speed;
		if(this.x<0){
		  this.reset();
		}else{
		  ctx.fillRect(this.x,this.y,this.size,this.size);
		}
	}

	var ShootingStar = function(){
		this.reset();
	}

	ShootingStar.prototype.reset = function(){
		this.x = Math.random()*width;
		this.y = 0;
		this.len = (Math.random()*80)+10;
		this.speed = (Math.random()*10)+6;
		this.size = (Math.random()*1)+0.1;
        // this is used so the shooting stars arent constant
		this.waitTime =  new Date().getTime() + (Math.random()*3000)+500;
		this.active = false;
	}

	ShootingStar.prototype.update = function(){
		if(this.active){
			this.x-=this.speed;
			this.y+=this.speed;
			if(this.x<0 || this.y >= height){
			    this.reset();
			}else{
			    var gradient=ctx.createLinearGradient(this.x,this.y,this.x+this.len,this.y-this.len);
				gradient.addColorStop("0","rgba(255,255,255,1)");
				gradient.addColorStop("0.5","rgba(255,255,255,1)");
				gradient.addColorStop("1.0","rgba(255,255,255,0)");
				
				ctx.lineWidth = this.size;
				ctx.beginPath();
				ctx.moveTo(this.x,this.y);
				ctx.lineTo(this.x+this.len, this.y-this.len);				
				ctx.strokeStyle = gradient; 				
				ctx.stroke();
			}
		}else{
			if(this.waitTime < new Date().getTime()){
				this.active = true;
			}
		}
	}

	var entities = [];

	// init the stars
	for(var i=0; i < height; i++){
		entities.push(new Star({x:Math.random()*width, y:Math.random()*height}));
	}

	// Add 2 shooting stars that just cycle.
	entities.push(new ShootingStar());
	entities.push(new ShootingStar());

	//animate background
	var animate = function(){
		if(play_star) {
			ctx.clearRect(0, 0, background.width, background.height);
			ctx.fillStyle = '#ffffff';
			ctx.strokeStyle = '#ffffff';

			var entLen = entities.length;

			while(entLen--){
				entities[entLen].update();
			}
		}

		requestAnimationFrame(animate);
	}
	animate();

	$(window).on('resize', function(){
	    //background.width = window.innerWidth;
	    //background.height = document.body.offsetHeight - $('#footer').outerHeight();
	})

}



// Blinking Light
function jt_light_blink(){

	// nothing on mobile
	if(is_mobile()) return;

	var id = '#jt_light_blink';
	light_blink_tl = new TimelineMax({repeat:-1,paused:true});
	var rand = function(max,min){
		return Math.random()*(max-min)+min;
	}

	for(var i=60; i--;){
	  light_blink_tl.to(id,rand(0.03,0.17),{opacity:rand(0,1)})
	};

	light_blink_tl.to(id,light_blink_tl.duration()/2,{opacity:rand(0.1,1),ease:RoughEase.ease.config({strength:0.5,points:10,randomize:true,taper: "none"}),repeat:1,yoyo:true},0);

}



// Fog motion
function jt_fog(){

	// Nothing on mobile
	if(is_mobile()) return;

    // Nothing  if not required
	if($('#jt_fog').length <= 0) return;

	// Clean pixi console
	PIXI.utils.skipHello();

	var canvas_offset = 206;
	var win_w = window.innerWidth;
	var win_h = window.innerHeight + canvas_offset;
	var cloud_num = 10;
	fog_app = new PIXI.Application({width:win_w,height:win_h,transparent:true});

	document.getElementById('jt_fog').appendChild(fog_app.view);

	//var bg = PIXI.Sprite.fromImage('bg.jpg');

	var fog_img_src = $('#jt_fog').attr('data-fog');

	var sprites = new PIXI.particles.ParticleContainer(cloud_num, {
		scale: true,
		position: true,
		rotation: true,
		uvs: true,
		alpha: true
	});

	//fog_app.stage.addChild(bg);
	fog_app.stage.addChild(sprites);

	// create an array to store all the sprites
	var maggots = [];

	var totalSprites = cloud_num;//fog_app.renderer instanceof PIXI.WebGLRenderer ? 100 : 100;

	for (var i = 0; i < totalSprites; i++) {

		// create a new Sprite
		var dude = PIXI.Sprite.fromImage(fog_img_src);

		//dude.tint = Math.random() * 0xE8D4CD;

		// set the anchor point so the texture is centerd on the sprite
		dude.anchor.set(0.5);

		// different maggots, different sizes
		dude.scale.set((Math.random() * 10)+3);

		// scatter them all
		dude.x = Math.random() * fog_app.screen.width;
		dude.y = Math.random() * fog_app.screen.height;

		//dude.tint = Math.random() * 0x808080;
		// blend mode
		//dude.blendMode = PIXI.BLEND_MODES.LIGHTEN;

		// create a random direction in radians
		dude.direction = -90//Math.random() * Math.PI * 2;

		// this number will be used to modify the direction of the sprite over time
		dude.turningSpeed = 0//Math.random() - 0.8;

		// create a random speed between 0 - 2, and these maggots are slooww
		dude.speed = (1 + Math.random() * 2) * 0.15;

		dude.offset = Math.random() * 100;

		// finally we push the dude into the maggots array so it it can be easily accessed later
		maggots.push(dude);

		sprites.addChild(dude);
	}

	// create a bounding box box for the little maggots
	var dudeBoundsPadding = 100 * 5; // sprite width * max offset
	var dudeBounds = new PIXI.Rectangle(
		-dudeBoundsPadding,
		-dudeBoundsPadding,
		fog_app.screen.width + dudeBoundsPadding * 2,
		fog_app.screen.height + dudeBoundsPadding * 2
	);

	var tick = 0;

	fog_app.ticker.add(function() {

		// iterate through the sprites and update their position
		for (var i = 0; i < maggots.length; i++) {

			var dude = maggots[i];

			//dude.scale.y = 0.95 + Math.sin(tick + dude.offset) * 0.05;
			//dude.direction += dude.turningSpeed * 0.01;
			dude.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y);
			dude.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y);
			dude.rotation = -dude.direction + Math.PI;

			// wrap the maggots
			if (dude.x < dudeBounds.x) {
				dude.x += dudeBounds.width;
			}
			else if (dude.x > dudeBounds.x + dudeBounds.width) {
				dude.x -= dudeBounds.width;
			}

			if (dude.y < dudeBounds.y) {
				dude.y += dudeBounds.height;
			}
			else if (dude.y > dudeBounds.y + dudeBounds.height) {
				dude.y -= dudeBounds.height;
			}
		}

		// increment the ticker
		tick += 0.1;
	});


	$(window).on('resize', function(){
	    fog_app.renderer.autoResize = true;
        fog_app.renderer.resize(window.innerWidth, window.innerHeight + canvas_offset);
	})

	// immediatly pause
	fog_app.stop();


} // JT FOG



// HUE on scroll
function jt_hue(){

	if($('.main_business_img') <= 0) return;

	// Start the magic
	var ticking = false;
	var hueCounter = 0;
	var colorMatrix = new PIXI.filters.ColorMatrixFilter();

	$('.main_business_box_03 figure').find('img').each(function(){

		// Get the img src and convert it to div
		var img_src = $(this).attr('src');
		var img_class = $(this).attr('class');
		var img_w = $(this).width();
		var img_h = $(this).height();
		$(this).wrap('<div class="'+img_class+'"></div>');

		var container = $(this).parent()[0];

		$(this).remove();

		var stage = new PIXI.Stage(0x66FF99);
		var renderer = PIXI.autoDetectRenderer(img_w, img_h,{ transparent: true });

		var texture = PIXI.Texture.fromImage(img_src);
		var sprite = new PIXI.Sprite(texture);


		var animate = function() {
		  requestAnimationFrame(animate);
		  renderer.render(stage);
		}

		// set the pixi stuff
		container.appendChild(renderer.view);
		sprite.filters = [colorMatrix];
		stage.addChild(sprite);

		// Start pixi animation
		requestAnimationFrame(animate);

		// Change hue on scroll
		// use requestAnimationFrame for better performance
		window.addEventListener('scroll', function(e) {

			if (!ticking) {

				window.requestAnimationFrame(function() {

					hueCounter += 1;

					if (hueCounter > 360) {
					hueCounter = 0;
					}
					colorMatrix.hue(hueCounter);

					ticking = false;
				});

				ticking = true;

			}

		});

	}); // END each

}



// Toggle video playback
function play_pause_inview(){

	// slider
	var $slider = $('#main_visual_slider');

	if($slider.length > 0){
		new Waypoint.Inview({
			element: $slider,
			enter: function() {
				$slider.cycle('resume');

				if(is_mobile()) {
					// performance optimazation toggle motion
					var current_slide = $slider.data("cycle.opts").currSlide + 1;
					if( current_slide == 1){
						play_star = true;
					}else if( current_slide == 2){
					   light_blink_tl.resume();
					}else if( current_slide == 3){
					   fog_app.start();
					}
				}

			},
			exited: function() {
				$slider.cycle('pause');
				if(is_mobile()) {
					// performance optimazation toggle motion
					play_star = false;
					light_blink_tl.pause();
					fog_app.stop();
				}

			}
		});
	}

	// video
	var $video = $('.main_business_img video');
	if($video.length > 0 ){
		var playPromise = $video[0].play();

		if($video.length > 0){
			new Waypoint.Inview({
				element: $video,
				enter: function() {
					// Fix DOMException : https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
					if (playPromise !== undefined) {
						$video[0].play();
					}
				},
				exited: function() {
					if (playPromise !== undefined) {
						$video[0].pause();
					}
				}
			});
		}
	}

}


function jt_draw_line(){

	// nothing on mobile
	if(is_mobile()) return;

	$('.jt_draw_line svg').each(function() {

		var $svg = $(this);
		var $paths = $svg.find('path');
		var tl = new TimelineLite({paused:true});

		TweenMax.set($paths,{drawSVG:"0%"});
		tl.staggerTo($paths, 2, {drawSVG:"100%", ease: Power3.easeOut}, .2);

		$svg.waypoint(function() {
			tl.play();
			this.destroy();
		}, {
			offset: "90%"
		});

	});

}


/* ********************************************* *
 * HELPERS
 * ********************************************* */
// Debug ie not smoothy text motion
function motion_args(args){

	if($('html').hasClass('ie')){
	    args.rotation = 0.1;
	}

	return args

}

// is mobile condition
function is_mobile(){
    return (/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera);
	//return $('html').hasClass('mobile');
}

// SIMPLE OS CHECK
function is_mac_os(){
    return navigator.platform.indexOf('Mac') > -1;
}


}); // End jQuery