/*jshint esversion: 6 */

console.clear();
var log = console.log.bind(console);

//
// AUTO ALPHA GETTER/SETTER
// =======================================================================
Object.defineProperty(Layer.prototype, "autoAlpha", {
  get: function () { 
    return this.opacity; 
  },
  set: function (value) {            
    this.visible = !!value;
    this.opacity = value;
  },
  enumerable: true,
  configurable: true
});


// Device
Framer.Device = new Framer.DeviceComponent({
		deviceScale: "fit",
		deviceType: "google-pixel-very-silver",
		contentScale: 1
});

Framer.Device.setupContext();
Canvas.backgroundColor = "white"

// VARIABLES
// ==============================
var canvas, opacityValue;

// LAYERS
// ==============================
// Device background layer
canvas = new Layer({
	width: Screen.width,
	height: Screen.height,
	backgroundColor: 'transparent'
});

// Test layer
yolo = new Layer({
	width: Screen.width,
	height: 1000,
	backgroundColor: 'red',
	html: "<div id='test'>hahaha</div>"
});

TweenMax.to(yolo, 3, { 
  autoAlpha: 0,
  repeat: -1,
  repeatDelay: 1,
  yoyo: true
});

log("YOLO", yolo);

// testVar = yolo.querySelector("#test");

// Autoalpha (This will not work)
// TweenMax.to(yolo, 3, {autoAlpha: 0, repeat: -1});



// Can't add class to a Framer layer
// TweenMax.set(yolo, {className: "invi"});


// Framer way of adding a CSS class
// yolo.classList.add("invi")

// Autoalpha (This will work)
// TweenMax.to(yolo, 3, {x: 500, repeat: -1});

// Autoalpha (This will work)
// TweenMax.to(testVar, 3, {autoAlpha: 0, repeat: -1});