☰

WME Chat Resizer and Auto Scroll

Adds resize buttons to the chat window

目前為 2016-01-02 提交的版本，檢視 最新版本。

// ==UserScript==
// @name 			WME Chat Resizer and Auto Scroll
// @description 	Adds resize buttons to the chat window
// @namespace		[email protected]
// @grant			none
// @grant			GM_info
// @version			0.2.6
// @match			https://editor-beta.waze.com/*editor/*
// @match			https://www.waze.com/*editor/*
// @author			Rick Zabel '2014
// @license			MIT/BSD/X11
// ==/UserScript==

var WMEChatResizeVersion = "0.2.6";



var WMEChatResizeVersionUpdateNotes = "WME Chat Resize has been updated to " + WMEChatResizeVersion;
WMEChatResizeVersionUpdateNotes = WMEChatResizeVersionUpdateNotes + "\r\n" + "This script adds buttons to the chat title bar and removes the space on the right of the chat.";
WMEChatResizeVersionUpdateNotes = WMEChatResizeVersionUpdateNotes + "\r\n" + "The buttons will let you hide or show the users list";
WMEChatResizeVersionUpdateNotes = WMEChatResizeVersionUpdateNotes + " " + "and will let you make the chat tall or normal heights. also has an option for scrolling the chat.";
WMEChatResizeVersionUpdateNotes = WMEChatResizeVersionUpdateNotes + "\r\n" + "Change log: I removed the bootstrap code.";
WMEChatResizeVersionUpdateNotes = WMEChatResizeVersionUpdateNotes + "\r\n" + "I removed the bootstrap code.";
WMEChatResizeVersionUpdateNotes = WMEChatResizeVersionUpdateNotes + "\n" + "As usual let me know if there are any issues -RickZabel";

//alert the user in  WMEChatResize version updates
if (localStorage.getItem('WMEChatResizeVersion') == WMEChatResizeVersion) {
    //console.log("UR Chat Resize Version " + WMEChatResizeVersion);
} else {
    alert(WMEChatResizeVersionUpdateNotes);
    localStorage.setItem('WMEChatResizeVersion', WMEChatResizeVersion);
}

//Setup some global vars to be used in the functions 
//currently i plan on lettings the chat default to normal on page load
//window.WMEChatResizeHeight = "short"; //short or tall
//window.WMEChatResizeUsers  = "shown";  //shown  or hidden


//Setup some global vars to be used in the functions 
//currently i plan on lettings the chat default to normal on page load size
window.WMEChatResizeAutoScrollOnOff = "on";
window.WMEChatResizeAutoScrollChatCount = 0;

  
function WMEChatResize_init() {
    
    WMEChatResize =  { 
        last: new Array(),
        isLast: false,
        isLSsupported: false,
        zoom: false
    };
    
    WMEChatResize.init = function() {
        //add the buttons to the chat title bar to hide/show user list and max and min
  
        // 
        var g = $('<style type="text/css">.WMEChatResize { font-size: 15px; color:#FFFFFF; background: transparent; border: 0px none !important; padding: 5px 5px 3px 3px; opacity: 100; }</style>');
        $("head").append(g);  
		
		var g = $('<style type="text/css">.WMEChatResizeScrollChat { font-size: 15px; color:#FFFFFF; background: transparent; border: 0px none !important; padding: 3px 3px 3px 3px; opacity: 100; }</style>');
        $("head").append(g);  
		
		var b = "";
	
		b = b + '<div id="ChatResizeHeader" style="top: 0px; height: 25px; text-align: center; padding: 0px 0px 0px 0px;color:#5A5A5A; font-size: 10px; width: 100%;">';
		
		//auto scroll running
        b = b + '<button id="WMEChatResizeAutoScrollChatIsRunning" class="WMEChatResizeScrollChat" style="position:absolute;Left:15px" title="MEChatResize Auto Scroll Running" type="button">v</button>';

        //stopped auto scrolling
 		b = b + '<button id="WMEChatResizeAutoScrollChatIsStopped" class="WMEChatResizeScrollChat" style="position:absolute;Left:15px" title="MEChatResize Auto Scroll Stopped" type="button">-</button>';

		b = b + ' Chat Resizer &nbsp' + WMEChatResizeVersion;

        //Short Chat Hide Users
        b = b + '<button id="WMEChatResizeShortChatHideUsers" class="WMEChatResize" style="position:absolute;Right:15px;" title="Short Chat Hide Users" type="button">></button>';

        //Tall Chat Hide Users
        b = b + '<button id="WMEChatResizeTallHideUsers" class="WMEChatResize" style="position:absolute;Right:15px;" title="Tall Chat Hide Users" type="button">></button>';
        
        //Short Chat Show Users
        b = b + '<button id="WMEChatResizeShortChatShowUsers" class="WMEChatResize" style="position:absolute;Right:15px;" title="Short Chat Show Users" type="button"><</button>';
        
        //Tall Chat Show Users
        b = b + '<button id="WMEChatResizeTallShowUsers" class="WMEChatResize" style="position:absolute;Right:15px;" title="Tall Chat Show Users" type="button"><</button>';
       
        //Tall Chat Go Short with Hidden Users
        b = b + '<button id="WMEChatResizeShortChatHideUsers2" class="WMEChatResize" style="position:absolute;Right:35px;" title="Tall Chat Go Short with Hidden Users" 	type="button">v</button>';

        //Tall Chat Go Short and Show Users
        b = b + '<button id="WMEChatResizeShortChatShowUsers2" class="WMEChatResize" style="position:absolute;Right:35px;" title="Tall Chat Go Short With Shown Users" 	type="button">v</button>';
        
        //Short Chat Go Tall and Hide Users	   
        b = b + '<button id="WMEChatResizeTallHideUsers2" class="WMEChatResize" style="position:absolute;Right:35px;" title="Short Chat Go Tall and Hide Users" type="button">^</button>';
        
        //Short Chat Go Tall and Show Users	 
        b = b + '<button id="WMEChatResizeTallShowUsers2" class="WMEChatResize" style="position:absolute;Right:35px;" title="Short Chat Go Tall and Show Users" type="button">^</button>';
	
		/*
		//Extra Short Chat With user list 
        b = $('<button id="WMEChatResizeTallShowUsers2" class="WMEChatResize" style="float:right;color:#CC0000" title="Extra short chat" type="button">_</button>';
        b.click (WMEChatResize.TallShowUsers);
        $("#chat .header").append(b); 
		*/
		
		//Extra Short Chat without user list
        b = b + '<button id="WMEChatResizeExtraShortChatHideUsers" class="WMEChatResize" style="position:absolute;Right:55px;" title="Extra short chat" type="button">_</button>';
      
        b = b + '</div>';
		//alert(b);
		//style="position:absolute;Right:50px;color:#CC0000"
		
		//$("#chat .header").append($(b)); 
		//$("#chat").prepend($(b));
		$("#chat .header").prepend($(b));		
			
		//$("#ChatResizeHeader").mouseup(WMEChatResize.ChatResizeminchat);

		
		$("#ChatResizeHeader").mouseup(function(e) {
		//alert(e.which);
        if (e.which == 1)  {
		//check to make sure we are not over any of our buttons
			if ($('#WMEChatResizeAutoScrollChatIsRunning').is(':hover') || $('#WMEChatResizeAutoScrollChatIsStopped').is(':hover') || $('#WMEChatResizeTallHideUsers').is(':hover') || $('#WMEChatResizeShortChatShowUsers').is(':hover') || $('#WMEChatResizeTallShowUsers').is(':hover') || $('#WMEChatResizeShortChatHideUsers2').is(':hover') || $('#WMEChatResizeShortChatShowUsers2').is(':hover') || $('#WMEChatResizeTallHideUsers2').is(':hover') || $('#WMEChatResizeTallShowUsers2').is(':hover') || $('#WMEChatResizeExtraShortChatHideUsers').is(':hover') || $('#WMEChatResizeShortChatHideUsers').is(':hover')) {
					//alert('mouse over buttons');
					
			} else {
				//click the chat toggle button (chat balloon)_
				$('#chat-overlay.open .toggle').trigger('click');
			}
		}		
		//alert(e.which);
        
		});
		
		//setup button clicks
		$("#WMEChatResizeShortChatHideUsers").click(WMEChatResize.ShortChatHideUsers);
        $("#WMEChatResizeTallHideUsers").click(WMEChatResize.TallHideUsers);
        $("#WMEChatResizeShortChatShowUsers").click(WMEChatResize.ShortChatShowUsers);
        $("#WMEChatResizeTallShowUsers").click(WMEChatResize.TallShowUsers);
        $("#WMEChatResizeShortChatHideUsers2").click(WMEChatResize.ShortChatHideUsers);
        $("#WMEChatResizeShortChatShowUsers2").click(WMEChatResize.ShortChatShowUsers);
        $("#WMEChatResizeTallHideUsers2").click(WMEChatResize.TallHideUsers);
        $("#WMEChatResizeTallShowUsers2").click(WMEChatResize.TallShowUsers);
        $("#WMEChatResizeExtraShortChatHideUsers").click(WMEChatResize.ExtraShortChatHideUsers);
		$("#WMEChatResizeAutoScrollChatIsRunning").click(WMEChatResize.WMEChatResizeAutoScrollChatIsStopped);
		$("#WMEChatResizeAutoScrollChatIsStopped").click(WMEChatResize.WMEChatResizeAutoScrollChatGo);
		
		/*
         //auto scroll div
        b = $('<div id="autoscrolldiv" Style="position:absolute; left: 0px; bottom: 15px; width 10px;"></div>');
		//b = $('<div id="autoscrolldiv" Style="width: 50%; position: relative;"></div>');
        $(".new-message").after(b);
		//$("#chat").prepend(b);
		
		
        //auto scroll running
        //position:absolute;Left:4px;bottom: 20px; Right:5px;color:#CC0000; background: #ffffff; border: 0px none !important; padding: 0px 0px 0px 0px;
        //opacity: 100;color:#CC0000; background: #ffffff; border: 0px none !important; padding: 0px 0px 0px 0px;
        b = $('<button id="WMEChatResizeAutoScrollChatIsRunning" class="WMEChatResizeScrollChat" style="position:absolute;Left:6px;bottom: 0px; color: #CC0000; background: #ffffff; border: 0px none !important; padding: 0px 0px 0px 0px;" title="MEChatResize Auto Scroll Running" type="button">v</button>');
        b.click(WMEChatResize.WMEChatResizeAutoScrollChatIsStopped);
        $("#autoscrolldiv").prepend(b);

        //stopped auto scrolling
        //position:absolute;Left:6px;bottom: 20px; Right:5px;color:#CC0000; background: #ffffff; border: 0px none !important; padding: 0px 0px 0px 0px;
        b = $('<button id="WMEChatResizeAutoScrollChatIsStopped" class="WMEChatResizeScrollChat" style="position:absolute;Left:6px;bottom: 0px; opacity: 100; color: #CC0000; background: #ffffff; border: 0px none !important; padding: 0px 0px 0px 0px;" title="MEChatResize Auto Scroll Stopped" type="button">-</button>');
        b.click(WMEChatResize.WMEChatResizeAutoScrollChatGo);
        $("#autoscrolldiv").prepend(b);
		*/
		
        //get the WMEChatResizeAutoScroll option
        window.WMEChatResizeAutoScroll = localStorage.getItem('WMEChatResizeAutoScroll');
        //alert(WMEChatResizeAutoScroll);

        if (WMEChatResizeAutoScroll == "" || WMEChatResizeAutoScroll == null) {
            //alert(WMEChatResizeAutoScroll);
            //} else {
            //alert("UR-Comments now has multiple User's comment lists that you may choose from. To select from the lists look under the settings section");
            WMEChatResizeAutoScroll ="Scroll";
            localStorage.setItem('WMEChatResizeAutoScroll', WMEChatResizeAutoScroll);
        }     

        //if the user wants the chat scroll on enable auto scroll
        if(WMEChatResizeAutoScroll ==="Scroll"){
            // auto scroll buttons
            document.getElementById('WMEChatResizeAutoScrollChatIsRunning').style.visibility = "visible"; // 
            document.getElementById('WMEChatResizeAutoScrollChatIsStopped').style.visibility = "hidden"; // 
            //delay start auto scroll
            setTimeout( WMEChatResize.WMEChatScrollChatTimeout, 2000);     
        } else {
            document.getElementById('WMEChatResizeAutoScrollChatIsRunning').style.visibility = "hidden"; // 
            document.getElementById('WMEChatResizeAutoScrollChatIsStopped').style.visibility = "visible"; //
        }
        
        //hide my short chat button since the chat loads short
        //document.getElementById('WMEChatResizeShortChatHideUsers').style.visibility="hidden";		// > short hide users
        document.getElementById('WMEChatResizeTallHideUsers').style.visibility="hidden";			// > tall hide users 
        document.getElementById('WMEChatResizeShortChatShowUsers').style.visibility="hidden";		// < short show users
        document.getElementById('WMEChatResizeTallShowUsers').style.visibility="hidden";			// < tall show users 
        document.getElementById('WMEChatResizeShortChatHideUsers2').style.visibility="hidden";		// V short hide users 
        document.getElementById('WMEChatResizeShortChatShowUsers2').style.visibility="hidden";		// V short show users 
        document.getElementById('WMEChatResizeTallHideUsers2').style.visibility="hidden";			// ^ tall hide users
        //document.getElementById('WMEChatResizeTallShowUsers2').style.visibility="hidden";			// ^ tall show users
		document.getElementById('WMEChatResizeExtraShortChatHideUsers').style.visibility="visible";			// ^ tall show users
		
		//extra short chat
		//$("#chat WMEChatResizeExtraShortChatHideUsers").show();
		//extra short chat
		//$("#chat WMEChatResizeExtraShortChatHideUsers").hide();
		
		//hide / show the default minimize button 
        //$("#chat .minimize").hide();
        
        //chat size buttons			
        /*
        short hide users btn 	
        >	V
        WMEChatResize.ShortChatHideUsers	

        short show users btn	
        <	V
        WMEChatResize.ShortChatShowUsers	


        tall hide users btn	
        >	^
        WMEChatResize.TallHideUsers	

        tall shown users btn	
        <	^
        WMEChatResize.TallShowUsers	

        //button IDs
        WMEChatResizeShortChatHideUsers	
        WMEChatResizeTallHideUsers	
        WMEChatResizeShortChatShowUsers	
        WMEChatResizeTallShowUsers	
        WMEChatResizeShortChatHideUsers2	
        WMEChatResizeShortChatShowUsers2	
        WMEChatResizeTallHideUsers2	
        WMEChatResizeTallShowUsers2	
        */	
        
        // since the chat jumper link isn't always present I had to apply the style to the head  
        var g = $('<style type="text/css">#ChatJumper-JUMP.ChatJumper, #ChatJumper-JUMP-clear { font-size: 11px !important; padding-left: 1px !important; padding-right: 1px !important; }</style>');
        $("head").append(g);  
        
		//this is the container I use to apply css to the site
        //since sometime waze takes back over i am going to make a custom ccs that I edit the innerhtml
        var h = $('<style type="text/css" id="WMEChatResizeCSS">this is the container I use to apply css to the site</style>');
        $("head").append(h);
        
        //move the chat all the way to the right 
        document.getElementById('chat-overlay').style.right="0px";
        
        //shrink down the chat title bar stuff to work with chat jumper
        
        //single-room-label
        var divsToModify = document.getElementsByClassName("single-room-label");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.fontSize="10px";
            divsToModify[i].style.paddingLeft="8px";
        }
        
        //dropdown-toggle
        var divsToModify = document.getElementsByClassName("dropdown-toggle");
        for(var i = 0; i < divsToModify.length; i++) {  
			divsToModify[i].style.fontSize="10px";		
            divsToModify[i].style.paddingLeft="5px";
            divsToModify[i].style.paddingRight="0px";
        }
        
        //status
        var divsToModify = document.getElementsByClassName("status");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.fontSize="11px";
        }  
		
      
    };
    

	WMEChatResize.ChatResizeminchat = function(a) {
			//minimize the chat if chatresize's header is clicked
			
			//check to make sure we are not over any of our buttons
			if ($('#WMEChatResizeAutoScrollChatIsRunning').is(':hover') || $('#WMEChatResizeAutoScrollChatIsStopped').is(':hover') || $('#WMEChatResizeTallHideUsers').is(':hover') || $('#WMEChatResizeShortChatShowUsers').is(':hover') || $('#WMEChatResizeTallShowUsers').is(':hover') || $('#WMEChatResizeShortChatHideUsers2').is(':hover') || $('#WMEChatResizeShortChatShowUsers2').is(':hover') || $('#WMEChatResizeTallHideUsers2').is(':hover') || $('#WMEChatResizeTallShowUsers2').is(':hover') || $('#WMEChatResizeExtraShortChatHideUsers').is(':hover') || $('#WMEChatResizeShortChatHideUsers').is(':hover')) {
					//alert('mouse over buttons');
					
			} else {
				//click the chat toggle button (chat balloon)_
				//$('#chat-overlay.open .toggle').trigger('click');
			}
	};
    
    WMEChatResize.WMEChatResizeAutoScrollChatIsStopped = function() {
        //console.log("WME Chat Resizer - Clicked Stop Auto Scrolling Chat");
        //The button that showed auto scroll is running "V" was clicked turn off autoscroll and hide/ show buttons

        //window.WMEChatResizeAutoScrollOnOff = "Off";
        //WMEChatResizeAutoScrollOnOff == "Off"
    		document.getElementById('WMEChatResizeAutoScrollChatIsRunning').style.visibility = "hidden";
		    document.getElementById('WMEChatResizeAutoScrollChatIsStopped').style.visibility = "visible";

        //save the autoscroll setting
            WMEChatResizeAutoScroll ="NoScroll";
            localStorage.setItem('WMEChatResizeAutoScroll', WMEChatResizeAutoScroll);
    };


    WMEChatResize.WMEChatResizeAutoScrollChatGo = function() {
        
        //The button that showed auto scroll is off "-" was clicked turn on autoscroll and hide/ show buttons
        //console.log("WME Chat Resizer - Clicked Scroll to bottom of chat");

        //auto scroll btns
        //WMEChatResizeAutoScrollOnOff == "On"		
        document.getElementById('WMEChatResizeAutoScrollChatIsRunning').style.visibility = "visible";
        document.getElementById('WMEChatResizeAutoScrollChatIsStopped').style.visibility = "hidden";
        
        //save the autoscroll setting
        WMEChatResizeAutoScroll ="Scroll";
        localStorage.setItem('WMEChatResizeAutoScroll', WMEChatResizeAutoScroll);
		
        //set the timeout to launch the function that does the scrolling of the chat
		    setTimeout( WMEChatResize.WMEChatScrollChatTimeout, 5000);
    };

    
    WMEChatResize.WMEChatScrollChatTimeout = function() {

            if (document.getElementById('WMEChatResizeAutoScrollChatIsRunning').style.visibility == "visible") {
                //scroll the chat to the divs length
                //console.log($("#chat .chat-body .messages .message-list").scrollHeight);
                //console.log($("#chat .chat-body .messages .message-list").scrollTop());

                var elem = $("#chat .chat-body .messages .message-list");
                if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
                    //bottom of chat
                    //console.log("WMEChatResize - Chat is All Ready At The Bottom");
                } else {
                    
                    $("#chat .chat-body .messages .message-list").scrollTop($("#chat .chat-body .messages .message-list")[0].scrollHeight+10000);
                  
				  
					//the count was possible killing browser, disabled to be on the safe side
                    //WMEChatResizeAutoScrollChatCount++;;
                    //$("#WMEChatResizeAutoScrollChatIsRunning").html(WMEChatResizeAutoScrollChatCount);
                    //console.log("WMEChatResize - Scrolling Down To The Bottom Of Chat; " + WMEChatResizeAutoScrollChatCount + " Times.");
					//console.log("WMEChatResize - Scrolling Down To The Bottom Of Chat");
                }

            }
           setTimeout(WMEChatResize.WMEChatScrollChatTimeout, 5000);
                    /*
                    //send text to the chat message area
                    b = $('<div id="rickzabel" class="message normal-message"><div class="from">RickZabel</div><div class="body"><div style="direction: ltr; text-align: left;">testing</div>');
                    // b.click (WMEChatResize.TallShowUsers);
                    $("#chat .chat-body .messages .message-list").append(b);
                    */
    };

    
    WMEChatResize.ShortChatHideUsers = function() {
        //alert("ShortChatHideUsers");
        //console.log("WME Chat Resizer - ShortChatHideUsers");
        // adjust my buttons
        document.getElementById('WMEChatResizeShortChatHideUsers').style.visibility="hidden";		// > short hide users
        document.getElementById('WMEChatResizeTallHideUsers').style.visibility="hidden";			// > tall hide users 
        document.getElementById('WMEChatResizeShortChatShowUsers').style.visibility="visible";		// < short show users
        document.getElementById('WMEChatResizeTallShowUsers').style.visibility="hidden";			// < tall show users 
        document.getElementById('WMEChatResizeShortChatHideUsers2').style.visibility="hidden";		// V short hide users
        document.getElementById('WMEChatResizeShortChatShowUsers2').style.visibility="hidden";		// V short show users 
        document.getElementById('WMEChatResizeTallHideUsers2').style.visibility="visible";			// ^ tall hide users
        document.getElementById('WMEChatResizeTallShowUsers2').style.visibility="hidden";			// ^ tall show users
        
		document.getElementById('WMEChatResizeExtraShortChatHideUsers').style.visibility="visible";			// ^ tall show users
		
        var WMEChatResizeStringer = "";
        
        //hide users list
        WMEChatResizeStringer = WMEChatResizeStringer + ".users {visibility: hidden !important;}";
        
        //document.getElementById('chat').style.width="310px ";  //497
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat {width: 310px  !important; }";
        
        //chat-body
        WMEChatResizeStringer = WMEChatResizeStringer + ".chat-body {width: 310px  !important;}";
        
        //messages
        WMEChatResizeStringer = WMEChatResizeStringer + ".messages {width: 348px !important;}";
        
        //message-list
        //WMEChatResizeStringer = WMEChatResizeStringer + ".message-list {width: 310px ; max-height: 246px;}"
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat-overlay #chat .messages .message-list {width: 310px  !important; top: 70px !important; bottom: 0px !important; position: absolute !important; max-height: 90% !important;}";
             
        //new-message
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat .messages .new-message {width: 100% !important;}";
        
        //message-input
        WMEChatResizeStringer = WMEChatResizeStringer + ".message-input {width: 100% !important;}";
        
        //unread-messages-notification width
        WMEChatResizeStringer = WMEChatResizeStringer + ".unread-messages-notification {width: 251px !important;}";
        
        document.getElementById("WMEChatResizeCSS").innerHTML = WMEChatResizeStringer;
    };
    
    
    WMEChatResize.ShortChatShowUsers = function() {
        //alert("ShortChatShowUsers");
		//console.log("WME Chat Resizer - ShortChatShowUsers");
        // adjust my buttons
        document.getElementById('WMEChatResizeShortChatHideUsers').style.visibility="visible";		// > short hide users
        document.getElementById('WMEChatResizeTallHideUsers').style.visibility="hidden";			// > tall hide users 
        document.getElementById('WMEChatResizeShortChatShowUsers').style.visibility="hidden";		// < short show users
        document.getElementById('WMEChatResizeTallShowUsers').style.visibility="hidden";			// < tall show users 
        document.getElementById('WMEChatResizeShortChatHideUsers2').style.visibility="hidden";		// V short hide users 
        document.getElementById('WMEChatResizeShortChatShowUsers2').style.visibility="hidden";		// V short show users
        document.getElementById('WMEChatResizeTallHideUsers2').style.visibility="hidden";			// ^ tall hide users
        document.getElementById('WMEChatResizeTallShowUsers2').style.visibility="visible";			// ^ tall show users
        
		//extra short chat
		document.getElementById('WMEChatResizeExtraShortChatHideUsers').style.visibility="visible";			// ^ tall show users
        
		
        var WMEChatResizeStringer = "";
        
        //WMEChatResizeStringer = WMEChatResizeStringer + "#chat {height: 357px;}"
        
        //show users
        WMEChatResizeStringer = WMEChatResizeStringer + ".users {visibility: visible !important;}";
        
        //document.getElementById('chat').style.width="497px";  //497
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat {width: 497px !important;}";
        
        //chat-body
        WMEChatResizeStringer = WMEChatResizeStringer + ".chat-body {width: 497px !important;}";
        
        //messages
        WMEChatResizeStringer = WMEChatResizeStringer + ".messages {width: 350px !important;}";
        
        //message-list
        WMEChatResizeStringer = WMEChatResizeStringer + ".message-list {width: 348px !important; max-height: 246px !important;}";
        
        //new-message
        WMEChatResizeStringer = WMEChatResizeStringer + ".new-message {width: 350px !important;}";
        
        //message-input
        WMEChatResizeStringer = WMEChatResizeStringer + ".message-input {width: 100% !important;}";
        
        //unread-messages-notification
        WMEChatResizeStringer = WMEChatResizeStringer + ".unread-messages-notification {width: 322px !important;}";
        
        document.getElementById("WMEChatResizeCSS").innerHTML = WMEChatResizeStringer;
        
        
    };
    
    
    WMEChatResize.TallHideUsers = function() {
        //alert("TallHideUsers");
        //WMEChatResizeHeight = "tall";
        //console.log("WME Chat Resizer - TallHideUsers");
        // adjust my buttons
        document.getElementById('WMEChatResizeShortChatHideUsers').style.visibility="hidden";		// > short hide users
        document.getElementById('WMEChatResizeTallHideUsers').style.visibility="hidden";			// > tall hide users 
        document.getElementById('WMEChatResizeShortChatShowUsers').style.visibility="hidden";		// < short show users
        document.getElementById('WMEChatResizeTallShowUsers').style.visibility="visible";			// < tall show users 
        document.getElementById('WMEChatResizeShortChatHideUsers2').style.visibility="visible";		// V short hide users
        document.getElementById('WMEChatResizeShortChatShowUsers2').style.visibility="hidden";		// V short show users 
        document.getElementById('WMEChatResizeTallHideUsers2').style.visibility="hidden";			// ^ tall hide users
        document.getElementById('WMEChatResizeTallShowUsers2').style.visibility="hidden";			// ^ tall show users

		document.getElementById('WMEChatResizeExtraShortChatHideUsers').style.visibility="visible";			// ^ tall show users
                
        var WMEChatResizeStringer = "";
        
        //chat 
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat {height: 100% !important; width: 310px  !important;}";
        
        //chat-body
        WMEChatResizeStringer = WMEChatResizeStringer + ".chat-body {height: 96% !important; width: 310px  !important;}";
        
        //messages 
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat .messages {height: 95% !important; width: 348px !important;}";
        
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat-overlay #chat .messages .message-list {width: 310px  !important; top: 70px !important; bottom: 0px !important; position: absolute !important; max-height: 90% !important;}";
        
        //hide users list
        WMEChatResizeStringer = WMEChatResizeStringer + ".users {visibility: hidden !important;}";
        
        //unread-messages-notification
        WMEChatResizeStringer = WMEChatResizeStringer + ".unread-messages-notification {width: 251px !important;}";
        
        //new-message
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat .messages .new-message {width: 100% !important;}";
        
        //chat-overlay
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat-overlay {bottom: 24px !important; height: 85% !important;}";
        
        // lets build up a string and set that as the innerhtml
        document.getElementById("WMEChatResizeCSS").innerHTML = WMEChatResizeStringer;
        
    };
    
    
    WMEChatResize.TallShowUsers = function() {
        //alert("TallShowUsers");
        //WMEChatResizeHeight = "tall";
        //console.log("WME Chat Resizer - TallShowUsers");
        // adjust my buttons
        document.getElementById('WMEChatResizeShortChatHideUsers').style.visibility="hidden";		// > short hide users
        document.getElementById('WMEChatResizeTallHideUsers').style.visibility="visible";			// > tall hide users
        document.getElementById('WMEChatResizeShortChatShowUsers').style.visibility="hidden";		// < short show users
        document.getElementById('WMEChatResizeTallShowUsers').style.visibility="hidden";			// < tall show users 
        document.getElementById('WMEChatResizeShortChatHideUsers2').style.visibility="hidden";		// V short hide users
        document.getElementById('WMEChatResizeShortChatShowUsers2').style.visibility="visible";		// V short show users
        document.getElementById('WMEChatResizeTallHideUsers2').style.visibility="hidden";			// ^ tall hide users
        document.getElementById('WMEChatResizeTallShowUsers2').style.visibility="hidden";			// ^ tall show users
 
		document.getElementById('WMEChatResizeExtraShortChatHideUsers').style.visibility="visible";			// ^ tall show users
        		
        var WMEChatResizeStringer = "";
        
        //chat 
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat {width: 497px !important; height: 100% !important;}";
        
        //chat-body
        WMEChatResizeStringer = WMEChatResizeStringer + ".chat-body {width: 497px !important; height: 96% !important;}";
        
        //messages 
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat .messages {width: 350px !important; height: 95% !important;}";
        
        //message-list
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat-overlay #chat .messages .message-list {width: 350px !important; top: 70px !important; bottom: 0px !important; position: absolute !important; max-height: 90% !important;}";
        
        //users
        WMEChatResizeStringer = WMEChatResizeStringer + ".users {height: 99% !important; max-height: 95% !important;}";
        
        //chat-overlay
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat-overlay {bottom: 24px !important; height: 85% !important;}";
        
        //new-message
        WMEChatResizeStringer = WMEChatResizeStringer + ".new-message {width: 350px !important;}";
        
        //message-input
        WMEChatResizeStringer = WMEChatResizeStringer + ".message-input {width: 100% !important;}";
        
        //unread-messages-notification
        WMEChatResizeStringer = WMEChatResizeStringer + ".unread-messages-notification {width: 322px !important;}";
        
        // lets build up a string and set that as the innerhtml
        document.getElementById("WMEChatResizeCSS").innerHTML = WMEChatResizeStringer;
        
    };
	
    WMEChatResize.ExtraShortChatHideUsers = function() {
        //alert("ExtraShortChatHideUsers");
		//console.log("WME Chat Resizer - ExtraShortChatHideUsers");
        // adjust my buttons
        document.getElementById('WMEChatResizeShortChatHideUsers').style.visibility="hidden";		// > short hide users
        document.getElementById('WMEChatResizeTallHideUsers').style.visibility="hidden";			// > tall hide users 
        document.getElementById('WMEChatResizeShortChatShowUsers').style.visibility="visible";		// < short show users
        document.getElementById('WMEChatResizeTallShowUsers').style.visibility="hidden";			// < tall show users 
        document.getElementById('WMEChatResizeShortChatHideUsers2').style.visibility="hidden";		// V short hide users
        document.getElementById('WMEChatResizeShortChatShowUsers2').style.visibility="hidden";		// V short show users 
        document.getElementById('WMEChatResizeTallHideUsers2').style.visibility="visible";			// ^ tall hide users
        document.getElementById('WMEChatResizeTallShowUsers2').style.visibility="hidden";			// ^ tall show users
		
		document.getElementById('WMEChatResizeExtraShortChatHideUsers').style.visibility="hidden";			// ^ tall show users
		
        
        var WMEChatResizeStringer = "";
        
        //hide users list
        WMEChatResizeStringer = WMEChatResizeStringer + ".users {visibility: hidden !important;}";
        
        //document.getElementById('chat').style.width="310px ";  //497
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat {height: 200px; width: 400px !important; }"; //width: 310px 
        
        //chat-body
        WMEChatResizeStringer = WMEChatResizeStringer + ".chat-body {width: 400px !important;}"; //width: 310px 
        
        //messages
        WMEChatResizeStringer = WMEChatResizeStringer + ".messages {width: 400px !important;}"; //width: 348px
        
        //message-list
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat-overlay #chat .messages .message-list {width: 400px !important; top: 70px !important; bottom: 0px !important; position: absolute !important; max-height: 90% !important; min-height: 0px !important;}"; //width: 310px 
             
        //new-message
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat .messages .new-message {width: 100% !important;}";
        
        //message-input
        WMEChatResizeStringer = WMEChatResizeStringer + ".message-input {width: 100% !important;}";
        
        //unread-messages-notification width
        WMEChatResizeStringer = WMEChatResizeStringer + ".unread-messages-notification {width: 251px !important;}";
        
        document.getElementById("WMEChatResizeCSS").innerHTML = WMEChatResizeStringer;
    };
    
    WMEChatResize.startcode = function () {
        // Check if WME is loaded, if not, waiting a moment and checks again. if yes init WMEChatResize
        try {
            //if ("undefined" != typeof unsafeWindow.W.model.chat.rooms._events.listeners.add[0].obj.userPresenters[unsafeWindow.Waze.model.loginManager.user.id] ) {
            if ( $( "#chat" ).length ) {
				//console.log("WMEChatResize ready to resize");
                WMEChatResize.init();
            } else {
                setTimeout(WMEChatResize.startcode, 200);
            }
        } catch(err) {
            setTimeout(WMEChatResize.startcode, 200);
        }
    };
    //setTimeout(WMEChatResize.startcode, 5000);
    WMEChatResize.startcode();
}

WMEChatResize_init();