(function( $ ) {
  $.tutorial = function( options ) {
    if (this.length == 0)
      return;

    $('body').append("<div id='masking_overlay'></div>");

    if (options.placement == 'right') {
      $.extend($.tutorial.defaults.instructionCss, {'text-align':'left', 'height':70} );
    }

    $.tutorial.state =
    {
      obj: this,
      preserved: this.clone(true),
      settings: $.extend(true, {}, $.tutorial.defaults, options )

    }

    settings = $.tutorial.state.settings;

    this.css(settings.css);
    pathway = settings.pathway;
    if (this.prop("tagName") == 'A') {
      url = this.attr('href');
      if (typeof url !== "undefined") {
        if (url.indexOf('?') == -1)
          this.attr('href', url + "?tutorial="+pathway);
        else
          this.attr('href', url + "&tutorial="+pathway);
      }
    }

    this.find('a').each(function() {
      url = $(this).attr('href');
      if (typeof url !== "undefined") {
        if (url.indexOf('?') == -1)
          $(this).attr('href', url + "?tutorial="+pathway);
        else
          $(this).attr('href', url + "&tutorial="+pathway);
      }
    });

    this.after("<input type=hidden name=tutorial value='"+pathway+"'>");

    if (settings.instruction !== false) {
      object = $("<div id='tutorial'>"+settings.instruction+"</div>");
      if (settings.placement == 'below') {
        ptop = this.offset().top + this.height() + 2;
        pleft = this.offset().left + this.width()/2 - settings.instructionCss.width/2;
        if (pleft < 0) pleft = 0;
        if (pleft + settings.instructionCss.width > $( window ).width())
          pleft = $( window ).width() - settings.instructionCss.width;
        $.extend(settings.instructionCss, {top: ptop, left: pleft} );
      }

      if (settings.placement == 'above') {
        pbottom = $(window).height() - this.offset().top;
        pleft = this.offset().left + this.width()/2 - settings.instructionCss.width/2;
        if (pleft < 0) pleft = 0;
        if (pleft + settings.instructionCss.width > $( window ).width())
          pleft = $( window ).width() - settings.instructionCss.width;
        $.extend(settings.instructionCss, {bottom: pbottom, left: pleft} );
      }

      if (settings.placement == 'right') {
        ptop = this.offset().top + this.height()/2 - settings.instructionCss.height/2 ;
        pleft = this.offset().left + this.width() + 5;
        if (ptop < 0)
          ptop = 0;
        $.extend(settings.instructionCss, {top: ptop, left: pleft} );
      }

      $(object).css(settings.instructionCss);
      //$('#nav_buttons').after(object);
      $('body').prepend(object);
    }

    if (settings.removeOnClick !== false) {
      $('#masking_overlay').one('click', function() { $.tutorial.remove();});
    }

    return this;
  };

  $.tutorial.defaults = {
      instruction: false,
      placement: 'below',
      css: {'z-index':'1001', 'position':'relative'},
      instructionCss: {'text-align': 'center', 'box-sizing':'border-box', 'width':300},
      pathway: 1,
      removeOnClick: false
      //width: 300
    };

  $.tutorial.remove = function( keep_highlight) {
    $('#masking_overlay').remove();
    //$.tutorial.state.obj.css($.tutorial.state.oldcss);
    if (typeof keep_highlight === 'undefined' || !keep_highlight)
      $.tutorial.state.obj.replaceWith($.tutorial.state.preserved);

    if ($.tutorial.state.instruction !== false) {
      $('#tutorial').remove();
    }

  };

  $.fn.tutorial = $.tutorial;
}( jQuery ));