// ==UserScript==
// @name            GDriveThumnailScrap
// @description     GDriveThumnail video user script
// @author          Provetic
// @namespace       provetic/fbext
// @homepageURL     https://greasyfork.org/en/scripts/XXXXX
// @icon            https://dl.dropbox.com/s/j3vuagrdc6yte8s/glarge96-min.png?dl=0
// @require         https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @include         /https?:\/\/videoarsip-wp\.test\/*/
// @include         /https?:\/\/media\.tnkdp\.id/*/
// @version         0.1
// @timestamp       1530531966704
// @grant           GM_log
// @grant           document-end
// ==/UserScript==
/**
 * RTFM
 *
 * Use this additional params in URL for particular purpose:
 *
 * Eg. www.instagram.com/jokowi
 *
 * window.alert(new Date().getTime());
 */
(function() {
  function main_script($){
    'use strict';

    // Global Variables
    var gvar = function(){};
    gvar.__DEBUG__ = 1;

    gvar.version = {
      number: '0.1',
      timestamp: '1530531966704'
    };

    gvar.root_selector = '#UseyourDrive';
    gvar.root_player = gvar.root_selector+' .jp-jplayer';

    gvar.thumbnail_link = '';
    gvar.observe_timeout = 35;

    gvar.stIDomWatch = null;


    // ============================

    var KS = 'KEY_SAVE_',
        GMSTORAGE_PATH  = 'GM_',
        OPTIONS_BOX = {
          KEY_SAVE_URL_SEARCH: [''],
          KEY_SAVE_BULK: ['']
        }
    ;

    function GM_addGlobalStyle(a, b, c) {
      var d, e;
      if (a.match(/^https?:\/\/.+/)) {
        d = createEl("link", { type: "text/css", rel:'stylesheet', href:a });
      }else{
        d = createEl("style", { type: "text/css" });
        d.appendChild(createTextEl(a));
      }
      if (isDefined(b) && isString(b)) d.setAttribute("id", b);
      if (isDefined(c) && c) {
        document.body.insertBefore(d, document.body.firstChild)
      } else {
        e = document.getElementsByTagName("head");
        if (isDefined(e[0]) && e[0].nodeName == "HEAD") setTimeout(function () {
          e[0].appendChild(d)
        }, 100);
        else document.body.insertBefore(d, document.body.firstChild)
      }
      return d
    }
    function _show_alert(msg, force) {
      if (gvar.counter)
        gvar.counter++;
      else
        gvar.counter = 1;

      // Emulated GM_Log suck showing real value of object
      if (gvar.ApiUpgrade){
        if (!(typeof msg == 'number' || typeof msg == 'string'))
          msg = JSON.stringify(msg);
      }


      if("function" == typeof GM_log){
        var isText = (['string','number'].indexOf(typeof msg) !== -1);

        GM_log("(" + gvar.counter + ") " + (!isText ? "[OBJ]" : msg));
        if( !isText )
          GM_log(msg);
      }
      else{

        if( console && console.log ) console.log(msg);
      }
      if( !force )
        return !1;
    }

    //=== mini-functions
    // static routine
    function isDefined(x)   { return !(x == null && x !== null) }
    function isUndefined(x) { return x == null && x !== null }
    function isString(x) { return (typeof(x)!='object' && typeof(x)!='function') }
    function trimStr(x) { return (typeof(x)=='string' && x ? x.replace(/^\s+|\s+$/g,"") : '') }
    function clog(x){
      if( !gvar.__DEBUG__ )
        return !1;

      _show_alert( x );
    }
    function createTextEl(a) {
      return document.createTextNode(a)
    }
    function createEl(a, b, c) {
      var d = document.createElement(a);
      for (var e in b) if (b.hasOwnProperty(e)) d.setAttribute(e, b[e]);
      if (c) d.innerHTML = c;
      return d
    }
    // ====

    // templating & assigning events
    function design(){
      let $root = $(gvar.root_selector);

      var wH = $(window).height(),
          treshold = 70,
          $title = $('title'),
          selectMe = function(){}
      ;

      // css-ing
      var buffCSS,
          tpl = '',
          CSS = ''
            // Hider (last-resort)
            +'#hide{display: none!important;}'
            +'.wrap_thscraper{position:relative; text-align:center; border-bottom: 2px; border:1px solid green;}'
            +'.thumbnail-link{width: 100%; padding: 6px 10px!important; font-size: 12px; font-family: courier, monospace;}'
            +'.button.download-thumbnail-link{margin-top: 10px!important;}'
            +'.button.download-thumbnail-link:hover{color: #fff!important;}'
      ;

  

      GM_addGlobalStyle(CSS, 'gdrv-css-styles');

      tpl = ''
        +'<div class="wrap_thscraper">'
        + '<p>Thumbnail-url</p>'
        + '<input type="text" class="thumbnail-link" readonly="readonly" value="'+gvar.thumbnail_link+'" />'
        + '<a href="'+gvar.thumbnail_link+'" class="button download-thumbnail-link" target="_blank">View</a>'
        +'</div>'
      ;
      $root.append(tpl);



      // -=-=-=
      // Events
      $root.find('.thumbnail-link').on('click', function(){
        $(this).focus().select();
      });
    }

    function main(){
      clog('Initialize...');

      // Invalidate oberser
      if (gvar.observer){
        clog('Disconnecting observer..');
        try{
          gvar.observer.disconnect();
        }catch(e){}
      }

      setTimeout(function(){
        var $root = $(gvar.root_selector),
            $playlist = $root.find('.jp-playlist'),
            offset = 0
        ;

        if ($playlist.length)
          offset = $playlist.offset();

        $('html,body').animate({scrollTop: offset.top}, 0, function(){});
      }, 1521);


      clog('Design..');
      design();
    }

    // Observe any change in given element
    function observe(element, params){
      clog('Observing dom change..');

      // create an observer instance
      var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
      var observer = new MutationObserver(function(mutations) {
        var BreakException = {};
        try{
          mutations.forEach(function(mutation) {
            // var $el = $(mutation.target);
            // if( is_observed ) throw BreakException;

            if ('function' == typeof params.callback)
              params.callback( mutation.target );
          });
        }catch(e){

          if (e!==BreakException) throw e;
        }
      });
       
      // configuration of the observer:
      var config = $.extend({
        attributes: true,
        childList: true,
        characterData: true
      }, params.config);
      
      // pass in the target node, as well as the observer options
      observer.observe(element, config);
       
      // later, you can stop observing
      // observer.disconnect();
      gvar.observer = observer;
    }

    /**
     * Igniter
     * 
     * Here we initialize observing page has been loaded properly
     * which identified with change in particular element.
     * 
     * Dual method to watch using observer and interval of checking dom.
     */
    (function init_observer(){
      clog('init_observer..');

      gvar.stIDomWatch = setInterval(function(){
        let $wrap = $(gvar.root_player),
            $img = null
        ;
        if ($wrap.length){

          $img = $wrap.find('#jp_poster_0');
          if ($img.length)
            gvar.thumbnail_link = $img.attr('src');
        }

        if (gvar.thumbnail_link){
          clog('[OK] gvar.thumbnail_link found via stIDomWatch');
          clog('gvar.thumbnail_link='+gvar.thumbnail_link);

          clearInterval(gvar.stIDomWatch);

          clog('Running main script..');
          main();
        }
      }, 12);
    })();
  }
  // main_script

  setTimeout(function(){
    var _$ = jQuery ? jQuery.noConflict():null;
    if( _$ )
      _$(function(){

        main_script( _$ );
      })
  }, 123)
})();