TweenLite.set(".rule-box", { x: 525, y: 75 });
TweenLite.set(".element",  { x: 400, y: 75 });
TweenLite.set(".target",   { x: 15,  y: 15 });

var cssStyle = CSSExtender();

var element1 = $("#element-1"),
    element2 = $("#element-2"),
    element3 = $("#element-3"),
    element4 = $("#element-4"),
    element6 = $("#element-6");

var target1 = $("#target-1"),
    target2 = $("#target-2"),
    target3 = $("#target-3"),
    target4 = $("#target-4"),
    target5 = $("#target-5"),
    target6 = $("#target-6");

// Extend styles
var style1 = cssStyle.extend({
  target: target1,
  styles: element1
});

var style2 = cssStyle.extend({
  target: target2,
  styles: element2,
  filter: "-=backgroundColor,height"
});

var style3 = cssStyle.extend({
  target: target3,
  styles: element3,
  filter: "+=backgroundColor,height"
});

var style4 = cssStyle.extend({
  target: target4,
  styles: element4
});

var style5 = cssStyle.extend({
  styles: ".rule-1"
});

var style6 = cssStyle.extend({
  target: target6,
  styles: [element6, ".rule-1", ".rule-2"],
  filter: "-=x,y,rotation"
});

// Add a paused property to extended styles
var tween1 = TweenLite.to(target1, 1, _.assign(style1, { paused: true }));
var tween2 = TweenLite.to(target2, 1, _.assign(style2, { paused: true }));
var tween3 = TweenLite.to(target3, 1, _.assign(style3, { paused: true }));
var tween5 = TweenLite.to(target5, 1, _.assign(style5, { paused: true }));
var tween6 = TweenLite.to(target6, 1, _.assign(style6, { paused: true }));
var tween4 = TweenLite.to(target4, 1, _.assign(style4, {
  backgroundColor: "#2e8b57",
  rotation: -90,
  paused: true
}));

$("#tween-1").click(() => tween1.restart());
$("#tween-2").click(() => tween2.restart());
$("#tween-3").click(() => tween3.restart());
$("#tween-4").click(() => tween4.restart());
$("#tween-5").click(() => tween5.restart());
$("#tween-6").click(() => tween6.restart());

// Make content visible
TweenLite.set($("section"), { autoAlpha: 1 });


// ========================================================================
//  CSS EXTENDER
// ========================================================================
function CSSExtender() {

  var camelNames  = {};
  var kebabNames  = {};
  var prefixNames = ["-webkit-", "-moz-", "-ms-"];
  var removeNames = ["transform", "svg"]; 

  createCaseNames();

  return {
    extend: extend
  };

  // Basic functionality to extend CSS styles. Ignores vendor
  // prefixes, shorthand properties, and most transforms
  function extend(config) {

    var style     = {};
    var sources   = _.isArray(config.styles) ? config.styles : [config.styles];
    var target    = getElement(config.target);
    var listNames = getListNames(config.filter);
    var blackList = listNames.blackList;
    var whiteList = listNames.whiteList;

    _.forEach(sources, source => {

      var element = getElement(source);

      element && !whiteList
        ? _.assign(style, getDifference(target, element))
      	: _.assign(style, getStyle(element || source, whiteList));
    });

    return _.omit(style, blackList);
  }

  // Gets the style of a rule or element and filters the result
  // if a whiteList of names is provided
  function getStyle(source, whiteList) {

    var css, style = {};

    if (_.isElement(source)) css = window.getComputedStyle(source);
    if (_.isString(source))  css = CSSRulePlugin.getRule(source);
    if (!(css instanceof CSSStyleDeclaration)) return {};

    var length = whiteList ? whiteList.length : css.length;

    _.times(length, i => {
      var kebab = whiteList ? kebabNames[whiteList[i]] : css[i];
      var camel = camelNames[kebab];
      var value = css.getPropertyValue(kebab);
      if (camel && value) style[camel] = value;
    });

    return style;
  }

  // Converts the filter string into white and black listed names
  function getListNames(filter = "=") {

    var list  = filter.split("="); 
    var names = list[1].split(",");

    return {
      whiteList: list[0] === "+" ? names : null,
      blackList: list[0] === "-" ? names.concat(removeNames) : removeNames
    };
  }

  // Gets the different styles between two elements
  function getDifference(element1, element2) {

    if (!_.isElement(element1) || !_.isElement(element2)) return {};

    TweenLite.set([element1, element2], { y: "+=0" });

    var style  = {};
    var style1 = window.getComputedStyle(element1);
    var style2 = window.getComputedStyle(element2);

    var transform1 = element1._gsTransform;
    var transform2 = element2._gsTransform;

    // Find difference in GSAP transforms
    var transforms = _.omit(transform2, (value, name) => transform1[name] === value);

    // Find difference in CSS values
    _.forOwn(camelNames, (camelCase, name) => {
      var value1 = style1.getPropertyValue(name);
      var value2 = style2.getPropertyValue(name);
      if (value1 !== value2) style[camelCase] = value2;
    });

    return _.assign(style, transforms);
  }

  // Creates a list of CSS properties in camel and kebab case
  function createCaseNames() {

    var style = window.getComputedStyle(document.body);

    _.times(style.length, i => {
      var name = style[i];
      var inList = _.some(prefixNames, prefix => _.includes(name, prefix));
      if (!inList) camelNames[name] = _.camelCase(name);
    });

    kebabNames = _.invert(camelNames);
  }

  function getElement(value) {
    if (!value) return undefined;
    if (_.isElement(value)) return value;
    if (value.jquery) return value[0];
    return undefined;
  }
}