var startTime;
var stopped = true;
function get(id) {
	return document.querySelector(id);
}
//----
var cta = get(".cta");
var legal = get(".legal");
var logoDell = get(".logo-dell");
var logoIntel = get(".logo-intel");
var copy1 = get(".copy-1");
var copy2 = get(".copy-2");
var copy3 = get(".copy-3");
var copy4 = get(".copy-4");
var copy5a = get(".copy-5a");
var copy5b = get(".copy-5b");
var copy5c = get(".copy-5c");
var copyIntel = get(".copy-intel");
var copyDell = get(".copy-dell");
var creatureParentContainer = get(".creature-parent-container");
var creatureContainer = get(".creature-container");
var creatureBody = get(".creature-body");
var creatureWingL1 = get(".wing-L-1");
var creatureWingL2 = get(".wing-L-2");
var creatureWingR1 = get(".wing-R-1");
var creatureWingR2 = get(".wing-R-2");
//--
var container = get("#ad_container");
var pixiContainer = get(".pixi-container");
//---
// var maskedContainer, maskG;
var maskedScreenContainer, maskScreenG;
// creature, creatureContainer0,
var monitorContainer, monitorBack, monitorFront, monitorScreen2, bg,  logoCloseup;
// var creature, creatureWingL1, creatureWingL2, creatureWingR1, creatureWingR2;
//---
var app, loader;
var tlMain = new TimelineMax({paused: !0, onComplete: completeHandler, repeat:0});
var tlMonitor = new TimelineMax({paused: !0});
var tlCreature = new TimelineMax({paused: !0});
window.onload = function () {
	app = new PIXI.Application(970, 250, {transparent: true, antialias: true, resolution: 2});
	pixiContainer.appendChild(app.view);
	app.view.className = 'pixi-app'
	//---
	//-----
	loader = new PIXI.loaders.Loader();
	loader.add('monitorBack', '267863_monitor-back.png');
	loader.add('monitorFront', '267863_monitor-front.png');
	// loader.add('monitorScreen', './images/monitor-screen.png');
	loader.add('monitorScreen2', '267863_monitor-screen-2.jpg');
	// loader.add('creature', './images/creature.png');
	loader.add('logoCloseup', '267863_logo-closeup.png');

	//--
	loader.add('bg', '267863_970x250_bg.jpg');
	//---
	loader.once('complete', assetsLoadHandler);
	loader.load();
}
// //
var CustomEase = (function () {
	function CustomEase(_name, segments) {
		this._name = _name;
		this._segments = [];
		console.log(segments)
		for (var i = 0; i < segments.length; i++) {
			console.log(segments[i]);
			this._segments[this._segments.length] = new Segment(segments[i].s, segments[i].cp, segments[i].e);
		}
		CustomEase._all[_name] = this;
	}
	CustomEase._all = {};
	CustomEase.create = function create(name, segments) {
		var b = new CustomEase(name, segments);
		return b.ease.bind(b);
	};
	CustomEase.byName = function byName(name) {
		return CustomEase._all[name].ease;
	};
	CustomEase.prototype.ease = function (time, start, change, duration) {
		var factor = time / duration, qty = this._segments.length, i = Math.floor(qty * factor), t, s;
		t = (factor - (i * (1 / qty))) * qty;
		s = this._segments[i];
		// console.log('ssss',this._segments)
		return start + change * (s.s + t * (2 * (1 - t) * (s.cp - s.s) + t * (s.e - s.s)));
	};
	CustomEase.prototype.destroy = function () {
		this._segments = null;
		delete CustomEase._all[this._name];
	};
	return CustomEase;
})();
var Segment = (function () {
	function Segment(s, cp, e) {
		console.log('new seg', s)
		this.s = s;
		this.cp = cp;
		this.e = e;
	}
	return Segment;
})();
function assetsLoadHandler() {
	createPIXIObjects();
	startTime = new Date();
	setupTimelineMain();
	//-----
	//----
	// var domPixiList = new Selectoidal0.DOMPIXIList([monitorContainer,monitorBack,monitorScreen2,{src:maskScreenG,label:'screenG'}, monitorFront,bg], app.stage, app.view);
	// var domPixiList = new Selectoidal0.DOMPIXIList([{src:logoCloseup, label:'logoCloseup'}], app.stage, app.view);
	// var domPixiList = new Selectoidal0.DOMPIXIList([{src:creature, label:'body'}, {src:creatureWingL1,label:'wingL1'} , {src:creatureWingL2,label:'wingL2'}, {src:creatureWingR1,label:'wingR1'}, {src:creatureWingR2,label:'wingR2'}], app.stage, app.view);
	// Selectoidal0.addList(domPixiList);
	//--------------
	tlMain.play("start");
	stopped = false;
}
function changedCallback(displayObject, data) {
	console.log(data)
}
function createPIXIObjects() {


	//create objects
	monitorBack = new PIXI.Sprite(loader.resources.monitorBack.texture);
	monitorFront = new PIXI.Sprite(loader.resources.monitorFront.texture);
	// monitorScreen = new PIXI.Sprite(loader.resources.monitorScreen.texture);
	monitorScreen2 = new PIXI.Sprite(loader.resources.monitorScreen2.texture);
	// creature = new PIXI.Sprite(loader.resources.creature.texture);
	logoCloseup = new PIXI.Sprite(loader.resources.logoCloseup.texture);
	// creatureWingL1 = new PIXI.Sprite(loader.resources.creatureWingL1.texture);
	// creatureWingL2 = new PIXI.Sprite(loader.resources.creatureWingL2.texture);
	// creatureWingR1 = new PIXI.Sprite(loader.resources.creatureWingR1.texture);
	// creatureWingR2 = new PIXI.Sprite(loader.resources.creatureWingR2.texture);
	bg = new PIXI.Sprite(loader.resources.bg.texture);
	monitorContainer = new PIXI.Container();
	// creatureContainer0 = new PIXI.Container();
	// maskedContainer = new PIXI.Container();
	// maskG = new PIXI.Graphics();
	maskedScreenContainer = new PIXI.Container();
	maskScreenG = new PIXI.Graphics();
	// var maskedScreenContainer, maskScreenG;
	//----
	//add
	app.stage.addChild(bg);
	app.stage.addChild(monitorContainer);
	// app.stage.addChild(maskedContainer);
	// maskedContainer.addChild(creatureContainer0);
	// creatureContainer0.addChild(creature);
	// creature.addChild(creatureWingL1);
	// creatureWingL1.addChild(creatureWingL2);
	// creature.addChild(creatureWingR1);
	// creatureWingR1.addChild(creatureWingR2);
	// creature.cacheAsBitmap=true;
	// app.stage.addChild(maskG);
	monitorContainer.addChild(monitorBack);
	monitorContainer.addChild(monitorFront);
	// monitorContainer.addChild(monitorScreen);
	monitorContainer.addChild(maskedScreenContainer);
	maskedScreenContainer.addChild(monitorScreen2);
	monitorContainer.addChild(maskScreenG);
	monitorContainer.addChild(logoCloseup);
	// //---
	//create mask
	// maskedContainer.mask = maskG;
	// maskG.clear();
	// maskG.beginFill(0x00ff00, 1);
	// // maskG.moveTo(0, 0);
	// maskG.moveTo(0, 0);
	// maskG.lineTo(300, 0);
	// maskG.lineTo(176, 124);
	// maskG.lineTo(130, 107);
	// maskG.lineTo(128, 108);
	// maskG.lineTo(168, 170);
	// maskG.lineTo(166, 173);
	// maskG.lineTo(0, 166);
	// maskG.endFill();
	//-----
	//create mask
	maskedScreenContainer.mask = maskScreenG;
	maskScreenG.clear();
	maskScreenG.beginFill(0x00ff00, 1);
	// maskScreenG.moveTo(0, 0);
	var x0 = 181 + 0;
	var y0 = 26.6 + 0;
	// x:181, y:26.6
	maskScreenG.moveTo(x0 + 1, y0 + 0);
	maskScreenG.lineTo(x0 + 102, y0 + 27);
	maskScreenG.lineTo(x0 + 121, y0 + 95);
	maskScreenG.lineTo(x0 + 22, y0 + 98);
	// maskScreenG.lineTo(128, 108);
	// maskScreenG.lineTo(168, 170);
	// maskScreenG.lineTo(166, 173);
	// maskScreenG.lineTo(0, 166);
	maskScreenG.endFill();
	//----
	monitorContainer.pivot.x = 263;
	monitorContainer.pivot.y = 128;
	bg.pivot.x = 231;
	bg.pivot.y = 171;
	// creature.pivot.x = 179;
	// creature.pivot.y = 150;
	// creatureWingL1.x=creatureWingL1.pivot.x = 162;
	// creatureWingL1.y=creatureWingL1.pivot.y = 134;
	app.stage.alpha = 0;
}
function setupTimelineReplayButton() {
	// tlReplayButton.to(replay, 0.75, {rotation: -360,  repeat: -1, ease: Linear.easeNone});
}
var monitorObj = {time: 0}
function monitorTimeScale(duration, endTime, ease) {
	TweenMax.to(monitorObj, duration, {
		time: endTime, onUpdate: function () {
			tlMonitor.timeScale(monitorObj.time)
		}, ease: ease
	})
}
function setupTimelineMain() {
	var ease0 = Sine.easeInOut;
	var timeSlow1 = 0.3;
	var timeSlow0 = 0.03;
	var mTime = 9.4;
	// var mEase= 			CustomEase.create("custom", [0,0.061,0,0.076,0,0.077,0.016,0.077,0.066,0.078,0.083,0.093,0.083,0.138,0.083,0.153,0.083,0.153,0.1,0.154,0.149,0.155,0.166,0.17,0.166,0.214,0.166,0.23,0.166,0.23,0.183,0.231,0.233,0.231,0.25,0.246,0.25,0.291,0.25,0.306,0.25,0.307,0.266,0.307,0.316,0.308,0.333,0.323,0.333,0.368,0.333,0.383,0.333,0.383,0.35,0.384,0.399,0.385,0.416,0.4,0.416,0.444,0.416,0.46,0.416,0.46,0.433,0.461,0.483,0.461,0.5,0.477,0.5,0.522,0.5,0.538,0.5,0.538,0.516,0.539,0.566,0.54,0.583,0.555,0.583,0.599,0.583,0.615,0.583,0.615,0.6,0.616,0.649,0.616,0.666,0.631,0.666,0.676,0.666,0.691,0.666,0.692,0.683,0.692,0.733,0.693,0.75,0.708,0.75,0.753,0.75,0.768,0.75,0.768,0.766,0.769,0.816,0.77,0.833,0.785,0.833,0.829,0.833,0.845,0.833,0.845,0.85,0.846,0.899,0.846,0.916,0.861,0.916,0.906,0.916,0.921,0.916,0.922,0.933,0.922,0.983,0.923,1,0.938,1,1,1,1,1]);
	// var mEase= 		Back.easeOut.config(0);
	var mEase = Expo.easeOut;
	tlMonitor


	// .timeScale(0)
		.add('start')
		.call(function () {
			console.log('stat monitor')
		}, [], this, 'start')
		.to([monitorContainer], mTime, {pixi: {x: 601, y: 191, rotation: 0, scaleX: 1.2, scaleY: 1.2, ease: mEase}}, 'start')
		.to([bg], mTime, {pixi: {x: 231, y: 171, rotation: 0, scaleX: 1, scaleY: 1, ease: mEase}}, 'start')



	// .to(creatureBody, 3, {rotation:720})
	var fTime = 0.32;
	var fEase = Quad.easeInOut;
	var fScale0 = 0.8;
	var fScale1 = 1

	var repeatNum=3;

	tlCreature

			.add('start')
			.add('startf', 'start+=0.45')

	.fromTo(creatureWingL1, fTime,{rotation:-50,scaleY:fScale0},{rotation:5, repeat:repeatNum, scaleY:fScale1,yoyo:true, ease:fEase},'startf')
	.fromTo(creatureWingL2, fTime,{rotation:-45,scaleY:fScale0},{rotation:10, repeat:repeatNum, scaleY:fScale1,yoyo:true, ease:fEase},'startf')
	//
	.fromTo(creatureWingR1, fTime,{rotation:50,scaleY:fScale0},{rotation:-5, repeat:repeatNum, scaleY:fScale1,yoyo:true, ease:fEase},'startf')
	.fromTo(creatureWingR2, fTime,{rotation:45,scaleY:fScale0},{rotation:-10, repeat:repeatNum, scaleY:fScale1,yoyo:true, ease:fEase},'startf')

		.add('endflap', 'startf+='+(fTime*(repeatNum+1)))


		.to(creatureWingL1, fTime,{rotation:0,  scaleY:1, ease:fEase},'endflap')
		.to(creatureWingL2, fTime,{rotation:0,  scaleY:1, ease:fEase},'endflap')
		//
		.to(creatureWingR1, fTime,{rotation:0, scaleY:1, ease:fEase},'endflap')
		.to(creatureWingR2, fTime,{rotation:0,  scaleY:1, ease:fEase},'endflap')




		//
	//
	//ccontainer translate(11px,103px) scale(0.6) rotate(12deg)




		.to(creatureContainer, 2, {rotation: 0, y: 0,  ease: Power0.easeIn}, 'start+=' + (0))
		.to(creatureContainer, 2, {x: 0, ease: Back.easeOut.config(1.5)}, 'start+=' + (0))
		.to(creatureBody, 1.5, {rotationX: 0, rotationY: 0, ease: Cubic.easeIn}, 'start+=' + (0.5 ))
		.to(creatureBody, 0.5, {autoAlpha:0.6, ease: Cubic.easeIn}, 'start+=' + (0 ))
		.to(creatureContainer, 1.65, {scale: 1.3, ease: Power0.easeInOut}, 'start+=' + (0.35 ))
		.set(creatureParentContainer, {css: {overflow: 'visible'}}, 'start+=' + (1.25 ))




	tlMain
		.timeScale(1)
		.add('start')
		.set(copy1, {autoAlpha: 0})
		.set(copy2, {autoAlpha: 0})
		.set(copy3, {autoAlpha: 0})
		.set(copy4, {autoAlpha: 0})
		.set(app.stage, {pixi: {autoAlpha: 1}})
		.set(monitorBack, {pixi: {scale: 0.5 / 0.75}})
		.set(monitorFront, {pixi: {scale: 0.25 / 0.6}})


		// creature.pivot.x = 179;
		// creature.pivot.y = 150;
		.set(creatureParentContainer, {rotation: -33})
		// .set(creatureParentContainer, { transformOrigin:"179px 150px"})
		// .set(monitorScreen, {pixi: {scale: 0.25}})
		.set(monitorScreen2, {pixi: {scale: 0.25, alpha: 1, x: 181, y: 26.0}})
		.set(logoCloseup, {pixi: {scale: 0.15, alpha: 1, x: 258, y: 125}})
		.set(monitorContainer, {pixi: {x: 121, y: 120, rotation: 0, scaleX: 3.42, scaleY: 3.42}})
		// .set(creature, {pixi: {x:0, y:0, rotation:-23, scaleX:0.5, scaleY:0.5}})
		// .set(creatureParentContainer, {pixi: {x:80, y:68, rotation:0}})
		// .set(creature, {pixi: {x: 0, y: 0, rotation: -60.8, scaleX: 0.5, scaleY: 0.5, alpha: 1}})
		// .set(creatureContainer0, {pixi: {x: 145.01, y: 166.93, rotation: 10.12, scaleX: 0.68, scaleY: 0.17, alpha: 0.5}})
		// .set(creatureContainer0, {pixi: {x: 250, y: 167, alpha: 0.5}})



		// .set(creatureBody, { x: 0, y: 0, rotation: -60.8, scaleX: 0.68, scaleY: 0.17})
		.set(bg, {pixi: {x: 231, y: 171, rotation: 0, scaleX: 2.42 * 4, scaleY: 2.42 * 4}})
		.set([copy5a, copy5b, copy5c], {autoAlpha: 0})
		.set([logoDell, logoIntel, copyDell, copyIntel], {autoAlpha: 0})
		.set([copy1, copy2, copy3, copy4], {transformOrigin: "150px 40px"})
		.set(copy1, {scale: 0.98, willChange: 'transform', rotationZ: 0.001})
		.set(copy2, {scale: 0.98, willChange: 'transform', rotationZ: 0.001})
		.set(copy3, {scale: 0.98, willChange: 'transform', rotationZ: 0.001})
		.set(copy4, {scale: 0.98, willChange: 'transform', rotationZ: 0.001})
		.set(copy5c, {x: 4, willChange: 'transform', rotationZ: 0.001})


		.set([creatureWingL1], { transformOrigin:"81px 80px"})
		.set([creatureWingL2], { transformOrigin:"47px 59px"})

		.set([creatureWingR1], { transformOrigin:"102px 73px"})
		.set([creatureWingR2], { transformOrigin:"134px 47px"})

		.set(creatureBody, {rotation: 10, transformOrigin: "90px 75px"})

		.set(creatureContainer, {x: 11 + 91 + 30, y: 103 + 40, scale: 0.25, rotation: 12})
		.set(creatureBody, {rotationX: 68, rotationY: 52, autoAlpha:0})


		.to(container, 0.15, {autoAlpha: 1})


		.add('key0', "start+=0.25")



	tlMain.call(function () {
		tlMonitor.play()
	}, [], this, 'key0')



		//debug---
		// .call(monitorTimeScale, [0.1, 11, Sine.easeIn], this, 'key0')

			//---
		.call(monitorTimeScale, [1.1, 11, Sine.easeIn], this, 'key0')
		.call(monitorTimeScale, [0.25, 0.55, Sine.easeOut], this, 'key0+=1.1')




		.add('key1', "start+=1.35")





		// .call(monitorTimeScale, [2, 1.15, Sine.easeOut], this, 'key1-=1')
		// .call(monitorTimeScale, [0.25, 0.01, Sine.easeOut], this, 'key1+=' + (1.15))
		.to(copy1, 0.25, {autoAlpha: 1, x: 0, y: 0, scale: 1, ease: Sine.easeOut}, 'key1+=0')
		.add('key1a', "key1+=" + (0.15 + 0.25 + 1.35))
		.to(copy1, 0.15, {autoAlpha: 0, ease: Sine.easeOut}, 'key1a')


		// .call(monitorTimeScale, [0.15, timeSlow1, Sine.easeOut], this, 'key1a+=' + (0))
		// .call(monitorTimeScale, [0.25, timeSlow0, Sine.easeIn], this, 'key1a+=' + (0.15))
		.to(copy2, 0.25, {autoAlpha: 1, x: 0, y: 0, scale: 1, ease: Sine.easeOut}, 'key1a+=0.2')
		// .add('key1b', "+=1.25")
		.add('key1b', "key1a+=" + (0.15 + 0.25 + 1.35))
		.to(copy2, 0.15, {autoAlpha: 0, ease: Sine.easeOut}, 'key1b')


		// .call(monitorTimeScale, [0.15, timeSlow1, Sine.easeOut], this, 'key1b+=' + (0))
		// .call(monitorTimeScale, [0.25, timeSlow0, Sine.easeIn], this, 'key1b+=' + (0.15))
		.to(copy3, 0.25, {autoAlpha: 1, x: 0, y: 0, scale: 1, ease: Sine.easeOut}, 'key1b+=0.2')
		.add('key1c', "key1b+=" + (0.15 + 0.25 + 1.35))
		.to(copy3, 0.15, {autoAlpha: 0, ease: Sine.easeOut}, 'key1c')


		// .call(monitorTimeScale, [0.15, timeSlow1, Sine.easeOut], this, 'key1c+=' + (0))
		// .call(monitorTimeScale, [0.25, timeSlow0, Sine.easeIn], this, 'key1c+=' + (0.15))
		.to(copy4, 0.25, {autoAlpha: 1, x: 0, y: 0, scale: 1, ease: Sine.easeOut}, 'key1c+=0.2')
		// .add('key1d', "+=1.65")
		.add('key1d', "key1c+=" + (0.15 + 0.25 + 1.35))

		// .call(monitorTimeScale, [0.15, 0.5, Sine.easeIn], this, 'key1d+=' + (0))
		.to(copy4, 0.15, {autoAlpha: 0, ease: Sine.easeOut}, 'key1d')
		// .add('key1e', "+=0.5")
		//----
		// .call(function () {
		// 	tlMain.timeScale(1)
		// }, [], this, 'key1d-=0.5')
		// .call(function () {
		//
		// 	// console.log('blah')
		// 	var seconds = (new Date() - startTime) / 1000 % 60;
		// 	console.log('blahseconds', seconds);
		// }, [], this, 'key1d+=' + (0.15))
		//
		//



	tlMain.call(function () {
		// tlCreature.play()
		batAnimationHandler();
	}, [], this, 'key1d-=0.15')



		.add('key1f', "+=1.5")



		.to([copy5a], 0.35, {autoAlpha: 1, x: 0, y: 0, scale: 1, ease: Sine.easeInOut}, 'key1f+=0')





	// .to(creature, 2 * 0.9, {pixi: {x: 0, y: 0, rotation: -60.8, scaleX: 0.5, scaleY: 0.5, ease: Cubic.easeOut}}, 'key1f+=0')
		// .to(creature,1 * 0.9, {pixi: {alpha: 1}, ease:Cubic.easeOut}, 'key1f+=0')
		// .to(creatureContainer0, 1 * 0.9, {pixi: {rotation: 37, y: 68.93, scaleX: 1, scaleY: 1, alpha: 0.6, ease: Cubic.easeInOut}}, 'key1f+=' + (1 * 0.9))
		// .to(creatureContainer0, 1.5 * 0.9, {pixi: {x: 81.01, ease: Quad.easeOut}}, 'key1f+=0')
		// //
		//
		// translate(102px,34px)scale(0.55) rotate(-22deg) rotateY(58deg) rotateX(53deg)
		// translate(0px,0px)scale(0.5) rotate(-60deg) rotateY(50deg)
		// translate(0px,0px)scale(0.5) rotate(-30deg) rotateY(50deg) rotateX(50deg)
		// .add('key1g', "-=0.5")
		.add('key1g', "+=0.65")
		.to([copy5b,], 0.5, {autoAlpha: 1, x: 0, y: 0, scale: 1, ease: Sine.easeInOut}, 'key1g+=0')



		.to([copy5c], 0.5, {autoAlpha: 1, x: 0, y: 0, scale: 1, ease: Expo.easeOut}, 'key1g+=0')
		.to([logoDell, logoIntel, copyDell, copyIntel], 0.5, {autoAlpha: 1, y: 0, ease: Sine.easeInOut}, 'key1g+=0')
		// .call(addHandlers, [], this, 'key5+=0')
}
var repeatCount = 1;
function completeHandler() {
    if(repeatCount < 0){
        setTimeout(function(){
            repeatCount++;
            console.log('repeating..');
            tlMain.seek(0);
            tlMain.play('start');
            tlMonitor.play('start');
        },3000);
    }else {
        var e=(new Date-startTime)/1e3%60;
        console.log(e)
    }
}
function stopPIXI() {
	stopped = true;
	tlMain.pause();
}
function addHandlers(listen) {
	var seconds = (new Date() - startTime) / 1000 % 60;
	console.log('seconds', seconds);
	// mouseEnterCta();
	// stopPIXI();
	// TweenMax.delayedCall(0.4, stopPIXI)
}

function batAnimationHandler(){
	tlCreature.pause();
	tlCreature.seek(0);
	tlCreature.play()
}