/*
 * EdGEL: The University of Edinburgh Experience Language.
 * Social Media JS File
 */

var EdGel = EdGel || {};
EdGel.socialMedia = EdGel.socialMedia || {};
EdGel.socialMedia.buttons = EdGel.socialMedia.buttons || {};

if (document.head.querySelector('meta[property="og:title"]')) {
  'use strict';

  // Get OGP values from your applications META Tags. To allow the JS to work, this should be set before the page loads
  EdGel.socialMedia.pageUrl = encodeURIComponent(document.head.querySelector('meta[property="og:url"]').content);
  EdGel.socialMedia.pageTitle = encodeURIComponent(document.head.querySelector('meta[property="og:title"]').content);

  // Fixes dual-screen position
  EdGel.socialMedia.dualScreenLeft = window.screenLeft ? window.screenLeft : window.screenX;
  EdGel.socialMedia.dualScreenTop = window.screenTop ? window.screenTop : window.screenY;
  EdGel.socialMedia.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  EdGel.socialMedia.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

  // Declare the window popup sizes
  // facebook
  EdGel.socialMedia.facebookWindowWidth = 550;
  EdGel.socialMedia.facebookWindowHeight = 285;

  // twitter
  EdGel.socialMedia.twitterWindowWidth = 550;
  EdGel.socialMedia.twitterWindowHeight = 269;

  // linkedIn
  EdGel.socialMedia.linkedinWindowWidth = 550;
  EdGel.socialMedia.linkedinWindowHeight = 269;


  // Calculate the popup window center position
  // facebook
  EdGel.socialMedia.facebookWindowLeft  = ((EdGel.socialMedia.width / 2) - (EdGel.socialMedia.facebookWindowWidth / 2)) + EdGel.socialMedia.dualScreenLeft;
  EdGel.socialMedia.facebookWindowTop = ((EdGel.socialMedia.height / 2) - (EdGel.socialMedia.facebookWindowHeight / 2)) + EdGel.socialMedia.dualScreenTop;

  // twitter
  EdGel.socialMedia.twitterWindowLeft  = ((EdGel.socialMedia.width / 2) - (EdGel.socialMedia.twitterWindowWidth / 2)) + EdGel.socialMedia.dualScreenLeft;
  EdGel.socialMedia.twitterWindowTop = ((EdGel.socialMedia.height / 2) - (EdGel.socialMedia.twitterWindowHeight / 2)) + EdGel.socialMedia.dualScreenTop;

  // linkedIn
  EdGel.socialMedia.linkedinWindowLeft  = ((EdGel.socialMedia.width / 2) - (EdGel.socialMedia.linkedinWindowWidth / 2)) + EdGel.socialMedia.dualScreenLeft;
  EdGel.socialMedia.linkedinWindowTop = ((EdGel.socialMedia.height / 2) - (EdGel.socialMedia.linkedinWindowHeight / 2)) + EdGel.socialMedia.dualScreenTop;


  // Social media attributes
  // The params attribute is optional and can be used to define how a popup window is opened.
  EdGel.socialMedia.buttons = {
    facebook: {
      buttonName: 'Facebook',
      buttonSVG: '<svg width="2.875rem" height="2.875rem" viewBox="0 0 46 46"><rect class="social-bg-facebook" rx="4" ry="4" width="46" height="46"/><path class="social-fg-facebook" d="M31.3,46V27.8h5.9l0.9-6.9h-6.8v-4.4c0-2,0.6-3.3,3.4-3.3l3.6,0V7.1c-0.6-0.1-2.8-0.3-5.3-0.3c-5.2,0-8.8,3.2-8.8,9.1V21h-5.9v6.9h5.9V46H31.3z"/></svg>',
      buttonLink: '<a class="btn btn-social" href="https://www.facebook.com/sharer/sharer.php?u=' + EdGel.socialMedia.pageUrl + '" role="button" target="_blank" aria-label="Share this content on Facebook.">',
      buttonParams: 'width=' + EdGel.socialMedia.facebookWindowWidth + ',height=' + EdGel.socialMedia.facebookWindowHeight + ',resizable=1,top=' + EdGel.socialMedia.facebookWindowTop + ',left=' + EdGel.socialMedia.facebookWindowLeft
    },
    twitter: {
      buttonName: 'Twitter',
      buttonSVG: '<svg width="2.875rem" height="2.875rem" viewBox="0 0 46 46"><rect class="social-bg-twitter" rx="4" ry="4" width="46" height="46"/> <path class="social-fg-twitter" d="M40,13c-1.2,0.5-2.5,0.9-3.8,1.1c1.4-0.8,2.4-2.1,2.9-3.7c-1.3,0.8-2.7,1.3-4.3,1.6 c-1.2-1.3-3-2.1-4.9-2.1c-3.7,0-6.7,3-6.7,6.7c0,0.5,0.1,1,0.2,1.5c-5.6-0.3-10.5-2.9-13.8-7c-0.6,1-0.9,2.1-0.9,3.4c0,2.3,1.2,4.4,3,5.6c-1.1,0-2.1-0.3-3-0.8v0.1c0,3.2,2.3,6,5.4,6.6c-0.6,0.2-1.2,0.2-1.8,0.2c-0.4,0-0.9,0-1.3-0.1c0.9,2.7,3.3,4.6,6.3,4.7c-2.3,1.8-5.2,2.9-8.3,2.9c-0.5,0-1.1,0-1.6-0.1c3,1.9,6.5,3,10.3,3c12.3,0,19.1-10.2,19.1-19.1c0-0.3,0-0.6,0-0.9C38,15.5,39.1,14.3,40,13z"/></svg>',
      buttonLink: '<a class="btn btn-social" href="https://twitter.com/share?url=' + EdGel.socialMedia.pageUrl + '&text=' + EdGel.socialMedia.pageTitle + '" role="button" target="_blank" aria-label="Share this content on Twitter.">',
      buttonParams: 'width=' + EdGel.socialMedia.twitterWindowWidth + ',height=' + EdGel.socialMedia.twitterWindowHeight + ',resizable=1,top=' + EdGel.socialMedia.twitterWindowTop + ',left=' + EdGel.socialMedia.twitterWindowLeft
    },
    linkedin: {
      buttonName: 'LinkedIN',
      buttonSVG: '<svg width="2.875rem" height="2.875rem" viewBox="0 0 46 46"><rect class="social-bg-linkedin" rx="4" ry="4" width="46" height="46"/><path class="social-fg-linkedin" d="M6.9,17.4h6.9v22.2H6.9V17.4zM10.3,6.4c2.2,0,4,1.8,4,4c0,2.2-1.8,4-4,4c-2.2,0-4-1.8-4-4C6.3,8.2,8.1,6.4,10.3,6.4"/><path class="social-fg-linkedin" d="M18.1,17.4h6.6v3h0.1c0.9-1.7,3.2-3.6,6.5-3.6c7,0,8.3,4.6,8.3,10.6v12.2h-6.9V28.8c0-2.6-0.1-5.9-3.6-5.9c-3.6,0-4.1,2.8-4.1,5.7v11h-6.9V17.4z"/></svg>',
      buttonLink: '<a class="btn btn-social" href="http://www.linkedin.com/shareArticle?&mini=true&url=' + EdGel.socialMedia.pageUrl + '&title=' + EdGel.socialMedia.pageTitle + '" role="button" target="_blank" aria-label="Share this content on LinkedIn.">',
      buttonParams: 'width=' + EdGel.socialMedia.linkedinWindowWidth + ',height=' + EdGel.socialMedia.linkedinWindowHeight + ',resizable=1,top=' + EdGel.socialMedia.linkedinWindowTop + ',left=' + EdGel.socialMedia.linkedinWindowLeft
    },
    email: {
      buttonName: 'email',
      buttonSVG: '<svg width="2.875rem" height="2.875rem" viewBox="0 0 46 46"><rect class="social-bg-email" rx="4" ry="4" width="46" height="46"/><path class="social-fg-email" d="M34.8,11.5H11.2c-2.2,0-3.9,1.8-3.9,3.9v15.7c0,2.2,1.8,3.9,3.9,3.9h23.6c2.2,0,3.9-1.8,3.9-3.9V15.1C38.7,13,37,11.2,34.8,11.2zM11.2,13.2h23.6c1.1,0,2,0.9,2,2v1.1l-13.8,9.2l-13.8-9.2v-1.1C9.2,14.1,10.1,13.2,11.2,13.2zM34.8,32.8H11.2c-1.1,0-2-0.9-2-2V17.4L23,26.5l13.8-9.2v13.5C36.8,31.9,35.9,32.8,34.8,32.8z"/></svg>',
      buttonLink: '<a class="btn btn-social" href="mailto:?subject=' + EdGel.socialMedia.pageTitle + '&body=' + EdGel.socialMedia.pageUrl + '" role="button" aria-label="Email this content.">'
    }
  }
}

document.addEventListener('DOMContentLoaded', function () {
  'use strict';

  function createHandler(key) {
    return function (e) {
      e.preventDefault()
      window.open(e.target.getAttribute('href'),
          EdGel.socialMedia.buttons[key].buttonName,
          EdGel.socialMedia.buttons[key].buttonParams)
    };
  }

  // Bind popup windows to click action.
  for (var key in EdGel.socialMedia.buttons) {
    if (EdGel.socialMedia.buttons.hasOwnProperty(key)) {
      // Check this button has params for a pop-up window.
      if ('buttonParams' in EdGel.socialMedia.buttons[key]) {
        var socialButtons = document.getElementsByClassName('.btn-social-' + key)
        for (var i = 0; i < socialButtons.length; i++) {
          socialButtons[i].addEventListener('click', createHandler(key))
        }
      }
    }
  }
});

/*
 * To display social media links at any position in a page, call the socialMediaLinks() function
 * passing in the required social media title and elements.
 *
 * Valid options will be inserted at the point in the page where the function call is made.
 * Invalid options will be ignored.
 *
 * E.g.
 * This function call:
 * <script language="JavaScript">
 *     socialMediaLinks("Share",["facebook", "twitter"]);
 * </script>
 *
 * Results in the following HTML being inserted at the calling location in the page:
 * <h2>Share</h2>
 * <ul class="social"><li><a class="btn btn-social"
 * href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flocalhost%2Fuoe%2Fedgel_social_media%2Fexample-page-1.html"
 * title="Share this content on Facebook." role="button" target="_blank" aria-label="Share this content on Facebook.">
 * <svg>...</svg></a></li>
 * <li><a class="btn btn-social"
 * href="https://twitter.com/share?url=http%3A%2F%2Flocalhost%2Fuoe%2Fedgel_social_media%2Fexample-page-1.html&amp;text=Social%20Media%20Demo%20-%20Image"
 * title="Share this content on Twitter." role="button" target="_blank" aria-label="Share this content on Twitter.">
 * <svg>...</svg></a></li></ul>
 *
 */

EdGel.socialMedia.links = function (linksTitle, linksItems) {
  'use strict';

  if (document.head.querySelector('meta[property="og:title"]')) {
    var args = Array.isArray(linksItems) ? linksItems : [linksItems];
    var liItems = '';
    var ref = {};

    for (var idxArg = 0; idxArg < args.length; idxArg++) {
      // Add valid social media link items to the list.
      if (args[idxArg] in EdGel.socialMedia.buttons) {
        ref = EdGel.socialMedia.buttons[args[idxArg]];
        liItems += '<li>' + ref.buttonLink + ref.buttonSVG + '</a></li>';
      }
    }

    if (liItems) {
      // Insert the list.
      document.writeln('<h2>' + linksTitle + '</h2><ul class="social">' + liItems + '</ul>'); // jshint ignore:line
    }
  }
  else {
    throw new Error('There are no open graph meta tags present. Please add them to your page. Social Media Links have not been inserted into this page.')
  }

};
