/*
Curve qport module template
 
NVE
*/

CurveModuleTemplate.prototype = new IModuleTemplate;

function CurveModuleTemplate()
{
    this.__modHostClientArea = null;    // <div> ClientArea of the modHost
    this.__useModClientArea = null;     // <div> ClientArea of the UseMod (is in the clientarea of the modHost)
    this.__editClientArea = null;       // <div> ClientArea of the UseMod's edit. (is in the clientarea of the modHost)
    
    this.__titleBar = null;             // <div> Area in which the title is rendered
    this.__btnToggle = null;            // <img> Image containing the expand/collaps picture
    this.__titleDiv = null;             // <div> containing the name of the module
    this.__txtTitleEdit = null;         // <textfield> in which the name of the module can be changed
    this.__modHeadButtons = null;       // <div> area in which holds the change, edit and close buttons
    this.__btnEdit = null;              // <div> button to invoke the edit area (or return from the edit area)
    this.__btnHelp = null;              // <div> button to show the help popup
    this.__btnDelete = null;            // <div> button to remove the module
    this.__imgCorner = null;               // <div> module top right corner

    this.__isInTitleEditMode = false;   // bool. set to true when the title is in edit mode (__txtTitleEdit is visible and __titleDiv is not)
    this.__titleBeforeEdit = "";        // contains the module title before it was edited
    this.__mouseIn = false;             // if the mouse cursor is within the boundaries of the module
    this.__firstExpand = true;          // keep track if the expanding of the module is the first in this run
    this.__isInToggle = false;          // is busy expanding or collapsing

	this.__imgExpanded = Qport.GUI().LayoutTemplateImgDir + "pijlbeneden.png";     // module titlebar expand arrow
	this.__imgCollapsed = Qport.GUI().LayoutTemplateImgDir + "pijlrechts.png";  // module titlebar collapse arrow    

    CurveModuleTemplate.prototype.Init = function(modHost, p)
    {
        IModuleTemplate.prototype.Init.call(this, modHost, p);
    }

    CurveModuleTemplate.prototype.ReRender = function(newParent)
    {
        if(this.__modHost.IsBeingDragged)
            return;
    
        this.__parent = newParent;

        var brother = this.__parent.childNodes[Qport.GetModHostIndex(this.__modHost, true)];
        if(brother)
            this.__parent.insertBefore(this.__dropShadowArea, brother);
        else
            this.__parent.appendChild(this.__dropShadowArea);
    }

    CurveModuleTemplate.prototype.Render = function()
    {
        IModuleTemplate.prototype.Render.call(this);
        
        this.__dropShadowArea = this.CreateElement("div");
        this.__dropShadowArea.style.marginBottom = "15px";
        this.__dropShadowArea.style.paddingBottom = "5px";        

        // <div> ClientArea of the modhost.
	    this.__modHostClientArea = this.CreateElement("div", this.__dropShadowArea);
        this.__modHostClientArea.style.width = "100%";
        this.__modHostClientArea.style.marginRight = "5px";
        this.__modHostClientArea.style.backgroundColor = "#FFFFFF";
        
        this.__modHostClientArea.style.display = "none";

        // insert the modhost clientarea in the domtree according to the modhost row
        var brother = this.__parent.childNodes[Qport.GetModHostIndex(this.__modHost, true)];
        if(brother)
            this.__parent.insertBefore(this.__dropShadowArea, brother);
        else
            this.__parent.appendChild(this.__dropShadowArea);

        this.__modHostClientArea = Qport.GUI().ConvertToBoxedElement(this.__modHostClientArea).Main;

        this.__modHostClientArea.style.border = "solid 1px #CCCCCC";

        this.__modHostClientArea.style.width = "";
        this.__modHostClientArea.Outer.Mid.style.backgroundColor = "#FFFFFF";
        this.__modHostClientArea.style.overflow = "hidden";
        this.__modHostClientArea.Outer.style.display = "none";
        this.__modHostClientArea.style.display = "block";
        
        this.__setDropShadowVisible(true);

	    // <div> titlebar of the modhost, where title, collapse, drag-and-drop, etcetera is rendered in
	    this.__titleBar = this.CreateElement("div", this.__modHostClientArea);
	    this.__titleBar.style.height = "26px";
	    this.__titleBar.style.margin = "2px";
	    this.__titleBar.style.width = "100%";
	    this.__titleBar = Qport.GUI().ConvertToBoxedElement(this.__titleBar).Main;
	    this.__titleBar.style.height = "";
	    this.__titleBar.Outer.style.overflow = "hidden";
	    
		Qport.AddCssClass(this.__titleBar.Outer.Mid, "SecondaryBack");
	    if(animation){
			
	        Browser.SetPng(this.__titleBar.Outer.Mid, Qport.GUI().LayoutTemplateImgDir + "moduleheader.png");
	        this.__titleBar.Outer.Mid.style.backgroundPosition = "1px 0px";
	        
	        Browser.SetPng(this.__titleBar, Qport.GUI().LayoutTemplateImgDir + "moduleline.png", " repeat-x", " sizingMethod='crop'");
	        this.__titleBar.style.backgroundPosition = "bottom left";        
			
	    // <div> corner at top right of module
		    this.__imgCorner = this.CreateElement("div", this.__titleBar);
		    this.__imgCorner.className = "floatR";
		    this.__imgCorner.style.width = "15px";
		    this.__imgCorner.style.height = "9px";	    
		    Browser.SetPng(this.__imgCorner, Qport.GUI().LayoutTemplateImgDir + "hoekje.png", " no-repeat", " sizingMethod='crop'");	    
		}
	    
	    if(this.__modHost.IsToggleable || this.__modHost.IsFrontEndOnlyToggleable){
	        // <div> toggle button (expand or collapse) module
		    this.__btnToggle = this.CreateElement("div", this.__titleBar);
		    this.__btnToggle.className = "modHeadButtonToggle";
		    
		    Browser.SetHandCursor(this.__btnToggle);
		    Qport.GUI().Fancy.SetTooltip(this.__btnToggle, L()("expand"));
		    
		    eh.Add(this.__btnToggle, "click", new Delegate(this, this.__btnToggleClickEventHandler));
	    }
	    
	    // <div> title of the module
	    this.__titleDiv = this.CreateElement("div");
	    this.__titleDiv.style.marginLeft = "5px"; 
	    this.__titleDiv.style.height = "22px";
	    this.__titleDiv.className = "modHeadTitle";
	    Qport.AddCssClass(this.__titleDiv, "SecondaryTextFore");

		if(this.__modHost.IsDraggable){
		    var dnd = new DragAndDropModule();
		    dnd.Init(this.__modHost);
		    
		    eh.Add(dnd, "startdrag", new Delegate(this, this.__startDragEventHandler));
		    eh.Add(dnd, "enddrag", new Delegate(this, this.__endDragEventHandler));
        }	 	    

	    if(this.__modHost.IsTitleEditable){
	        // <div> title edit textfield
		    this.__txtTitleEdit = this.CreateElement("textfield",this.__titleBar);
		    this.__txtTitleEdit.className = "modHeadTxtTitleEdit";
		    this.__txtTitleEdit.style.display = "none";
		    this.__txtTitleEdit.maxLength = 20;
		    this.__txtTitleEdit.noEventCancelBubble = true;

		    eh.Add(this.__txtTitleEdit, "PressEnter", new Delegate(this, this.__txtTitleEditDoneEventHandler));
		    eh.Add(this.__txtTitleEdit, "blur", new Delegate(this, this.__txtTitleEditDoneEventHandler));
		    eh.Add(this.__txtTitleEdit, "keydown", new Delegate(this, this.__txtTitleKeyDownEventHandler));
		    eh.Add(this.__titleDiv, "dblclick", new Delegate(this, this.__txtTitleClickEventHandler));
	    }

	    // <div> buttons in the head of the module (edit, help, delete)
	    this.__modHeadButtons = this.CreateElement("div", this.__titleBar);
	    this.__modHeadButtons.className = "modHeadButtons";
		if (!animation) {
			this.__modHeadButtons.style.paddingRight="5px";
		}else{
		    this.__modHeadButtons.style.display = "none";
		    
			eh.Add(this.__modHostClientArea.Outer, "mouseover", new Delegate(this, this.__modHostClientAreaMouseOverEventHandler));
	        eh.Add(this.__modHostClientArea.Outer, "mouseout", new Delegate(this, this.__modHostClientAreaMouseOutEventHandler));	    
		}

		this.__titleBar.appendChild(this.__titleDiv);

		this.__renderHeadButtons();
		
		this.SetTitle(this.__modHost.Title);
		this.__modHostClientArea.Owner = this.__modHost;
	    this.__modHost.ClientArea = this.__modHostClientArea;
	    
	    if(this.__modHost.IsExpanded)
	        this.__addUseModClientArea();
	    
	    // initialize colors set with Qport.AddCssClass
	    Qport.OnColorChange();
	    
	    this.__updateToggleImg();
	    
	    this.__modHostClientArea.Outer.style.display = "block";
    }

    CurveModuleTemplate.prototype.SetTitle = function(title, noTooltip)
    {
        IModuleTemplate.prototype.SetTitle.call(this, title);
        
        this.__titleDiv.innerHTML = Browser.EscapeHtml(title);

        // if the moduletitle is custom (so set by the user), then show the original module title as tooltip on the titlediv
        if(!noTooltip && this.__modHost.OrgTitle.toLowerCase() != title.toLowerCase())
            Qport.GUI().Fancy.SetTooltip(this.__titleDiv, this.__modHost.OrgTitle);   
        else
            Qport.GUI().Fancy.RemoveTooltip(this.__titleDiv);     
    }
    
    CurveModuleTemplate.prototype.SetVisible = function(visible)
    {
        IModuleTemplate.prototype.SetVisible.call(this, visible);

        if(visible)
            this.__dropShadowArea.style.display = "block";
        else
            this.__dropShadowArea.style.display = "none";
    }

    // Handle the expand of a module
    CurveModuleTemplate.prototype.Expand = function()
    {
        IModuleTemplate.prototype.Expand.call(this);
        
        this.__updateToggleImg();

        this.__addUseModClientArea();

        if(this.__firstExpand){
            this.__useModClientArea.Outer.style.display = "block";
            this.__isInToggle = false;
        }else{
            var newH = this.__getInnerHeight();

            this.__useModClientArea.Outer.style.overflow = "hidden";
            this.__useModClientArea.Outer.style.display = "block";
            this.__useModClientArea.Outer.style.height = "0px";
			if(animation){
				Qport.GUI().Fancy.ResizeObject(new Delegate(this, this.__modHostFancyResize), this.__useModClientArea.Outer.offsetWidth, 0, this.__useModClientArea.Outer.offsetWidth, newH, new Delegate(this, this.__modHostFancyResizeFinished));
			}
			else {
				Qport.GUI().SetDimensions(this.__useModClientArea.Outer, this.__useModClientArea.Outer.offsetWidth, newH);
				if (typeof(this.__modHostFancyResizeFinished) == "function") {
					this.__modHostFancyResizeFinished();
				}
			}
        }

        this.__firstExpand = false;
        
        Qport.WriteStat("module", "expand");
    }

    // Handle the collapse of a module
    CurveModuleTemplate.prototype.Collapse = function()
    {
        IModuleTemplate.prototype.Collapse.call(this);
        
        this.__updateToggleImg();

        var oldH = this.__useModClientArea.Outer.offsetHeight;

        this.__useModClientArea.Outer.style.overflow = "hidden";
        
        this.__modHostClientArea.style.background = "#FFFFFF";
		if(animation){
        	Qport.GUI().Fancy.ResizeObject(new Delegate(this, this.__modHostFancyResize), this.__useModClientArea.Outer.offsetWidth, oldH, this.__useModClientArea.Outer.offsetWidth, 0, new Delegate(this, this.__modHostFancyResizeFinished));
		}
		else {
			Qport.GUI().SetDimensions(this.__useModClientArea.Outer, this.__useModClientArea.Outer.offsetWidth, 0);
			if(typeof(this.__modHostFancyResizeFinished) == "function"){
				this.__modHostFancyResizeFinished();
			}
		}
        Qport.WriteStat("module", "collapse");
    }

    // render the Edit ClientArea three kind of edit fields can be chosen. Combined, Popup and InPlace
    CurveModuleTemplate.prototype.RenderEdit = function(isInEditModus)
    {
        IModuleTemplate.prototype.RenderEdit.call(this, isInEditModus);

        if(isInEditModus){
	        // editClientArea doesn't exist yet, so create it.
	        if(this.__editClientArea == null){
		        switch(this.__modHost.UseMod.EditType){
			        case ModuleEditType.Combined:
				        if(!this.__modHost.UseMod.IsLoaded)
					        break;
			        case ModuleEditType.InPlace:
			            // <div> div in which the editarea will be rendered
				        this.__editClientArea = this.CreateElement("div", this.__modHostClientArea);
				        this.__editClientArea.style.padding = "5px";
				        this.__editClientArea.className = "editClientArea";
                        this.__editClientArea = Qport.GUI().ConvertToBoxedElement(this.__editClientArea).Main;		
				        break;
			        case ModuleEditType.Popup:
                        // do nothing, because the popup will be rendered realtime when the editmodus is set true
				        break;
		        }
		        
		        this.__modHost.UseMod.EditClientArea = this.__editClientArea;
	        }        

            // render everything for the editing
            switch(this.__modHost.UseMod.EditType){
                case ModuleEditType.Combined:
			        this.__useModClientArea.Outer.style.display = "block";

			        if(this.__modHost.IsToggleable || this.__modHost.IsFrontEndOnlyToggleable)
				        this.__btnToggle.style.display = "none";
					
                    this.__btnEdit.innerHTML = L()("back");    					
					
			        this.__editClientArea.Mid.style.borderTop = "solid 1px #CCCCCC";
			        this.__editClientArea.Outer.style.display = "block";
                    break;
                case ModuleEditType.InPlace:   
                    if(this.__modHost.IsToggleable || this.__modHost.IsFrontEndOnlyToggleable)        
                        this.__btnToggle.style.display = "none";
                    
                    this.__editClientArea.Outer.style.display = "block";
                    
                    if(this.__modHost.IsExpanded)
                        this.__useModClientArea.Outer.style.display = "none";
      
				    this.__btnEdit.innerHTML = L()("back");
                    break;
                case ModuleEditType.Popup:
	                var w = this.__modHost.UseMod.EditPopupWidth;
	                var h = this.__modHost.UseMod.EditPopupHeight; 
    		        
                    if(w == -1)
	                    w = 400;
    		        
	                if(h == -1)
	                    h = 200;

                    var x = 0, y = 0;
                    var modX = this.GetAbsoluteX();
                    var modY = this.GetAbsoluteY();
                    
                    switch(this.__modHost.UseMod.EditLocation){
                        case BorderLayout.North:
                            x = modX;
                            y = modY - h;
                            
                            if(y < 0)
                                y = 0;
                            break;
                        case BorderLayout.South:
                            x = modX;
                            y = modY + this.GetHeight();
                            
                            if(y > Browser.GetWindowHeight())
                                Browser.SetScrolltop(y - Browser.GetWindowHeight());
                            break;
                        case BorderLayout.West:
                            x = modX - w;
                            
                            if(x < 0)
                                x = 0;
                            
                            y = modY;
                            break;
                        case BorderLayout.East:
                            x = modX + this.GetWidth();

                            if(x > Browser.GetWindowWidth())
                                x -= (x - Browser.GetWindowWidth());
                            
                            y = modY;
                            break;
                        case BorderLayout.Center:
                            x = modX;
                            y = modY;
                            break;
                    }

                    if(x < 0)
				        x = 0;
                    
                    if(this.__modHost.UseMod.EditLocation == BorderLayout.PageCenter){
                        x = -1;
                        y = -1;
                    }

                    // create edit popup
			        var p = new Popup();
			        p.Title = L()("edit") + " " + this.__modHost.Title.toLowerCase();
			        p.Width = w;
			        p.Height = h;
			        p.Modal = true;
			        p.Draggable = true;
			        p.Overflow = this.__modHost.UseMod.EditPopupOverflow ? this.__modHost.UseMod.EditPopupOverflow:"";
			        p.HasCloseButton = this.__modHost.UseMod.EditHasCloseButton;
			        
			        p.ModHost = this.__modHost;

			        p.OnUnload = new Delegate(this, this.__editPopupUnloadEventHandler);
		            p.Init();

		            this.__editClientArea = p.ClientArea;
		            this.__editClientArea.Popup = p;
		            this.__modHost.UseMod.EditClientArea = this.__editClientArea;

                    p.Move(x, y);
                    p.Show();
                    break;
            }
        }else{
            switch(this.__modHost.UseMod.EditType){
                case ModuleEditType.Combined:
			        if(!this.__modHost.IsExpanded)
				        this.Collapse();

                    if(this.__modHost.IsToggleable || this.__modHost.IsFrontEndOnlyToggleable)
                        this.__btnToggle.style.display = "block";
 
                    this.__editClientArea.Outer.style.display = "none";            
                    this.__btnEdit.innerHTML = L()("edit");
                    break;
                case ModuleEditType.InPlace:
                    if(this.__modHost.IsExpanded)
                        this.__useModClientArea.Outer.style.display = "block";
                    
                    if(this.__modHost.IsToggleable || this.__modHost.IsFrontEndOnlyToggleable)
                        this.__btnToggle.style.display = "block";
                    
                    this.__editClientArea.Outer.style.display = "none";            
                    this.__btnEdit.innerHTML = L()("edit");
                    break;
                case ModuleEditType.Popup:
			        if(this.__editClientArea && this.__editClientArea.Popup != null){ // without this if statement an endlessloop will be created because unload will call setedit(false), and that one will come here again, etc
				        this.__editClientArea.Popup.Unload();
				        this.__editClientArea.Popup = null;
				    }
                    break;
            }
        }

        this.__modHost.IsInEditModus = isInEditModus;        
    }

    // Remove the module
    CurveModuleTemplate.prototype.Remove = function(callback)
    {
        IModuleTemplate.prototype.Remove.call(this, callback);

        if(this.__modHost.IsExpanded){
            var oldH = this.__useModClientArea.Outer.offsetHeight;

            this.__useModClientArea.Outer.style.overflow = "hidden";

            Qport.GUI().Fancy.ResizeObject(new Delegate(this, this.__modHostFancyResize), this.__useModClientArea.Outer.offsetWidth, oldH, this.__useModClientArea.Outer.offsetWidth, 0, new Delegate(this, this.__removeModHostCallback, callback));
        }else{
            Browser.RemoveNode(this.__dropShadowArea);

            if(typeof(callback) == "function")
                callback();
        }
    }
    
    // Disable the module
    CurveModuleTemplate.prototype.Disable = function()
    {
        IModuleTemplate.prototype.Disable.call(this);
    }
    
    // Enable the module
    CurveModuleTemplate.prototype.Enable = function()
    {
        IModuleTemplate.prototype.Enable.call(this);
    }        

    // local reference to the CreateElement function
    CurveModuleTemplate.prototype.CreateElement = function(elem, parent)
    {
        return IModuleTemplate.prototype.CreateElement.call(this, elem, parent);
    }

    // Calculate the absolute horizontal left of a module    
    CurveModuleTemplate.prototype.GetAbsoluteX = function()
    {
        IModuleTemplate.prototype.Enable.call(this);
        
        return Browser.GetAbsoluteLeft(this.__dropShadowArea);
    }

    // Calculate the absolute vertical top of a module
    CurveModuleTemplate.prototype.GetAbsoluteY = function()
    {
        IModuleTemplate.prototype.Enable.call(this);
        
        return Browser.GetAbsoluteTop(this.__dropShadowArea);
    }

    CurveModuleTemplate.prototype.GetWidth = function()
    {
        IModuleTemplate.prototype.Enable.call(this);
        
        return this.__modHostClientArea.Outer.offsetWidth;
    }

    CurveModuleTemplate.prototype.GetHeight = function()
    {
        IModuleTemplate.prototype.Enable.call(this);

        return this.__modHostClientArea.Outer.offsetHeight;
    }
    
    CurveModuleTemplate.prototype.Dispose = function()
    {
        IModuleTemplate.prototype.Dispose.call(this);
    }
    
    CurveModuleTemplate.prototype.GetDragObject = function()
    {
        IModuleTemplate.prototype.GetDragObject.call(this);
        
        return this.__dropShadowArea;
    }
    
    CurveModuleTemplate.prototype.GetDragHandle = function()
    {
        IModuleTemplate.prototype.GetDragHandle.call(this);
        
        var __dragHandle = this.__titleBar.Outer;
        
        if(typeof(__dragHandle.AllowDrag) != "function")
            __dragHandle.AllowDrag = new Delegate(this, this.__allowDrag);
        
        return __dragHandle;
    }
    
    CurveModuleTemplate.prototype.RenderDropArea = function(dropArea)
    {
        dropArea.style.height = this.__modHostClientArea.Outer.Mid.offsetHeight + "px";
        dropArea.style.border = "inset 1px #333333";
        Browser.SetOpacity(dropArea, 50);
    }
    
    CurveModuleTemplate.prototype.MoveInDom = function(parent)
    {
        IModuleTemplate.prototype.MoveInDom.call(this, parent);
        
        parent.appendChild(this.__dropShadowArea);
    }
    
    // when editing of the module title is done (blur or enter)
    CurveModuleTemplate.prototype.__txtTitleEditDoneEventHandler = function()
    {
        var newTitle = this.__txtTitleEdit.value;

        if(newTitle.length > 0 && newTitle != this.__titleBeforeEdit){
	        this.SetTitle(newTitle);
	        this.__txtTitleEdit.style.display = "none";
	        
	        Qport.SaveModHostTitle(this.__modHost, newTitle, new Delegate(this, this.__titleSaveCallback));
        }else{
            this.SetTitle(this.__titleBeforeEdit);
	        this.__txtTitleEdit.style.display = "none";
	        this.__isInTitleEditMode = false;
        }
    }
    
    // callback after Qport has finished the webservice request to save the title
    CurveModuleTemplate.prototype.__titleSaveCallback = function(r)
    {
        this.__isInTitleEditMode = false;
        
        if(!r){
	        this.SetTitle(this.__titleBeforeEdit);
	        Qport.Alert(L()("titleChangeNotSaved"));
        }       
    }

    // handle click on the title div
    CurveModuleTemplate.prototype.__txtTitleClickEventHandler = function(e)
    {
	    if(!this.__isInTitleEditMode){
		    this.__titleBeforeEdit = this.__titleDiv.innerHTML;
		    this.__titleDiv.innerHTML = "<br/>";
		    this.__txtTitleEdit.style.display = "block";
 
		    this.__txtTitleEdit.value = Browser.UnEscapeHtml(this.__titleBeforeEdit);
		    this.__txtTitleEdit.focus();
		    this.__txtTitleEdit.select();
	    }    
    }
    
    CurveModuleTemplate.prototype.__txtTitleKeyDownEventHandler = function(e)
    {
        if(e.keyCode == 27){
            this.SetTitle(this.__titleBeforeEdit);
	        this.__txtTitleEdit.style.display = "none";
	        this.__isInTitleEditMode = false;
        }
    }
    
    // handle mouseover event on the modhost clientarea
    CurveModuleTemplate.prototype.__modHostClientAreaMouseOverEventHandler = function(e)
    {
        if(!Qport.GUI().IsLoaded)
            return;
    
        this.__mouseIn = true;
        this.__modHeadButtons.style.display = "block";      
    }
    
    // handle mouseout event on the modhost clientarea
    CurveModuleTemplate.prototype.__modHostClientAreaMouseOutEventHandler = function(e)
    {
        if(this.__mouseIn && !this.__modHost.IsInEditModus){
            this.__mouseIn = false;
	        
            qTimeout.setTimeout(750, new Delegate(this, this.__modHostClientAreaMouseOutTimeout));
        }    
    }
    
    // handle the timeout of mouseout event on the modhost clientarea
    CurveModuleTemplate.prototype.__modHostClientAreaMouseOutTimeout = function()
    {
        if(!this.__mouseIn && this.__modHeadButtons)
            this.__modHeadButtons.style.display = "none";
    }
    
    // render the edit, delete, help icons in the modhost header
    CurveModuleTemplate.prototype.__renderHeadButtons = function()
    {        
		if(this.__modHost.IsDeleteable){	
			this.__btnDelete = this.CreateElement("div", this.__modHeadButtons);
			this.__btnDelete.innerHTML = "X";
			this.__btnDelete.className = "modHeadButton";
			this.__btnDelete.style.fontFamily = "Comic Sans MS";

			Qport.AddCssClass(this.__btnDelete, "SecondaryTextFore");
			Qport.GUI().Fancy.SetTooltip(this.__btnDelete, L()("delete"));
			Browser.SetHandCursor(this.__btnDelete);

			eh.Add(this.__btnDelete, "click", new Delegate(this, this.__btnDeleteClickEventHandler));    	
		} 
		
		if(this.__modHost.HasHelp && Qport.Security.ModuleHelpAllowed()){
		    // <div> help button
			this.__btnHelp = this.CreateElement("div", this.__modHeadButtons);
			this.__btnHelp.innerHTML = "?";
			this.__btnHelp.className = "modHeadButton";

			Qport.AddCssClass(this.__btnHelp, "SecondaryTextFore");
			Qport.GUI().Fancy.SetTooltip(this.__btnHelp, L()("help"));
			Browser.SetHandCursor(this.__btnHelp);
			
			eh.Add(this.__btnHelp, "click", new Delegate(this, this.__btnHelpClickEventHandler));
		}    
        
		if(this.__modHost.IsEditable){      
			this.__btnEdit = this.CreateElement("div", this.__modHeadButtons);
			this.__btnEdit.className = "modHeadButton";
			Qport.AddCssClass(this.__btnEdit, "SecondaryTextFore");
			Browser.SetHandCursor(this.__btnEdit);			

			if(this.__modHost.IsInEditModus)
				this.__btnEdit.innerHTML = L()("back");
			else
				this.__btnEdit.innerHTML = L()("edit");

			eh.Add(this.__btnEdit, "click", new Delegate(this, this.__btnEditClickEventHandler));
		}		      
    }
    
    // handle start of module dragging
    CurveModuleTemplate.prototype.__startModuleDragEventHandler = function(e, dnd)
    {
        if(!Qport.GUI().IsLoaded || !this.__isEnabled)
            return;
                
        Qport.GUI().ModHostStartDrag(this.__modHost, e, dnd);
    }
    
    // handle actual dragging of module
    CurveModuleTemplate.prototype.__doModuleDragEventHandler = function(e, dnd)
    {
        Qport.GUI().ModHostDoDrag(e);
    }
    
    // handle end of module dragging
    CurveModuleTemplate.prototype.__endModuleDragEventHandler = function(e, dnd)
    {
        Qport.GUI().ModHostEndDrag(e);
    }

    // handle the click on the edit button
    CurveModuleTemplate.prototype.__btnEditClickEventHandler = function(e)
    {
        if(!Qport.GUI().IsLoaded || !this.__isEnabled)
            return;
    
        this.__modHost.SetEdit(!this.__modHost.IsInEditModus);
    }
    
    // handle the click on the help button
    CurveModuleTemplate.prototype.__btnHelpClickEventHandler = function(e)
    {
        if(!Qport.GUI().IsLoaded || !this.__isEnabled)
            return;
    
        Qport.LoadHelp(this.__modHost);
    }

    // after the modHost has faded, remove it from the domtree
    CurveModuleTemplate.prototype.__removeModHostCallback = function(callback)
    {    
        Browser.RemoveNode(this.__dropShadowArea);
        
        if(typeof(callback) == "function")
            callback();
    }
    
    // handle click on the delete module button
    CurveModuleTemplate.prototype.__btnDeleteClickEventHandler = function(e)
    {
        if(!Qport.GUI().IsLoaded || !this.__isEnabled)
            return;   

        Qport.DeleteModHost(this.__modHost);
    }
    
    // set the right image in the toggle button
    CurveModuleTemplate.prototype.__updateToggleImg = function()
    {
        if(!this.__modHost.IsToggleable && !this.__modHost.IsFrontEndOnlyToggleable)
            return;

	    if(this.__modHost.IsExpanded){	    
		    Qport.GUI().Fancy.SetTooltip(this.__btnToggle, L()("collapse"));
		    Browser.SetPng(this.__btnToggle, this.__imgExpanded, null, "");
	    }else{    	    
		    Qport.GUI().Fancy.SetTooltip(this.__btnToggle, L()("expand"));
		    Browser.SetPng(this.__btnToggle, this.__imgCollapsed, null, "");
	    }		
    }   

    // handle click on the toggle button
    CurveModuleTemplate.prototype.__btnToggleClickEventHandler = function(e)
    {   
        if(this.__isInToggle)
            return;

        this.__isInToggle = true; 
        this.__modHost.Toggle();
    }
    
    // event which is fired when the edit popup is unloaded
    CurveModuleTemplate.prototype.__editPopupUnloadEventHandler = function(p)
    {
        if(this.__modHost.IsInEditModus)
            this.__modHost.SetEdit(false);
    }

    // get the height in pixels of the usemod clientarea
    CurveModuleTemplate.prototype.__getInnerHeight = function()
    {
        var __innerHeight = 0;
        
        var __oldPosition = this.__useModClientArea.Outer.style.position;
        var __oldVisibility = this.__useModClientArea.Outer.style.visibility;
        var __oldDisplay = this.__useModClientArea.Outer.style.display;

        this.__useModClientArea.Outer.style.position = "absolute";
        this.__useModClientArea.Outer.style.visibility = "hidden";
        this.__useModClientArea.Outer.style.display = "block";
        
        __innerHeight = this.__useModClientArea.Outer.offsetHeight;
        
        this.__useModClientArea.Outer.style.display = __oldDisplay;
        this.__useModClientArea.Outer.style.position = __oldPosition;
        this.__useModClientArea.Outer.style.visibility = __oldVisibility;
        
        return __innerHeight;
    }
    
    // do the actual object resizing when collapsing or expanding the module
    CurveModuleTemplate.prototype.__modHostFancyResize = function(w, h)
    {
        this.__useModClientArea.Outer.style.height = h + "px";
    }
    
    // finishing of the fancy resize of collapsing or expanding the module
    CurveModuleTemplate.prototype.__modHostFancyResizeFinished = function()
    {
        this.__isInToggle = false;

        if(this.__modHost.IsExpanded)
            this.__useModClientArea.Outer.style.overflow = "";
        else
            this.__useModClientArea.Outer.style.display = "none";
            
        this.__useModClientArea.Outer.style.height = "";
    }

    // check on a given object if it is allowed to be dragged
    CurveModuleTemplate.prototype.__allowDrag = function(object)
    {
        return (object == this.__titleBar || object == this.__titleBar.Outer.Mid || object == this.__titleDiv);
    }
    
    // add the clientarea of the usemod to the module template
    CurveModuleTemplate.prototype.__addUseModClientArea = function()
    {
        if(!this.__useModClientArea){
            this.__useModClientArea = this.CreateElement("div", this.__modHostClientArea);
            this.__useModClientArea.className = "useModClientArea";
            this.__useModClientArea.style.padding = "3px";
            this.__useModClientArea.style.marginBottom = "5px";
			Qport.AddCssClass(this.__useModClientArea, "PrimaryTextFore");
            this.__useModClientArea = Qport.GUI().ConvertToBoxedElement(this.__useModClientArea).Main;

            this.__useModClientArea.innerHTML = L()("loading");
        }
        
        if(this.__modHost.UseMod && !this.__modHost.UseMod.ClientArea){
            this.__useModClientArea.Owner = this.__modHost.UseMod;
            this.__modHost.UseMod.ClientArea = this.__useModClientArea;
        }
    }
    
    CurveModuleTemplate.prototype.__setDropShadowVisible = function(isVisible)
    {
        if(isVisible && animation){
            Browser.SetPng(this.__dropShadowArea, Qport.GUI().LayoutTemplateImgDir + "moduledropshadow.png");
            this.__dropShadowArea.style.backgroundPosition = "bottom right";
        }else{
            if(BrowserDetect.browser == "Explorer")
                this.__dropShadowArea.style.background = "";
        }
    }
    
    CurveModuleTemplate.prototype.__startDragEventHandler = function(e)
    {
        this.__setDropShadowVisible(false);
    }
    
    CurveModuleTemplate.prototype.__endDragEventHandler = function(e)
    {
        this.__setDropShadowVisible(true);
    }    
}
/*
Curve qport tab template

NVE
*/

CurveTabTemplate.prototype = new ITabTemplate;

function CurveTabTemplate()
{
    CurveTabTemplate.prototype.Init = function(parent, insertIndex)
    {
        ITabTemplate.prototype.Init.call(this, parent, insertIndex);
        
        this.__tab = null;
    }

    CurveTabTemplate.prototype.Render = function()
    {
        ITabTemplate.prototype.Render.call(this);

	    this.__tab = this.CreateElement("div");		

	    if(this.__insertIndex >= 0)
	        this.__parent.insertBefore(this.__tab, this.__parent.childNodes[this.__insertIndex]);
	    else
	        this.__parent.appendChild(this.__tab);

	    this.__tab.style.paddingLeft = "15px";
        this.__tab.style.height = "25px";
        this.__tab.style.lineHeight = "27px";
        this.__tab.style.textAlign = "center";
        this.__tab.className = "floatL";

	    this.__tab = Qport.GUI().ConvertToBoxedElement(this.__tab).Main;

        this.__tab.className = "tab";

	    
	    this.__tab.style.width = "";
	    this.__tab.style.height = "";
	    this.__tab.Outer.style.backgroundColor = "#CCCCCC";
	    this.__tab.Outer.style.marginRight = "7px";
	    
	    Qport.AddCssClass(this.__tab, "SecondaryTextFore");
    	
	    if(animation){
	        Browser.SetPng(this.__tab.Outer, Qport.GUI().LayoutTemplateImgDir + "moduleheader.png");
	        this.__tab.Outer.style.backgroundPosition = "1px 0px";
			
		    var __divCorner = this.CreateElement("div", this.__tab.Outer);
		    __divCorner.className = "floatL";
		    __divCorner.style.width = "15px";
		    __divCorner.style.height = "9px";
	
	        Browser.SetPng(__divCorner, Qport.GUI().LayoutTemplateImgDir + "hoekje.png");
	        __divCorner.style.backgroundPosition = "top right";
		}else{
			this.__tab.style.paddingRight = "13px";
		}
		
        this.__tab.Outer.Mid.className = "floatL";

	    Browser.SetHandCursor(this.__tab.Outer);
		
	    eh.Add(this.__tab.Outer, "click", new Delegate(this, this.__tabClickEventHandler));
	    eh.Add(this.__tab.Outer, "mouseover", new Delegate(this, this.__tabMouseOverEventHandler));
	    eh.Add(this.__tab.Outer, "mouseout", new Delegate(this, this.__tabMouseOutEventHandler));
    }

    CurveTabTemplate.prototype.SetTitle = function(title)
    {
        ITabTemplate.prototype.SetTitle.call(this, title);
        
        this.__tab.innerHTML = Browser.EscapeHtml(title);
    }

    CurveTabTemplate.prototype.SetTooltip = function(tooltip)
    {
        ITabTemplate.prototype.SetTooltip.call(this, tooltip);

        Qport.GUI().Fancy.SetTooltip(this.__tab.Outer, tooltip);
    }

    CurveTabTemplate.prototype.Select = function(opacity)
    {
        ITabTemplate.prototype.Select.call(this);

        Qport.RemoveCssClass(this.__tab.Outer, "SecondaryBack");
        this.__tab.Outer.style.backgroundColor = Qport.GUI().Colors.SecondaryColor.ToCssString();
        Qport.AddCssClass(this.__tab.Outer, "SecondaryBack");
        
        if(opacity)
            Browser.SetOpacity(this.__tab.Outer, opacity);
            
        this.__tab.Outer.style.height = "26px";
    }

    CurveTabTemplate.prototype.Deselect = function(opacity)
    {
        ITabTemplate.prototype.Deselect.call(this);
        
        Qport.RemoveCssClass(this.__tab.Outer, "SecondaryBack");
        this.__tab.Outer.style.backgroundColor = "#CCCCCC";
        
        if(opacity)
            Browser.SetOpacity(this.__tab.Outer, opacity);
            
        this.__tab.Outer.style.height = "25px";        
    }

    CurveTabTemplate.prototype.Remove = function()
    {
        ITabTemplate.prototype.Remove.call(this);

        Browser.RemoveNode(this.__tab.Outer);
    }

    CurveTabTemplate.prototype.CreateElement = function(elem, parent)
    {
        return ITabTemplate.prototype.CreateElement.call(this, elem, parent);
    }
    
    CurveTabTemplate.prototype.GetAbsoluteX = function()
    {
        return Browser.GetAbsoluteLeft(this.__tab.Outer);
    }
    
    CurveTabTemplate.prototype.GetAbsoluteY = function()
    {
        return Browser.GetAbsoluteTop(this.__tab.Outer);
    }    
    
    CurveTabTemplate.prototype.GetWidth = function()
    {
        return this.__tab.Outer.offsetWidth;
    }

    CurveTabTemplate.prototype.GetHeight = function()
    {
        return this.__tab.Outer.offsetHeight;
    }
    
    CurveTabTemplate.prototype.Dispose = function()
    {
        ITabTemplate.prototype.Dispose.call(this);
    }

    CurveTabTemplate.prototype.IsInTab = function(htmlObject)
    {
        return Browser.IsChildNode(this.__tab.Outer, htmlObject);
    }

    CurveTabTemplate.prototype.__tabClickEventHandler = function(e)
    {
        if(typeof(this.onclick) == "function")
            this.onclick(e);
    }

    CurveTabTemplate.prototype.__tabMouseOverEventHandler = function(e)
    {
        if(typeof(this.onmouseover) == "function")
            this.onmouseover(e);
    }

    CurveTabTemplate.prototype.__tabMouseOutEventHandler = function(e)
    {
        if(typeof(this.onmouseout) == "function")
            this.onmouseout(e);
    }
}

// tab for page
function CurveTabPageTemplate()
{
    this.__curveTabTemplate = new CurveTabTemplate();       // instance of tab template
    
    this.__tabArea = null;                                  // reference to the html object in which the generic curvetab wants its content
    this.__titleArea = null;                                // <div> area in which the title will be rendered
    this.__arrowArea = null;                                // <div> area in which the arrow button for edit/delete of tab will be rendered 

    CurveTabPageTemplate.prototype.Init = function(page, parent, insertIndex)
    {
        this.__curveTabTemplate.Init(parent, insertIndex);

        this.Page = page;
        page.Template = this;
        
        this.__selectedTabDiv = null;
        this.__curveTabTemplate.PageTemplate = this;

        eh.Add(this.__curveTabTemplate, "mouseover", new Delegate(this, this.__tabPageMouseOverEventHandler));
        eh.Add(this.__curveTabTemplate, "mouseout", new Delegate(this, this.__tabPageMouseOutEventHandler));
    }

    CurveTabPageTemplate.prototype.Render = function()
    {
        this.__curveTabTemplate.Render();
        
        this.__tabArea = this.__curveTabTemplate.__tab;
        this.__tabArea.Outer.Mid.style.paddingRight = "";
        
        this.__titlearea = this.CreateElement("div", this.__tabArea);
        
        if(Qport.Security.UserId > 0){
            this.__titlearea.className = "floatL";
            
            this.__arrowArea  = this.CreateElement("div", this.__tabArea);
            this.__arrowArea.style.width = "8px";
            this.__arrowArea.style.height = "25px";
            this.__arrowArea.style.marginLeft = "5px";
            this.__arrowArea.style.display = "none";
           
            Browser.SetPng(this.__arrowArea, Qport.GUI().LayoutTemplateImgDir + "tabpijltje.png", " no-repeat", " sizingMethod='crop'");
            this.__arrowArea.style.backgroundPosition = "center right";
            this.__arrowArea.className = "floatL";
            Qport.GUI().Fancy.SetTooltip(this.__arrowArea, L()("manageTabBtn"));

            eh.Add(this.__arrowArea, "click", new Delegate(this, this.__arrowAreaClickEventHandler));
        }
        
        eh.Add(this.__curveTabTemplate, "click", new Delegate(this, this.__tabPageClickEventHandler));
        this.SetTitle(this.Page.Title);

        if(this.Page.Id == Qport.CurrentPage.Id)
            this.Select();
        else
            this.Deselect();
    }

    CurveTabPageTemplate.prototype.Select = function()
    {
        for(var p in tabTemplateStack.List){
            if(tabTemplateStack.List[p].PageTemplate && tabTemplateStack.List[p].PageTemplate.Page && tabTemplateStack.List[p].PageTemplate.Page.Id != Qport.CurrentPage.Id)
                tabTemplateStack.List[p].PageTemplate.Deselect();
        }    
    
        this.__curveTabTemplate.Select((this.Page.Id != Qport.CurrentPage.Id ? 60 : 100));
        
        if(this.Page.Id == Qport.CurrentPage.Id && this.__arrowArea)
            this.__arrowArea.style.display = "block";
    }

    CurveTabPageTemplate.prototype.Deselect = function()
    {
        this.__curveTabTemplate.Deselect(100);
        
        if(this.Page.Id != Qport.CurrentPage.Id && this.__arrowArea)
            this.__arrowArea.style.display = "none";        
    }

    CurveTabPageTemplate.prototype.SetTitle = function(title)
    {
        this.__titlearea.innerHTML = Browser.EscapeHtml(title);
    }

    CurveTabTemplate.prototype.SetTooltip = function(tooltip)
    {
        this.__curveTabTemplate.SetTooltip(tooltip);
    }

    CurveTabPageTemplate.prototype.Remove = function()
    {
        this.__curveTabTemplate.Remove();
    }

    CurveTabPageTemplate.prototype.CreateElement = function(elem, parent)
    {
        return this.__curveTabTemplate.CreateElement(elem, parent);
    }
    
    CurveTabPageTemplate.prototype.GetAbsoluteX = function()
    {
        return this.__curveTabTemplate.GetAbsoluteX();
    }
    
    CurveTabPageTemplate.prototype.GetAbsoluteY = function()
    {
        return this.__curveTabTemplate.GetAbsoluteY();
    }    
    
    CurveTabPageTemplate.prototype.GetWidth = function()
    {
        return this.__curveTabTemplate.GetWidth();
    }

    CurveTabPageTemplate.prototype.GetHeight = function()
    {
        return this.__curveTabTemplate.GetHeight();
    } 
    
    CurveTabPageTemplate.prototype.IsInTab = function(htmlObject)
    {
        return this.__curveTabTemplate.IsInTab(htmlObject);
    }

    CurveTabPageTemplate.prototype.__tabPageClickEventHandler = function(e)
    {   
        if(e.targetobject != this.__arrowArea)
            Qport.TabClickEventHandler(this, new Delegate(this, this.__tabPageClickCallbackEventHandler));
    }

    CurveTabPageTemplate.prototype.__tabPageClickCallbackEventHandler = function()
    {
        this.Select();
    }

    CurveTabPageTemplate.prototype.__tabPageMouseOverEventHandler = function(e)
    {              
        this.Select();
    }

    CurveTabPageTemplate.prototype.__tabPageMouseOutEventHandler = function(e)
    {
        if(this.Page.Id != Qport.CurrentPage.Id)
            this.Deselect();
    }   
    
    CurveTabPageTemplate.prototype.__arrowAreaClickEventHandler = function(e)
    {
        Qport.ShowPageChangeDialog(this);
    }
}
/*
Curve template for rendering Popups

NVE
*/

CurvePopupTemplate.prototype = new IPopupTemplate;

function CurvePopupTemplate()
{
    this.__popup = null;                // instance of Popup object
    
    this.__window = null;               // <div> actual outer window of the popup
    this.__titleBar = null;             // <div> bar in which the title is shown
    this.__closeBtn = null;             // <div> 'x' button at the top right of the popup
    this.__modalDiv = null;             // <div> takes care of 'gray-out' area behind the popup when it's modal
    this.__modalIFrame = null;          // <iframe> makes sure that no select boxes show through the __modalDiv
    this.__iframeWindow = null;         // <iframe> hides select boxes behind non modal popup
	this.__imgCorner = null;			// <div> top right corner
	
    this.__titleHeight = 20;            // height of the title bar of the popup
    this.__footerHeight = 25;            // height of the footer bar of the popup
}

CurvePopupTemplate.prototype.Init = function(popup, w, h, x, y)
{
    IPopupTemplate.prototype.Init.call(this, popup);
    
    this.__popup = popup;
    this.__popup.Template = this;
    
    // <div> outer window
	this.__window = this.CreateElement("div");
    this.__window.style.display = "none";
    document.body.appendChild(this.__window);
	
	this.__window = Qport.GUI().ConvertToBoxedElement(this.__window);
	
	this.__window.style.display = "none";
	this.__window.Main.style.display = "block";
	
	this.__window.style.position = "absolute";
    this.__window.style.zIndex = Qport.ZIndex.Popup;
    this.__window.style.backgroundColor = "#FFFFFF";
    
    // <div> titlebar
    this.__titleBar = this.CreateElement("div", this.__window.Main);
    this.__titleBar.style.margin = "2px";
    this.__titleBar.style.paddingLeft = "5px"; 
    this.__titleBar.style.width = "100%";

    this.__titleBar = Qport.GUI().ConvertToBoxedElement(this.__titleBar);

    this.__titleBar.Main.style.lineHeight = "20px";

	if(animation){
	    Browser.SetPng(this.__titleBar.Mid, Qport.GUI().LayoutTemplateImgDir + "moduleheader.png");
	    this.__titleBar.Mid.style.backgroundPosition = "1px 0px";
	    
	    Browser.SetPng(this.__titleBar.Main, Qport.GUI().LayoutTemplateImgDir + "moduleline.png", " repeat-x", " sizingMethod='crop'");
	    this.__titleBar.Main.style.backgroundPosition = "bottom left";          
    
	    // <div> corner at top right of module
	    this.__imgCorner = this.CreateElement("div", this.__titleBar);
	    this.__imgCorner.style.width = "15px";
	    this.__imgCorner.style.height = "9px";	  
	    this.__imgCorner.style.position = "absolute";
	    this.__imgCorner.style.right = "1px";
	    this.__imgCorner.style.top = "2px";
	    
	    Browser.SetPng(this.__imgCorner, Qport.GUI().LayoutTemplateImgDir + "hoekje.png");
	}
    
    eh.Add(this.__titleBar, "dblclick", new Delegate(this, this.__titleBarDblClickEventHandler));

    this.__titleBar.style.fontWeight = "bold";
    
	Qport.AddCssClass(this.__titleBar.Main, "SecondaryTextFore");    

    if(this.__popup.Draggable){
        var dnd = new DragAndDrop();
        this.__titleBar.AllowDrag = new Delegate(this, this.__titleBarAllowDrag);
        dnd.RegisterAsDND(this.__window, this.__titleBar, null, new Delegate(this, this.__doDragEventHandler), null, true, false, true);
    }

    if(!this.__popup.NoClose){
        // <div> close button
        this.__closeBtn = this.CreateElement("div", this.__titleBar);
        this.__closeBtn.innerHTML = "X";
        this.__closeBtn.style.position = "absolute";
        this.__closeBtn.style.width = "12px";
        this.__closeBtn.style.right = "4px";
        this.__closeBtn.style.top = "4px";
        Qport.GUI().Fancy.SetTooltip(this.__closeBtn, L()("closeWindow"));
        this.__closeBtn.className = "popupCloseBtn";

        eh.Add(this.__closeBtn, "click", new Delegate(this, this.__closeBtnClickEventHandler));	

        Browser.SetHandCursor(this.__closeBtn);

	    Qport.AddCssClass(this.__closeBtn, "SecondaryTextFore");
	}

    // <div> client area in which the contents of the popup will be rendered
    this.__clientArea = this.CreateElement("div", this.__window.Main);

    this.__clientArea.style.height = this.__getInnerHeight() + "px";
    this.__clientArea.style.padding = "5px";
    
    this.__clientArea = Qport.GUI().ConvertToBoxedElement(this.__clientArea).Main;
    
    this.__clientArea.Outer.style.overflow = this.__popup.Overflow;
    this.__clientArea.Outer.style.backgroundColor = "#FFFFFF";
    this.__clientArea.style.wordWrap = "break-word";

    this.__clientArea.style.height = "";
    this.__clientArea.style.width = "";
    
    this.__clientArea.Owner = this.__popup.Owner;
    this.__clientArea.Popup = this.__popup;
    
    // close button
    if (this.__popup.HasCloseButton) {
        this.__footerArea = this.CreateElement("div", this.__window.Main);
        this.__footerArea.style.height = this.__footerHeight + "px";
        this.__footerArea.style.marginRight = "5px";
        
        this.__closeButton = this.CreateElement("button", this.__footerArea);
        this.__closeButton.value = L()("closewindow");
        this.__closeButton.className = "floatR";
        eventHandler.Add(this.__closeButton, "click", new Delegate(this, this.__closeBtnClickEventHandler));
    }    

    this.__window.style.border = "solid 3px";
    
    this.__window.style.backgroundColor = "#FFFFFF";

    // backgroundcolors 
    if(this.__popup.MasterColor.length == 0){
        Qport.AddCssClass(this.__window, "SecondaryDarkBorder");
        Qport.AddCssClass(this.__titleBar.Mid, "SecondaryBack");
    }else{
        this.__window.style.border = "solid 2px " + this.__popup.MasterColor;
        this.__titleBar.Mid.style.backgroundColor = this.__popup.MasterColor;
    }

	this.__popup.Resize(w, h);	
    this.__popup.Move(x, y);

    this.__popup.ClientArea = this.__clientArea;
    
    eh.Add(Qport, "resize", new Delegate(this, this.__qportResizeEventHandler));
}

CurvePopupTemplate.prototype.SetVisible = function(visible, callback)
{
    IPopupTemplate.prototype.SetVisible.call(this, visible);

    this.__fixZIndexFrameScopingIssues();
    this.RenderModal();     
    
    if(visible){
        if(this.__window.style.display != "block")
            this.__window.style.display = "block";

        if(typeof(callback) == "function")
           callback();          
    
        Qport.OnColorChange();
        
        if(this.__popup.Modal)
            Browser.SetScrolltop(0);        
    }else if(!visible){
        this.__window.style.display = "none";
        
        if(typeof(callback) == "function")
            callback();
    }
}

CurvePopupTemplate.prototype.Resize = function(w, h)
{
    IPopupTemplate.prototype.Resize.call(this, w, h);

    if(this.__window.Outer)
        Qport.GUI().SetDimensions(this.__window.Outer, w, h + 4);
    else
        Qport.GUI().SetDimensions(this.__window, w, h + 4);
    
    this.__clientArea.Outer.style.height = this.__getInnerHeight(h) + "px";
    
    if(this.__iframeWindow)
        Qport.GUI().SetDimensions(this.__iframeWindow, w, h);
}

CurvePopupTemplate.prototype.Move = function(x, y)
{
    IPopupTemplate.prototype.Move.call(this, x, y);
	
	if(y < 0)
	    y = 0;

    /*
	If popup would showup below bottom of page, then position it at the bottom, but only do that if it
	fits the height of the browser window, because else the top of the popup would disappear behind the top 
	of the browser window.
	*/
	var maxY = Qport.GUI().GetHeight();
	
	if((y + this.__popup.Height) >= maxY && ((this.__popup.Height + 10) < maxY))
	    y = (maxY - this.__popup.Height);// - 10; // -10 = space between popup and bottom of page

    var __actualW = Browser.GetWindowWidth() + Browser.GetScrollleft();
	if((x + this.__popup.Width) > __actualW)
	    x = (__actualW - this.__popup.Width);// - 10; // -10 = space between popup and side of page	    	

    Qport.GUI().SetLocation(this.__window, x, y);
    
    if(this.__iframeWindow)
        Qport.GUI().SetLocation(this.__iframeWindow, x, y);
}

CurvePopupTemplate.prototype.Unload = function(callback)
{
    IPopupTemplate.prototype.Unload.call(this);

    if(typeof(callback) == "function")
        callback();
}

CurvePopupTemplate.prototype.Dispose = function()
{
    IPopupTemplate.prototype.Dispose.call(this);

    var __win = this.__window;
    Utilities.DisposeObject(this);
    Browser.RemoveNode(__win);
}

CurvePopupTemplate.prototype.SetTitle = function(title)
{
    IPopupTemplate.prototype.SetTitle.call(this, title);
    
    this.__titleBar.Main.innerHTML = title;
}

CurvePopupTemplate.prototype.CreateElement = function(elem, parent)
{
    return IPopupTemplate.prototype.CreateElement.call(this, elem, parent);
}

CurvePopupTemplate.prototype.Focus = function()
{
    IPopupTemplate.prototype.Focus.call(this);

    this.__window.style.zIndex = this.__popup.Modal ? Qport.ZIndex.ModalPopup : (Qport.ZIndex.Popup + 1);
    this.__fixZIndexFrameScopingIssues();
}

CurvePopupTemplate.prototype.Blur = function()
{
    IPopupTemplate.prototype.Blur.call(this);

    this.__window.style.zIndex = Qport.ZIndex.Popup;
    this.__fixZIndexFrameScopingIssues();
}

CurvePopupTemplate.prototype.RenderModal = function()
{
    IPopupTemplate.prototype.RenderModal.call(this);

	if(this.__popup.Modal){
	    this.__window.style.zIndex = Qport.ZIndex.ModalPopup;

		if(Qport.GUI().PopupModalDiv == null){
		    // <div> modal "grayed-out" area
			this.__modalDiv = this.CreateElement("div", document.body);
			this.__modalDiv.style.zIndex = Qport.ZIndex.ModalPopupGrayedoutLayover;
			this.__modalDiv.style.position = "absolute";
			this.__modalDiv.style.backgroundColor = "#000000";			
			this.__modalDiv.style.left = "0px";
			this.__modalDiv.style.top = "0px";
			
			Browser.SetOpacity(this.__modalDiv, 60);
            Qport.GUI().PopupModalDiv = this.__modalDiv;            

            /*
            This is a firefix (firefox fix ;))
            Because firefox doesn't display the cursor in a textfield when an iframe is under it,
            because firefox actually renders the iframe above the zindex of the cursor in the textfield
            */
            if(BrowserDetect.browser.toLowerCase() != "firefox"){
		        this.__modalIFrame = this.CreateElement("iframe", document.body);
		        this.__modalIFrame.id = "modaliframe";
		        this.__modalIFrame.style.zIndex = Qport.ZIndex.ModalPopupGrayedoutLayover - 1;
		        this.__modalIFrame.style.position = "absolute";		
		        this.__modalIFrame.style.left = "0px";
		        this.__modalIFrame.style.top = "0px";
		        this.__modalIFrame.style.border = "0px";

		        Browser.SetOpacity(this.__modalIFrame, 50);	
		        Qport.GUI().PopupModalIFrame = this.__modalIFrame;
		    }
		}else{
		    this.__modalDiv = Qport.GUI().PopupModalDiv;
		    this.__modalIFrame = Qport.GUI().PopupModalIFrame;
		}

		if(this.__popup.IsVisible){
		    this.__modalResize();
		
		    if(this.__modalDiv.style.display != "block"){
		        if(Qport.GUI().IsLoaded){
		            Browser.SetOpacity(this.__modalDiv, 0);
                    this.__modalDiv.style.display = "block";
                    
                    Qport.GUI().Fancy.FadeMax = 30;
                    Qport.GUI().Fancy.FadeObject(this.__modalDiv, 'in', function(){
                        Qport.GUI().Fancy.FadeMax = 100;
                    });
                }else
                    this.__modalDiv.style.display = "block";
            }
            
            if(this.__modalIFrame)
                this.__modalIFrame.style.display = "block";
		}else{
		    if(this.__popup.IsOnlyModal()){
                this.__modalDiv.style.display = "none";
                
                if(this.__modalIFrame)
                    this.__modalIFrame.style.display = "none";
            }else
                this.__popup.FocusPreviousModal();
		}
	}else{
	    if(!this.__popup.ModalIsPresent()){
            if(this.__modalDiv)
                this.__modalDiv.style.display = "none";

            if(this.__modalIFrame)
                this.__modalIFrame.style.display = "none";
        }
	}
}

IPopupTemplate.prototype.IsPartOfPopup = function(object)
{
    return this.__window == object || Browser.IsChildNode(this.__window, object);
}

// fired to check if the titlebar is allowed to be dragged from the given html object
CurvePopupTemplate.prototype.__titleBarAllowDrag = function(object)
{
    return Browser.IsChildNode(this.__titleBar, object);
}

// fired during dragging of the popup
CurvePopupTemplate.prototype.__doDragEventHandler = function(e)
{
    this.__popup.Move(e.x - Browser.GetScrollleft(), e.y - Browser.GetScrolltop());
}

// fired on click of the close button
CurvePopupTemplate.prototype.__closeBtnClickEventHandler = function(e)
{
    this.__popup.Unload();
}

// fix problems of selectboxes and activex components going through html objects
CurvePopupTemplate.prototype.__fixZIndexFrameScopingIssues = function()
{
    /*
    This is a firefix (firefox fix ;))
    Because firefox doesn't display the cursor in a textfield when an iframe is under it,
    because firefox actually renders the iframe above the zindex of the cursor in the textfield
    */
    if(BrowserDetect.browser.toLowerCase() == "firefox")
        return;

    if(!this.__popup.Modal){
        // only if not modal, because when modal it's already fixed by the grayed-out-area

        if(!this.__iframeWindow){
            this.__iframeWindow = this.CreateElement("iframe");
            this.__iframeWindow.id = "popupIframe" + this.__popup.Id;
            this.__iframeWindow.style.display = "none";
            this.__iframeWindow.style.position = "absolute";
            this.__iframeWindow.style.border = "0px";
            document.body.appendChild(this.__iframeWindow);
        }
        
        if(this.__popup.IsVisible){
            Qport.GUI().SetDimensions(this.__iframeWindow, this.__window.offsetWidth, this.__window.offsetHeight);
            Qport.GUI().SetLocation(this.__iframeWindow, this.__popup.X, this.__popup.Y);
            this.__iframeWindow.style.zIndex = this.__window.style.zIndex - 1;
            this.__iframeWindow.style.display = "block";
        }else
            this.__iframeWindow.style.display = "none";
    }else if(this.__iframeWindow)
        this.__iframeWindow.style.display = "none";
}

// fired when the browser window is resized
CurvePopupTemplate.prototype.__qportResizeEventHandler = function(e)
{
    this.__modalResize();
}

// resize the modal window according to the actual dimensions of qport
CurvePopupTemplate.prototype.__modalResize = function()
{
    Qport.GUI().CalculateQportDimensions();

    if(this.__modalDiv){
        this.__modalDiv.style.width = Qport.GUI().ActualWidth;
        this.__modalDiv.style.height = Qport.GUI().ActualHeight;
    }

    if(this.__modalIFrame){
        this.__modalIFrame.style.width = Qport.GUI().ActualWidth;
        this.__modalIFrame.style.height = Qport.GUI().ActualHeight;
    }
}

// fired on double mouse click on the titlebar
CurvePopupTemplate.prototype.__titleBarDblClickEventHandler = function(e)
{
    this.__popup.ToggleMaximize();
}

/**
 * @return height of the footer (only if has close button) 
 */
CurvePopupTemplate.prototype.__getFooterHeight = function() {
    return (this.__popup.HasCloseButton ? this.__footerHeight : 0);
};

/**
 * @param {Number} height Optional argument for height
 * @return the height of the inner client area 
 */
CurvePopupTemplate.prototype.__getInnerHeight = function(height) {
    return (height ? height: this.__popup.Height) - this.__titleHeight - this.__getFooterHeight();
};