// DOM Based Actors for GreenSock Animation Platform
// https://greensock.com/forums/topic/11661-textplugin-and-superscript/?p=47595

// DOCUMENT READY
// Classes aren't hoisted, so you need to let them be evaluted first
document.addEventListener("DOMContentLoaded", () => {
	
	// STYLES	
	// You can apply these styles to other actors
	// by adding them to their style property
	var flexStyle = {
		display: "flex",
		alignItems: "center",
		justifyContent: "center",
		position: "absolute",				
		overflow: "hidden"
	};

	var textStyle = {
		color: "white",
		fontWeight: 400,
		display: "inline-block",
		textAlign: "center",
		letterSpacing: -0.2,			
		lineHeight: 1,				
		fontFamily: "Open Sans",
		textRendering: "optimizeLegibility",
		top: 0,		
	};
	
	// STAGE
	// This is where all the action takes place
	// If you don't create it, one will be created automatically
	var stage = new Stage({
		background: "black",
		padding: "25px",
		style: { overflow: "auto" }
	});
	
	// SMALL SHOP CONTAINER
	var container = new Actor()			
		.setPosition(25, 90)
		.setPercentage(0, 0)
		.set("background", "black")
		.set(flexStyle);
	
	var text = new Text({
		text: "SHOP SMALL",
		fontSize: 30,
		style: textStyle
	});

	var regMark = new Text({
		text: "®",
		element: "sup",
		fontSize: 11,
		padding: 3,
		verticalAlign: "top",
		style: textStyle
	});

	var content = new Actor()
		.set("padding", 6)
		.addTo(container)
		.addChildren(text, regMark);
	
	// PLAY BUTTON
	var button = new Button({
		text: "PLAY",			
		fontWeight: "bold",
		padding: "10px 16px",
		background: "yellowgreen",
		border: "0px solid transparent",
		onClick: onClick
	});
	
	function onClick() {

		var tl = new TimelineMax({ 
			repeat: 1, 
			repeatDelay: 0.7, 
			yoyo: true, 
			onStart: () => this.disabled = true,
			onComplete: () => this.disabled = false 
		});

		tl.to(this.target, 0.5, { opacity: 0.4 }, 0)
			.to(container.target, 1, { width: 500, height: 300, left: "50%", top: "50%" }, 0)
			.to(container.target, 1, { x: 0, y: 0, xPercent: -50, yPercent: -50 }, 0)
			.to(container.target, 1, { backgroundColor: "#555" }, 0)
			.to(text.target, 1, { text: { value: "SPEND BIG", padSpace: true } }, 0);			
	}	
});

// ========================================================================
//  ACTOR
// ========================================================================
class Actor {

	constructor(config = {}) {

		var names = "background,border,display,height,width,padding,margin,position,x,y";
		var props = Actor.concat(names, config.styleProps);

		var style = _.defaults(config.style || {}, {
			boxSizing : "border-box",
			display   : "block",
			position  : "relative",
			x: 0
		});
		
		_.defaults(config, { element: "div", type: "actor" });
		_.assign(config, { style: style, styleProps: props });
		
		this.actorId  = _.uniqueId();
		this.config   = config;
		this.timeline = new TimelineMax({ autoRemoveChildren: true });		
		
		this.create(config);		
	}

	create(config) {

		// Set the parent, which defaults to the stage if not provided
		this.parent = config.parent || Stage.instance || new Stage();

		// Create the element 
		this.type = config.type;
		this.target = document.createElement(config.element);
		this.target.id = _.kebabCase(config.id || this.type + "-" + this.actorId);

		// The stage does not have a parent actor
		if (this.parent !== document.body) this.parent.addChild(this);

		// Get style property values from config
		var style = _.pick(config, config.styleProps);

		// Create getter/setter for properties and set style
		this.createStyleProps.apply(this, config.styleProps);
		this.set(_.defaults(style, config.style));

		// GSAP transform values
		this.transform = this.target._gsTransform;

		return this;
	}	

	addChild(child) {		
		if (this.target === child.target) return this;		
		this.target.appendChild(child.target);
		child.parent = this;
		return this;
	}
	
	addChildren(...children) {
		children.forEach(child => this.addChild(child));
		return this;
	}
	
	addTo(parent) {
		parent.addChild(this);
		return this;
	}
	
	getStyleValue(name) {
		var value = window.getComputedStyle(this.target, null).getPropertyValue(name);
		return this.transform[name] || value;
	}

	createStyleProps(...names) {
		names.forEach(name => {
			Object.defineProperty(this, name, {
				get: () => this.getStyleValue(name),
				set: value => this.set({ [name]: value }),
			});
		});
		return this;
	}	

	set(vars, value) {
		if (_.isString(vars) && value) vars = { [vars]: value };
		TweenLite.set(this.target, vars);
		return this;
	}

	setPercentage(x, y) {
		this.set({ left: x + "%", top: y + "%", xPercent: -x, yPercent: -y });
		return this;
	}
	
	setPosition(x, y) {		
		this.set({ x, y });
		return this;
	}

	setSize(width, height) {
		this.set({ width, height });
		return this;
	}
	
	to(duration, vars, label) {
		this.timeline.to(this.target, duration, vars, label);
		return this;
	}

	// Splits 2 strings up and concatenates them into an array
	static concat(prop1 = [], prop2 = []) {
		if (_.isString(prop1)) prop1 = prop1.split(",");
		if (_.isString(prop2)) prop2 = prop2.split(",");
		return prop1.concat(prop2);
	}
}

// ========================================================================
//  STAGE
// ========================================================================
class Stage extends Actor {

	constructor(config = {}) {

		// Only allow one stage to be created
		if (Stage.instance) return Stage.instance;

		_.defaults(config, {
			height  : "100vh",
			width   : "100vw",			
			element : "main",
			id      : "stage",
			type    : "stage"
		});
		
		_.assign(config, { parent: document.body });
		
		super(config);
    
    // Set static stage property
		Stage.instance = this;

		// Make the stage the first element
		document.body.insertBefore(this.target, document.body.firstChild);
	}
}

// ========================================================================
//  TEXT
// ========================================================================
class Text extends Actor {

	constructor(config = {}) {

		var names = "color,fontSize,fontWeight,fontFamily,textAlign,verticalAlign";
		var props = Text.concat(names, config.styleProps);

		_.defaults(config, { type: "text" });
		_.assign(config, { styleProps: props });
		
		super(config);
	}

	create(config) {
		super.create(config);

		// Set text value
		this.text = config.text;
	}

	get text() { return this.target.textContent; }
	set text(text) { this.set({	text });
	}
}

// ========================================================================
//  BUTTON
// ========================================================================
class Button extends Text {

	constructor(config = {}) {

		_.defaults(config, {
			element  : "button",
			disabled : false,
			text     : "",
			type     : "button",
			display  : "inline-block",
		});

		super(config);
	}

	create(config) {
		super.create(config);

		// Set disabled attribute
		this.disabled = config.disabled;

		// Setup click event
		this.target.addEventListener("click", event => {

			var callback = config.onClick;
			var scope    = config.onClickScope  || this;
			var params   = config.onClickParams || [event];

			if (_.isFunction(callback)) callback.apply(scope, params);
		});
	}

	get disabled() { return this.target.hasAttribute("disabled"); }
	set disabled(flag) { flag
		? this.target.setAttribute("disabled", "") 
		: this.target.removeAttribute("disabled");
	}
}