/*	=================================================================
    =================================================================

	Floating fixed and collapsable SharePoint WebPart ToolPane Hack

	This is a set of scripts put together by Darrel Austin that attempts
	at making a better UI for the SharePoint author who has to modify 
	webParts and is tired of having to scroll up, down, left and right 
	to access the webPart toolPane WAAAYYY over on the right side
	of the screen.
	
	Many of these scripts are modifications of existing work by others.
	I've tried to credit everyone as well as added copious comments in 
	hopes of making this legible.
	
	It's been tested in IE6, 7, and Firefox 2. YMMV with other browsers.
	
	=================================================================
	=================================================================
	
*/



/*	  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
      WRAP THE TOOLPANE FUNCTION

	  this function is a hacked-apart-and-put-back-together solution based off of 
      Xaprb's example located here:
      http://www.xaprb.com/blog/2006/10/29/automatic-image-captions-with-unobtrusive-javascript/
      
      I'll try to explain what we're doing here with some pseudo markup. The issue is that sharepoint
      adds a huge table to add the right-side toolpane when wanting to edit a web part. This means
      the page author has to scroll to hell and back to find the SAVE/APPLY buttons not to mention
      all the options. This script here will find the tool pane markup, then add some additional
      markup that we can then leverage with the other scripts and CSS to allow the tool pane
      to be positioned FIXED, which will put it in a specific spot in the viewport every time.
      To allow people to hide it to actually edit the content, we're adding a link that will then
      toggle the tool pane from visible to hidden and back.
      
      existing markup (object[html element]):
      
      toolpane[table /]
      
      what we will create with this script:
      
      outerWrapper[div] = we'll position this via CSS
		toggleLinkWrapper[div]
			toggleLink[a] = the link a person can click to show/hide the toolpane
			[/a]
		[/div]
		innerWrapper[div] = the div we'll show/hide via javascript
			toolpane[table /] 
		[/div]
	  [/div]
	  
	  Disclaimer: Could this be streamlined/made cleaner? I'm sure it can. If you have suggestions,
	  let me know... darrel *dot* austin *at* *that-email-service-owned-by-google* *dot* com.
	  
	  Note that I used ungainly long IDs for everything. Why? Well, when in rome...mainly I did it
	  to make sure SharePoint didn't over-ride anything in its own CSS
	  
	  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
*/


function wrapToolPane() {


	if(document.getElementById('MSOTlPn_Tbl')){

	  // find the toolpane table (the item we are wrapping HTML around)
	  var toolPane = document.getElementById('MSOTlPn_Tbl');

      // find the parent node that our toolpane is sitting in.
      var parent = toolPane.parentNode;

	  // ** outer wrapper DIV ** //
	  // create the outer wrapper div (which we'll position via CSS. This
	  // div also will hold our drop shadow for us)
      var outerWrapperDiv = document.createElement('div');
	  outerWrapperDiv.setAttribute('id','right-side-control-edit-pane-outer-wrapper');
	  
	  // ** inner borders ** //
	  // this confines the innards of our toolpane + the toolpane toggle //
	  var innerBordersDiv = document.createElement('div');
	  innerBordersDiv.setAttribute('id','right-side-control-edit-pane-innerBorders');
	  
	  // ** inner wrapper DIV ** //
	  // create the inner wrapper div (the one we'll collapse/expand via javascript)
	  var innerWrapperDiv = document.createElement('div');
	  innerWrapperDiv.setAttribute('id', 'right-side-control-edit-pane-inner-wrapper');
	  
	  // ** toggle link wrapper ** //
	  // create the wrapper for the toggle link
	  var toggleLinkWrapperDiv = document.createElement('div');
	  toggleLinkWrapperDiv.setAttribute('id', 'right-side-control-edit-pane-toggleLinkWrapper');
	  
	 /* // ** toggle link ** //
	  // create the toggle link
	  var toggleLinkWrapperLink = document.createElement('a');
	  toggleLinkWrapperLink.setAttribute('href', 'javascript:toggleTools(\'right-side-control-edit-pane-inner-wrapper\');');
	  toggleLinkWrapperLink.setAttribute('style', 'url(\'/_layouts/images/TPMin2.gif\') no-repeat center left;');
	  toggleLinkWrapperLink.setAttribute('id','right-side-control-edit-pane-inner-wrapperToggle');
	  // create the text for the toggle link
	  var toggleLinkWrapperLinkText = document.createTextNode("Show/Hide Options");
	  
	  // ** put all the elements together and rearrange ** //
	  
	  // nest the toggle link text inside the toggle link
	  toggleLinkWrapperLink.appendChild(toggleLinkWrapperLinkText);
	  // nest the toggle link text and link inside the wrapper div
	  toggleLinkWrapperDiv.appendChild(toggleLinkWrapperLink);
	  // add the outerWrapperDiv to the apge
	  parent.insertBefore(outerWrapperDiv, toolPane);
	  // remove the toolPane
	  parent.removeChild(toolPane);
	  // nest the divs we're creating
	  outerWrapperDiv.appendChild(innerBordersDiv);
	  innerBordersDiv.appendChild(toggleLinkWrapperDiv);
	  innerBordersDiv.appendChild(innerWrapperDiv);
	  // put the toolPane back
	  innerWrapperDiv.appendChild(toolPane);
	  
	  // manually style the background image for the toggle so the '-' icon shows up.
	  // this shouldn't be necessary, as it's handled in the CSS file, but for some reason, IE6 will NOT show
	  // the icon at first unless we do this step, so, to appease IE6, we'll do it...
	  // note that we're using the built-in +/- icons in sharepoint in the _layouts image library. You could 
	  // change this to make your own icons
	  document.getElementById('right-side-control-edit-pane-inner-wrapperToggle').style.backgroundImage = "url(\'/_layouts/images/TPMin2.gif\')";
	  document.getElementById('right-side-control-edit-pane-inner-wrapperToggle').style.backgroundPosition = "center left";
	  document.getElementById('right-side-control-edit-pane-inner-wrapperToggle').style.backgroundRepeat = "no-repeat";
	  */
    }
}


/*	  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
      TOGGLE LINK FUNCTION

	  This is the function that will get called via the toggle link created
	  above and will collapse and expand the div to allow the end user
	  to hide the panel as necessary
	  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
*/      
      

	function toggleTools(id){
		var toggleLink = id + 'Toggle';
		if(document.getElementById){
			document.getElementById(id).style.display= 
			document.getElementById(id).style.display == "none"||""? "block":"none";
			document.getElementById(toggleLink).style.backgroundImage= 
			document.getElementById(id).style.display == "block"? "url(http://courtnet2.courts.state.mn.us/_layouts/images/TPMin2.gif)":"url(http://courtnet2.courts.state.mn.us/_layouts/images/TPMax2.gif)"
			}
		return;
 }