/* CUSTOM DROPDOWNS
--------------------------------------------------- */
(function ($) {

  jQuery.fn.dropdown = function () {

    var select = this;
    var $select = $(select);
    var options = $select.find("option");
    var current = null;
    var selectedli = null;

    // build select
    var newselect = $("<span />", {
      'class': $select.attr("class")
    });

    // check classname
    if (!newselect.hasClass('custom-dropdown')) {
      newselect.addClass('custom-dropdown');
    }

    // and select list
    var list = $("<ul />", {
      'class': 'dropdown'
    }).appendTo(newselect).hide();

    // select is going to be replaced, save value in new hidden input
    var hiddenfield = $("<input />", {
      'id': select.id,
      name: $select.attr("name"),
      type: 'hidden',
      value: $select.val()
    }).appendTo(newselect);

    // transfer data attributes
    if (select.attributes) {
      for (var i = 0; i < select.attributes.length; i++) {
        var property = select.attributes[i];
        var check = 'x_' + property.name;
        if (check.indexOf('data-') > 0) {
          hiddenfield.get(0).setAttribute(property.name, property.value);
        }
      }
    }

    // recreate options in html
    $.each(options, function (index, item) {
      // create new item
      var li = $("<li />", {
        'html': '<span class="dropdown-item-wrapper">'+
                  '<span class="dropdown-wrapper">' + 
                    '<a href="">' +
                      '<span class="lijnInfo">'+
                        'Lijn ' + $(item).data('lijnnummer') + '<br />' +
                        '<em>' + $(item).data('formule') + '</em>' +
                      '</span>' +
                      '<span class="bestemmingInfo">'+
                        '<strong>naar: ' + $(item).data('bestemming') + '</strong><br/>' +
                         $(item).data('omschrijving') +
                      '</span>'+
                    '</a>' +
                  '</span>'+
                '</span>',
                //'<a onclick="return false;" href="#">' + item.innerHTML.replace(" ", "&nbsp;") + '</a>',
        'data-val': item.value,
        'active-label': $(item).data('lijnnummer') +': ' + $(item).data('bestemming'),
        'class': item.selected ? "selected" : "",
        'click': function () {

          var self = $(this);

          // only add item when it's enabled
          if (self.hasClass("disabled") == false && !self.find("[disabled]").length) {

            // save value
            var value = self.attr("data-val");
            hiddenfield.val(value).trigger("change");

            // switch current value
            var oldval = current.attr("data-val");
            var oldhtml = current.html();
            var newhtml = current.attr("active-label"); //self.html(); //'<a href="#">' + self.text() + '<span class="icon"></span><a>';
            var newval = value;

            self.addClass("selected");
            if (selectedli) {
              selectedli.removeClass("selected");
            }

            current.attr("data-val", newval);
            current.html(newhtml);

            selectedli = self;

            // eventueel actie doen
            var action = $select.attr("onchange");
            if (typeof (action) === 'function') {
              action.call();
            }

            // sluiten van dropdown
            $(".active-dropdown").not(newselect).removeClass("active-dropdown");
            list.hide();

          }

          return false;

        }
      }).appendTo(list);

    });

    // selected on top..
    current = $("<span />", {
      'html': '',
      'class': 'current',
      'click': function () {

        // toggle active
        $(".active-dropdown").not(newselect).removeClass("active-dropdown");
        newselect.toggleClass("active-dropdown");
        list.toggle();

        return false;

      }
    }).prependTo(newselect);

    // selected activeren
    selectedli = list.find("li.selected");
    current.attr("data-val", selectedli.val());
    //current.html(selectedli.html());
    current.html(selectedli.attr('active-label'));


    // replace the original select element..
    $select.replaceWith(newselect);

    // if data-submitonchange attribute is set, submit parent form when changing the value
    if ($select.data("submitonchange") == "True") {
      hiddenfield.change(function () {
        var self = $(this);
        var form = self.parents("form:first");
        form.submit();
      });
    }
  }
})(jQuery);