define([
    'text!searchbar.html!strip'
  , 'css!searchbar'
  ],
  function (source) {
    var response = {};

    response.data = source;
    response.mockup = function (source, callback_mockup) {
      var gadget = RenderJs.getSelfGadget();

      // renderGadget
      window.App.renderGadgets(gadget);
        /*


        id = gadget.dom.attr('id').split("__").splice(-1)[0],
        config = gadget.state[0][id]._config,
        module = config.datasource.module,

        // TODO: no fan of pointers (yet)
        // pointers keep jio query parameter in storage.js,
        // => so they don't need to be with JSON
        pointer = config.datasource.pointer,
        // regardless of a pointer, we declare defaults
        method = pointer ? undefined : config.datasource.method || "allDocs",
        options = pointer ? undefined : {
          "limit": config.datasource.limit || [0, 24],
          "sort_on": config.datasource.sort || [["_id", "descending"]],
          "select_list": config.datasource.fields || undefined
        },
        data,
        markup,
        screen = window.App.settings.screen_format,

        // this defines the size of the images to be displayed
        // TODO: this should be customizable
        size = screen === "small" ? "small" : "medium",
        shortcut = size.substring(0, 1);

      data =  window.App[module].switchboard(
        pointer,
        method,
        options,
        function(response) {
          var item, i, str = "", price;

          for (i = 0; i < response.length; i += 1) {
            item = response[i];

            if (item.price === item.original_price) {
              price = item.price + "€";
            } else {
              price = "<span class='rebate'>" + item.price + "€</span> (" +
                item.original_price + "€)";
            }

            str += "<li data-icon='false'>" +
              "<a href='details.html?product=" + item._id +
              "' title='" + item.brand + ", " + item.title + "'>" +
              "<span class='img_container_items'>" +
              "<img alt='" + item.title + "' src='" +
              item.media + item.dimensions[0].vars[0].media.img[0][shortcut] +
              size + "' /></span><span class='description_items'>" +
              item.brand + " " + item.title + " " + price + "</span></a></li>";
          }

          // add to data
          markup = source.replace(/<!-- items -->/g, str);
          // this is not response.callback(!!)*/
          callback_mockup(source);
        //}
      //);
    };

    response.callback = function (gadget) {
      var filter = gadget.dom.find(".searchbar_filter");

      filter.on("filterbarbeforefilter", function (e, data) {
        var value = data.input.value;

        if ( value ) {
          // now we can autocomplete...
          // this should also run from JIO
          // whatever happens should take into account presets
          // like sorting criteria or filters set!

          // we have two actions
          //  > display suggestions listitems with a checkbox
          //  > user can check, then it will be a delete
          //  > checked items will be... moved to input, kept in suggestions
          // second action is user hitting search button
          //  > this searches, clears the autocomplete
          //  start with this!

          // question will be how to store information...
          // if we follow the DC scheme, we have some core metadata and the
          // rest must be stored in an attachment.

          
        }


      });

      // renderGadget
      window.App.renderGadgets(gadget);

    };

  // return response object
  return response;
  }
);
