design feedback

(function() {

  var ELS = {
    DesignImg: '#js-design-img',
    Spot: '.js-design-spot',
    SpotForm: '.js-spot-form',
    ExistingSpotForm: '.js-existing-spot-form',
    NewSpot: '.js-new-design-spot',
    NewSpotForm: '.js-add-new-spot',
    NewSpotXPos: '#design-x-pos',
    NewSpotYPos: '#design-y-pos',
    NewSpotCommentContainer: '.js-new-spot-comment-container',
    DesignContainer: '.js-design-container',
    // SpotFormContainer: '.spot-form-container',
    MaintainFocus: '.js-maintain-focus',
    CommentTextarea: '.js-design-comment-text',
    MainApp: '.js-main-app',

    UpdateTitle: '#new_design_title',
    UpdateSubtitle: '#new_design_subtitle'
  };

  var VAR = {
    Around: 10
  };


  /*
  * function name says it all
  * @dependencies: jQuery, Velocity and Waypoints
  */
  function showIcon(iconClass) {

    if(!iconClass) {
      console.log('you must define an icon class');
      return;
    }

    var waypoint = new Waypoint({
      element: document.getElementsByClassName(iconClass),
      handler: function(direction) {
        $(this.element).velocity({
          opacity: 1,
          scaleX: "1.1",
          scaleY: "1.1"
        },{
          duration: 200
        }).velocity({
          scaleX: "1",
          scaleY: "1"
        }, {
          duration: 300
        });
        this.destroy();
      },
      offset: '60%'
    });
  }

  /*
  * Some animation on homepage
  */
  function homeStuff() {
    var $homepage = $('#js-home-page');

    if( !$homepage.length) {
      return;
    }

    showIcon('js-upload-home');
    showIcon('js-share-home');
    showIcon('js-feedback-home');
  }

  /*
  * Show the comment box, may be the new comment box or a existing one
  * @e: click event
  * @offset: the current element (design img)
  * @_this: the context element
  */
  function showNewSpotBox(e, offset) {
    var xPos = e.pageX;
    var yPos = e.pageY;
    var relativeX = Math.round(e.pageX - offset.left);
    var relativeY = Math.round(e.pageY - offset.top);

    $(ELS.NewSpotForm).closest(ELS.NewSpotCommentContainer).find(ELS.NewSpot).css({
      'top': yPos - 10, // this 3 is a :hover hackish
      'left': xPos - 10 // this 2 is a :hover hackish
    });

    $(ELS.NewSpotForm).css({
      'top': yPos - 3, // this 3 is a :hover hackish
      'left': xPos - 2 // this 2 is a :hover hackish
    }).css('display', 'block');

    $(ELS.NewSpotForm).find(ELS.MaintainFocus).trigger('focus').css('display','');

    $(ELS.NewSpotForm).find(ELS.NewSpotXPos).val(relativeX);
    $(ELS.NewSpotForm).find(ELS.NewSpotYPos).val(relativeY);
  }

  // Animate update title and subtitle with ajax
  // author: rffaguiar
  // since: 1.0
  // date: 25/03/2015
  // @dependencies: jquery, velocity, sweetalert
  function animateServerResponse(formClass) {

    $(formClass).on('ajax:beforeSend', function() {
      var $updateIcon = $(this).find('.js-form-update-icon');
      $updateIcon.addClass('fa-refresh fa-spin');
      $updateIcon.velocity({
        opacity: 1
      });
    });

    $(formClass).on('ajax:success', function() {

      var $updateIcon = $(this).find('.js-form-update-icon');
      $updateIcon.velocity({
        opacity: 0
      },{
        complete: function(){
          $updateIcon.removeClass('fa-refresh fa-spin');
          $updateIcon.addClass('fa-check');
          $updateIcon.velocity({ opacity: 1 }, {
            complete: setTimeout(function(){
              $updateIcon.velocity({ opacity: 0 }, {
                complete: function() {
                  $updateIcon.removeClass('fa-check');
                }
              });
            }, 2500)
          });
        }
      });

    });

    $(formClass).on('ajax:error', function() {

      var $updateIcon = $(this).find('.js-form-update-icon');
      $updateIcon.velocity({
        opacity: 0
      },{
        complete: function(){
          $updateIcon.removeClass('fa-refresh fa-spin');
          $updateIcon.addClass('fa-times');
          $updateIcon.velocity({ opacity: 1 }, {
            complete: setTimeout(function(){
              $updateIcon.velocity({ opacity: 0 }, {
                complete: function() {
                  $updateIcon.removeClass('fa-times');
                  swal({
                    title: "Ooops..!",
                    text: "Infelizmente não foi possível atualizar este campo. Tente novamente mais tarde ou entre em contato conosco.",
                    type: "error",
                    confirmButtonText: "Ok!"
                  });

                }
              });
            }, 2500)
          });
        }
      });
    });
  }

  // Allow update title and subtitle with ajax
  // author: rffaguiar
  // since: 1.0
  // date: 20/03/2015
  function updateTitleSubtitle() {
    $(ELS.UpdateTitle).on('blur', function() {
      $(this).closest('form').submit();
    });

    $(ELS.UpdateSubtitle).on('blur', function() {
      $(this).closest('form').submit();
    });

    animateServerResponse('.js-form-update-title');
    animateServerResponse('.js-form-update-subtitle');
  }

  function maintainTextareaFocus() {
    $(ELS.MainApp).on('focusin', ELS.MaintainFocus, function() {
      $parent = $(this).closest(ELS.SpotForm);
      $parent.css('display', 'block');
    });

    $(ELS.MainApp).on('focusout', ELS.MaintainFocus, function() {
      $parent = $(this).closest(ELS.SpotForm);
      $parent.css('display', '');
    });
  }

  // Show/Hide the new Spot when img is clicked and we need to show the new spot form
  function littleHackish() {
    $(ELS.NewSpotForm).hover(function(){
      $(this).closest(ELS.NewSpotCommentContainer).find(ELS.NewSpot).css('display', 'block');
    }, function() {
      $(this).closest(ELS.NewSpotCommentContainer).find(ELS.NewSpot).css('display', 'none');
    });

  }

  function commentDesign() {
    maintainTextareaFocus();
    littleHackish();

    $(ELS.DesignContainer).on('click', ELS.DesignImg, function(e) {
      console.log('imagem foi clicada');
      var _this = this;
      var offset = $(this).offset();
      showNewSpotBox(e, offset);
    });

    // clear comment textarea when ajax is a success
    $(ELS.ExistingSpotForm).on('ajax:success', function(e, data, status, xhr) {
      $('textarea', ELS.ExistingSpotForm).val('');
      // $(ELS.FormNewDesignComment).append(xhr.responseText);
    }).on('ajax:error', function(e, xhr, status, error) {
      $(ELS.FormNewDesignComment).append('<p>Erro de papai :(</p>');
      console.log(error)
      console.log(status)
      console.log(xhr)
    });

    // clear comment textarea when ajax is a success
    $(ELS.NewSpotForm).on('ajax:success', function(e, data, status, xhr){
      $(ELS.CommentTextarea, ELS.NewSpotForm).val('');
      // $(ELS.FormNewDesignComment).append(xhr.responseText);
    }).on('ajax:error', function(e, xhr, status, error) {
      $(ELS.FormNewDesignComment).append('<p>Erro de papai :(</p>');
      console.log(error)
      console.log(status)
      console.log(xhr)
    });

    updateTitleSubtitle();
  }

  function selectText(element) {
    var doc = document
        , text = doc.getElementById(element)
        , range, selection
    ;
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
  }

  function copyToClipboard() {
    var $designPage = $('#df-design-page');

    if( !$designPage.length) {
      return;
    }

    $('#df-modal-link').on('click', function() {
      selectText('df-modal-link');
    });

    var client = new ZeroClipboard( document.getElementById('df-copy-to-clipboard-link') );

    client.on('ready', function(readyEvent) {
      // ZeroClipboard SWF is ready
      client.on('aftercopy', function(event) {
        // this == client
        // event.target  == the element that was clicked
        // event.target.style.display = 'none';
        // alert('Copied text to clipboard: ' + event.data['text/plain']);
        setTimeout(function(){
          $('#js-df-modal-link').foundation('reveal', 'close')
        }, 1000);

      });
    });
  }

  function notifications() {
    var $notifications = $('#df-notifications');

    if (!$notifications.length) {
      return false;
    }

    var text = '';
    var $deviseNotice = $('#js-df-devise-notice');
    var $deviseAlert = $('#js-df-devise-alert');

    if ($deviseNotice.length) {
      text = $deviseNotice.text();
    }

    if ($deviseAlert.length) {
      text = $deviseAlert.text();
    }

    toastr.options = {
       'closeButton': true,
       'timeout': 10000,
       'extendedTimeOut': 10000,
       'positionClass': 'toast-bottom-left'
    };

    toastr.info(text);

  }

  function init() {
    $(document).ready(function(){
      commentDesign();
      homeStuff();
      copyToClipboard();
      notifications();
    });
  }

  init();
}());