☰

ImageFAQs

Converts image and webm URLs into their embedded form

当前为 2016-05-03 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        ImageFAQs
  3. // @namespace   FightingGames@gfaqs
  4. // @include     http://www.gamefaqs.com
  5. // @include     http://www.gamefaqs.com*
  6. // @icon        http://fightinggames.bitbucket.org/imagefaqs/icon.png
  7. // @description Converts image and webm URLs into their embedded form
  8. // @version     1.18.5
  9. // @grant       GM_addStyle
  10. // @grant       GM_getResourceText
  11. // @grant       GM_log
  12. // @grant       GM_xmlhttpRequest
  13. // @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
  14. // @require     https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js
  15. // @resource    jqueryuibaseCSS https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.base.css
  16. // @resource    jqueryuithemeCSS https://code.jquery.com/ui/1.11.4/themes/cupertino/jquery-ui.css
  17. // ==/UserScript==
  18.  
  19.  
  20.  
  21. /* 
  22.     The MIT License (MIT)
  23.  
  24.     This greasemonkey script for GameFAQs converts image and webm
  25.     links into their embedded form. It can be considered as a spiritual successor
  26.     to text-to-image for GameFAQs. Many of its features are inspired from appchan x
  27.     by zixaphir at http://zixaphir.github.io/appchan-x/.
  28.     
  29.     Copyright (c) 2015 FightingGames@gamefaqs <adrenalinebionicarm@gmail.com>
  30.     Copyright (c) 2015 FeaturingDante@gamefaqs <featuringDante@gmail.com>
  31.  
  32.     Permission is hereby granted, free of charge, to any person obtaining a copy
  33.     of this software and associated documentation files (the "Software"), to deal
  34.     in the Software without restriction, including without limitation the rights
  35.     to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  36.     copies of the Software, and to permit persons to whom the Software is
  37.     furnished to do so, subject to the following conditions:
  38.  
  39.     The above copyright notice and this permission notice shall be included in
  40.     all copies or substantial portions of the Software.
  41.  
  42.     THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  43.     IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  44.     FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  45.     AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  46.     LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  47.     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  48.     THE SOFTWARE.
  49.  
  50. */
  51.  
  52. /*
  53. Get number of keys in a primitive java object
  54. */
  55. Object.size = function(obj) {
  56.     var size = 0
  57.     var key;
  58.     
  59.     for (key in obj) {
  60.         if (obj.hasOwnProperty(key)) 
  61.             size++;
  62.     }
  63.     return size;
  64. };
  65.  
  66.  
  67. /*
  68. Below is a collection of functions to iterate through HTML objects (e.g. step from <b></b> to <img/>)
  69. https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM
  70. */
  71.  
  72.  
  73. /*
  74.  * Determine whether a node's text content is entirely whitespace.
  75.  *
  76.  * @param nod  A node implementing the |CharacterData| interface (i.e.,
  77.  *             a |Text|, |Comment|, or |CDATASection| node
  78.  * @return     True if all of the text content of |nod| is whitespace,
  79.  *             otherwise false.
  80.  */
  81. function is_all_ws( nod )
  82. {
  83.   // Use ECMA-262 Edition 3 String and RegExp features
  84.   return !(/[^\t\n\r ]/.test(nod.textContent));
  85. }
  86.  
  87.  
  88. /*
  89.  * Determine if a node should be ignored by the iterator functions.
  90.  *
  91.  * @param nod  An object implementing the DOM1 |Node| interface.
  92.  * @return     true if the node is:
  93.  *                1) A |Text| node that is all whitespace
  94.  *                2) A |Comment| node
  95.  *             and otherwise false.
  96.  */
  97.  
  98. function is_ignorable( nod )
  99. {
  100.   return ( nod.nodeType == 8) || // A comment node
  101.          ( (nod.nodeType == 3) && is_all_ws(nod) ); // a text node, all ws
  102. }
  103.  
  104. /*
  105.  * Version of |previousSibling| that skips nodes that are entirely
  106.  * whitespace or comments.  (Normally |previousSibling| is a property
  107.  * of all DOM nodes that gives the sibling node, the node that is
  108.  * a child of the same parent, that occurs immediately before the
  109.  * reference node.)
  110.  *
  111.  * @param sib  The reference node.
  112.  * @return     Either:
  113.  *               1) The closest previous sibling to |sib| that is not
  114.  *                  ignorable according to |is_ignorable|, or
  115.  *               2) null if no such node exists.
  116.  */
  117. function node_before( sib )
  118. {
  119.   while ((sib = sib.previousSibling)) {
  120.     if (!is_ignorable(sib)) return sib;
  121.   }
  122.   return null;
  123. }
  124.  
  125. /*
  126.  * Version of |nextSibling| that skips nodes that are entirely
  127.  * whitespace or comments.
  128.  *
  129.  * @param sib  The reference node.
  130.  * @return     Either:
  131.  *               1) The closest next sibling to |sib| that is not
  132.  *                  ignorable according to |is_ignorable|, or
  133.  *               2) null if no such node exists.
  134.  */
  135. function node_after( sib )
  136. {
  137.   while ((sib = sib.nextSibling)) {
  138.     if (!is_ignorable(sib)) return sib;
  139.   }
  140.   return null;
  141. }
  142.  
  143. /*
  144.  * Version of |lastChild| that skips nodes that are entirely
  145.  * whitespace or comments.  (Normally |lastChild| is a property
  146.  * of all DOM nodes that gives the last of the nodes contained
  147.  * directly in the reference node.)
  148.  *
  149.  * @param sib  The reference node.
  150.  * @return     Either:
  151.  *               1) The last child of |sib| that is not
  152.  *                  ignorable according to |is_ignorable|, or
  153.  *               2) null if no such node exists.
  154.  */
  155. function last_child( par )
  156. {
  157.   var res=par.lastChild;
  158.   while (res) {
  159.     if (!is_ignorable(res)) return res;
  160.     res = res.previousSibling;
  161.   }
  162.   return null;
  163. }
  164.  
  165. /*
  166.  * Version of |firstChild| that skips nodes that are entirely
  167.  * whitespace and comments.
  168.  *
  169.  * @param sib  The reference node.
  170.  * @return     Either:
  171.  *               1) The first child of |sib| that is not
  172.  *                  ignorable according to |is_ignorable|, or
  173.  *               2) null if no such node exists.
  174.  */
  175. function first_child( par )
  176. {
  177.   var res=par.firstChild;
  178.   while (res) {
  179.     if (!is_ignorable(res)) return res;
  180.     res = res.nextSibling;
  181.   }
  182.   return null;
  183. }
  184.  
  185. /*
  186.  * Version of |data| that doesn't include whitespace at the beginning
  187.  * and end and normalizes all whitespace to a single space.  (Normally
  188.  * |data| is a property of text nodes that gives the text of the node.)
  189.  *
  190.  * @param txt  The text node whose data should be returned
  191.  * @return     A string giving the contents of the text node with
  192.  *             whitespace collapsed.
  193.  */
  194. function data_of( txt )
  195. {
  196.   var data = txt.textContent;
  197.   // Use ECMA-262 Edition 3 String and RegExp features
  198.   data = data.replace(/[\t\n\r ]+/g, " ");
  199.   if (data.charAt(0) == " ")
  200.     data = data.substring(1, data.length);
  201.   if (data.charAt(data.length - 1) == " ")
  202.     data = data.substring(0, data.length - 1);
  203.   return data;
  204. }
  205.  
  206. /*End of HTML object iterator functions*/
  207.  
  208.  
  209.  
  210.  
  211.  
  212.  
  213.  
  214. /*Get our own unique jQuery library instance*/
  215. this.$ = this.jQuery = jQuery.noConflict(true);
  216.  
  217.  
  218.  
  219.  
  220.  
  221.  
  222. /*
  223. Display a notification on the bottom-right of the browser.
  224.  
  225. @param msg :: string to put between <span></span>
  226. @param duration :: number of milliseconds to display message before it disappears. Default 1000
  227. */
  228. function showNotification(msg, duration)
  229. {
  230.     var notificationBox = $("#imagefaqs_notificationBox");
  231.     notificationBox.remove();
  232.     
  233.     $("body").append(
  234.         "<div id='imagefaqs_notificationBox'>" +
  235.             "<span style='color: black'>" +
  236.                 msg +
  237.             "</span>" +
  238.         "</div>"
  239.     );
  240.     
  241.     notificationBox = $("#imagefaqs_notificationBox");
  242.  
  243.     notificationBox.css({
  244.         "position": "absolute",
  245.         "top": ($(window).scrollTop() + $(window).height() - notificationBox.height())+"px",
  246.         "left": ($(window).scrollLeft() + $(window).width() - notificationBox.find("span").width())+"px",
  247.         "background": "white",
  248.     });
  249.  
  250.     if (duration === undefined) 
  251.         duration = 1000;
  252.     
  253.     notificationBox.effect("highlight").delay(duration).fadeOut(500);
  254. }
  255.  
  256.  
  257.  
  258.  
  259.  
  260.  
  261. /*This top portion of the script handles the settings box and local storage*/
  262.  
  263. var thumbnailImgWidth = 150;
  264. var thumbnailImgHeight = 150;
  265. var thumbnailImgWidthSig = 75;
  266. var thumbnailImgHeightSig = 75;
  267. var settingsJSON = localStorage.getItem("imagefaqs");        
  268. var settings;       /*key-value array of JSON*/
  269. var sessionResizeHotkey;
  270. var sessionHideToggleHotkey;
  271. var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;      /*osdep*/
  272.  
  273. function setSettingsToDefault() {
  274.     
  275.     settings = {
  276.         enable_sigs: true,
  277.         enable_floatingImg: true,
  278.         includeSigWhenExpanding: false,
  279.         hideSigsWhenHideMode: false,
  280.         show_imgURLspan: true,
  281.         show_imgResolutionSpan: true,
  282.         show_imgFilesizeSpan: false,
  283.         show_imgGoogle: true,
  284.         show_imgIqdb: true,
  285.         show_blacklistToggle: true,
  286.         show_imgAllResizeToggles: true,
  287.         show_hideToggle: true,
  288.         show_hideAllToggle: true,
  289.         imgContainerStyle: "sideBySideSig",
  290.         auto_scroll_when_thumbnail_clicked: true,
  291.         thumbnailWidth: thumbnailImgWidth,
  292.         thumbnailHeight: thumbnailImgHeight,
  293.         thumbnailWidthSig: thumbnailImgWidthSig,
  294.         thumbnailHeightSig: thumbnailImgHeightSig,
  295.         expandedWidth: 0,
  296.         expandedHeight: 0,
  297.         imgContainerBackgroundColor: "#DFE6F7",
  298.         isHideMode: false,
  299.         hideToggleHotkey: {115: 115},  /*F4*/
  300.         resizeHotkey: {113: 113},  /*F2*/
  301.         blacklistStr: ""
  302.     };
  303. }
  304.  
  305. /*if imageFAQs was freshly installed*/
  306. if (settingsJSON === null)
  307. {
  308.     setSettingsToDefault();
  309.     
  310.     localStorage.setItem("imagefaqs", JSON.stringify(settings));    /*save default settings*/
  311.     
  312.     /*gfaqsdep for URL*/
  313.     showNotification("ImageFAQs "+GM_info.script.version+" has successfully been installed.<br/><br/>Settings can be accessed under 'Quick Links' at <a target='_blank' href='http://www.gamefaqs.com/user'>http://www.gamefaqs.com/user</a>", 10000);
  314. }
  315. else 
  316. {
  317.     settings = $.parseJSON(settingsJSON);
  318.     
  319.     if (settings.expandedWidth === undefined)
  320.         settings.expandedWidth = 0;
  321.     
  322.     if (settings.expandedHeight === undefined)
  323.         settings.expandedHeight = 0;
  324.     
  325.     if (settings.show_imgURLspan === undefined)
  326.         settings.show_imgURLspan = true;
  327.     
  328.     if (settings.show_imgResolutionSpan === undefined)
  329.         settings.show_imgResolutionSpan = true;
  330.     
  331.     if (settings.show_imgFilesizeSpan === undefined)
  332.         settings.show_imgFilesizeSpan = true;
  333.     
  334.     if (settings.show_imgGoogle === undefined)
  335.         settings.show_imgGoogle = true;
  336.     
  337.     if (settings.show_imgIqdb === undefined)
  338.         settings.show_imgIqdb = true;
  339.     
  340.     if (settings.show_blacklistToggle === undefined)
  341.         settings.show_blacklistToggle = true;
  342.     
  343.     if (settings.show_imgAllResizeToggles === undefined)
  344.         settings.show_imgAllResizeToggles = true;
  345.     
  346.     if (settings.show_hideToggle === undefined)
  347.         settings.show_hideToggle = true;
  348.     
  349.     if (settings.show_hideAllToggle === undefined)
  350.         settings.show_hideAllToggle = true;
  351.     
  352.     if (settings.isHideMode === undefined)
  353.         settings.isHideMode = false;
  354.     
  355.     if (settings.enable_floatingImg === undefined)
  356.         settings.enable_floatingImg = true;
  357.     
  358.     if (settings.imgContainerStyle === undefined)
  359.         settings.imgContainerStyle = "sideBySideSig";
  360.     
  361.     if (settings.auto_scroll_when_thumbnail_clicked === undefined)
  362.         settings.auto_scroll_when_thumbnail_clicked = true;
  363.     
  364.     if (settings.resizeHotkey === undefined || $.isEmptyObject(settings.resizeHotkey))
  365.         settings.resizeHotkey = {113: 113};
  366.     
  367.     if (settings.hideToggleHotkey === undefined || $.isEmptyObject(settings.hideToggleHotkey))
  368.         settings.hideToggleHotkey = {115: 115};
  369.     
  370.     if (settings.includeSigWhenExpanding === undefined)
  371.         settings.includeSigWhenExpanding = false;
  372.     
  373.     if (settings.hideSigsWhenHideMode === undefined)
  374.         settings.hideSigsWhenHideMode = false;
  375.     
  376.     if (settings.thumbnailWidth === undefined)
  377.         settings.thumbnailWidth = thumbnailImgWidth;
  378.     
  379.     if (settings.thumbnailHeight === undefined)
  380.         settings.thumbnailHeight = thumbnailImgHeight;
  381.     
  382.     if (settings.thumbnailWidthSig === undefined)
  383.         settings.thumbnailWidthSig = thumbnailImgWidthSig;
  384.     
  385.     if (settings.thumbnailHeightSig === undefined)
  386.         settings.thumbnailHeightSig = thumbnailImgHeightSig;
  387.     
  388.     localStorage.setItem("imagefaqs", JSON.stringify(settings));  
  389. }
  390.  
  391.  
  392.  
  393. /*
  394. Convert an ASCII numeric representation of a keyboard character to its full string name
  395.  
  396. e.g. keyCodeToString(16) === "shift"
  397. */
  398. function keyCodeToString(keyCode)
  399. {
  400.     keyCode = parseInt(keyCode);
  401.     
  402.     if (keyCode === 16)
  403.     {
  404.         return "shift";
  405.     }
  406.     else if (keyCode === 17)
  407.     {
  408.         return "ctrl";
  409.     }
  410.     else if (keyCode === 18)
  411.     {
  412.         return "alt";
  413.     }
  414.     else if (keyCode >= 112 && keyCode <= 123)       /*F keys*/
  415.     {
  416.         return "F" + (keyCode - 111);
  417.     }
  418.     else
  419.     {
  420.         return String.fromCharCode(keyCode);
  421.     }
  422. }
  423.  
  424.  
  425. /*
  426. Convert an array of KV ASCII numeric representation of keyboard characters to its
  427. full string representation
  428.  
  429. e,g, keyCodeKVArrayToString([{68:68},{77:77}]) === "DM"
  430. */
  431. function keyCodeKVArrayToString(array)
  432. {
  433.     var string = "";
  434.     
  435.     for (var key in array)
  436.     {
  437.         string += keyCodeToString(key) + " ";
  438.     }
  439.     
  440.     return string;
  441. }
  442.  
  443.  
  444. /*
  445. Get a copy of an array of KV's using 1-level deep cloning.
  446. */
  447. function cloneKVArray(KVArray)
  448. {
  449.     var newKVArray = {};
  450.     
  451.     for (var key in KVArray)
  452.     {
  453.         newKVArray[key] = KVArray[key];
  454.     }
  455.     
  456.     return newKVArray;
  457. }
  458.  
  459.  
  460.  
  461. sessionHideToggleHotkey = cloneKVArray(settings.hideToggleHotkey);
  462. sessionResizeHotkey = cloneKVArray(settings.resizeHotkey);
  463.  
  464.  
  465.  
  466. /*Event where user opens up settings menu*/
  467. $("body").on("click", "#imagefaqs_settings_but", function(event) {
  468.  
  469.     var popupBox = $("#imagefaqs_settings_popup");
  470.     event.preventDefault();
  471.     
  472.     if (popupBox.length === 0)
  473.     {
  474.         $("body").append(
  475.             "<div id='imagefaqs_settings_popup' title='ImageFAQs Settings. Version "+GM_info.script.version+"'>" +
  476.             
  477.                 "Update history: <a target='_blank' href='http://fightinggames.bitbucket.org/imagefaqs/' style='outline: 0'>http://fightinggames.bitbucket.org/imagefaqs/</a>" +
  478.                 "<br/>" +
  479.                 "<span id='feedback_bugreport_info'>" +
  480.                     "Feedback and bug reporting: <a target='_blank' href='http://www.gamefaqs.com/boards/565885-blood-money'>http://www.gamefaqs.com/boards/565885-blood-money</a>" +
  481.                     "<br/>" +
  482.                 "</span>" +
  483.                 
  484.                 "<fieldset>" +
  485.                     "<legend>Main</legend>" + 
  486.                     "<label><input id='enable_floatingImg' type='checkbox'>Enable floating expanded image upon cursor hover</label>" +
  487.                     "<br/>" +
  488.                     "<label><input id='auto_scroll_when_thumbnail_clicked_checkbox' type='checkbox'>Auto-scroll to top of image after toggling visibility or size</label>" +
  489.                 "</fieldset>" +
  490.                 
  491.                 "<fieldset>" +
  492.                     "<legend>Signature-specific</legend>" + 
  493.                     "<label><input id='enable_sigs_checkbox' type='checkbox'>Embed signature images</label>" +
  494.                     "<br/>" +
  495.                     "<label><input id='includeSigWhenExpanding_checkbox' type='checkbox'>Affect signature images when expanding and contracting all images</label>" +
  496.                     "<br/>" +
  497.                     "<label><input id='hideSigsWhenHideMode_checkbox' type='checkbox'>Affect signature images when toggling hide mode</label>" +
  498.                 "</fieldset>" +
  499.                 
  500.                 "<fieldset>" +
  501.                     "<legend>Image Container Toggles and Information Visibility</legend>" + 
  502.                     "<label><input id='show_ImgURLspan_checkbox' type='checkbox'>Show image URL</label>" +
  503.                     "<br/>" +
  504.                     "<label><input id='show_ImgResolutionSpan_checkbox' type='checkbox'>Show image resolution</label>" +
  505.                     "<br/>" +
  506.                     "<label><input id='show_imgFilesizeSpan_checkbox' type='checkbox'>Show image filesize (Currently slow for Chrome)</label>" +
  507.                     "<br/>" +
  508.                     "<label><input id='show_imgGoogle_checkbox' type='checkbox'>Show google reverse image search button</label>" +
  509.                     "<br/>" +
  510.                     "<label><input id='show_imgIqdb_checkbox' type='checkbox'>Show iqdb reverse image search button</label>" +
  511.                     "<br/>" +
  512.                     "<label><input id='show_blacklistToggle_checkbox' type='checkbox'>Show blacklist toggle button</label>" +
  513.                     "<br/>" +
  514.                     "<label><input id='show_imgAllResizeToggles_checkbox' type='checkbox'>Show all-resize toggle buttons</label>" +
  515.                     "<br/>" +
  516.                     "<label><input id='show_hideAllToggle_checkbox' type='checkbox'>Show all-hide/expose toggle buttons</label>" +
  517.                     "<br/>" +
  518.                     "<label><input id='show_hideToggle_checkbox' type='checkbox'>Show individual hide/expose toggle button</label>" +
  519.                 "</fieldset>" +
  520.                 
  521.                 "<fieldset>" +
  522.                     "<legend>Image Container Style</legend>" + 
  523.                     "<label><input type='radio' name='imgContainerStyle' value='stacked' checked='checked'>Stacked and Verbose</label>" +
  524.                     "<br>" +
  525.                     "<label><input type='radio' name='imgContainerStyle' value='sideBySide'>Side-By-Side and Succinct</label>" +
  526.                     "<br>" +
  527.                     "<label><input type='radio' name='imgContainerStyle' value='sideBySideSig'>Side-By-Side and Succinct (Signatures Only)</label>" +
  528.                 "</fieldset>" +
  529.                 
  530.                 "<label><input id='thumbnailImgWidth_text' type='text'>Thumbnail Max-Width (150 default)</label>" +
  531.                 "<br/>" +
  532.                 "<label><input id='thumbnailImgHeight_text' type='text'>Thumbnail Max-Height (150 default)</label>" +
  533.                 "<br/>" +
  534.                 "<label><input id='thumbnailImgWidthSig_text' type='text'>Signature Thumbnail Max-Width (75 default)</label>" +
  535.                 "<br/>" +
  536.                 "<label><input id='thumbnailImgHeightSig_text' type='text'>Signature Thumbnail Max-Height (75 default)</label>" +
  537.                 "<br/>" +
  538.                 "<label><input id='expandedWidth_text' type='text'>Expanded max-width (0 default)</label>" +
  539.                 "<br/>" +
  540.                 "<label><input id='expandedHeight_text' type='text'>Expanded max-height (0 default)</label>" +
  541.                 "<br/ style='margin-bottom: 5px'>" +
  542.                 "<span>Tip: Use 0 to specify no length restriction.</span>" +
  543.                 "<br/><br/>" +
  544.                 
  545.                 "<input id='imgContainerBackgroundColor_color' type='color' value='#DFE6F7' size=4 ><label>Image container background color (RGB={223,230,247} default)</label>" +
  546.                 "<br/ style='margin-bottom: 5px'>" +
  547.                 "<span>Tip: Use RGB={0,0,0} for no background color.</span>" +
  548.                 "<br/><br/>" +
  549.                 
  550.                 "<label>Newline separated list of blacklisted image URLs</label>" +
  551.                 "<br/>" +
  552.                 "<textarea id='blacklist_text'></textarea>" +
  553.                 "<br/ style='margin-bottom: 5px'>" +
  554.                 "<span>Tip: You can blacklist an entire domain (e.g. pbsrc.com).</span>" +
  555.                 "<br/><br/>" +
  556.                 
  557.                 "<label><input id='resizeHotkey_text' class='hotkeyInput' type='text'>Toggle image size hotkey (F2 default)</label>" +
  558.                 "<br/>" +
  559.                 "<label><input id='hideToggleHotkey_text' class='hotkeyInput' type='text'>Toggle hide mode hotkey (F4 default)</label>" +
  560.                 "<br/ style='margin-bottom: 5px'>" +
  561.                 "<span>Tip: You can disable a hotkey with the backspace.</span>" +
  562.                 "<br/><br/>" +
  563.                 
  564.                 "<button id='saveImagefaqsSettingsBut' type='button'>Save</button> " +
  565.                 "<button id='cancelImagefaqsSettingsBut' type='button'>Cancel</button> " +
  566.                 "<span id='responseSpan'>&nbsp;&nbsp;</span>" +     /*for reporting success or failure*/
  567.                 
  568.                 "<button id='defaultSettingsBut' type='button' style='float: right'>Reset Settings</button> " +
  569.             "</div>"
  570.         );
  571.         
  572.         popupBox = $("#imagefaqs_settings_popup");
  573.     }
  574.  
  575.     /*Show user's custom settings*/
  576.     
  577.     popupBox.find("#enable_sigs_checkbox").prop("checked", settings.enable_sigs);
  578.     popupBox.find("#enable_floatingImg").prop("checked", settings.enable_floatingImg);
  579.     
  580.     popupBox.find("#includeSigWhenExpanding_checkbox").prop("checked", settings.includeSigWhenExpanding);
  581.     popupBox.find("#hideSigsWhenHideMode_checkbox").prop("checked", settings.hideSigsWhenHideMode);
  582.     
  583.     popupBox.find("#show_ImgURLspan_checkbox").prop("checked", settings.show_imgURLspan);
  584.     popupBox.find("#show_ImgResolutionSpan_checkbox").prop("checked", settings.show_imgResolutionSpan);
  585.     popupBox.find("#show_imgFilesizeSpan_checkbox").prop("checked", settings.show_imgFilesizeSpan);
  586.     popupBox.find("#show_imgGoogle_checkbox").prop("checked", settings.show_imgGoogle);
  587.     popupBox.find("#show_blacklistToggle_checkbox").prop("checked", settings.show_blacklistToggle);
  588.     popupBox.find("#show_imgIqdb_checkbox").prop("checked", settings.show_imgIqdb);
  589.     popupBox.find("#show_imgAllResizeToggles_checkbox").prop("checked", settings.show_imgAllResizeToggles);
  590.     popupBox.find("#show_hideToggle_checkbox").prop("checked", settings.show_hideToggle);
  591.     popupBox.find("#show_hideAllToggle_checkbox").prop("checked", settings.show_hideAllToggle);
  592.     
  593.     popupBox.find("input[value="+settings.imgContainerStyle+"]").prop("checked", true);
  594.     popupBox.find("#auto_scroll_when_thumbnail_clicked_checkbox").prop("checked", settings.auto_scroll_when_thumbnail_clicked);
  595.     
  596.     popupBox.find("#thumbnailImgWidth_text").val(settings.thumbnailWidth);
  597.     popupBox.find("#thumbnailImgHeight_text").val(settings.thumbnailHeight);
  598.     popupBox.find("#thumbnailImgWidthSig_text").val(settings.thumbnailWidthSig);
  599.     popupBox.find("#thumbnailImgHeightSig_text").val(settings.thumbnailHeightSig);
  600.     popupBox.find("#expandedWidth_text").val(settings.expandedWidth);
  601.     popupBox.find("#expandedHeight_text").val(settings.expandedHeight);
  602.     
  603.     /*"#000000" will be changed to "0" for transparency in the imgContainerBackgroundColor global var*/
  604.     popupBox.find("#imgContainerBackgroundColor_color").val(settings.imgContainerBackgroundColor);
  605.     
  606.     popupBox.find("#resizeHotkey_text").val( keyCodeKVArrayToString(settings.resizeHotkey) );
  607.     popupBox.find("#hideToggleHotkey_text").val( keyCodeKVArrayToString(settings.hideToggleHotkey) );
  608.     popupBox.find("#blacklist_text").val( settings.blacklistStr );
  609.     $("#imagefaqs_settings_popup").children("#responseSpan").html("&nbsp;");
  610.     
  611.     popupBox.dialog({
  612.         width: 630,
  613.         height: 800     /*adds a scrollbar*/
  614.     });
  615.     
  616.     popupBox.find("#blacklist_text").width(popupBox.width());
  617. });
  618.  
  619.  
  620.  
  621.  
  622. $("body").on("click", "#defaultSettingsBut", function(event) {
  623.     event.preventDefault();
  624.     
  625.     var settingsPopup = $("#imagefaqs_settings_popup");
  626.     
  627.     setSettingsToDefault();
  628.     
  629.     settingsPopup.find("#enable_sigs_checkbox").prop("checked", settings.enable_sigs);
  630.     settingsPopup.find("#enable_floatingImg").prop("checked", settings.enable_floatingImg);
  631.     
  632.     settingsPopup.find("#includeSigWhenExpanding_checkbox").prop("checked", settings.includeSigWhenExpanding);
  633.     settingsPopup.find("#hideSigsWhenHideMode_checkbox").prop("checked", settings.hideSigsWhenHideMode);
  634.     
  635.     settingsPopup.find("#show_ImgURLspan_checkbox").prop("checked", settings.show_imgURLspan);
  636.     settingsPopup.find("#show_ImgResolutionSpan_checkbox").prop("checked", settings.show_imgResolutionSpan);
  637.     settingsPopup.find("#show_imgFilesizeSpan_checkbox").prop("checked", settings.show_imgFilesizeSpan);
  638.     settingsPopup.find("#show_imgGoogle_checkbox").prop("checked", settings.show_imgGoogle);
  639.     settingsPopup.find("#show_blacklistToggle_checkbox").prop("checked", settings.show_blacklistToggle);
  640.     settingsPopup.find("#show_imgIqdb_checkbox").prop("checked", settings.show_imgIqdb);
  641.     settingsPopup.find("#show_imgAllResizeToggles_checkbox").prop("checked", settings.show_imgAllResizeToggles);
  642.     settingsPopup.find("#show_hideToggle_checkbox").prop("checked", settings.show_hideToggle);
  643.     settingsPopup.find("#show_hideAllToggle_checkbox").prop("checked", settings.show_hideAllToggle);
  644.     
  645.     settingsPopup.find("input[value="+settings.imgContainerStyle+"]").prop("checked", true);
  646.     settingsPopup.find("#auto_scroll_when_thumbnail_clicked_checkbox").prop("checked", settings.auto_scroll_when_thumbnail_clicked);
  647.     
  648.     settingsPopup.find("#thumbnailImgWidth_text").val(settings.thumbnailWidth);
  649.     settingsPopup.find("#thumbnailImgHeight_text").val(settings.thumbnailHeight);
  650.     settingsPopup.find("#thumbnailImgWidthSig_text").val(settings.thumbnailWidthSig);
  651.     settingsPopup.find("#thumbnailImgHeightSig_text").val(settings.thumbnailHeightSig);
  652.     settingsPopup.find("#expandedWidth_text").val(settings.expandedWidth);
  653.     settingsPopup.find("#expandedHeight_text").val(settings.expandedHeight);
  654.     
  655.     settingsPopup.find("#imgContainerBackgroundColor_color").val(settings.imgContainerBackgroundColor);
  656.     settingsPopup.find("#resizeHotkey_text").val( keyCodeKVArrayToString(settings.resizeHotkey) );
  657.     settingsPopup.find("#hideToggleHotkey_text").val( keyCodeKVArrayToString(settings.hideToggleHotkey) );
  658.     settingsPopup.find("#blacklist_text").val( settings.blacklistStr );
  659.     $("#imagefaqs_settings_popup").children("#responseSpan").html("&nbsp;");
  660.     
  661.     localStorage.setItem("imagefaqs", JSON.stringify(settings));
  662.     reportResponseMsgInImagefaqsSettingsPopupBox("Default settings saved.", settingsPopup);
  663. });
  664.  
  665.  
  666.  
  667. /*Event where users clicks on the "Save Settings" button*/
  668. $("body").on("click", "#saveImagefaqsSettingsBut", function(event) {
  669.  
  670.     event.preventDefault();
  671.     
  672.     var settingsPopup = $("#imagefaqs_settings_popup");
  673.    
  674.     /*if valid thumbnail dimensions*/
  675.     if (
  676.         !isNaN($("#thumbnailImgWidth_text").val()) && $("#thumbnailImgWidth_text").val() >= 0 &&
  677.         !isNaN($("#thumbnailImgHeight_text").val()) && $("#thumbnailImgHeight_text").val() >= 0 &&
  678.         !isNaN($("#thumbnailImgWidthSig_text").val()) && $("#thumbnailImgWidthSig_text").val() >= 0 &&
  679.         !isNaN($("#thumbnailImgHeightSig_text").val()) && $("#thumbnailImgHeightSig_text").val() >= 0)
  680.     {
  681.         settings.thumbnailWidth = $("#thumbnailImgWidth_text").val();
  682.         settings.thumbnailHeight = $("#thumbnailImgHeight_text").val();
  683.         settings.thumbnailWidthSig = $("#thumbnailImgWidthSig_text").val();
  684.         settings.thumbnailHeightSig = $("#thumbnailImgHeightSig_text").val();
  685.     }
  686.     else 
  687.     {
  688.         reportResponseMsgInImagefaqsSettingsPopupBox("Error: Invalid thumbnail dimensions. Use non-negative integers only.", settingsPopup);
  689.         return;
  690.     }
  691.     
  692.     /*if valid expanded dimensions*/
  693.     if (
  694.         !isNaN($("#expandedWidth_text").val()) && $("#expandedWidth_text").val() >= 0 &&
  695.         !isNaN($("#expandedHeight_text").val()) && $("#expandedHeight_text").val() >= 0)
  696.     {
  697.         settings.expandedWidth = $("#expandedWidth_text").val();
  698.         settings.expandedHeight = $("#expandedHeight_text").val();
  699.     }
  700.     else 
  701.     {
  702.         reportResponseMsgInImagefaqsSettingsPopupBox("Error: Invalid expanded dimensions. Use non-negative integers only.", settingsPopup);
  703.         return;
  704.     }
  705.     
  706.     /*if valid image container background color*/
  707.     if (settingsPopup.find("#imgContainerBackgroundColor_color").val().search(/^(#[a-zA-Z0-9]{6})|0$/i) >= 0)
  708.     {
  709.         settings.imgContainerBackgroundColor = settingsPopup.find("#imgContainerBackgroundColor_color").val();
  710.     }
  711.     else 
  712.     {
  713.         reportResponseMsgInImagefaqsSettingsPopupBox("Error: Invalid image container background color.", settingsPopup);
  714.         return;
  715.     }
  716.     
  717.     settings.enable_sigs = settingsPopup.find("#enable_sigs_checkbox").prop("checked");
  718.     settings.enable_floatingImg = settingsPopup.find("#enable_floatingImg").prop("checked");
  719.     
  720.     settings.includeSigWhenExpanding = settingsPopup.find("#includeSigWhenExpanding_checkbox").prop("checked");
  721.     settings.hideSigsWhenHideMode = settingsPopup.find("#hideSigsWhenHideMode_checkbox").prop("checked");
  722.     
  723.     settings.show_imgURLspan = settingsPopup.find("#show_ImgURLspan_checkbox").prop("checked");
  724.     settings.show_imgResolutionSpan = settingsPopup.find("#show_ImgResolutionSpan_checkbox").prop("checked");
  725.     settings.show_imgFilesizeSpan = settingsPopup.find("#show_imgFilesizeSpan_checkbox").prop("checked");
  726.     settings.show_imgGoogle = settingsPopup.find("#show_imgGoogle_checkbox").prop("checked");
  727.     settings.show_imgIqdb = settingsPopup.find("#show_imgIqdb_checkbox").prop("checked");
  728.     settings.show_blacklistToggle = settingsPopup.find("#show_blacklistToggle_checkbox").prop("checked");
  729.     settings.show_imgAllResizeToggles = settingsPopup.find("#show_imgAllResizeToggles_checkbox").prop("checked");
  730.     settings.show_hideToggle = settingsPopup.find("#show_hideToggle_checkbox").prop("checked");
  731.     settings.show_hideAllToggle = settingsPopup.find("#show_hideAllToggle_checkbox").prop("checked");
  732.     
  733.     settings.imgContainerStyle = settingsPopup.find("input[name=imgContainerStyle]:checked").val();
  734.     settings.auto_scroll_when_thumbnail_clicked = settingsPopup.find("#auto_scroll_when_thumbnail_clicked_checkbox").prop("checked");
  735.     
  736.     settings.resizeHotkey = cloneKVArray(sessionResizeHotkey);
  737.     settings.hideToggleHotkey = cloneKVArray(sessionHideToggleHotkey);
  738.     settings.blacklistStr = settingsPopup.find("#blacklist_text").val();
  739.     
  740.     localStorage.setItem("imagefaqs", JSON.stringify(settings));
  741.     
  742.     reportResponseMsgInImagefaqsSettingsPopupBox("Settings saved.", settingsPopup);
  743. });
  744.  
  745.  
  746.  
  747. /*
  748. Display a notification in the settings window
  749.  
  750. @param msg :: message string to show to the user
  751. @param box :: $("#imagefaqs_settings_popup")
  752. */
  753. function reportResponseMsgInImagefaqsSettingsPopupBox(msg, box)
  754. {
  755.     var msgBox = box.children("#responseSpan");
  756.     
  757.     msgBox.html(msg);
  758.     msgBox.effect("highlight");
  759. }
  760.  
  761.  
  762. /*Event when users clicks on the "Cancel" button the settings window.*/
  763. $("body").on("click", "#cancelImagefaqsSettingsBut", function(event) {
  764.  
  765.     event.preventDefault();
  766.     $("#imagefaqs_settings_popup").dialog("close");
  767. });
  768.  
  769.  
  770.  
  771.  
  772.  
  773.  
  774. /*Begin main scripting*/
  775. (function(){
  776.  
  777. var isHideMode = settings.isHideMode;
  778. var enable_floatingImg = settings.enable_floatingImg;
  779.  
  780. var includeSigWhenExpanding = settings.includeSigWhenExpanding;
  781. var hideSigsWhenHideMode = settings.hideSigsWhenHideMode;
  782.  
  783. var show_imgURLspan = settings.show_imgURLspan;
  784. var show_imgResolutionSpan = settings.show_imgResolutionSpan;
  785. var show_imgFilesizeSpan = settings.show_imgFilesizeSpan;
  786. var show_imgGoogle = settings.show_imgGoogle;
  787. var show_imgIqdb = settings.show_imgIqdb;
  788. var show_blacklistToggle = settings.show_blacklistToggle;
  789. var show_imgResizeToggles = settings.show_imgAllResizeToggles;
  790. var show_hideToggle = settings.show_hideToggle;
  791. var show_hideAllToggle = settings.show_hideAllToggle;
  792.  
  793. var imgContainerStyle = settings.imgContainerStyle;
  794. var autoScrollWhenThumbnailClicked = settings.auto_scroll_when_thumbnail_clicked;
  795.  
  796. var thumbnailImgWidth = settings.thumbnailWidth;
  797. var thumbnailImgHeight = settings.thumbnailHeight;
  798. var thumbnailImgWidthSig = settings.thumbnailWidthSig;
  799. var thumbnailImgHeightSig = settings.thumbnailHeightSig;
  800. var expandedImgWidth = settings.expandedWidth;
  801. var expandedImgHeight = settings.expandedHeight;
  802.  
  803. var imgContainerBackgroundColor = settings.imgContainerBackgroundColor;
  804. if (imgContainerBackgroundColor === "#000000") {
  805.     imgContainerBackgroundColor = 0;
  806. }
  807.  
  808. var blacklist = settings.blacklistStr.split("\n");    /*array of URLs to block*/
  809. var currentURL;
  810. var pageType;       /* "topic" or "postPreview" or "other" */
  811. var allowImgInSig = settings.enable_sigs;
  812. var floatingImgWidth;
  813. var floatingImgRightOffset = 50;
  814. var floatingImgBorder = 10;
  815. var currentHoveredThumbnail = null;
  816. var imgAnchorTags = [];
  817.  
  818. var expandedImgWidth_css = expandedImgWidth == 0 ? "" : expandedImgWidth+"px";
  819. var expandedImgHeight_css = expandedImgHeight == 0 ? "" : expandedImgHeight+"px";
  820.  
  821.  
  822. var heldDownKeys = {};
  823. $("body").on("keydown", "#imagefaqs_settings_popup #hideToggleHotkey_text", function(event){
  824.    
  825.     heldDownKeys[event.which] = event.which;
  826.     sessionHideToggleHotkey = cloneKVArray(heldDownKeys);
  827.     
  828.     $(this).val(
  829.         keyCodeKVArrayToString(sessionHideToggleHotkey)
  830.     );
  831.  
  832.     return false;
  833. });
  834.  
  835. $("body").on("keydown", "#imagefaqs_settings_popup #resizeHotkey_text", function(event){
  836.    
  837.     heldDownKeys[event.which] = event.which;
  838.     sessionResizeHotkey = cloneKVArray(heldDownKeys);
  839.     
  840.     $(this).val(
  841.         keyCodeKVArrayToString(sessionResizeHotkey)
  842.     );
  843.  
  844.     return false;
  845. });
  846.  
  847.  
  848. $("body").on("keyup", "#imagefaqs_settings_popup .hotkeyInput", function(event){
  849.     delete heldDownKeys[event.which];
  850.     return false;
  851. });
  852.  
  853. $("body").on("keypress", "#imagefaqs_settings_popup .hotkeyInput", function(event){
  854.     event.preventDefault();
  855. });
  856.  
  857.  
  858.  
  859. /*
  860. Toggle between "display" and "hide" images.
  861. */
  862. function toggleImageVisiblity(embeddedImgContainers, via)
  863. {
  864.     if (via === "hotkey")
  865.         isHideMode = !isHideMode;
  866.  
  867.     /*If set images to be hidden...*/
  868.     if ((via === "hotkey" && isHideMode) ||
  869.         via === "closeAnchor")
  870.     {
  871.         if (pageType !== "other")
  872.         {
  873.             embeddedImgContainers.each(function(index, element) {
  874.                 if ($(this).hasClass("isHidable") && !$(this).hasClass("hidden")) {
  875.                     hideMedia($(this), false);
  876.                 }
  877.             });
  878.  
  879.             if (via === "hotkey")
  880.                 showNotification("ImageFAQs: All images hidden.");
  881.         }
  882.         else 
  883.         {
  884.             if (via === "hotkey")
  885.                 showNotification("ImageFAQs: Images will be hidden.");
  886.         }
  887.     }
  888.     else 
  889.     {
  890.         if (pageType !== "other")
  891.         {
  892.             embeddedImgContainers.each(function(index, element) {
  893.                 if ($(this).hasClass("hidden")) {
  894.                     showMedia($(this), false);
  895.                 }
  896.             });
  897.             
  898.             if (via === "hotkey")
  899.                 showNotification("ImageFAQs: All images exposed.");
  900.         }
  901.         else 
  902.         {
  903.             if (via === "hotkey")
  904.                 showNotification("ImageFAQs: Images will be exposed.");
  905.         }
  906.     }
  907.     
  908.     settings.isHideMode = isHideMode;
  909.     localStorage.setItem("imagefaqs", JSON.stringify(settings));
  910. }
  911.  
  912.  
  913.  
  914.  
  915.  
  916. var nextImageSize = "expanded";
  917. $("body").keydown(function(event){
  918.  
  919.     var key;
  920.     var numMatchingPressedHotkeys;
  921.     var desiredAction = "";
  922.     heldDownKeys[event.which] = event.which;
  923.  
  924.     
  925.     /*if backspace, ignore*/
  926.     if (heldDownKeys[8] === 8)
  927.     {
  928.         return;
  929.     }
  930.     
  931.  
  932.     /*are every hide mode hotkey pressed?*/
  933.     numMatchingPressedHotkeys = 0;
  934.     for (key in settings.hideToggleHotkey)
  935.     {
  936.         if (settings.hideToggleHotkey[key] !== heldDownKeys[key])
  937.         {
  938.             break;
  939.         }
  940.         
  941.         numMatchingPressedHotkeys++;
  942.     }
  943.     if (numMatchingPressedHotkeys === Object.size(settings.hideToggleHotkey) && numMatchingPressedHotkeys > 0)
  944.     {
  945.         desiredAction = "toggleHideMode";
  946.     }
  947.     
  948.     
  949.     
  950.  
  951.     /*is every resize hotkey pressed?*/
  952.     if (desiredAction === "")
  953.     {
  954.         numMatchingPressedHotkeys = 0;
  955.         for (key in settings.resizeHotkey)
  956.         {
  957.             if (settings.resizeHotkey[key] !== heldDownKeys[key])
  958.             {
  959.                 break;
  960.             }
  961.             numMatchingPressedHotkeys++;
  962.         }
  963.         if (numMatchingPressedHotkeys === Object.size(settings.resizeHotkey) && numMatchingPressedHotkeys > 0)
  964.         {
  965.             desiredAction = "toggleImageResize";
  966.         }
  967.     }
  968.     
  969.     
  970.     
  971.     if (desiredAction === "toggleHideMode")
  972.     {
  973.         toggleImageVisiblity($(".embeddedImgContainer"), "hotkey");
  974.     }
  975.     else if (desiredAction === "toggleImageResize")
  976.     {
  977.         if (nextImageSize === "expanded")
  978.         {
  979.             toggleSizesOfImages($(".embeddedImg"), true);
  980.             nextImageSize = "thumbnail";
  981.             showNotification("ImageFAQs: Expanded all images.");
  982.         }
  983.         else 
  984.         {
  985.             toggleSizesOfImages($(".embeddedImg.expandedImg"), false);
  986.             nextImageSize = "expanded";
  987.             showNotification("ImageFAQs: Shrunk all images.");
  988.         }
  989.     }
  990. });
  991.  
  992.  
  993.  
  994.  
  995. $("body").keyup(function(event){
  996.     delete heldDownKeys[event.which];
  997. });
  998.  
  999.  
  1000.  
  1001.  
  1002.  
  1003.  
  1004.  
  1005. if (blacklist.length === 1 && blacklist[0] === "")
  1006. {
  1007.     blacklist = [];
  1008. }
  1009. else 
  1010. {
  1011.     /*trim white space*/
  1012.     for (var i = 0; i < blacklist.length; i++)
  1013.     {
  1014.         blacklist[i].trim();
  1015.     }
  1016. }
  1017.  
  1018.  
  1019.  
  1020.  
  1021.  
  1022.  
  1023.  
  1024. function isURLmatchBlacklistedURL(url, blacklistedURL)
  1025. {
  1026.     blacklistedURL = blacklistedURL.trim();
  1027.     
  1028.     /*escape everything*/
  1029.     var blacklistedURLregex = 
  1030.         new RegExp( blacklistedURL.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&") );
  1031.  
  1032.     if (blacklistedURLregex.exec(url) !== null)
  1033.     {
  1034.         return true;
  1035.     }
  1036.     else
  1037.     {
  1038.         return false;
  1039.     }
  1040. }
  1041.  
  1042.  
  1043. /*
  1044. Is the url string in the blacklist?
  1045.  
  1046. @url :: string of the url to check 
  1047. @blacklist :: array of blacklisted urls
  1048.  
  1049. Returns true or false
  1050. */
  1051. function isURLinBlacklist(url, blacklist)
  1052. {
  1053.     for (var i = 0; i < blacklist.length; i++)
  1054.     {
  1055.         if (isURLmatchBlacklistedURL(url, blacklist[i]))
  1056.         {
  1057.             return true;
  1058.         }
  1059.     }
  1060.     
  1061.     return false;
  1062. }
  1063.  
  1064.  
  1065.  
  1066.  
  1067. $(window).scroll(function() {
  1068.     
  1069.     var notificationBoxes = $("body").children("#imagefaqs_notificationBox");
  1070.     
  1071.     notificationBoxes.each(function(index, element) {
  1072.         $(this).css({
  1073.             "top": ($(window).scrollTop() + $(window).height() - $(this).height())+"px",
  1074.             "left": ($(window).scrollLeft() + $(window).width() - $(this).find("span").width())+"px"
  1075.         });
  1076.     });
  1077. });
  1078.  
  1079.  
  1080.  
  1081.  
  1082.  
  1083. currentURL = window.location.href;
  1084. pageType = currentURL.search(/.*gamefaqs\.com\/boards\/.*\/.*/i);               /*gfaqsdep*/
  1085. if (currentURL.search(/.*gamefaqs\.com\/boards\/.*\/.*/i) >= 0)                 /*gfaqsdep*/
  1086. {
  1087.     pageType = "topic";
  1088. }
  1089. else if (currentURL.search(/.*gamefaqs\.com\/boards\/post/i) >= 0)              /*gfaqsdep*/
  1090. {
  1091.     pageType = "postPreview";
  1092. }
  1093. else if (currentURL.search(/.*gamefaqs\.com\/user[^\/]*$/i) >= 0)               /*gfaqsdep*/
  1094. {
  1095.     /*add settings link*/  /*gfaqsdep*/
  1096.     $("div.body tbody:eq(2)").append("<tr><td colspan='2'><a id='imagefaqs_settings_but' href='#'>ImageFAQs Options</a> - Change thumbnail size, enable signature embedding, and more.</td></tr>");
  1097. }
  1098. else 
  1099. {
  1100.     pageType = "other";
  1101. }
  1102.  
  1103.  
  1104.  
  1105.  
  1106. if (pageType === "other")
  1107. {
  1108.     return;
  1109. }
  1110.  
  1111.  
  1112.  
  1113. GM_addStyle (GM_getResourceText("jqueryuibaseCSS"));
  1114. GM_addStyle (GM_getResourceText("jqueryuithemeCSS"));
  1115.  
  1116.  
  1117.  
  1118.  
  1119.  
  1120. GM_addStyle (
  1121.     ".embeddedImgContainer {" +
  1122.         "background: "+imgContainerBackgroundColor+";" +
  1123.     "}" +
  1124.     ".embeddedImgAnchor {"+
  1125.         "display: inline-block;"+
  1126.     "}" +
  1127.     ".thumbnailImg {"+
  1128.         "display: inline-block;"+  /*prevents parent anchor from stretching horizontally*/
  1129.         "vertical-align: bottom;"+ /*eliminates small gap between bottom of image and parent div*/
  1130.     "}" +
  1131.     ".expandedImg {" +
  1132.         "display: inline-block;" +
  1133.         "vertical-align: bottom;" +
  1134.     "}" +
  1135.     ".imgMenuButton {" +
  1136.         "overflow: hidden;" +
  1137.         "position: absolute;" +
  1138.         "text-align: center;" +
  1139.         "z-index: 90;" +
  1140.         "background-color: #99FFCC;" +
  1141.         "opacity: 0.5;" +
  1142.         "pointer-events: none;" +
  1143.     "}" +
  1144.     ".imgMenuButton_symbol {" +
  1145.         "display: table-cell;" +
  1146.         "vertical-align: middle;" +
  1147.     "}" +
  1148.     ".imgMenuItem {" +
  1149.         "display: block;" +
  1150.     "}" +
  1151.     ".imgMenuItemAnchor {" +
  1152.         "display: block;" +
  1153.     "}" +
  1154.     ".imgMenu {" +
  1155.         "background-color: #CCFFFF;" +
  1156.         "opacity: 0.9;" +
  1157.         "border-style: solid;" +
  1158.         "border-width: 1px;" +
  1159.     "}" +
  1160.     ".ui-widget { " +       /*shrink font size in the settings menu*/
  1161.         "font-size:96%;" +
  1162.     "}" +
  1163.     "#imagefaqs_settings_popup input { " +
  1164.         "margin-right: 5px;" +
  1165.     "}" +
  1166.     "#imagefaqs_settings_popup a { " +
  1167.         "color: blue;" +
  1168.     "}"
  1169. );
  1170.  
  1171.  
  1172.  
  1173.  
  1174.  
  1175. $("body").css("position", "relative");
  1176. var posts = null;
  1177.  
  1178. posts = $("div.msg_body");                  /*gfaqsdep*/
  1179.  
  1180.  
  1181.  
  1182.  
  1183. /*for each user post*/
  1184. posts.each(function(index, element) {
  1185.  
  1186.     var postHtml;
  1187.     var unanchoredImgURLMatches;
  1188.     var sigStrIdx;
  1189.     var anchorTags;
  1190.     var idxAfterAnchorTagInPostHtml = 0;
  1191.     
  1192.     postHtml = $(this).html();
  1193.     
  1194.     /*if in post preview mode, need to manually parse through the preview message body and 
  1195.     replace every plain-text image URL in its anchor form*/
  1196.     if (pageType === "postPreview")
  1197.     {
  1198.         postHtml = postHtml.replace(/https?:\/\/[^<>\s]*?\.(?:png|jpg|gif|jpeg|webm|gifv)[^<>\s]*/ig, "<a href='$&'>$&</a>");
  1199.         
  1200.         $(this).html(postHtml);
  1201.     }
  1202.     
  1203.     /*get all anchor tags*/
  1204.     anchorTags = $(this).find("a");
  1205.  
  1206.     /*filter in anchor tags that refer to images*/
  1207.     anchorTags.each(function(index, element) {
  1208.         
  1209.         var anchorURL = $(this).attr("href");
  1210.         var anchorTagStrIdx = postHtml.indexOf(anchorURL + "</a>", idxAfterAnchorTagInPostHtml);
  1211.         idxAfterAnchorTagInPostHtml = anchorTagStrIdx + anchorURL.length + 4;
  1212.         
  1213.         if (anchorURL.search(/https?:\/\/[^<>\s]*?\.(?:png|jpg|gif|jpeg|webm|gifv)/i) >= 0)
  1214.         {
  1215.             /*if anchor is within of sig*/                  
  1216.             if ($(this).parent().hasClass("sig_text"))  /*gfaqsdep*/
  1217.             {
  1218.                 if (allowImgInSig)
  1219.                     $(this).addClass("withinSig");
  1220.                 else
  1221.                     return;
  1222.             }
  1223.             
  1224.             $(this).addClass("imgAnchor");
  1225.             imgAnchorTags.push($(this));
  1226.         }
  1227.     });
  1228. });
  1229.  
  1230.  
  1231.  
  1232.  
  1233.  
  1234. var imgAnchorIdx = 0;
  1235.  
  1236. /*for each valid image URL anchor tag, replace with template div for embedded image*/
  1237. for (var imgAnchor of imgAnchorTags)
  1238. {
  1239.     var imgURL = imgAnchor.html();
  1240.     var imageType = imgURL.split(".").pop();
  1241.     var imgWithinSig_class = imgAnchor.hasClass("withinSig") ? "withinSig" : "";
  1242.     var imgIsHidable_class = allowImgInSig && imgAnchor.hasClass("withinSig") && !hideSigsWhenHideMode ? "" : "isHidable";
  1243.     var imgInitiallyBlacklisted_class = "";
  1244.     var imgSpoilersTagged_class = imgAnchor.closest("s").length > 0 ? "spoilersTagged" : "";
  1245.     var imgSize;
  1246.     var imgInfoEleStr;
  1247.     var postID;
  1248.     var isBlacklisted;
  1249.     var imgContainerStyle_attr;
  1250.     
  1251.     isBlacklisted = isURLinBlacklist(imgURL, blacklist);
  1252.     if (isBlacklisted)
  1253.         imgInitiallyBlacklisted_class = "initiallyBlacklisted";
  1254.     
  1255.     imgContainerStyle_attr = imgContainerStyle;
  1256.     if (imgContainerStyle_attr === "sideBySideSig") 
  1257.     {
  1258.         if (imgWithinSig_class === "withinSig")
  1259.             imgContainerStyle_attr = "sideBySide";
  1260.         else
  1261.             imgContainerStyle_attr = "stacked";
  1262.     }
  1263.     
  1264.     if (imageType === "gifv")
  1265.         imgURL = imgURL.replace(/gifv$/i, "webm");
  1266.  
  1267.     if (pageType === "topic")
  1268.     {
  1269.         postID = imgAnchor.closest(".msg_body_box").siblings(".msg_infobox").children("a").attr("name");           /*gfaqsdep*/
  1270.     }
  1271.     else    /*if in post preview mode, need to provide missing message ID*/ 
  1272.     {
  1273.         imgAnchor.closest("td").addClass("msg_body");                   /*gfaqsdep*/
  1274.         imgAnchor.closest(".msg_body").attr("name", 0);                 /*gfaqsdep*/
  1275.         postID = 0;
  1276.     }
  1277.     
  1278.     var imgURLspan = "";
  1279.     var imgResolutionSpan = "";
  1280.     var imgFilesizeSpan = "";
  1281.     var imgGoogleReverse = "";
  1282.     var imgIQDBreverse = "";
  1283.     var imgBlacklistToggle = "";
  1284.     var imgCloseAll = "";
  1285.     var imgClosePost = "";
  1286.     var imgExpandPost = "";
  1287.     var imgExpandAll = "";
  1288.     var imgHideToggle = "";
  1289.     var imgHideAllToggles = "";
  1290.     
  1291.     if (imgContainerStyle_attr === "stacked")
  1292.     {
  1293.         if (show_imgURLspan)
  1294.         {
  1295.             imgURLspan = 
  1296.                 "<span style='margin-right: 5px'>" +
  1297.                     "<a target='_blank' href="+imgURL+">"+imgURL+"</a>" +
  1298.                 "</span>";
  1299.         }
  1300.             
  1301.         if (show_imgResolutionSpan)
  1302.         {
  1303.             imgResolutionSpan = 
  1304.                 "<span class='imgResolution' style='margin-right: 5px'>" +
  1305.                 "</span>";
  1306.         }
  1307.         
  1308.         if (show_imgFilesizeSpan)
  1309.         {
  1310.             imgFilesizeSpan = 
  1311.                 "<span class='imgFilesize' style='margin-right: 5px'>" +
  1312.                 "</span>";
  1313.         }
  1314.         
  1315.         if (show_imgGoogle)
  1316.         {
  1317.             imgGoogleReverse = 
  1318.                 "<a target='_blank' title='Reverse image search on general images' style='margin-right: 5px' href='https://www.google.com/searchbyimage?image_url="+imgURL+"'>" +
  1319.                     "google" +
  1320.                 "</a>";
  1321.         }
  1322.  
  1323.         if (show_imgIqdb)
  1324.         {
  1325.             imgIQDBreverse = 
  1326.                 "<a target='_blank' title='Reverse image search on weeb images' style='margin-right: 5px' href='http://iqdb.org/?url="+imgURL+"'>" +
  1327.                     "iqdb" +
  1328.                 "</a>";
  1329.         }
  1330.             
  1331.         if (show_blacklistToggle)
  1332.         {
  1333.             if (isBlacklisted)
  1334.             {
  1335.                 imgBlacklistToggle =
  1336.                     "<a class='imgBlacklistToggle' href='#' title='Whitelist image' style='margin-right: 5px'>whitelist</a>"; 
  1337.             }
  1338.             else 
  1339.             {
  1340.                 imgBlacklistToggle =
  1341.                     "<a class='imgBlacklistToggle' href='#' title='Blacklist image' style='margin-right: 5px'>blacklist</a>"; 
  1342.             }
  1343.         }
  1344.         
  1345.         if (show_imgResizeToggles)
  1346.         {
  1347.             imgCloseAll =
  1348.                 "<a class='imgCloseAll' href='#' title='Close all images in page' style='margin-right: 5px'>&lt;&lt;</a>";
  1349.             
  1350.             imgClosePost =
  1351.                 "<a class='imgClosePost' href='#' data-postID='"+postID+"' title='Close all images in post' style='margin-right: 5px'>&lt;</a>";
  1352.             
  1353.             imgExpandPost = 
  1354.                 "<a class='imgExpandPost' href='#' data-postID='"+postID+"' title='Expand all images in post' style='margin-right: 5px'>&gt;</a>";
  1355.             
  1356.             imgExpandAll =
  1357.                 "<a class='imgExpandAll' href='#' title='Expand all images in page' style='margin-right: 5px'>&gt;&gt;</a>";
  1358.         }
  1359.  
  1360.         if (show_hideAllToggle)
  1361.         {
  1362.             imgHideAllToggles = 
  1363.                 "<a class='imgHideAll' href='#' title='Hide all images in page' style='margin-right: 5px'>--</a>" +
  1364.                 "<a class='imgHidePost' href='#' data-postID='"+postID+"' title='Hide all images in post' style='margin-right: 5px'>-</a>" +
  1365.                 "<a class='imgShowPost' href='#' data-postID='"+postID+"' title='Show all images in post' style='margin-right: 5px'>+</a>" +
  1366.                 "<a class='imgShowAll' href='#' title='Show all images in page' style='margin-right: 5px'>++</a>";
  1367.         }
  1368.         
  1369.         if (show_hideToggle)
  1370.         {
  1371.             if (isBlacklisted || imgSpoilersTagged_class === "spoilersTagged" || (isHideMode &&  imgIsHidable_class))
  1372.             {
  1373.                 imgHideToggle = 
  1374.                     "<a class='imgHideToggle' href='#' title='Show image' style='margin-right: 5px'>show</a>";
  1375.             }
  1376.             else 
  1377.             {
  1378.                 imgHideToggle = 
  1379.                     "<a class='imgHideToggle' href='#' title='Hide image' style='margin-right: 5px'>hide</a>";
  1380.             }
  1381.         }
  1382.     }
  1383.      
  1384.     var optionalBreakAfterImgHeader;
  1385.     if ((!show_imgURLspan && !show_imgResolutionSpan && !show_imgFilesizeSpan && !show_imgGoogle && !show_imgIqdb && !show_blacklistToggle && !show_imgResizeToggles && !show_hideToggle && !show_hideAllToggle) 
  1386.             || 
  1387.         imgContainerStyle_attr === "sideBySide")
  1388.     {
  1389.         optionalBreakAfterImgHeader = "";
  1390.     }
  1391.     else 
  1392.     {
  1393.         optionalBreakAfterImgHeader = "<br/>";
  1394.     }
  1395.     
  1396.     imgAnchor.replaceWith(
  1397.         "<div class='embeddedImgContainer "+imgWithinSig_class+" "+imgIsHidable_class+" "+imgInitiallyBlacklisted_class+" "+imgSpoilersTagged_class+"' data-postID='"+postID+"' data-style='"+imgContainerStyle_attr+"'>" +
  1398.             imgURLspan +
  1399.             imgResolutionSpan +
  1400.             imgFilesizeSpan +
  1401.             imgGoogleReverse +
  1402.             imgIQDBreverse +
  1403.             imgBlacklistToggle +
  1404.             imgCloseAll + 
  1405.             imgClosePost + 
  1406.             imgExpandPost +
  1407.             imgExpandAll +
  1408.             imgHideAllToggles +
  1409.             imgHideToggle +
  1410.             optionalBreakAfterImgHeader +
  1411.             "<a class='embeddedImgAnchor' href='" + imgURL + "' data-backup-href='" + imgURL + "' data-idx='"+imgAnchorIdx+"'>" +
  1412.             "</a>" +
  1413.         "</div>"
  1414.     );
  1415.     
  1416.     var embeddedImgAnchor = $(".embeddedImgAnchor[data-idx='"+imgAnchorIdx+"']");
  1417.     var embeddedImgContainer = embeddedImgAnchor.parent();
  1418.     
  1419.     imgAnchorIdx++;
  1420.  
  1421.     /*keep iterating through the next sibling elements until find an element that's 
  1422.     not whitespace*/
  1423.     var curNextEleJS = embeddedImgContainer[0].nextSibling;
  1424.     while (curNextEleJS !== null &&
  1425.            ($(curNextEleJS).is("br") || is_ignorable(curNextEleJS)))
  1426.     {
  1427.         curNextEleJS = curNextEleJS.nextSibling;
  1428.     }
  1429.     
  1430.     /*now do the same thing, but iterating through the previous siblings*/
  1431.     var curPrevEleJS = embeddedImgContainer[0].previousSibling;
  1432.     while (curPrevEleJS !== null &&
  1433.            is_ignorable(curPrevEleJS))
  1434.     {
  1435.         curPrevEleJS = curPrevEleJS.previousSibling;
  1436.     }
  1437.     
  1438.     /*remove the next br elements if next non-whitespace sibling is a going-to-be image*/
  1439.     
  1440.     var curNextEle;
  1441.     if (curNextEleJS !== null && $(curNextEleJS).hasClass("imgAnchor"))
  1442.     {
  1443.         curNextEle = embeddedImgContainer.next();
  1444.         while (curNextEle.length !== 0 && curNextEle.is("br"))
  1445.         {
  1446.             if (curNextEle.next().length === 0)
  1447.             {
  1448.                 curNextEle.remove();
  1449.                 break;
  1450.             }
  1451.             else 
  1452.             {
  1453.                 curNextEle = curNextEle.next();
  1454.                 curNextEle.prev().remove();
  1455.             }
  1456.         }
  1457.     }
  1458.     /*if sig separator after image, remove <br> in between*/
  1459.     else if (curNextEleJS !== null && curNextEleJS.nodeType === 3 && curNextEleJS.nodeValue === "---")
  1460.     {
  1461.         curNextEle = embeddedImgContainer.next();
  1462.         if (curNextEle.is("br"))
  1463.             curNextEle.remove();
  1464.     }
  1465.     /*if text after image*/
  1466.     else if (curNextEleJS !== null && curNextEleJS.nodeType === 3 && curNextEleJS.nodeValue !== "---")
  1467.     {
  1468.         curNextEle = embeddedImgContainer.next();
  1469.         if (curNextEle.is("br"))
  1470.             curNextEle.remove();
  1471.     }
  1472.     
  1473.     if (imgContainerStyle_attr === "sideBySide")
  1474.     {
  1475.         /*if the next non-whitespace sibling not going to be an image, create a newline to
  1476.         set the cursor below this image*/
  1477.         if (curNextEleJS !== null && !$(curNextEleJS).hasClass("imgAnchor"))
  1478.         {
  1479.             $(curNextEleJS).before(
  1480.                 "<div style='display: block;'></div>"
  1481.             );
  1482.         }
  1483.         
  1484.         /*do same with previous non-whitespace sibling*/
  1485.         if (curPrevEleJS !== null && !$(curPrevEleJS).hasClass("embeddedImgContainer"))
  1486.         {
  1487.             $(curPrevEleJS).after(
  1488.                 "<div style='display: block;'></div>"
  1489.             );
  1490.         }
  1491.        
  1492.         /*set container to float*/
  1493.         embeddedImgContainer.css("display", "inline-block");
  1494.         embeddedImgContainer.css("vertical-align", "top");
  1495.         embeddedImgContainer.css("margin-right", "5px");
  1496.         embeddedImgContainer.css("margin-bottom", "5px");
  1497.     }
  1498.     else 
  1499.     {
  1500.         embeddedImgContainer.css("margin-bottom", "10px");
  1501.     }
  1502. }
  1503.  
  1504.  
  1505.  
  1506. function getFileSize(url, span)
  1507. {
  1508.     GM_xmlhttpRequest({
  1509.         method: "GET",
  1510.         url: url,
  1511.         onload: function(response) {
  1512.             
  1513.             var contentLengthStr = response.responseHeaders.match(/Content-Length: \d+/)[0];
  1514.             var fileSizeBytes = parseInt(contentLengthStr.substring(16));
  1515.             
  1516.             var fileSizeDisplayStr;
  1517.             
  1518.             if (fileSizeBytes < 1000000)    /*if less than 1.0MB*/
  1519.             {
  1520.                 fileSizeDisplayStr = Math.round(fileSizeBytes / 1000) + "KB";
  1521.             }
  1522.             else
  1523.             {
  1524.                 fileSizeDisplayStr = (fileSizeBytes / 1000000).toFixed(2) + "MB";
  1525.             }
  1526.  
  1527.             span.html("("+fileSizeDisplayStr+")");
  1528.         }
  1529.     });
  1530. }
  1531.  
  1532.  
  1533.  
  1534. function showMedia(mediaContainer, isToWhitelist)
  1535. {
  1536.     var mediaAnchor = mediaContainer.children(".embeddedImgAnchor");
  1537.     var mediaURL = mediaAnchor.attr("href");
  1538.     var mediaContainerStyle = mediaContainer.attr("data-style");
  1539.     
  1540.     if (!mediaContainer.hasClass("loaded"))
  1541.         loadMedia(mediaContainer);
  1542.     
  1543.     mediaContainer.removeClass("hidden");
  1544.     
  1545.     /*remove url from blacklist*/        
  1546.     var urlIdx = blacklist.indexOf(mediaURL);
  1547.     if (urlIdx > -1)
  1548.     {
  1549.         blacklist.splice(urlIdx, 1);
  1550.     }
  1551.     
  1552.     if (isToWhitelist)
  1553.     {
  1554.         mediaAnchor.removeClass("blacklisted");
  1555.         
  1556.         if (mediaContainerStyle === "stacked" && show_blacklistToggle)
  1557.         {
  1558.             mediaAnchor.siblings(".imgBlacklistToggle").html("blacklist");
  1559.             mediaAnchor.siblings(".imgBlacklistToggle").attr("title", "Blacklist image");
  1560.         }
  1561.     }
  1562.     
  1563.     mediaAnchor.show();
  1564.     
  1565.     if (mediaContainerStyle === "sideBySide")
  1566.     {
  1567.         mediaAnchor.siblings("a.imgMenuItem").remove();
  1568.         mediaAnchor.siblings("div.imgMenuItem").remove();
  1569.         
  1570.         mediaAnchor.attr("style", "");
  1571.         mediaAnchor.parent().css("max-width", "");
  1572.     }
  1573.     else 
  1574.     {
  1575.         if (show_hideToggle)
  1576.         {
  1577.             var imgHideToggle = mediaAnchor.siblings(".imgHideToggle");
  1578.             
  1579.             imgHideToggle.html("hide");
  1580.             imgHideToggle.attr("title", "Hide image");
  1581.         }
  1582.     }
  1583.     
  1584.     settings.blacklistStr = blacklist.join("\n");
  1585.     localStorage.setItem("imagefaqs", JSON.stringify(settings));
  1586. }
  1587.  
  1588.  
  1589.  
  1590. function hideMedia(mediaContainer, isToBlacklist)
  1591. {
  1592.     var mediaAnchor = mediaContainer.children(".embeddedImgAnchor");
  1593.     var media = mediaAnchor.children(".embeddedImg");
  1594.     var mediaURL = mediaAnchor.attr("href");
  1595.     var postID = mediaContainer.attr("data-postID");
  1596.     var mediaContainerStyle = mediaContainer.attr("data-style");
  1597.     var isSig = mediaContainer.hasClass("withinSig");
  1598.     var mediaThumbnailImgWidth = isSig ? thumbnailImgWidthSig : thumbnailImgWidth;
  1599.     var mediaThumbnailImgHeight = isSig ? thumbnailImgHeightSig : thumbnailImgHeight;
  1600.     var mediaThumbnailImgWidth_css = mediaThumbnailImgWidth == 0 ? "" : mediaThumbnailImgWidth+"px";
  1601.     var mediaThumbnailImgHeight_css = mediaThumbnailImgHeight == 0 ? "" : mediaThumbnailImgHeight+"px";
  1602.     
  1603.     /*shrink image*/
  1604.     if (media.hasClass("expandedImg"))
  1605.         toggleSizesOfImages(media, false);
  1606.     
  1607.     mediaContainer.addClass("hidden");
  1608.     mediaAnchor.hide();
  1609.     
  1610.     if (isToBlacklist)
  1611.     {
  1612.         mediaAnchor.addClass("blacklisted");
  1613.         
  1614.         if (blacklist.indexOf(mediaURL) === -1)
  1615.             blacklist.push(mediaURL);
  1616.     }
  1617.     
  1618.     if (mediaContainerStyle === "sideBySide")
  1619.     {
  1620.         mediaContainer.css("max-width", mediaThumbnailImgWidth_css);
  1621.         
  1622.         mediaContainer.append("<a target='_blank' class='imgMenuItem' href="+mediaURL+">"+mediaURL+"</a>");
  1623.         
  1624.         if (mediaAnchor.hasClass("blacklisted"))
  1625.         {
  1626.             if (show_blacklistToggle) 
  1627.             {
  1628.                 mediaContainer.append(
  1629.                     "<div class='imgMenuItem'><a class='imgBlacklistToggle' href='#' title='Whitelist image'>whitelist</a></div>"
  1630.                 );
  1631.             }
  1632.         }
  1633.         
  1634.         if (show_hideAllToggle)
  1635.         {
  1636.             mediaContainer.append(
  1637.                 "<div class='imgMenuItem'>" +
  1638.                     "<a class='imgHideAll' href='#' title='Hide all images in page' style='margin-right: 5px'>--</a>" +
  1639.                     "<a class='imgHidePost' href='#' data-postID='"+postID+"' title='Hide all images in post' style='margin-right: 5px'>-</a>" +
  1640.                     "<a class='imgShowPost' href='#' data-postID='"+postID+"' title='Show all images in post' style='margin-right: 5px'>+</a>" +
  1641.                     "<a class='imgShowAll' href='#' title='Show all images in page' style='margin-right: 5px'>++</a>" +
  1642.                 "</div>"
  1643.             );
  1644.         }
  1645.         
  1646.         if (show_hideToggle)
  1647.         {
  1648.             mediaContainer.append(
  1649.                 "<div class='imgMenuItem'><a class='imgHideToggle' href='#' title='Show image'>show</a></div>"
  1650.             );
  1651.         }
  1652.  
  1653.         hideImgMenu();
  1654.     }
  1655.     else 
  1656.     {
  1657.         if (show_blacklistToggle && isToBlacklist) 
  1658.         {
  1659.             mediaAnchor.siblings(".imgBlacklistToggle").html("whitelist");
  1660.             mediaAnchor.siblings(".imgBlacklistToggle").attr("title", "Whitelist image");
  1661.         }
  1662.     }
  1663.     
  1664.     if (mediaContainerStyle === "sideBySide")
  1665.     {
  1666.         
  1667.     }
  1668.     else
  1669.     {
  1670.         if (show_hideToggle)
  1671.         {
  1672.             var imgHideToggle = mediaAnchor.siblings(".imgHideToggle");
  1673.             
  1674.             imgHideToggle.html("show");
  1675.             imgHideToggle.attr("title", "Show image");
  1676.         }
  1677.     }
  1678.     
  1679.     settings.blacklistStr = blacklist.join("\n");
  1680.     localStorage.setItem("imagefaqs", JSON.stringify(settings));
  1681. }
  1682.  
  1683.  
  1684.  
  1685.  
  1686.  
  1687. function loadMedia(mediaContainer)
  1688. {
  1689.     var mediaAnchor = mediaContainer.children(".embeddedImgAnchor");
  1690.     var mediaResolutionSpan = mediaContainer.children(".imgResolution");
  1691.     var imgFilesize = mediaContainer.children(".imgFilesize");
  1692.     var mediaURL = mediaAnchor.attr("href");
  1693.     var postID = mediaContainer.attr("data-postID");
  1694.     var mediaIdx = mediaContainer.attr("data-idx");
  1695.     var isSig = mediaContainer.hasClass("withinSig");
  1696.     var mediaThumbnailImgWidth = isSig ? thumbnailImgWidthSig : thumbnailImgWidth;
  1697.     var mediaThumbnailImgHeight = isSig ? thumbnailImgHeightSig : thumbnailImgHeight;
  1698.     var mediaThumbnailImgWidth_css = mediaThumbnailImgWidth == 0 ? "" : mediaThumbnailImgWidth+"px";
  1699.     var mediaThumbnailImgHeight_css = mediaThumbnailImgHeight == 0 ? "" : mediaThumbnailImgHeight+"px";
  1700.     
  1701.     mediaContainer.addClass("loaded");
  1702.     
  1703.     if (imgFilesize.length > 0)
  1704.         getFileSize(mediaURL, imgFilesize);
  1705.     
  1706.     var mediaType = mediaURL.split(".").pop();  
  1707.     if (mediaType.search(/(webm)/i) == -1)      /*if image, and not a video*/
  1708.     {
  1709.         var image = new Image();
  1710.         
  1711.         /*on event that image cannot be loaded, post the error*/
  1712.         image.onerror = function() {
  1713.             mediaAnchor.html("Image cannot be loaded.");
  1714.         };
  1715.         
  1716.         /*on event that image loaded successfully in memory*/
  1717.         $(image).load(function() {
  1718.             /*write down image's natural dimensions*/
  1719.             
  1720.             if (mediaResolutionSpan.length > 0)
  1721.             {
  1722.                 mediaResolutionSpan.html(
  1723.                     "(" + image.naturalWidth + "x" + image.naturalHeight + ")"
  1724.                 );
  1725.             }
  1726.         });
  1727.           
  1728.         image.src = mediaURL;
  1729.         
  1730.         $(image).addClass("embeddedImg thumbnailImg");
  1731.         $(image).attr("data-postID", postID);
  1732.         $(image).attr("alt", "");
  1733.         $(image).attr("display", "none");
  1734.         
  1735.         mediaAnchor.html(image);
  1736.         
  1737.         $(image).css("max-width",  getOptimalImgMaxWidth($(image), mediaThumbnailImgWidth) + "px");
  1738.         $(image).css("max-height", mediaThumbnailImgHeight_css); 
  1739.         
  1740.         $(image).attr("display", "");
  1741.     }
  1742.     else
  1743.     {
  1744.         var htmlVideoSrcTag =
  1745.             "<video id='embeddedImg_"+mediaIdx+"' data-postID='"+postID+"' " +
  1746.             "class='embeddedImg webmExt thumbnailImg' " +
  1747.             "style=''>" +
  1748.                 "<source src='" + mediaURL + "' type='video/webm'>" +
  1749.             "</video>"; 
  1750.           
  1751.         mediaAnchor.html(htmlVideoSrcTag);
  1752.         
  1753.         var video = $("#embeddedImg_"+mediaIdx);
  1754.  
  1755.         video.css("max-width",  getOptimalImgMaxWidth(video, mediaThumbnailImgWidth) + "px");
  1756.         video.css("max-height", mediaThumbnailImgHeight_css); 
  1757.         
  1758.         video.attr("display", "");
  1759.  
  1760.         /*when video's metadata has been loaded, record its natural width and resolution*/
  1761.         $("#embeddedImg_"+mediaIdx+"")[0].onloadedmetadata = function() {
  1762.             
  1763.             var video = this;
  1764.             
  1765.             if (mediaResolutionSpan.length > 0)
  1766.             {
  1767.                 mediaResolutionSpan.html(
  1768.                     "(" + video.videoWidth + "x" + video.videoHeight + ")"
  1769.                 );
  1770.             }
  1771.         };
  1772.         
  1773.         $("#embeddedImg_"+mediaIdx+"")[0].addEventListener('error', function(event) {
  1774.             mediaAnchor.html("Video cannot be loaded.");
  1775.         }, true);
  1776.     }
  1777.     
  1778.     if (mediaContainer.hasClass("withinSig"))
  1779.         mediaContainer.find(".embeddedImg").addClass("withinSig");
  1780. }
  1781.  
  1782.  
  1783. /*for each template div, insert an embedded image*/
  1784. $(".embeddedImgContainer").each(function(index, element) {
  1785.     
  1786.     var curEmbeddedImgContainer = $(this);
  1787.     curEmbeddedImgContainer.attr("data-idx", index);
  1788.     
  1789.     if (isHideMode)
  1790.     {
  1791.         if (curEmbeddedImgContainer.hasClass("isHidable"))
  1792.             hideMedia(curEmbeddedImgContainer, false);
  1793.         else 
  1794.             loadMedia(curEmbeddedImgContainer, false);
  1795.     }
  1796.     else
  1797.     {
  1798.         var isBlacklisted = curEmbeddedImgContainer.hasClass("initiallyBlacklisted");
  1799.         var isSpoilersTagged = curEmbeddedImgContainer.hasClass("spoilersTagged");
  1800.         
  1801.         if (isBlacklisted)
  1802.             hideMedia(curEmbeddedImgContainer, true);
  1803.         else if (isSpoilersTagged)
  1804.             hideMedia(curEmbeddedImgContainer, false);
  1805.         else
  1806.             loadMedia(curEmbeddedImgContainer, false);
  1807.     }
  1808. });
  1809.  
  1810.  
  1811. /*
  1812. Get the natural width of an embedded image.
  1813.  
  1814. @image :: jQuery object with the class "embeddedImg"
  1815. */
  1816. function getNatWidthOfEmbeddedImg(image)
  1817. {
  1818.     if (image.hasClass("webmExt"))
  1819.     {
  1820.         return image[0].videoWidth;
  1821.     }
  1822.     else 
  1823.     {
  1824.         return image[0].naturalWidth;
  1825.     }
  1826. }
  1827.  
  1828.  
  1829.  
  1830. /*
  1831. Get the natural width of an embedded image.
  1832.  
  1833. @image :: jQuery object with the class "embeddedImg"
  1834. */
  1835. function getNatHeightOfEmbeddedImg(image)
  1836. {
  1837.     if (image.hasClass("webmExt"))
  1838.     {
  1839.         return image[0].videoHeight;
  1840.     }
  1841.     else 
  1842.     {
  1843.         return image[0].naturalHeight;
  1844.     }
  1845. }
  1846.  
  1847.  
  1848.  
  1849.  
  1850.  
  1851. $("body").append(
  1852.     "<div class='imgMenuButton' style='display: none'>" +
  1853.         "<div class='imgMenuButton_symbol'>" +
  1854.             "+" +
  1855.         "</div>" +
  1856.     "</div>"
  1857. );
  1858. var imgMenuButton = $("body div.imgMenuButton");
  1859.  
  1860.  
  1861. /*
  1862. Show a transparent button in the top-right corner of a thumbnail image.
  1863.  
  1864. @param thumbnail :: embedded thumbnail image
  1865. @param isShow :: true if the button should appear
  1866. */
  1867. function showImgMenuButton(thumbnail, isShow)
  1868. {   
  1869.     if (!show_imgURLspan && !show_imgResolutionSpan && !show_imgFilesizeSpan && !show_imgGoogle && !show_imgIqdb &&
  1870.         !show_blacklistToggle && !show_imgResizeToggles) 
  1871.     {
  1872.         return;
  1873.     }
  1874.  
  1875.     if (isShow)
  1876.     {
  1877.         if (imgMenu !== null && 
  1878.             thumbnail.parent().attr("data-idx") === imgMenu.attr("data-idx"))
  1879.         {
  1880.             imgMenuButton.children().html("-");
  1881.         }
  1882.         else 
  1883.         {
  1884.             imgMenuButton.children().html("+");
  1885.         }
  1886.         
  1887.         imgMenuButton.css("display", "table");
  1888.         imgMenuButton.css("left", (thumbnail.offset().left + thumbnail.width() - 18) + "px");
  1889.         imgMenuButton.css("top", thumbnail.offset().top - 1 + "px");
  1890.         imgMenuButton.css("width", imgMenuButton.height());
  1891.     }
  1892.     else 
  1893.     {
  1894.         imgMenuButton.css("display", "none");
  1895.     }
  1896. }
  1897.  
  1898. function isHoverOverImgMenuButton(clickEvent)
  1899. {
  1900.     if (!show_imgURLspan && !show_imgResolutionSpan && !show_imgFilesizeSpan && !show_imgGoogle && !show_imgIqdb &&
  1901.         !show_blacklistToggle && !show_imgResizeToggles) 
  1902.     {
  1903.         return false;
  1904.     }
  1905.     
  1906.    var isCursorInButton =
  1907.         imgMenuButton.css("display") === "table" &&
  1908.         clickEvent.pageX > imgMenuButton.offset().left &&
  1909.         clickEvent.pageX < imgMenuButton.offset().left + imgMenuButton.width() &&
  1910.         clickEvent.pageY > imgMenuButton.offset().top &&
  1911.         clickEvent.pageY < imgMenuButton.offset().top + imgMenuButton.height();
  1912.     
  1913.    return isCursorInButton;
  1914. }
  1915.  
  1916.  
  1917.  
  1918.  
  1919.  
  1920.  
  1921.  
  1922. var imgMenu = null;
  1923. function showImgMenu(image)
  1924. {
  1925.     var imgURL = image.parent().attr("data-backup-href");
  1926.     
  1927.     var imgURL_menuItem = "";
  1928.     
  1929.     var imgResolution_span = "";
  1930.     var imgFilesize_span = "";
  1931.     var imgResolutionAndFilesize_menuItem = "";
  1932.     
  1933.     var imgGoogleReverse_menuItem = "";
  1934.     var imgIQDBreverse_menuItem = "";
  1935.     var imgBlacklistToggle_menuItem = "";
  1936.     var imgResizeToggles_menuItem = "";
  1937.     var imgHideToggle_menuItem = "";
  1938.     var imgHideAllToggle_menuItem = "";
  1939.     
  1940.     var postID = image.attr("data-postID");
  1941.     
  1942.    if (show_imgURLspan)
  1943.     {
  1944.         imgURL_menuItem = 
  1945.             "<div class='imgMenuItem'><span>" +
  1946.                 "<a target='_blank' class='imgMenuItemAnchor_url' href="+imgURL+">"+imgURL+"</a>" +
  1947.             "</span></div>";
  1948.     }
  1949.         
  1950.     if (show_imgResolutionSpan)
  1951.     {
  1952.         imgResolution_span = 
  1953.             "<span class='imgResolution' style='margin-right: 5px'>" +
  1954.             "</span>";
  1955.     }
  1956.     
  1957.     if (show_imgFilesizeSpan)
  1958.     {
  1959.         imgFilesize_span = 
  1960.             "<span class='imgFilesize'>" +
  1961.             "</span>";
  1962.     }
  1963.     
  1964.     imgResolutionAndFilesize_menuItem = imgResolution_span + imgFilesize_span;
  1965.     if (imgResolutionAndFilesize_menuItem !== "")
  1966.     {
  1967.         imgResolutionAndFilesize_menuItem = 
  1968.             "<div class='imgMenuItem'>" +
  1969.                 imgResolutionAndFilesize_menuItem +
  1970.             "</div>";
  1971.     }
  1972.     
  1973.     if (show_imgGoogle)
  1974.     {
  1975.         imgGoogleReverse_menuItem = 
  1976.             "<div class='imgMenuItem'><a target='_blank' class='imgMenuItemAnchor_google' title='Reverse image search on general images' href='https://www.google.com/searchbyimage?image_url="+imgURL+"'>" +
  1977.                 "google" +
  1978.             "</a></div>";
  1979.     }
  1980.  
  1981.     if (show_imgIqdb)
  1982.     {
  1983.         imgIQDBreverse_menuItem = 
  1984.             "<div class='imgMenuItem'><a target='_blank' class='imgMenuItemAnchor_iqdb' title='Reverse image search on weeb images' href='http://iqdb.org/?url="+imgURL+"'>" +
  1985.                 "iqdb" +
  1986.             "</a></div>";
  1987.     }
  1988.         
  1989.     if (show_blacklistToggle)
  1990.     {
  1991.         if (isBlacklisted)
  1992.         {
  1993.             imgBlacklistToggle_menuItem =
  1994.                 "<div class='imgMenuItem'><a class='imgBlacklistToggle' href='#' title='Whitelist image'>whitelist</a></div>"; 
  1995.         }
  1996.         else 
  1997.         {
  1998.             imgBlacklistToggle_menuItem =
  1999.                 "<div class='imgMenuItem'><a class='imgBlacklistToggle' href='#' title='Blacklist image'>blacklist</a></div>"; 
  2000.         }
  2001.     }
  2002.     
  2003.     if (show_imgResizeToggles)
  2004.     {
  2005.         imgResizeToggles_menuItem =
  2006.             "<div class='imgMenuItem'>" +
  2007.                 "<a class='imgCloseAll' href='#' title='Close all images in page'>&lt;&lt;&nbsp;</a>" +
  2008.                 "<a class='imgClosePost' href='#' data-postID='"+postID+"' title='Close all images in post'>&lt;&nbsp;</a>" +
  2009.                 "<a class='imgExpandPost' href='#' data-postID='"+postID+"' title='Expand all images in post'>&gt;&nbsp;</a>" +
  2010.                 "<a class='imgExpandAll' href='#' title='Expand all images in page'>&gt;&gt;</a>" +
  2011.             "</div>";
  2012.     }
  2013.     
  2014.     if (show_hideAllToggle) 
  2015.     {
  2016.         imgHideAllToggle_menuItem =
  2017.             "<div class='imgMenuItem'>" +
  2018.                 "<a class='imgHideAll' href='#' title='Hide all images in page' style='margin-right: 5px'>--</a>" +
  2019.                 "<a class='imgHidePost' href='#' data-postID='"+postID+"' title='Hide all images in post' style='margin-right: 5px'>-</a>" +
  2020.                 "<a class='imgShowPost' href='#' data-postID='"+postID+"' title='Show all images in post' style='margin-right: 5px'>+</a>" +
  2021.                 "<a class='imgShowAll' href='#' title='Show all images in page' style='margin-right: 5px'>++</a>" +
  2022.             "</div>";
  2023.     }
  2024.     
  2025.     if (show_hideToggle) 
  2026.     {
  2027.         imgHideToggle_menuItem =
  2028.             "<div class='imgMenuItem'><a class='imgHideToggle' href='#' title='Hide image'>hide</a></div>"; 
  2029.     }
  2030.     
  2031.     if (imgMenu !== null)
  2032.         imgMenu.remove();
  2033.         
  2034.     $("body").append(
  2035.         "<div class='imgMenu' data-idx='"+image.parent().attr("data-idx")+"' style='display: none; position: absolute; z-index: 90;'>" +
  2036.             imgURL_menuItem +
  2037.             imgResolutionAndFilesize_menuItem +
  2038.             imgGoogleReverse_menuItem +
  2039.             imgIQDBreverse_menuItem +
  2040.             imgBlacklistToggle_menuItem +
  2041.             imgResizeToggles_menuItem +
  2042.             imgHideAllToggle_menuItem +
  2043.             imgHideToggle_menuItem +
  2044.         "</div>"
  2045.     );
  2046.     
  2047.     imgMenu = $("body > .imgMenu");
  2048.     var imgFilesizeSpan = imgMenu.find(".imgFilesize");
  2049.     var imgResolutionSpan = imgMenu.find(".imgResolution");
  2050.     
  2051.     getFileSize(imgURL, imgFilesizeSpan);
  2052.  
  2053.     /*if plain image (i.e. not a webm video)*/
  2054.     if (! image.hasClass("webmExt"))
  2055.     {
  2056.         image.load(function() {
  2057.             if (imgResolutionSpan.length > 0)
  2058.             {
  2059.                 imgResolutionSpan.html(
  2060.                     "(" + image[0].naturalWidth + "x" + image[0].naturalHeight + ")"
  2061.                 );
  2062.             }
  2063.         });
  2064.         
  2065.         /*if image already loaded*/
  2066.         if (image[0].naturalWidth !== 0)
  2067.         {
  2068.             if (imgResolutionSpan.length > 0)
  2069.             {
  2070.                 imgResolutionSpan.html(
  2071.                     "(" + image[0].naturalWidth + "x" + image[0].naturalHeight + ")"
  2072.                 );
  2073.             }
  2074.         }
  2075.     }
  2076.     else    /*if webm*/
  2077.     {
  2078.         /*when video's metadata has been loaded, record its natural width and resolution*/
  2079.         image[0].onloadedmetadata = function() {
  2080.             
  2081.             var video = this;
  2082.             
  2083.             if (imgResolutionSpan.length > 0)
  2084.             {
  2085.                 imgResolutionSpan.html(
  2086.                     "(" + video.videoWidth + "x" + video.videoHeight + ")"
  2087.                 );
  2088.             }
  2089.         };
  2090.         
  2091.         if (image[0].videoWidth !== 0)
  2092.         {
  2093.             imgResolutionSpan.html(
  2094.                 "(" + image[0].videoWidth + "x" + image[0].videoHeight + ")"
  2095.             );
  2096.         }
  2097.     }
  2098.     
  2099.     var img_rightOffset = image.offset().left + image.width();
  2100.     var imgMenu_rightOffset = img_rightOffset + imgMenu.width();
  2101.     
  2102.     /*if imgMenu right offset exceeds beyond window's right offset*/
  2103.     if (imgMenu_rightOffset > $(window).scrollLeft() + $(window).width())
  2104.         imgMenu.css("left", ($(window).scrollLeft() + $(window).width() - imgMenu.width()) + "px");
  2105.     else 
  2106.         imgMenu.css("left", img_rightOffset + "px");
  2107.     
  2108.     imgMenu.css("top", image.offset().top + "px");
  2109.     imgMenu.css("display", "inline");
  2110.     
  2111.     imgMenuButton.children().html("-");
  2112. }
  2113.  
  2114. function hideImgMenu()
  2115. {
  2116.     if (imgMenu !== undefined && imgMenu !== null)
  2117.     {
  2118.         imgMenu.remove();
  2119.         imgMenu = null;
  2120.     }
  2121. }
  2122.  
  2123. function getImageAnchorOfImgMenu()
  2124. {
  2125.     var imgIdx = $("body > .imgMenu").attr("data-idx");
  2126.     
  2127.     return $(".embeddedImgAnchor[data-idx='"+imgIdx+"']");
  2128. }
  2129.  
  2130. function isHovered(jQueryObj)
  2131. {
  2132.     return !!$(jQueryObj).filter(function() { return $(this).is(":hover"); }).length;
  2133. }
  2134.  
  2135.  
  2136.  
  2137. $(document).on("click", function(event) {
  2138.     
  2139.     if (imgMenu !== null &&
  2140.         !isHovered(imgMenu) ||
  2141.         isHovered($(".imgMenuItemAnchor_url")) ||
  2142.         isHovered($(".imgMenuItemAnchor_google")) ||
  2143.         isHovered($(".imgMenuItemAnchor_iqdb")) ||
  2144.         isHovered($(".imgBlacklistToggle")) ||
  2145.         isHovered($(".imgCloseAll")) ||
  2146.         isHovered($(".imgClosePost")) ||
  2147.         isHovered($(".imgExpandPost"))||
  2148.         isHovered($(".imgExpandAll")) ||
  2149.         isHovered($(".imgHideAll")) ||
  2150.         isHovered($(".imgHidePost")) ||
  2151.         isHovered($(".imgShowPost"))||
  2152.         isHovered($(".imgShowAll")) ||
  2153.         isHovered($(".imgHideToggle"))
  2154.         )
  2155.     {
  2156.         hideImgMenu();
  2157.     }
  2158. });
  2159.  
  2160.  
  2161.  
  2162. function handleFloatingImage(event)
  2163. {
  2164.     if (!enable_floatingImg)
  2165.         return;
  2166.     
  2167.     var floatingImgLeft;
  2168.     var floatingImgTop;
  2169.     var floatingImgWidth;
  2170.     var floatingImgHeight;
  2171.     var floatingImgStyleStr;
  2172.     
  2173.     /*if user is hovering over thumbnail, prepare floating image size and position*/
  2174.     if (currentHoveredThumbnail !== null)
  2175.     {
  2176.         floatingImgWidth = parseInt(getNatWidthOfEmbeddedImg(currentHoveredThumbnail));
  2177.  
  2178.         floatingImgLeft = event.pageX + floatingImgRightOffset;
  2179.         
  2180.         /*if right of image exceeds beyond right of window, restrict max width*/
  2181.         if (floatingImgLeft + floatingImgWidth > $(window).scrollLeft() + $(window).width() - floatingImgBorder)
  2182.         {
  2183.             floatingImgWidth = $(window).scrollLeft() + $(window).width() - floatingImgBorder - floatingImgLeft;
  2184.         }
  2185.         
  2186.         if (floatingImgWidth < 0)
  2187.             floatingImgWidth = 0;
  2188.         
  2189.         floatingImgHeight = Math.round(getNatHeightOfEmbeddedImg(currentHoveredThumbnail) * (floatingImgWidth / getNatWidthOfEmbeddedImg(currentHoveredThumbnail)));
  2190.         
  2191.         floatingImgTop = event.pageY - (floatingImgHeight / 2);
  2192.         
  2193.         /*if bottom of image exceeds beyond the window, shift top upwards*/
  2194.         if (floatingImgTop + floatingImgHeight > $(window).scrollTop() + $(window).height() - floatingImgBorder)
  2195.         {
  2196.             floatingImgTop = $(window).scrollTop() + $(window).height() - floatingImgBorder - floatingImgHeight;
  2197.         }
  2198.         
  2199.         /*if top of image expands beyond top of window, lower top of image*/
  2200.         if (floatingImgTop < $(window).scrollTop() + floatingImgBorder)
  2201.         {
  2202.             floatingImgTop = $(window).scrollTop() + floatingImgBorder;
  2203.         }
  2204.         
  2205.         /*if bottom of image exceeds beyond the window, restrict max height*/
  2206.         if (floatingImgTop + floatingImgHeight > $(window).scrollTop() + $(window).height() - floatingImgBorder)
  2207.         {
  2208.             floatingImgHeight = $(window).scrollTop() + $(window).height() - floatingImgBorder - floatingImgTop;
  2209.         }
  2210.         
  2211.         if (curFloatingImg !== null &&   
  2212.             curFloatingImg.attr("data-idx") !== currentHoveredThumbnail.parent().attr("data-idx"))
  2213.         {
  2214.             curFloatingImg.attr("data-href", "");
  2215.             
  2216.             if (curFloatingImg.prop("tagName") === "video")
  2217.                 curFloatingImg.children("source").attr("src", "");
  2218.             else 
  2219.                 curFloatingImg.attr("src", "");
  2220.         }
  2221.         
  2222.         /*if floating image doesn't exist or doesn't have an image yet...*/
  2223.         if (curFloatingImg === null || curFloatingImg.attr("data-href") === "")
  2224.         {
  2225.             var floatingImgStyleStr = 
  2226.                 "position: absolute;" +
  2227.                 "left: " + floatingImgLeft + "px;" +
  2228.                 "top: " + floatingImgTop + "px;" +
  2229.                 "max-width: " + floatingImgWidth + "px;" +
  2230.                 "max-height: " + floatingImgHeight + "px;" +
  2231.                 "z-index: 100;";
  2232.             
  2233.             var imgIdx = currentHoveredThumbnail.parent().attr("data-idx");
  2234.             var imgContainerStyle_this = currentHoveredThumbnail.closest(".embeddedImgContainer").attr("data-style");
  2235.             
  2236.             /*if webm video*/
  2237.             if (currentHoveredThumbnail.hasClass("webmExt"))
  2238.             {
  2239.                 srcURL = currentHoveredThumbnail.children("source").attr("src");
  2240.                 
  2241.                 floatingImgSrc = 
  2242.                     "<video id='floatingImg' data-idx='"+imgIdx+"' data-href='"+srcURL+"' style='" + floatingImgStyleStr + "'>" +
  2243.                         "<source src='"+srcURL+"' type='video/webm'>" +
  2244.                     "</video>";
  2245.             }
  2246.             else 
  2247.             {
  2248.                 srcURL = currentHoveredThumbnail.attr("src");
  2249.                 
  2250.                 floatingImgSrc = 
  2251.                     "<img id='floatingImg' data-idx='"+imgIdx+"' data-href='"+srcURL+"' style='" + floatingImgStyleStr + "' src='"+srcURL+"'>";
  2252.             }
  2253.             
  2254.             /*create the floating image element if haven't so*/
  2255.             if (curFloatingImg === null)
  2256.             {
  2257.                 $("body").append(
  2258.                     floatingImgSrc
  2259.                 );
  2260.                 
  2261.                 curFloatingImg = $("body").children("#floatingImg");
  2262.             }
  2263.             else 
  2264.             {
  2265.                 curFloatingImg.attr("data-href", srcURL);
  2266.                 curFloatingImg.attr("data-idx", imgIdx);
  2267.                 curFloatingImg.attr("style", floatingImgStyleStr);
  2268.                 
  2269.                 if (curFloatingImg.prop("tagName") === "video")
  2270.                     curFloatingImg.children("source").attr("src", srcURL);
  2271.                 else 
  2272.                     curFloatingImg.attr("src", srcURL);
  2273.             }
  2274.  
  2275.             /*if webm video*/
  2276.             if (currentHoveredThumbnail.hasClass("webmExt"))
  2277.             {
  2278.                 var video = curFloatingImg;
  2279.  
  2280.                 video.attr("loop", "");
  2281.                 video[0].play();
  2282.             }
  2283.             
  2284.             if (imgContainerStyle_this === "sideBySide")
  2285.                 showImgMenuButton(currentHoveredThumbnail, true);
  2286.         }
  2287.         else    /*if floating image already exists, update its size and position*/
  2288.         {
  2289.             $("body").children("#floatingImg").css({
  2290.                 "left": floatingImgLeft + "px",
  2291.                 "top": floatingImgTop + "px",
  2292.                 "max-width": floatingImgWidth + "px",
  2293.                 "max-height": floatingImgHeight + "px",
  2294.             });
  2295.         }
  2296.     }
  2297.     /*if user is not hovering over thumbnail and floating image still exists*/
  2298.     else if (currentHoveredThumbnail === null && curFloatingImg !== null)
  2299.     {
  2300.         showImgMenuButton(null, false);
  2301.         
  2302.         curFloatingImg.remove();
  2303.         curFloatingImg = null;
  2304.     } 
  2305. }
  2306.  
  2307.  
  2308.  
  2309. var curFloatingImg = null;
  2310. /*if cursor is hovering inside a thumbnail image, display expanded image as floating div
  2311. Also show a transparent button to expand the image menu (side-by-side image view only)
  2312. */
  2313. $(document).on("mousemove", function(event) {
  2314.     
  2315.     handleFloatingImage(event);
  2316. });
  2317.  
  2318.  
  2319.  
  2320.  
  2321. /*if mouse hovers inside the image, change cursor to pointer*/
  2322. $(document).on("mouseover", ".embeddedImg", function(event){
  2323.     $("html").css("cursor", "pointer");
  2324.     
  2325.     if (! $(this).hasClass("expandedImg"))
  2326.     {
  2327.         currentHoveredThumbnail = $(event.target); 
  2328.     }
  2329. });
  2330.  
  2331. /*if mouse hovers outside the image, restore cursor to default graphic*/
  2332. $(document).on("mouseout", ".embeddedImg", function(){
  2333.     $("html").css("cursor", "default");
  2334.     
  2335.     currentHoveredThumbnail = null;
  2336. });
  2337.  
  2338.  
  2339.  
  2340. /*if clicked on the image URL anchor that's surrounding the embedded image, prevent default
  2341. behaviour of anchor, unless it's a middle click*/
  2342. $("body").on("click", ".embeddedImgAnchor", function(event){
  2343.     
  2344.     /*left-click*/
  2345.     if (event.which === 1)
  2346.     {
  2347.         
  2348.     }
  2349.     else 
  2350.     {
  2351.         $(this).attr("href", $(this).attr("data-backup-href"));
  2352.     }
  2353. });
  2354.  
  2355. $("body").on("mousedown", ".embeddedImgAnchor", function(event){
  2356.     
  2357.     /*left-click*/
  2358.     if (event.which === 1)
  2359.     {
  2360.         event.preventDefault();
  2361.     }
  2362.     else 
  2363.     {
  2364.         $(this).attr("href", $(this).attr("data-backup-href"));
  2365.     }
  2366. });
  2367.  
  2368. /* jshint -W107 */
  2369.     
  2370. /*toggle image size on left-click*/
  2371. $("body").on("click", ".embeddedImg", function(event){
  2372.     
  2373.     /*left-click*/
  2374.     if (event.which === 1)
  2375.     {
  2376.         if (isHoverOverImgMenuButton(event) && imgMenu === null)
  2377.         {
  2378.             showImgMenu($(this));
  2379.             return false;
  2380.         }
  2381.         else if (isHoverOverImgMenuButton(event) && imgMenu !== null)
  2382.         {
  2383.             /*if referring to same thumbnail*/
  2384.             if (imgMenu.attr("data-idx") === $(this).parent().attr("data-idx"))
  2385.             {
  2386.                 hideImgMenu();
  2387.             }
  2388.             else 
  2389.             {
  2390.                 showImgMenu($(this));
  2391.             }
  2392.             
  2393.             showImgMenuButton($(this), true);
  2394.             return false;
  2395.         }
  2396.         else if (imgMenu !== null)
  2397.         {
  2398.             hideImgMenu();
  2399.         }
  2400.  
  2401.         showImgMenuButton($(this), false);
  2402.  
  2403.         var mouseRelativeY = event.pageY - $(this).offset().top;
  2404.         
  2405.         /*if expanded webm file, don't shrink to thumbnail if clicked on its controls*/
  2406.         if ($(this).hasClass("webmExt") && $(this).hasClass("expandedImg") &&
  2407.              (mouseRelativeY > ($(this).height() - 28)))
  2408.         {
  2409.             $(this).parent().attr("href", "javascript:void(0);");
  2410.         }
  2411.         else
  2412.         {
  2413.             toggleEmbeddedImgSize($(this), false);
  2414.  
  2415.             if (autoScrollWhenThumbnailClicked)
  2416.                 $(window).scrollTop( $(this).parent().parent().offset().top );
  2417.             
  2418.             return false;
  2419.         }
  2420.     }
  2421. });
  2422.  
  2423.  
  2424.  
  2425.  
  2426.  
  2427.  
  2428. /*
  2429. @param isAll :: true if your intention is to expand/shrink all images
  2430. */
  2431. function toggleEmbeddedImgSize(embeddedImg, isAll)
  2432. {
  2433.     var embeddedImgContainer = embeddedImg.closest(".embeddedImgContainer");
  2434.     var isSig = embeddedImgContainer.hasClass("withinSig");
  2435.     
  2436.     var thumbnailImgWidth_this = isSig ? thumbnailImgWidthSig : thumbnailImgWidth;
  2437.     var thumbnailImgHeight_this = isSig ? thumbnailImgHeightSig : thumbnailImgHeight;
  2438.     var thumbnailImgWidth_this_css = thumbnailImgWidth_this == 0 ? "" : thumbnailImgWidth_this+"px";
  2439.     var thumbnailImgHeight_this_css = thumbnailImgHeight_this == 0 ? "" : thumbnailImgHeight_this+"px";
  2440.     
  2441.     if (!includeSigWhenExpanding && embeddedImg.hasClass("withinSig") && isAll)
  2442.     {
  2443.     }
  2444.     else 
  2445.     {
  2446.         embeddedImg.toggleClass("thumbnailImg expandedImg");
  2447.     }
  2448.     
  2449.     /*if going to expand image*/
  2450.     if (embeddedImg.hasClass("expandedImg"))
  2451.     {
  2452.         if (!includeSigWhenExpanding && embeddedImg.hasClass("withinSig") && isAll)
  2453.         {
  2454.             return;
  2455.         }
  2456.         
  2457.         currentHoveredThumbnail = null;
  2458.         $("#floatingImg").remove();
  2459.  
  2460.         embeddedImg.css("max-width", getOptimalImgMaxWidth(embeddedImg, expandedImgWidth) + "px");
  2461.         embeddedImg.css("max-height", expandedImgHeight_css);
  2462.         
  2463.         /*if webm file, start playing it*/
  2464.         if (embeddedImg.hasClass("webmExt"))
  2465.         {
  2466.             embeddedImg[0].play();
  2467.             embeddedImg.attr("controls", "");
  2468.         }
  2469.     }
  2470.     else    /*if shrinking image back to thumbnail*/
  2471.     {
  2472.         embeddedImg.css("max-width", getOptimalImgMaxWidth(embeddedImg, thumbnailImgWidth_this) + "px");
  2473.         embeddedImg.css("max-height", thumbnailImgHeight_this_css);
  2474.         
  2475.         /*if webm file, stop playing it*/
  2476.         if (embeddedImg.hasClass("webmExt"))
  2477.         {
  2478.             embeddedImg[0].pause();
  2479.             embeddedImg.removeAttr("controls");
  2480.         }
  2481.         
  2482.         if (isHovered(embeddedImg) && !isFirefox) /*osdep*/ 
  2483.         {
  2484.             currentHoveredThumbnail = embeddedImg; 
  2485.         }
  2486.         else 
  2487.         {
  2488.             $("html").css("cursor", "default");     /*osdep for firefox*/
  2489.             currentHoveredThumbnail = null;
  2490.         }
  2491.     }
  2492. }
  2493.  
  2494.  
  2495. /*
  2496. Get the optimal max-width for an image.
  2497.  
  2498. The width will be one of the following:
  2499.     - until the right of the browser windows border
  2500.     - until the right of the parent container of the image container
  2501.     - until the user-defined width limit
  2502.  
  2503. The smallest of the 3 will be chosen.    
  2504.  
  2505. @param embeddedImg :: jQuery object of the image
  2506. @param userDefinedWidthLimit :: use 0 if no limit
  2507.  
  2508. The returned width will be the smaller of the three.
  2509. */
  2510. function getOptimalImgMaxWidth(embeddedImg, userDefinedWidthLimit)
  2511. {
  2512.     var optimalWidth;
  2513.     var toContainerWidth;
  2514.     var toWindowWidth;
  2515.     
  2516.     toContainerWidth = 
  2517.         embeddedImg.closest(".msg_body, blockquote").width();        /*gfaqsdep*/
  2518.         
  2519.     toWindowWidth =
  2520.         $(window).width() - embeddedImg.closest(".msg_body, blockquote").offset().left;     /*gfaqsdep*/
  2521.   
  2522.     if (toContainerWidth > toWindowWidth)
  2523.         optimalWidth = toWindowWidth;
  2524.     else 
  2525.         optimalWidth = toContainerWidth;
  2526.  
  2527.     /*if no user-defined limit on the width*/
  2528.     if (userDefinedWidthLimit == 0)
  2529.     {
  2530.         return optimalWidth;
  2531.     }
  2532.     else 
  2533.     {
  2534.         if (optimalWidth > userDefinedWidthLimit)
  2535.             return userDefinedWidthLimit;
  2536.         else 
  2537.             return optimalWidth;    
  2538.     }
  2539. }
  2540.  
  2541.  
  2542.  
  2543.  
  2544.  
  2545.  
  2546.  
  2547.  
  2548.  
  2549.  
  2550. function toggleSizesOfImages(embeddedImages, isExpanding) {
  2551.  
  2552.     embeddedImages.each(function(index, element) {
  2553.         
  2554.         if ($(this).closest(".embeddedImgContainer").hasClass("hidden")) {
  2555.             return false;
  2556.         }
  2557.         
  2558.         if (isExpanding && $(this).hasClass("expandedImg"))
  2559.         {
  2560.             /*update its max-width*/
  2561.             $(this).css("max-width", getOptimalImgMaxWidth($(this)));
  2562.         }
  2563.         else 
  2564.         {
  2565.             toggleEmbeddedImgSize($(this), true);
  2566.         }
  2567.     });
  2568. }
  2569.  
  2570. $("body").on("click", ".imgCloseAll", function(event) {
  2571.     event.preventDefault();
  2572.     toggleSizesOfImages($(".embeddedImg.expandedImg"), false);
  2573.     nextImageSize = "expanded";
  2574.     
  2575.     var isContainerStacked = $(this).parent().attr("data-style");
  2576.     
  2577.     if (autoScrollWhenThumbnailClicked) {
  2578.         if (isContainerStacked)
  2579.             $(window).scrollTop( $(this).parent().offset().top );
  2580.         else
  2581.             $(window).scrollTop( getImageAnchorOfImgMenu().parent().offset().top );
  2582.     }
  2583. });
  2584.  
  2585. $("body").on("click", ".imgClosePost", function(event) {
  2586.     
  2587.     var postID = $(this).attr("data-postID");
  2588.     
  2589.     event.preventDefault();
  2590.     toggleSizesOfImages($(".embeddedImg[data-postID="+postID+"].expandedImg"), false);
  2591.  
  2592.     var isContainerStacked = $(this).parent().attr("data-style");
  2593.     
  2594.     if (autoScrollWhenThumbnailClicked) {
  2595.         if (isContainerStacked)
  2596.             $(window).scrollTop( $(this).parent().offset().top );
  2597.         else
  2598.             $(window).scrollTop( getImageAnchorOfImgMenu().parent().offset().top );
  2599.     }
  2600. });
  2601.  
  2602. $("body").on("click", ".imgExpandPost", function(event) {
  2603.     
  2604.     var postID = $(this).attr("data-postID");
  2605.  
  2606.     event.preventDefault();
  2607.     toggleSizesOfImages($(".embeddedImg[data-postID='"+postID+"']"), true);
  2608.  
  2609.     var isContainerStacked = $(this).parent().attr("data-style");
  2610.     
  2611.     if (autoScrollWhenThumbnailClicked) {
  2612.         if (isContainerStacked)
  2613.             $(window).scrollTop( $(this).parent().offset().top );
  2614.         else
  2615.             $(window).scrollTop( getImageAnchorOfImgMenu().parent().offset().top );
  2616.     }
  2617. });
  2618.  
  2619. $("body").on("click", ".imgExpandAll", function(event) {
  2620.     event.preventDefault();
  2621.     toggleSizesOfImages($(".embeddedImg"), true);
  2622.     nextImageSize = "thumbnail";
  2623.     
  2624.     var isContainerStacked = $(this).parent().attr("data-style");
  2625.     
  2626.     if (autoScrollWhenThumbnailClicked) {
  2627.         if (isContainerStacked)
  2628.             $(window).scrollTop( $(this).parent().offset().top );
  2629.         else
  2630.             $(window).scrollTop( getImageAnchorOfImgMenu().parent().offset().top );
  2631.     }
  2632. });
  2633.  
  2634.  
  2635.  
  2636.  
  2637.  
  2638.  
  2639.  
  2640.  
  2641.  
  2642.  
  2643. $("body").on("click", ".imgBlacklistToggle", function(event) {
  2644.     
  2645.     event.preventDefault();
  2646.     
  2647.     var imgURL;
  2648.     var imgAnchor;
  2649.     
  2650.     var isContainerStacked = $(this).parent().attr("data-style");
  2651.     
  2652.     if (!isContainerStacked)
  2653.     {
  2654.         if ($(this).html() === "blacklist")
  2655.             imgAnchor = getImageAnchorOfImgMenu();
  2656.         else 
  2657.             imgAnchor = $(this).parent().siblings(".embeddedImgAnchor");
  2658.     }
  2659.     else 
  2660.     {
  2661.         imgAnchor = $(this).siblings(".embeddedImgAnchor");
  2662.     }
  2663.     
  2664.     imgURL = imgAnchor.attr("data-backup-href");
  2665.     imgURL.trim();
  2666.     
  2667.     /*if image isn't blacklisted (but going to blacklist)*/
  2668.     if (! imgAnchor.hasClass("blacklisted"))
  2669.     {
  2670.         /*for every embedded image anchor*/
  2671.         $(".embeddedImgAnchor").each(function(index, element) {
  2672.             
  2673.             /*if has URL that was just blacklisted, hide it*/
  2674.             if (isURLmatchBlacklistedURL(imgURL, $(this).attr("data-backup-href")))
  2675.             {
  2676.                 hideMedia($(this).parent(), true);
  2677.             }
  2678.         });
  2679.     }
  2680.     else /*if image is blacklisted (but going to whitelist)*/
  2681.     {
  2682.         /*for every embedded image anchor*/
  2683.         $(".embeddedImgAnchor").each(function(index, element) {
  2684.  
  2685.             /*if has URL that was just whitelisted, show it*/
  2686.             if ($(this).attr("data-backup-href") === imgURL)
  2687.             {
  2688.                 showMedia($(this).parent(), true);
  2689.             }
  2690.         });
  2691.     }
  2692. });
  2693.  
  2694.  
  2695.  
  2696. $("body").on("click", "a.imgHideToggle", function(event) {
  2697.     
  2698.     event.preventDefault();
  2699.  
  2700.     var curEmbeddedImgContainer;
  2701.     var isContainerStacked = $(this).parent().attr("data-style");
  2702.     
  2703.     /*if image is going to be hidden*/
  2704.     if ($(this).html() === "hide")
  2705.     {
  2706.         if (!isContainerStacked)
  2707.             curEmbeddedImgContainer = getImageAnchorOfImgMenu().parent(); 
  2708.         else 
  2709.             curEmbeddedImgContainer = $(this).parent();
  2710.         
  2711.         hideMedia(curEmbeddedImgContainer, false);
  2712.     }
  2713.     else    /*if image is going to be shown*/
  2714.     {
  2715.         if (!isContainerStacked)
  2716.             curEmbeddedImgContainer = $(this).closest(".embeddedImgContainer");
  2717.         else 
  2718.             curEmbeddedImgContainer = $(this).parent();
  2719.  
  2720.         showMedia(curEmbeddedImgContainer, false);
  2721.     }
  2722. });
  2723.  
  2724.  
  2725.  
  2726. $("body").on("click", "a.imgHideAll", function(event) {
  2727.     event.preventDefault();
  2728.     
  2729.     toggleImageVisiblity($(".embeddedImgContainer"), "closeAnchor");
  2730.     
  2731.     var isContainerStacked = $(this).parent().attr("data-style");
  2732.     
  2733.     if (autoScrollWhenThumbnailClicked) {
  2734.         if (isContainerStacked)
  2735.             $(window).scrollTop( $(this).parent().offset().top );
  2736.         else
  2737.             $(window).scrollTop( getImageAnchorOfImgMenu().parent().offset().top );
  2738.     }
  2739. });
  2740. $("body").on("click", "a.imgHidePost", function(event) {
  2741.     event.preventDefault();
  2742.     
  2743.     var postID = $(this).attr("data-postID");
  2744.     var isContainerStacked = $(this).parent().attr("data-style");
  2745.     
  2746.     toggleImageVisiblity($(".embeddedImgContainer[data-postID="+postID+"]"), "closeAnchor");
  2747.  
  2748.     if (autoScrollWhenThumbnailClicked) {
  2749.         if (isContainerStacked)
  2750.             $(window).scrollTop( $(this).parent().offset().top );
  2751.         else
  2752.             $(window).scrollTop( getImageAnchorOfImgMenu().parent().offset().top );
  2753.     }
  2754. });
  2755. $("body").on("click", "a.imgShowPost", function(event) {
  2756.     event.preventDefault();
  2757.  
  2758.     var postID = $(this).attr("data-postID");
  2759.     var isContainerStacked = $(this).parent().attr("data-style");
  2760.     
  2761.     toggleImageVisiblity($(".embeddedImgContainer[data-postID="+postID+"]"), "showAnchor");
  2762.     
  2763.     if (autoScrollWhenThumbnailClicked) {
  2764.         if (isContainerStacked)
  2765.             $(window).scrollTop( $(this).parent().offset().top );
  2766.         else
  2767.             $(window).scrollTop( getImageAnchorOfImgMenu().parent().offset().top );
  2768.     }
  2769. });
  2770. $("body").on("click", "a.imgShowAll", function(event) {
  2771.     event.preventDefault();
  2772.     
  2773.     var isContainerStacked = $(this).parent().attr("data-style");
  2774.     
  2775.     toggleImageVisiblity($(".embeddedImgContainer"), "showAnchor");
  2776.     
  2777.     if (autoScrollWhenThumbnailClicked) {
  2778.         if (isContainerStacked)
  2779.             $(window).scrollTop( $(this).parent().offset().top );
  2780.         else
  2781.             $(window).scrollTop( getImageAnchorOfImgMenu().parent().offset().top );
  2782.     }
  2783. });
  2784.  
  2785.  
  2786. })();   /*end of greasemonkey script*/