// make the element draggable
// a callback for the second argument can be specified to gather the new position, like: function (element, x, y) {  }
// third argument is optional, is a boolean and can be true to make the draggable functionality "virtual" which mean it will NOT modify the element position but still call the callback, it is left to the user to do any appropriate changes, this may be useful to add resizable functionality easily by using it with "lockDraggable", this default to false if not specified
// fourth argument is optional and is used to bind multiple draggable hooks to control a specific DOM target
// Note: If you want to remove the element while it is draggable, make it undraggable first by calling the appropriate function (undraggable), this is because WUI keep an internal reference of the element and it may cause memory leaks later, calling undraggable will make the reference go away
WUI.draggable(my_element, function (element, x, y) {  }, false, target_element);

// make a WUI draggable element undraggable and remove the internal reference
WUI.undraggable(my_element);

// lock draggable element to a specific axis ('x' or 'y', to clear the lock, just call it without specifying axis or specify whatever)
WUI.lockDraggable(my_element, 'x');

// apply a 500ms fade in effect to an element
WUI.fadeIn(my_element, 500);

// apply a 500ms fade out effect to an element, when finished output "finished" to the browser console and hide the element (display: none)
WUI.fadeOut(my_element, 500, function () { console.log("finished!"); }, true);

WUI_Tabs.create("my_tabs", {
	// function called when a tab is clicked (tab index will be passed as argument)
	on_tab_click: tab_clicked,

    // style value for the content height
    height: "calc(100% - 32px)" // this is the default value
});

var my_dialog = WUI_Dialog.create("my_dialog", {
	title: "dialog title",

    width: "20%",
    height: "50%",

    // 'left', 'center', 'right', default to 'left'
    halign: "left",
    // 'top', 'center', 'bottom', default to 'top'
    valign: "center",

    // wether the dialog is opened or not after creation
    open: true,

    // wether the dialog is minimized or not after creation
    minimized: false,

    // function called when the dialog has been closed
    on_close: null,

    // function called before the dialog is detached
    on_pre_detach: function () {

    },

    // function called when the dialog is detached, the new `window` object is passed as argument
    on_detach: function (new_window) {
        // you can modify the detachable window there, example:
        new_window.document.title = "My detached window"; // replace the detached dialog title
    },

    // function called when the dialog is resized, `new_width` and `new_height` is the new dimension of the dialog content
    on_resize: function (new_width, new_height) {

    },

    modal: false,

    // wether the dialog have a status bar
    status_bar: true,

    // HTML content of the status bar
    status_bar_content: "status bar content",

    closable: false,
    draggable: true,
    minimizable: true,

    resizable: true,

    detachable: true,

    // the minimun width/height the dialog can be when resized (min_width accept a value or "title")
    min_width: "title",
    min_height: 64,

    // option to keep the align when resized, example: if the dialog is centered in the window, the dialog will always be in center when it is resized
    keep_align_when_resized: true,

    // can be used to position the dialog, default to 0
    top: 0,
    left: 0
});

// second argument is optional (default to false) and tell wether the dialog is opened in its own window
WUI_Dialog.open(my_dialog, false);

WUI_Dialog.close(my_dialog, true); // last argument is optional (default to false) mean the on_close function will be called

WUI_Dialog.focus(my_dialog);

WUI_Dialog.setStatusBarContent(my_dialog, "My new status bar content");

var detached_dialog_window = WUI_Dialog.getDetachedDialog(my_dialog);

WUI_DropDown.create("my_dropdown", {
		width: "100px",
	    height: "24px",

	    // the space between the floating list of items and the dropdown "button"
	    vspacing: 4,

	    // time before the floating list close
	    ms_before_hiding: 1000,

	    // default item (id) to be selected after creation
	    selected_id: 0,

	    vertical: false,

	    // function called when an item is selected, the item index is passed as argument
	    on_item_selected: item_selected
    },
    // a list of items
    ["First item", "Second item", "Third item"]
);

var my_toolbar = WUI_ToolBar.create("my_toolbar", {
    // display the minimize icon for each groups
    allow_groups_minimize: true,

    // this will modify the size of the button
    item_width: 32,
    item_height: 32,

    // this set the spacing between buttons, aka margin to left/right or top/bottom
    item_hmargin: 0,
    item_vmargin: 0,

    icon_width: 32,
    icon_height: 32,

    vertical: false
  },
  {  
	// properties added to this object are recognized automatically as new groups by the widget
    my_first_group_of_tools: [
      {
        // CSS class name
        icon: "pencil-icon",

        // button text
        text: "",

        // can be "toggle", "dropdown" or nothing for a simple button
        type: "toggle",

        // a toggling group id, another button with the same toggling group id will be linked to this one and will be off when this one will be switched on
        toggle_group: 0,

        // toggle state of the button after creation, only if it is a toggle button
        toggle_state: true,

        // function called when a button is clicked, if the item is of type "toggle", an object containing a field "id" (id of the toolbar tool), "type" (will contain "toggle") and "state" (0 or 1) will be passed as argument
        on_click: toolbar_item_toggle,

        // tooltip
        tooltip: "Toggle me!"
      }
    ],

    my_second_group_of_tools:    [
      { icon: "undo-icon", on_click: toolbar_item_click, tooltip: "Click me!" },
      { icon: "redo-icon", on_click: toolbar_item_click, tooltip: "Click me!" }
    ],

    // a typical menu with a list of clickable items
    my_menu: [
      {
        text: "File",
        on_click: toolbar_item_click,
        tooltip: "Click me!",
        type: "dropdown",

        // define where the list of items will appear around the item when it will be opened
        // can be "s", "sw", "se", "nw", "ne", anything else will default to "n" (north)
        orientation: "n",

        // define the width of the list items
        // can be a CSS width (auto, 64px etc) or "tb_item" so the list items have the same width as the toolbar item button
        dropdown_items_width: "tb_item",

        // items of the dropdown are defined here
        items: [
          {
            title: "New",

            // function called when the item is clicked
            on_click: my_new_file
          },

          {
            title: "Open",

            // function called when the item is clicked
            on_click: my_open_file
          }
        ]
      }
    ]
  });

WUI_ToolBar.toggle(my_toolbar, 0, true); // the last argument is optional and mean that the toggle event will call the onClick function

WUI_RangeSlider.create("my_range_slider", {
    // width/height of the slider, if you make a vertical slider, you should swap theses values
    width: 300,
    height: 8,

    // the value range, -100 <-> 100, optional
    min: -100,
    max: 100,

    // standard increment when dragging NOTE : can be "any" if you need to accept both decimals and integers for the validation ("step" is just the bare "step" input attribute value actually!)
    step: 1,

    // on mouse wheel increment
    scroll_step: 2,

    vertical: false,

    // max number of decimals to display for decimal values (default to 4)
    decimals: 4,

    // the widget default value (used for "reset to default" behaviors)
    default_value: 0,

    // the widget current value
    value: 0.5,

    // this will place the title on top and the value at the bottom, good for vertical sliders
    title_on_top: true,

    title: "my range slider",

    // enable the slider to be controllable by MIDI
    // can be a boolean (or anything) if you do not need to configure it, otherwise an object with a fiel "type" with value "rel" or "abs", by default the control type is set to "abs"
    midi: false,

    // used to line up multiple sliders perfectly
    title_min_width: 150,
    value_min_width: 48,

    // allow the user to configure the parameters of the slider, a settings button will appear around the slider and when it is clicked, a box with input fields will allow the user to change range and step values
    // this can be usefull if an "unlimited" slider is needed or simply to allow the step to be changed by the user
    // Note: if you want a few parameters to be configurable, just remove those you don't want in that object
    configurable: {
    	// this allow the "min" parameter of the slider to be configurable
    	// "min" and "max" is the allowed range of the created input field, it is used to set some boundaries to what range of values the user can set
    	// it is also possible to leave the object empty (like "max" below) to allow unlimited sliders (any values for min/max will be then allowed, allowing the user to extend the range as he like)
    	min: { min: -100, max: 100 },
    	max: { },
    	step: { min: 0.1, max: 2 },
    	scroll_step: { max: 5 }
    },

    // function to call when the slider value change with the value passed as argument
    on_change: slider_change
  });

// setup Web MIDI so we can control the MIDI enabled sliders with any connected MIDI controllers
if (navigator.requestMIDIAccess) {
    navigator.requestMIDIAccess().then(
            function (m) {
                m.inputs.forEach(
                    function (midi_input) {
                        midi_input.onmidimessage = function (midi_message) {
                            WUI_RangeSlider.submitMIDIMessage(midi_message);
                        };
                    }
                );
        });
}

WUI_RangeSlider.setValue(my_slider, my_value, trigger_on_change);

var parameters = WUI_RangeSlider.getParameters(my_slider);
// parameters contain opts (containing all options fields), endless, midi and value field

WUI_RangeSlider.setParameters(my_slider, parameters);

WUI_CircularMenu.create({
    x: 64,
    y: 64,

    element: null, // if an element is specified, the menu will be shown around it

    angle: 90, // offset the items positions by 90°

    // radius
    rx: 64,
    ry: 64,

    // dimension of the items
    item_width:  32,
    item_height: 32,

    // if you want to display the widget at a position x, y in another window, you may need to specify the target window here
    window: null
  },
  [
    { icon: "css-icon-class", tooltip: "first button",  on_click: function () { } },
    { icon: "css-icon-class", tooltip: "second button", on_click: function () { } },
    { icon: "css-icon-class", tooltip: "third button",  on_click: function () { } },
    { icon: "css-icon-class", tooltip: "fourth button", on_click: function () { } },
  ]);