/**
 * Font setting module
 *  @param {object} window  global object
 *  @param {function} $ jQuery library
 *  @param {object} EventMgr EventMgr library
 *  @param {object} App Application
 *  @return {object} api
 */
App.FontSettings = function(window, $, EventMgr, App) {
  'use strict';

  function createLink(font) {
    var link = document.createElement('link');
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('type', 'text/css');
    link.setAttribute('href', 'http://fonts.googleapis.com/css?family=' + font);
    document.head.appendChild(link);
  }

  function setFontSize(e) {
    var targetview = this.getAttribute('data-targetview'),
        val = this.value,
        tabId = this.getAttribute('data-tabid'),
        elem = App.Dom.byId(tabId + '-' + targetview);
    if (elem) {
      elem.style.fontSize = val + 'px';
      elem.style.lineHeight = val + 'px';
    }
  }

  function setFontFamily(e) {
    var targetview = this.getAttribute('data-targetview'),
        val = this.value,
        tabId = this.getAttribute('data-tabid'),
        elem = App.Dom.byId(tabId + '-' + targetview);
    if (elem) {
      elem.style.fontFamily = val;
      if (elem.style.fontFamily === '') {
        createLink(val);
        setTimeout(function() {
          elem.style.fontFamily = val;
        }, 1000);
      }
    }
  }

  function checkFontSettings(e, data) {
    var tabId = data.tabId,
        $actTab = $('#cont-' + tabId);

    $actTab.find('.i-font-family-control').trigger('change');
    $actTab.find('.i-font-size-control').trigger('change');
  }

  function $c() {
    return $('.i-list-wr');
  }

  function init() {
    EventMgr.on($c(), '.i-font-family-control', 'change', setFontFamily);
    EventMgr.on($c(), '.i-font-size-control', 'change', setFontSize);
    EventMgr.bind('appendForm', checkFontSettings);
  }

  var api = {
    init: init
  };

  return api;

} (window, $, EventMgr, App);