// JavaScript Document

var response = '<div class="emicon-menu-main MaterialTabsMain"> <ul> <li class="tab emactive"> <a href="#emof-panelmain"> <img src="emof.png"> </a> </li> <li class="tab"> <a href="#emofl-panelmain"> <img src="emofl.png"> </a> </li> <li class="tab"> <a href="#emoe-panelmain"> <img src="css/icons/emoe.png"> </a> </li> <li class="tab"> <a href="#emoc-panelmain"> <img src="css/icons/emoc.png"> </a> </li> <li class="tab"> <a href="#emog-panelmain"> <img src="css/icons/sticsm.png"> </a> </li> <li class="tab"> <a href="#emoy-panelmain"> <img src="css/icons/sticky.png"> </a> </li> <li class="tab"> <a href="#emoap-panelmain"> <img src="css/icons/stickap.png"> </a> </li> <li class="tab"> <a href="#emogirl-panelmain"> <img src="css/icons/stickgirl.png"> </a> <span> </span> </li> </ul> <div class="panelsmain"> <div id="starks-panelmain" class="panelmain spactive"> <div class="stiemo"><img src="emoticons/Emoji_Smileys/Emoji_Smiley-01.png" class="sm-sticker" sticker="(w1)"> </div> </div>  <div id="lannisters-panelmain" class="panelmain"> TAB2 CONTENT </div> <div id="targaryens-panelmain" class="panelmain"> TAB3 CONTENT </div> </div> </div>';

$(document).ready(function () {

    $('body').on('click', '.sm-sticker', function(event) {
        event.preventDefault();
        var theComment = $(this).parents('.user-post').find('.add-y-comment');
        var id = $(this).attr('id');
        var sticker = $(this).attr('sticker');
        var msg = jQuery.trim(theComment.val());

        if(msg == ''){
            var sp = '';
        } else {
            var sp = ' ';
        }

        theComment.val(jQuery.trim(msg + sp + sticker + sp));
    });
    $('body').on('click', '.sm-stickerB', function(e) {
        e.preventDefault();
        var theComment = $(this).parents('.user-post').find('.add-y-comment');
        var id = $(this).attr('id');
        var stickerB = $(this).attr('sticker');
        var msg = jQuery.trim(theComment.val());

        if(msg == ''){
            var sp = '';
        } else {
            var sp = ' ';
        }

        theComment.val(jQuery.trim(msg + sp + stickerB + sp));
		var e = $.Event("keydown");
        e.keyCode = 13; // # Some key code value
		theComment.trigger(e);
		$('body').find('.user-container').html("");
		
    });
    function showProfileTooltip(e, id) {
        //send id & get info from get_profile.php 
        $.ajax({
            url: 'emoticonsmain.php',
            data: {
                html: response,
                delay: 0
            },
            method: 'post',
			beforeSend: function() {
                $('#ajax-loading',e).addClass('active');    
            },
            success: function (returnHtml) { 
	            $('#ajax-loading',e).removeClass('active');
                e.find('.user-container').html(returnHtml).promise().done(function () {
                    $('.emoticon').addClass('eactive');
                    componentHandler.register({
                    constructor: MaterialTabs,
                    classAsString: 'MaterialTabsMain',
                    cssClass: 'MaterialTabsMain'
                    });
                });
            }
        });

    }
    // instead of this
    /*
    $('body').on('click', '.emoticon', function(e) {
    var id = $(this).find('.emoticon_click').attr('data-id');
    showProfileTooltip($(this), id);
});
    $(this).on( "click", function() {
  $(this).find('.user-container').html("");
});
*/
    
    // we need this
    
    //$('body').on('click', '.emoticon', function(e) {
    $('body').on('click', '.emoticon_click', function(e) {
        // clear all user container at the begining of this click event
        $('body').find('.user-container').html("");
                
        // find id
    	var id = $(this).attr('data-id');

        // find the parent, which also contains sibling
        // user-container
        var parent = $(this).parent()

        // let the target be initiated
    	showProfileTooltip($(parent), id);
	});
    
    $(this).on( "click", function() {
  		//$(this).find('.user-container').html("");
	});
    $('body').on( "click", function(e) {
        var isParentEmotion = $(e.toElement).parents(".emoticon").length > 0 ;
        if(isParentEmotion){
            return;
        }
  		$('body').find('.user-container').html("");
	});

var componentHandler = function() {
  'use strict';

  var registeredComponents_ = [];
  var createdComponents_ = [];

  function findRegisteredClass_(name, opt_replace) {
    for (var i = 0; i < registeredComponents_.length; i++) {
      if (registeredComponents_[i].className === name) {
        if (opt_replace !== undefined) {
          registeredComponents_[i] = opt_replace;
        }
        return registeredComponents_[i];
      }
    }
    return false;
  }

  function upgradeDomInternal(jsClass, cssClass) {
    if (cssClass === undefined) {
      var registeredClass = findRegisteredClass_(jsClass);
      if (registeredClass) {
        cssClass = registeredClass.cssClass;
      }
    }

    var elements = document.querySelectorAll('.' + cssClass);
    for (var n = 0; n < elements.length; n++) {
      upgradeElementInternal(elements[n], jsClass);
    }
  }

  function upgradeElementInternal(element, jsClass) {
    if (element.getAttribute('data-upgraded') === null) {
      element.setAttribute('data-upgraded', '');
      var registeredClass = findRegisteredClass_(jsClass);
      if (registeredClass) {
        createdComponents_.push(new registeredClass.classConstructor(element));
      } else {
        createdComponents_.push(new window[jsClass](element));
      }
    }
  }

  function registerInternal(config) {
    var newConfig = {
      'classConstructor': config.constructor,
      'className': config.classAsString,
      'cssClass': config.cssClass
    };

    var found = findRegisteredClass_(config.classAsString, newConfig);

    if (!found) {
      registeredComponents_.push(newConfig);
    }
    
    upgradeDomInternal(config.classAsString);
  }

  return {
    upgradeDom: upgradeDomInternal,
    upgradeElement: upgradeElementInternal,
    register: registerInternal
  };
}();




function MaterialTabs(element) {
  'use strict';
  this.element_ = element;
  this.init();
}

MaterialTabs.prototype.Constant_ = {
  MEANING_OF_LIFE: '42',
  SPECIAL_WORD: 'HTML5',
  ACTIVE_CLASS: 'spactive'
};
MaterialTabs.prototype.CssClasses_ = {
  SHOW: 'materialShow',
  HIDE: 'materialHidden'
};

MaterialTabs.prototype.initTabs_ = function(e) {
  'use strict';
  this.tabs_   = this.element_.querySelectorAll('.tab');
  this.panels_ = this.element_.querySelectorAll('.panelmain');
  for (var i=0; i < this.tabs_.length; i++) {
    new MaterialTab(this.tabs_[i], this); 
  }
};

MaterialTabs.prototype.resetTabState_ = function() {
  for (var k=0; k < this.tabs_.length; k++) {
    this.tabs_[k].classList.remove('spactive');
  }  
};

MaterialTabs.prototype.resetPanelState_ = function() {
  for (var j=0; j < this.panels_.length; j++) {
    this.panels_[j].classList.remove('spactive');
  } 
};

function MaterialTab (tab, ctx) {  
  if (tab) {
    var link = tab.querySelector('a');
    
    link.addEventListener('click', function(e){
      e.preventDefault();
      var href = link.href.split('#')[1];
      var panel = document.querySelector('#' + href);
      ctx.resetTabState_();
      ctx.resetPanelState_();
      tab.classList.add('spactive');
      panel.classList.add('spactive');
    });   
    
  }
};


MaterialTabs.prototype.init = function() {
  if (this.element_) {
    this.initTabs_();
  }
}


window.addEventListener('load', function() {
  componentHandler.register({
    constructor: MaterialTabs,
    classAsString: 'MaterialTabsMain',
    cssClass: 'MaterialTabsMain'
  });
});
});
