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

Floating fixed and collapseable 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');

//        var dragWrapperDiv = document.createElement('div');
//        dragWrapperDiv.setAttribute('id', 'dragWrapper');
//        dragWrapperDiv.setAttribute('onmouseover', 'drag(\'right-side-control-edit-pane-outer-wrapper\')');
//        dragWrapperDiv.setAttribute('onfocus', 'this.blur()');

//        var dragWrapperText = document.createTextNode(":::::: drag ::::::");
//        dragWrapperDiv.appendChild(dragWrapperText);

        // ** 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 page
        parent.insertBefore(outerWrapperDiv, toolPane);
        // remove the toolPane
        parent.removeChild(toolPane);
        // nest the divs we're creating
        outerWrapperDiv.appendChild(innerBordersDiv);
//        innerBordersDiv.appendChild(dragWrapperDiv);
        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(/_layouts/IMAGES/TPMin2.gif)" : "url(/_layouts/IMAGES/TPMax2.gif)"
    }
    return;
}


// ---- DRAG FUNCTIONALITY ----

var dragOn = 0
var dragDiv = null;
var dragX = 0, dragY = 0;
var zMax = 0;
var dragInit = 0;
var lastMenuPosY = 80;

var timer;

//function scrolltop() {
//    document.getElementById('scrollmenu').style.pixelTop = document.body.scrollTop
//    timer = setTimeout("scrolltop()", 1)
//}
function stoptimer() {
    clearTimeout(timer)
}


function initDrag() {
    if (document.layers) {
        document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP);
    }
    
    document.onmousemove = dragf;
    document.onmousedown = dragf;
    document.onmouseup = dragf;
    dragDiv = null;
    dragInit = 1;

    if (document.getElementsByTagName) {
        zMax = document.getElementsByTagName("DIV").length;
    }
    else if (document.all) {
        zMax = document.body.all.tags("DIV").length;
    }
    else if (document.layers) {
        zMax = document.layers.length;
    }
}
function dragf(arg) {
    ev = arg ? arg : event;
    if (dragDiv && ev.type == "mousedown") {
        dragOn = 1;
        dragX = (ev.pageX ? ev.pageX : ev.clientX) - parseInt(dragDiv.style.left);
        dragY = (ev.pageY ? ev.pageY : ev.clientY) - parseInt(dragDiv.style.top);
        dragDiv.style.zIndex = zMax++; // remove this line to preserve z-indexes
        return false;
    }
    if (ev.type == "mouseup") {
        dragOn = 0;
        lastMenuPosY = document.getElementById("right-side-control-edit-pane-outer-wrapper").offsetTop - document.documentElement.scrollTop;
    }
    if (dragDiv && ev.type == "mousemove" && dragOn) {
        dragDiv.style.left = (ev.pageX ? ev.pageX : ev.clientX) - dragX;
        dragDiv.style.top = (ev.pageY ? ev.pageY : ev.clientY) - dragY;
        return false;
    }
    if (ev.type == "mouseout") {
        if (!dragOn) dragDiv = null;
    }
}
function drag(div) {
    if (!dragInit) initDrag();
    if (!dragOn) {
        dragDiv = document.getElementById ? document.getElementById(div) :
      document.all ? document.all[div] : document.layers ?
         document.layers[div] : null;
        if (document.layers) dragDiv.style = dragDiv;
        dragDiv.onmouseout = dragf;
    }
}

//function OpenCloseDiv(divName) {
//    if (divName.style.display == "none") {
//        divName.style.display = "block";
//    }
//    else {
//        divName.style.display = "none";
//    }
//}

//function scrollMenu() {
//    var menuDiv = document.getElementById("right-side-control-edit-pane-outer-wrapper");
//    if (menuDiv) {
//        menuDiv.style.top = document.documentElement.scrollTop + lastMenuPosY + "px";
//    }
//}

//window.onscroll = scrollMenu;