/* src/Workbench.html generated by Svelte v2.16.1 */
var Workbench = (function() { "use strict";

	var copyFrom = function (textarea) {
  textarea.select();

  try {
    var successful = document.execCommand('copy');
    console.log('Copied!');
  } catch (err) {
    console.log(textarea.value);
    return console.error('Oops, unable to copy', err);
  }
};

function autoscaleValue(ref) {
		var autoscale = ref.autoscale;

		return autoscale ? 'on' : 'off';
	}

	function embedCode(ref) {
		var loadedCompositionId = ref.loadedCompositionId;
		var width = ref.width;
		var height = ref.height;
		var autoscaleValue = ref.autoscaleValue;
		var adaptive = ref.adaptive;

		return loadedCompositionId &&
  ("<script>\n    window.widgeticOptions = {\n      domain: 'local.widgetic.com:8082',\n      secure: false,\n    }\n  </script >\n  <script async src=\"http://local.widgetic.com:8082/modules/@widgetic/sdk/lib/sdk.dev.js\"></script >\n  <a href=\"#\" class=\"widgetic-composition\" data-autoscale=\"" + autoscaleValue + "\" data-adaptive=\"" + adaptive + "\" data-id=\"" + loadedCompositionId + "\" data-width=\"" + width + "\" data-height=\"" + height + "\" data-brand=\"bottom-right\">");
	}

	function data() {
  return {
    // composition settings vars
    width: 540,
    height: 568,
    autoscale: false,
    adaptive: 414,
    widget: {name: ''}
  };
};

	function drag_1(node, callback) {
  var self = this;
  function onmousedown(event) {
    self.set({ dragging: true });
    var rect = node.getBoundingClientRect();
    var offsetX = event.offsetX;
    var offsetY = event.offsetY;

    function drop() {
      self.set({ dragging: false });
      document.body.removeEventListener('mouseup', drop, false);
      document.body.removeEventListener('mousemove', drag, false);
    }

    function drag(event) {
      callback({
        x: event.clientX - offsetX - rect.left,
        y: event.clientY - offsetY - rect.top,
      });
    }

    document.body.addEventListener('mouseup', drop, false);
    document.body.addEventListener('mousemove', drag, false);
  }

  node.addEventListener('mousedown', onmousedown, false);

  return {
    teardown: function teardown() {
      node.removeEventListener('mousedown', onmousedown, false);
    },
  };
};

	var methods = {
  showWidgetForCompId: function showWidgetForCompId(compId) {
    var this$1 = this;

    // get composition's settings from local storage
    var compositionOptions = this.currentWorkbenchStorage()[compId];
    // console.log("on show WidgetForCompId composition options:", compositionOptions);

    // set the new settings in the worbench
    this.set({width: compositionOptions.width, height: compositionOptions.height, autoscale: compositionOptions.autoscale, adaptive: compositionOptions.adaptive});

    // create new UI COMPOSITION
    // close current UI composition from the workbench
    var prevComp = this.get().composition; // console.log("on show Widget update prev comp:", prevComp);
    prevComp && prevComp.close();
    // create new UI composition for the composition options
    compositionOptions.autoscale = compositionOptions.autoscale ? 'on' : 'off';
    var newComp = Widgetic.UI.composition(this.refs.widgetArea, compId, compositionOptions);
    this.set({ composition: newComp});
    // console.log("on show WidgetForCompId update new UI comp:", this.get().composition);      

    // create EDITOR
    // close current editor
    var editor = this.get().editor;
    editor && editor.close();

    // create new editor for the new UI composition
    editor = Widgetic.UI.editor(this.refs.editorArea, newComp);// console.log("Editor created for composition:", editor);
    editor.on('composition:save', function (comp) { return this$1.loadComposition(comp); });
    this.set({ editor: editor });

    // save the composition's settings to local storage
    this.saveCurrCompSettingsToLS(compId);  
  },

  currentWorkbenchStorage: function currentWorkbenchStorage() {
    return localStorage && localStorage.wkbncSettings ? JSON.parse(localStorage.wkbncSettings) : {};
  },

  createNewComposition: function createNewComposition(){
    var this$1 = this;

    var currWidget = this.get().widget;
    var compositionData = {
      name: "Workbench composition",
      widget_id: currWidget.id,
      skin_id: currWidget.skins[0].id,
      content: currWidget.content[0].content
    };
    // console.log("create composition in the database with this info:", compositionData);

    // make api call to create an actual composition and then load it in the workench
    Widgetic.api('compositions', 'POST', JSON.stringify(compositionData))
    .then(function (comp) { return this$1.loadComposition(comp); });
  },

  loadComposition: function loadComposition(savedComposition) {
    // console.log("published composition:", this.get().loadedCompositionId, savedComposition.id);
    
    // save this compostion's settings in localStorage
    this.saveCurrCompSettingsToLS(savedComposition.id);

    // refresh list of published compositions
    this.updatePublishedCompsList();

    // set the loadedCompositionId to show the widget
    this.set({ loadedCompositionId: savedComposition.id });
  },    

  saveCurrCompSettingsToLS: function saveCurrCompSettingsToLS(compId) {
    // read current composition settings from current state
    var ref = this.get();
    var width = ref.width;
    var height = ref.height;
    var autoscale = ref.autoscale;
    var adaptive = ref.adaptive;
    var loadedCompositionId = ref.loadedCompositionId;
    if(!compId) { compId = loadedCompositionId; }
    // console.log("save Curr CompSettingsToLS for id:", compId, width, height, autoscale, adaptive, widget);

    // read workbenchSettings object from localStorage
    var currentWorkbenchStorage = this.currentWorkbenchStorage();

    // save lastCompositionId to workbenchSettings
    currentWorkbenchStorage.lastCompositionId = compId;

    // save composition settings to workbenchSettings
    currentWorkbenchStorage[compId] = {
      id: compId, 
      widget_id: 'widget', 
      edit_mode: false, 
      width: width, height: height, 
      autoscale: autoscale, adaptive: adaptive
    };
    // console.log("localStorage after persist:", currentWorkbenchStorage);

    // update workbenchSettings in localStorage
    localStorage.wkbncSettings = JSON.stringify(currentWorkbenchStorage);
    // console.log("localStorage after persist:", localStorage);
  },    

  updatePublishedCompsList: function updatePublishedCompsList() {
    // read the list of compositions from localStorage
    var compostionList = [];
    var currentLocalStrage = this.currentWorkbenchStorage();
    // console.log("local Storage refresh Compositions:", currentLocalStrage);
    Object.keys(currentLocalStrage).map(function (key) { return key.includes('workbench_') ? compostionList.push(currentLocalStrage[key]) : null; });
    // console.log("local Storage refresh Compositions:", compostionList);
    
    // set them in the dropdown
    this.set({ compositions: compostionList })

    /* read list of composition for workbench's user(bogus)
    Widgetic.api('compositions').then(data => {
      console.log("Api refresh Compositions:", data);
      this.set({ compositions: data })
    });*/
  },

  copyEmbedCode: function copyEmbedCode(event) {
    event.preventDefault();
    // console.log("copyEmbedCode:", this.refs.embedCodeOutput.value)
    copyFrom(this.refs.embedCodeOutput);
  },

  copyPreset: function copyPreset(event) {
    event.preventDefault();

    var preset = JSON.parse(
      JSON.stringify(
        this.get().editor
          ._iframe.contentWindow.require('core/models/composition')
          .first()
          .getSkin()
      )
    );
    delete preset.uses;
    delete preset.metas;
    delete preset.widget_id;
    delete preset.user_id;

    this.set({
      preset: JSON.stringify(
        Object.assign({ id: preset.id }, preset),
        null,
        '\t'
      ),
    });

    copyFrom(this.refs.presetOutput);
  },

  resetWorkbench: function resetWorkbench() {
    this.disposeUnload();
    localStorage.clear();
    window.location.reload();
  },

  openStandalone: function openStandalone() {
    window.open(this.get().composition._iframe.src);
  },

  openURL: function openURL(url) {
    window.open(url);
  }
};

	function oncreate() {
  var this$1 = this;

  // console.log("Workbench oncreate compId:", this.get().loadedCompositionId);

  // init Widgetic SDK
  Widgetic.init('bogus', 'bogus');
  Widgetic.auth.token('bogus');

  // persist settings when reset the workbench
  window.addEventListener('unload', this.saveCurrCompSettingsToLS);
  this.disposeUnload = function (_) { return window.removeEventListener('unload', this$1.saveCurrCompSettingsToLS); };

  // refresh list of published compositions
  // console.log("Workbench onCreate localStorage:", localStorage);
  this.updatePublishedCompsList();    

  // read lastCompositionId from localStorage
  // console.log("Workbench onCreate localStorage:", localStorage);
  var currentWorkbenchStorage = this.currentWorkbenchStorage();
  // console.log("Workbench onCreate workbenchStorage:", currentWorkbenchStorage);
  var currCompId = currentWorkbenchStorage.lastCompositionId;
  // console.log("Workbench onCreate lastCompositionId from localStorage:", currCompId);

  // load widget data
  Widgetic.api('widgets/widget').then(function (data) {
    // console.log("Load widget data:", data);

    // set widget data
    this$1.set({ widget: data })

    // console.log("Workbench start comp id:", currCompId);

    // check if it's a new compostion to save a real one in the database first
    if(!currCompId) { this$1.createNewComposition(); }
    // set the loadedCompositionId to load the composition in the workbench
    else { this$1.set({ loadedCompositionId: currCompId }); }
  });
};

	function onstate(ref) {
  var changed = ref.changed;
  var current = ref.current;
  var previous = ref.previous;

  // this fires before oncreate, and on every state change.
  // the first time it runs, `previous` is undefined

  // console.log("onstate:", previous ? previous.autoscale : false, current.autoscale);
  // let prevAutoscaleValue = previous ? previous.autoscaleValue : 'off';
  // console.log("onstate autoscaleValue:", changed.autoscaleValue, prevAutoscaleValue, current.autoscaleValue);

  // when autoscaleValue changes to true, reload the current composition
  if(changed.autoscale) {
    var prevAutoscale = previous ? previous.autoscale : false;
    // console.log("onstate autoscale:", prevAutoscale, current.autoscale, this.get().autoscale);

    if(current.loadedCompositionId) {
      // save the new autoscale value for current compostion in the localStorage
      this.saveCurrCompSettingsToLS(current.loadedCompositionId);      
      
      // reload UI composition with settings from local storage
      this.showWidgetForCompId(current.loadedCompositionId);
    }
  }

  // when loadedCompositionId changes
  if(changed.loadedCompositionId && previous) {
    // check prevLoadedCompositionId
    var previousCompId = previous ? previous.loadedCompositionId : undefined;
    // console.log("on loadedCompositionId update:", previousCompId, current.loadedCompositionId);

    // load UI composition in the workbench with settings from local storage
    this.showWidgetForCompId(current.loadedCompositionId);
  }
};

	function add_css() {
		var style = createElement("style");
		style.id = 'svelte-obotd0-style';
		style.textContent = "textarea.svelte-obotd0{position:absolute;top:0;left:0;width:0;height:0;opacity:0}.workbench.svelte-obotd0{height:100%;background-color:#ecefef}.dragging.svelte-obotd0{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:move}.dragging.svelte-obotd0 .resize-corner.svelte-obotd0{cursor:move}.workbench-controls.svelte-obotd0{display:flex;justify-content:space-between;align-items:center;list-style:none;padding:5px;background-color:#080708;box-shadow:0 1px 2px 0 rgba(0,0,0,0.1),0 0 3px 0 rgba(0,0,0,0.1)}.workbench-controls.svelte-obotd0 div.svelte-obotd0{height:44px;display:flex;align-items:center;white-space:nowrap}.size-controls.svelte-obotd0{display:flex}.size-controls.svelte-obotd0 li.svelte-obotd0{display:flex;justify-content:space-between;align-items:center;width:102px;margin-right:5px;padding:13px;border-radius:1px;border:solid 1px #d9e0de;background-color:#fafbfa}.size-controls.svelte-obotd0 .refresh.svelte-obotd0{width:122px;height:20px}.size-controls.svelte-obotd0 input[type=\"number\"].svelte-obotd0{width:38px;margin-left:auto;margin-right:5px;border:none;text-align:right}.size-controls.svelte-obotd0 input.svelte-obotd0:focus{outline:none}input.svelte-obotd0::-webkit-outer-spin-button,input.svelte-obotd0::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.window-controls.svelte-obotd0{display:flex}.window-controls.svelte-obotd0 li.svelte-obotd0{margin-left:5px}.workbench-controls_control--disabled.svelte-obotd0{text-decoration:line-through}.workbench-area.svelte-obotd0{position:relative;margin:25px;text-align:left}.widget-area.svelte-obotd0{position:relative;display:flex;justify-content:center;align-items:center}.resize-corner.svelte-obotd0{position:absolute !important;right:-30px;bottom:-30px;width:30px;height:30px;cursor:hand;cursor:-webkit-grab;cursor:grab;user-select:none;background-color:#FFFFFF;border-radius:50%}.editor-area.svelte-obotd0{position:absolute;top:0;right:0}.compositions-holder.svelte-obotd0{display:flex;position:absolute;left:10px;bottom:10px}.new-comp-button.svelte-obotd0{font-size:23px;line-height:23px;padding:5px;cursor:pointer}.new-comp-button.svelte-obotd0:focus{outline:0}.new-comp-button.svelte-obotd0,.composition-selector-holder.svelte-obotd0{padding:12px;cursor:pointer;border-radius:1px;border:solid 1px #d9e0de;background-color:#fafbfa}.composition-selector-holder.svelte-obotd0{display:flex;margin-left:15px}.composition-selector.svelte-obotd0{background-color:transparent;border:none;cursor:pointer}.composition-selector.svelte-obotd0:focus{outline:0}.docs-bt-holder.svelte-obotd0{position:absolute;right:10px;bottom:10px;background-color:#fafbfa}.size-controls.svelte-obotd0,button.svelte-obotd0,select.svelte-obotd0,label.svelte-obotd0,input.svelte-obotd0{color:#666c6a;font-family:\"GTWalsheimPro\";font-size:16px;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal}button.svelte-obotd0,input.svelte-obotd0,select.svelte-obotd0{color:#000a06}.autoscale-toggle.svelte-obotd0{color:#000a06;text-transform:uppercase;cursor:pointer;user-select:none}.button-icon.svelte-obotd0{width:44px;height:44px;padding:0;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;fill:#ecefef;stroke:#ecefef;cursor:pointer}.button-icon.svelte-obotd0:focus{outline:none}.button-icon.svelte-obotd0>svg.svelte-obotd0{width:24px;height:24px}.refresh-bt-icon.svelte-obotd0{width:36px !important;height:24px !important}.help-bt-icon.svelte-obotd0{fill:#080708}.resize-bt-icon.svelte-obotd0{width:13px;height:13px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);fill:#666c6a;pointer-events:none}.widgetic-logo.svelte-obotd0{width:54px;height:25px;margin-left:10px;margin-right:15px;cursor:pointer}";
		append(document.head, style);
	}

	function get_each_context(ctx, list, i) {
		var child_ctx = Object.create(ctx);
		child_ctx.composition = list[i];
		child_ctx.i = i;
		return child_ctx;
	}

	function create_main_fragment(component, ctx) {
		var div9, svg0, symbol, path, path_1, path_2, symbol_1, path_3, symbol_2, path_4, path_5, symbol_3, path_6, symbol_4, path_7, symbol_5, path_8, text0, div2, div0, svg1, use, text1, li0, label0, input0, input0_updating = false, label1, text4, li1, label2, input1, input1_updating = false, label3, text7, li2, label4, input2, input2_updating = false, label5, text10, li3, label6, label7, text12, text13, div1, li4, button0, text14, li5, textarea, textarea_updating = false, text15, button1, text16, li6, button2, text17, div6, div3, text18, div5, div4, drag_handler, text19, div8, button3, text21, div7, select, select_updating = false, text22, button4, div9_class_value;

		function click_handler(event) {
			component.openURL('http://app.widgetic.com');
		}

		function input0_input_handler() {
			input0_updating = true;
			component.set({ width: toNumber(input0.value) });
			input0_updating = false;
		}

		function input1_input_handler() {
			input1_updating = true;
			component.set({ height: toNumber(input1.value) });
			input1_updating = false;
		}

		function input2_input_handler() {
			input2_updating = true;
			component.set({ adaptive: toNumber(input2.value) });
			input2_updating = false;
		}

		function click_handler_1(event) {
			component.set({autoscale: !ctx.autoscale});
		}

		function click_handler_2(event) {
			component.resetWorkbench();
		}

		function textarea_input_handler() {
			textarea_updating = true;
			component.set({ embedCode: textarea.value });
			textarea_updating = false;
		}

		function click_handler_3(event) {
			component.copyEmbedCode(event);
		}

		function click_handler_4(event) {
			component.openStandalone();
		}

		function mousedown_handler(event) {
			component.set({startWidth: ctx.width, startHeight: ctx.height});
		}

		function click_handler_5(event) {
			component.createNewComposition();
		}

		var if_block = (ctx.compositions && ctx.compositions.length) && create_if_block(component, ctx);

		function select_change_handler() {
			select_updating = true;
			component.set({ loadedCompositionId: selectValue(select) });
			select_updating = false;
		}

		function click_handler_6(event) {
			component.openURL('/docs');
		}

		return {
			c: function c() {
				div9 = createElement("div");
				svg0 = createSvgElement("svg");
				symbol = createSvgElement("symbol");
				path = createSvgElement("path");
				path_1 = createSvgElement("path");
				path_2 = createSvgElement("path");
				symbol_1 = createSvgElement("symbol");
				path_3 = createSvgElement("path");
				symbol_2 = createSvgElement("symbol");
				path_4 = createSvgElement("path");
				path_5 = createSvgElement("path");
				symbol_3 = createSvgElement("symbol");
				path_6 = createSvgElement("path");
				symbol_4 = createSvgElement("symbol");
				path_7 = createSvgElement("path");
				symbol_5 = createSvgElement("symbol");
				path_8 = createSvgElement("path");
				text0 = createText("\n\n  ");
				div2 = createElement("div");
				div0 = createElement("div");
				svg1 = createSvgElement("svg");
				use = createSvgElement("use");
				text1 = createText("\n      ");
				li0 = createElement("li");
				label0 = createElement("label");
				label0.textContent = "Width:";
				input0 = createElement("input");
				label1 = createElement("label");
				label1.textContent = "px";
				text4 = createText("\n      ");
				li1 = createElement("li");
				label2 = createElement("label");
				label2.textContent = "Height:";
				input1 = createElement("input");
				label3 = createElement("label");
				label3.textContent = "px";
				text7 = createText("\n      ");
				li2 = createElement("li");
				label4 = createElement("label");
				label4.textContent = "Adaptive:";
				input2 = createElement("input");
				label5 = createElement("label");
				label5.textContent = "px";
				text10 = createText("\n      ");
				li3 = createElement("li");
				label6 = createElement("label");
				label6.textContent = "Autoscale:";
				label7 = createElement("label");
				text12 = createText(ctx.autoscaleValue);
				text13 = createText("\n\n    \n\n    ");
				div1 = createElement("div");
				li4 = createElement("li");
				button0 = createElement("button");
				button0.innerHTML = "<svg class=\"refresh-bt-icon svelte-obotd0\"><use xlink:href=\"#icon-refresh\"></use></svg>";
				text14 = createText("\n      \n      ");
				li5 = createElement("li");
				textarea = createElement("textarea");
				text15 = createText("\n      ");
				button1 = createElement("button");
				button1.innerHTML = "<svg width=\"23\" height=\"23\" class=\"svelte-obotd0\"><use xlink:href=\"#icon-copy\"></use></svg>";
				text16 = createText("\n      ");
				li6 = createElement("li");
				button2 = createElement("button");
				button2.innerHTML = "<svg class=\"svelte-obotd0\"><use xlink:href=\"#icon-open-window\"></use></svg>";
				text17 = createText("\n\n  ");
				div6 = createElement("div");
				div3 = createElement("div");
				text18 = createText("\n    ");
				div5 = createElement("div");
				div4 = createElement("div");
				div4.innerHTML = "<svg class=\"resize-bt-icon svelte-obotd0\"><use xlink:href=\"#icon-resize\"></use></svg>";
				text19 = createText("\n\n  ");
				div8 = createElement("div");
				button3 = createElement("button");
				button3.textContent = " + ";
				text21 = createText("\n      ");
				div7 = createElement("div");
				select = createElement("select");
				if (if_block) { if_block.c(); }
				text22 = createText("\n\n  ");
				button4 = createElement("button");
				button4.innerHTML = "<svg class=\"help-bt-icon svelte-obotd0\"><use xlink:href=\"#icon-help\"></use></svg>";
				setAttribute(path, "d", "M45 0L34.688 0 43.453 12.5 34.688 25 45 25 53.75 12.5z");
				setAttribute(path_1, "d", "M27.813 0L17.5 0 26.266 12.5 17.5 25 27.813 25 36.563 12.5z");
				setAttribute(path_2, "d", "M22.656 17.634L27.813 25H17.5l5.156-7.366zM10.313 0l8.757 12.51-5.16 7.36L0 0h10.313z");
				setAttribute(symbol, "id", "widgetic-logo-svg");
				setAttribute(symbol, "viewBox", "0 0 54 25");
				setAttribute(symbol, "fill", "#00E294");
				setAttribute(path_3, "stroke", "none");
				setAttribute(path_3, "d", "M17,0 L19,0 C25.325,0 30.846,5.522 31,12 L37,12 L29,20 L22,12 L28,12 C27.77,7.217 23.63,3.077 19,3 L17,3 L17,0 Z M15,12 L9,12 C9.23,16.783 13.37,20.923 18,21 L20,21 L20,24 L18,24 C11.675,24 6.154,18.478 6,12 L0,12 L8,4 L15,12 Z");
				setAttribute(symbol_1, "id", "icon-refresh");
				setAttribute(symbol_1, "viewBox", "0 0 37 24");
				setAttribute(path_4, "fill", "none");
				setAttribute(path_4, "stroke-width", "2");
				setAttribute(path_4, "d", "M6.5.5h14v14h-14z");
				setAttribute(path_5, "fill", "none");
				setAttribute(path_5, "stroke-width", "2");
				setAttribute(path_5, "d", "M.5 6.5h14v14H.5z");
				setAttribute(symbol_2, "id", "icon-copy");
				setAttribute(symbol_2, "viewBox", "0 0 23 23");
				setAttribute(path_6, "stroke", "none");
				setAttribute(path_6, "d", "M29.44 13.434L22 21l3 3 7.514-7.476L35 19v-8h-8l2.44 2.434zM11 14v21h21V23h-3v9H14V17h9v-3H11z");
				setAttribute(path_6, "transform", "translate(-11 -11)");
				setAttribute(symbol_3, "id", "icon-open-window");
				setAttribute(symbol_3, "viewBox", "0 0 24 24");
				setAttribute(path_7, "d", "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z");
				setAttribute(symbol_4, "id", "icon-help");
				setAttribute(symbol_4, "viewBox", "0 0 512 512");
				setAttribute(path_8, "d", "M2.737 4.105l6.158 6.158-2.053 2.053L13 13l-.684-6.158-2.053 2.053-6.158-6.158L6.158.684 0 0l.684 6.158z");
				setAttribute(symbol_5, "id", "icon-resize");
				setAttribute(symbol_5, "viewBox", "0 0 13 13");
				setAttribute(svg0, "xmlns", "http://www.w3.org/2000/svg");
				setStyle(svg0, "display", "none");
				setAttribute(svg0, "class", "svelte-obotd0");
				setXlinkAttribute(use, "xlink:href", "#widgetic-logo-svg");
				addListener(svg1, "click", click_handler);
				setAttribute(svg1, "class", "widgetic-logo svelte-obotd0");
				label0.className = "svelte-obotd0";
				addListener(input0, "input", input0_input_handler);
				setAttribute(input0, "type", "number");
				input0.className = "svelte-obotd0";
				label1.className = "svelte-obotd0";
				li0.className = "svelte-obotd0";
				label2.className = "svelte-obotd0";
				addListener(input1, "input", input1_input_handler);
				setAttribute(input1, "type", "number");
				input1.className = "svelte-obotd0";
				label3.className = "svelte-obotd0";
				li1.className = "svelte-obotd0";
				label4.className = "svelte-obotd0";
				addListener(input2, "input", input2_input_handler);
				setAttribute(input2, "type", "number");
				input2.className = "svelte-obotd0";
				label5.className = "svelte-obotd0";
				li2.className = "refresh svelte-obotd0";
				label6.className = "svelte-obotd0";
				addListener(label7, "click", click_handler_1);
				label7.className = "autoscale-toggle svelte-obotd0";
				li3.className = "refresh svelte-obotd0";
				div0.className = "size-controls svelte-obotd0";
				addListener(button0, "click", click_handler_2);
				button0.className = "button-icon svelte-obotd0";
				li4.className = "svelte-obotd0";
				addListener(textarea, "input", textarea_input_handler);
				setStyle(textarea, "display", "none");
				textarea.className = "svelte-obotd0";
				addListener(button1, "click", click_handler_3);
				button1.className = "button-icon svelte-obotd0";
				li5.className = "svelte-obotd0";
				addListener(button2, "click", click_handler_4);
				button2.className = "button-icon svelte-obotd0";
				li6.className = "svelte-obotd0";
				div1.className = "window-controls svelte-obotd0";
				div2.className = "workbench-controls svelte-obotd0";
				div3.className = "editor-area svelte-obotd0";
				addListener(div4, "mousedown", mousedown_handler);

				drag_handler = drag_1.call(component, div4, function(event) {
					component.set({width: ctx.startWidth + event.x, height: ctx.startHeight + event.y});
				});

				div4.className = "resize-corner svelte-obotd0";
				div5.className = "widget-area svelte-obotd0";
				setStyle(div5, "width", "" + ctx.width + "px");
				setStyle(div5, "height", "" + ctx.height + "px");
				div6.className = "workbench-area svelte-obotd0";
				addListener(button3, "click", click_handler_5);
				button3.className = "new-comp-button svelte-obotd0";
				addListener(select, "change", select_change_handler);
				if (!('loadedCompositionId' in ctx)) { component.root._beforecreate.push(select_change_handler); }
				select.className = "composition-selector svelte-obotd0";
				div7.className = "composition-selector-holder svelte-obotd0";
				div8.className = "compositions-holder svelte-obotd0";
				addListener(button4, "click", click_handler_6);
				button4.className = "docs-bt-holder button-icon svelte-obotd0";
				div9.className = div9_class_value = "workbench " + (ctx.dragging ? 'dragging' : '') + " svelte-obotd0";
			},

			m: function m(target, anchor) {
				insert(target, div9, anchor);
				append(div9, svg0);
				append(svg0, symbol);
				append(symbol, path);
				append(symbol, path_1);
				append(symbol, path_2);
				append(svg0, symbol_1);
				append(symbol_1, path_3);
				append(svg0, symbol_2);
				append(symbol_2, path_4);
				append(symbol_2, path_5);
				append(svg0, symbol_3);
				append(symbol_3, path_6);
				append(svg0, symbol_4);
				append(symbol_4, path_7);
				append(svg0, symbol_5);
				append(symbol_5, path_8);
				append(div9, text0);
				append(div9, div2);
				append(div2, div0);
				append(div0, svg1);
				append(svg1, use);
				append(div0, text1);
				append(div0, li0);
				append(li0, label0);
				append(li0, input0);

				input0.value = ctx.width;

				append(li0, label1);
				append(div0, text4);
				append(div0, li1);
				append(li1, label2);
				append(li1, input1);

				input1.value = ctx.height;

				append(li1, label3);
				append(div0, text7);
				append(div0, li2);
				append(li2, label4);
				append(li2, input2);

				input2.value = ctx.adaptive;

				append(li2, label5);
				append(div0, text10);
				append(div0, li3);
				append(li3, label6);
				append(li3, label7);
				append(label7, text12);
				append(div2, text13);
				append(div2, div1);
				append(div1, li4);
				append(li4, button0);
				append(div1, text14);
				append(div1, li5);
				append(li5, textarea);
				component.refs.embedCodeOutput = textarea;

				textarea.value = ctx.embedCode;

				append(li5, text15);
				append(li5, button1);
				append(div1, text16);
				append(div1, li6);
				append(li6, button2);
				append(div9, text17);
				append(div9, div6);
				append(div6, div3);
				component.refs.editorArea = div3;
				append(div6, text18);
				append(div6, div5);
				append(div5, div4);
				component.refs.widgetArea = div5;
				append(div9, text19);
				append(div9, div8);
				append(div8, button3);
				append(div8, text21);
				append(div8, div7);
				append(div7, select);
				if (if_block) { if_block.m(select, null); }

				selectOption(select, ctx.loadedCompositionId)

				append(div9, text22);
				append(div9, button4);
			},

			p: function p(changed, _ctx) {
				ctx = _ctx;
				if (!input0_updating && changed.width) { input0.value = ctx.width; }
				if (!input1_updating && changed.height) { input1.value = ctx.height; }
				if (!input2_updating && changed.adaptive) { input2.value = ctx.adaptive; }
				if (changed.autoscaleValue) {
					setData(text12, ctx.autoscaleValue);
				}

				if (!textarea_updating && changed.embedCode) { textarea.value = ctx.embedCode; }
				if (changed.width) {
					setStyle(div5, "width", "" + ctx.width + "px");
				}

				if (changed.height) {
					setStyle(div5, "height", "" + ctx.height + "px");
				}

				if (ctx.compositions && ctx.compositions.length) {
					if (if_block) {
						if_block.p(changed, ctx);
					} else {
						if_block = create_if_block(component, ctx);
						if_block.c();
						if_block.m(select, null);
					}
				} else if (if_block) {
					if_block.d(1);
					if_block = null;
				}

				if (!select_updating && changed.loadedCompositionId) { selectOption(select, ctx.loadedCompositionId) }
				if ((changed.dragging) && div9_class_value !== (div9_class_value = "workbench " + (ctx.dragging ? 'dragging' : '') + " svelte-obotd0")) {
					div9.className = div9_class_value;
				}
			},

			d: function d(detach) {
				if (detach) {
					detachNode(div9);
				}

				removeListener(svg1, "click", click_handler);
				removeListener(input0, "input", input0_input_handler);
				removeListener(input1, "input", input1_input_handler);
				removeListener(input2, "input", input2_input_handler);
				removeListener(label7, "click", click_handler_1);
				removeListener(button0, "click", click_handler_2);
				removeListener(textarea, "input", textarea_input_handler);
				if (component.refs.embedCodeOutput === textarea) { component.refs.embedCodeOutput = null; }
				removeListener(button1, "click", click_handler_3);
				removeListener(button2, "click", click_handler_4);
				if (component.refs.editorArea === div3) { component.refs.editorArea = null; }
				removeListener(div4, "mousedown", mousedown_handler);
				drag_handler.destroy();
				if (component.refs.widgetArea === div5) { component.refs.widgetArea = null; }
				removeListener(button3, "click", click_handler_5);
				if (if_block) { if_block.d(); }
				removeListener(select, "change", select_change_handler);
				removeListener(button4, "click", click_handler_6);
			}
		};
	}

	// (364:10) {#if compositions && compositions.length}
	function create_if_block(component, ctx) {
		var each_anchor;

		var each_value = ctx.compositions;

		var each_blocks = [];

		for (var i = 0; i < each_value.length; i += 1) {
			each_blocks[i] = create_each_block(component, get_each_context(ctx, each_value, i));
		}

		return {
			c: function c() {
				for (var i = 0; i < each_blocks.length; i += 1) {
					each_blocks[i].c();
				}

				each_anchor = createComment();
			},

			m: function m(target, anchor) {
				for (var i = 0; i < each_blocks.length; i += 1) {
					each_blocks[i].m(target, anchor);
				}

				insert(target, each_anchor, anchor);
			},

			p: function p(changed, ctx) {
				if (changed.compositions) {
					each_value = ctx.compositions;

					for (var i = 0; i < each_value.length; i += 1) {
						var child_ctx = get_each_context(ctx, each_value, i);

						if (each_blocks[i]) {
							each_blocks[i].p(changed, child_ctx);
						} else {
							each_blocks[i] = create_each_block(component, child_ctx);
							each_blocks[i].c();
							each_blocks[i].m(each_anchor.parentNode, each_anchor);
						}
					}

					for (; i < each_blocks.length; i += 1) {
						each_blocks[i].d(1);
					}
					each_blocks.length = each_value.length;
				}
			},

			d: function d(detach) {
				destroyEach(each_blocks, detach);

				if (detach) {
					detachNode(each_anchor);
				}
			}
		};
	}

	// (365:12) {#each compositions as composition, i}
	function create_each_block(component, ctx) {
		var option, text0, text1, option_value_value;

		return {
			c: function c() {
				option = createElement("option");
				text0 = createText("Composition ");
				text1 = createText(ctx.i);
				option.__value = option_value_value = ctx.composition.id;
				option.value = option.__value;
			},

			m: function m(target, anchor) {
				insert(target, option, anchor);
				append(option, text0);
				append(option, text1);
			},

			p: function p(changed, ctx) {
				if ((changed.compositions) && option_value_value !== (option_value_value = ctx.composition.id)) {
					option.__value = option_value_value;
				}

				option.value = option.__value;
			},

			d: function d(detach) {
				if (detach) {
					detachNode(option);
				}
			}
		};
	}

	function Workbench(options) {
		var this$1 = this;

		init(this, options);
		this.refs = {};
		this._state = assign(data(), options.data);

		this._recompute({ autoscale: 1, loadedCompositionId: 1, width: 1, height: 1, autoscaleValue: 1, adaptive: 1 }, this._state);
		this._intro = true;

		this._handlers.state = [onstate];

		if (!document.getElementById("svelte-obotd0-style")) { add_css(); }

		onstate.call(this, { changed: assignTrue({}, this._state), current: this._state });

		this._fragment = create_main_fragment(this, this._state);

		this.root._oncreate.push(function () {
			oncreate.call(this$1);
			this$1.fire("update", { changed: assignTrue({}, this$1._state), current: this$1._state });
		});

		if (options.target) {
			this._fragment.c();
			this._mount(options.target, options.anchor);

			flush(this);
		}
	}

	assign(Workbench.prototype, {
	 	destroy: destroy,
	 	get: get,
	 	fire: fire,
	 	on: on,
	 	set: set,
	 	_set: _set,
	 	_stage: _stage,
	 	_mount: _mount,
	 	_differs: _differs
	 });
	assign(Workbench.prototype, methods);

	Workbench.prototype._recompute = function _recompute(changed, state) {
		if (changed.autoscale) {
			if (this._differs(state.autoscaleValue, (state.autoscaleValue = autoscaleValue(state)))) { changed.autoscaleValue = true; }
		}

		if (changed.loadedCompositionId || changed.width || changed.height || changed.autoscaleValue || changed.adaptive) {
			if (this._differs(state.embedCode, (state.embedCode = embedCode(state)))) { changed.embedCode = true; }
		}
	}

	function createElement(name) {
		return document.createElement(name);
	}

	function append(target, node) {
		target.appendChild(node);
	}

	function toNumber(value) {
		return value === '' ? undefined : +value;
	}

	function selectValue(select) {
		var selectedOption = select.querySelector(':checked') || select.options[0];
		return selectedOption && selectedOption.__value;
	}

	function createSvgElement(name) {
		return document.createElementNS('http://www.w3.org/2000/svg', name);
	}

	function createText(data) {
		return document.createTextNode(data);
	}

	function setAttribute(node, attribute, value) {
		if (value == null) { node.removeAttribute(attribute); }
		else { node.setAttribute(attribute, value); }
	}

	function setStyle(node, key, value) {
		node.style.setProperty(key, value);
	}

	function setXlinkAttribute(node, attribute, value) {
		node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);
	}

	function addListener(node, event, handler, options) {
		node.addEventListener(event, handler, options);
	}

	function insert(target, node, anchor) {
		target.insertBefore(node, anchor);
	}

	function selectOption(select, value) {
		for (var i = 0; i < select.options.length; i += 1) {
			var option = select.options[i];

			if (option.__value === value) {
				option.selected = true;
				return;
			}
		}
	}

	function setData(text, data) {
		text.data = '' + data;
	}

	function detachNode(node) {
		node.parentNode.removeChild(node);
	}

	function removeListener(node, event, handler, options) {
		node.removeEventListener(event, handler, options);
	}

	function createComment() {
		return document.createComment('');
	}

	function destroyEach(iterations, detach) {
		for (var i = 0; i < iterations.length; i += 1) {
			if (iterations[i]) { iterations[i].d(detach); }
		}
	}

	function init(component, options) {
		component._handlers = blankObject();
		component._slots = blankObject();
		component._bind = options._bind;
		component._staged = {};

		component.options = options;
		component.root = options.root || component;
		component.store = options.store || component.root.store;

		if (!options.root) {
			component._beforecreate = [];
			component._oncreate = [];
			component._aftercreate = [];
		}
	}

	function assign(tar, src) {
		for (var k in src) { tar[k] = src[k]; }
		return tar;
	}

	function assignTrue(tar, src) {
		for (var k in src) { tar[k] = 1; }
		return tar;
	}

	function flush(component) {
		component._lock = true;
		callAll(component._beforecreate);
		callAll(component._oncreate);
		callAll(component._aftercreate);
		component._lock = false;
	}

	function destroy(detach) {
		this.destroy = noop;
		this.fire('destroy');
		this.set = noop;

		this._fragment.d(detach !== false);
		this._fragment = null;
		this._state = {};
	}

	function get() {
		return this._state;
	}

	function fire(eventName, data) {
		var handlers =
			eventName in this._handlers && this._handlers[eventName].slice();
		if (!handlers) { return; }

		for (var i = 0; i < handlers.length; i += 1) {
			var handler = handlers[i];

			if (!handler.__calling) {
				try {
					handler.__calling = true;
					handler.call(this, data);
				} finally {
					handler.__calling = false;
				}
			}
		}
	}

	function on(eventName, handler) {
		var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
		handlers.push(handler);

		return {
			cancel: function() {
				var index = handlers.indexOf(handler);
				if (~index) { handlers.splice(index, 1); }
			}
		};
	}

	function set(newState) {
		this._set(assign({}, newState));
		if (this.root._lock) { return; }
		flush(this.root);
	}

	function _set(newState) {
		var oldState = this._state,
			changed = {},
			dirty = false;

		newState = assign(this._staged, newState);
		this._staged = {};

		for (var key in newState) {
			if (this._differs(newState[key], oldState[key])) { changed[key] = dirty = true; }
		}
		if (!dirty) { return; }

		this._state = assign(assign({}, oldState), newState);
		this._recompute(changed, this._state);
		if (this._bind) { this._bind(changed, this._state); }

		if (this._fragment) {
			this.fire("state", { changed: changed, current: this._state, previous: oldState });
			this._fragment.p(changed, this._state);
			this.fire("update", { changed: changed, current: this._state, previous: oldState });
		}
	}

	function _stage(newState) {
		assign(this._staged, newState);
	}

	function _mount(target, anchor) {
		this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
	}

	function _differs(a, b) {
		return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
	}

	function blankObject() {
		return Object.create(null);
	}

	function callAll(fns) {
		while (fns && fns.length) { fns.shift()(); }
	}

	function noop() {}
	return Workbench;
}());
