☰

4chan Image Browser

Opens current thread Images in 4chan into a popup viewer, tested in Tampermonkey

目前為 2014-09-19 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name       4chan Image Browser
  3. // @namespace  IdontKnowWhatToDoWithThis
  4. // @description Opens current thread Images in 4chan into a popup viewer, tested in Tampermonkey
  5. // @match   *://*.4chan.org/*/res/*
  6. // @match   *://*.4chan.org/*/thread/*
  7. // @version 6.2
  8. // @copyright  2014+, Gyst
  9. // @grant unsafeWindow
  10. // ==/UserScript==
  11.  
  12.  
  13. /**
  14.  * Constructor function, the outer function is run immediately to store the 
  15.  *the constants in a closure
  16.  */
  17. var Viewer = (function(){
  18.     var INDEX_KEY = "imageBrowserIndexCookie";
  19.     var THREAD_KEY="imageBrowserThreadCookie";
  20.     var WIDTH_KEY = "imageBrowserWidthCookie";
  21.     
  22.     //cookieInfo
  23.     var HEIGHT_KEY = "imageBrowserHeightCookie";
  24.  
  25.     //IDs for important elements
  26.     var VIEW_ID = "mainView";
  27.     var IMG_ID = "mainImg";
  28.     var IMG_BOX_ID = "imageBox";
  29.     var TOP_LAYER_ID = "viewerTopLayer";
  30.     var IMG_WRAPPER_ID = 'mainImgWrapper';
  31.     
  32.     //styles for added elements
  33.     var STYLE_TEXT='\
  34.         div.reply.highlight{z-index:100 !important;position:fixed !important; top:1%;left:1%;}\
  35.         body{overflow:hidden !important;}\
  36.         #quote-preview{z-index:100;} \
  37.         a.quotelink, div.viewerBacklinks a.quotelink{color:#5c5cff !important;}\
  38.         a.quotelink:hover, div.viewerBacklinks a:hover{color:red !important;}\
  39.         #'+IMG_ID+'{display:block !important; margin:auto;max-width:100%;height:auto;-webkit-user-select: none;cursor:pointer;}\
  40.         #'+VIEW_ID+'{\
  41.             background-color:rgba(0,0,0,0.9);\
  42.             z-index:10;	\
  43.             position:fixed;	\
  44.             top:0;left:0;bottom:0;right:0;	\
  45.             overflow:auto;\
  46.             text-align:center;\
  47.             -webkit-user-select: none;\
  48.         }\
  49.         #'+IMG_BOX_ID+' {display:flex;align-items:center;justify-content:center;flex-direction: column;min-height:100%;}\
  50.         #'+IMG_WRAPPER_ID+' {width:100%;}\
  51.         #'+TOP_LAYER_ID+'{position:fixed;top:0;bottom:0;left:0;right:0;z-index:20;opacity:0;visibility:hidden;transition:all .25s ease;}\
  52.         .viewerBlockQuote{color:white;}\
  53.         #viewerTextWrapper{max-width:60em;display:inline-block; color:gray;-webkit-user-select: all;}\
  54.         .bottomMenuShow{visibility:visible;}\
  55.         #viewerBottomMenu{box-shadow: -1px -1px 5px #888888;font-size:20px;padding:5px;background-color:white;position:fixed;bottom:0;right:0;z-index:200;}\
  56.         .hideCursor{cursor:none !important;}\
  57.         .hidden{visibility:hidden}\
  58.         .displayNone{display:none;}\
  59.         .pagingButtons{font-size:100px;color:white;text-shadow: 1px 1px 10px #27E3EB;z-index: 11;top: 50%;position: absolute;margin-top: -57px;width:100px;cursor:pointer;-webkit-user-select: none;}\
  60.         .pagingButtons:hover{color:#27E3EB;text-shadow: 1px 1px 10px #000}\
  61.         #previousImageButton{left:0;text-align:left;}\
  62.         #nextImageButton{right:0;text-align:right;}\
  63.         @-webkit-keyframes flashAnimation{0%{ text-shadow: none;}100%{text-shadow: 0px 0px 5px lightblue;}}\
  64.         .flash{-webkit-animation: flashAnimation .5s alternate infinite  linear;}\
  65.         ';
  66.     
  67.     //the real constructor
  68.     return function(){
  69.         //for holding img srcs and a pointer for traversing
  70.         this.postData = [];
  71.         this.linkIndex = 0;
  72.  
  73.         //set up the div and image for the popup
  74.         this.mainView = null;
  75.         this.mainImg = null;
  76.         this.centerBox = null;
  77.         this.topLayer = null;
  78.         this.customStyle = null;
  79.         this.textWrapper = null;
  80.  
  81.         this.leftArrow = null;
  82.         this.rightArrow = null;
  83.  
  84.         this.bottomMenu = null;
  85.  
  86.         this.canPreload = false;
  87.         this.shouldFitHeight = false;
  88.         //for deferring functions that need image dimensions
  89.         this.mainImgLoaded = false;
  90.  
  91.         this.mouseTimer = null;
  92.         this.lastMousePos = {x: 0, y: 0};
  93.         //keycode object.  Better than remembering what each code does.
  94.         this.keys = {38: 'up', 40: 'down', 37: 'left', 39: 'right', 27: 'esc', 86:'v'};
  95.  
  96.         this.open = function() {
  97.             var V = window._4ChanImageViewer;
  98.             // === Start constructing the viewer === //    
  99.             console.log("Building 4chan Image Viewer");
  100.  
  101.             var currentThreadId = document.getElementsByClassName('thread')[0].id;
  102.  
  103.             //check if its the last thread opened, if so, remember where the index was.
  104.             if(V.getPersistentValue(THREAD_KEY) === currentThreadId){
  105.                 V.linkIndex = parseInt(V.getPersistentValue(INDEX_KEY)); 
  106.             }else{
  107.                 V.linkIndex = 0;
  108.                 V.setPersistentValue(INDEX_KEY,0);
  109.             }
  110.  
  111.            //set thread id
  112.             V.setPersistentValue(THREAD_KEY,currentThreadId);
  113.  
  114.             //reset post array
  115.             V.postData.length = 0;
  116.  
  117.             //add keybinding listener
  118.             //Yeah, so, unsafeWindow is used here instead because at least in Tampermonkey
  119.             //the safe window can fail to remove event listeners.
  120.             unsafeWindow.addEventListener('keydown',V.arrowKeyListener,false);
  121.             unsafeWindow.addEventListener('mousemove',V.menuWatcher,false);
  122.  
  123.             //grab postContainers
  124.             var posts = document.getElementById('delform').getElementsByClassName('postContainer');
  125.  
  126.             //get image links and post messages from posts
  127.             var plength = posts.length;
  128.             for(var i = 0; i < plength; ++i){
  129.  
  130.                 var file = posts[i].getElementsByClassName('file')[0];
  131.                 if(file){
  132.                     var currentLink = file.getElementsByClassName('fileThumb')[0].href;
  133.                     if(!currentLink){continue;}
  134.                     var type = V.getElementType(currentLink);
  135.                     var currentPostBlock = posts[i].getElementsByClassName('postMessage')[0];
  136.                     var currentPostBacklinks = posts[i].getElementsByClassName('backlink')[0];
  137.  
  138.                     var blockQuote = document.createElement('blockQuote');
  139.                     var backlinks = document.createElement('div');
  140.  
  141.                     if(currentPostBlock){
  142.                         blockQuote.className = currentPostBlock.className + ' viewerBlockQuote';
  143.                         blockQuote.innerHTML = currentPostBlock.innerHTML;
  144.                         V.add4chanListenersToLinks(blockQuote.getElementsByClassName('quotelink'));
  145.                     }
  146.                     if(currentPostBacklinks){
  147.                         backlinks.className = currentPostBacklinks.className + ' viewerBacklinks';
  148.                         backlinks.innerHTML = currentPostBacklinks.innerHTML;
  149.                         V.add4chanListenersToLinks(backlinks.getElementsByClassName('quotelink'));
  150.                     }
  151.  
  152.                     V.postData.push({'imgSrc':currentLink,'type':type,'mBlock':blockQuote,'backlinks':backlinks});
  153.                 }
  154.             }
  155.  
  156.             //build wrapper
  157.             V.mainView = document.createElement('div');
  158.             V.mainView.id = VIEW_ID;
  159.             V.mainView.addEventListener('click',V.confirmExit, false);
  160.  
  161.             document.body.appendChild(V.mainView);
  162.  
  163.             //set up flex box for centering content
  164.             V.centerBox = document.createElement('div');
  165.             V.centerBox.id = IMG_BOX_ID;
  166.             V.mainView.appendChild(V.centerBox);
  167.  
  168.             //build image tag
  169.             V.mainImg = document.createElement(V.postData[V.linkIndex].type);
  170.             V.mainImg.src = V.postData[V.linkIndex].imgSrc;
  171.             V.mainImg.id = IMG_ID;
  172.             V.mainImg.classList.add("hideCursor");
  173.             V.mainImg.autoplay = true;
  174.             V.mainImg.controls = false;
  175.             V.mainImg.loop = true;
  176.  
  177.             var imgDiv = document.createElement('div');
  178.             imgDiv.id = IMG_WRAPPER_ID;
  179.             imgDiv.appendChild(V.mainImg);
  180.             V.centerBox.appendChild(imgDiv);
  181.  
  182.             V.mainImg.addEventListener('click',V.clickImg,false);
  183.  
  184.             //set shouldFit Height so image can know about it if it loads before menuInit()
  185.             var isHeight = V.getPersistentValue(HEIGHT_KEY);
  186.             V.shouldFitHeight = isHeight? true : false;
  187.             V.mainImg.onload = function(){
  188.                 window._4ChanImageViewer.imageLoadHandler();
  189.             };
  190.  
  191.             //start preloading to next image index
  192.             V.canPreload = true;
  193.             window.setTimeout(function(){V.runImagePreloading(V.linkIndex);},100);
  194.  
  195.  
  196.             //add quote block/backlinks(first image always has second post quote)
  197.             V.textWrapper = document.createElement('div');
  198.             V.textWrapper.addEventListener('click',V.eventStopper,false);
  199.             V.textWrapper.id = 'viewerTextWrapper';
  200.             V.textWrapper.appendChild(V.postData[V.linkIndex].backlinks);
  201.             V.textWrapper.appendChild(V.postData[V.linkIndex].mBlock);
  202.             V.centerBox.appendChild(V.textWrapper);
  203.  
  204.  
  205.             //build top layer
  206.             V.topLayer = document.createElement('div');
  207.             V.topLayer.innerHTML = "&nbsp;";
  208.             V.topLayer.id=TOP_LAYER_ID;
  209.  
  210.             document.body.appendChild(V.topLayer);
  211.  
  212.  
  213.             //build custom style tag
  214.             V.customStyle = document.createElement('style');
  215.             V.customStyle.innerHTML = STYLE_TEXT;
  216.             document.body.appendChild(V.customStyle);
  217.  
  218.             //build bottom menu
  219.             var formHtml = '<label><input id="'+WIDTH_KEY+'" type="checkbox" checked="checked" />Fit Image to Width</label>\
  220.                             <span>|</span>\
  221.                             <label><input id="'+HEIGHT_KEY+'" type="checkbox" />Fit Image to Height</label>\
  222.                             ';
  223.             V.bottomMenu = document.createElement('form');
  224.             V.bottomMenu.id = "viewerBottomMenu";
  225.             V.bottomMenu.className = 'hidden';
  226.             V.bottomMenu.innerHTML = formHtml;
  227.             document.body.appendChild(V.bottomMenu);
  228.             V.bottomMenu.addEventListener('click',V.menuClickHandler,false);
  229.             V.menuInit();
  230.  
  231.             //build arrow buttons
  232.             V.leftArrow = document.createElement("div");
  233.             V.leftArrow.innerHTML = '<span>&#9001;</span>';
  234.             V.leftArrow.id = "previousImageButton";
  235.             V.leftArrow.classList.add("pagingButtons","hidden");
  236.  
  237.             V.rightArrow = document.createElement("div");
  238.             V.rightArrow.innerHTML = '<span>&#9002;</span>';
  239.             V.rightArrow.id = "nextImageButton";
  240.             V.rightArrow.classList.add("pagingButtons","hidden");
  241.  
  242.             V.leftArrow.addEventListener('click',function(event){event.stopImmediatePropagation();V.previousImg();},false);
  243.             V.rightArrow.addEventListener('click',function(event){event.stopImmediatePropagation();V.nextImg();},false);
  244.             V.mainView.appendChild(V.leftArrow);
  245.             V.mainView.appendChild(V.rightArrow);
  246.  
  247.  
  248.             //some fixes for weird behaviors
  249.             V.centerBox.style.outline = '0';
  250.             V.centerBox.tabIndex = 1;
  251.             V.centerBox.focus();
  252.         };
  253.         
  254.         this.menuInit = function(){
  255.             var V = window._4ChanImageViewer;
  256.             var menuControls = V.bottomMenu.getElementsByTagName('input');
  257.             for(var i = 0; i < menuControls.length; ++i){
  258.                 var input = menuControls[i];
  259.                 var cookieValue = V.getPersistentValue(input.id);
  260.  
  261.                 if(cookieValue === 'true'){
  262.                     input.checked = true;
  263.                 }else if(cookieValue === 'false'){
  264.                     input.checked = false;
  265.                 }
  266.                 input.parentElement.classList.toggle('flash',input.checked);
  267.                 switch(input.id){
  268.                  case WIDTH_KEY:
  269.                         V.setFitToScreenWidth(input.checked);
  270.                         break;
  271.                  case HEIGHT_KEY:
  272.                         V.setFitToScreenHeight(input.checked);
  273.                         break;
  274.                 }
  275.         
  276.              }
  277.     
  278.         };
  279.  
  280.         this.menuClickHandler = function(){
  281.             var V = window._4ChanImageViewer;
  282.             var menuControls = V.bottomMenu.getElementsByTagName('input');
  283.  
  284.             for(var i = 0; i < menuControls.length; ++i){
  285.                 var input = menuControls[i];
  286.  
  287.                 switch(input.id){
  288.                  case WIDTH_KEY:
  289.                         V.setFitToScreenWidth(input.checked);
  290.                         break;
  291.  
  292.                  case HEIGHT_KEY:
  293.                         V.setFitToScreenHeight(input.checked);
  294.                         break;
  295.                 }
  296.  
  297.                 input.parentElement.classList.toggle('flash',input.checked);
  298.  
  299.                 V.setPersistentValue(input.id,input.checked);
  300.  
  301.             }
  302.  
  303.         };
  304.  
  305.         this.windowClick = function(event){
  306.             var V = window._4ChanImageViewer;
  307.             event.preventDefault();
  308.             event.stopImmediatePropagation();
  309.             V.nextImg();
  310.  
  311.         };
  312.  
  313.         this.add4chanListenersToLinks = function(linkCollection){
  314.             for(var i = 0; i < linkCollection.length; ++i){
  315.                 //These are the functions that 4chan uses
  316.                 linkCollection[i].addEventListener("mouseover", Main.onThreadMouseOver, false); 
  317.                 linkCollection[i].addEventListener("mouseout", Main.onThreadMouseOut, false);
  318.  
  319.             }
  320.  
  321.         };
  322.  
  323.         /* Event function for determining behavior of viewer keypresses */
  324.         this.arrowKeyListener = function(evt){
  325.             var V = window._4ChanImageViewer;
  326.             switch(V.keys[evt.keyCode]){
  327.                 case 'right':	
  328.                     V.nextImg();
  329.                     break;
  330.  
  331.                 case 'left':	
  332.                     V.previousImg();
  333.                     break;
  334.  
  335.                 case 'esc':		
  336.                     V.remove();
  337.                     break;
  338.             }
  339.         };
  340.  
  341.         /* preloads images starting with the index provided */
  342.         this.runImagePreloading = function(index){
  343.             var V = window._4ChanImageViewer;
  344.  
  345.             if(V && index < V.postData.length){
  346.  
  347.                 if(V.canPreload){
  348.                     if(V.postData[index].type === 'VIDEO'){
  349.                         V.runImagePreloading(index+1);         
  350.                     }else{
  351.                         var newImage = document.createElement(V.postData[index].type);
  352.  
  353.                         var loadFunc = function(){V.runImagePreloading(index+1);};
  354.                         switch(V.postData[index].type){
  355.                             case 'VIDEO':
  356.                                 newImage.oncanplaythrough = loadFunc;
  357.                             break;
  358.                             case 'IMG':
  359.                                 newImage.onload = loadFunc;
  360.                             break;
  361.                         }
  362.                         newImage.onerror = function(){
  363.                             V.runImagePreloading(index+1);
  364.                         };
  365.  
  366.                         newImage.src = V.postData[index].imgSrc;
  367.                     }
  368.  
  369.                 }
  370.             }
  371.         };
  372.  
  373.         /* Sets the img and message to the next one in the list*/
  374.         this.nextImg = function () {
  375.             var V = window._4ChanImageViewer;
  376.             if (V.linkIndex === V.postData.length - 1) {
  377.                 V.topLayer.style.background = 'linear-gradient(to right,rgba(0,0,0,0) 90%,rgba(125,185,232,1) 100%)';
  378.                 V.topLayer.style.opacity = '.5';
  379.                 V.topLayer.style.visibility = "visible";
  380.  
  381.                 setTimeout(function () {
  382.                     V.topLayer.style.opacity = '0';
  383.                     setTimeout(function () {
  384.                         V.topLayer.style.visibility = "hidden";
  385.                     }, 200);
  386.                 }, 500);
  387.                 return;
  388.             }
  389.             else {
  390.                 V.changeData(1);
  391.             }
  392.         };
  393.  
  394.         /* Sets the img and message to the previous one in the list*/
  395.         this.previousImg = function () {
  396.             var V = window._4ChanImageViewer;
  397.             if (V.linkIndex === 0) {
  398.  
  399.                 V.topLayer.style.background = 'linear-gradient(to left,rgba(0,0,0,0) 90%,rgba(125,185,232,1) 100%)';
  400.                 V.topLayer.style.opacity = '.5';
  401.                 V.topLayer.style.visibility = "visible";
  402.  
  403.                 setTimeout(function () {
  404.                     V.topLayer.style.opacity = '0';
  405.                     setTimeout(function () {
  406.                         V.topLayer.style.visibility = "hidden";
  407.                     }, 200);
  408.                 }, 500);
  409.  
  410.                 return;
  411.             }
  412.             else {
  413.                 V.changeData(-1);
  414.             }
  415.         };
  416.  
  417.         this.changeData = function(delta){
  418.             var V = window._4ChanImageViewer;
  419.             V.mainImgLoaded = false;
  420.  
  421.             V.linkIndex = V.linkIndex + delta;
  422.  
  423.             if(V.postData[V.linkIndex].type !== V.mainImg.tagName){
  424.                 V.mainImg = V.replaceElement(V.mainImg,V.postData[V.linkIndex].type);   
  425.             }
  426.             console.log('Opening: "' + V.postData[V.linkIndex].imgSrc +'" at index ' + V.linkIndex);
  427.             V.mainImg.src = V.postData[V.linkIndex].imgSrc;
  428.  
  429.             V.textWrapper.replaceChild(V.postData[V.linkIndex].backlinks,V.postData[V.linkIndex - delta].backlinks);
  430.             V.textWrapper.replaceChild(V.postData[V.linkIndex].mBlock,V.postData[V.linkIndex - delta].mBlock);
  431.  
  432.             V.mainView.scrollTop = 0;
  433.  
  434.             V.setPersistentValue(INDEX_KEY,V.linkIndex);
  435.         };
  436.  
  437.         this.getElementType = function(src){
  438.             if(src.match(/\.(?:(?:webm)|(?:ogg)|(?:mp4))$/)){
  439.                 return 'VIDEO';
  440.             }else{
  441.                 return 'IMG';
  442.             }
  443.         };
  444.  
  445.         this.replaceElement = function(element,newType){
  446.             var V = window._4ChanImageViewer;
  447.             var newElement = document.createElement(newType);
  448.  
  449.             newElement.className = element.className;
  450.             newElement.id = element.id;
  451.             newElement.style = element.style;
  452.             newElement.autoplay = element.autoplay;
  453.             newElement.controls = element.controls;
  454.             newElement.loop = element.loop;
  455.  
  456.             newElement.addEventListener('click',V.clickImg,false);
  457.             newElement.onload = function(){
  458.                 window._4ChanImageViewer.imageLoadHandler();
  459.             };
  460.             element.parentElement.insertBefore(newElement,element);
  461.             element.parentElement.removeChild(element);
  462.             return newElement;
  463.         };
  464.  
  465.  
  466.  
  467.         /* Function for handling click image events*/
  468.         this.clickImg = function(event){
  469.             var V = window._4ChanImageViewer;
  470.             event.stopPropagation();
  471.             V.nextImg();
  472.  
  473.         };
  474.  
  475.         this.eventStopper = function(event){
  476.             if(event.target.nodeName !== 'A'){
  477.                 event.stopPropagation();
  478.             }
  479.         };
  480.  
  481.         this.confirmExit = function(){
  482.             var V = window._4ChanImageViewer;
  483.             if(window.confirm('Exit Viewer?')){
  484.                 V.remove();
  485.             }
  486.         };
  487.  
  488.         /* Removes the view and cleans up handlers*/
  489.         this.remove = function(){
  490.             var V = window._4ChanImageViewer;
  491.             unsafeWindow.removeEventListener('keydown',V.arrowKeyListener,false);
  492.             unsafeWindow.removeEventListener('mousemove',V.menuWatcher,false);
  493.             document.body.removeEventListener('click',V.windowClick,true);
  494.             document.body.removeChild(V.topLayer);
  495.             document.body.removeChild(V.mainView);
  496.             document.body.removeChild(V.customStyle);
  497.             document.body.removeChild(V.bottomMenu);
  498.             document.body.style.overflow="auto";
  499.             V.canPreload = false;
  500.             window.setTimeout(function(){
  501.                 delete window._4ChanImageViewer;
  502.             },10);    
  503.         };
  504.  
  505.  
  506.         /*Mouse-move Handler that watches for when menus should appear and mouse behavior*/
  507.         this.menuWatcher = function(event){  
  508.             var V = window._4ChanImageViewer;   
  509.             var height_offset = window.innerHeight - V.bottomMenu.offsetHeight;
  510.             var width_offset = window.innerWidth - V.bottomMenu.offsetWidth;
  511.             var center = window.innerHeight / 2;
  512.             var halfArrow = V.leftArrow.offsetHeight / 2;
  513.  
  514.             if(event.clientX >= width_offset && event.clientY >= height_offset){
  515.                 V.bottomMenu.className='bottomMenuShow';   
  516.             }else if(V.bottomMenu.className==='bottomMenuShow'){
  517.                 V.bottomMenu.className ='hidden';
  518.             }    
  519.  
  520.             if((event.clientX <= (100) || event.clientX >= (window.innerWidth-100)) && 
  521.                (event.clientY <= (center + halfArrow) && event.clientY >= (center - halfArrow))){
  522.                 V.rightArrow.classList.remove('hidden');
  523.                 V.leftArrow.classList.remove('hidden');
  524.             }else{
  525.                 V.rightArrow.classList.add('hidden');
  526.                 V.leftArrow.classList.add('hidden');
  527.             }
  528.  
  529.                 //avoids chrome treating mouseclicks as mousemoves
  530.             if(event.clientX !== V.lastMousePos.x && event.clientY !== V.lastMousePos.y){
  531.                 //mouse click moves to next image when invisible
  532.                 V.mainImg.classList.remove('hideCursor');
  533.  
  534.                 window.clearTimeout(V.mouseTimer);
  535.                 document.body.removeEventListener('click',V.windowClick,true);
  536.                 document.body.classList.remove('hideCursor');
  537.                 if(event.target.id === V.mainImg.id){
  538.                     //hide cursor if it stops, show if it moves
  539.                 V.mouseTimer = window.setTimeout(function(){
  540.                             V.mainImg.classList.add('hideCursor');
  541.                             document.body.classList.add('hideCursor');
  542.                             document.body.addEventListener('click',V.windowClick,true);
  543.                         }, 200);
  544.                 }
  545.  
  546.             }
  547.  
  548.             V.lastMousePos.x = event.clientX;
  549.             V.lastMousePos.y = event.clientY;
  550.  
  551.         };
  552.  
  553.         /*Stores a key value pair as a cookie*/
  554.         this.setPersistentValue = function(key, value){
  555.             document.cookie = key + '='+value + ';expires=Thu, 01 Jan 3000 00:00:00 UTC;domain=.4chan.org;path=/';
  556.         };
  557.  
  558.         /* Retrieves a cookie value via its key*/
  559.         this.getPersistentValue = function(key){
  560.             var cookieMatch = document.cookie.match(new RegExp(key+'\\s*=\\s*([^;]+)'));
  561.             if(cookieMatch){
  562.                 return cookieMatch[1];
  563.             }else{
  564.                 return null;   
  565.             }
  566.  
  567.  
  568.         };
  569.  
  570.         this.setFitToScreenHeight = function(shouldFitImage){
  571.             var V = window._4ChanImageViewer;
  572.             V.shouldFitHeight  = shouldFitImage;
  573.             //ignore if image has no height as it is likely not loaded.
  574.             if(shouldFitImage && V.mainImg.naturalHeight){
  575.                 V.fitHeightToScreen();
  576.             }else{
  577.                 V.mainImg.style.maxHeight = '';
  578.             }
  579.         };
  580.         this.setFitToScreenWidth = function(shouldFitImage){
  581.             var V = window._4ChanImageViewer;
  582.             V.mainImg.style.maxWidth = shouldFitImage ? '100%' : 'none';
  583.         };
  584.  
  585.  
  586.         this.imageLoadHandler = function(){
  587.             var V = window._4ChanImageViewer;
  588.             if(V.shouldFitHeight) {
  589.                 V.fitHeightToScreen();
  590.             }
  591.         };
  592.  
  593.         /* Fits image to screen height*/
  594.         this.fitHeightToScreen = function(){
  595.             var V = window._4ChanImageViewer;
  596.             //sets the changeable properties to the image's real size
  597.             var height = V.mainImg.naturalHeight;
  598.             V.mainImg.style.maxHeight = height + 'px';
  599.  
  600.             //actually tests if it is too high including padding
  601.             var heightDiff = (V.mainImg.clientHeight > height)?
  602.                 V.mainImg.clientHeight - V.mainView.clientHeight:
  603.                 height -  V.mainView.clientHeight;
  604.  
  605.             if(heightDiff > 0){      
  606.                 V.mainImg.style.maxHeight = (height - heightDiff) + 'px';
  607.             }else{
  608.                 V.mainImg.style.maxHeight = height + 'px';	
  609.             }
  610.         };
  611.         
  612.  
  613.  
  614.     };//end return function
  615. })();
  616.  
  617.  
  618.  
  619. //Build the open button
  620. var openBttn = document.createElement('button');
  621. openBttn.style.position = 'fixed';
  622. openBttn.style.bottom = '0';
  623. openBttn.style.right = '0';
  624. openBttn.innerHTML = "Open Viewer";
  625. openBttn.addEventListener('click',function(){
  626.     //make the viewer and put it on the window so we can clean it up later
  627.     window._4ChanImageViewer = new Viewer();
  628.     window._4ChanImageViewer.open();
  629. },false);
  630. document.body.appendChild(openBttn);
  631.  
  632.  
  633.  
  634.  
  635.  
  636.  
  637.  
  638.