TGFrame = Class.create();

TGFrame.prototype =
{
    initialize : function(headerTitle,options)
    {
        this.width = 100;
        this.height = 200;
        this.x = 0;
        this.y = 0;
        this.dragging = false;
        this.dragX = 0;
        this.dragY = 0;
        this.posX = 0;
        this.posY = 0;
        this.draggable = true;
        this.headerTitle = headerTitle;
        this.headerImage = unescape(config.skin_server) + unescape(config.skin) + "/visbg.gif";
        this.headerHeight = 20;
        this.moveObserverFunc = null;
        this.upObserverFunc = null;
        this.closeable = true;
        this.handle = null;
        this.parentWindow = null;               
        this.parentX = 0;
        this.parentY = 0;
        this.parentWidth = 0;
        this.parentHeight = 0;
        this.dockable = false;
        this.opacity = 1.0;
        this.isClosed = false;
        this.contentBackground = "#FFFFFF";
        
        if(options)
        {
            if(options["x"])
            {
                this.x = options["x"];
            }
            if(options["y"])
            {
                this.y = options["y"];
            }
            if(options["width"])
            {
                this.width = options["width"];
            }
            if(options["height"])
            {
                this.height = options["height"];
            }
            if(options["headerHeight"])
            {
                this.width = options["headerHeight"];
            }
        
            if(options["draggable"] != null)
            {
                this.draggable = options["draggable"];
            }
            if(options["closeable"])
            {
                this.closeable = options["closeable"];
            }
            if(options["parentWindow"])
            {
                this.parentWindow = options["parentWindow"];
            }
            if(options["dockable"])
            {
                this.dockable = options["dockable"];
            }
            if(options["opacity"])
            {
                this.opacity = options["opacity"];
            }
            if(options["contentBackground"])
            {
                this.contentBackground = options["contentBackground"];
            }
        }
        
        if(typeof(this.parentWindow) == "string")
        {
            this.parentWindow = $(this.parentWindow);    
        }
        
        this.container = document.createElement("DIV");
        this.parentWindow.appendChild(this.container);
        this.container.style.position = "absolute";
        this.container.style.width = this.width + "px";
        this.container.style.height = this.height + "px";
        this.container.style.top = this.y + "px";
        this.container.style.left = this.x + "px";
        this.container.style.zIndex = 10000;
        this.container.style.backgroundColor = "#FFFFFF";
        this.container.style.border = "1px solid #000000";
        this.container.style.fontFamily = "Verdana";
        this.container.style.fontSize = "10pt"; 
        
        if(options["opacity"])
        {
          this.container.style.opacity = this.opacity;
	      this.container.style.filter = "alpha(opacity=" + this.opacity * 100 + ")";   
        }
        
        this.header = document.createElement("DIV");
        this.header.style.height = this.headerHeight + "px";
        this.header.style.backgroundImage = "url(" + this.headerImage + ")";
        this.header.innerHTML = this.headerTitle;
        this.header.style.color = "#FFFFFF";
        this.header.style.paddingLeft = "2px";
       
        if(this.closeable)
        {
            this.handle = document.createElement('IMG');
			this.handle.style.position = 'absolute';
			this.handle.style.top = ((this.headerHeight / 2) - 8) + 'px';
			this.handle.style.left = (this.width - 17) + 'px';
			this.handle.style.width = '13px';
			this.handle.style.height = '13px';
			this.handle.style.cursor = "pointer";
			var src = document.createAttribute('src');
            src.nodeValue = 'images/close.gif';
            this.handle.setAttributeNode(src);
            
			this.header.appendChild(this.handle);
			
			Event.observe(this.handle,"click",this.close.bindAsEventListener(this));
        }
        
        this.container.appendChild(this.header);
        
        this.content = document.createElement("DIV");
        this.content.style.backgroundColor = this.contentBackground;
        this.container.appendChild(this.content);
        
        if(this.draggable)
        {  
           this.header.style.cursor = "move";
            
            this.moveObserverFunc = this.drag.bindAsEventListener(this);
            this.upObserverFunc = this.dragend.bindAsEventListener(this);
            
            Event.observe(this.header,"mousedown",this.dragstart.bindAsEventListener(this));
            Event.observe(document,"mousemove",this.moveObserverFunc);
            Event.observe(document,"mouseup",this.upObserverFunc);
        }
        
        if(this.parentWindow)
        {
            var tmpPos = Position.cumulativeOffset(this.parentWindow);
            this.parentX = tmpPos[0];
            this.parentY = tmpPos[1];
            this.parentWidth = Element.getWidth(this.parentWindow);
            this.parentHeight = Element.getHeight(this.parentWindow);
        }
    },
    
    dragstart : function(event)
    {
        Event.stop(event);
        this.dragging = true;
        this.container.style.opacity = "0.8";
	    this.container.style.filter = "alpha(opacity=80)";
        var pos = Position.cumulativeOffset(this.container);
        this.dragX = this.posX - pos[0];
        this.dragY = this.posY - pos[1];
    },
    
    drag: function(event)
    {
        if(document.all) Event.stop(event);
        var tmpX = Event.pointerX(event);
        var tmpY = Event.pointerY(event);
        
        var tmpPosX = tmpX - this.dragX;
        var tmpPosY = tmpY - this.dragY;
        
        var moved = false;
        
       
       this.posX = tmpX ;
       this.posY = tmpY;        
        
        if(this.dragging)
        {    
            this.move(this.posX - this.dragX,this.posY - this.dragY);            
        }
    },
    
    move: function(x,y)
    {
        this.moveX(x);
        this.moveY(y);
    },
    
    moveX: function(x)
    {
        this.x = x;
        this.container.style.left = this.x + "px";
    },
    
    moveY: function(y)
    {
        this.y = y;
        this.container.style.top = this.y + "px";
    },
    
    dragend: function(event)
    {
        Event.stop(event);
        this.dragging = false;
        this.container.style.opacity = "1.0";
	    this.container.style.filter = "alpha(opacity=100)";
    },
    
    close: function()
    {
        if(this.moveObserverFunc)
        {
            Event.stopObserving(document,"mousemove",this.moveObserverFunc);    
        }
        
        if(this.upObserverFunc)
        {
            Event.stopObserving(document,"mouseup",this.upObserverFunc);        
        }
        
        Element.remove(this.container);
        this.isClosed = true;
    }
}