var numframe=0;
function Frame(){
	numframe++ ;
	this.frame= document.createElement('div') ;
	this.frame.style.position='absolute';
	this.frame.style.visibility='none';
	this.frame.className='popframe';
	this.tbar = document.createElement('div');
	this.tbar.style.display ='block';
	this.tbar.style.backgroundColor='#AAF' ;
	this.tbar.style.width ='100%';
	this.tbar.style.heigth ='25px';
	this.tbar.style.direction='ltr';
	this.tbar.style.textAlign='left' ;
	this.tbar.innerHTML = [ 
	'<img src="images/commun/favicon.png" style="width:16px; height:16px;margin:3px;" title:"derhy" />',
	'<img id="close', numframe,'" src="images/commun/close.png" style="position: absolute; ',
	'right: 2px; top: 2px; cursor: pointer;" title="close"/>'
	].join(''); 
	this.frame.appendChild(this.tbar);
	this.numframe= numframe ;
	this.content = document.createElement("div"); 
	this.content.style.position = "relative";
    this.content.className = "popcontent";
    this.frame.appendChild(this.content);
    return this;
 }
 
Frame.prototype.show = function(text, x, y, zIndex) {
    this.content.innerHTML = text;             
    this.frame.style.left = x + "px";        
    this.frame.style.top = y + "px";
    this.frame.style.zIndex= zIndex;
    this.frame.style.visibility = "visible"; 
    if (this.frame.parentNode != document.body)
        document.body.appendChild(this.frame);
};

Frame.prototype.hide = function() {
    this.frame.style.visibility = "hidden"; 
};

    

function titlebar(){
	 return
	[ "<div  style='display: block; background-color: rgb(204, 204, 255);",
	" width: 100%; height: 25px; direction: ltr; text-align: left;cursor:move;' ",
	" onmousedown='drag(this.parentNode,event)' ",
	">",
	'<img src="images/commun/favicon.png" style="width:16px; height:16px;margin:3px;" title:"derhy" />',
	'<img id="close" src="images/commun/close.png" style="position: absolute; ',
	'right: 2px; top: 2px; cursor: pointer;" title="close"/></div>'
	].join(''); 
}


function drag(elementToDrag, event) {
    var startX = event.clientX , startY = event.clientY  ;    
 	
   var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;
    var deltaX = startX - origX, deltaY = startY - origY;
    if (document.addEventListener) {  // DOM Level 2 event model
        document.addEventListener("mousemove", moveHandler, true);
        document.addEventListener("mouseup", upHandler, true);
    }
    else if (document.attachEvent) {  // IE 5+ Event Model
        elementToDrag.setCapture();
        elementToDrag.attachEvent("onmousemove", moveHandler);
        elementToDrag.attachEvent("onmouseup", upHandler);
        elementToDrag.attachEvent("onlosecapture", upHandler);
    }
    else {  // IE 4 Event Model
        var oldmovehandler = document.onmousemove; // used by upHandler() 
        var olduphandler = document.onmouseup;
        document.onmousemove = moveHandler;
        document.onmouseup = upHandler;
    }

    // We've handled this event. Don't let anybody else see it.  
    if (event.stopPropagation) event.stopPropagation();  // DOM Level 2
   else event.cancelBubble = true;                      // IE

    // Now prevent any default action.
    if (event.preventDefault) event.preventDefault();   // DOM Level 2
	   else event.returnValue = false;                     // IE

    function moveHandler(e) {
        if (!e) e = window.event;  // IE Event Model
        elementToDrag.style.left = (e.clientX - deltaX) + "px";
        elementToDrag.style.top = (e.clientY - deltaY) + "px";
        if (e.stopPropagation) e.stopPropagation();  // DOM Level 2
        else e.cancelBubble = true;                  // IE
    }

    function upHandler(e) {
        if (!e) e = window.event;  // IE Event Model
        // Unregister the capturing event handlers.
        if (document.removeEventListener) {  // DOM event model
            document.removeEventListener("mouseup", upHandler, true);
            document.removeEventListener("mousemove", moveHandler, true);
        }
        else if (document.detachEvent) {  // IE 5+ Event Model
            elementToDrag.detachEvent("onlosecapture", upHandler);
            elementToDrag.detachEvent("onmouseup", upHandler);
            elementToDrag.detachEvent("onmousemove", moveHandler);
            elementToDrag.releaseCapture();
        }
        else {  // IE 4 Event Model
            document.onmouseup = olduphandler;
            document.onmousemove = oldmovehandler;
        }
        if (e.stopPropagation) e.stopPropagation();  // DOM Level 2
        else e.cancelBubble = true;                  // IE
    }
}