gistfile1.txt

I am trying to dynamically create and insert a panel such that it spans across all monitors. I already got the top left most x and y coords and i have the full width and height of all monitors combined. However my panel seems to appear only one monitor even if i set the width and height to be over that size, this is my code, this will put a panel over everything, double click it to close it.

    var win = Services.wm.getMostRecentWindow(null);
    var panel = win.document.createElement('panel');
    var screen = Services.appShell.hiddenDOMWindow.screen;
    var props = {
    	noautohide: true,
    	level: 'top',
    	style: 'padding:0; margin:0; width:3286px; height:1237px; -moz-appearance:none; background-color:steelblue;'
    }
    
    var popupset = win.document.createElement('popupset');
    
    for (var p in props) {
    	panel.setAttribute(p, props[p]);
    }
     
    popupset.appendChild(panel); 
    win.document.documentElement.appendChild(popupset);
     
     
    panel.addEventListener('dblclick', function () {
    	panel.parentNode.parentNode.removeChild(panel.parentNode);
    }, false);
    panel.openPopup(null, 'overlap', screen.availLeft, screen.availTop);